string | The tag name of the custom element. |\n| config | Object | The custom element configuration. |\n| [config.setInitialState] | function | Function that returns the initial state for a component. |\n| [config.properties] | Object | The properties used by a custom element. |\n| config.properties.name | Object | The name of the property. |\n| [config.properties.name.default] | \\* | The default value of the property. |\n| [config.properties.name.computed] | function | A function that computes the property value. |\n| config.properties.name.computed.state | Object | The custom element state. |\n| [config.properties.name.onChange] | function | A function that will be called with the new property value, the previous value, and the `dispatch` function. |\n| [config.properties.name.reflect] | boolean | Reflect property change to corresponding attribute. |\n| [config.properties.name.unstableParse] | boolean | Parse attribute values when corresponding properties are set. |\n| [config.properties.name.readOnly] | boolean | Property cannot be externally set. |\n| [config.actions] | Object | The actions the custom element dispatches. |\n| config.actions.type | Object | The action type, name. |\n| [config.actions.private] | boolean | Indicates if the action is visible outside of the custom element. |\n| [config.actions.handlers] | Array | Effect handlers to run when the action type is dispatched. |\n| config.renderer | Object | The renderer to be used by the custom element. |\n| config.renderer.type | function | The library that renders the view. |\n| config.renderer.view | function | A function that is executed by onStateChange. |\n| [config.renderer.transformState] | function | A function that executes before a component's state is passed to the handler. |\n| [config.onDisconnect] | function | A function that executes when the custom element is disconnected. |\n| [config.onConnect] | function | A function that executes when the custom element is connected. |\n| [config.behaviors] | Array | Behaviors to applied to the custom element. |\n\n**Example**\n\n```js\nimport {createCustomElement} from '@servicenow/ui-core';\nimport snabbdom from '@servicenow/ui-renderer-snabbdom';\n\ncreateCustomElement('sn-hello-world', {\n\tproperties: {\n\t\tname: {\n\t\t\tdefault: 'Fred'\n\t\t}\n\t},\n\trenderer: {\n\t\ttype: snabbdom,\n\t\ttransformState({properties}) {\n\t\t\treturn properties;\n\t\t},\n\t\tview: ({name}) => {\n\t\t\treturn Hello {name}!
;\n\t\t}\n\t}\n});\n```\n\n## Action Routing\n\nActions 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.\n\n```javascript\ndispatch('SOMETHING_HAPPENED', {somethingHappened: true}, {stopPropagtion: true});\n```\n\n_OR_\n\n```javascript\ncreateCustomElement('sn-foo', () => null, {\n\tstopPropagtion: ['SOMETHING_HAPPENED']\n});\n```\n","gitHead":"237b54012960572f6b7e84a8b817f54504de648b","scripts":{"size":"size-limit","test":"npm run test:unit -- --saucelabs && npm run dtslint","build":"npm run build:prod","eslint":"../../node_modules/.bin/eslint --config ../../.eslintrc.js src","verify":"npm run lint && npm run test && npm run docs","dtslint":"dtslint --localTs node_modules/typescript/lib typings","build:js":"../../node_modules/.bin/babel src --root-mode upward --source-maps --ignore 'src/**/__tests__/**'","document":"../../node_modules/.bin/jsdoc2md --partial ../../docs/header.hbs --files 'src/{,**/}*.js' > api.md","build:dev":"BABEL_ENV=development npm run build:lib -- --verbose && BABEL_ENV=development npm run build:module -- --verbose","build:lib":"npm run build:js -- --out-dir lib","test:unit":"../../node_modules/.bin/karma start ../../karma.conf.js","build:prod":"BABEL_ENV=production npm run build:lib && BABEL_ENV=production npm run build:module","build:watch":"BABEL_ENV=development npm run build:js -- --verbose --watch & BABEL_ENV=development npm run build:module -- --verbose --watch","build:module":"BABEL_MODULE=true npm run build:js -- --out-dir module","test:coverage":"npm run test:unit -- --coverage"},"typings":"typings","_npmUser":{"name":"crystal.barnes","email":"crystal.barnes@servicenow.com"},"_resolved":"","_integrity":"","size-limit":[{"path":"module/index.js","limit":"70 KB"}],"_npmVersion":"6.14.18","description":"Core package of the UI Framework on Next Experience","directories":{},"_nodeVersion":"14.20.0","dependencies":{"immer":"3.1.2","@servicenow/ui-types":"24.1.1","@servicenow/ui-utils":"24.1.1","@servicenow/ui-config":"24.1.1","@servicenow/ui-metrics":"24.1.1","@servicenow/ui-internal":"24.1.1","@servicenow/ui-renderer-default":"24.1.1"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"ajv":"6.12.6","lodash":"4.17.4","dtslint":"2.0.0","size-limit":"1.3.7","typescript":"3.7.4","@tectonic/test-api":"21.2.0","@babel/plugin-transform-react-jsx":"7.3.0","babel-plugin-transform-custom-element-classes":"0.1.0"},"_npmOperationalInternal":{"tmp":"tmp/ui-core_24.1.1_1691174721026_0.022733841633232332","host":"s3://npm-registry-packages"}}},"time":{"created":"2020-03-04T15:53:01.598Z","modified":"2026-08-27T22:37:10.085Z","17.0.0-rc.15":"2020-03-04T15:53:01.788Z","17.0.0-rc.17":"2020-03-04T17:51:08.093Z","17.0.1":"2020-03-10T23:56:59.028Z","18.2.5":"2020-09-15T19:32:24.783Z","19.4.2":"2021-01-20T16:23:57.635Z","24.1.1":"2023-08-04T18:45:21.214Z"},"license":"MIT","description":"Core package of the UI Framework on Next Experience","maintainers":[{"email":"mdwragg@gmail.com","name":"mdwragg"},{"email":"buildeng@servicenow.com","name":"now-build"},{"email":"cuong.tran@servicenow.com","name":"cuong.tran"},{"email":"shaival.divatia@servicenow.com","name":"sdivatia"},{"email":"huichuan.cheng@servicenow.com","name":"huichuan"},{"email":"kayleigh.french@servicenow.com","name":"kayleigh.french"},{"email":"dannyh.wong@servicenow.com","name":"dwong-servicenow"},{"email":"pooja.chamarthi@servicenow.com","name":"pooja.chamarthi"},{"email":"victor.huerta@servicenow.com","name":"victor.huerta"},{"email":"koppula.phaniprakash@servicenow.com","name":"phaniprakash"},{"email":"rajavenkatesh.sundar@servicenow.com","name":"rajavenkatesh.servicenow"},{"email":"manishkumar.roy@servicenow.com","name":"manishroy-servicenow"},{"email":"savya.alla@servicenow.com","name":"savya.alla"},{"email":"krishna.kumar@servicenow.com","name":"krishnakr1989"},{"email":"richa.srivastava1@servicenow.com","name":"richa.srivastava"},{"email":"aprameya.v@servicenow.com","name":"aprameya.v"},{"email":"jyothsna.kilari@servicenow.com","name":"jyothsna.kilari"}],"readme":"# @servicenow/ui-core\n\n\n\n## createCustomElement\nDefine a custom element.\n\n| Param | Type | Description |\n| --- | --- | --- |\n| elementName |string | The tag name of the custom element. |\n| config | Object | The custom element configuration. |\n| [config.initialState] | Object | The initial state for a component. |\n| [config.properties] | Object | The properties used by a custom element. |\n| config.properties.name | Object | The name of the property. |\n| [config.properties.name.default] | \\* | The default value of the property. |\n| [config.properties.name.computed] | function | A function that computes the property value. |\n| config.properties.name.computed.state | Object | The custom element state. |\n| [config.properties.name.onChange] | function | A function that will be called with the new property value, the previous value, and the `dispatch` function. |\n| [config.properties.name.reflect] | boolean | Reflect property change to corresponding attribute. |\n| [config.properties.name.unstableParse] | boolean | Parse attribute values when corresponding properties are set. |\n| [config.properties.name.readOnly] | boolean | Property cannot be externally set. |\n| [config.actions] | Object | The actions the custom element dispatches. |\n| config.actions.type | Object | The action type, name. |\n| [config.actions.private] | boolean | Indicates if the action is visible outside of the custom element. |\n| [config.actions.handlers] | Array | Effect handlers to run when the action type is dispatched. |\n| config.renderer | Object | The renderer to be used by the custom element. |\n| config.renderer.type | function | The library that renders the view. |\n| config.renderer.view | function | A function that is executed by onStateChange. |\n| [config.renderer.transformState] | function | A function that executes before a component's state is passed to the handler. |\n| [config.onDisconnect] | function | A function that executes when the custom element is disconnected. |\n| [config.onConnect] | function | A function that executes when the custom element is connected. |\n| [config.behaviors] | Array | Behaviors to applied to the custom element. |\n\n**Example**\n```js\nimport {createCustomElement} from '@servicenow/ui-core';\nimport snabbdom from '@servicenow/ui-renderer-snabbdom';\n\ncreateCustomElement('sn-hello-world', {\n properties: {\n name: {\n default: 'Fred'\n }\n },\n renderer: {\n type: snabbdom,\n transformState({properties}) { return properties; },\n view: ({name}) => { return Hello {name}!
; }\n }\n});\n```\n\n## Action Routing\nActions 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.\n\n```javascript\ndispatch('SOMETHING_HAPPENED', {somethingHappened: true}, {stopPropagtion: true});\n```\n\n_OR_\n\n```javascript\ncreateCustomElement('sn-foo', () => null, {\n stopPropagtion: ['SOMETHING_HAPPENED']\n});\n ```\n","readmeFilename":"README.md"}