diff options
Diffstat (limited to '')
-rw-r--r-- | packages/integrations/svelte/src/client.svelte.ts (renamed from packages/integrations/svelte/client.svelte.js) | 34 | ||||
-rw-r--r-- | packages/integrations/svelte/src/context.ts (renamed from packages/integrations/svelte/context.js) | 10 | ||||
-rw-r--r-- | packages/integrations/svelte/src/server.ts (renamed from packages/integrations/svelte/server.js) | 18 | ||||
-rw-r--r-- | packages/integrations/svelte/src/types.ts | 4 |
4 files changed, 42 insertions, 24 deletions
diff --git a/packages/integrations/svelte/client.svelte.js b/packages/integrations/svelte/src/client.svelte.ts index 3bc9369f8..102f99490 100644 --- a/packages/integrations/svelte/client.svelte.js +++ b/packages/integrations/svelte/src/client.svelte.ts @@ -1,15 +1,19 @@ import { createRawSnippet, hydrate, mount, unmount } from 'svelte'; -/** @type {WeakMap<any, ReturnType<typeof createComponent>} */ -const existingApplications = new WeakMap(); +const existingApplications = new WeakMap<HTMLElement, ReturnType<typeof createComponent>>(); -export default (element) => { - return async (Component, props, slotted, { client }) => { +export default (element: HTMLElement) => { + return async ( + Component: any, + props: Record<string, any>, + slotted: Record<string, any>, + { client }: Record<string, string>, + ) => { if (!element.hasAttribute('ssr')) return; let children = undefined; - let _$$slots = undefined; - let renderFns = {}; + let _$$slots: Record<string, any> | undefined = undefined; + let renderFns: Record<string, any> = {}; for (const [key, value] of Object.entries(slotted)) { // Legacy slot support @@ -43,7 +47,7 @@ export default (element) => { ...renderFns, }; if (existingApplications.has(element)) { - existingApplications.get(element).setProps(resolvedProps); + existingApplications.get(element)!.setProps(resolvedProps); } else { const component = createComponent(Component, element, resolvedProps, client !== 'only'); existingApplications.set(element, component); @@ -52,13 +56,13 @@ export default (element) => { }; }; -/** - * @param {any} Component - * @param {HTMLElement} target - * @param {Record<string, any>} props - * @param {boolean} shouldHydrate - */ -function createComponent(Component, target, props, shouldHydrate) { + +function createComponent( + Component: any, + target: HTMLElement, + props: Record<string, any>, + shouldHydrate: boolean, +) { let propsState = $state(props); const bootstrap = shouldHydrate ? hydrate : mount; if (!shouldHydrate) { @@ -66,7 +70,7 @@ function createComponent(Component, target, props, shouldHydrate) { } const component = bootstrap(Component, { target, props: propsState }); return { - setProps(newProps) { + setProps(newProps: Record<string, any>) { Object.assign(propsState, newProps); // Remove props in `propsState` but not in `newProps` for (const key in propsState) { diff --git a/packages/integrations/svelte/context.js b/packages/integrations/svelte/src/context.ts index faec823a0..833755044 100644 --- a/packages/integrations/svelte/context.js +++ b/packages/integrations/svelte/src/context.ts @@ -1,8 +1,10 @@ -const contexts = new WeakMap(); +import type { SSRResult } from 'astro'; + +const contexts = new WeakMap<SSRResult, { currentIndex: number; readonly id: string }>(); const ID_PREFIX = 's'; -function getContext(rendererContextResult) { +function getContext(rendererContextResult: SSRResult) { if (contexts.has(rendererContextResult)) { return contexts.get(rendererContextResult); } @@ -16,8 +18,8 @@ function getContext(rendererContextResult) { return ctx; } -export function incrementId(rendererContextResult) { - const ctx = getContext(rendererContextResult); +export function incrementId(rendererContextResult: SSRResult) { + const ctx = getContext(rendererContextResult)!; const id = ctx.id; ctx.currentIndex++; return id; diff --git a/packages/integrations/svelte/server.js b/packages/integrations/svelte/src/server.ts index 6ebb62adc..4b0fccb3d 100644 --- a/packages/integrations/svelte/server.js +++ b/packages/integrations/svelte/src/server.ts @@ -1,8 +1,10 @@ +import type { AstroComponentMetadata } from 'astro'; import { createRawSnippet } from 'svelte'; import { render } from 'svelte/server'; import { incrementId } from './context.js'; +import type { RendererContext } from './types.js'; -function check(Component) { +function check(Component: any) { if (typeof Component !== 'function') return false; // Svelte 5 generated components always accept a `$$payload` prop. // This assumes that the SSR build does not minify it (which Astro enforces by default). @@ -11,21 +13,27 @@ function check(Component) { return Component.toString().includes('$$payload'); } -function needsHydration(metadata) { +function needsHydration(metadata: AstroComponentMetadata) { // Adjust how this is hydrated only when the version of Astro supports `astroStaticSlot` return metadata.astroStaticSlot ? !!metadata.hydrate : true; } -async function renderToStaticMarkup(Component, props, slotted, metadata) { +async function renderToStaticMarkup( + this: RendererContext, + Component: any, + props: Record<string, any>, + slotted: Record<string, any>, + metadata: AstroComponentMetadata, +) { const tagName = needsHydration(metadata) ? 'astro-slot' : 'astro-static-slot'; let children = undefined; - let $$slots = undefined; + let $$slots: Record<string, any> | undefined = undefined; let idPrefix; if (this && this.result) { idPrefix = incrementId(this.result); } - const renderProps = {}; + const renderProps: Record<string, any> = {}; for (const [key, value] of Object.entries(slotted)) { // Legacy slot support $$slots ??= {}; diff --git a/packages/integrations/svelte/src/types.ts b/packages/integrations/svelte/src/types.ts new file mode 100644 index 000000000..86834336e --- /dev/null +++ b/packages/integrations/svelte/src/types.ts @@ -0,0 +1,4 @@ +import type { SSRResult } from 'astro'; +export type RendererContext = { + result: SSRResult; +};
\ No newline at end of file |