Allow multiple JSX children appear in Mustache tag (#125)

* fix(www): link styles (#100)

Co-authored-by: Nate Moore <nate@skypack.dev>

* Add `assets/` (#102)

* chore: add assets

* docs: update readme

Co-authored-by: Nate Moore <nate@skypack.dev>

* docs: fix readme

* docs: fix readme

* chore: remove github banner

* Allow multiple JSX in mustache

* Manually discard package-lock update (due to local use of npm v7)

* Tidy up

* Revert mode ts-ignore

Co-authored-by: Nate Moore <natemoo-re@users.noreply.github.com>
Co-authored-by: Nate Moore <nate@skypack.dev>

5 files changed, 29 insertions, 22 deletions

diff --git a/src/compiler/codegen/index.ts b/src/compiler/codegen/index.ts
index 8d968e1ea..a10268883 100644
--- a/src/compiler/codegen/index.ts
+++ b/src/compiler/codegen/index.ts
@@ -75,7 +75,8 @@ function getAttributes(attrs: Attribute[]): Record<string, string> {
     }
     switch (val.type) {
       case 'MustacheTag': {
-        result[attr.name] = '(' + val.expression.codeStart + ')';
+        // FIXME: this won't work when JSX element can appear in attributes (rare but possible).
+        result[attr.name] = '(' + val.expression.codeChunks[0] + ')';
         continue;
       }
       case 'Text':
@@ -101,7 +102,8 @@ function getTextFromAttribute(attr: any): string {
       break;
     }
     case 'MustacheTag': {
-      return attr.expression.codeStart;
+      // FIXME: this won't work when JSX element can appear in attributes (rare but possible).
+      return attr.expression.codeChunks[0];
     }
   }
   throw new Error(`Unknown attribute type ${attr.type}`);
@@ -520,13 +522,20 @@ function compileHtml(enterNode: TemplateNode, state: CodegenState, compileOption
     enter(node: TemplateNode) {
       switch (node.type) {
         case 'Expression': {
-          let child = '';
+          let children: string[] = [];
           // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
-          if (node.children!.length) {
-            // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
-            child = compileHtml(node.children![0], state, compileOptions);
+          for (const child of node.children!) {
+            children.push(compileHtml(child, state, compileOptions));
+          }
+          let raw = '';
+          let nextChildIndex = 0;
+          // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+          for (const chunk of node.codeChunks!) {
+            raw += chunk;
+            if (nextChildIndex < children.length) {
+              raw += children[nextChildIndex++];
+            }
           }
-          let raw = node.codeStart + child + node.codeEnd;
           // TODO Do we need to compile this now, or should we compile the entire module at the end?
           let code = compileExpressionSafe(raw).trim().replace(/\;$/, '');
           outSource += `,(${code})`;
diff --git a/src/compiler/transform/prism.ts b/src/compiler/transform/prism.ts
index 7848e1672..1bb024a84 100644
--- a/src/compiler/transform/prism.ts
+++ b/src/compiler/transform/prism.ts
@@ -63,8 +63,7 @@ export default function (module: Script): Transformer {
                       type: 'MustacheTag',
                       expression: {
                         type: 'Expression',
-                        codeStart: '`' + escape(code) + '`',
-                        codeEnd: '',
+                        codeChunks: ['`' + escape(code) + '`'],
                         children: [],
                       },
                     },
diff --git a/src/compiler/transform/styles.ts b/src/compiler/transform/styles.ts
index 77eedfa89..53585651f 100644
--- a/src/compiler/transform/styles.ts
+++ b/src/compiler/transform/styles.ts
@@ -222,9 +222,10 @@ export default function transformStyles({ compileOptions, filename, fileID }: Tr
                   }
                 } else if (attr.value[k].type === 'MustacheTag' && attr.value[k]) {
                   // don‘t add same scopedClass twice (this check is a little more basic, but should suffice)
-                  if (!attr.value[k].expression.codeStart.includes(`' ${scopedClass}'`)) {
+                  if (!attr.value[k].expression.codeChunks[0].includes(`' ${scopedClass}'`)) {
                     // MustacheTag
-                    attr.value[k].expression.codeStart = `(${attr.value[k].expression.codeStart}) + ' ${scopedClass}'`;
+                    // FIXME: this won't work when JSX element can appear in attributes (rare but possible).
+                    attr.value[k].expression.codeChunks[0] = `(${attr.value[k].expression.codeChunks[0]}) + ' ${scopedClass}'`;
                   }
                 }
               }
diff --git a/src/parser/interfaces.ts b/src/parser/interfaces.ts
index 4a4d43f71..3273b8be1 100644
--- a/src/parser/interfaces.ts
+++ b/src/parser/interfaces.ts
@@ -53,8 +53,7 @@ export interface Expression {
   type: 'Expression';
   start: number;
   end: number;
-  codeStart: string;
-  codeEnd: string;
+  codeChunks: string[];
   children: BaseNode[];
 }
 
diff --git a/src/parser/parse/read/expression.ts b/src/parser/parse/read/expression.ts
index f0033354d..9d0d09175 100644
--- a/src/parser/parse/read/expression.ts
+++ b/src/parser/parse/read/expression.ts
@@ -168,12 +168,12 @@ function consume_expression(source: string, start: number): Expression {
     type: 'Expression',
     start,
     end: Number.NaN,
-    codeStart: '',
-    codeEnd: '',
+    codeChunks: [],
     children: [],
   };
 
-  let codeEndStart: number = 0;
+  let codeStart: number = start;
+
   const state: ParseState = {
     source,
     start,
@@ -196,10 +196,11 @@ function consume_expression(source: string, start: number): Expression {
         break;
       }
       case '<': {
-        expr.codeStart = source.substring(start, state.index - 1);
+        const chunk = source.substring(codeStart, state.index - 1);
+        expr.codeChunks.push(chunk);
         const tag = consume_tag(state);
         expr.children.push(tag);
-        codeEndStart = state.index;
+        codeStart = state.index;
         break;
       }
       case "'":
@@ -225,10 +226,8 @@ function consume_expression(source: string, start: number): Expression {
 
   expr.end = state.index - 1;
 
-  if (codeEndStart) {
-    expr.codeEnd = source.substring(codeEndStart, expr.end);
-  } else {
-    expr.codeStart = source.substring(start, expr.end);
+  if (expr.children.length || !expr.codeChunks.length) {
+    expr.codeChunks.push(source.substring(codeStart, expr.end));
   }
 
   return expr;