diff options
Diffstat (limited to 'packages/astro/src')
| -rw-r--r-- | packages/astro/src/@types/astro.ts | 14 | ||||
| -rw-r--r-- | packages/astro/src/config_manager.ts | 3 | ||||
| -rw-r--r-- | packages/astro/src/internal/__astro_component.ts | 32 | ||||
| -rw-r--r-- | packages/astro/src/internal/element-registry.ts | 12 |
4 files changed, 31 insertions, 30 deletions
diff --git a/packages/astro/src/@types/astro.ts b/packages/astro/src/@types/astro.ts index 009eb26ff..026603c05 100644 --- a/packages/astro/src/@types/astro.ts +++ b/packages/astro/src/@types/astro.ts @@ -178,7 +178,19 @@ export interface ComponentInfo { export type Components = Map<string, ComponentInfo>; -type AsyncRendererComponentFn<U> = (Component: any, props: any, children: string | undefined, options?: any) => Promise<U>; +export interface AstroComponentMetadata { + displayName: string; + hydrate?: 'load' | 'idle' | 'visible'; + componentUrl?: string; + componentExport?: { value: string; namespace?: boolean }; +} + +type AsyncRendererComponentFn<U> = ( + Component: any, + props: any, + children: string | undefined, + metadata?: AstroComponentMetadata +) => Promise<U>; export interface Renderer { check: AsyncRendererComponentFn<boolean>; diff --git a/packages/astro/src/config_manager.ts b/packages/astro/src/config_manager.ts index d70cbcd51..8087f58c8 100644 --- a/packages/astro/src/config_manager.ts +++ b/packages/astro/src/config_manager.ts @@ -140,8 +140,7 @@ let rendererInstances = [${renderers .map( (r, i) => `{ source: ${rendererClientPackages[i] ? `"${rendererClientPackages[i]}"` : 'null'}, - renderer: __renderer_${i}, - options: ${r.options ? JSON.stringify(r.options) : 'null'}, + renderer: typeof __renderer_${i} === 'function' ? __renderer_${i}(${r.options ? JSON.stringify(r.options) : 'null'}) : __renderer_${i}, polyfills: ${JSON.stringify(rendererPolyfills[i])}, hydrationPolyfills: ${JSON.stringify(rendererHydrationPolyfills[i])} }` diff --git a/packages/astro/src/internal/__astro_component.ts b/packages/astro/src/internal/__astro_component.ts index 2581b2471..873c1b7d4 100644 --- a/packages/astro/src/internal/__astro_component.ts +++ b/packages/astro/src/internal/__astro_component.ts @@ -1,4 +1,4 @@ -import type { Renderer } from '../@types/astro'; +import type { Renderer, AstroComponentMetadata } from '../@types/astro'; import hash from 'shorthash'; import { valueToEstree, Value } from 'estree-util-value-to-estree'; import { generate } from 'astring'; @@ -12,7 +12,6 @@ const serialize = (value: Value) => generate(valueToEstree(value)); export interface RendererInstance { source: string | null; renderer: Renderer; - options: any; polyfills: string[]; hydrationPolyfills: string[]; } @@ -20,7 +19,6 @@ export interface RendererInstance { const astroRendererInstance: RendererInstance = { source: '', renderer: astro as Renderer, - options: null, polyfills: [], hydrationPolyfills: [], }; @@ -28,7 +26,6 @@ const astroRendererInstance: RendererInstance = { const astroHtmlRendererInstance: RendererInstance = { source: '', renderer: astroHtml as Renderer, - options: null, polyfills: [], hydrationPolyfills: [], }; @@ -53,13 +50,13 @@ async function resolveRenderer(Component: any, props: any = {}, children?: strin const errors: Error[] = []; for (const instance of rendererInstances) { - const { renderer, options } = instance; + const { renderer } = instance; // Yes, we do want to `await` inside of this loop! // __renderer.check can't be run in parallel, it // returns the first match and skips any subsequent checks try { - const shouldUse: boolean = await renderer.check(Component, props, children, options); + const shouldUse: boolean = await renderer.check(Component, props, children); if (shouldUse) { rendererCache.set(Component, instance); @@ -76,13 +73,6 @@ async function resolveRenderer(Component: any, props: any = {}, children?: strin } } -export interface AstroComponentProps { - displayName: string; - hydrate?: 'load' | 'idle' | 'visible'; - componentUrl?: string; - componentExport?: { value: string; namespace?: boolean }; -} - interface HydrateScriptOptions { instance: RendererInstance; astroId: string; @@ -90,7 +80,7 @@ interface HydrateScriptOptions { } /** For hydrated components, generate a <script type="module"> to load the component */ -async function generateHydrateScript({ instance, astroId, props }: HydrateScriptOptions, { hydrate, componentUrl, componentExport }: Required<AstroComponentProps>) { +async function generateHydrateScript({ instance, astroId, props }: HydrateScriptOptions, { hydrate, componentUrl, componentExport }: Required<AstroComponentMetadata>) { const { source } = instance; let hydrationSource = ''; @@ -131,11 +121,11 @@ const getComponentName = (Component: any, componentProps: any) => { } }; -export const __astro_component = (Component: any, componentProps: AstroComponentProps = {} as any) => { +export const __astro_component = (Component: any, metadata: AstroComponentMetadata = {} as any) => { if (Component == null) { - throw new Error(`Unable to render ${componentProps.displayName} because it is ${Component}!\nDid you forget to import the component or is it possible there is a typo?`); + throw new Error(`Unable to render ${metadata.displayName} because it is ${Component}!\nDid you forget to import the component or is it possible there is a typo?`); } else if (typeof Component === 'string' && !isCustomElementTag(Component)) { - throw new Error(`Astro is unable to render ${componentProps.displayName}!\nIs there a renderer to handle this type of component defined in your Astro config?`); + throw new Error(`Astro is unable to render ${metadata.displayName}!\nIs there a renderer to handle this type of component defined in your Astro config?`); } return async (props: any, ..._children: string[]) => { @@ -152,11 +142,11 @@ export const __astro_component = (Component: any, componentProps: AstroComponent } if (!instance) { - const name = getComponentName(Component, componentProps); + const name = getComponentName(Component, metadata); throw new Error(`No renderer found for ${name}! Did you forget to add a renderer to your Astro config?`); } } - let { html } = await instance.renderer.renderToStaticMarkup(Component, props, children, instance.options); + let { html } = await instance.renderer.renderToStaticMarkup(Component, props, children, metadata); if (instance.polyfills.length) { let polyfillScripts = instance.polyfills.map((src) => `<script type="module" src="${src}"></script>`).join(''); @@ -164,14 +154,14 @@ export const __astro_component = (Component: any, componentProps: AstroComponent } // If we're NOT hydrating this component, just return the HTML - if (!componentProps.hydrate) { + if (!metadata.hydrate) { // It's safe to remove <astro-fragment>, static content doesn't need the wrapper return html.replace(/\<\/?astro-fragment\>/g, ''); } // If we ARE hydrating this component, let's generate the hydration script const astroId = hash.unique(html); - const script = await generateHydrateScript({ instance, astroId, props }, componentProps as Required<AstroComponentProps>); + const script = await generateHydrateScript({ instance, astroId, props }, metadata as Required<AstroComponentMetadata>); const astroRoot = `<astro-root uid="${astroId}">${html}</astro-root>`; return [astroRoot, script].join('\n'); }; diff --git a/packages/astro/src/internal/element-registry.ts b/packages/astro/src/internal/element-registry.ts index 2b9ac1cbf..a0124523f 100644 --- a/packages/astro/src/internal/element-registry.ts +++ b/packages/astro/src/internal/element-registry.ts @@ -1,4 +1,4 @@ -import type { AstroComponentProps } from './__astro_component'; +import type { AstroComponentMetadata } from '../@types/astro'; type ModuleCandidates = Map<any, string>; @@ -35,13 +35,13 @@ class AstroElementRegistry { return specifier; } - astroComponentArgs(tagName: string, props: AstroComponentProps) { + astroComponentArgs(tagName: string, metadata: AstroComponentMetadata) { const specifier = this.findCached(tagName); - const outProps: AstroComponentProps = { - ...props, - componentUrl: specifier || props.componentUrl, + const outMeta: AstroComponentMetadata = { + ...metadata, + componentUrl: specifier || metadata.componentUrl, }; - return [tagName, outProps]; + return [tagName, outMeta]; } } |