Skip to content

Commit

Permalink
perf: refactor custom component registration config
Browse files Browse the repository at this point in the history
  • Loading branch information
jordanjones243 authored and jason-capsule42 committed Sep 30, 2024
1 parent 9ee3022 commit f53c1a2
Show file tree
Hide file tree
Showing 3 changed files with 10 additions and 17 deletions.
6 changes: 4 additions & 2 deletions demo/index.html
Original file line number Diff line number Diff line change
Expand Up @@ -45,8 +45,10 @@
<script src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-accordion@latest/dist/auro-accordion__bundled.js" type="module"></script>
<script type="module" src="../index.js"></script>
<script type="module">
import { registerComponent } from "../index.js"
registerComponent('custom-toast');
import { AuroToast } from '../src/auro-toast.js';
import * as RuntimeUtils from '@aurodesignsystem/auro-library/scripts/utils/runtimeUtils.mjs';

RuntimeUtils.default.prototype.registerComponent('custom-toast', AuroToast);
</script>
<script type="module" src="../src/auro-toaster.js"></script>
<script type="module">
Expand Down
6 changes: 4 additions & 2 deletions docs/partials/index.md
Original file line number Diff line number Diff line change
Expand Up @@ -159,8 +159,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-toast';
registerComponent('custom-toast');
import { AuroToast } from './src/auro-toast.js';
import * as RuntimeUtils from '@aurodesignsystem/auro-library/scripts/utils/runtimeUtils.mjs';

RuntimeUtils.default.prototype.registerComponent('custom-toast', AuroToast);
```

This will create a new custom element that you can use in your HTML that will function identically to the `auro-toast` element.
Expand Down
15 changes: 2 additions & 13 deletions index.js
Original file line number Diff line number Diff line change
@@ -1,15 +1,4 @@
import { AuroToast } from './src/auro-toast.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}
*/
const registerComponent = (name = 'custom-toast') => {
// alias definition
if (!customElements.get(name)) {
customElements.define(name, class extends AuroToast {});
}
}

export { registerComponent }
RuntimeUtils.default.prototype.registerComponent('custom-toast', AuroToast);

0 comments on commit f53c1a2

Please sign in to comment.