@servicenow/ui-core

@servicenow/ui-core

createCustomElement

Define a custom element.

Param	Type	Description
elementName	string	The tag name of the custom element.
config	Object	The custom element configuration.
[config.initialState]	Object	The initial state for a component.
[config.properties]	Object	The properties used by a custom element.
config.properties.name	Object	The name of the property.
[config.properties.name.default]	*	The default value of the property.
[config.properties.name.computed]	function	A function that computes the property value.
config.properties.name.computed.state	Object	The custom element state.
[config.properties.name.onChange]	function	A function that will be called with the new property value, the previous value, and the dispatch function.
[config.properties.name.reflect]	boolean	Reflect property change to corresponding attribute.
[config.properties.name.unstableParse]	boolean	Parse attribute values when corresponding properties are set.
[config.properties.name.readOnly]	boolean	Property cannot be externally set.
[config.actions]	Object	The actions the custom element dispatches.
config.actions.type	Object	The action type, name.
[config.actions.private]	boolean	Indicates if the action is visible outside of the custom element.
[config.actions.handlers]	Array	Effect handlers to run when the action type is dispatched.
config.renderer	Object	The renderer to be used by the custom element.
config.renderer.type	function	The library that renders the view.
config.renderer.view	function	A function that is executed by onStateChange.
[config.renderer.transformState]	function	A function that executes before a component's state is passed to the handler.
[config.onDisconnect]	function	A function that executes when the custom element is disconnected.
[config.onConnect]	function	A function that executes when the custom element is connected.
[config.behaviors]	Array	Behaviors to applied to the custom element.

Example

import {createCustomElement} from '@servicenow/ui-core';
import snabbdom from '@servicenow/ui-renderer-snabbdom';

createCustomElement('sn-hello-world', {
  properties: {
    name: {
      default: 'Fred'
    }
  },
  renderer: {
    type: snabbdom,
    transformState({properties}) { return properties; },
    view: ({name}) => { return <p>Hello {name}!</p>; }
  }
});

Action Routing

Actions will "bubble" up the component hierarchy unless they are explictly stopped by dispatch meta data, {stopPropagtion: true}, or part of the stopPropagtion configuration for a component definition.

dispatch('SOMETHING_HAPPENED', {somethingHappened: true}, {stopPropagtion: true});

OR

createCustomElement('sn-foo', () => null, {
  stopPropagtion: ['SOMETHING_HAPPENED']
});