From e4c716e4e7947610d9c9c1d995627198f8c4ec29 Mon Sep 17 00:00:00 2001 From: Eunsun Mota Date: Fri, 18 Oct 2024 12:01:30 -0700 Subject: [PATCH] feat(api): add register static method `AuroSkeleton.register` is to easily register the element without extra importing `import '@aurodesignsystem/auro-skeleton'` will still register this element to `` `import { AuroSkeleton } from '../src/auro-skeleton.js'` wont register this element until `AuroSkeleton.register` gets called --- demo/index.html | 7 +--- demo/index.js | 3 ++ demo/index.md | 5 +-- demo/index.min.js | 75 ++++++++++++++++++++++++++++++++++++++ docs/partials/index.md | 5 +-- index.js | 3 +- package-lock.json | 4 +- package.json | 2 +- rollup.config.mjs | 12 +++++- src/auro-skeleton.js | 18 ++++++--- test/auro-skeleton.test.js | 2 +- 11 files changed, 111 insertions(+), 25 deletions(-) create mode 100644 demo/index.js create mode 100644 demo/index.min.js diff --git a/demo/index.html b/demo/index.html index 53626b9..b809481 100644 --- a/demo/index.html +++ b/demo/index.html @@ -41,12 +41,7 @@ }); - + diff --git a/demo/index.js b/demo/index.js new file mode 100644 index 0000000..410fac0 --- /dev/null +++ b/demo/index.js @@ -0,0 +1,3 @@ +import { AuroSkeleton } from '../src/auro-skeleton.js'; + +AuroSkeleton.register('custom-skeleton'); diff --git a/demo/index.md b/demo/index.md index 712a26e..e6cec20 100644 --- a/demo/index.md +++ b/demo/index.md @@ -126,13 +126,12 @@ Use your imagination. Wherever data can be placed, an `` element There are two important parts of every Auro component. The class and the custom clement. The class is exported and then used as part of defining the Web Component. When importing this component as described in the install section, the class is imported and the `auro-skeleton` custom element is defined automatically. -To protect from versioning conflicts with other instances of the component being loaded, it is recommended to use our `registerComponent(name)` method and pass in a unique name. +To protect from versioning conflicts with other instances of the component being loaded, it is recommended to use our `AuroSkeleton.register(name)` method and pass in a unique name. ```js import { AuroSkeleton } from './src/auro-skeleton.js'; -import * as RuntimeUtils from '@aurodesignsystem/auro-library/scripts/utils/runtimeUtils.mjs'; -RuntimeUtils.default.prototype.registerComponent('custom-skeleton', AuroSkeleton); +AuroSkeleton.register('custom-skeleton'); ``` This will create a new custom element that you can use in your HTML that will function identically to the `` element. diff --git a/demo/index.min.js b/demo/index.min.js new file mode 100644 index 0000000..a5dd380 --- /dev/null +++ b/demo/index.min.js @@ -0,0 +1,75 @@ +import { css, LitElement, html } from 'lit'; +import AuroLibraryRuntimeUtils from '@aurodesignsystem/auro-library/scripts/utils/runtimeUtils.mjs'; + +var styleCss = css`*,*:before,*:after{box-sizing:border-box}@media(prefers-reduced-motion: reduce){*,*:before,*:after{animation-duration:.01ms !important;animation-iteration-count:1 !important;transition-duration:.01ms !important}}*:focus-visible{outline:0}*:focus-visible{outline:0}:focus:not(:focus-visible){outline:3px solid transparent}.util_displayInline{display:inline}.util_displayInlineBlock{display:inline-block}.util_displayBlock{display:block}.util_displayFlex{display:flex}.util_displayHidden{display:none}.util_displayHiddenVisually{position:absolute;overflow:hidden;clip:rect(1px, 1px, 1px, 1px);width:1px;height:1px;padding:0;border:0}:host{display:block;animation-duration:2s;animation-fill-mode:backwards;animation-iteration-count:infinite;animation-name:place-holder-shimmer;animation-timing-function:linear;background-repeat:no-repeat;background-size:1000px 100%}:host([shape=circle]){width:auto;border-radius:50%}:host([shape=oval]){border-radius:9999px}:host([shape=rectangle]){border-radius:var(--ds-border-radius, 0.375rem)}@keyframes place-holder-shimmer{from{background-position:-1000px 0}to{background-position:1000px 0}}`; + +var colorCss = css`:host{background-color:var(--ds-auro-skeleton-container-color);background-image:linear-gradient(to right, var(--ds-auro-skeleton-container-gradient-color-one) 10%, var(--ds-auro-skeleton-container-gradient-color-two) 40%, var(--ds-auro-skeleton-container-gradient-color-one) 60%)}`; + +var tokensCss = css`:host{--ds-auro-skeleton-container-color: var(--ds-color-container-subtle-default, #f7f8fa);--ds-auro-skeleton-container-gradient-color-one: var(--ds-color-container-subtle-default, #f7f8fa);--ds-auro-skeleton-container-gradient-color-two: var(--ds-color-container-tertiary-default, rgba(0, 0, 0, 0.03))}`; + +// Copyright (c) 2021 Alaska Airlines. All right reserved. Licensed under the Apache-2.0 license +// See LICENSE in the project root for license information. + + +// See https://git.io/JJ6SJ for "How to document your components using JSDoc" +/** + * The auro-skeleton element provides users a way to indicate the loading of asynchronous content on a page. + * + * @attr {String} shape - Renders a circle, oval, or rectangle loader. + */ + +// build the component class +class AuroSkeleton extends LitElement { + constructor() { + super(); + + /** + * @private + */ + this.runtimeUtils = new AuroLibraryRuntimeUtils(); + } + + // function to define props used within the scope of this component + static get properties() { + return { + // ...super.properties, + }; + } + + static get styles() { + return [ + styleCss, + colorCss, + tokensCss + ]; + } + + /** + * This will register this element with the browser. + * @param {string} [name="auro-skeleton"] - The name of element that you want to register to. + * + * @example + * AuroSkeleton.register("custom-skeleton") // this will register this element to + * + */ + static register(name = "auro-skeleton") { + AuroLibraryRuntimeUtils.prototype.registerComponent(name, AuroSkeleton); + } + + firstUpdated() { + // Add the tag name as an attribute if it is different than the component name + this.runtimeUtils.handleComponentTagRename(this, 'auro-skeleton'); + } + + // When using auroElement, use the following attribute and function when hiding content from screen readers. + // aria-hidden="${this.hideAudible(this.hiddenAudible)}" + + // function that renders the HTML and CSS into the scope of the component + render() { + return html` + Loading... + `; + } +} + +AuroSkeleton.register('custom-skeleton'); diff --git a/docs/partials/index.md b/docs/partials/index.md index 5077f03..32d47d5 100644 --- a/docs/partials/index.md +++ b/docs/partials/index.md @@ -58,13 +58,12 @@ Use your imagination. Wherever data can be placed, an `` element There are two important parts of every Auro component. The class and the custom clement. The class is exported and then used as part of defining the Web Component. When importing this component as described in the install section, the class is imported and the `auro-skeleton` custom element is defined automatically. -To protect from versioning conflicts with other instances of the component being loaded, it is recommended to use our `registerComponent(name)` method and pass in a unique name. +To protect from versioning conflicts with other instances of the component being loaded, it is recommended to use our `AuroSkeleton.register(name)` method and pass in a unique name. ```js import { AuroSkeleton } from './src/auro-skeleton.js'; -import * as RuntimeUtils from '@aurodesignsystem/auro-library/scripts/utils/runtimeUtils.mjs'; -RuntimeUtils.default.prototype.registerComponent('custom-skeleton', AuroSkeleton); +AuroSkeleton.register('custom-skeleton'); ``` This will create a new custom element that you can use in your HTML that will function identically to the `` element. diff --git a/index.js b/index.js index f5ea4f4..eb9b7a9 100644 --- a/index.js +++ b/index.js @@ -1,4 +1,3 @@ import { AuroSkeleton } from './src/auro-skeleton.js'; -import * as RuntimeUtils from '@aurodesignsystem/auro-library/scripts/utils/runtimeUtils.mjs'; -RuntimeUtils.default.prototype.registerComponent('custom-skeleton', AuroSkeleton); +AuroSkeleton.register(); diff --git a/package-lock.json b/package-lock.json index 57a02fd..67bdf70 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,12 +1,12 @@ { "name": "@aurodesignsystem/auro-skeleton", - "version": "3.0.0", + "version": "3.0.1", "lockfileVersion": 3, "requires": true, "packages": { "": { "name": "@aurodesignsystem/auro-skeleton", - "version": "3.0.0", + "version": "3.0.1", "hasInstallScript": true, "license": "Apache-2.0", "dependencies": { diff --git a/package.json b/package.json index 4374eeb..d0ff965 100644 --- a/package.json +++ b/package.json @@ -138,7 +138,7 @@ "web components" ], "scripts": { - "build": "npm-run-all build:sass sass:render types", + "build": "npm-run-all build:sass sass:render scssLint dist:js bundler postinstall build:api build:docs types", "build:test": "npm-run-all test linters", "build:release": "npm-run-all build build:test build:api build:docs bundler postinstall", "build:ci": "npm-run-all sweep build:release", diff --git a/rollup.config.mjs b/rollup.config.mjs index 1dde6bc..c52fc5a 100644 --- a/rollup.config.mjs +++ b/rollup.config.mjs @@ -21,4 +21,14 @@ const production = !process.env.ROLLUP_WATCH, ] }; -export default [modernConfig]; +const indexExamplesConfig = { + input: { + ['index.min']: './demo/index.js', + }, + output: { + format: 'esm', + dir: 'demo/' + } +}; + +export default [modernConfig, indexExamplesConfig]; diff --git a/src/auro-skeleton.js b/src/auro-skeleton.js index e03a551..5cab5eb 100644 --- a/src/auro-skeleton.js +++ b/src/auro-skeleton.js @@ -45,6 +45,18 @@ export class AuroSkeleton extends LitElement { ]; } + /** + * This will register this element with the browser. + * @param {string} [name="auro-skeleton"] - The name of element that you want to register to. + * + * @example + * AuroSkeleton.register("custom-skeleton") // this will register this element to + * + */ + static register(name = "auro-skeleton") { + AuroLibraryRuntimeUtils.prototype.registerComponent(name, AuroSkeleton); + } + firstUpdated() { // Add the tag name as an attribute if it is different than the component name this.runtimeUtils.handleComponentTagRename(this, 'auro-skeleton'); @@ -60,9 +72,3 @@ export class AuroSkeleton extends LitElement { `; } } - -/* istanbul ignore else */ -// define the name of the custom component -if (!customElements.get("auro-skeleton")) { - customElements.define("auro-skeleton", AuroSkeleton); -} diff --git a/test/auro-skeleton.test.js b/test/auro-skeleton.test.js index b3d1b39..382f30f 100644 --- a/test/auro-skeleton.test.js +++ b/test/auro-skeleton.test.js @@ -1,5 +1,5 @@ import { fixture, html, expect } from '@open-wc/testing'; -import '../src/auro-skeleton.js'; +import '../index.js'; describe('auro-skeleton', () => { it('auro-skeleton is accessible', async () => {