fix(rewriter): glimmer requires that subexpressions be helper invocations.

Author: chriseppstein

packages/glimmer-templates/src/ClassnamesHelperGenerator.ts

@@ -161,7 +161,7 @@ function constructDependency(stateExpr: Dependency, rewrite: IndexedClassRewrite
 
 function constructConditional(stateExpr: Conditional<BooleanAST> & HasState, _rewrite: IndexedClassRewrite<BlockObject>): AST.Expression[] {
   let expr = new Array<AST.Expression>();
-  expr.push(stateExpr.condition);
+  expr.push(moustacheToBooleanExpression(stateExpr.condition));
   return expr;
 }
 
@@ -207,28 +207,43 @@ function constructSwitch(stateExpr: Switch<StringAST> & HasGroup, rewrite: Index
   return expr;
 }
 
+function moustacheToBooleanExpression(booleanExpression: BooleanAST): AST.Expression {
+  if (booleanExpression.type === "MustacheStatement") {
+    return moustacheToExpression(booleanExpression);
+  } else {
+    return booleanExpression;
+  }
+}
+
+function moustacheToExpression(expr: AST.MustacheStatement): AST.Expression {
+  if (expr.path.type === "PathExpression") {
+    if (expr.params.length === 0 && expr.hash.pairs.length === 0) {
+      debug("converting", expr.path.original, "to path");
+      return expr.path;
+    } else {
+      debug("converting", expr.path.original, "to sexpr");
+      return builders.sexpr(expr.path, expr.params, expr.hash);
+    }
+  } else {
+    debug("preserving literal", expr.path.original, "as literal");
+    return expr.path;
+  }
+}
+
 function moustacheToStringExpression(stringExpression: StringAST): AST.Expression {
   if (stringExpression.type === "ConcatStatement") {
     return builders.sexpr(builders.path("/css-blocks/components/concat"),
       stringExpression.parts.reduce( (arr, val) => {
         if (val.type === 'TextNode') {
           arr.push(builders.string(val.chars));
         } else {
-          arr.push(moustacheToStringExpression(val));
+          arr.push(val.path);
         }
         return arr;
       }, new Array<AST.Expression>())
     );
   } else {
-    let { path, params, hash } = stringExpression;
-    if (path.type === "PathExpression") {
-      return builders.sexpr(path, params, hash);
-    } else {
-      if (params.length > 0) {
-        throw new Error("Unsure how to deal with this node.");
-      }
-      return path;
-    }
+    return moustacheToExpression(stringExpression);
   }
 }
 

packages/glimmer-templates/src/ElementAnalyzer.ts

@@ -1,4 +1,4 @@
-import { AST, builders} from '@glimmer/syntax';
+import { AST } from '@glimmer/syntax';
 import {
   Block,
   QueryKeySelector,
@@ -14,7 +14,7 @@ import { objectValues, assertNever } from "@opticss/util";
 
 export type TernaryExpression = AST.Expression;
 export type StringExpression = AST.MustacheStatement | AST.ConcatStatement;
-export type BooleanExpression = AST.Expression;
+export type BooleanExpression = AST.Expression | AST.MustacheStatement;
 export type TemplateElement  = ElementAnalysis<BooleanExpression, StringExpression, TernaryExpression>;
 export type AnalysisElement  = ElementAnalysis<null, null, null>;
 
@@ -231,17 +231,7 @@ export class ElementAnalyzer {
               throw cssBlockError(`The dynamic statement for a boolean state must be set to a mustache statement with no additional text surrounding it.`, dynamicSubState, this.template);
             }
             if (analysis.storeConditionals) {
-              let expr: AST.Expression;
-              let {path, params, hash} = dynamicSubState;
-              if (path.type === "PathExpression") {
-                expr = builders.sexpr(path, params, hash);
-              } else {
-                if (params.length > 0) {
-                  throw cssBlockError(`Unsure how to handle this node.`, dynamicSubState, this.template);
-                }
-                expr = path;
-              }
-              analysis.element.addDynamicState(container, states[0], expr);
+              analysis.element.addDynamicState(container, states[0], dynamicSubState);
             } else {
               analysis.element.addDynamicState(container, states[0], null);
             }

packages/glimmer-templates/test/template-rewrite-test.ts

@@ -82,7 +82,7 @@ describe('Template Rewriting', function() {
       // TODO why is `f` class both static and dynamic?
       assert.deepEqual(minify(res), minify(`
           <div class="b">
-            <h1 class="e">Hello, <span class="f c {{/css-blocks/components/classnames 2 3 2 (isThick) 1 2 4 2 1 (textStyle) "bold" 1 0 "italic" 1 1 "g" 0 "f" 1 "d" 2}}">World</span>!</h1>
+            <h1 class="e">Hello, <span class="f c {{/css-blocks/components/classnames 2 3 2 isThick 1 2 4 2 1 textStyle "bold" 1 0 "italic" 1 1 "g" 0 "f" 1 "d" 2}}">World</span>!</h1>
           </div>`));
       assert.deepEqual(minify(result.css), minify(`
           .b { color: red; }
@@ -107,7 +107,7 @@ describe('Template Rewriting', function() {
       // TODO: why is `f` both static and dynamic on the same element
       assert.deepEqual(minify(res), minify(`
         <div class="b">
-          <h1 class="e">Hello, <span class="f h {{/css-blocks/components/classnames 3 4 0 isWorld 1 2 0 3 1 2 (eq isThick 1) 1 3 4 2 1 (textStyle) "bold" 1 0 "italic" 1 1 "g" 0 "f" 1 "c" 2 "d" 3}}">World</span>!</h1>
+          <h1 class="e">Hello, <span class="f h {{/css-blocks/components/classnames 3 4 0 isWorld 1 2 0 3 1 2 (eq isThick 1) 1 3 4 2 1 textStyle "bold" 1 0 "italic" 1 1 "g" 0 "f" 1 "c" 2 "d" 3}}">World</span>!</h1>
           <div class={{/css-blocks/components/classnames 1 2 0 isWorld 1 1 1 0 "f" 0 "c" 1}}>World</div>
           <div class={{/css-blocks/components/classnames 1 2 0 isWorld 1 0 1 1 "f" 0 "c" 1}}>World</div>
           <div class={{/css-blocks/components/classnames 1 1 0 isWorld 0 1 0 "c" 0}}>World</div>
@@ -125,7 +125,7 @@ describe('Template Rewriting', function() {
       let { css, ast } = result;
       let res = print(ast);
       assert.deepEqual(minify(res), minify(`
-      <div class="a {{/css-blocks/components/classnames 1 1 2 (isLoading) 1 0 "b" 0}}">
+      <div class="a {{/css-blocks/components/classnames 1 1 2 isLoading 1 0 "b" 0}}">
         <aside class="g h c d"> </aside>
         <article class="i {{/css-blocks/components/classnames 1 2 0 isRecommended 1 1 1 0 "e" 0 "f" 1}}"> </article>
       </div>