├── vendor
└── .gitkeep
├── tests
├── helpers
│ └── .gitkeep
├── dummy
│ ├── app
│ │ ├── helpers
│ │ │ └── .gitkeep
│ │ ├── models
│ │ │ └── .gitkeep
│ │ ├── routes
│ │ │ └── .gitkeep
│ │ ├── styles
│ │ │ └── app.css
│ │ ├── resolver.js
│ │ ├── templates
│ │ │ ├── components
│ │ │ │ ├── number-input.hbs
│ │ │ │ └── input.hbs
│ │ │ └── application.hbs
│ │ ├── router.js
│ │ ├── controllers
│ │ │ └── application.ts
│ │ ├── app.js
│ │ ├── config
│ │ │ └── environment.d.ts
│ │ ├── components
│ │ │ ├── input.ts
│ │ │ └── number-input.ts
│ │ └── index.html
│ ├── config
│ │ ├── optional-features.json
│ │ ├── targets.js
│ │ └── environment.js
│ └── public
│ │ └── robots.txt
├── test-helper.js
├── index.html
├── integration
│ └── helpers
│ │ └── box-test.js
└── unit
│ └── box-test.ts
├── types
├── dummy
│ └── index.d.ts
└── global.d.ts
├── .watchmanconfig
├── app
└── helpers
│ ├── box.js
│ ├── unwrap.js
│ ├── update.js
│ └── wrap.js
├── .template-lintrc.js
├── config
├── environment.js
└── ember-try.js
├── .ember-cli
├── .eslintignore
├── index.js
├── .editorconfig
├── .gitignore
├── .npmignore
├── ember-cli-build.js
├── testem.js
├── CONTRIBUTING.md
├── LICENSE.md
├── .eslintrc.js
├── tsconfig.json
├── lib
└── box-transform.js
├── .travis.yml
├── package.json
├── addon
└── index.ts
└── README.md
/vendor/.gitkeep:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/tests/helpers/.gitkeep:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/types/dummy/index.d.ts:
--------------------------------------------------------------------------------
1 |
2 |
--------------------------------------------------------------------------------
/tests/dummy/app/helpers/.gitkeep:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/tests/dummy/app/models/.gitkeep:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/tests/dummy/app/routes/.gitkeep:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/tests/dummy/app/styles/app.css:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/.watchmanconfig:
--------------------------------------------------------------------------------
1 | {
2 | "ignore_dirs": ["tmp", "dist"]
3 | }
4 |
--------------------------------------------------------------------------------
/app/helpers/box.js:
--------------------------------------------------------------------------------
1 | export { boxHelper as default } from 'ember-box';
2 |
--------------------------------------------------------------------------------
/app/helpers/unwrap.js:
--------------------------------------------------------------------------------
1 | export { unwrapHelper as default } from 'ember-box';
2 |
--------------------------------------------------------------------------------
/app/helpers/update.js:
--------------------------------------------------------------------------------
1 | export { updateHelper as default } from 'ember-box';
2 |
--------------------------------------------------------------------------------
/app/helpers/wrap.js:
--------------------------------------------------------------------------------
1 | export { wrapHelper as default } from 'ember-box';
2 |
--------------------------------------------------------------------------------
/tests/dummy/config/optional-features.json:
--------------------------------------------------------------------------------
1 | {
2 | "jquery-integration": false
3 | }
4 |
--------------------------------------------------------------------------------
/tests/dummy/public/robots.txt:
--------------------------------------------------------------------------------
1 | # http://www.robotstxt.org
2 | User-agent: *
3 | Disallow:
4 |
--------------------------------------------------------------------------------
/.template-lintrc.js:
--------------------------------------------------------------------------------
1 | 'use strict';
2 |
3 | module.exports = {
4 | extends: 'recommended'
5 | };
6 |
--------------------------------------------------------------------------------
/tests/dummy/app/resolver.js:
--------------------------------------------------------------------------------
1 | import Resolver from 'ember-resolver';
2 |
3 | export default Resolver;
4 |
--------------------------------------------------------------------------------
/tests/dummy/app/templates/components/number-input.hbs:
--------------------------------------------------------------------------------
1 |
2 |
--------------------------------------------------------------------------------
/tests/dummy/app/templates/components/input.hbs:
--------------------------------------------------------------------------------
1 |
5 |
--------------------------------------------------------------------------------
/config/environment.js:
--------------------------------------------------------------------------------
1 | 'use strict';
2 |
3 | module.exports = function(/* environment, appConfig */) {
4 | return { };
5 | };
6 |
--------------------------------------------------------------------------------
/types/global.d.ts:
--------------------------------------------------------------------------------
1 | // Types for compiled templates
2 | declare module 'ember-box/templates/*' {
3 | import { TemplateFactory } from 'htmlbars-inline-precompile';
4 | const tmpl: TemplateFactory;
5 | export default tmpl;
6 | }
7 |
--------------------------------------------------------------------------------
/tests/test-helper.js:
--------------------------------------------------------------------------------
1 | import Application from '../app';
2 | import config from '../config/environment';
3 | import { setApplication } from '@ember/test-helpers';
4 | import { start } from 'ember-qunit';
5 |
6 | setApplication(Application.create(config.APP));
7 |
8 | start();
9 |
--------------------------------------------------------------------------------
/tests/dummy/app/router.js:
--------------------------------------------------------------------------------
1 | import EmberRouter from '@ember/routing/router';
2 | import config from './config/environment';
3 |
4 | const Router = EmberRouter.extend({
5 | location: config.locationType,
6 | rootURL: config.rootURL
7 | });
8 |
9 | Router.map(function() {
10 | });
11 |
12 | export default Router;
13 |
--------------------------------------------------------------------------------
/.ember-cli:
--------------------------------------------------------------------------------
1 | {
2 | /**
3 | Ember CLI sends analytics information by default. The data is completely
4 | anonymous, but there are times when you might want to disable this behavior.
5 |
6 | Setting `disableAnalytics` to true will prevent any data from being sent.
7 | */
8 | "disableAnalytics": false
9 | }
10 |
--------------------------------------------------------------------------------
/.eslintignore:
--------------------------------------------------------------------------------
1 | # unconventional js
2 | /blueprints/*/files/
3 | /vendor/
4 |
5 | # compiled output
6 | /dist/
7 | /tmp/
8 |
9 | # dependencies
10 | /bower_components/
11 | /node_modules/
12 |
13 | # misc
14 | /coverage/
15 | !.*
16 |
17 | # ember-try
18 | /.node_modules.ember-try/
19 | /bower.json.ember-try
20 | /package.json.ember-try
21 |
--------------------------------------------------------------------------------
/tests/dummy/app/controllers/application.ts:
--------------------------------------------------------------------------------
1 | import Controller from '@ember/controller';
2 | import { action } from '@ember/object';
3 | import { tracked } from '@glimmer/tracking';
4 |
5 | export default class ApplicationController extends Controller {
6 | @tracked value = 123;
7 |
8 | @action
9 | incrementValue() {
10 | this.value++;
11 | }
12 | }
13 |
--------------------------------------------------------------------------------
/index.js:
--------------------------------------------------------------------------------
1 | 'use strict';
2 |
3 | module.exports = {
4 | name: require('./package').name,
5 |
6 | setupPreprocessorRegistry(type, registry) {
7 | registry.add('htmlbars-ast-plugin', {
8 | name: 'box-helper',
9 | plugin: require('./lib/box-transform'),
10 | baseDir() {
11 | return __dirname;
12 | },
13 | });
14 | },
15 | };
16 |
--------------------------------------------------------------------------------
/tests/dummy/config/targets.js:
--------------------------------------------------------------------------------
1 | 'use strict';
2 |
3 | const browsers = [
4 | 'last 1 Chrome versions',
5 | 'last 1 Firefox versions',
6 | 'last 1 Safari versions'
7 | ];
8 |
9 | const isCI = !!process.env.CI;
10 | const isProduction = process.env.EMBER_ENV === 'production';
11 |
12 | if (isCI || isProduction) {
13 | browsers.push('ie 11');
14 | }
15 |
16 | module.exports = {
17 | browsers
18 | };
19 |
--------------------------------------------------------------------------------
/tests/dummy/app/app.js:
--------------------------------------------------------------------------------
1 | import Application from '@ember/application';
2 | import Resolver from './resolver';
3 | import loadInitializers from 'ember-load-initializers';
4 | import config from './config/environment';
5 |
6 | const App = Application.extend({
7 | modulePrefix: config.modulePrefix,
8 | podModulePrefix: config.podModulePrefix,
9 | Resolver
10 | });
11 |
12 | loadInitializers(App, config.modulePrefix);
13 |
14 | export default App;
15 |
--------------------------------------------------------------------------------
/.editorconfig:
--------------------------------------------------------------------------------
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
21 |
--------------------------------------------------------------------------------
/tests/dummy/app/config/environment.d.ts:
--------------------------------------------------------------------------------
1 | export default config;
2 |
3 | /**
4 | * Type declarations for
5 | * import config from './config/environment'
6 | *
7 | * For now these need to be managed by the developer
8 | * since different ember addons can materialize new entries.
9 | */
10 | declare const config: {
11 | environment: any;
12 | modulePrefix: string;
13 | podModulePrefix: string;
14 | locationType: string;
15 | rootURL: string;
16 | };
17 |
--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
1 | # See https://help.github.com/ignore-files/ for more about ignoring files.
2 |
3 | # compiled output
4 | /dist/
5 | /tmp/
6 |
7 | # dependencies
8 | /bower_components/
9 | /node_modules/
10 |
11 | # misc
12 | /.env*
13 | /.pnp*
14 | /.sass-cache
15 | /connect.lock
16 | /coverage/
17 | /libpeerconnection.log
18 | /npm-debug.log*
19 | /testem.log
20 | /yarn-error.log
21 |
22 | # ember-try
23 | /.node_modules.ember-try/
24 | /bower.json.ember-try
25 | /package.json.ember-try
26 |
--------------------------------------------------------------------------------
/tests/dummy/app/templates/application.hbs:
--------------------------------------------------------------------------------
1 |
2 | {{this.value}}
3 |
4 |
5 |
6 |
7 |
8 |
9 |
10 | Boxed Input:
11 |
12 |
13 |
14 |
15 | Boxed Number Input:
16 |
17 |
18 |
19 |
20 | Unboxed Input
21 |
22 |
23 |
24 |
25 | Unboxed Number Input
26 |
27 |
28 |
--------------------------------------------------------------------------------
/.npmignore:
--------------------------------------------------------------------------------
1 | # compiled output
2 | /dist/
3 | /tmp/
4 |
5 | # dependencies
6 | /bower_components/
7 |
8 | # misc
9 | /.bowerrc
10 | /.editorconfig
11 | /.ember-cli
12 | /.env*
13 | /.eslintignore
14 | /.eslintrc.js
15 | /.gitignore
16 | /.template-lintrc.js
17 | /.travis.yml
18 | /.watchmanconfig
19 | /bower.json
20 | /config/ember-try.js
21 | /CONTRIBUTING.md
22 | /ember-cli-build.js
23 | /testem.js
24 | /tests/
25 | /yarn.lock
26 | .gitkeep
27 |
28 | # ember-try
29 | /.node_modules.ember-try/
30 | /bower.json.ember-try
31 | /package.json.ember-try
32 |
--------------------------------------------------------------------------------
/tests/dummy/app/components/input.ts:
--------------------------------------------------------------------------------
1 | import Component from '@glimmer/component';
2 | import { action } from '@ember/object';
3 | import { update, MaybeBox } from 'ember-box';
4 |
5 | type Args = {
6 | value?: MaybeBox;
7 | onInput?: (value: string) => void;
8 | };
9 |
10 | export default class Input extends Component {
11 | @action
12 | onInput({ target: { value } }: { target: { value: string } }) {
13 | update(this.args.value, value);
14 |
15 | if (this.args.onInput) {
16 | this.args.onInput(value);
17 | }
18 | }
19 | }
20 |
--------------------------------------------------------------------------------
/tests/dummy/app/components/number-input.ts:
--------------------------------------------------------------------------------
1 | import Component from '@glimmer/component';
2 | import { action } from '@ember/object';
3 | import { unwrap, MaybeBox, Update } from 'ember-box';
4 |
5 | type Args = {
6 | value: MaybeBox;
7 | };
8 |
9 | export default class NumberInput extends Component {
10 | @action
11 | validate(value: any, _super: Update) {
12 | if (!isNaN(+value)) {
13 | _super(+value);
14 | } else {
15 | // reset to the original value
16 | _super(unwrap(this.args.value));
17 | }
18 | }
19 | }
20 |
--------------------------------------------------------------------------------
/ember-cli-build.js:
--------------------------------------------------------------------------------
1 | 'use strict';
2 |
3 | const EmberAddon = require('ember-cli/lib/broccoli/ember-addon');
4 |
5 | module.exports = function(defaults) {
6 | let app = new EmberAddon(defaults, {
7 | // Add options here
8 | });
9 |
10 | /*
11 | This build file specifies the options for the dummy test app of this
12 | addon, located in `/tests/dummy`
13 | This build file does *not* influence how the addon or the app using it
14 | behave. You most likely want to be modifying `./index.js` or app's build file
15 | */
16 |
17 | return app.toTree();
18 | };
19 |
--------------------------------------------------------------------------------
/testem.js:
--------------------------------------------------------------------------------
1 | module.exports = {
2 | test_page: 'tests/index.html?hidepassed',
3 | disable_watching: true,
4 | launch_in_ci: [
5 | 'Chrome'
6 | ],
7 | launch_in_dev: [
8 | 'Chrome'
9 | ],
10 | browser_args: {
11 | Chrome: {
12 | ci: [
13 | // --no-sandbox is needed when running Chrome inside a container
14 | process.env.CI ? '--no-sandbox' : null,
15 | '--headless',
16 | '--disable-gpu',
17 | '--disable-dev-shm-usage',
18 | '--disable-software-rasterizer',
19 | '--mute-audio',
20 | '--remote-debugging-port=0',
21 | '--window-size=1440,900'
22 | ].filter(Boolean)
23 | }
24 | }
25 | };
26 |
--------------------------------------------------------------------------------
/CONTRIBUTING.md:
--------------------------------------------------------------------------------
1 | # How To Contribute
2 |
3 | ## Installation
4 |
5 | * `git clone `
6 | * `cd ember-box`
7 | * `yarn install`
8 |
9 | ## Linting
10 |
11 | * `yarn lint:hbs`
12 | * `yarn lint:js`
13 | * `yarn lint:js --fix`
14 |
15 | ## Running tests
16 |
17 | * `ember test` – Runs the test suite on the current Ember version
18 | * `ember test --server` – Runs the test suite in "watch mode"
19 | * `ember try:each` – Runs the test suite against multiple Ember versions
20 |
21 | ## Running the dummy application
22 |
23 | * `ember serve`
24 | * Visit the dummy application at [http://localhost:4200](http://localhost:4200).
25 |
26 | For more information on using ember-cli, visit [https://ember-cli.com/](https://ember-cli.com/).
--------------------------------------------------------------------------------
/tests/dummy/app/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 | Dummy
7 |
8 |
9 |
10 | {{content-for "head"}}
11 |
12 |
13 |
14 |
15 | {{content-for "head-footer"}}
16 |
17 |
18 | {{content-for "body"}}
19 |
20 |
21 |
22 |
23 | {{content-for "body-footer"}}
24 |
25 |
26 |
--------------------------------------------------------------------------------
/LICENSE.md:
--------------------------------------------------------------------------------
1 | The MIT License (MIT)
2 |
3 | Copyright (c) 2019
4 |
5 | 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:
6 |
7 | The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
8 |
9 | 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.
10 |
--------------------------------------------------------------------------------
/tests/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 | Dummy Tests
7 |
8 |
9 |
10 | {{content-for "head"}}
11 | {{content-for "test-head"}}
12 |
13 |
14 |
15 |
16 |
17 | {{content-for "head-footer"}}
18 | {{content-for "test-head-footer"}}
19 |
20 |
21 | {{content-for "body"}}
22 | {{content-for "test-body"}}
23 |
24 |
25 |
26 |
27 |
28 |
29 |
30 | {{content-for "body-footer"}}
31 | {{content-for "test-body-footer"}}
32 |
33 |
34 |
--------------------------------------------------------------------------------
/.eslintrc.js:
--------------------------------------------------------------------------------
1 | module.exports = {
2 | root: true,
3 | parser: 'babel-eslint',
4 | parserOptions: {
5 | ecmaVersion: 2018,
6 | sourceType: 'module'
7 | },
8 | plugins: [
9 | 'ember'
10 | ],
11 | extends: [
12 | 'eslint:recommended',
13 | 'plugin:ember/recommended'
14 | ],
15 | env: {
16 | browser: true
17 | },
18 | rules: {
19 | },
20 | overrides: [
21 | // node files
22 | {
23 | files: [
24 | '.eslintrc.js',
25 | '.template-lintrc.js',
26 | 'ember-cli-build.js',
27 | 'index.js',
28 | 'testem.js',
29 | 'blueprints/*/index.js',
30 | 'config/**/*.js',
31 | 'tests/dummy/config/**/*.js'
32 | ],
33 | excludedFiles: [
34 | 'addon/**',
35 | 'addon-test-support/**',
36 | 'app/**',
37 | 'tests/dummy/app/**'
38 | ],
39 | parserOptions: {
40 | sourceType: 'script',
41 | ecmaVersion: 2015
42 | },
43 | env: {
44 | browser: false,
45 | node: true
46 | },
47 | plugins: ['node'],
48 | rules: Object.assign({}, require('eslint-plugin-node').configs.recommended.rules, {
49 | // add your custom rules and overrides for node files here
50 | })
51 | }
52 | ]
53 | };
54 |
--------------------------------------------------------------------------------
/tsconfig.json:
--------------------------------------------------------------------------------
1 | {
2 | "compilerOptions": {
3 | "target": "es2017",
4 | "allowJs": true,
5 | "moduleResolution": "node",
6 | "allowSyntheticDefaultImports": true,
7 | "noImplicitAny": true,
8 | "noImplicitThis": true,
9 | "alwaysStrict": true,
10 | "strictNullChecks": true,
11 | "strictPropertyInitialization": true,
12 | "noFallthroughCasesInSwitch": true,
13 | "noUnusedLocals": true,
14 | "noUnusedParameters": true,
15 | "noImplicitReturns": true,
16 | "noEmitOnError": false,
17 | "noEmit": true,
18 | "inlineSourceMap": true,
19 | "inlineSources": true,
20 | "baseUrl": ".",
21 | "module": "es6",
22 | "experimentalDecorators": true,
23 | "paths": {
24 | "dummy/tests/*": [
25 | "tests/*"
26 | ],
27 | "dummy/*": [
28 | "tests/dummy/app/*",
29 | "app/*"
30 | ],
31 | "ember-box": [
32 | "addon"
33 | ],
34 | "ember-box/*": [
35 | "addon/*"
36 | ],
37 | "ember-box/test-support": [
38 | "addon-test-support"
39 | ],
40 | "ember-box/test-support/*": [
41 | "addon-test-support/*"
42 | ],
43 | "*": [
44 | "types/*"
45 | ]
46 | }
47 | },
48 | "include": [
49 | "app/**/*",
50 | "addon/**/*",
51 | "tests/**/*",
52 | "types/**/*",
53 | "test-support/**/*",
54 | "addon-test-support/**/*"
55 | ]
56 | }
57 |
--------------------------------------------------------------------------------
/tests/dummy/config/environment.js:
--------------------------------------------------------------------------------
1 | 'use strict';
2 |
3 | module.exports = function(environment) {
4 | let ENV = {
5 | modulePrefix: 'dummy',
6 | environment,
7 | rootURL: '/',
8 | locationType: 'auto',
9 | EmberENV: {
10 | FEATURES: {
11 | // Here you can enable experimental features on an ember canary build
12 | // e.g. EMBER_NATIVE_DECORATOR_SUPPORT: true
13 | },
14 | EXTEND_PROTOTYPES: {
15 | // Prevent Ember Data from overriding Date.parse.
16 | Date: false
17 | }
18 | },
19 |
20 | APP: {
21 | // Here you can pass flags/options to your application instance
22 | // when it is created
23 | }
24 | };
25 |
26 | if (environment === 'development') {
27 | // ENV.APP.LOG_RESOLVER = true;
28 | // ENV.APP.LOG_ACTIVE_GENERATION = true;
29 | // ENV.APP.LOG_TRANSITIONS = true;
30 | // ENV.APP.LOG_TRANSITIONS_INTERNAL = true;
31 | // ENV.APP.LOG_VIEW_LOOKUPS = true;
32 | }
33 |
34 | if (environment === 'test') {
35 | // Testem prefers this...
36 | ENV.locationType = 'none';
37 |
38 | // keep test console output quieter
39 | ENV.APP.LOG_ACTIVE_GENERATION = false;
40 | ENV.APP.LOG_VIEW_LOOKUPS = false;
41 |
42 | ENV.APP.rootElement = '#ember-testing';
43 | ENV.APP.autoboot = false;
44 | }
45 |
46 | if (environment === 'production') {
47 | // here you can enable a production-specific feature
48 | }
49 |
50 | return ENV;
51 | };
52 |
--------------------------------------------------------------------------------
/lib/box-transform.js:
--------------------------------------------------------------------------------
1 | /* eslint-env node */
2 | 'use strict';
3 |
4 | /*
5 | ```hbs
6 | {{box this.bar}}
7 | ```
8 |
9 | becomes
10 |
11 | ```hbs
12 | {{box this "bar"}}
13 | ```
14 | */
15 |
16 | module.exports = class SetTransform {
17 | transform(ast) {
18 | let b = this.syntax.builders;
19 |
20 | function transformNode(node) {
21 | if (node.path.original === 'box') {
22 | if (!node.params[0] || node.params[0].type !== 'PathExpression') {
23 | throw new Error(
24 | 'the (box) helper requires a path to be passed in as its first parameter, received: ' +
25 | node.params[0]
26 | );
27 | }
28 |
29 | if (node.params.length > 2) {
30 | throw new Error(
31 | 'the (box) helper can only recieve 2 arguments at most, recieved: ' +
32 | node.params.length
33 | );
34 | }
35 |
36 | if (node.params.length === 1) {
37 | let path = node.params.shift();
38 |
39 | let splitPoint = path.original.lastIndexOf('.');
40 |
41 | let key = path.original.substr(splitPoint + 1);
42 |
43 | let target =
44 | splitPoint === -1 ? 'this' : path.original.substr(0, splitPoint);
45 |
46 | node.params.unshift(b.path(target), b.string(key));
47 | }
48 | }
49 | }
50 |
51 | this.syntax.traverse(ast, {
52 | SubExpression: transformNode,
53 | MustacheStatement: transformNode,
54 | });
55 |
56 | return ast;
57 | }
58 | };
59 |
--------------------------------------------------------------------------------
/.travis.yml:
--------------------------------------------------------------------------------
1 | ---
2 | language: node_js
3 | node_js:
4 | # we recommend testing addons with the same minimum supported node version as Ember CLI
5 | # so that your addon works for all apps
6 | - "8"
7 |
8 | sudo: false
9 | dist: trusty
10 |
11 | addons:
12 | chrome: stable
13 |
14 | cache:
15 | yarn: true
16 |
17 | env:
18 | global:
19 | # See https://git.io/vdao3 for details.
20 | - JOBS=1
21 |
22 | branches:
23 | only:
24 | - master
25 | # npm version tags
26 | - /^v\d+\.\d+\.\d+/
27 |
28 | jobs:
29 | fail_fast: true
30 | allow_failures:
31 | - env: EMBER_TRY_SCENARIO=ember-canary
32 |
33 | include:
34 | # runs linting and tests with current locked deps
35 |
36 | - stage: "Tests"
37 | name: "Tests"
38 | install:
39 | - yarn install --non-interactive
40 | script:
41 | - yarn lint:hbs
42 | - yarn lint:js
43 | - yarn test
44 |
45 | - name: "Floating Dependencies"
46 | script:
47 | - yarn test
48 |
49 | # we recommend new addons test the current and previous LTS
50 | # as well as latest stable release (bonus points to beta/canary)
51 | - stage: "Additional Tests"
52 | env: EMBER_TRY_SCENARIO=ember-lts-3.8
53 | - env: EMBER_TRY_SCENARIO=ember-lts-3.12
54 | - env: EMBER_TRY_SCENARIO=ember-release
55 | - env: EMBER_TRY_SCENARIO=ember-beta
56 | - env: EMBER_TRY_SCENARIO=ember-canary
57 |
58 | before_install:
59 | - curl -o- -L https://yarnpkg.com/install.sh | bash
60 | - export PATH=$HOME/.yarn/bin:$PATH
61 |
62 | install:
63 | - yarn install --no-lockfile --non-interactive
64 |
65 | script:
66 | - node_modules/.bin/ember try:one $EMBER_TRY_SCENARIO
67 |
--------------------------------------------------------------------------------
/config/ember-try.js:
--------------------------------------------------------------------------------
1 | 'use strict';
2 |
3 | const getChannelURL = require('ember-source-channel-url');
4 |
5 | module.exports = function() {
6 | return Promise.all([
7 | getChannelURL('release'),
8 | getChannelURL('beta'),
9 | getChannelURL('canary'),
10 | ]).then(urls => {
11 | return {
12 | useYarn: true,
13 | scenarios: [
14 | {
15 | name: 'ember-lts-3.8',
16 | npm: {
17 | devDependencies: {
18 | 'ember-source': '~3.8.0',
19 | },
20 | },
21 | },
22 | {
23 | name: 'ember-lts-3.12',
24 | npm: {
25 | devDependencies: {
26 | 'ember-source': '~3.12.0',
27 | },
28 | },
29 | },
30 | {
31 | name: 'ember-release',
32 | npm: {
33 | devDependencies: {
34 | 'ember-source': urls[0],
35 | },
36 | },
37 | },
38 | {
39 | name: 'ember-beta',
40 | npm: {
41 | devDependencies: {
42 | 'ember-source': urls[1],
43 | },
44 | },
45 | },
46 | {
47 | name: 'ember-canary',
48 | npm: {
49 | devDependencies: {
50 | 'ember-source': urls[2],
51 | },
52 | },
53 | },
54 | // The default `.travis.yml` runs this scenario via `yarn test`,
55 | // not via `ember try`. It's still included here so that running
56 | // `ember try:each` manually or from a customized CI config will run it
57 | // along with all the other scenarios.
58 | {
59 | name: 'ember-default',
60 | npm: {
61 | devDependencies: {},
62 | },
63 | },
64 | ],
65 | };
66 | });
67 | };
68 |
--------------------------------------------------------------------------------
/tests/integration/helpers/box-test.js:
--------------------------------------------------------------------------------
1 | import { module, test } from 'qunit';
2 | import { setupRenderingTest } from 'ember-qunit';
3 | import { render, click } from '@ember/test-helpers';
4 | import hbs from 'htmlbars-inline-precompile';
5 |
6 | module('Integration | Helper | box', function(hooks) {
7 | setupRenderingTest(hooks);
8 |
9 | test('basic box works', async function(assert) {
10 | this.set('inputValue', '1234');
11 |
12 | await render(hbs`{{unwrap (box this.inputValue)}}`);
13 |
14 | assert.equal(this.element.textContent.trim(), '1234');
15 | });
16 |
17 | test('update works', async function(assert) {
18 | this.set('inputValue', '1234');
19 |
20 | await render(
21 | hbs``
22 | );
23 | await click('button');
24 |
25 | assert.equal(this.inputValue, 123);
26 | });
27 |
28 | test('update works when passed a value directly', async function(assert) {
29 | this.set('inputValue', '1234');
30 |
31 | await render(
32 | hbs``
33 | );
34 | await click('button');
35 |
36 | assert.equal(this.inputValue, 123);
37 | });
38 |
39 | test('unwrap works with box wrappers', async function(assert) {
40 | this.set('inputValue', '1234');
41 |
42 | // do nothing
43 | this.update = () => {};
44 |
45 | await render(hbs`{{unwrap (wrap (box this.inputValue) this.update)}}`);
46 |
47 | assert.equal(this.element.textContent.trim(), '1234');
48 | });
49 |
50 | test('update works with box wrappers', async function(assert) {
51 | this.set('inputValue', '1234');
52 |
53 | let called = false;
54 |
55 | // do nothing
56 | this.update = (value, _super) => {
57 | called = true;
58 |
59 | return _super(value);
60 | };
61 |
62 | await render(
63 | hbs``
64 | );
65 | await click('button');
66 |
67 | assert.equal(called, true);
68 | assert.equal(this.inputValue, 123);
69 | });
70 | });
71 |
--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "ember-box",
3 | "version": "0.1.0",
4 | "description": "An experimental helper for better 2-way-binding",
5 | "keywords": [
6 | "ember-addon"
7 | ],
8 | "repository": "https://github.com/pzuraq/ember-box",
9 | "license": "MIT",
10 | "author": "Chris Hewell Garrett",
11 | "directories": {
12 | "doc": "doc",
13 | "test": "tests"
14 | },
15 | "scripts": {
16 | "build": "ember build",
17 | "lint:hbs": "ember-template-lint .",
18 | "lint:js": "eslint .",
19 | "start": "ember serve",
20 | "test": "ember test",
21 | "test:all": "ember try:each",
22 | "prepublishOnly": "ember ts:precompile",
23 | "postpublish": "ember ts:clean"
24 | },
25 | "dependencies": {
26 | "ember-cli-babel": "^7.7.3",
27 | "ember-cli-typescript": "^3.0.0"
28 | },
29 | "devDependencies": {
30 | "@ember/optional-features": "^0.7.0",
31 | "@glimmer/component": "^0.14.0-alpha.13",
32 | "@types/ember": "^3.1.0",
33 | "@types/ember-qunit": "^3.4.6",
34 | "@types/ember__test-helpers": "^0.7.8",
35 | "@types/qunit": "^2.9.0",
36 | "@types/rsvp": "^4.0.3",
37 | "babel-eslint": "^10.0.3",
38 | "broccoli-asset-rev": "^3.0.0",
39 | "ember-cli": "~3.10.1",
40 | "ember-cli-dependency-checker": "^3.1.0",
41 | "ember-cli-eslint": "^5.1.0",
42 | "ember-cli-htmlbars": "^3.0.1",
43 | "ember-cli-htmlbars-inline-precompile": "^2.1.0",
44 | "ember-cli-inject-live-reload": "^1.8.2",
45 | "ember-cli-sri": "^2.1.1",
46 | "ember-cli-template-lint": "^1.0.0-beta.1",
47 | "ember-cli-typescript-blueprints": "^3.0.0",
48 | "ember-cli-uglify": "^2.1.0",
49 | "ember-disable-prototype-extensions": "^1.1.3",
50 | "ember-export-application-global": "^2.0.0",
51 | "ember-fn-helper-polyfill": "^1.0.2",
52 | "ember-load-initializers": "^2.0.0",
53 | "ember-maybe-import-regenerator": "^0.1.6",
54 | "ember-on-modifier": "^1.0.0",
55 | "ember-prop-modifier": "^0.1.1",
56 | "ember-qunit": "^4.4.1",
57 | "ember-resolver": "^5.0.1",
58 | "ember-source": "~3.13.0",
59 | "ember-source-channel-url": "^1.1.0",
60 | "ember-try": "^1.0.0",
61 | "eslint-plugin-ember": "^6.2.0",
62 | "eslint-plugin-node": "^9.0.1",
63 | "loader.js": "^4.7.0",
64 | "qunit-dom": "^0.8.4",
65 | "typescript": "^3.6.3"
66 | },
67 | "engines": {
68 | "node": "8.* || >= 10.*"
69 | },
70 | "ember-addon": {
71 | "configPath": "tests/dummy/config"
72 | }
73 | }
74 |
--------------------------------------------------------------------------------
/addon/index.ts:
--------------------------------------------------------------------------------
1 | import Helper from '@ember/component/helper';
2 | import { get, set } from '@ember/object';
3 | import { assert } from '@ember/debug';
4 |
5 | const VALUE = Symbol('BOX_VALUE');
6 | const UPDATE = Symbol('BOX_UPDATE');
7 |
8 | export type MaybeBox = T | Box | BoxWrapper;
9 | export type Update = (newValue: any) => T;
10 | export type UpdateMiddleware = (newValue: any, _super: Update) => any;
11 |
12 | export interface Box {
13 | [VALUE]: () => T;
14 | [UPDATE]: (newValue: T) => T;
15 | }
16 |
17 | export interface BoxWrapper {
18 | [VALUE]: () => T;
19 | [UPDATE]: (newValue: any) => any;
20 | }
21 |
22 | class BoxImpl {
23 | [VALUE]: () => T;
24 | [UPDATE]: (newValue: any) => any;
25 |
26 | constructor(value: () => T, update: (newValue: any) => any) {
27 | this[VALUE] = value;
28 | this[UPDATE] = update;
29 | }
30 | }
31 |
32 | export function box(context: any, path: string) {
33 | assert(
34 | 'Must provide a context and path to base boxes. The context must be an object or class/function and the path must be a string.',
35 | context !== null &&
36 | (typeof context === 'object' || typeof context === 'function') &&
37 | typeof path === 'string'
38 | );
39 |
40 | let value = () => get(context, path);
41 | let update = (newValue: T) => set(context, path, newValue) as T;
42 |
43 | return new BoxImpl(value, update) as Box;
44 | }
45 |
46 | export function wrap(maybeBox: MaybeBox, update: UpdateMiddleware) {
47 | assert(
48 | 'If you are wrapping a box within another box, you must provide an update function. Otherwise, it is not necessary to wrap the box.',
49 | typeof update === 'function'
50 | );
51 |
52 | let value;
53 | let internalUpdate;
54 |
55 | if (maybeBox instanceof BoxImpl) {
56 | value = maybeBox[VALUE];
57 | internalUpdate = (newValue: any) => update(newValue, maybeBox[UPDATE]);
58 | } else {
59 | value = () => maybeBox;
60 | internalUpdate = (newValue: any) => newValue;
61 | }
62 |
63 | return new BoxImpl(value, internalUpdate) as BoxWrapper;
64 | }
65 |
66 | export function unwrap(maybeBox: MaybeBox): T {
67 | return maybeBox instanceof BoxImpl ? maybeBox[VALUE]() : maybeBox;
68 | }
69 |
70 | export function update(maybeBox: MaybeBox, newValue: T): T {
71 | if (maybeBox instanceof BoxImpl) {
72 | return maybeBox[UPDATE](newValue);
73 | }
74 |
75 | return newValue;
76 | }
77 |
78 | function helper(fn: (params: any[], hash?: any) => any) {
79 | let helper = class extends Helper {};
80 |
81 | helper.prototype.compute = fn;
82 |
83 | return helper;
84 | }
85 |
86 | export const boxHelper = helper(([context, path]) => box(context, path));
87 | export const wrapHelper = helper(([maybeBox, update]) =>
88 | wrap(maybeBox, update)
89 | );
90 | export const unwrapHelper = helper(([maybeBox]) => unwrap(maybeBox));
91 | export const updateHelper = helper(([maybeBox, maybeVal]) => {
92 | if (maybeVal !== undefined) {
93 | return () => update(maybeBox, maybeVal);
94 | } else {
95 | return (val: any) => update(maybeBox, val);
96 | }
97 | });
98 |
--------------------------------------------------------------------------------
/tests/unit/box-test.ts:
--------------------------------------------------------------------------------
1 | import { module, test } from 'qunit';
2 | import { box, wrap, unwrap, update } from 'ember-box';
3 |
4 | module('Unit | Box', () => {
5 | test('basic test', assert => {
6 | let obj = { value: 123 };
7 |
8 | let box1 = box(obj, 'value');
9 |
10 | assert.equal(unwrap(box1), 123, 'box unwraps correctly');
11 | assert.equal(
12 | update(box1, 456),
13 | 456,
14 | 'box updates and returns value from setter'
15 | );
16 | assert.equal(obj.value, 456, 'value was updated');
17 | assert.equal(unwrap(box1), 456, 'box value is updated');
18 | });
19 |
20 | test('composition with root box', assert => {
21 | let obj = { value: 0 };
22 |
23 | let box1 = box(obj, 'value');
24 | let box2 = wrap(box1, (newValue, _super) => _super(newValue + 1));
25 | let box3 = wrap(box2, (newValue, _super) => _super(newValue + 1));
26 | let box4 = wrap(box3, (_newValue, _super) => {});
27 |
28 | assert.equal(unwrap(box1), 0);
29 | assert.equal(unwrap(box2), 0);
30 | assert.equal(unwrap(box3), 0);
31 | assert.equal(unwrap(box4), 0);
32 |
33 | update(box1, 1);
34 | assert.equal(obj.value, 1, 'obj updated');
35 | assert.equal(unwrap(box1), 1, 'box is updated');
36 |
37 | update(box2, 1);
38 | assert.equal(obj.value, 2, 'obj updated');
39 | assert.equal(unwrap(box2), 2, 'box is updated');
40 |
41 | update(box3, 1);
42 | assert.equal(obj.value, 3, 'obj updated');
43 | assert.equal(unwrap(box3), 3, 'box is updated');
44 |
45 | update(box4, 999);
46 | assert.equal(obj.value, 3, 'obj did not update');
47 | assert.equal(unwrap(box4), 3, 'box is not updated');
48 | });
49 |
50 | test('composition with root non-box', assert => {
51 | let obj = { value: 0 };
52 |
53 | let box1 = wrap(obj.value, (newValue, _super) => _super(newValue + 1));
54 | let box2 = wrap(box1, (newValue, _super) => _super(newValue + 1));
55 | let box3 = wrap(box2, (_newValue, _super) => {});
56 |
57 | assert.equal(unwrap(box1), 0);
58 | assert.equal(unwrap(box2), 0);
59 | assert.equal(unwrap(box3), 0);
60 |
61 | update(box1, 1);
62 | assert.equal(obj.value, 0, 'obj updated');
63 | assert.equal(unwrap(box1), 0, 'box is unaffected');
64 |
65 | update(box2, 1);
66 | assert.equal(obj.value, 0, 'obj updated');
67 | assert.equal(unwrap(box2), 0, 'box is unaffected');
68 |
69 | update(box3, 1);
70 | assert.equal(obj.value, 0, 'obj updated');
71 | assert.equal(unwrap(box3), 0, 'box is unaffected');
72 | });
73 |
74 | test('unwrap works with non-box values', assert => {
75 | assert.equal(unwrap(123), 123);
76 | });
77 |
78 | test('update works with non-box values', assert => {
79 | assert.equal(update(123, 456), 456);
80 | });
81 |
82 | test('box throws on invalid input', assert => {
83 | assert.throws(
84 | // @ts-ignore
85 | () => box({}, 123),
86 | /Error: Assertion Failed: Must provide a context and path to base boxes. The context must be an object or class\/function and the path must be a string./
87 | );
88 | assert.throws(
89 | () => box(123, 'foo'),
90 | /Error: Assertion Failed: Must provide a context and path to base boxes. The context must be an object or class\/function and the path must be a string./
91 | );
92 | });
93 |
94 | test('box throws on invalid input', assert => {
95 | assert.throws(
96 | // @ts-ignore
97 | () => wrap({}, 123),
98 | /Error: Assertion Failed: If you are wrapping a box within another box, you must provide an update function. Otherwise, it is not necessary to wrap the box./
99 | );
100 |
101 | assert.throws(
102 | // @ts-ignore
103 | () => wrap(box({}, 'foo'), 'foo'),
104 | /Error: Assertion Failed: If you are wrapping a box within another box, you must provide an update function. Otherwise, it is not necessary to wrap the box./
105 | );
106 |
107 | assert.throws(
108 | // @ts-ignore
109 | () => wrap(wrap(box({}, 'foo'), () => {}), 'foo'),
110 | /Error: Assertion Failed: If you are wrapping a box within another box, you must provide an update function. Otherwise, it is not necessary to wrap the box./
111 | );
112 | });
113 | });
114 |
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | ember-box
2 | ==============================================================================
3 |
4 | An experimental helper for better 2-way-binding:
5 |
6 | ```hbs
7 |
8 | ```
9 |
10 | Implementing `Input`:
11 |
12 | ```hbs
13 |
17 | ```
18 |
19 | ```js
20 | import Component from '@glimmer/component';
21 | import { action } from '@ember/object';
22 | import { update } from 'ember-box';
23 |
24 | export default class Input extends Component {
25 | @action
26 | onInput({ target: { value } }) {
27 | update(this.args.value, value);
28 |
29 | if (this.args.onInput) {
30 | this.args.onInput(value);
31 | }
32 | }
33 | }
34 | ```
35 |
36 | Compatibility
37 | ------------------------------------------------------------------------------
38 |
39 | * Ember.js v2.18 or above
40 | * Ember CLI v2.13 or above
41 | * Node.js v8 or above
42 |
43 |
44 | Installation
45 | ------------------------------------------------------------------------------
46 |
47 | ```
48 | ember install ember-box
49 | ```
50 |
51 |
52 | Usage
53 | ------------------------------------------------------------------------------
54 |
55 | `ember-box` provides the following helpers:
56 |
57 | * `{{box}}`
58 | * `{{wrap}}`
59 | * `{{unwrap}}`
60 | * `{{update}}`
61 |
62 | And their corresponding functions:
63 |
64 | ```js
65 | import {
66 | box,
67 | wrap,
68 | unwrap,
69 | update
70 | } from 'ember-box';
71 | ```
72 |
73 | The main helper is the `box` helper, which receives a path and returns a Box,
74 | which is a _reference_ to that value:
75 |
76 | ```hbs
77 | {{box this.myValue}}
78 | ```
79 |
80 | This box can be passed around, and the value it references can be accessed or
81 | updated wherever it goes:
82 |
83 | ```js
84 | import Component from '@glimmer/component';
85 |
86 | export default class MyComponent extends Component {
87 | this.value = 123;
88 | }
89 | ```
90 | ```hbs
91 | {{#let (box this.value) as |value|}}
92 |
93 | {{unwrap value}}
94 |
95 |
96 |
99 | {{/let}}
100 | ```
101 |
102 | You can also unwrap or update a value in JavaScript:
103 |
104 | ```js
105 | import Component from '@glimmer/component';
106 | import { action } from '@ember/object';
107 | import { unwrap, update } from 'ember-box';
108 |
109 | export default class MyOtherComponent extends Component {
110 | get boxValue() {
111 | return unwrap(this.args.box);
112 | }
113 |
114 | @action
115 | updateBox(newValue) {
116 | update(this.args.box, newValue);
117 | }
118 | }
119 | ```
120 |
121 | > Note: The `update` function updates the box immediately, but the `{{update}}`
122 | > helper returns a _callback_ that can be used to update the value later. This
123 | > is because that is what is normally needed in a template.
124 |
125 | `unwrap` and `update` can also both receive plain JS values. `unwrap` will
126 | return the value, and `update` will no-op. This allows you to write components
127 | that can optionally receive Boxes:
128 |
129 | ```hbs
130 |
131 |
132 |
133 |
134 |
135 | ```
136 |
137 | You can also create Boxes in `js` by providing a context and path, or by
138 | providing a context and path directly to the helper:
139 |
140 | ```js
141 | box(this, 'myValue');
142 | ```
143 | ```hbs
144 | {{box this "myValue"}}
145 | ```
146 |
147 | ### Wrapping Boxes
148 |
149 | Sometimes, you may want to intercept an update to a Box, either to do some other
150 | action when the value changes (a side-effect) or to process the value. You can
151 | wrap boxes to do this with `wrap` and `{{wrap}}`:
152 |
153 | ```hbs
154 |
155 | ```
156 | ```js
157 | export default class MyComponent extends Component {
158 | @action
159 | doSomething(newValue, _super) {
160 | // do things
161 |
162 | _super(newValue);
163 | }
164 | }
165 | ```
166 |
167 | The wrapper callback receives the new value, and the super setter, which should
168 | be called if you want to set the value on the box. `wrap` can be used to wrap
169 | boxes repeatedly, and `unwrap` will recursively unwrap all of them. Also, like
170 | with `unwrap` and `update`, `wrap` can be used with non-Box values to observe
171 | their _attempted_ changes:
172 |
173 | ```hbs
174 |
175 |
176 | ```
177 |
178 | Contributing
179 | ------------------------------------------------------------------------------
180 |
181 | See the [Contributing](CONTRIBUTING.md) guide for details.
182 |
183 |
184 | License
185 | ------------------------------------------------------------------------------
186 |
187 | This project is licensed under the [MIT License](LICENSE.md).
188 |
--------------------------------------------------------------------------------