- ComponentName ⇐
HTMLElement ComponentName class
- ComponentName
- Main
if you add more components to the project you will need to add a line to this file (or other entry point):
- PackageJSON
- LanguageStrings
Import strings here and call I18n.addStrings() with the supported locale identifier and the strings object exported from the language file
- LanguageFile
export a flat object of key/value paris for component labels. name the file based on the language/locale and import in strings.js
ComponentName class
Kind: global class
Extends: HTMLElement
- ComponentName ⇐
HTMLElement- new exports.ComponentName()
- new ComponentName(self)
- instance
- .thing ⇒
String - .thing
- .connectedCallback() ⇒
void - .disconnectedCallback() ⇒
void - .attributeChangedCallback(attributeName, oldValue, newValue) ⇒
void - .adoptedCallback(oldDocument, newDocument) ⇒
void
- .thing ⇒
- static
- .observedAttributes ⇒
Array - .stateAttributes ⇒
Array
- .observedAttributes ⇒
This is an example of the components you will create. It must extend some kind of html element You must also register it after the class definition as a custom element
Example
export const wcComponentName = customElements.define('component-name', ComponentName);constructor - called when the element is created or upgraded
Returns: type - inherited properties from HTMLElement
| Param | Type | Description |
|---|---|---|
| self | type |
inherited properties from HTMLElement |
get value - Properties bound to attributes
Kind: instance property of ComponentName
Returns: String - thing description from element attribute
set value - Properties bound to attributes this will be automatically injected if present in the observedAttributes or stateAttributes
Kind: instance property of ComponentName
| Param | Type | Description |
|---|---|---|
| val | String |
description to be set on the element attribute |
connectedCallback - Called when the element is inserted into a document, including into a shadow tree This is where you need to handle dom modifications that may have happened BEFORE modifications become observeable Note: not all content may be rendered at this point, you must be ready to handle the content as it becomes available
Kind: instance method of ComponentName
Returns: void - description
disconnectedCallback - Called when the element is removed from a document
- Use this callback to perform any cleanup (remove dom elements that are not contained, restore state, etc)
Kind: instance method of ComponentName
Returns: void - description
attributeChangedCallback - Called when an attribute is changed, appended, removed, or replaced on the element
Kind: instance method of ComponentName
Returns: void - description
| Param | Type | Description |
|---|---|---|
| attributeName | String |
description |
| oldValue | String |
description |
| newValue | String |
description |
adoptedCallback - Called when the element is adopted into a new document
Kind: instance method of ComponentName
Returns: void - description
| Param | Type | Description |
|---|---|---|
| oldDocument | HTMLDocument |
description |
| newDocument | HTMLDocument |
description |
Kind: static property of ComponentName
Returns: Array - array of strings
Not applicable if not using the StatefulElement mixin;
Kind: static property of ComponentName
Returns: Array - description
Kind: global class
- ComponentName
- new exports.ComponentName()
- new ComponentName(self)
- instance
- .thing ⇒
String - .thing
- .connectedCallback() ⇒
void - .disconnectedCallback() ⇒
void - .attributeChangedCallback(attributeName, oldValue, newValue) ⇒
void - .adoptedCallback(oldDocument, newDocument) ⇒
void
- .thing ⇒
- static
- .observedAttributes ⇒
Array - .stateAttributes ⇒
Array
- .observedAttributes ⇒
This is an example of the components you will create. It must extend some kind of html element You must also register it after the class definition as a custom element
Example
export const wcComponentName = customElements.define('component-name', ComponentName);constructor - called when the element is created or upgraded
Returns: type - inherited properties from HTMLElement
| Param | Type | Description |
|---|---|---|
| self | type |
inherited properties from HTMLElement |
get value - Properties bound to attributes
Kind: instance property of ComponentName
Returns: String - thing description from element attribute
set value - Properties bound to attributes this will be automatically injected if present in the observedAttributes or stateAttributes
Kind: instance property of ComponentName
| Param | Type | Description |
|---|---|---|
| val | String |
description to be set on the element attribute |
connectedCallback - Called when the element is inserted into a document, including into a shadow tree This is where you need to handle dom modifications that may have happened BEFORE modifications become observeable Note: not all content may be rendered at this point, you must be ready to handle the content as it becomes available
Kind: instance method of ComponentName
Returns: void - description
disconnectedCallback - Called when the element is removed from a document
- Use this callback to perform any cleanup (remove dom elements that are not contained, restore state, etc)
Kind: instance method of ComponentName
Returns: void - description
attributeChangedCallback - Called when an attribute is changed, appended, removed, or replaced on the element
Kind: instance method of ComponentName
Returns: void - description
| Param | Type | Description |
|---|---|---|
| attributeName | String |
description |
| oldValue | String |
description |
| newValue | String |
description |
adoptedCallback - Called when the element is adopted into a new document
Kind: instance method of ComponentName
Returns: void - description
| Param | Type | Description |
|---|---|---|
| oldDocument | HTMLDocument |
description |
| newDocument | HTMLDocument |
description |
Kind: static property of ComponentName
Returns: Array - array of strings
Not applicable if not using the StatefulElement mixin;
Kind: static property of ComponentName
Returns: Array - description
if you add more components to the project you will need to add a line to this file (or other entry point):
Kind: global variable
Example
export * from '../components/component-name/component-name.js';Example
export * from 'external/dependency/location.js';Example
export {SpecificDependency} from 'external/location.js';Example
export * from '@helio/wc-ui';Kind: global variable
| Param | Type | Description |
|---|---|---|
| exports | Object |
Any named exports from here should have a 1:1 mapping to a file either in src ir lib (rollup output) directory. This is useful if you have a project that is deployed as an IIFE but you still have components you want to export independently. By default, any named exports defined here will be added to the rollup.imports object on projects that depend on this one. |
| rollup | Object |
Rollup configuration object |
| rollup.externals | Array.<String> |
npm package names or named imports to be considered external when rolled up. This is useful for A) when you have a component that depends on a vendor library that will be included on the page but not in your bundle or B) when you are exporting an ES module to be consumed. |
| rollup.entry | Object |
The entry point for rollup to begin bundling. Typically, this will be a file in core named the same as your package. This file is your "Main" where your exports live. |
| rollup.format | "es" | "iife" |
The only two valid values are "es" and "iife". either you are creating a reusable component module (es) or a deployed application (iife). |
| rollup.imports | Object |
This is for named imports that may come from other projects or you can define yourself. an Example would be the whatwg/fetch polyfill where we want a specific file from the npm package but not the default script specified in the watwg/fetch package.json |
Example
"exports": {
"deployedApp": "node_modules/@helio/component/lib/app.js",
"subComponentA": "node_modules/@helio/component/lib/componentA.js",
"subComponentB": "node_modules/@helio/component/lib/componentB.js"
}Example
"rollup": {
"externals": [],
"entry": "src/core/package.js",
"format": "es",
"imports": {}
},Example
"externals": [
"@helio/wc-utils",
"@helio/wc-core",
"@helio/wc-data",
"@helio/wc-i18n",
"@helio/wc-ui"
]Example
"entry": "src/core/package.js"Example
"format": "es"Example
"imports": {
"namedDependency": "node_modules/file/not/specified/by/packagejson"
}Import strings here and call I18n.addStrings() with the supported locale identifier and the strings object exported from the language file
Kind: global variable
Example
import {I18n} from '@helio/wc-i18n';
import en_US_Strings from './languages/en_US';
I18n.addStrings('en_US', en_US_Strings);export a flat object of key/value paris for component labels. name the file based on the language/locale and import in strings.js
Kind: global variable
Example
export default {
'demo': 'Hello, from NewProjectTest!',
'demo2': 'Here is a list of my favorite colors'
}