Skip to content

Commit 945b2a8

Browse files
committed
Merge remote-tracking branch 'origin/ember-rewrite' into ember-rewrite
2 parents e5b839e + df501f7 commit 945b2a8

File tree

10 files changed

+279
-8
lines changed

10 files changed

+279
-8
lines changed
+36
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,36 @@
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 Ember applications.
8+
9+
This addon is only part of the Ember build pipeline for CSS Blocks! Your application, as well as any addons or engines you rely on, will need the `@css-blocks/ember` addon as a dependency if they have any CSS Blocks files.
10+
11+
## Basic Usage
12+
13+
1. Add this addon as a dependency to your application.
14+
2. Also make sure you add `@css-blocks/ember` as a dependency if you are authoring css using CSS Blocks.
15+
3. Run `ember build`.
16+
17+
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.
18+
19+
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.
20+
21+
## Options
22+
23+
None at the moment, but when they're available, we'll document them here.
24+
25+
## Common Gotchas
26+
27+
This section is devoted to common issues you might run into when working with this addon.
28+
29+
### Nothing yet...
30+
31+
There's nothing here yet, but we'll add things here as the need arises.
32+
33+
## More Reading
34+
35+
- [CSS Blocks User Documentation](https://css-blocks.com/)
36+
- Ember Build Pipeline Technical Deep Dive - Link TBD
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,81 @@
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-app",
9+
"homepage": "https://github.com/linkedin/css-blocks/tree/master/packages/%40css-blocks/ember-app#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+
"dependencies": {
47+
"@css-blocks/config": "^1.0.0",
48+
"@css-blocks/core": "^1.0.0",
49+
"@css-blocks/glimmer": "^1.0.0",
50+
"@glimmer/compiler": "^0.43.0",
51+
"@glimmer/syntax": "^0.43.0",
52+
"@opticss/template-api": "^0.6.3",
53+
"@opticss/util": "^0.7.0",
54+
"broccoli-debug": "^0.6.5",
55+
"broccoli-funnel": "^3.0.2",
56+
"broccoli-merge-trees": "^4.0.0",
57+
"broccoli-output-wrapper": "^3.2.1",
58+
"broccoli-plugin": "^4.0.0",
59+
"colors": "^1.2.1",
60+
"debug": "^4.1.1",
61+
"fs-extra": "^8.0.0",
62+
"fs-merger": "^3.0.2",
63+
"fs-tree-diff": "^2.0.0",
64+
"glob": "^7.1.2",
65+
"opticss": "^0.7.0",
66+
"symlink-or-copy": "^1.2.0",
67+
"walk-sync": "^2.0.0"
68+
},
69+
"volta": {
70+
"node": "12.2.0",
71+
"yarn": "1.21.0"
72+
},
73+
"engines": {
74+
"node": "10.* || >= 12.*"
75+
},
76+
"ember-addon": {
77+
"after": [
78+
"@css-blocks/ember"
79+
]
80+
}
81+
}
+101
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,101 @@
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 Ember applications.
6+
*
7+
* This addon is responsible for bundling together all CSS Blocks content
8+
* from the application, concatenating it into a final artifact, and
9+
* optimizing its content using OptiCSS. Additionaly, this addon generates a
10+
* JSON bundle that contains runtime data that templates need to resolve
11+
* what classes to add to each CSS Blocks-powered component. And, finally,
12+
* this addon provides a runtime helper to actually write out those classes.
13+
*
14+
* This addon expects that all intermediary blocks have already been compiled
15+
* into their respective Compiled CSS and Definition Files using the
16+
* @css-blocks/ember addon. Your app should also include this as a dependency,
17+
* or else this addon won't generate any CSS output!
18+
*
19+
* A friendly refresher for those that might've missed this tidbit from
20+
* @css-blocks/ember... CSS Blocks actually compiles its CSS as part of the
21+
* Template tree, not the styles tree! This is because CSS Blocks is unique
22+
* in how it reasons about both your templates and styles together. So, in order
23+
* to actually reason about both, and, in turn, rewrite your templates for you,
24+
* both have to be processed when building templates.
25+
*
26+
* You can read more about CSS Blocks at...
27+
* css-blocks.com
28+
*
29+
* And you can read up on the Ember build pipeline for CSS Blocks at...
30+
* <LINK_TBD>
31+
*
32+
* @todo: Provide a link for Ember build pipeline readme.
33+
*/
34+
const EMBER_ADDON: AddonImplementation = {
35+
/**
36+
* The name of this addon. Generally matches the package name in package.json.
37+
*/
38+
name: "@css-blocks/ember-app",
39+
40+
/**
41+
* Initalizes this addon instance for use.
42+
* @param parent - The project or addon that directly depends on this addon.
43+
* @param project - The current project (deprecated).
44+
*/
45+
init(parent, project) {
46+
// We must call this._super or weird stuff happens. The Ember CLI docs
47+
// recommend guarding this call, so we're gonna ask TSLint to chill.
48+
// tslint:disable-next-line: no-unused-expression
49+
this._super.init && this._super.init.call(this, parent, project);
50+
},
51+
52+
/**
53+
* This method is called when the addon is included in a build. You would typically
54+
* use this hook to perform additional imports.
55+
* @param parent - The parent addon or application this addon is currently working on.
56+
*/
57+
included(parent) {
58+
// We must call this._super or weird stuff happens.
59+
this._super.included.apply(this, [parent]);
60+
},
61+
62+
/**
63+
* Pre-process a tree. Used for adding/removing files from the build.
64+
* @param type - What kind of tree.
65+
* @param tree - The tree that's to be processed.
66+
* @returns - A tree that's ready to process.
67+
*/
68+
preprocessTree(type, tree) {
69+
if (type !== "template") return tree;
70+
71+
// TODO: Do something in the template tree.
72+
return tree;
73+
},
74+
75+
/**
76+
* Post-process a tree. Runs after the files in this tree have been built.
77+
* @param type - What kind of tree.
78+
* @param tree - The processed tree.
79+
* @returns - The processed tree.
80+
*/
81+
postprocessTree(type, tree) {
82+
if (type !== "template") return tree;
83+
84+
// TODO: Do something in the template tree.
85+
return tree;
86+
},
87+
88+
/**
89+
* Used to add preprocessors to the preprocessor registry. This is often used
90+
* by addons like ember-cli-htmlbars and ember-cli-coffeescript to add a
91+
* template or js preprocessor to the registry.
92+
* @param _type - Either "self" or "parent".
93+
* @param _registry - The registry to be set up.
94+
*/
95+
setupPreprocessorRegistry(_type, _registry) {
96+
// TODO: This hook may not be necessary in this addon.
97+
},
98+
};
99+
100+
// Aaaaand export the addon implementation!
101+
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,25 @@
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+
"dist",
23+
"node_modules"
24+
]
25+
}
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"

0 commit comments

Comments
 (0)