support tokens in script and style tags (#813)

electrode-io · Jun 19, 2018 · 48dc459 · 48dc459
1 parent 15bc60f
commit 48dc459
Show file tree

Hide file tree

Showing 3 changed files with 34 additions and 9 deletions.
diff --git a/packages/electrode-react-webapp/lib/async-template.js b/packages/electrode-react-webapp/lib/async-template.js
@@ -11,8 +11,16 @@ const { resolvePath } = require("./utils");
 const Token = require("./token");
 const stringArray = require("string-array");
 
-const tokenOpenTag = "<!--%{";
-const tokenCloseTag = "}-->";
+const tokenTags = {
+  "<!--%{": "}-->", // for tokens in html
+  "/*--%{": "}--*/" // for tokens in script and style
+};
+
+const tokenOpenTagRegex = new RegExp(
+  Object.keys(tokenTags)
+    .map(x => `(${x.replace(/([\*\/])/g, "\\$1")})`)
+    .join("|")
+);
 
 class AsyncTemplate {
   constructor(options) {
@@ -65,13 +73,16 @@ class AsyncTemplate {
     const tokens = [];
     let pt = 0;
     while (true) {
-      const pos = template.indexOf(tokenOpenTag, pt);
-      if (pos >= pt) {
+      const mx = template.substr(pt).match(tokenOpenTagRegex);
+      if (mx) {
+        const pos = mx.index + pt;
         const str = template.substring(pt, pos).trim();
         // if there are text between a close tag and an open tag, then consider
         // that as plain HTML string
         if (str) tokens.push({ str });
 
+        const tokenOpenTag = mx[0];
+        const tokenCloseTag = tokenTags[tokenOpenTag];
         const ex = template.indexOf(tokenCloseTag, pos);
         assert(
           ex > pos,

diff --git a/packages/electrode-react-webapp/test/data/template3.html b/packages/electrode-react-webapp/test/data/template3.html
@@ -15,6 +15,9 @@
   }-->
   <script>
     console.log("test")
+    /*--%{
+      blah
+    }--*/
   </script>
   <!--%{meta-tags}-->
 </head>

diff --git a/packages/electrode-react-webapp/test/spec/parse-template.spec.js b/packages/electrode-react-webapp/test/spec/parse-template.spec.js
@@ -180,12 +180,23 @@ describe("AsyncTemplate._parseTemplate", function() {
         wantsNext: undefined
       },
       {
-        str: `<script>\n    console.log("test")\n  </script>`
+        str: `<script>\n    console.log("test")`
+      },
+      {
+        id: "blah",
+        isModule: false,
+        pos: 222,
+        props: {},
+        custom: undefined,
+        wantsNext: undefined
+      },
+      {
+        str: "</script>"
       },
       {
         id: "meta-tags",
         isModule: false,
-        pos: 232,
+        pos: 264,
         props: {},
         custom: undefined,
         wantsNext: undefined
@@ -197,7 +208,7 @@ describe("AsyncTemplate._parseTemplate", function() {
       {
         id: "page-title",
         isModule: false,
-        pos: 269,
+        pos: 301,
         props: {},
         custom: undefined,
         wantsNext: undefined
@@ -206,7 +217,7 @@ describe("AsyncTemplate._parseTemplate", function() {
         custom: undefined,
         id: "json-prop",
         isModule: false,
-        pos: 294,
+        pos: 326,
         props: {
           foo: "bar",
           test: [1, 2, 3]
@@ -220,7 +231,7 @@ describe("AsyncTemplate._parseTemplate", function() {
         },
         id: "#./test/fixtures/custom-call",
         isModule: true,
-        pos: 364,
+        pos: 396,
         props: {
           _call: "setup"
         },