diff options
Diffstat (limited to '')
| -rw-r--r-- | packages/integrations/lit/src/client.ts | 25 | ||||
| -rw-r--r-- | packages/integrations/lit/src/index.ts | 2 |
2 files changed, 27 insertions, 0 deletions
diff --git a/packages/integrations/lit/src/client.ts b/packages/integrations/lit/src/client.ts new file mode 100644 index 000000000..00f126e34 --- /dev/null +++ b/packages/integrations/lit/src/client.ts @@ -0,0 +1,25 @@ +export default (element: HTMLElement) => + async ( + Component: any, + props: Record<string, any>, + ) => { + // Get the LitElement element instance (may or may not be upgraded). + const component = element.children[0] as HTMLElement; + + // If there is no deferral of hydration, then all reactive properties are + // already serialzied as reflected attributes, or no reactive props were set + if (!component || !component.hasAttribute('defer-hydration')) { + 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 index 5b428ef8d..de6d5b0f9 100644 --- a/packages/integrations/lit/src/index.ts +++ b/packages/integrations/lit/src/index.ts @@ -5,6 +5,7 @@ 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', @@ -34,6 +35,7 @@ export default function (): AstroIntegration { addRenderer({ name: '@astrojs/lit', serverEntrypoint: '@astrojs/lit/server.js', + clientEntrypoint: '@astrojs/lit/dist/client.js', }); // Update the vite configuration. updateConfig({ |