feat(glimmer): {{link-to}} integration (#233).

* feat(glimmer): Basic activeClass {{link-to}} integration.
* feat: Genericize concept of Ember Built-Ins.
 - Add support for {{link-to}} loadingClass.
 - Add support for {{link-to}} disabledClass.
* chore: Code cleanup.
* chore: Remove stray comments.

Author: amiller-gh

packages/@css-blocks/ember-cli/tests/dummy/app/styles/ember-builtins.block.css

@@ -1,9 +1,11 @@
 .link-to-helper {
   --link-to-helper: applied;
+  color: red;
 }
 
 .link-to-helper[state|active] {
   --link-to-helper-active: applied;
+  color: green;
 }
 
 .input-helper {

packages/@css-blocks/ember-cli/tests/dummy/app/templates/ember-builtins.hbs

@@ -1,5 +1,4 @@
-{{#link-to "index" class="link-to-helper" id="link-to-helper"}}Link To Helper{{/link-to}}
-{{#link-to "ember-builtins" class="link-to-helper" id="link-to-helper-active"}}Active Link To Helper{{/link-to}}
-
-{{input type="text" class="input-helper" id="input-helper"}}
-{{textarea type="text" class="textarea-helper" id="textarea-helper"}}
+<div>
+  {{#link-to "index" class="link-to-helper" id="link-to-helper"}}Inactive Link To Helper{{/link-to}}
+  {{#link-to "ember-builtins" class="link-to-helper" id="link-to-helper-active"}}Active Link To Helper{{/link-to}}
+</div>

packages/@css-blocks/ember-cli/tests/integration/template-discovery-test.js

@@ -16,13 +16,11 @@ module("Acceptance | Template Discovery", function(hooks) {
     assert.ok(varIsPresent("#reset-stylesheet-selector", "reset-stylesheet-selector"), "Vanilla CSS styles in app.css are preserved");
   });
 
-  skip("Ember Builtins Integration", async function(assert) {
+  test("Ember Builtins Integration", async function(assert) {
     await visit("/ember-builtins", "Navigated to test case");
     assert.equal(currentURL(), "/ember-builtins");
     assert.ok(varIsPresent("#link-to-helper", "link-to-helper"), "Link-to helpers receive classes");
     assert.ok(varIsPresent("#link-to-helper-active", "link-to-helper-active"), "Link-to helpers receive active states");
-    assert.ok(varIsPresent("#input-helper", "input-helper"), "Input helpers receive classes");
-    assert.ok(varIsPresent("#textarea-helper", "textarea-helper"), "Textarea helpers receive classes");
   });
 
   test("App Route Block Integration", async function(assert) {

packages/@css-blocks/glimmer/src/Analyzer.ts

@@ -1,5 +1,6 @@
 
-import {  Analysis,
+import {
+  Analysis,
   AnalysisOptions,
   Analyzer,
   Block,
@@ -8,12 +9,13 @@ import {  Analysis,
   Options,
 } from "@css-blocks/core";
 import { ResolverConfiguration } from "@glimmer/resolver";
-import { preprocess, traverse } from "@glimmer/syntax";
+import {  AST, preprocess, traverse } from "@glimmer/syntax";
 import { TemplateIntegrationOptions } from "@opticss/template-api";
 import * as debugGenerator from "debug";
 import { postcss } from "opticss";
 
 import { ElementAnalyzer } from "./ElementAnalyzer";
+import { isEmberBuiltIn } from "./EmberBuiltins";
 import { Resolver } from "./Resolver";
 import { TEMPLATE_TYPE } from "./Template";
 
@@ -123,11 +125,29 @@ export class GlimmerAnalyzer extends Analyzer<TEMPLATE_TYPE> {
 
     let elementAnalyzer = new ElementAnalyzer(analysis, this.cssBlocksOptions);
     traverse(ast, {
+      MustacheStatement(node: AST.MustacheStatement) {
+        const name = node.path.original;
+        if (!isEmberBuiltIn(name)) { return; }
+        elementCount++;
+        const atRootElement = (elementCount === 1);
+        const element = elementAnalyzer.analyze(node, atRootElement);
+        if (self.debug.enabled) self.debug(`{{${name}}} analyzed:`, element.class.forOptimizer(self.cssBlocksOptions).toString());
+      },
+
+      BlockStatement(node: AST.BlockStatement) {
+        const name = node.path.original;
+        if (!isEmberBuiltIn(name)) { return; }
+        elementCount++;
+        const atRootElement = (elementCount === 1);
+        const element = elementAnalyzer.analyze(node, atRootElement);
+        if (self.debug.enabled) self.debug(`{{#${name}}} analyzed:`, element.class.forOptimizer(self.cssBlocksOptions).toString());
+      },
+
       ElementNode(node) {
         elementCount++;
         let atRootElement = (elementCount === 1);
         let element = elementAnalyzer.analyze(node, atRootElement);
-        if (self.debug.enabled) self.debug("Element analyzed:", element.forOptimizer(self.cssBlocksOptions).toString());
+        if (self.debug.enabled) self.debug("Element analyzed:", element.class.forOptimizer(self.cssBlocksOptions).toString());
       },
     });
     return analysis;

packages/@css-blocks/glimmer/src/ClassnamesHelperGenerator.ts

@@ -75,6 +75,13 @@ export function classnamesHelper(rewrite: IndexedClassRewrite<Style>, element: T
   );
 }
 
+export function classnamesSubexpr(rewrite: IndexedClassRewrite<Style>, element: TemplateElement): AST.SubExpression {
+  return builders.sexpr(
+    builders.path(CLASSNAMES_HELPER_NAME),
+    constructArgs(rewrite, element),
+  );
+}
+
 // tslint:disable-next-line:prefer-whatever-to-any
 function constructArgs(rewrite: IndexedClassRewrite<any>, element: TemplateElement): AST.Expression[] {
   let expr = new Array<AST.Expression>();
@@ -134,7 +141,7 @@ function constructSourceArgs(rewrite: IndexedClassRewrite<any>, element: Templat
 function constructTernary(classes: DynamicClasses<TernaryAST>, rewrite: IndexedClassRewrite<Style>): AST.Expression[] {
   let expr = new Array<AST.Expression>();
   // The boolean expression
-  expr.push(classes.condition);
+  expr.push(classes.condition!);
   // The true styles
   if (isTrueCondition(classes)) {
     let trueClasses = resolveInheritance(classes.whenTrue, rewrite);
@@ -249,10 +256,10 @@ function moustacheToExpression(expr: AST.MustacheStatement): AST.Expression {
 }
 
 function moustacheToStringExpression(stringExpression: StringAST): AST.Expression {
-  if (stringExpression.type === "ConcatStatement") {
+  if (stringExpression!.type === "ConcatStatement") {
     return builders.sexpr(
       builders.path(CONCAT_HELPER_NAME),
-      stringExpression.parts.reduce(
+      (stringExpression as AST.ConcatStatement).parts.reduce(
         (arr, val) => {
           if (val.type === "TextNode") {
             arr.push(builders.string(val.chars));
@@ -263,7 +270,7 @@ function moustacheToStringExpression(stringExpression: StringAST): AST.Expressio
         },
         new Array<AST.Expression>()));
   } else {
-    return moustacheToExpression(stringExpression);
+    return moustacheToExpression(stringExpression as AST.MustacheStatement);
   }
 }