Skip to content

Commit 63f7e7e

Browse files
Timothy Lindvalltimlindvall
Timothy Lindvall
authored andcommitted
feat: Establish ember-app addon.
- Basic scaffolding and stubs for the ember-app addon, borrowed from the @css-blocks/ember addon. - Add @css-blocks/ember-app as a dependency to ember v2 fixtures. - Added names to ember-app VSCode workspace to disambiguate between the ember-app addon and the ember-app fixture.
1 parent 31655a7 commit 63f7e7e

File tree

11 files changed

+298
-8
lines changed

11 files changed

+298
-8
lines changed
+39
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,39 @@
1+
<p align="center">
2+
<img alt="CSS Blocks" width="480px" src="http://css-blocks.com/static/media/wordmark-animated.012177e4.svg" />
3+
</p>
4+
5+
# @css-blocks/ember-app
6+
7+
An ember-cli addon for Ember applications using CSS Blocks in its application code. This addon should be a dependency in the following Ember artifacts...
8+
9+
- Ember applications.
10+
- Lazy Ember Engines.
11+
12+
This addon is only part of the Ember build pipeline for CSS Blocks! Your application, as well as any addons you rely on, will need the `@css-blocks/ember` addon as a dependency if they have any CSS Blocks files.
13+
14+
## Basic Usage
15+
16+
1. Add this addon as a dependency to your application or lazy Ember Engine.
17+
2. Also make sure you add `@css-blocks/ember` as a dependency.
18+
3. Run `ember build`.
19+
20+
That's it! For development builds, we'll generate CSS output with some developer-friendly BEM class names so you can better understand your application. For production builds, you'll get a CSS artifact that's been concatenated and minified.
21+
22+
This addon also provides a template helper for your application: `-css-blocks-`. We take a closer look at how this helper works in the Ember Build Pipeline Technical Deep Dive. The quick summary is that this helper figures out what styles to apply to any templates or components with an associated CSS Blocks file. Any templates that were previously compiled using the `@css-blocks/ember` addon will reference this helper, so you'll need to make sure you have it available in your app.
23+
24+
## Options
25+
26+
None at the moment, but when they're available, we'll document them here.
27+
28+
## Common Gotchas
29+
30+
This section is devoted to common issues you might run into when working with this addon.
31+
32+
### Nothing yet...
33+
34+
There's nothing here yet, but we'll add things here as the need arises.
35+
36+
## More Reading
37+
38+
- [CSS Blocks User Documentation](https://css-blocks.com/)
39+
- Ember Build Pipeline Technical Deep Dive - Link TBD
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,91 @@
1+
{
2+
"name": "@css-blocks/ember-app",
3+
"version": "0.1.0",
4+
"description": "CSS Blocks Application Support for Ember.",
5+
"main": "dist/src/index.js",
6+
"author": "Chris Eppstein <[email protected]>",
7+
"license": "BSD-2-Clause",
8+
"repository": "https://github.com/linkedin/css-blocks/tree/master/packages/%40css-blocks/ember",
9+
"homepage": "https://github.com/linkedin/css-blocks/tree/master/packages/%40css-blocks/ember#readme",
10+
"keywords": [
11+
"css-blocks",
12+
"ember-addon"
13+
],
14+
"scripts": {
15+
"test": "yarn run test:runner",
16+
"test:runner": "mocha --opts test/mocha.opts dist/test",
17+
"compile": "tsc --build",
18+
"pretest": "yarn run compile",
19+
"posttest": "yarn run lint",
20+
"prepublish": "rm -rf dist && yarn run compile && yarn run lintall",
21+
"lint": "tslint -t msbuild --project . -c tslint.cli.json",
22+
"lintall": "tslint -t msbuild --project . -c tslint.release.json",
23+
"lintfix": "tslint -t msbuild --project . -c tslint.cli.json --fix",
24+
"coverage": "istanbul cover -i dist/src/**/*.js --dir ./build/coverage node_modules/mocha/bin/_mocha -- dist/test --opts test/mocha.opts",
25+
"remap": "remap-istanbul -i build/coverage/coverage.json -o coverage -t html",
26+
"watch": "watch 'yarn run test' src test --wait=1"
27+
},
28+
"publishConfig": {
29+
"access": "public"
30+
},
31+
"devDependencies": {
32+
"@css-blocks/code-style": "^1.0.0",
33+
"@css-blocks/glimmer": "^1.0.0",
34+
"@types/chai-as-promised": "^7.1.2",
35+
"@types/console-ui": "^2.2.3",
36+
"@types/core-object": "^3.0.1",
37+
"@types/express": "^4.17.6",
38+
"@types/fs-extra": "^8.0.0",
39+
"@types/glob": "^7.1.1",
40+
"broccoli-node-api": "^1.7.0",
41+
"broccoli-test-helper": "^2.0.0",
42+
"chai-as-promised": "^7.1.1",
43+
"typescript": "~3.8.3",
44+
"watch": "^1.0.2"
45+
},
46+
"peerDependencies": {
47+
"ember-cli-htmlbars": "^4.3.1"
48+
},
49+
"dependencies": {
50+
"@css-blocks/config": "^1.0.0",
51+
"@css-blocks/core": "^1.0.0",
52+
"@css-blocks/glimmer": "^1.0.0",
53+
"@glimmer/compiler": "^0.43.0",
54+
"@glimmer/syntax": "^0.43.0",
55+
"@opticss/template-api": "^0.6.3",
56+
"@opticss/util": "^0.7.0",
57+
"broccoli-debug": "^0.6.5",
58+
"broccoli-funnel": "^3.0.2",
59+
"broccoli-merge-trees": "^4.0.0",
60+
"broccoli-output-wrapper": "^3.2.1",
61+
"broccoli-plugin": "^4.0.0",
62+
"colors": "^1.2.1",
63+
"debug": "^4.1.1",
64+
"ember-cli-htmlbars": "^5.2.0",
65+
"fs-extra": "^8.0.0",
66+
"fs-merger": "^3.0.2",
67+
"fs-tree-diff": "^2.0.0",
68+
"glob": "^7.1.2",
69+
"opticss": "^0.7.0",
70+
"symlink-or-copy": "^1.2.0",
71+
"walk-sync": "^2.0.0"
72+
},
73+
"volta": {
74+
"node": "12.2.0",
75+
"yarn": "1.21.0"
76+
},
77+
"engines": {
78+
"node": "10.* || >= 12.*"
79+
},
80+
"ember-addon": {
81+
"before": [
82+
"ember-cli-babel",
83+
"ember-cli-htmlbars",
84+
"ember-cli-sass",
85+
"ember-cli-eyeglass"
86+
],
87+
"after": [
88+
"@css-blocks/ember"
89+
]
90+
}
91+
}
+105
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,105 @@
1+
import type { AddonImplementation } from "ember-cli/lib/models/addon";
2+
3+
/**
4+
* An ember-cli addon for Ember applications using CSS Blocks in its
5+
* application code. This addon should be a dependency in the
6+
* following Ember artifacts...
7+
*
8+
* - Ember applications.
9+
* - Lazy Ember Engines.
10+
*
11+
* This addon is responsible for bundling together all CSS Blocks content
12+
* from the application, concatenating it into a final artifact, and
13+
* optimizing its content using OptiCSS. Additionaly, this addon generates a
14+
* JSON bundle that contains runtime data that templates need to resolve
15+
* what classes to add to each CSS Blocks-powered component. And, finally,
16+
* this addon provides a runtime helper to actually write out those classes.
17+
*
18+
* This addon expects that all intermediary blocks have already been compiled
19+
* into their respective Compiled CSS and Definition Files using the
20+
* @css-blocks/ember addon. Your app should also include this as a dependency,
21+
* or else this addon won't generate any CSS output!
22+
*
23+
* A friendly refresher for those that might've missed this tidbit from
24+
* @css-blocks/ember... CSS Blocks actually compiles its CSS as part of the
25+
* Template tree, not the styles tree! This is because CSS Blocks is unique
26+
* in how it reasons about both your templates and styles together. So, in order
27+
* to actually reason about both, and, in turn, rewrite your templates for you,
28+
* both have to be processed when building templates.
29+
*
30+
* You can read more about CSS Blocks at...
31+
* css-blocks.com
32+
*
33+
* And you can read up on the Ember build pipeline for CSS Blocks at...
34+
* <LINK_TBD>
35+
*
36+
* @todo: Provide a link for Ember build pipeline readme.
37+
*/
38+
const EMBER_ADDON: AddonImplementation = {
39+
/**
40+
* The name of this addon. Generally matches the package name in package.json.
41+
*/
42+
name: "@css-blocks/ember-app",
43+
44+
/**
45+
* Initalizes this addon instance for use.
46+
* @param parent - The project or addon that directly depends on this addon.
47+
* @param project - The current project (deprecated).
48+
*/
49+
init(parent, project) {
50+
// We must call this._super or weird stuff happens. The Ember CLI docs
51+
// recommend guarding this call, so we're gonna ask TSLint to chill.
52+
// tslint:disable-next-line: no-unused-expression
53+
this._super.init && this._super.init.call(this, parent, project);
54+
},
55+
56+
/**
57+
* This method is called when the addon is included in a build. You would typically
58+
* use this hook to perform additional imports.
59+
* @param parent - The parent addon or application this addon is currently working on.
60+
*/
61+
included(parent) {
62+
// We must call this._super or weird stuff happens.
63+
this._super.included.apply(this, [parent]);
64+
},
65+
66+
/**
67+
* Pre-process a tree. Used for adding/removing files from the build.
68+
* @param type - What kind of tree.
69+
* @param tree - The tree that's to be processed.
70+
* @returns - A tree that's ready to process.
71+
*/
72+
preprocessTree(type, tree) {
73+
if (type !== "template") return tree;
74+
75+
// TODO: Do something in the template tree.
76+
return tree;
77+
},
78+
79+
/**
80+
* Post-process a tree. Runs after the files in this tree have been built.
81+
* @param type - What kind of tree.
82+
* @param tree - The processed tree.
83+
* @returns - The processed tree.
84+
*/
85+
postprocessTree(type, tree) {
86+
if (type !== "template") return tree;
87+
88+
// TODO: Do something in the template tree.
89+
return tree;
90+
},
91+
92+
/**
93+
* Used to add preprocessors to the preprocessor registry. This is often used
94+
* by addons like ember-cli-htmlbars and ember-cli-coffeescript to add a
95+
* template or js preprocessor to the registry.
96+
* @param _type - Either "self" or "parent".
97+
* @param _registry - The registry to be set up.
98+
*/
99+
setupPreprocessorRegistry(_type, _registry) {
100+
// TODO: This hook may not be necessary in this addon.
101+
},
102+
};
103+
104+
// Aaaaand export the addon implementation!
105+
module.exports = EMBER_ADDON;
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
--reporter spec
2+
--require source-map-support/register
3+
--inline-diffs
4+
dist/test/*.js
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,26 @@
1+
{
2+
"extends": "../../../tsconfig.json",
3+
"compilerOptions": {
4+
"composite": true,
5+
"outDir": "dist",
6+
"baseUrl": "dist",
7+
"noImplicitAny": false,
8+
"paths": {
9+
"*": ["types/*"],
10+
}
11+
},
12+
"references": [
13+
{"path": "../config"},
14+
{"path": "../core"},
15+
{"path": "../glimmer"}
16+
],
17+
"include": [
18+
"src",
19+
"test"
20+
],
21+
"exclude": [
22+
"sanity",
23+
"dist",
24+
"node_modules"
25+
]
26+
}
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
{
2+
"$schema": "http://json.schemastore.org/tslint",
3+
"extends": "@css-blocks/code-style/configs/tslint.cli.json"
4+
}
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
{
2+
"extends": "@css-blocks/code-style/configs/tslint.cli.json"
3+
}
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
{
2+
"$schema": "http://json.schemastore.org/tslint",
3+
"extends": "@css-blocks/code-style/configs/tslint.release.json"
4+
}
Original file line numberDiff line numberDiff line change
@@ -1,20 +1,31 @@
11
{
22
"folders": [
33
{
4-
"path": "../../packages/@css-blocks/ember"
4+
"path": "../../packages/@css-blocks/ember",
5+
"name": "Addon: Ember"
56
},
67
{
7-
"path": "ember-engine"
8+
"path": "../../packages/@css-blocks/ember-app",
9+
"name": "Addon: Ember App"
810
},
911
{
10-
"path": "ember-addon"
12+
"path": "ember-app",
13+
"name": "Fixture: Ember App"
1114
},
1215
{
13-
"path": "ember-app"
16+
"path": "ember-addon",
17+
"name": "Fixture: Ember Addon"
1418
},
1519
{
16-
"path": "ember-lazy-engine"
20+
"path": "ember-engine",
21+
"name": "Fixture: Ember Engine"
22+
},
23+
{
24+
"path": "ember-lazy-engine",
25+
"name": "Fixture: Ember Lazy Engine"
1726
}
1827
],
19-
"settings": {}
28+
"settings": {
29+
"terminal.integrated.cwd": "${workspaceFolder:Fixture: Ember App}"
30+
}
2031
}

private-packages/fixtures-ember-v2/ember-app/package.json

+4-2
Original file line numberDiff line numberDiff line change
@@ -13,14 +13,16 @@
1313
"scripts": {
1414
"build": "ember build",
1515
"start": "ember serve",
16-
"pretest": "cd ../../../packages/@css-blocks/ember && yarn compile",
17-
"test": "ember test"
16+
"pretest": "cd ../../../packages/@css-blocks/ember && yarn compile && cd ../ember-app && yarn compile",
17+
"test": "ember test",
18+
"clean:debug": "rm -rf DEBUG"
1819
},
1920
"dependencies": {
2021
"@css-blocks-fixtures-v2/ember-addon": "^1.0.0",
2122
"@css-blocks-fixtures-v2/ember-engine": "^1.0.0",
2223
"@css-blocks-fixtures-v2/ember-lazy-engine": "^1.0.0",
2324
"@css-blocks/ember": "^0.1.0",
25+
"@css-blocks/ember-app": "^0.1.0",
2426
"ember-cli-babel": "^7.7.3",
2527
"ember-cli-htmlbars": "^5.2.0",
2628
"ember-engines": "^0.8.5"

private-packages/fixtures-ember-v2/ember-lazy-engine/package.json

+1
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,7 @@
88
],
99
"dependencies": {
1010
"@css-blocks/ember": "^0.1.0",
11+
"@css-blocks/ember-app": "^0.1.0",
1112
"ember-cli-babel": "^7.7.3",
1213
"ember-cli-htmlbars": "^5.2.0"
1314
},

0 commit comments

Comments
 (0)