This package has been deprecated

Author message:

Package no longer supported. Contact Support at https://www.npmjs.com/support for more info.

@project-nos/decorators
TypeScript icon, indicating that this package has built-in type declarations

1.1.0 • Public • Published

NOS decorators

NOS decorators

github workflow tests mit license npm npm bundle size

A library to help you build Web Components fast and easy.

You no longer have to write all the boilerplate code needed to bring your components to life. Under the hood this library uses decorators to automatically bind attributes, actions and targets to your Web Components.

There is no better way to get a feel for what NOS decorators is and what it can do, than by seeing it for yourself:

Imagine you create a hello-world component which generates following html:

<hello-world some-number="123" some-boolean some-string="baz" some-array="[4,5,6]" some-object="{"foo":"bar"}">
  <button hello-world-action="click#foo" hello-world-target="bar"></button>
  <div hello-world-targets="bazs">...</div>
  <div hello-world-targets="bazs">...</div>
</hello-world>

You no longer need to query for elements on your own, listen for events or create getters for attributes. Everything you have to do is to add the corresponding decorators to your class and properties.

import { actionable, attributable, attribute, targetable, target, targets } from '@project-nos/decorators';

@actionable()
@attributable()
@targetable()
class HelloWorld extends HTMLElement {
    @attribute({ type: Number })
    accessor someNumber: number

    @attribute({ type: Boolean })
    accessor someBoolean: boolean;

    @attribute({ type: String })
    accessor someString: string;

    @attribute({ type: Array })
    accessor someArray: [];

    @attribute({ type: Object })
    accessor someObject: object;

    @target()
    accessor bar: HTMLButtonElement;

    @targets()
    accessor bazs: HTMLDivElement[];
    
    foo(event: Event) {
        //...
    }
}

Documentation

For full documentation, visit our Wiki.

License

Copyright (c) Andreas Penz. Licensed unter the MIT License.

Package Sidebar

Install

npm i @project-nos/decorators

Weekly Downloads

273

Version

1.1.0

License

MIT

Unpacked Size

50 kB

Total Files

35

Last publish

Collaborators

  • andreaspenz