Press n or j to go to the next uncovered block, b, p or k for the previous block.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 | /** * Coherent.js Web Components Integration * Provides custom element and web component utilities */ import { renderToString } from '@coherentjs/core'; /** * Define a Coherent.js component as a custom element */ export function defineComponent(name, component, options = {}) { if (typeof window === 'undefined') { // Server-side: just return a placeholder return { name, component, options }; } if (!window.customElements) { throw new Error('Custom Elements API not supported'); } class CoherentElement extends HTMLElement { constructor() { super(); this.component = component; this.options = options; } connectedCallback() { this.render(); } render() { const html = renderToString(this.component); if (this.options.shadow) { const shadow = this.attachShadow({ mode: 'open' }); shadow.innerHTML = html; } else { this.innerHTML = html; } } } window.customElements.define(name, CoherentElement); return CoherentElement; } /** * Integration utilities */ export function integrateWithWebComponents(_runtime) { return { defineComponent: (name, component, options) => defineComponent(name, component, options) }; } export function defineCoherentElement(name, component, options = {}) { return defineComponent(name, component, options); } export { defineComponent as default }; |