summaryrefslogtreecommitdiff
path: root/packages/integrations/lit/src
diff options
context:
space:
mode:
Diffstat (limited to 'packages/integrations/lit/src')
-rw-r--r--packages/integrations/lit/src/client.ts72
-rw-r--r--packages/integrations/lit/src/index.ts67
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');
- }
- }
- },
- },
- };
-}