Change echo syntax to use {% and %}

This simplifies lexing and parsing, and there are no more special lexing rules for double-closed JSON objects }}.
johnridesabike · Apr 24, 2024 · 6150516 · 6150516
1 parent 09b270a
commit 6150516
Show file tree

Hide file tree

Showing 52 changed files with 830 additions and 961 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -2,8 +2,10 @@
 
 Most changes are breaking changes.
 
-## Latest
+## 0.25.0
 
+- Echo syntax is now the same as other expressions, `{%` and `%}`. Unescaped
+  echoes use `{{%` and `%}}`.
 - All decode errors are reported instead of only the first one.
 - Decode errors are implemented in a promise type instead of raising an
   exception.

diff --git a/docs/_includes/layout.acutis b/docs/_includes/layout.acutis
@@ -23,17 +23,17 @@
 <!DOCTYPE html>
 <html lang="en-US">
   <head>
-    <title>{{ title }}</title>
+    <title>{% title %}</title>
     {% match description with null %} <!-- no description -->
     {% with !description %}
-      <meta name="description" content="{{ description }}" />
+      <meta name="description" content="{% description %}" />
     {% /match %}
     <meta
       name="viewport"
       content="width=device-width, initial-scale=1, shrink-to-fit=no"
     />
-    <link rel="stylesheet" href="{{ site.url }}/style.css" />
-    <link rel="icon" href="{{ site.url}}/icon.svg" type="image/svg+xml" />
+    <link rel="stylesheet" href="{% site.url %}/style.css" />
+    <link rel="icon" href="{% site.url %}/icon.svg" type="image/svg+xml" />
   </head>
   <body>
     <a class="skip-nav" href="#content">Skip to content.</a>
@@ -42,38 +42,38 @@
         <header class="site-header">
           {%~ match showTitle with false ~%}
             <h1 class="site-header__title">
-              <a href="{{ site.url }}/">
+              <a href="{% site.url %}/">
                 <img
-                  src="{{ site.url}}/icon.svg"
+                  src="{% site.url %}/icon.svg"
                   height="48"
                   width="48"
                   alt="Acutis icon."
                   style="vertical-align:middle;"
                 />
-                {{ title }}
+                {% title %}
               </a>
             </h1>
           {%~ with true ~%}
             <p class="site-header__title">
-              <a href="{{ site.url }}/">
+              <a href="{% site.url %}/">
                 <img
-                  src="{{ site.url}}/icon.svg"
+                  src="{% site.url %}/icon.svg"
                   height="48"
                   width="48"
                   alt="Acutis icon."
                   style="vertical-align:middle;"
                 />
-                {{ title }}
+                {% title %}
               </a>
             </p>
           {%~ /match ~%}
-          <p class="site-header__subtitle">{{ subtitle }}</p>
+          <p class="site-header__subtitle">{% subtitle %}</p>
         </header>
         <nav class="site-header__nav">
           <ol class="site-header__nav-list">
             {%~ map menu with {path, name} ~%}
               <li>
-                {% Link path page %}{{ name }}{% /Link %}
+                {% Link path page %}{% name %}{% /Link %}
               </li>
             {%~ /map ~%}
           </ol>
@@ -86,16 +86,16 @@
             with false ~%} {* No title *}
         {%~ with true %}
           <header class="header">
-            <h1>{{ title }}</h1>
+            <h1>{% title %}</h1>
           </header>
         {%~ /match ~%}
-        {{{ children }}}
+        {{% children %}}
         {%~ match next
            with null ~%} {* nothing! *}
         {%~ with !{text, url} ~%}
           <nav class="next">
             <h2 class="next__header">Next:</h2>
-            <a href="{{ site.url }}{{ url }}" class="next__url">{{ text }}</a>
+            <a href="{% site.url %}{% url %}" class="next__url">{% text %}</a>
           </nav>
         {%~ /match %}
       </article>

diff --git a/docs/_layouts/main.acutis b/docs/_layouts/main.acutis
@@ -27,6 +27,6 @@
    with {@tag: true, page}
 ~%}
   {% Layout title description showTitle site page next ~%}
-    {{{ content }}}
+    {{% content %}}
   {%~ /Layout %}
 {% /match %}
diff --git a/docs/eleventy.config.js b/docs/eleventy.config.js
@@ -47,7 +47,7 @@ function acutisSyntax(Prism) {
     punctuation: /[{}[\],.:/=()<>|]/,
   };
 
-  var pattern = /{{({?)[\s\S]*?(}?)}}|{%[\s\S]*?%}|{\*[\s\S]*?\*}/g;
+  var pattern = /{({?)%[\s\S]*?%(}?)}|{\*[\s\S]*?\*}/g;
   var markupTemplating = Prism.languages["markup-templating"];
 
   Prism.hooks.add("before-tokenize", (env) =>

diff --git a/docs/index.md b/docs/index.md
@@ -28,20 +28,20 @@ compile them to self-contained JavaScript files.
        }
     ]
 ~%}
-<h1> Blog posts for {{ siteTitle }} </h1>
+<h1> Blog posts for {% siteTitle %} </h1>
 {%~ map blogPosts with {image, title, content, date, author: {name}} %}
   <article class="h-entry">
     <header>
       {% match image with null ~%}
         {* no image *}
       {%~ with !{src, alt} ~%}
-        <img src="{{ src }}" alt="{{ alt }}">
+        <img src="{% src %}" alt="{% alt %}">
       {% /match ~%}
-      <h2 class="p-name"> {{ title }} </h2>
-      <span class="p-author"> By {{ name ? "Anonymous" }} </span>
-      <span class="dt-published"> Posted on {{ date }} </span>
+      <h2 class="p-name"> {% title %} </h2>
+      <span class="p-author"> By {% name ? "Anonymous" %} </span>
+      <span class="dt-published"> Posted on {% date %} </span>
     </header>
-    <div class="e-content"> {{{ content }}} </div>
+    <div class="e-content"> {{% content %}} </div>
   </article>
 {%~ /map %}
 ```
@@ -51,4 +51,4 @@ compile them to self-contained JavaScript files.
 [source code]: https://github.com/johnridesabike/acutis
 [changelog]: https://github.com/johnridesabike/acutis/blob/master/CHANGELOG.md
 [example]:
-  ./playground/?props=ewogICJzaXRlVGl0bGUiOiAiTXkgQmxvZyIsCiAgImJsb2dQb3N0cyI6IFsKICAgIHsKICAgICAgInRpdGxlIjogIk15IHNlY29uZCBwb3N0IiwKICAgICAgImF1dGhvciI6IHsgIm5hbWUiOiAiSm9obiIgfSwKICAgICAgImRhdGUiOiAiMjAyMC0xMi0wMSIsCiAgICAgICJpbWFnZSI6IG51bGwsCiAgICAgICJjb250ZW50IjogIjxwPlRoaXMgaXMgbXkgc2Vjb25kIHBvc3Q8L3A%2BIgogICAgfSwKICAgIHsKICAgICAgInRpdGxlIjogIkhlbGxvLCB3b3JsZCEiLAogICAgICAiYXV0aG9yIjogeyAibmFtZSI6ICJKb2huIiB9LAogICAgICAiZGF0ZSI6ICIyMDIwLTExLTMwIiwKICAgICAgImltYWdlIjogbnVsbCwKICAgICAgImNvbnRlbnQiOiAiPHA%2BVGhpcyBpcyBteSBmaXJzdCBwb3N0PC9wPiIKICAgIH0KICBdCn0%3D&source=eyUgaW50ZXJmYWNlCiAgc2l0ZVRpdGxlID0gc3RyaW5nCiAgYmxvZ1Bvc3RzID0KICAgIFsKICAgICAgIHsKICAgICAgICAgIHRpdGxlOiBzdHJpbmcsCiAgICAgICAgICBhdXRob3I6IHtuYW1lOiA%2Fc3RyaW5nfSwKICAgICAgICAgIGRhdGU6IHN0cmluZywKICAgICAgICAgIGltYWdlOiA%2Fe2FsdDogc3RyaW5nLCBzcmM6IHN0cmluZ30sCiAgICAgICAgICBjb250ZW50OiBzdHJpbmcKICAgICAgIH0KICAgIF0KfiV9CjxoMT4gQmxvZyBwb3N0cyBmb3Ige3sgc2l0ZVRpdGxlIH19IDwvaDE%2BCnslfiBtYXAgYmxvZ1Bvc3RzIHdpdGgge2ltYWdlLCB0aXRsZSwgY29udGVudCwgZGF0ZSwgYXV0aG9yOiB7bmFtZX19ICV9CiAgPGFydGljbGUgY2xhc3M9ImgtZW50cnkiPgogICAgPGhlYWRlcj4KICAgICAgeyUgbWF0Y2ggaW1hZ2Ugd2l0aCBudWxsIH4lfQogICAgICAgIHsqIG5vIGltYWdlICp9CiAgICAgIHslfiB3aXRoICF7c3JjLCBhbHR9IH4lfQogICAgICAgIDxpbWcgc3JjPSJ7eyBzcmMgfX0iIGFsdD0ie3sgYWx0IH19Ij4KICAgICAgeyUgL21hdGNoIH4lfQogICAgICA8aDIgY2xhc3M9InAtbmFtZSI%2BIHt7IHRpdGxlIH19IDwvaDI%2BCiAgICAgIDxzcGFuIGNsYXNzPSJwLWF1dGhvciI%2BIEJ5IHt7IG5hbWUgPyAiQW5vbnltb3VzIiB9fSA8L3NwYW4%2BCiAgICAgIDxzcGFuIGNsYXNzPSJkdC1wdWJsaXNoZWQiPiBQb3N0ZWQgb24ge3sgZGF0ZSB9fSA8L3NwYW4%2BCiAgICA8L2hlYWRlcj4KICAgIDxkaXYgY2xhc3M9ImUtY29udGVudCI%2BIHt7eyBjb250ZW50IH19fSA8L2Rpdj4KICA8L2FydGljbGU%2BCnslfiAvbWFwICV9
+  ./playground/?props=ewogICJzaXRlVGl0bGUiOiAiTXkgQmxvZyIsCiAgImJsb2dQb3N0cyI6IFsKICAgIHsKICAgICAgInRpdGxlIjogIk15IHNlY29uZCBwb3N0IiwKICAgICAgImF1dGhvciI6IHsgIm5hbWUiOiAiSm9obiIgfSwKICAgICAgImRhdGUiOiAiMjAyMC0xMi0wMSIsCiAgICAgICJpbWFnZSI6IG51bGwsCiAgICAgICJjb250ZW50IjogIjxwPlRoaXMgaXMgbXkgc2Vjb25kIHBvc3Q8L3A%2BIgogICAgfSwKICAgIHsKICAgICAgInRpdGxlIjogIkhlbGxvLCB3b3JsZCEiLAogICAgICAiYXV0aG9yIjogeyAibmFtZSI6ICJKb2huIiB9LAogICAgICAiZGF0ZSI6ICIyMDIwLTExLTMwIiwKICAgICAgImltYWdlIjogbnVsbCwKICAgICAgImNvbnRlbnQiOiAiPHA%2BVGhpcyBpcyBteSBmaXJzdCBwb3N0PC9wPiIKICAgIH0KICBdCn0%3D&source=eyUgaW50ZXJmYWNlCiAgc2l0ZVRpdGxlID0gc3RyaW5nCiAgYmxvZ1Bvc3RzID0KICAgIFsKICAgICAgIHsKICAgICAgICAgIHRpdGxlOiBzdHJpbmcsCiAgICAgICAgICBhdXRob3I6IHtuYW1lOiA%2Fc3RyaW5nfSwKICAgICAgICAgIGRhdGU6IHN0cmluZywKICAgICAgICAgIGltYWdlOiA%2Fe2FsdDogc3RyaW5nLCBzcmM6IHN0cmluZ30sCiAgICAgICAgICBjb250ZW50OiBzdHJpbmcKICAgICAgIH0KICAgIF0KfiV9CjxoMT4gQmxvZyBwb3N0cyBmb3IgeyUgc2l0ZVRpdGxlICV9IDwvaDE%2BCnslfiBtYXAgYmxvZ1Bvc3RzIHdpdGgge2ltYWdlLCB0aXRsZSwgY29udGVudCwgZGF0ZSwgYXV0aG9yOiB7bmFtZX19ICV9CiAgPGFydGljbGUgY2xhc3M9ImgtZW50cnkiPgogICAgPGhlYWRlcj4KICAgICAgeyUgbWF0Y2ggaW1hZ2Ugd2l0aCBudWxsIH4lfQogICAgICAgIHsqIG5vIGltYWdlICp9CiAgICAgIHslfiB3aXRoICF7c3JjLCBhbHR9IH4lfQogICAgICAgIDxpbWcgc3JjPSJ7JSBzcmMgJX0iIGFsdD0ieyUgYWx0ICV9Ij4KICAgICAgeyUgL21hdGNoIH4lfQogICAgICA8aDIgY2xhc3M9InAtbmFtZSI%2BIHslIHRpdGxlICV9IDwvaDI%2BCiAgICAgIDxzcGFuIGNsYXNzPSJwLWF1dGhvciI%2BIEJ5IHslIG5hbWUgPyAiQW5vbnltb3VzIiAlfSA8L3NwYW4%2BCiAgICAgIDxzcGFuIGNsYXNzPSJkdC1wdWJsaXNoZWQiPiBQb3N0ZWQgb24geyUgZGF0ZSAlfSA8L3NwYW4%2BCiAgICA8L2hlYWRlcj4KICAgIDxkaXYgY2xhc3M9ImUtY29udGVudCI%2BIHt7JSBjb250ZW50ICV9fSA8L2Rpdj4KICA8L2FydGljbGU%2BCnslfiAvbWFwICV9