perf: refactor custom component registration config

BREAKING CHANGE: trigger major release for color theming support #229

README.md

@@ -15,106 +15,106 @@ The following sections are editable by making changes to the following files:
 | Use Cases              | Examples for when to use this component           | `./docs/partials/useCases.md`       |
 | Additional Information | For use to add any component specific information | `./docs/partials/readmeAddlInfo.md` |
 | Component Example Code | HTML sample code of the components use            | `./apiExamples/basic.html`          |
--->
-
+-->
+
 # Button
 
 <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../docs/partials/description.md) -->
 <!-- The below content is automatically added from ./../docs/partials/description.md -->
 `<auro-button>` is a [HTML custom element](https://developer.mozilla.org/en-US/docs/Web/Web_Components/Using_custom_elements) for the purpose being a clickable element to trigger a specific action.
-<!-- AURO-GENERATED-CONTENT:END -->
+<!-- AURO-GENERATED-CONTENT:END -->
 <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../docs/partials/readmeAddlInfo.md) -->
 <!-- The below content is automatically added from ./../docs/partials/readmeAddlInfo.md -->
-<!-- AURO-GENERATED-CONTENT This file is to be used for any additional content that should be included in the README.md which is specific to this component. -->
-
+<!-- AURO-GENERATED-CONTENT This file is to be used for any additional content that should be included in the README.md which is specific to this component. -->
+
 ## Responsive support
 
 `<auro-button>` is responsive by default. The button will assume 100% of the width of its container for views less than [auro_breakpoint--sm](https://alaskaairlines.github.io/WebCoreStyleSheets/#responsive-mixin-auro_breakpoint--sm).
 
 Beyond that breakpoint `<auro-button>` will assume the width of the content or a min-width of `8.75rem`, which ever is greater.
 
-If the desired appearance of the `<auro-button>` is to be placed in the reverse direction of natural content, then the attributes of `responsive` and `reverse` are needed on the `<auro-button>` element.
-
+If the desired appearance of the `<auro-button>` is to be placed in the reverse direction of natural content, then the attributes of `responsive` and `reverse` are needed on the `<auro-button>` element.
+
 ## Multi button support
 
 When the UI requires the use of multiple buttons within the same space, with the use of the [Auro Web Core Style Sheets](https://alaskaairlines.github.io/WebCoreStyleSheets/#utility-auro-css-#{$scope}.auro_containedButtons), and the `auro_containedButtons`.
-<!-- AURO-GENERATED-CONTENT:END -->
-
+<!-- AURO-GENERATED-CONTENT:END -->
+
 ## UI development browser support
 
 <!-- AURO-GENERATED-CONTENT:START (REMOTE:url=https://raw.githubusercontent.com/AlaskaAirlines/WC-Generator/master/componentDocs/partials/browserSupport.md) -->
 For the most up to date information on [UI development browser support](https://auro.alaskaair.com/support/browsersSupport)
 
-<!-- AURO-GENERATED-CONTENT:END -->
-
+<!-- AURO-GENERATED-CONTENT:END -->
+
 ## Install
 
 <!-- AURO-GENERATED-CONTENT:START (REMOTE:url=https://raw.githubusercontent.com/AlaskaAirlines/WC-Generator/master/componentDocs/partials/usage/componentInstall_esm.md) -->
 [![Build Status](https://img.shields.io/github/actions/workflow/status/AlaskaAirlines/auro-button/testPublish.yml?style=for-the-badge)](https://github.com/AlaskaAirlines/auro-button/actions/workflows/testPublish.yml)
 [![See it on NPM!](https://img.shields.io/npm/v/@aurodesignsystem/auro-button?style=for-the-badge&color=orange)](https://www.npmjs.com/package/@aurodesignsystem/auro-button)
 [![License](https://img.shields.io/npm/l/@aurodesignsystem/auro-button?color=blue&style=for-the-badge)](https://www.apache.org/licenses/LICENSE-2.0)
-![ESM supported](https://img.shields.io/badge/ESM-compatible-FFE900?style=for-the-badge)
-
+![ESM supported](https://img.shields.io/badge/ESM-compatible-FFE900?style=for-the-badge)
+
 ```shell
 $ npm i @aurodesignsystem/auro-button
 ```
 
 Installing as a direct, dev or peer dependency is up to the user installing the package. If you are unsure as to what type of dependency you should use, consider reading this [stack overflow](https://stackoverflow.com/questions/18875674/whats-the-difference-between-dependencies-devdependencies-and-peerdependencies) answer.
 
-<!-- AURO-GENERATED-CONTENT:END -->
-
+<!-- AURO-GENERATED-CONTENT:END -->
+
 ### Design Token CSS Custom Property dependency
 
 <!-- AURO-GENERATED-CONTENT:START (REMOTE:url=https://raw.githubusercontent.com/AlaskaAirlines/WC-Generator/master/componentDocs/partials/development/designTokens.md) -->
 The use of any Auro custom element has a dependency on the [Auro Design Tokens](https://auro.alaskaair.com/getting-started/developers/design-tokens).
 
-<!-- AURO-GENERATED-CONTENT:END -->
-
+<!-- AURO-GENERATED-CONTENT:END -->
+
 ### Define dependency in project component
 
 <!-- AURO-GENERATED-CONTENT:START (REMOTE:url=https://raw.githubusercontent.com/AlaskaAirlines/WC-Generator/master/componentDocs/partials/usage/componentImportDescription.md) -->
 Defining the component dependency within each component that is using the `<auro-button>` component.
 
-<!-- AURO-GENERATED-CONTENT:END -->
-<!-- AURO-GENERATED-CONTENT:START (REMOTE:url=https://raw.githubusercontent.com/AlaskaAirlines/WC-Generator/master/componentDocs/partials/usage/componentImport.md) -->
-
+<!-- AURO-GENERATED-CONTENT:END -->
+<!-- AURO-GENERATED-CONTENT:START (REMOTE:url=https://raw.githubusercontent.com/AlaskaAirlines/WC-Generator/master/componentDocs/partials/usage/componentImport.md) -->
+
 ```js
 import "@aurodesignsystem/auro-button";
 ```
 
-<!-- AURO-GENERATED-CONTENT:END -->
+<!-- AURO-GENERATED-CONTENT:END -->
 **Reference component in HTML**
 <!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/basic.html) -->
-<!-- The below code snippet is automatically added from ./../apiExamples/basic.html -->
-
+<!-- The below code snippet is automatically added from ./../apiExamples/basic.html -->
+
 ```html
 <auro-button>Primary</auro-button>
 <auro-button variant="secondary">Secondary</auro-button>
-<auro-button variant="tertiary">Tertiary</auro-button>
-```
-<!-- AURO-GENERATED-CONTENT:END -->
-
+<auro-button variant="tertiary">Tertiary</auro-button>
+```
+<!-- AURO-GENERATED-CONTENT:END -->
+
 ## Install bundled assets from CDN
 
 <!-- AURO-GENERATED-CONTENT:START (REMOTE:url=https://raw.githubusercontent.com/AlaskaAirlines/WC-Generator/master/componentDocs/partials/usage/bundleInstallDescription.md) -->
 In cases where the project is not able to process JS assets, there are pre-processed assets available for use. See -- `auro-button__bundled.js` for modern browsers. Legacy browsers such as IE11 are no longer supported.
 
 **WARNING!** When installing into your application environment, DO NOT use `@latest` for the requested version. Risks include unknown MAJOR version releases and instant adoption of any new features and possible bugs without developer knowledge. The `@latest` wildcard should NEVER be used for production customer-facing applications. You have been warned.
 
-<!-- AURO-GENERATED-CONTENT:END -->
-
+<!-- AURO-GENERATED-CONTENT:END -->
+
 ### Bundle example code
 
-<!-- AURO-GENERATED-CONTENT:START (REMOTE:url=https://raw.githubusercontent.com/AlaskaAirlines/WC-Generator/master/componentDocs/partials/usage/bundleUseModBrowsers.md) -->
-
+<!-- AURO-GENERATED-CONTENT:START (REMOTE:url=https://raw.githubusercontent.com/AlaskaAirlines/WC-Generator/master/componentDocs/partials/usage/bundleUseModBrowsers.md) -->
+
 ```html
 <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@aurodesignsystem/[email protected]/dist/tokens/CSSCustomProperties.css" />
-<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@aurodesignsystem/[email protected]/dist/bundled/essentials.css" />
-<script src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/[email protected]/dist/auro-button__bundled.js" type="module"></script>
-```
+<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@aurodesignsystem/[email protected]/dist/bundled/essentials.css" />
+<script src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/[email protected]/dist/auro-button__bundled.js" type="module"></script>
+```
+
+<!-- AURO-GENERATED-CONTENT:END -->
 
-<!-- AURO-GENERATED-CONTENT:END -->
-
 ## auro-button use cases
 
 <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../docs/partials/useCases.md) -->
@@ -125,31 +125,31 @@ The auro-button element should be used in situations where users may:
 * begin a new task
 * trigger a new UI element to appear to the page
 * specificy a new or next step in a process
-<!-- AURO-GENERATED-CONTENT:END -->
-
-## API Code Examples
-
+<!-- AURO-GENERATED-CONTENT:END -->
+
+## API Code Examples
+
 ### Default auro-button
 
 <!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/basic.html) -->
-<!-- The below code snippet is automatically added from ./../apiExamples/basic.html -->
-
+<!-- The below code snippet is automatically added from ./../apiExamples/basic.html -->
+
 ```html
 <auro-button>Primary</auro-button>
 <auro-button variant="secondary">Secondary</auro-button>
-<auro-button variant="tertiary">Tertiary</auro-button>
-```
-<!-- AURO-GENERATED-CONTENT:END -->
-
+<auro-button variant="tertiary">Tertiary</auro-button>
+```
+<!-- AURO-GENERATED-CONTENT:END -->
+
 ## Development
 
 <!-- AURO-GENERATED-CONTENT:START (REMOTE:url=https://raw.githubusercontent.com/AlaskaAirlines/WC-Generator/master/componentDocs/partials/development/developmentDescription.md) -->
 In order to develop against this project, if you are not part of the core team, you will be required to fork the project prior to submitting a pull request.
 
 Please be sure to review the [contribution guidelines](https://auro.alaskaair.com/contributing) for this project. Please make sure to **pay special attention** to the **conventional commits** section of the document.
 
-<!-- AURO-GENERATED-CONTENT:END -->
-
+<!-- AURO-GENERATED-CONTENT:END -->
+
 ### Start development environment
 
 <!-- AURO-GENERATED-CONTENT:START (REMOTE:url=https://raw.githubusercontent.com/AlaskaAirlines/WC-Generator/master/componentDocs/partials/development/localhost.md) -->
@@ -169,22 +169,22 @@ $ npm run build:watch
 $ npm run serve
 ```
 
-<!-- AURO-GENERATED-CONTENT:END -->
-
+<!-- AURO-GENERATED-CONTENT:END -->
+
 ### API generation
 
 <!-- AURO-GENERATED-CONTENT:START (REMOTE:url=https://raw.githubusercontent.com/AlaskaAirlines/WC-Generator/master/componentDocs/partials/development/api.md) -->
 The custom element API file is generated in the build and committed back to the repo with a version change. If the API doc has changed without a version change, author's are to run `npm run build:api` to generate the doc and commit to version control.
 
-<!-- AURO-GENERATED-CONTENT:END -->
-
+<!-- AURO-GENERATED-CONTENT:END -->
+
 ### Testing
 
 <!-- AURO-GENERATED-CONTENT:START (REMOTE:url=https://raw.githubusercontent.com/AlaskaAirlines/WC-Generator/master/componentDocs/partials/development/testing.md) -->
 Automated tests are required for every Auro component. See `.\test\auro-button.test.js` for the tests for this component. Run `npm test` to run the tests and check code coverage. Tests must pass and meet a certain coverage threshold to commit. See [the testing documentation](https://auro.alaskaair.com/support/tests) for more details.
 
-<!-- AURO-GENERATED-CONTENT:END -->
-
+<!-- AURO-GENERATED-CONTENT:END -->
+
 ### Bundled assets
 
 <!-- AURO-GENERATED-CONTENT:START (REMOTE:url=https://raw.githubusercontent.com/AlaskaAirlines/WC-Generator/master/componentDocs/partials/development/bundles.md) -->

demo/index.html

@@ -29,7 +29,11 @@
         });
     </script>
     <script type="module" data-demo-script="true">
-      import { registerComponent } from '../index.js';
+      import { AuroButton } from '../src/auro-button.js';
+      import * as RuntimeUtils from '@aurodesignsystem/auro-library/scripts/utils/runtimeUtils.mjs';
+
+      RuntimeUtils.default.prototype.registerComponent('custom-button', AuroButton);
+
       import { initExamples } from './index.min.js'; 
 
       registerComponent('custom-button');

demo/index.md

@@ -228,8 +228,10 @@ There are two important parts of every Auro component. The <a href="https://deve
 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.
 
 ```js
-import './node_modules/@aurodesignsystem/auro-button';
-registerComponent('custom-button');
+import { AuroButton } from './src/auro-button.js';
+import * as RuntimeUtils from '@aurodesignsystem/auro-library/scripts/utils/runtimeUtils.mjs';
+
+RuntimeUtils.default.prototype.registerComponent('custom-button', AuroButton);
 ```
 
 This will create a new custom element that you can use in your HTML that will function identically to the `<auro-button>` element.

docs/partials/index.md

@@ -141,8 +141,10 @@ There are two important parts of every Auro component. The <a href="https://deve
 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.
 
 ```js
-import './node_modules/@aurodesignsystem/auro-button';
-registerComponent('custom-button');
+import { AuroButton } from './src/auro-button.js';
+import * as RuntimeUtils from '@aurodesignsystem/auro-library/scripts/utils/runtimeUtils.mjs';
+
+RuntimeUtils.default.prototype.registerComponent('custom-button', AuroButton);
 ```
 
 This will create a new custom element that you can use in your HTML that will function identically to the `<auro-button>` element.

index.js

@@ -1,13 +1,4 @@
 import { AuroButton } from './src/auro-button.js';
+import * as RuntimeUtils from '@aurodesignsystem/auro-library/scripts/utils/runtimeUtils.mjs';
 
-/**
- * Register Custom Element.
- * @param {Object} name - Name to use for custom element.
- * @returns {void}
- */
-export function registerComponent(name) {
-  // alias definition
-  if (!customElements.get(name)) {
-    customElements.define(name, class extends AuroButton {});
-  }
-}
+RuntimeUtils.default.prototype.registerComponent('custom-button', AuroButton);

test/auro-button.test.js

@@ -7,7 +7,7 @@
 /* eslint-disable no-undef */
 import { fixture, html, expect, elementUpdated } from '@open-wc/testing';
 import { AuroButton } from '../src/auro-button.js';
-import { registerComponent } from '../index.js';
+import * as RuntimeUtils from '@aurodesignsystem/auro-library/scripts/utils/runtimeUtils.mjs';
 import '../index.js';
 
 describe('auro-button', () => {
@@ -33,9 +33,9 @@ describe('auro-button', () => {
   });
 
   it('successfully registers custom component', async () => {
-    registerComponent('test-button');
+    RuntimeUtils.default.prototype.registerComponent('custom-button', AuroButton);
 
-    expect(typeof customElements.get('test-button')).to.equal(typeof AuroButton);
+    expect(typeof customElements.get('custom-button')).to.equal(typeof AuroButton);
   });
 
   it('tests setting autofocus', async () => {