Skip to content

Commit dc19029

Browse files
authored
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.
1 parent 5190bf5 commit dc19029

File tree

13 files changed

+403
-132
lines changed

13 files changed

+403
-132
lines changed

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

+2
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,11 @@
11
.link-to-helper {
22
--link-to-helper: applied;
3+
color: red;
34
}
45

56
.link-to-helper[state|active] {
67
--link-to-helper-active: applied;
8+
color: green;
79
}
810

911
.input-helper {
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,4 @@
1-
{{#link-to "index" class="link-to-helper" id="link-to-helper"}}Link To Helper{{/link-to}}
2-
{{#link-to "ember-builtins" class="link-to-helper" id="link-to-helper-active"}}Active Link To Helper{{/link-to}}
3-
4-
{{input type="text" class="input-helper" id="input-helper"}}
5-
{{textarea type="text" class="textarea-helper" id="textarea-helper"}}
1+
<div>
2+
{{#link-to "index" class="link-to-helper" id="link-to-helper"}}Inactive Link To Helper{{/link-to}}
3+
{{#link-to "ember-builtins" class="link-to-helper" id="link-to-helper-active"}}Active Link To Helper{{/link-to}}
4+
</div>

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

+1-3
Original file line numberDiff line numberDiff line change
@@ -16,13 +16,11 @@ module("Acceptance | Template Discovery", function(hooks) {
1616
assert.ok(varIsPresent("#reset-stylesheet-selector", "reset-stylesheet-selector"), "Vanilla CSS styles in app.css are preserved");
1717
});
1818

19-
skip("Ember Builtins Integration", async function(assert) {
19+
test("Ember Builtins Integration", async function(assert) {
2020
await visit("/ember-builtins", "Navigated to test case");
2121
assert.equal(currentURL(), "/ember-builtins");
2222
assert.ok(varIsPresent("#link-to-helper", "link-to-helper"), "Link-to helpers receive classes");
2323
assert.ok(varIsPresent("#link-to-helper-active", "link-to-helper-active"), "Link-to helpers receive active states");
24-
assert.ok(varIsPresent("#input-helper", "input-helper"), "Input helpers receive classes");
25-
assert.ok(varIsPresent("#textarea-helper", "textarea-helper"), "Textarea helpers receive classes");
2624
});
2725

2826
test("App Route Block Integration", async function(assert) {

Diff for: packages/@css-blocks/glimmer/src/Analyzer.ts

+23-3
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11

2-
import { Analysis,
2+
import {
3+
Analysis,
34
AnalysisOptions,
45
Analyzer,
56
Block,
@@ -8,12 +9,13 @@ import { Analysis,
89
Options,
910
} from "@css-blocks/core";
1011
import { ResolverConfiguration } from "@glimmer/resolver";
11-
import { preprocess, traverse } from "@glimmer/syntax";
12+
import { AST, preprocess, traverse } from "@glimmer/syntax";
1213
import { TemplateIntegrationOptions } from "@opticss/template-api";
1314
import * as debugGenerator from "debug";
1415
import { postcss } from "opticss";
1516

1617
import { ElementAnalyzer } from "./ElementAnalyzer";
18+
import { isEmberBuiltIn } from "./EmberBuiltins";
1719
import { Resolver } from "./Resolver";
1820
import { TEMPLATE_TYPE } from "./Template";
1921

@@ -123,11 +125,29 @@ export class GlimmerAnalyzer extends Analyzer<TEMPLATE_TYPE> {
123125

124126
let elementAnalyzer = new ElementAnalyzer(analysis, this.cssBlocksOptions);
125127
traverse(ast, {
128+
MustacheStatement(node: AST.MustacheStatement) {
129+
const name = node.path.original;
130+
if (!isEmberBuiltIn(name)) { return; }
131+
elementCount++;
132+
const atRootElement = (elementCount === 1);
133+
const element = elementAnalyzer.analyze(node, atRootElement);
134+
if (self.debug.enabled) self.debug(`{{${name}}} analyzed:`, element.class.forOptimizer(self.cssBlocksOptions).toString());
135+
},
136+
137+
BlockStatement(node: AST.BlockStatement) {
138+
const name = node.path.original;
139+
if (!isEmberBuiltIn(name)) { return; }
140+
elementCount++;
141+
const atRootElement = (elementCount === 1);
142+
const element = elementAnalyzer.analyze(node, atRootElement);
143+
if (self.debug.enabled) self.debug(`{{#${name}}} analyzed:`, element.class.forOptimizer(self.cssBlocksOptions).toString());
144+
},
145+
126146
ElementNode(node) {
127147
elementCount++;
128148
let atRootElement = (elementCount === 1);
129149
let element = elementAnalyzer.analyze(node, atRootElement);
130-
if (self.debug.enabled) self.debug("Element analyzed:", element.forOptimizer(self.cssBlocksOptions).toString());
150+
if (self.debug.enabled) self.debug("Element analyzed:", element.class.forOptimizer(self.cssBlocksOptions).toString());
131151
},
132152
});
133153
return analysis;

Diff for: packages/@css-blocks/glimmer/src/ClassnamesHelperGenerator.ts

+11-4
Original file line numberDiff line numberDiff line change
@@ -75,6 +75,13 @@ export function classnamesHelper(rewrite: IndexedClassRewrite<Style>, element: T
7575
);
7676
}
7777

78+
export function classnamesSubexpr(rewrite: IndexedClassRewrite<Style>, element: TemplateElement): AST.SubExpression {
79+
return builders.sexpr(
80+
builders.path(CLASSNAMES_HELPER_NAME),
81+
constructArgs(rewrite, element),
82+
);
83+
}
84+
7885
// tslint:disable-next-line:prefer-whatever-to-any
7986
function constructArgs(rewrite: IndexedClassRewrite<any>, element: TemplateElement): AST.Expression[] {
8087
let expr = new Array<AST.Expression>();
@@ -134,7 +141,7 @@ function constructSourceArgs(rewrite: IndexedClassRewrite<any>, element: Templat
134141
function constructTernary(classes: DynamicClasses<TernaryAST>, rewrite: IndexedClassRewrite<Style>): AST.Expression[] {
135142
let expr = new Array<AST.Expression>();
136143
// The boolean expression
137-
expr.push(classes.condition);
144+
expr.push(classes.condition!);
138145
// The true styles
139146
if (isTrueCondition(classes)) {
140147
let trueClasses = resolveInheritance(classes.whenTrue, rewrite);
@@ -249,10 +256,10 @@ function moustacheToExpression(expr: AST.MustacheStatement): AST.Expression {
249256
}
250257

251258
function moustacheToStringExpression(stringExpression: StringAST): AST.Expression {
252-
if (stringExpression.type === "ConcatStatement") {
259+
if (stringExpression!.type === "ConcatStatement") {
253260
return builders.sexpr(
254261
builders.path(CONCAT_HELPER_NAME),
255-
stringExpression.parts.reduce(
262+
(stringExpression as AST.ConcatStatement).parts.reduce(
256263
(arr, val) => {
257264
if (val.type === "TextNode") {
258265
arr.push(builders.string(val.chars));
@@ -263,7 +270,7 @@ function moustacheToStringExpression(stringExpression: StringAST): AST.Expressio
263270
},
264271
new Array<AST.Expression>()));
265272
} else {
266-
return moustacheToExpression(stringExpression);
273+
return moustacheToExpression(stringExpression as AST.MustacheStatement);
267274
}
268275
}
269276

0 commit comments

Comments
 (0)