1.0.5 • Published 2 years ago

component-decorators v1.0.5

Weekly downloads
-
License
MIT
Repository
github
Last release
2 years ago

Web component decorators · npm version

Decorators

import {} from 'component-decorators

@Component({ options })

Options

NameTypeDescription
selectorstringName of the tag to use. Must include a '-' (minus)
templatestring (optional)An inline template for an web component
extendsstring (optional)The extends property, specifies the built-in element your element inherits from, if any (only relevant to customized built-in elements)
styleCSSStyleDeclarations (optional)The style property specifies an inline style for an element.
providersComponentArray of components/providers, which become parents of template
slotsboolean (optional)Enable slots in custom component

Replacement for customElements.define(tagname, element, options). To be put right above the class declaration of the web component. In template you can interpolate paramaters of component lik this <template slot="{{states.TABLE}}">. WARNING! It's only initial value. If value will be change, in DOM stay initial value. If you want rerender value use @State decorator or change value in other way. Additionally if component use slots and filled it with own parameters you can use scopeProps to keep interpolate inside template.

  <template slot="trow">
    <tr id="{{ scopeProps('id') }}">
      <td>{{ scopeProps('name') }}</td>
    </tr>
  </template>

@Attr(name, type)

Parameters

NameTypeDescription
namestringName of the attribute
type'string' | 'boolean' | 'number' | \'json' (default: 'string')Type determines how attribute will be getting and setting

To be put right above the property of component. This decorator strictly connect parameter with attribute.

@Context(selector)

Parameters

NameTypeDescription
selectorstringSelector for parent component/provider

To be put right above the property of component. This decorator assings the property the value this.closest(selector).

@Listener(selector, type)

Parameters

NameTypeDescription
selectorstringSelector for child of component
typestringThe name of the event

To be put right above the method of component. Replacement for this.querySelector(selector).addEventListener.call(this, type, method);

@OnAttrChange(name)

Parameters

NameTypeDescription
namestringName of attribute

To be put right above the method of component. Method will be call when attribute was change;

@On(selector, methodName)

Parameters

NameTypeDescription
selectorstringSelector for child of component
methodNamestring ex. 'onclick'determines which method you want set

To be put right above the method of component. Replacement for this.querySelector(selector)methodName = (...props) => method.call(this, ...props)

@Prop(selector, argument)

Parameters

NameTypeDescription
selectorstringSelector for child of component
argumentstringdetermines which property you want get/set

To be put right above the property of component. Replacement for this.querySelector(selector)argument

@Ref(selector)

Parameters

NameTypeDescription
selectorstringSelector for child of component

To be put right above the property of component. This decorator assings the property the value this.querySelector(selector)

@State(...selectors)

To be put right above the property of component. Selectors define which element in DOM and how shuld be change after change value of property.

Examples

  @State('[helloMessage]')
  public helloMessage: string;

Now when property helloMessage was change element [helloMessage].innerHtml = helloMessage.

Also you can modified value before putting to DOM

  @State({ '[completedTaskCounter]': (value) => value.length })
  public array: any[];

A decorator configured this way change element [completedTaskCounter].innerHtml = array.length.

Other option is change other property of selected element not only innerHtml.

  @State({ '[completedTaskCounter].color': (value) => value.length ? 'green' : 'red' })
  public array: any[];

@Subscription()

To be put right above the method of component. Method will be fire inside connectedCallback. Decorated method should return another function which will be fire in disconnectedCallback to unsubscribe.

More

To see more information about library please visit our wiki