diff options
Diffstat (limited to 'packages/integrations/lit/src')
-rw-r--r-- | packages/integrations/lit/src/client.ts | 72 | ||||
-rw-r--r-- | packages/integrations/lit/src/index.ts | 67 |
2 files changed, 0 insertions, 139 deletions
diff --git a/packages/integrations/lit/src/client.ts b/packages/integrations/lit/src/client.ts deleted file mode 100644 index 9a573d8ee..000000000 --- a/packages/integrations/lit/src/client.ts +++ /dev/null @@ -1,72 +0,0 @@ -/** - * Adds the appropriate slot attribute to each top-level node in the given HTML - * string. - * - * @example - * addSlotAttrsToHtmlString('foo', '<div>bar</div><div>baz</div>'); - * // '<div slot="foo">bar</div><div slot="foo">baz</div>' - * - * @param slotName Name of slot to apply to HTML string. - * @param html Stringified HTML that should be projected into the given slotname. - * @returns A stringified HTML string with the slot attribute applied to each top-level node. - */ -const addSlotAttrsToHtmlString = (slotName: string, html: string) => { - const templ = document.createElement('template'); - templ.innerHTML = html; - Array.from(templ.content.children).forEach((node) => { - node.setAttribute('slot', slotName); - }); - return templ.innerHTML; -}; - -export default (element: HTMLElement) => - async ( - Component: any, - props: Record<string, any>, - { default: defaultChildren, ...slotted }: { default: string; [slotName: string]: string }, - ) => { - // Get the LitElement element instance. - let component = element.children[0]; - // Check if hydration model is client:only - const isClientOnly = element.getAttribute('client') === 'only'; - - // We need to attach the element and it's children to the DOM since it's not - // SSR'd. - if (isClientOnly) { - component = new Component(); - - const otherSlottedChildren = Object.entries(slotted) - .map(([slotName, htmlStr]) => addSlotAttrsToHtmlString(slotName, htmlStr)) - .join(''); - - // defaultChildren can actually be undefined, but TS will complain if we - // type it as so, make sure we don't render undefined. - component.innerHTML = `${defaultChildren ?? ''}${otherSlottedChildren}`; - element.appendChild(component); - - // Set props bound to non-reactive properties as attributes. - for (let [name, value] of Object.entries(props)) { - if (!(name in Component.prototype)) { - component.setAttribute(name, value); - } - } - } - - // If there is no deferral of hydration, then all reactive properties are - // already serialized as reflected attributes, or no reactive props were set - // Alternatively, if hydration is client:only proceed to set props. - if (!component || !(component.hasAttribute('defer-hydration') || isClientOnly)) { - return; - } - - // Set properties on the LitElement instance for resuming hydration. - for (let [name, value] of Object.entries(props)) { - // Check if reactive property or class property. - if (name in Component.prototype) { - (component as any)[name] = value; - } - } - - // Tell LitElement to resume hydration. - component.removeAttribute('defer-hydration'); - }; diff --git a/packages/integrations/lit/src/index.ts b/packages/integrations/lit/src/index.ts deleted file mode 100644 index 94a6d683a..000000000 --- a/packages/integrations/lit/src/index.ts +++ /dev/null @@ -1,67 +0,0 @@ -import { readFileSync } from 'node:fs'; -import type { AstroIntegration, ContainerRenderer } from 'astro'; - -function getViteConfiguration() { - return { - optimizeDeps: { - include: [ - '@astrojs/lit/dist/client.js', - '@astrojs/lit/client-shim.js', - '@astrojs/lit/hydration-support.js', - '@webcomponents/template-shadowroot/template-shadowroot.js', - '@lit-labs/ssr-client/lit-element-hydrate-support.js', - ], - exclude: ['@astrojs/lit/server.js'], - }, - ssr: { - external: ['lit-element', '@lit-labs/ssr', '@astrojs/lit', 'lit/decorators.js'], - }, - }; -} - -export function getContainerRenderer(): ContainerRenderer { - return { - name: '@astrojs/lit', - serverEntrypoint: '@astrojs/lit/server.js', - }; -} - -export default function (): AstroIntegration { - return { - name: '@astrojs/lit', - hooks: { - 'astro:config:setup': ({ updateConfig, addRenderer, injectScript }) => { - // Inject the necessary polyfills on every page (inlined for speed). - injectScript( - 'head-inline', - readFileSync(new URL('../client-shim.min.js', import.meta.url), { encoding: 'utf-8' }), - ); - // Inject the hydration code, before a component is hydrated. - injectScript('before-hydration', `import '@astrojs/lit/hydration-support.js';`); - // Add the lit renderer so that Astro can understand lit components. - addRenderer({ - name: '@astrojs/lit', - serverEntrypoint: '@astrojs/lit/server.js', - clientEntrypoint: '@astrojs/lit/dist/client.js', - }); - // Update the vite configuration. - updateConfig({ - vite: getViteConfiguration(), - }); - }, - 'astro:build:setup': ({ vite, target }) => { - if (target === 'server') { - if (!vite.ssr) { - vite.ssr = {}; - } - if (!vite.ssr.noExternal) { - vite.ssr.noExternal = []; - } - if (Array.isArray(vite.ssr.noExternal)) { - vite.ssr.noExternal.push('lit'); - } - } - }, - }, - }; -} |