Simplify api

shootingfly · Jul 25, 2020 · a93fc2c · a93fc2c
1 parent 4342b4f
commit a93fc2c
Show file tree

Hide file tree

Showing 8 changed files with 136 additions and 164 deletions.
diff --git a/README.md b/README.md
@@ -29,47 +29,48 @@ page = Water::Page.new do
   doctype
   html {
     head {
-      meta %(name="viewport" content="width=device-width,initial-scale=1.0")
+      meta %|name="viewport" content="width=device-width,initial-scale=1.0"|
       title "This is a tile"
-      style {
-        lm <<-CSS
-          h1 { color: red; }
-          p { color: green; }
-        CSS
+      style %q{
+        h1 {
+          color: red;
+        }
+
+        p {
+          color: green;
+        }
       }
-      script {
-        lm <<-'JAVASCRIPT'
-          alert("Hello");
-          system.logger("\n");
-        JAVASCRIPT
+      script %q{
+        alert("Hello");
+        system.logger("\n");
       }
-      link %(rel="stylesheet" media="screen")
+      link %|rel="stylesheet" media="screen"|
     }
     body {
-      h1 "This is a water file", with: %(class="Hello")
+      h1 %|class="Hello"|, "This is a water file"
       h2 "This is blue"
-      input %(type="checkbox" checked=false)
-      input %(type="checkbox" checked=true)
-      input %(type="checkbox" checked="checked")
-      span %(id="some-id" class="classname") {
-        div %(id="Hello" class="world world2") {
+      input %|type="checkbox" checked=false|
+      input %|type="checkbox" checked=true|
+      input %|type="checkbox" checked="checked"|
+      span %|id="some-id" class="classname"| {
+        div %|id="Hello" class="world world2"| {
           some_var = "hello world haha"
-          span %(data-some-var="some_var" two-attr="fun") {
-            l "and a hello"
+          span %|data-some-var="some_var" two-attr="fun"| {
+            text "and a hello"
           }
-          span "text inside of &lt;p&gt", with: %(class="deep_nested")
-          lm <<-HTML
-            #{Process.pid}
-            text node
-            other text node
+          span %|class="deep_nested"|, "text inside of &lt;p&gt"
+          text <<-HTML
+          #{Process.pid}
+          text node
+          other text node
           HTML
         }
       }
-      div %(class="row") {
-        div %(class="col-md-9") {
-          numbers = [1, 2]
-          numbers.each do |index|
-            h2 %(class="right_#{index}") {
+      div %|class="row"| {
+        div %|class="col-md-9"| {
+          users = [1, 2]
+          users.each_with_index do |index|
+            h2 %|class="right_#{index}"| {
               div {
                 span "Hello"
               }
@@ -78,7 +79,7 @@ page = Water::Page.new do
         }
       }
       br
-      l "&nbsp;" * 4
+      text "&nbsp;" * 4
       hello_world "Hello"
       span Process.pid
     }
@@ -94,13 +95,18 @@ puts page
     <meta name="viewport" content="width=device-width,initial-scale=1.0">
     <title>This is a tile</title>
     <style>
-      h1 { color: red; }
-      p { color: green; }
-    </style>
+        h1 {
+          color: red;
+        }
+
+        p {
+          color: green;
+        }
+      </style>
     <script>
-      alert("Hello");
-      system.logger("\n");
-    </script>
+        alert("Hello");
+        system.logger("\n");
+      </script>
     <link rel="stylesheet" media="screen">
   </head>
   <body>
@@ -115,7 +121,7 @@ puts page
           and a hello
         </span>
         <span class="deep_nested">text inside of &amp;lt;p&amp;gt</span>
-        17925
+        14674
         text node
         other text node
       </div>
@@ -137,7 +143,7 @@ puts page
     <br>
     &nbsp;&nbsp;&nbsp;&nbsp;
     <hello-world>Hello</hello-world>
-    <span>17925</span>
+    <span>14674</span>
   </body>
 </html>
 ```

diff --git a/spec/example.cr b/spec/example.cr
diff --git a/spec/fixtures/dummy.html b/spec/fixtures/dummy.html
@@ -4,10 +4,14 @@
     <meta name="viewport" content="width=device-width,initial-scale=1.0">
     <title>This is a title</title>
     <style>
-      h1 {color: red;}
-      p {color: green;}
+      h1 {
+        color: red;
+      }
+
+      p {
+        color: green;
+      }
     </style>
-    <style>h2 {color: blue;}</style>
   </head>
   <body>
     <!--Visible multi-line comment
@@ -47,7 +51,7 @@ <h2>This is blue</h2>
     <div id="amazing-div" some-attr="hello">
     </div>
     <!--This is a visible comment-->
-    <script>var num1 = 8*4;</script>
+    <script type="text/script">var num1 = 8*4;</script>
     <script>
       var num2 = 8 * 3;
       alert("8 * 3 + 8 * 4 = " + (num1 + num2));

diff --git a/spec/fixtures/dummy.water b/spec/fixtures/dummy.water
@@ -1,63 +1,63 @@
 doctype
 html {
   head {
-    meta %(name="viewport" content="width=device-width,initial-scale=1.0")
+    meta %|name="viewport" content="width=device-width,initial-scale=1.0"|
     title "This is a title"
-    style {
-      lm <<-CSS
-        h1 {color: red;}
-        p {color: green;}
-      CSS
-    }
-    style "h2 {color: blue;}"
+    style "
+      h1 {
+        color: red;
+      }
+
+      p {
+        color: green;
+      }
+    "
   }
   body {
-    lm <<-HTML
-      <!--Visible multi-line comment
-            <span>this is wrapped in a comment</span>
-          -->
-      <!--[if IE]>
-            <p>Dat browser is old.</p>
-          <![endif]-->
+    text <<-HTML
+    <!--Visible multi-line comment
+          <span>this is wrapped in a comment</span>
+        -->
+    <!--[if IE]>
+          <p>Dat browser is old.</p>
+        <![endif]-->
     HTML
     h1 "This is a water file"
     h2 "This is blue"
-    input %(type="checkbox")
-    input %(type="checkbox" checked)
-    input %(type="checkbox" checked="checked")
-    span %(id="some-id" class="classname") {
-      div %(id="hello" class="world world2") {
+    input %|type="checkbox"|
+    input %|type="checkbox" checked|
+    input %|type="checkbox" checked="checked"|
+    span %|id="some-id" class="classname"| {
+      div %|id="hello" class="world world2"| {
         span {
-          span "and a hello", with: %(data-some-var="hello world haha" two-attr="fun")
+          span %|data-some-var="hello world haha" two-attr="fun"|, "and a hello"
           span {
-            span %(class="deep_nested") {
+            span %|class="deep_nested"| {
               para {
-                l "text inside of &lt;p&gt;"
+                text "text inside of &lt;p&gt;"
               }
-              lm <<-HTML
-                18276
-                text node
-                other text node
+              text <<-HTML
+              18276
+              text node
+              other text node
               HTML
             }
           }
         }
-        span %(class="alongside" pid="18276") {
-          div %(id="with-id" pid="18276") {
+        span %|class="alongside" pid="18276"| {
+          div %|id="with-id" pid="18276"| {
             span "ah"
             span "oh"
           }
         }
       }
     }
-    div %(id="amazing-div" some-attr="hello") {}
-    l "<!--This is a visible comment-->"
-    script "var num1 = 8*4;"
-    script {
-      lm <<-JAVASCRIPT
-        var num2 = 8 * 3;
-        alert("8 * 3 + 8 * 4 = " + (num1 + num2));
-      JAVASCRIPT
-    }
+    div %|id="amazing-div" some-attr="hello"| { }
+    text "<!--This is a visible comment-->"
+    script %|type="text/script"|, "var num1 = 8*4;"
+    script %|
+      var num2 = 8 * 3;
+      alert("8 * 3 + 8 * 4 = " + (num1 + num2));
+    |
   }
 }
diff --git a/src/water/kilts/embedder.cr b/src/water/kilts/embedder.cr
@@ -1,5 +1,3 @@
-puts <<-Crystal
-  Water::Page.new do
-    #{File.read(ARGV[0])}
-  end
-Crystal
+puts "Water::Page.new do"
+puts File.read(ARGV[0])
+puts "end"
diff --git a/src/water/tag.cr b/src/water/tag.cr
@@ -14,22 +14,37 @@ module Water
       @indents << @current_indent
     end
 
-    def l(content)
-      @lines << content.to_s
-      @indents << @current_indent
-    end
-
-    def lm(content : String)
-      content.split("\n").each do |line|
+    def text(content)
+      content.to_s.split("\n").each do |line|
         @lines << line
-        @indents << @current_indent - 1
+        @indents << @current_indent
       end
     end
 
     def strip_attributes(attributes : String)
       attributes == "" ? "" : " #{attributes}"
     end
 
+    def script(attributes, content)
+      @lines << "<script #{attributes}>#{content}</script>"
+      @indents << @current_indent
+    end
+
+    def script(content)
+      @lines << "<script>#{content}</script>"
+      @indents << @current_indent
+    end
+
+    def style(attributes, content)
+      @lines << "<style #{attributes}>#{content}</style>"
+      @indents << @current_indent
+    end
+
+    def style(content)
+      @lines << "<style>#{content}</style>"
+      @indents << @current_indent
+    end
+
     def strip_content(content)
       ::HTML.escape(content.to_s)
     end

diff --git a/src/water/tag/custom_tag.cr b/src/water/tag/custom_tag.cr
@@ -11,10 +11,15 @@ module Water
         @indents << @current_indent
       end
 
-      def {{tag.id}}(content, with attributes = "")
+      def {{tag.id}}(attributes, content)
         @lines << "<{{tag.id.gsub(/_/, "-")}}#{strip_attributes(attributes)}>#{strip_content(content)}</{{tag.id.gsub(/_/, "-")}}>"
         @indents << @current_indent
       end
+
+      def {{tag.id}}(content)
+        @lines << "<{{tag.id.gsub(/_/, "-")}}>#{strip_content(content)}</{{tag.id.gsub(/_/, "-")}}>"
+        @indents << @current_indent
+      end
     end
   end
 end