Updated TODO, examples and generated HTML

abw · Nov 10, 2009 · f48d00e · f48d00e
1 parent 08a1241
commit f48d00e
Show file tree

Hide file tree

Showing 6 changed files with 217 additions and 6 deletions.
diff --git a/TODO b/TODO
@@ -22,4 +22,16 @@ brackets: () [] {} <>
 punctuation: , ; 
 
 
-Delete position() and other source methods from T::Type::Text
+Delete position() and other source methods from T::Type::Text
+
+Change 'block' element type to something non-generic like 'tt_block' 
+(and prohibit tt_ prefixes on keywords) to avoid clash with 'block'
+keywords directives.  The grammar always chooses the block keyword over
+the core block element.
+
+Make if look for elsif/else
+
+Handle the end / } terminator.  If it's 'end' then we shouldn't parse on
+to the next elsif / else.
+
+Figure out what non-chaining infix operators should do.
diff --git a/bin/tt3_tokens b/bin/tt3_tokens
@@ -39,10 +39,11 @@ __DATA__
 div.template {
     font-family: Courier, monospace;
     font-size: 14px;
+    line-height: 20px;
     color: #444;
     white-space: pre;
     background-color: #ddd;
-    border: 1px solid #ccc;
+    border: 1px solid #aaa;
     padding: 5px;
 }
 
@@ -59,7 +60,8 @@ span.keyword {
     color: #a44;
 }
 
-span.binop {
+span.binop,
+span.operator {
     color: #a44;
 }
 
@@ -82,7 +84,25 @@ span.comment {
 span.tag_start,
 span.tag_end {
     color: #aaa;
+/*     display: none; */
 }
+span.tag {
+    padding: 2px 1px;
+    border: 1px solid #aaa;
+}
+span.nl {
+    display: block;
+    float: left;
+    margin: 1px 0 0 0;
+    width: 2px;
+    height: 19px;
+    border: 1px solid #aaa;
+    border-right: 0;
+    border-left: 0;
+    background-color: white;
+    display: none;
+}
+
     </style>
   </head>
   <body>

diff --git a/examples/complex.tt3 b/examples/complex.tt3
@@ -2,16 +2,25 @@ Hello [% name or 'World' %]!
 
 [% if foo %]
 blah blah blah some text
-[%  %]
+[% end %]
 
-[% do %]
 blah blah blah
-[% %]
+[% if x < 10 { 
+     y z
+   }
+%]
 
 [% x + 5 * 10 - foo.bar.bar %]
 
 [%  foo      # this is a comment
     bar      # this is also a comment
 %]
 
+[%  do;
+        foo
+        +
+        bar
+        baz
+    end
+%]
 The end
diff --git a/examples/expr.tt3 b/examples/expr.tt3
@@ -0,0 +1 @@
+[% a + 5 * 10 - foo.bar.bar %]
diff --git a/html/complex.html b/html/complex.html
@@ -0,0 +1,104 @@
+<html>
+  <head>
+    <title>TT3 Template Tokens: examples/complex.tt3</title>
+    <style>
+div.template {
+    font-family: Courier, monospace;
+    font-size: 14px;
+    line-height: 20px;
+    color: #444;
+    white-space: pre;
+    background-color: #ddd;
+    border: 1px solid #aaa;
+    padding: 5px;
+}
+
+span.text {
+    color: #88a;
+}
+
+span.tag {
+    font-weight: bold;
+    background-color: #f8f8f8;
+}
+
+span.keyword {
+    color: #a44;
+}
+
+span.binop,
+span.operator {
+    color: #a44;
+}
+
+span.number,
+span.squote,
+span.dquote {
+    color: #44a;
+}
+
+span.word {
+    color: #4a4;
+/*    font-weight: bold; */
+}
+
+span.whitespace,
+span.comment {
+    color: #888;
+}
+
+span.tag_start,
+span.tag_end {
+    color: #aaa;
+/*     display: none; */
+}
+span.tag {
+    padding: 2px 1px;
+    border: 1px solid #aaa;
+}
+span.nl {
+    display: block;
+    float: left;
+    margin: 1px 0 0 0;
+    width: 2px;
+    height: 19px;
+    border: 1px solid #aaa;
+    border-right: 0;
+    border-left: 0;
+    background-color: white;
+    display: none;
+}
+
+    </style>
+  </head>
+  <body>
+    <div class="template tt3">
+<span class="text">Hello </span><span class="tag"><span class="tag_start">[%</span><span class="whitespace"> </span><span class="word">name</span><span class="whitespace"> </span><span class="binop">or</span><span class="whitespace"> </span><span class="squote">'World'</span><span class="whitespace"> </span><span class="tag_end">%]</span></span><span class="text">!
+
+</span><span class="tag"><span class="tag_start">[%</span><span class="whitespace"> </span><span class="keyword">if</span><span class="whitespace"> </span><span class="word">foo</span><span class="whitespace"> </span><span class="tag_end">%]</span></span><span class="text">
+blah blah blah some text
+</span><span class="tag"><span class="tag_start">[%</span><span class="whitespace"> </span><span class="keyword">end</span><span class="whitespace"> </span><span class="tag_end">%]</span></span><span class="text">
+
+blah blah blah
+</span><span class="tag"><span class="tag_start">[%</span><span class="whitespace"> </span><span class="keyword">if</span><span class="whitespace"> </span><span class="word">x</span><span class="whitespace"> </span><span class="binop"><</span><span class="whitespace"> </span><span class="number">10</span><span class="whitespace"> </span><span class="punctuation">{</span><span class="whitespace">  
+<span class="nl"></span>     </span><span class="word">y</span><span class="whitespace"> </span><span class="word">z</span><span class="whitespace"> 
+<span class="nl"></span>   </span><span class="punctuation">}</span><span class="whitespace"> 
+<span class="nl"></span></span><span class="tag_end">%]</span></span><span class="text">
+
+</span><span class="tag"><span class="tag_start">[%</span><span class="whitespace"> </span><span class="word">x</span><span class="whitespace"> </span><span class="operator">+</span><span class="whitespace"> </span><span class="number">5</span><span class="whitespace"> </span><span class="operator">*</span><span class="whitespace"> </span><span class="number">10</span><span class="whitespace"> </span><span class="operator">-</span><span class="whitespace"> </span><span class="word">foo</span><span class="binop">.</span><span class="word">bar</span><span class="binop">.</span><span class="word">bar</span><span class="whitespace"> </span><span class="tag_end">%]</span></span><span class="text">
+
+</span><span class="tag"><span class="tag_start">[%</span><span class="whitespace">  </span><span class="word">foo</span><span class="whitespace">      # this is a comment 
+<span class="nl"></span>    </span><span class="word">bar</span><span class="whitespace">      # this is also a comment 
+<span class="nl"></span></span><span class="tag_end">%]</span></span><span class="text">
+
+</span><span class="tag"><span class="tag_start">[%</span><span class="whitespace">  </span><span class="keyword">do</span><span class="punctuation">;</span><span class="whitespace"> 
+<span class="nl"></span>        </span><span class="word">foo</span><span class="whitespace"> 
+<span class="nl"></span>        </span><span class="operator">+</span><span class="whitespace"> 
+<span class="nl"></span>        </span><span class="word">bar</span><span class="whitespace"> 
+<span class="nl"></span>        </span><span class="word">baz</span><span class="whitespace"> 
+<span class="nl"></span>    </span><span class="keyword">end</span><span class="whitespace"> 
+<span class="nl"></span></span><span class="tag_end">%]</span></span><span class="text">
+The end</span>
+    </div>
+  </body>
+</html>
diff --git a/html/expr.html b/html/expr.html
@@ -0,0 +1,65 @@
+<html>
+  <head>
+    <title>TT3 Template Tokens: examples/expr.tt3</title>
+    <style>
+div.template {
+    font-family: Courier, monospace;
+    font-size: 14px;
+    color: #444;
+    white-space: pre;
+    background-color: #ddd;
+    border: 1px solid #aaa;
+    padding: 5px;
+}
+
+span.text {
+    color: #88a;
+}
+
+span.tag {
+    font-weight: bold;
+    background-color: #f8f8f8;
+}
+
+span.keyword {
+    color: #a44;
+}
+
+span.binop,
+span.operator {
+    color: #a44;
+}
+
+span.number,
+span.squote,
+span.dquote {
+    color: #44a;
+}
+
+span.word {
+    color: #4a4;
+/*    font-weight: bold; */
+}
+
+span.whitespace,
+span.comment {
+    color: #888;
+}
+
+span.tag_start,
+span.tag_end {
+    color: #aaa;
+}
+span.tag {
+    padding: 1px 3px;
+    border: 1px solid #aaa;
+}
+    </style>
+  </head>
+  <body>
+    <div class="template tt3">
+<span class="tag"><span class="tag_start">[%</span><span class="whitespace"> </span><span class="word">a</span><span class="whitespace"> </span><span class="operator">+</span><span class="whitespace"> </span><span class="number">5</span><span class="whitespace"> </span><span class="operator">*</span><span class="whitespace"> </span><span class="number">10</span><span class="whitespace"> </span><span class="operator">-</span><span class="whitespace"> </span><span class="word">foo</span><span class="binop">.</span><span class="word">bar</span><span class="binop">.</span><span class="word">bar</span><span class="whitespace"> </span><span class="tag_end">%]</span></span><span class="text">
+</span>
+    </div>
+  </body>
+</html>