From 8372e239af4f6dc303ab05b9e0abd8f1f9f45c22 Mon Sep 17 00:00:00 2001 From: Timofey Dergachev Date: Sun, 25 Jun 2017 20:29:13 +0300 Subject: [PATCH] Initial commit --- .editorconfig | 20 +++ .ember-cli | 9 ++ .eslintrc.js | 13 ++ .gitignore | 18 +++ .npmignore | 16 +++ .travis.yml | 31 +++++ .watchmanconfig | 3 + CHANGELOG.md | 3 + LICENSE.md | 21 ++++ README.md | 114 ++++++++++++++++++ addon/compose.js | 27 +++++ addon/helpers/jss.js | 17 +++ addon/index.js | 6 + addon/initializers/ember-cli-jss.js | 11 ++ addon/mixin.js | 111 +++++++++++++++++ addon/setup.js | 7 ++ addon/stylesheet.js | 102 ++++++++++++++++ app/helpers/jss.js | 1 + app/initializers/ember-cli-jss.js | 1 + config/ember-try.js | 54 +++++++++ config/environment.js | 6 + ember-cli-build.js | 17 +++ index.js | 19 +++ lib/htmlbars-plugin.js | 38 ++++++ package.json | 54 +++++++++ testem.js | 12 ++ tests/.eslintrc.js | 5 + tests/dummy/app/app.js | 18 +++ tests/dummy/app/components/.gitkeep | 0 tests/dummy/app/controllers/.gitkeep | 0 tests/dummy/app/helpers/.gitkeep | 0 tests/dummy/app/index.html | 25 ++++ tests/dummy/app/models/.gitkeep | 0 tests/dummy/app/resolver.js | 3 + tests/dummy/app/router.js | 12 ++ tests/dummy/app/routes/.gitkeep | 0 tests/dummy/app/styles/app.css | 0 tests/dummy/app/templates/application.hbs | 5 + tests/dummy/app/templates/components/.gitkeep | 0 tests/dummy/config/environment.js | 50 ++++++++ tests/dummy/config/targets.js | 10 ++ tests/dummy/public/crossdomain.xml | 15 +++ tests/dummy/public/robots.txt | 3 + tests/helpers/destroy-app.js | 5 + tests/helpers/module-for-acceptance.js | 23 ++++ tests/helpers/resolver.js | 11 ++ tests/helpers/start-app.js | 15 +++ tests/index.html | 33 +++++ tests/test-helper.js | 8 ++ 49 files changed, 972 insertions(+) create mode 100644 .editorconfig create mode 100644 .ember-cli create mode 100644 .eslintrc.js create mode 100644 .gitignore create mode 100644 .npmignore create mode 100644 .travis.yml create mode 100644 .watchmanconfig create mode 100644 CHANGELOG.md create mode 100644 LICENSE.md create mode 100644 README.md create mode 100644 addon/compose.js create mode 100644 addon/helpers/jss.js create mode 100644 addon/index.js create mode 100644 addon/initializers/ember-cli-jss.js create mode 100644 addon/mixin.js create mode 100644 addon/setup.js create mode 100644 addon/stylesheet.js create mode 100644 app/helpers/jss.js create mode 100644 app/initializers/ember-cli-jss.js create mode 100644 config/ember-try.js create mode 100644 config/environment.js create mode 100644 ember-cli-build.js create mode 100644 index.js create mode 100644 lib/htmlbars-plugin.js create mode 100644 package.json create mode 100644 testem.js create mode 100644 tests/.eslintrc.js create mode 100644 tests/dummy/app/app.js create mode 100644 tests/dummy/app/components/.gitkeep create mode 100644 tests/dummy/app/controllers/.gitkeep create mode 100644 tests/dummy/app/helpers/.gitkeep create mode 100644 tests/dummy/app/index.html create mode 100644 tests/dummy/app/models/.gitkeep create mode 100644 tests/dummy/app/resolver.js create mode 100644 tests/dummy/app/router.js create mode 100644 tests/dummy/app/routes/.gitkeep create mode 100644 tests/dummy/app/styles/app.css create mode 100644 tests/dummy/app/templates/application.hbs create mode 100644 tests/dummy/app/templates/components/.gitkeep create mode 100644 tests/dummy/config/environment.js create mode 100644 tests/dummy/config/targets.js create mode 100644 tests/dummy/public/crossdomain.xml create mode 100644 tests/dummy/public/robots.txt create mode 100644 tests/helpers/destroy-app.js create mode 100644 tests/helpers/module-for-acceptance.js create mode 100644 tests/helpers/resolver.js create mode 100644 tests/helpers/start-app.js create mode 100644 tests/index.html create mode 100644 tests/test-helper.js diff --git a/.editorconfig b/.editorconfig new file mode 100644 index 0000000..219985c --- /dev/null +++ b/.editorconfig @@ -0,0 +1,20 @@ +# EditorConfig helps developers define and maintain consistent +# coding styles between different editors and IDEs +# editorconfig.org + +root = true + + +[*] +end_of_line = lf +charset = utf-8 +trim_trailing_whitespace = true +insert_final_newline = true +indent_style = space +indent_size = 2 + +[*.hbs] +insert_final_newline = false + +[*.{diff,md}] +trim_trailing_whitespace = false diff --git a/.ember-cli b/.ember-cli new file mode 100644 index 0000000..ee64cfe --- /dev/null +++ b/.ember-cli @@ -0,0 +1,9 @@ +{ + /** + Ember CLI sends analytics information by default. The data is completely + anonymous, but there are times when you might want to disable this behavior. + + Setting `disableAnalytics` to true will prevent any data from being sent. + */ + "disableAnalytics": false +} diff --git a/.eslintrc.js b/.eslintrc.js new file mode 100644 index 0000000..2873e2f --- /dev/null +++ b/.eslintrc.js @@ -0,0 +1,13 @@ +module.exports = { + root: true, + parserOptions: { + ecmaVersion: 2017, + sourceType: 'module' + }, + extends: 'eslint:recommended', + env: { + browser: true + }, + rules: { + } +}; diff --git a/.gitignore b/.gitignore new file mode 100644 index 0000000..10f6405 --- /dev/null +++ b/.gitignore @@ -0,0 +1,18 @@ +# See https://help.github.com/ignore-files/ for more about ignoring files. + +# compiled output +/dist +/tmp + +# dependencies +/node_modules +/bower_components + +# misc +/.sass-cache +/connect.lock +/coverage/* +/libpeerconnection.log +npm-debug.log* +testem.log +yarn.lock diff --git a/.npmignore b/.npmignore new file mode 100644 index 0000000..889b2bf --- /dev/null +++ b/.npmignore @@ -0,0 +1,16 @@ +/bower_components +/config/ember-try.js +/dist +/tests +/tmp +**/.gitkeep +.bowerrc +.editorconfig +.ember-cli +.gitignore +.eslintrc.js +.watchmanconfig +.travis.yml +bower.json +ember-cli-build.js +testem.js diff --git a/.travis.yml b/.travis.yml new file mode 100644 index 0000000..f436a71 --- /dev/null +++ b/.travis.yml @@ -0,0 +1,31 @@ +--- +language: node_js +node_js: + - "6" + +sudo: false + +cache: + yarn: true + +env: + - EMBER_TRY_SCENARIO=ember-lts-2.4 + - EMBER_TRY_SCENARIO=ember-lts-2.8 + - EMBER_TRY_SCENARIO=ember-release + +matrix: + fast_finish: true + +before_install: + - curl -o- -L https://yarnpkg.com/install.sh | bash + - export PATH=$HOME/.yarn/bin:$PATH + - yarn global add phantomjs-prebuilt + - phantomjs --version + +install: + - yarn install --no-lockfile + +script: + # Usually, it's ok to finish the test scenario without reverting + # to the addon's original dependency state, skipping "cleanup". + - node_modules/.bin/ember try:one $EMBER_TRY_SCENARIO test --skip-cleanup diff --git a/.watchmanconfig b/.watchmanconfig new file mode 100644 index 0000000..e7834e3 --- /dev/null +++ b/.watchmanconfig @@ -0,0 +1,3 @@ +{ + "ignore_dirs": ["tmp", "dist"] +} diff --git a/CHANGELOG.md b/CHANGELOG.md new file mode 100644 index 0000000..fda5f3c --- /dev/null +++ b/CHANGELOG.md @@ -0,0 +1,3 @@ +0.1.0 / 2017-06-25 +================== +- Initial commit diff --git a/LICENSE.md b/LICENSE.md new file mode 100644 index 0000000..379cac7 --- /dev/null +++ b/LICENSE.md @@ -0,0 +1,21 @@ +# The MIT License + +Copyright © 2017 [Timofey Dergachev](https://exeto.me/en) + +Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions: + +The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. + +THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE. + +--- + +# Лицензия MIT + +Copyright © 2017 [Тимофей Дергачёв](https://exeto.me/) + +Данная лицензия разрешает лицам, получившим копию данного программного обеспечения и сопутствующей документации (в дальнейшем именуемыми «Программное Обеспечение»), безвозмездно использовать Программное Обеспечение без ограничений, включая неограниченное право на использование, копирование, изменение, добавление, публикацию, распространение, сублицензирование и/или продажу копий Программного Обеспечения, также как и лицам, которым предоставляется данное Программное Обеспечение, при соблюдении следующих условий: + +Указанное выше уведомление об авторском праве и данные условия должны быть включены во все копии или значимые части данного Программного Обеспечения. + +ДАННОЕ ПРОГРАММНОЕ ОБЕСПЕЧЕНИЕ ПРЕДОСТАВЛЯЕТСЯ «КАК ЕСТЬ», БЕЗ КАКИХ-ЛИБО ГАРАНТИЙ, ЯВНО ВЫРАЖЕННЫХ ИЛИ ПОДРАЗУМЕВАЕМЫХ, ВКЛЮЧАЯ, НО НЕ ОГРАНИЧИВАЯСЬ ГАРАНТИЯМИ ТОВАРНОЙ ПРИГОДНОСТИ, СООТВЕТСТВИЯ ПО ЕГО КОНКРЕТНОМУ НАЗНАЧЕНИЮ И ОТСУТСТВИЯ НАРУШЕНИЙ ПРАВ. НИ В КАКОМ СЛУЧАЕ АВТОРЫ ИЛИ ПРАВООБЛАДАТЕЛИ НЕ НЕСУТ ОТВЕТСТВЕННОСТИ ПО ИСКАМ О ВОЗМЕЩЕНИИ УЩЕРБА, УБЫТКОВ ИЛИ ДРУГИХ ТРЕБОВАНИЙ ПО ДЕЙСТВУЮЩИМ КОНТРАКТАМ, ДЕЛИКТАМ ИЛИ ИНОМУ, ВОЗНИКШИМ ИЗ, ИМЕЮЩИМ ПРИЧИНОЙ ИЛИ СВЯЗАННЫМ С ПРОГРАММНЫМ ОБЕСПЕЧЕНИЕМ ИЛИ ИСПОЛЬЗОВАНИЕМ ПРОГРАММНОГО ОБЕСПЕЧЕНИЯ ИЛИ ИНЫМИ ДЕЙСТВИЯМИ С ПРОГРАММНЫМ ОБЕСПЕЧЕНИЕМ. diff --git a/README.md b/README.md new file mode 100644 index 0000000..95fa28e --- /dev/null +++ b/README.md @@ -0,0 +1,114 @@ +# ember-cli-jss [![Build Status][buildstat-image]][buildstat-url] + +> JSS integration for Ember + +## Install + +```bash +$ npm install --save-dev ember-browserify +$ npm install --save ember-cli-jss jss jss-preset-default +``` + +## Usage + +The property `stylesheet` must be an instance of the `StyleSheet`. + +Properties `jssNames` and `jssNameBindings` work like `classNames` and `classNameBindings`, respectively. + +When you update properties listed in the `jssObservedProps`, dynamic styles will be updated. + +```js +// ...awesome-component/component.js + +import Ember from 'ember'; +import JSS from 'ember-cli-jss'; +import stylesheet from './stylesheet'; + +export default Ember.Component.extend(JSS, { + stylesheet, + jssNames: ['wrapper'], + jssNameBindings: ['isShow:show'], + jssObservedProps: ['color'], + + color: 'blue', + isShow: true, + + actions: { + changeColor(color) { + this.set('color', color); + }, + }, +}); +``` + +Constructor `StyleSheet` accepts the same arguments as [`jss.createStyleSheet`](http://cssinjs.org/js-api?v=v8.0.0#create-style-sheet). + +```js +// ...awesome-component/stylesheet.js + +import { StyleSheet } from 'ember-cli-jss'; + +export default new StyleSheet({ + wrapper: { + width: 600, + display: 'none', + }, + + show: { + display: 'block', + }, + + content: { + color: data => data.color; + }, +}); +``` + +```hbs +{{!-- ...awesome-component/template.hbs --}} + + + +
+ Lorem ipsum... +
+``` + +## Helper + +```hbs + +``` + +## Configuration + +Plugin [`jss-preset-default`](https://github.com/cssinjs/jss-preset-default) applied by default. Please note that the work of the dynamic properties depends on [`jss-compose`](https://github.com/cssinjs/jss-compose) plugin. + +You can override the `app/initializers/ember-cli-jss.js`. Use `setup`, it takes the same arguments as [`jss.setup`](http://cssinjs.org/js-api?v=v8.0.0#setup-jss-instance). + +```js +// ...app/initializers/ember-cli-jss.js + +import { setup } from 'ember-cli-jss'; +import compose from 'npm:jss-compose'; + +export function initialize() { + setup(compose.default()); +} + +export default { + name: 'ember-cli-jss', + initialize, +}; +``` + +## License + +[MIT](LICENSE.md) © [Timofey Dergachev](https://exeto.me/) + +[buildstat-url]: https://travis-ci.org/exeto/ember-cli-jss?branch=master +[buildstat-image]: https://img.shields.io/travis/exeto/ember-cli-jss/master.svg?style=flat-square diff --git a/addon/compose.js b/addon/compose.js new file mode 100644 index 0000000..cfc116f --- /dev/null +++ b/addon/compose.js @@ -0,0 +1,27 @@ +import Ember from 'ember'; + +const { merge } = Ember; + +export default (staticSheet, styles) => { + for (const name in styles) { + const className = staticSheet.classes[name]; + + if (!className) { + break; + } + + merge(styles[name], { composes: className }); + } + + if (styles) { + for (const name in staticSheet.classes) { + const className = styles[name]; + + if (!className) { + styles[name] = { composes: staticSheet.classes[name] } + } + } + } + + return styles +} diff --git a/addon/helpers/jss.js b/addon/helpers/jss.js new file mode 100644 index 0000000..347525a --- /dev/null +++ b/addon/helpers/jss.js @@ -0,0 +1,17 @@ +import Ember from 'ember'; + +const { + Helper: { helper }, +} = Ember; + +export default helper((params, hash) => { + const { classes = {} } = hash; + + const items = Object.keys(hash) + .filter(key => ( + key !== 'classes' && + hash[key] + )); + + return [...params, ...items].map(param => classes[param] || '').join(' '); +}); diff --git a/addon/index.js b/addon/index.js new file mode 100644 index 0000000..3cdf3c9 --- /dev/null +++ b/addon/index.js @@ -0,0 +1,6 @@ +import Mixin from './mixin'; +import StyleSheet from './stylesheet'; +import setup from './setup'; + +export default Mixin; +export { StyleSheet, setup }; diff --git a/addon/initializers/ember-cli-jss.js b/addon/initializers/ember-cli-jss.js new file mode 100644 index 0000000..5f2c4b6 --- /dev/null +++ b/addon/initializers/ember-cli-jss.js @@ -0,0 +1,11 @@ +import { setup } from 'ember-cli-jss'; +import preset from 'npm:jss-preset-default'; + +export function initialize() { + setup(preset.default()); +} + +export default { + name: 'ember-cli-jss', + initialize, +}; diff --git a/addon/mixin.js b/addon/mixin.js new file mode 100644 index 0000000..4d97f08 --- /dev/null +++ b/addon/mixin.js @@ -0,0 +1,111 @@ +import Ember from 'ember'; +import StyleSheet from './stylesheet'; + +const { + Mixin, + mixin, + assert, + computed, +} = Ember; + +const EMPTY_ARRAY = Object.freeze([]); + +// Imitation private properties +const PREFIX = `JSS-${Date.now()}`; +const CLASS_NAMES = `${PREFIX}-classNames`; +const CLASS_NAME_BINDINGS = `${PREFIX}-classNameBindings`; + +const createBindings = (context) => { + const observedProperties = context.jssNameBindings + .map((items) => items.split(':')[0]); + + mixin(context, { + [CLASS_NAME_BINDINGS]: computed(...observedProperties, () => { + const classes = context.get('classes'); + + return context.jssNameBindings + .map((item) => { + const items = item.split(':'); + + if (items.length === 1) { + return classes[context.get(items[0])]; + } + + return context.get(items[0]) + ? classes[items[1]] + : classes[items[2]]; + }) + .join(' '); + }).readOnly(), + }); +}; + +export default Mixin.create({ + jssNames: EMPTY_ARRAY, + jssNameBindings: EMPTY_ARRAY, + jssObservedProps: EMPTY_ARRAY, + + classNameBindings: [ + CLASS_NAMES, + CLASS_NAME_BINDINGS, + ], + + classes: computed(function() { + return this.get('stylesheet.sheet.classes'); + }).readOnly(), + + [CLASS_NAMES]: computed('jssNames.[]', function() { + return this.jssNames + .map((name) => this.get(`classes.${name}`)) + .join(' '); + }).readOnly(), + + init() { + this._super(...arguments); + + assert( + 'Only instance of StyleSheet allowed for "stylesheet"', + this.get('stylesheet') instanceof StyleSheet + ); + + assert( + 'Only arrays are allowed for "jssNames"', + Array.isArray(this.jssNames) + ); + + assert( + 'Only arrays are allowed for "jssObservedProps"', + Array.isArray(this.jssObservedProps) + ); + + assert( + 'Only arrays are allowed for "jssNameBindings"', + Array.isArray(this.jssNameBindings) + ); + }, + + willInsertElement() { + this._super(...arguments); + + createBindings(this); + + const componentName = String(this).match(/:(.+?):/)[1]; + const id = this.elementId; + + this.stylesheet.attach(id, componentName); + + const sheet = this.stylesheet.dynamicSheets[id]; + const fields = this.get('jssObservedProps') || []; + const update = () => sheet.update(this.getProperties(fields)); + + update(); + + fields.forEach((field) => this.addObserver(field, this, update)); + }, + + willDestroyElement() { + this._super(...arguments); + + this.stylesheet.detach(this.elementId); + } +}); diff --git a/addon/setup.js b/addon/setup.js new file mode 100644 index 0000000..deb9741 --- /dev/null +++ b/addon/setup.js @@ -0,0 +1,7 @@ +import jss from 'npm:jss'; + +export const jssInstance = jss.create(); + +export default (options = {}) => { + jssInstance.setup(options); +}; diff --git a/addon/stylesheet.js b/addon/stylesheet.js new file mode 100644 index 0000000..a014c71 --- /dev/null +++ b/addon/stylesheet.js @@ -0,0 +1,102 @@ +import Ember from 'ember'; +import jss from 'npm:jss'; +import compose from './compose'; +import { jssInstance } from './setup'; + +const { copy, merge } = Ember; +const { getDynamicStyles } = jss; + +const isEmpty = (obj = {}) => !Object.keys(obj).length; + +export default class StyleSheet { + constructor(styles, options) { + this.refs = 0; + this.dynamicSheets = {}; + this.styles = styles; + this.options = options || {}; + } + + createStaticSheetAndAttach(name) { + const options = copy(this.options); + + if (!options.meta) { + options.meta = name; + } + + this.staticSheet = jssInstance.createStyleSheet( + this.styles, + options + ); + + if (!isEmpty(this.staticSheet.classes)) { + this.staticSheet.attach(); + this.refs++; + } + } + + createDynamicSheetAndAttach(id, name) { + const dynamicOptions = copy(this.options); + const meta = dynamicOptions.meta || `${name} dynamic`; + + merge(dynamicOptions, { + meta, + link: true, + }); + + const dynamicStyles = compose( + this.staticSheet, + getDynamicStyles(this.styles) + ); + + const dynamicSheet = jssInstance.createStyleSheet( + dynamicStyles, + dynamicOptions + ); + + if (!isEmpty(dynamicSheet.classes)) { + dynamicSheet.attach(); + } + + this.dynamicSheets[id] = dynamicSheet; + } + + detachStaticSheet() { + this.refs--; + + if (this.refs === 0) { + this.staticSheet.detach(); + } + } + + detachDynamicSheet(id) { + this.dynamicSheets[id].detach(); + delete this.dynamicSheets[id]; + } + + setupSheet(id) { + const dynamicSheet = this.dynamicSheets[id]; + + this.sheet = isEmpty(dynamicSheet.classes) + ? this.staticSheet + : dynamicSheet; + } + + attach(id, name) { + if (!this.staticSheet) { + this.createStaticSheetAndAttach(name); + } + + this.createDynamicSheetAndAttach(id, name); + + this.setupSheet(id); + } + + detach(id) { + this.detachStaticSheet(); + this.detachDynamicSheet(id); + } + + update(data) { + this.dynamicSheet.update(data); + } +} diff --git a/app/helpers/jss.js b/app/helpers/jss.js new file mode 100644 index 0000000..52890fd --- /dev/null +++ b/app/helpers/jss.js @@ -0,0 +1 @@ +export { default } from 'ember-cli-jss/helpers/jss'; diff --git a/app/initializers/ember-cli-jss.js b/app/initializers/ember-cli-jss.js new file mode 100644 index 0000000..0f4be6d --- /dev/null +++ b/app/initializers/ember-cli-jss.js @@ -0,0 +1 @@ +export { default, initialize } from 'ember-cli-jss/initializers/ember-cli-jss'; diff --git a/config/ember-try.js b/config/ember-try.js new file mode 100644 index 0000000..ee2af92 --- /dev/null +++ b/config/ember-try.js @@ -0,0 +1,54 @@ +/* eslint-env node */ + +module.exports = { + scenarios: [ + { + name: 'ember-lts-2.4', + bower: { + dependencies: { + 'ember': 'components/ember#lts-2-4' + }, + resolutions: { + 'ember': 'lts-2-4' + } + }, + npm: { + devDependencies: { + 'ember-source': null + } + } + }, + { + name: 'ember-lts-2.8', + bower: { + dependencies: { + 'ember': 'components/ember#lts-2-8' + }, + resolutions: { + 'ember': 'lts-2-8' + } + }, + npm: { + devDependencies: { + 'ember-source': null + } + } + }, + { + name: 'ember-release', + bower: { + dependencies: { + 'ember': 'components/ember#release' + }, + resolutions: { + 'ember': 'release' + } + }, + npm: { + devDependencies: { + 'ember-source': null + } + } + }, + ] +}; diff --git a/config/environment.js b/config/environment.js new file mode 100644 index 0000000..012a412 --- /dev/null +++ b/config/environment.js @@ -0,0 +1,6 @@ +/* eslint-env node */ +'use strict'; + +module.exports = function(/* environment, appConfig */) { + return { }; +}; diff --git a/ember-cli-build.js b/ember-cli-build.js new file mode 100644 index 0000000..5e6f037 --- /dev/null +++ b/ember-cli-build.js @@ -0,0 +1,17 @@ +/* eslint-env node */ +const EmberAddon = require('ember-cli/lib/broccoli/ember-addon'); + +module.exports = function(defaults) { + var app = new EmberAddon(defaults, { + // Add options here + }); + + /* + This build file specifies the options for the dummy test app of this + addon, located in `/tests/dummy` + This build file does *not* influence how the addon or the app using it + behave. You most likely want to be modifying `./index.js` or app's build file + */ + + return app.toTree(); +}; diff --git a/index.js b/index.js new file mode 100644 index 0000000..1507351 --- /dev/null +++ b/index.js @@ -0,0 +1,19 @@ +/* eslint-env node */ + +'use strict'; + +const HtmlbarsPlugin = require('./lib/htmlbars-plugin'); + +module.exports = { + name: 'ember-cli-jss', + + setupPreprocessorRegistry: function(type, registry) { + if (type !== 'parent') { return; } + + registry.add('htmlbars-ast-plugin', { + name: 'ember-cli-jss', + plugin: HtmlbarsPlugin, + baseDir: () => __dirname, + }); + }, +}; diff --git a/lib/htmlbars-plugin.js b/lib/htmlbars-plugin.js new file mode 100644 index 0000000..6a42bc5 --- /dev/null +++ b/lib/htmlbars-plugin.js @@ -0,0 +1,38 @@ +/* eslint-env node */ + +module.exports = class HtmlbarsPlugin { + transform(ast) { + this.syntax.traverse(ast, { + MustacheStatement: this.transformStatementOrExpression.bind(this), + BlockStatement: this.transformStatementOrExpression.bind(this), + SubExpression: this.transformStatementOrExpression.bind(this) + }); + + return ast; + } + + transformStatementOrExpression(node) { + if (node.path.original === 'jss') { + this.transformJSSHelperInvocation(node); + } + } + + transformJSSHelperInvocation(node) { + const existingPair = node.hash.pairs.find(item => item.key === 'classes'); + + if (existingPair) { + return; + } + + const pair = this.syntax.builders.pair('classes', this.createSubExpression()); + + node.hash.pairs.push(pair); + } + + createSubExpression() { + const classesPath = this.syntax.builders.path('classes'); + const unboundPath = this.syntax.builders.path('unbound'); + + return this.syntax.builders.sexpr(unboundPath, [classesPath]); + } +} diff --git a/package.json b/package.json new file mode 100644 index 0000000..45b4b8f --- /dev/null +++ b/package.json @@ -0,0 +1,54 @@ +{ + "name": "ember-cli-jss", + "version": "0.1.0", + "description": "JSS integration for Ember", + "repository": "exeto/ember-cli-jss", + "author": "Timofey Dergachev (https://exeto.me/)", + "license": "MIT", + "scripts": { + "build": "ember build", + "start": "ember server", + "test": "ember try:each" + }, + "keywords": [ + "ember-addon", + "jss", + "style", + "sheet", + "stylesheet", + "css", + "components", + "composable", + "css in js", + "css-in-js" + ], + "dependencies": { + "ember-browserify": "^1.1.13", + "ember-cli-babel": "^6.4.1", + "jss": "^8.0.0", + "jss-preset-default": "^3.0.0" + }, + "devDependencies": { + "broccoli-asset-rev": "^2.4.5", + "ember-ajax": "^3.0.0", + "ember-cli": "2.13.2", + "ember-cli-dependency-checker": "^1.3.0", + "ember-cli-eslint": "^3.0.0", + "ember-cli-htmlbars": "^1.1.1", + "ember-cli-htmlbars-inline-precompile": "^0.4.0", + "ember-cli-inject-live-reload": "^1.4.1", + "ember-cli-qunit": "^4.0.0", + "ember-cli-shims": "^1.1.0", + "ember-cli-sri": "^2.1.0", + "ember-cli-uglify": "^1.2.0", + "ember-disable-prototype-extensions": "^1.1.0", + "ember-export-application-global": "^2.0.0", + "ember-load-initializers": "^1.0.0", + "ember-resolver": "^4.0.0", + "ember-source": "~2.13.0", + "loader.js": "^4.2.3" + }, + "ember-addon": { + "configPath": "tests/dummy/config" + } +} diff --git a/testem.js b/testem.js new file mode 100644 index 0000000..b234048 --- /dev/null +++ b/testem.js @@ -0,0 +1,12 @@ +/* eslint-env node */ +module.exports = { + "test_page": "tests/index.html?hidepassed", + "disable_watching": true, + "launch_in_ci": [ + "PhantomJS" + ], + "launch_in_dev": [ + "PhantomJS", + "Chrome" + ] +}; diff --git a/tests/.eslintrc.js b/tests/.eslintrc.js new file mode 100644 index 0000000..fbf2555 --- /dev/null +++ b/tests/.eslintrc.js @@ -0,0 +1,5 @@ +module.exports = { + env: { + embertest: true + } +}; diff --git a/tests/dummy/app/app.js b/tests/dummy/app/app.js new file mode 100644 index 0000000..831ad61 --- /dev/null +++ b/tests/dummy/app/app.js @@ -0,0 +1,18 @@ +import Ember from 'ember'; +import Resolver from './resolver'; +import loadInitializers from 'ember-load-initializers'; +import config from './config/environment'; + +let App; + +Ember.MODEL_FACTORY_INJECTIONS = true; + +App = Ember.Application.extend({ + modulePrefix: config.modulePrefix, + podModulePrefix: config.podModulePrefix, + Resolver +}); + +loadInitializers(App, config.modulePrefix); + +export default App; diff --git a/tests/dummy/app/components/.gitkeep b/tests/dummy/app/components/.gitkeep new file mode 100644 index 0000000..e69de29 diff --git a/tests/dummy/app/controllers/.gitkeep b/tests/dummy/app/controllers/.gitkeep new file mode 100644 index 0000000..e69de29 diff --git a/tests/dummy/app/helpers/.gitkeep b/tests/dummy/app/helpers/.gitkeep new file mode 100644 index 0000000..e69de29 diff --git a/tests/dummy/app/index.html b/tests/dummy/app/index.html new file mode 100644 index 0000000..5120bd7 --- /dev/null +++ b/tests/dummy/app/index.html @@ -0,0 +1,25 @@ + + + + + + Dummy + + + + {{content-for "head"}} + + + + + {{content-for "head-footer"}} + + + {{content-for "body"}} + + + + + {{content-for "body-footer"}} + + diff --git a/tests/dummy/app/models/.gitkeep b/tests/dummy/app/models/.gitkeep new file mode 100644 index 0000000..e69de29 diff --git a/tests/dummy/app/resolver.js b/tests/dummy/app/resolver.js new file mode 100644 index 0000000..2fb563d --- /dev/null +++ b/tests/dummy/app/resolver.js @@ -0,0 +1,3 @@ +import Resolver from 'ember-resolver'; + +export default Resolver; diff --git a/tests/dummy/app/router.js b/tests/dummy/app/router.js new file mode 100644 index 0000000..cdc2578 --- /dev/null +++ b/tests/dummy/app/router.js @@ -0,0 +1,12 @@ +import Ember from 'ember'; +import config from './config/environment'; + +const Router = Ember.Router.extend({ + location: config.locationType, + rootURL: config.rootURL +}); + +Router.map(function() { +}); + +export default Router; diff --git a/tests/dummy/app/routes/.gitkeep b/tests/dummy/app/routes/.gitkeep new file mode 100644 index 0000000..e69de29 diff --git a/tests/dummy/app/styles/app.css b/tests/dummy/app/styles/app.css new file mode 100644 index 0000000..e69de29 diff --git a/tests/dummy/app/templates/application.hbs b/tests/dummy/app/templates/application.hbs new file mode 100644 index 0000000..1eac0a2 --- /dev/null +++ b/tests/dummy/app/templates/application.hbs @@ -0,0 +1,5 @@ +{{!-- The following component displays Ember's default welcome message. --}} +{{welcome-page}} +{{!-- Feel free to remove this! --}} + +{{outlet}} \ No newline at end of file diff --git a/tests/dummy/app/templates/components/.gitkeep b/tests/dummy/app/templates/components/.gitkeep new file mode 100644 index 0000000..e69de29 diff --git a/tests/dummy/config/environment.js b/tests/dummy/config/environment.js new file mode 100644 index 0000000..6a378d3 --- /dev/null +++ b/tests/dummy/config/environment.js @@ -0,0 +1,50 @@ +/* eslint-env node */ + +module.exports = function(environment) { + var ENV = { + modulePrefix: 'dummy', + environment: environment, + rootURL: '/', + locationType: 'auto', + EmberENV: { + FEATURES: { + // Here you can enable experimental features on an ember canary build + // e.g. 'with-controller': true + }, + EXTEND_PROTOTYPES: { + // Prevent Ember Data from overriding Date.parse. + Date: false + } + }, + + APP: { + // Here you can pass flags/options to your application instance + // when it is created + } + }; + + if (environment === 'development') { + // ENV.APP.LOG_RESOLVER = true; + // ENV.APP.LOG_ACTIVE_GENERATION = true; + // ENV.APP.LOG_TRANSITIONS = true; + // ENV.APP.LOG_TRANSITIONS_INTERNAL = true; + // ENV.APP.LOG_VIEW_LOOKUPS = true; + } + + if (environment === 'test') { + // Testem prefers this... + ENV.locationType = 'none'; + + // keep test console output quieter + ENV.APP.LOG_ACTIVE_GENERATION = false; + ENV.APP.LOG_VIEW_LOOKUPS = false; + + ENV.APP.rootElement = '#ember-testing'; + } + + if (environment === 'production') { + + } + + return ENV; +}; diff --git a/tests/dummy/config/targets.js b/tests/dummy/config/targets.js new file mode 100644 index 0000000..2bebfac --- /dev/null +++ b/tests/dummy/config/targets.js @@ -0,0 +1,10 @@ +/* eslint-env node */ + +module.exports = { + browsers: [ + 'ie 9', + 'last 1 Chrome versions', + 'last 1 Firefox versions', + 'last 1 Safari versions' + ] +}; diff --git a/tests/dummy/public/crossdomain.xml b/tests/dummy/public/crossdomain.xml new file mode 100644 index 0000000..0c16a7a --- /dev/null +++ b/tests/dummy/public/crossdomain.xml @@ -0,0 +1,15 @@ + + + + + + + + + + + diff --git a/tests/dummy/public/robots.txt b/tests/dummy/public/robots.txt new file mode 100644 index 0000000..f591645 --- /dev/null +++ b/tests/dummy/public/robots.txt @@ -0,0 +1,3 @@ +# http://www.robotstxt.org +User-agent: * +Disallow: diff --git a/tests/helpers/destroy-app.js b/tests/helpers/destroy-app.js new file mode 100644 index 0000000..c3d4d1a --- /dev/null +++ b/tests/helpers/destroy-app.js @@ -0,0 +1,5 @@ +import Ember from 'ember'; + +export default function destroyApp(application) { + Ember.run(application, 'destroy'); +} diff --git a/tests/helpers/module-for-acceptance.js b/tests/helpers/module-for-acceptance.js new file mode 100644 index 0000000..76996fd --- /dev/null +++ b/tests/helpers/module-for-acceptance.js @@ -0,0 +1,23 @@ +import { module } from 'qunit'; +import Ember from 'ember'; +import startApp from '../helpers/start-app'; +import destroyApp from '../helpers/destroy-app'; + +const { RSVP: { Promise } } = Ember; + +export default function(name, options = {}) { + module(name, { + beforeEach() { + this.application = startApp(); + + if (options.beforeEach) { + return options.beforeEach.apply(this, arguments); + } + }, + + afterEach() { + let afterEach = options.afterEach && options.afterEach.apply(this, arguments); + return Promise.resolve(afterEach).then(() => destroyApp(this.application)); + } + }); +} diff --git a/tests/helpers/resolver.js b/tests/helpers/resolver.js new file mode 100644 index 0000000..b208d38 --- /dev/null +++ b/tests/helpers/resolver.js @@ -0,0 +1,11 @@ +import Resolver from '../../resolver'; +import config from '../../config/environment'; + +const resolver = Resolver.create(); + +resolver.namespace = { + modulePrefix: config.modulePrefix, + podModulePrefix: config.podModulePrefix +}; + +export default resolver; diff --git a/tests/helpers/start-app.js b/tests/helpers/start-app.js new file mode 100644 index 0000000..9a605eb --- /dev/null +++ b/tests/helpers/start-app.js @@ -0,0 +1,15 @@ +import Ember from 'ember'; +import Application from '../../app'; +import config from '../../config/environment'; + +export default function startApp(attrs) { + let attributes = Ember.merge({}, config.APP); + attributes = Ember.merge(attributes, attrs); // use defaults, but you can override; + + return Ember.run(() => { + let application = Application.create(attributes); + application.setupForTesting(); + application.injectTestHelpers(); + return application; + }); +} diff --git a/tests/index.html b/tests/index.html new file mode 100644 index 0000000..5209b85 --- /dev/null +++ b/tests/index.html @@ -0,0 +1,33 @@ + + + + + + Dummy Tests + + + + {{content-for "head"}} + {{content-for "test-head"}} + + + + + + {{content-for "head-footer"}} + {{content-for "test-head-footer"}} + + + {{content-for "body"}} + {{content-for "test-body"}} + + + + + + + + {{content-for "body-footer"}} + {{content-for "test-body-footer"}} + + diff --git a/tests/test-helper.js b/tests/test-helper.js new file mode 100644 index 0000000..f219659 --- /dev/null +++ b/tests/test-helper.js @@ -0,0 +1,8 @@ +import resolver from './helpers/resolver'; +import { + setResolver +} from 'ember-qunit'; +import { start } from 'ember-cli-qunit'; + +setResolver(resolver); +start();