Decorators for Sparkles/Glimmer Components
Switch branches/tags
Nothing to show
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Failed to load latest commit information.
addon
app
config
tests
types/dummy
vendor
.editorconfig
.ember-cli
.eslintignore
.eslintrc.js
.gitignore
.npmignore
.travis.yml
.watchmanconfig
LICENSE.md
README.md
ember-cli-build.js
index.d.ts
index.js
package.json
testem.js
tsconfig.json
yarn.lock

README.md

sparkles-decorators

This addon provides decorators for Sparkles/Glimmer components to handle arguments in a nice way.

Sparkle Components is a proof-of-concept to Glimmer Components to use them in ember projects for early adopters.

Installation

ember install sparkles-decorators

Usage

In your component:

// src/ui/components/my-component/component.ts
import Component from 'sparkles-component';
import { arg } from 'sparkles-decorators';

interface Args {
  foo?: string;
  bar?: string;
}

export default class MyComponent extends Component<Args> {
  // default using object descriptor
  @arg({default: 'bar'}) foo!: string;

  // default using initializer
  @arg bar!: string = 'baz';
}
{{! src/ui/components/my-component/template.hbs}}
{{this.foo}}
{{! src/ui/routes/application/template.hbs}}

<MyComponent /> {{! prints 'bar'}}

Use the @arg decorator to bind properties to arguments (one-way). If an initializer is present, that will be used for your default value. Alternatively, you can pass a default value (or function) in the descriptor object which will be assigned to the property if none is set.

You can also specify the name of your argument (if property and name are different):

export default class MyComponent extends Component {
  @arg({name: 'foo'}) bam!: string;
}
{{! src/ui/components/my-component/template.hbs}}
{{this.bam}}
{{! src/ui/routes/application/template.hbs}}

<MyComponent @foo='bar'/> {{! prints 'bar'}}

API

@arg(options)

options.name (optional) - the name of the argument
options.default (optional) - the default value or function

Contributing

Installation

  • git clone https://github.com/gossi/sparkles-decorators
  • cd sparkles-decorators
  • yarn install

Linting

  • yarn lint:js
  • yarn lint:js --fix

Running tests

  • ember test – Runs the test suite on the current Ember version
  • ember test --server – Runs the test suite in "watch mode"
  • ember try:each – Runs the test suite against multiple Ember versions

Running the dummy application

For more information on using ember-cli, visit https://ember-cli.com/.

License

This project is licensed under the MIT License.