@servicenow/ui-core

Core package of the Now Experience UI Framework

Usage no npm install needed!

<script type="module">
  import servicenowUiCore from 'https://cdn.skypack.dev/@servicenow/ui-core';
</script>

README

@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']
});