|
Lines 1-17
Link Here
|
| 1 |
import { Component, defineCustomElement } from "vue"; |
1 |
import { Component, defineCustomElement } from "vue"; |
| 2 |
import HelloIslands from "../components/HelloIslands.vue"; |
|
|
| 3 |
|
2 |
|
| 4 |
/** |
3 |
/** |
| 5 |
* A registry for Vue components. |
4 |
* A registry for Vue components. |
| 6 |
* @type {Map<string, string>} |
5 |
* @type {Map<string, () => Promise<Component>>} |
| 7 |
*/ |
6 |
*/ |
| 8 |
export const componentRegistry: Map<string, () => Promise<Component>> = new Map( |
7 |
export const componentRegistry: Map<string, () => Promise<Component>> = new Map( |
| 9 |
[["hello-islands", HelloIslands]] |
8 |
[ |
|
|
9 |
[ |
| 10 |
"hello-islands", |
| 11 |
async () => { |
| 12 |
const module = await import("../components/HelloIslands.vue"); |
| 13 |
return module.default; |
| 14 |
}, |
| 15 |
], |
| 16 |
] |
| 10 |
); |
17 |
); |
| 11 |
|
18 |
|
| 12 |
// Register and define custom elements |
19 |
// Register and define custom elements |
| 13 |
window.requestIdleCallback(() => { |
20 |
window.requestIdleCallback(async () => { |
| 14 |
componentRegistry.forEach((component, name) => { |
21 |
componentRegistry.forEach(async (importFn, name) => { |
|
|
22 |
const component = await importFn(); |
| 15 |
customElements.define( |
23 |
customElements.define( |
| 16 |
name, |
24 |
name, |
| 17 |
defineCustomElement(component as any, { shadowRoot: false }) |
25 |
defineCustomElement(component as any, { shadowRoot: false }) |
| 18 |
- |
|
|