Skip to content

Commit cb43511

Browse files
amiller-ghamiller-gh
committed
feat: Add @css-blocks/ember-cli and @css-blocks/playground packages.
1 parent a857b3d commit cb43511

32 files changed

+2921
-277
lines changed

‎packages/@css-blocks/broccoli/package.json

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "@css-blocks/broccoli",
3-
"version": "0.0.1",
3+
"version": "0.17.0",
44
"description": "CSS Blocks Broccoli Addon",
55
"main": "dist/src/index.js",
66
"author": "Adam Miller <[email protected]>",

‎packages/@css-blocks/broccoli/src/index.ts

+1-2
Original file line numberDiff line numberDiff line change
@@ -101,8 +101,7 @@ class BroccoliCSSBlocks extends BroccoliPlugin {
101101
this.transport.css = optimized.output;
102102

103103
// Write our compiled CSS to the output tree.
104-
// QUESTION: GUH! TOM! THIS DOESN'T APPEAR IN THE OUTPUT TREE!
105-
await fs.outputFile(
104+
await fs.writeFile(
106105
path.join(this.outputPath, this.output),
107106
optimized.output.content.toString(),
108107
);

‎packages/@css-blocks/broccoli/src/utils.ts

+1
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,7 @@
44
*/
55
/* tslint:disable */
66
export const BroccoliPlugin: BroccoliPlugin.Static = require("broccoli-plugin");
7+
78
export const walkSync: WalkSync = require("walk-sync");
89

910
declare function require(id: string): any;

‎packages/@css-blocks/ember-cli/README.md

+15
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
Ember CLI Plugin for CSS Blocks
2+
=============================
3+
4+
TBD
5+
6+
Getting Started
7+
---------------
8+
9+
```
10+
$ npm install --save-dev @css-blocks/ember-cli
11+
```
12+
13+
Add to configuration:
14+
15+
TBD

‎packages/@css-blocks/ember-cli/index.js

+91
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,91 @@
1+
/* eslint-env node */
2+
"use strict";
3+
4+
const { BroccoliCSSBlocks } = require("@css-blocks/broccoli");
5+
const { Project, GlimmerAnalyzer, GlimmerRewriter } = require("@css-blocks/glimmer");
6+
const path = require("path");
7+
const Funnel = require("broccoli-funnel");
8+
9+
// QUESTION: Tom, how to we get the app's module config!?
10+
// Is it possible for addons to augment it?
11+
// If no, how to apps augment it?
12+
const MODULE_CONFIG = require("@glimmer/application-pipeline/dist/lib/broccoli/default-module-configuration.js").default;
13+
MODULE_CONFIG.types.stylesheet = { definitiveCollection: "components" };
14+
MODULE_CONFIG.collections.components.types.push("stylesheet");
15+
16+
module.exports = {
17+
name: "css-blocks",
18+
19+
isDevelopingAddon() { return true; },
20+
21+
setupPreprocessorRegistry(type, registry) {
22+
if (type !== 'parent') { return; }
23+
let self = this;
24+
registry.add("glimmer-ast-plugin", function(env) {
25+
// Woo, shared memory wormhole!...
26+
let { analyzer, mapping } = self.transport;
27+
28+
// TODO: Write a better `getAnalysis` method on `Analyzer`
29+
let analysis = analyzer.analyses().find(a => a.template.identifier === env.meta.specifier);
30+
31+
// If there is no analysis for this template, don't do anything.
32+
// Otherwise, run the rewriter!
33+
if (!analysis) { return { name: 'css-blocks-noop', visitors: {} }; }
34+
return new GlimmerRewriter(env.syntax, mapping, analysis);
35+
});
36+
},
37+
38+
included(app) {
39+
40+
this._super.included.apply(this, arguments);
41+
let options = app.options["css-blocks"] || {};
42+
43+
// Ember-cli is *mostly* used with Glimmer. However, it can technically be
44+
// configured to use other template types. Here we default to the Glimmer
45+
// analyzer, but if a `getAnalyzer` function is provided we defer to the
46+
// user-supplied analyzer.
47+
let analyzer = options.getAnalyzer ?
48+
options.getAnalyzer(app) :
49+
new GlimmerAnalyzer(new Project(app.project.root, MODULE_CONFIG));
50+
51+
// TODO: Better options validation.
52+
if (typeof options.entry !== "string") {
53+
throw new Error("Invalid css-block options in `ember-cli-build.js`: Entry option must be a string.");
54+
}
55+
if (typeof options.output !== "string") {
56+
throw new Error("Invalid css-block options in `ember-cli-build.js`: Output option must be a string.");
57+
}
58+
59+
// TODO: This transport object need to be defined by CSS Blocks Core.
60+
// We use the same construct in both Broccoli and Webpack and
61+
// the data model for each should be standardized to Analyzers
62+
// and Rewriters consistently know how to communicate.
63+
this.transport = {};
64+
65+
app.trees.src = new BroccoliCSSBlocks(app.trees.src, {
66+
entry: [options.entry],
67+
output: options.output,
68+
analyzer,
69+
transport: this.transport // I hate shared memory...
70+
});
71+
72+
// Remove all source css-blocks stylesheets
73+
// TODO: This should remove all resolved Block object identifiers on the Analyzer.
74+
// This should be handled by @css-blocks/broccoli, but we have a bug.
75+
app.trees.src = new Funnel(app.trees.src, {
76+
exclude: ["**/stylesheet.css"]
77+
});
78+
79+
// Place our generated CSS files into Glimmer's styles tree.
80+
// Glimmer splits out its `styles` tree before we get our hands
81+
// on the project, we need to re-insert all the project-wide
82+
// work we did in the `src` tree here once we're done for it
83+
// to be reflected in the final output.
84+
// TODO: We will be working with Tom to improve how Glimmer
85+
// exposes its app trees.
86+
app.trees.styles = new Funnel(app.trees.src, {
87+
include: ["src/ui/styles/**/*"]
88+
});
89+
90+
}
91+
};

‎packages/@css-blocks/ember-cli/package.json

+15
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
{
2+
"version": "0.17.0",
3+
"name": "@css-blocks/ember-cli",
4+
"main": "index.js",
5+
"keywords": [
6+
"ember-addon"
7+
],
8+
"license": "BSD-2-Clause",
9+
"dependencies": {
10+
"@css-blocks/broccoli": "^0.17.0",
11+
"@css-blocks/glimmer": "^0.17.0",
12+
"@glimmer/application-pipeline": "^0.11.0",
13+
"broccoli-funnel": "^2.0.1"
14+
}
15+
}

‎packages/@css-blocks/playground/.editorconfig

+20
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
# EditorConfig helps developers define and maintain consistent
2+
# coding styles between different editors and IDEs
3+
# editorconfig.org
4+
5+
root = true
6+
7+
8+
[*]
9+
end_of_line = lf
10+
charset = utf-8
11+
trim_trailing_whitespace = true
12+
insert_final_newline = true
13+
indent_style = space
14+
indent_size = 2
15+
16+
[*.hbs]
17+
insert_final_newline = false
18+
19+
[*.{diff,md}]
20+
trim_trailing_whitespace = false

‎packages/@css-blocks/playground/.ember-cli

+3
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
{
2+
"blueprint": "@glimmer/blueprint"
3+
}

‎packages/@css-blocks/playground/.gitignore

+3
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
node_modules
2+
tmp/*
3+
dist

‎packages/@css-blocks/playground/.watchmanconfig

+3
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
{
2+
"ignore_dirs": ["tmp", "dist"]
3+
}

‎packages/@css-blocks/playground/README.md

+34
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,34 @@
1+
# glimmer-test
2+
3+
This README outlines the details of collaborating on this Glimmer application.
4+
A short introduction of this app could easily go here.
5+
6+
## Prerequisites
7+
8+
You will need the following things properly installed on your computer.
9+
10+
* [Git](https://git-scm.com/)
11+
* [Node.js](https://nodejs.org/) (with NPM)
12+
* [Yarn](https://yarnpkg.com/en/)
13+
* [Ember CLI](https://ember-cli.com/)
14+
15+
## Installation
16+
17+
* `git clone <repository-url>` this repository
18+
* `cd glimmer-test`
19+
* `yarn`
20+
21+
## Running / Development
22+
23+
* `ember serve`
24+
* Visit your app at [http://localhost:4200](http://localhost:4200).
25+
26+
### Building
27+
28+
* `ember build` (development)
29+
* `ember build --environment production` (production)
30+
31+
## Further Reading / Useful Links
32+
33+
* [glimmerjs](http://github.com/tildeio/glimmer/)
34+
* [ember-cli](https://ember-cli.com/)

‎packages/@css-blocks/playground/config/environment.js

+10
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
'use strict';
2+
3+
module.exports = function(environment) {
4+
let ENV = {
5+
modulePrefix: 'glimmer-test',
6+
environment
7+
};
8+
9+
return ENV;
10+
};

‎packages/@css-blocks/playground/config/module-map.d.ts

+11
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
/**
2+
* This is just a placeholder file to keep TypeScript aware editors happy. At build time,
3+
* it will be replaced with a complete map of resolvable module paths => rolled up contents.
4+
*/
5+
6+
export interface Dict<T> {
7+
[index: string]: T;
8+
}
9+
10+
declare let map: Dict<any>;
11+
export default map;

‎packages/@css-blocks/playground/config/resolver-configuration.d.ts

+9
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
/**
2+
* This is just a placeholder file to keep TypeScript aware editors happy. At build time,
3+
* it will be replaced with a resolver configuration composed from your application's
4+
* `config/environment.js` (and supplemented with default settings as possible).
5+
*/
6+
7+
import { ResolverConfiguration } from '@glimmer/resolver';
8+
declare var _default: ResolverConfiguration;
9+
export default _default;

‎packages/@css-blocks/playground/config/targets.js

+18
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
'use strict';
2+
3+
let browsers = [
4+
'> 5%',
5+
'last 2 Edge versions',
6+
'last 2 Chrome versions',
7+
'last 2 Firefox versions',
8+
'last 2 Safari versions',
9+
];
10+
11+
if (process.env.EMBER_ENV === 'test') {
12+
browsers = [
13+
'last 1 Chrome versions',
14+
'last 1 Firefox versions'
15+
];
16+
}
17+
18+
module.exports = { browsers };

‎packages/@css-blocks/playground/ember-cli-build.js

+17
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
'use strict';
2+
3+
const GlimmerApp = require('@glimmer/application-pipeline').GlimmerApp;
4+
5+
module.exports = function(defaults) {
6+
7+
let app = new GlimmerApp(defaults, {
8+
9+
'css-blocks': {
10+
entry: "GlimmerTest",
11+
output: "src/ui/styles/css-blocks.css"
12+
}
13+
14+
});
15+
16+
return app.toTree();
17+
};

‎packages/@css-blocks/playground/lib/.eslintrc.js

+6
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
module.exports = {
2+
env: {
3+
node: true,
4+
browser: false
5+
}
6+
};

‎packages/@css-blocks/playground/package.json

+37
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,37 @@
1+
{
2+
"name": "glimmer-test",
3+
"version": "0.0.0",
4+
"description": "A brand new Glimmer app.",
5+
"directories": {
6+
"doc": "doc",
7+
"test": "tests"
8+
},
9+
"scripts": {
10+
"build": "ember build -prod",
11+
"start": "ember server",
12+
"test": "ember test"
13+
},
14+
"devDependencies": {
15+
"@css-blocks/ember-cli": "^0.17.0",
16+
"@glimmer/application": "^0.9.1",
17+
"@glimmer/application-pipeline": "^0.11.0",
18+
"@glimmer/blueprint": "~0.9.1",
19+
"@glimmer/component": "^0.9.1",
20+
"@glimmer/inline-precompile": "^1.0.0",
21+
"@glimmer/resolver": "^0.4.1",
22+
"@glimmer/test-helpers": "^0.30.3",
23+
"@types/qunit": "^2.0.31",
24+
"broccoli-asset-rev": "^2.5.0",
25+
"ember-cli": "^2.14.0",
26+
"ember-cli-dependency-checker": "^2.0.1",
27+
"ember-cli-inject-live-reload": "^1.6.1",
28+
"ember-cli-tslint": "^0.1.3",
29+
"ember-cli-uglify": "^2.0.0-beta.1",
30+
"qunitjs": "^2.3.3",
31+
"typescript": "~2.8.0"
32+
},
33+
"engines": {
34+
"node": ">= 4.0"
35+
},
36+
"private": true
37+
}

‎packages/@css-blocks/playground/public/robots.txt

+3
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
# http://www.robotstxt.org
2+
User-agent: *
3+
Disallow:

‎packages/@css-blocks/playground/src/index.ts

+19
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
import { ComponentManager, setPropertyDidChange } from '@glimmer/component';
2+
import App from './main';
3+
4+
const app = new App();
5+
const containerElement = document.getElementById('app');
6+
7+
setPropertyDidChange(() => {
8+
app.scheduleRerender();
9+
});
10+
11+
app.registerInitializer({
12+
initialize(registry) {
13+
registry.register(`component-manager:/${app.rootName}/component-managers/main`, ComponentManager);
14+
}
15+
});
16+
17+
app.renderComponent('GlimmerTest', containerElement, null);
18+
19+
app.boot();

‎packages/@css-blocks/playground/src/main.ts

+20
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
import Application, { DOMBuilder, RuntimeCompilerLoader, SyncRenderer } from '@glimmer/application';
2+
import Resolver, { BasicModuleRegistry } from '@glimmer/resolver';
3+
import moduleMap from '../config/module-map';
4+
import resolverConfiguration from '../config/resolver-configuration';
5+
6+
export default class App extends Application {
7+
constructor() {
8+
let moduleRegistry = new BasicModuleRegistry(moduleMap);
9+
let resolver = new Resolver(resolverConfiguration, moduleRegistry);
10+
const element = document.body;
11+
12+
super({
13+
builder: new DOMBuilder({ element, nextSibling: null }),
14+
loader: new RuntimeCompilerLoader(resolver),
15+
renderer: new SyncRenderer(),
16+
resolver,
17+
rootName: resolverConfiguration.app.rootName
18+
});
19+
}
20+
}

‎packages/@css-blocks/playground/src/ui/components/GlimmerTest/component-test.ts

+13
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
import hbs from '@glimmer/inline-precompile';
2+
import { setupRenderingTest } from '@glimmer/test-helpers';
3+
4+
const { module, test } = QUnit;
5+
6+
module('Component: GlimmerTest', function(hooks) {
7+
setupRenderingTest(hooks);
8+
9+
test('it renders', async function(assert) {
10+
await this.render(hbs`<GlimmerTest />`);
11+
assert.equal(this.containerElement.textContent, 'CSS Blocks Playground\n');
12+
});
13+
});

0 commit comments

Comments
 (0)