[ci] yarn format
This commit is contained in:
parent
643c880f28
commit
5fa7e354b3
26 changed files with 159 additions and 192 deletions
|
@ -9,10 +9,11 @@ Updated the rendering pipeline for `astro` to truly support any framework.
|
||||||
For the vast majority of use cases, `astro` should _just work_ out of the box. Astro now depends on `@astro-renderer/preact`, `@astro-renderer/react`, `@astro-renderer/svelte`, and `@astro-renderer/vue`, rather than these being built into the core library. This opens the door for anyone to contribute additional renderers for Astro to support their favorite framework, as well as the ability for users to control which renderers should be used.
|
For the vast majority of use cases, `astro` should _just work_ out of the box. Astro now depends on `@astro-renderer/preact`, `@astro-renderer/react`, `@astro-renderer/svelte`, and `@astro-renderer/vue`, rather than these being built into the core library. This opens the door for anyone to contribute additional renderers for Astro to support their favorite framework, as well as the ability for users to control which renderers should be used.
|
||||||
|
|
||||||
**Features**
|
**Features**
|
||||||
|
|
||||||
- Expose a pluggable interface for controlling server-side rendering and client-side hydration
|
- Expose a pluggable interface for controlling server-side rendering and client-side hydration
|
||||||
- Allows components from different frameworks to be nested within each other.
|
- Allows components from different frameworks to be nested within each other.
|
||||||
> Note: `svelte` currently does support non-destructive hydration, so components from other frameworks cannot currently be nested inside of a Svelte component. See https://github.com/sveltejs/svelte/issues/4308.
|
> Note: `svelte` currently does support non-destructive hydration, so components from other frameworks cannot currently be nested inside of a Svelte component. See https://github.com/sveltejs/svelte/issues/4308.
|
||||||
|
|
||||||
**Breaking Changes**
|
**Breaking Changes**
|
||||||
- To improve compiler performance, improve framework support, and minimize JS payloads, any children passed to hydrated components are automatically wrapped with an `<astro-fragment>` element.
|
|
||||||
|
|
||||||
|
- To improve compiler performance, improve framework support, and minimize JS payloads, any children passed to hydrated components are automatically wrapped with an `<astro-fragment>` element.
|
||||||
|
|
|
@ -3,38 +3,7 @@
|
||||||
import entities from './entities.js';
|
import entities from './entities.js';
|
||||||
|
|
||||||
const windows_1252 = [
|
const windows_1252 = [
|
||||||
8364,
|
8364, 129, 8218, 402, 8222, 8230, 8224, 8225, 710, 8240, 352, 8249, 338, 141, 381, 143, 144, 8216, 8217, 8220, 8221, 8226, 8211, 8212, 732, 8482, 353, 8250, 339, 157, 382, 376,
|
||||||
129,
|
|
||||||
8218,
|
|
||||||
402,
|
|
||||||
8222,
|
|
||||||
8230,
|
|
||||||
8224,
|
|
||||||
8225,
|
|
||||||
710,
|
|
||||||
8240,
|
|
||||||
352,
|
|
||||||
8249,
|
|
||||||
338,
|
|
||||||
141,
|
|
||||||
381,
|
|
||||||
143,
|
|
||||||
144,
|
|
||||||
8216,
|
|
||||||
8217,
|
|
||||||
8220,
|
|
||||||
8221,
|
|
||||||
8226,
|
|
||||||
8211,
|
|
||||||
8212,
|
|
||||||
732,
|
|
||||||
8482,
|
|
||||||
353,
|
|
||||||
8250,
|
|
||||||
339,
|
|
||||||
157,
|
|
||||||
382,
|
|
||||||
376,
|
|
||||||
];
|
];
|
||||||
|
|
||||||
const entity_pattern = new RegExp(`&(#?(?:x[\\w\\d]+|\\d+|${Object.keys(entities).join('|')}))(?:;|\\b)`, 'g');
|
const entity_pattern = new RegExp(`&(#?(?:x[\\w\\d]+|\\d+|${Object.keys(entities).join('|')}))(?:;|\\b)`, 'g');
|
||||||
|
|
|
@ -125,9 +125,7 @@ export interface CollectionRSS<T = any> {
|
||||||
/** Specify custom data in opening of file */
|
/** Specify custom data in opening of file */
|
||||||
customData?: string;
|
customData?: string;
|
||||||
/** Return data about each item */
|
/** Return data about each item */
|
||||||
item: (
|
item: (item: T) => {
|
||||||
item: T
|
|
||||||
) => {
|
|
||||||
/** (required) Title of item */
|
/** (required) Title of item */
|
||||||
title: string;
|
title: string;
|
||||||
/** (required) Link to item */
|
/** (required) Link to item */
|
||||||
|
|
|
@ -1 +1 @@
|
||||||
export type GetHydrateCallback = () => Promise<(element: Element, innerHTML: string|null) => void>;
|
export type GetHydrateCallback = () => Promise<(element: Element, innerHTML: string | null) => void>;
|
||||||
|
|
|
@ -103,6 +103,6 @@ export async function buildStaticPage({ astroConfig, buildState, filepath, runti
|
||||||
contentType: 'text/html',
|
contentType: 'text/html',
|
||||||
encoding: 'utf8',
|
encoding: 'utf8',
|
||||||
};
|
};
|
||||||
})
|
}),
|
||||||
]);
|
]);
|
||||||
}
|
}
|
||||||
|
|
|
@ -146,7 +146,8 @@ function getComponentWrapper(_name: string, { url, importSpecifier }: ComponentI
|
||||||
};
|
};
|
||||||
const getComponentExport = () => {
|
const getComponentExport = () => {
|
||||||
switch (importSpecifier.type) {
|
switch (importSpecifier.type) {
|
||||||
case 'ImportDefaultSpecifier': return { value: 'default' };
|
case 'ImportDefaultSpecifier':
|
||||||
|
return { value: 'default' };
|
||||||
case 'ImportSpecifier': {
|
case 'ImportSpecifier': {
|
||||||
if (importSpecifier.imported.type === 'Identifier') {
|
if (importSpecifier.imported.type === 'Identifier') {
|
||||||
return { value: importSpecifier.imported.name };
|
return { value: importSpecifier.imported.name };
|
||||||
|
@ -158,13 +159,13 @@ function getComponentWrapper(_name: string, { url, importSpecifier }: ComponentI
|
||||||
return { value };
|
return { value };
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
};
|
||||||
|
|
||||||
const importInfo = kind ? { componentUrl: getComponentUrl(), componentExport: getComponentExport() } : {};
|
const importInfo = kind ? { componentUrl: getComponentUrl(), componentExport: getComponentExport() } : {};
|
||||||
return {
|
return {
|
||||||
wrapper: `__astro_component(${name}, ${JSON.stringify({ hydrate: kind, displayName: name, ...importInfo })})`,
|
wrapper: `__astro_component(${name}, ${JSON.stringify({ hydrate: kind, displayName: name, ...importInfo })})`,
|
||||||
wrapperImport: `import {__astro_component} from '${internalImport('__astro_component.js')}';`,
|
wrapperImport: `import {__astro_component} from '${internalImport('__astro_component.js')}';`,
|
||||||
}
|
};
|
||||||
}
|
}
|
||||||
|
|
||||||
/** Evaluate expression (safely) */
|
/** Evaluate expression (safely) */
|
||||||
|
|
|
@ -16,7 +16,7 @@ export default function (): Transformer {
|
||||||
if (kind && !hasComponents) {
|
if (kind && !hasComponents) {
|
||||||
hasComponents = true;
|
hasComponents = true;
|
||||||
}
|
}
|
||||||
}
|
},
|
||||||
},
|
},
|
||||||
Element: {
|
Element: {
|
||||||
enter(node) {
|
enter(node) {
|
||||||
|
@ -30,10 +30,11 @@ export default function (): Transformer {
|
||||||
body = node;
|
body = node;
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
default: return;
|
default:
|
||||||
|
return;
|
||||||
}
|
}
|
||||||
}
|
},
|
||||||
}
|
},
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
async finalize() {
|
async finalize() {
|
||||||
|
@ -42,9 +43,7 @@ export default function (): Transformer {
|
||||||
const style: TemplateNode = {
|
const style: TemplateNode = {
|
||||||
type: 'Element',
|
type: 'Element',
|
||||||
name: 'style',
|
name: 'style',
|
||||||
attributes: [
|
attributes: [{ name: 'type', type: 'Attribute', value: [{ type: 'Text', raw: 'text/css', data: 'text/css' }] }],
|
||||||
{ name: 'type', type: 'Attribute', value: [{ type: 'Text', raw: 'text/css', data: 'text/css' }] },
|
|
||||||
],
|
|
||||||
start: 0,
|
start: 0,
|
||||||
end: 0,
|
end: 0,
|
||||||
children: [
|
children: [
|
||||||
|
@ -53,9 +52,9 @@ export default function (): Transformer {
|
||||||
end: 0,
|
end: 0,
|
||||||
type: 'Text',
|
type: 'Text',
|
||||||
data: 'astro-root, astro-fragment { display: contents; }',
|
data: 'astro-root, astro-fragment { display: contents; }',
|
||||||
raw: 'astro-root, astro-fragment { display: contents; }'
|
raw: 'astro-root, astro-fragment { display: contents; }',
|
||||||
}
|
},
|
||||||
]
|
],
|
||||||
};
|
};
|
||||||
head.children = [...(head.children ?? []), style];
|
head.children = [...(head.children ?? []), style];
|
||||||
},
|
},
|
||||||
|
|
|
@ -7,17 +7,17 @@ import * as astro from './renderer-astro';
|
||||||
// see https://github.com/remcohaszing/estree-util-value-to-estree#readme
|
// see https://github.com/remcohaszing/estree-util-value-to-estree#readme
|
||||||
const serialize = (value: Value) => generate(valueToEstree(value));
|
const serialize = (value: Value) => generate(valueToEstree(value));
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* These values are dynamically injected by Snowpack.
|
* These values are dynamically injected by Snowpack.
|
||||||
* See comment in `snowpack-plugin.cjs`!
|
* See comment in `snowpack-plugin.cjs`!
|
||||||
*
|
*
|
||||||
* In a world where Snowpack supports virtual files, this won't be necessary.
|
* In a world where Snowpack supports virtual files, this won't be necessary.
|
||||||
* It would ideally look something like:
|
* It would ideally look something like:
|
||||||
*
|
*
|
||||||
* ```ts
|
* ```ts
|
||||||
* import { __rendererSources, __renderers } from "virtual:astro/runtime"
|
* import { __rendererSources, __renderers } from "virtual:astro/runtime"
|
||||||
* ```
|
* ```
|
||||||
*/
|
*/
|
||||||
declare let __rendererSources: string[];
|
declare let __rendererSources: string[];
|
||||||
declare let __renderers: any[];
|
declare let __renderers: any[];
|
||||||
|
|
||||||
|
@ -33,7 +33,7 @@ function resolveRenderer(Component: any, props: any = {}) {
|
||||||
}
|
}
|
||||||
|
|
||||||
for (const __renderer of __renderers) {
|
for (const __renderer of __renderers) {
|
||||||
const shouldUse = __renderer.check(Component, props)
|
const shouldUse = __renderer.check(Component, props);
|
||||||
if (shouldUse) {
|
if (shouldUse) {
|
||||||
rendererCache.set(Component, __renderer);
|
rendererCache.set(Component, __renderer);
|
||||||
return __renderer;
|
return __renderer;
|
||||||
|
@ -43,15 +43,14 @@ function resolveRenderer(Component: any, props: any = {}) {
|
||||||
|
|
||||||
interface AstroComponentProps {
|
interface AstroComponentProps {
|
||||||
displayName: string;
|
displayName: string;
|
||||||
hydrate?: 'load'|'idle'|'visible';
|
hydrate?: 'load' | 'idle' | 'visible';
|
||||||
componentUrl?: string;
|
componentUrl?: string;
|
||||||
componentExport?: { value: string, namespace?: boolean };
|
componentExport?: { value: string; namespace?: boolean };
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
/** For hydrated components, generate a <script type="module"> to load the component */
|
/** For hydrated components, generate a <script type="module"> to load the component */
|
||||||
async function generateHydrateScript({ renderer, astroId, props }: any, { hydrate, componentUrl, componentExport }: Required<AstroComponentProps>) {
|
async function generateHydrateScript({ renderer, astroId, props }: any, { hydrate, componentUrl, componentExport }: Required<AstroComponentProps>) {
|
||||||
const rendererSource = __rendererSources[__renderers.findIndex(r => r === renderer)];
|
const rendererSource = __rendererSources[__renderers.findIndex((r) => r === renderer)];
|
||||||
|
|
||||||
const script = `<script type="module">
|
const script = `<script type="module">
|
||||||
import setup from '/_astro_internal/hydrate/${hydrate}.js';
|
import setup from '/_astro_internal/hydrate/${hydrate}.js';
|
||||||
|
@ -64,8 +63,7 @@ setup("${astroId}", async () => {
|
||||||
return script;
|
return script;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
export const __astro_component = (Component: any, componentProps: AstroComponentProps = {} as any) => {
|
||||||
export const __astro_component = (Component: any, componentProps: AstroComponentProps = {} as any) => {
|
|
||||||
if (Component == null) {
|
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 <${componentProps.displayName}> because it is ${Component}!\nDid you forget to import the component or is it possible there is a typo?`);
|
||||||
}
|
}
|
||||||
|
@ -73,28 +71,28 @@ export const __astro_component = (Component: any, componentProps: AstroComponent
|
||||||
let renderer = resolveRenderer(Component);
|
let renderer = resolveRenderer(Component);
|
||||||
|
|
||||||
return async (props: any, ..._children: string[]) => {
|
return async (props: any, ..._children: string[]) => {
|
||||||
if (!renderer) {
|
if (!renderer) {
|
||||||
// Second attempt at resolving a renderer (this time we have props!)
|
// Second attempt at resolving a renderer (this time we have props!)
|
||||||
renderer = resolveRenderer(Component, props);
|
renderer = resolveRenderer(Component, props);
|
||||||
|
|
||||||
// Okay now we definitely can't resolve a renderer, so let's throw
|
// Okay now we definitely can't resolve a renderer, so let's throw
|
||||||
if (!renderer) {
|
if (!renderer) {
|
||||||
const name = typeof Component === 'function' ? (Component.displayName ?? Component.name) : `{ ${Object.keys(Component).join(', ')} }`;
|
const name = typeof Component === 'function' ? Component.displayName ?? Component.name : `{ ${Object.keys(Component).join(', ')} }`;
|
||||||
throw new Error(`No renderer found for ${name}! Did you forget to add a renderer to your Astro config?`);
|
throw new Error(`No renderer found for ${name}! Did you forget to add a renderer to your Astro config?`);
|
||||||
}
|
|
||||||
}
|
}
|
||||||
const children = _children.join('\n');
|
}
|
||||||
const { html } = await renderer.renderToStaticMarkup(Component, props, children);
|
const children = _children.join('\n');
|
||||||
// If we're NOT hydrating this component, just return the HTML
|
const { html } = await renderer.renderToStaticMarkup(Component, props, children);
|
||||||
if (!componentProps.hydrate) {
|
// If we're NOT hydrating this component, just return the HTML
|
||||||
// It's safe to remove <astro-fragment>, static content doesn't need the wrapper
|
if (!componentProps.hydrate) {
|
||||||
return html.replace(/\<\/?astro-fragment\>/g, '');
|
// 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);
|
// If we ARE hydrating this component, let's generate the hydration script
|
||||||
const script = await generateHydrateScript({ renderer, astroId, props }, componentProps as Required<AstroComponentProps>)
|
const astroId = hash.unique(html);
|
||||||
const astroRoot = `<astro-root uid="${astroId}">${html}</astro-root>`;
|
const script = await generateHydrateScript({ renderer, astroId, props }, componentProps as Required<AstroComponentProps>);
|
||||||
return [astroRoot, script].join('\n');
|
const astroRoot = `<astro-root uid="${astroId}">${html}</astro-root>`;
|
||||||
}
|
return [astroRoot, script].join('\n');
|
||||||
}
|
};
|
||||||
|
};
|
||||||
|
|
|
@ -4,5 +4,5 @@ export function check(Component: any) {
|
||||||
|
|
||||||
export async function renderToStaticMarkup(Component: any, props: any, children: string) {
|
export async function renderToStaticMarkup(Component: any, props: any, children: string) {
|
||||||
const html = await Component.__render(props, children);
|
const html = await Component.__render(props, children);
|
||||||
return { html }
|
return { html };
|
||||||
};
|
}
|
||||||
|
|
|
@ -266,12 +266,7 @@ interface CreateSnowpackOptions {
|
||||||
resolvePackageUrl?: (pkgName: string) => Promise<string>;
|
resolvePackageUrl?: (pkgName: string) => Promise<string>;
|
||||||
}
|
}
|
||||||
|
|
||||||
const defaultRenderers = [
|
const defaultRenderers = ['@astro-renderer/vue', '@astro-renderer/svelte', '@astro-renderer/react', '@astro-renderer/preact'];
|
||||||
'@astro-renderer/vue',
|
|
||||||
'@astro-renderer/svelte',
|
|
||||||
'@astro-renderer/react',
|
|
||||||
'@astro-renderer/preact'
|
|
||||||
];
|
|
||||||
|
|
||||||
/** Create a new Snowpack instance to power Astro */
|
/** Create a new Snowpack instance to power Astro */
|
||||||
async function createSnowpack(astroConfig: AstroConfig, options: CreateSnowpackOptions) {
|
async function createSnowpack(astroConfig: AstroConfig, options: CreateSnowpackOptions) {
|
||||||
|
@ -284,7 +279,7 @@ async function createSnowpack(astroConfig: AstroConfig, options: CreateSnowpackO
|
||||||
let snowpack: SnowpackDevServer;
|
let snowpack: SnowpackDevServer;
|
||||||
let astroPluginOptions: {
|
let astroPluginOptions: {
|
||||||
resolvePackageUrl?: (s: string) => Promise<string>;
|
resolvePackageUrl?: (s: string) => Promise<string>;
|
||||||
renderers?: { name: string, client: string, server: string }[];
|
renderers?: { name: string; client: string; server: string }[];
|
||||||
astroConfig: AstroConfig;
|
astroConfig: AstroConfig;
|
||||||
} = {
|
} = {
|
||||||
astroConfig,
|
astroConfig,
|
||||||
|
@ -305,42 +300,41 @@ async function createSnowpack(astroConfig: AstroConfig, options: CreateSnowpackO
|
||||||
(process.env as any).TAILWIND_DISABLE_TOUCH = true;
|
(process.env as any).TAILWIND_DISABLE_TOUCH = true;
|
||||||
}
|
}
|
||||||
|
|
||||||
const rendererInstances = (await Promise.all(renderers.map(renderer => import(pathToFileURL(resolveDependency(renderer)).toString()))))
|
const rendererInstances = (await Promise.all(renderers.map((renderer) => import(pathToFileURL(resolveDependency(renderer)).toString())))).map(({ default: raw }, i) => {
|
||||||
.map(({ default: raw }, i) => {
|
const { name = renderers[i], client, server, snowpackPlugin: snowpackPluginName, snowpackPluginOptions } = raw;
|
||||||
const { name = renderers[i], client, server, snowpackPlugin: snowpackPluginName, snowpackPluginOptions } = raw;
|
|
||||||
|
|
||||||
if (typeof client !== 'string') {
|
if (typeof client !== 'string') {
|
||||||
throw new Error(`Expected "client" from ${name} to be a relative path to the client-side renderer!`);
|
throw new Error(`Expected "client" from ${name} to be a relative path to the client-side renderer!`);
|
||||||
}
|
}
|
||||||
|
|
||||||
if (typeof server !== 'string') {
|
if (typeof server !== 'string') {
|
||||||
throw new Error(`Expected "server" from ${name} to be a relative path to the server-side renderer!`);
|
throw new Error(`Expected "server" from ${name} to be a relative path to the server-side renderer!`);
|
||||||
}
|
}
|
||||||
|
|
||||||
let snowpackPlugin: string|[string, any]|undefined;
|
|
||||||
if (typeof snowpackPluginName === 'string') {
|
|
||||||
if (snowpackPluginOptions) {
|
|
||||||
snowpackPlugin = [resolveDependency(snowpackPluginName), snowpackPluginOptions]
|
|
||||||
} else {
|
|
||||||
snowpackPlugin = resolveDependency(snowpackPluginName);
|
|
||||||
}
|
|
||||||
} else if (snowpackPluginName) {
|
|
||||||
throw new Error(`Expected the snowpackPlugin from ${name} to be a "string" but encountered "${typeof snowpackPluginName}"!`);
|
|
||||||
}
|
|
||||||
|
|
||||||
return {
|
let snowpackPlugin: string | [string, any] | undefined;
|
||||||
name,
|
if (typeof snowpackPluginName === 'string') {
|
||||||
snowpackPlugin,
|
if (snowpackPluginOptions) {
|
||||||
client: path.join(name, raw.client),
|
snowpackPlugin = [resolveDependency(snowpackPluginName), snowpackPluginOptions];
|
||||||
server: path.join(name, raw.server),
|
} else {
|
||||||
|
snowpackPlugin = resolveDependency(snowpackPluginName);
|
||||||
}
|
}
|
||||||
})
|
} else if (snowpackPluginName) {
|
||||||
|
throw new Error(`Expected the snowpackPlugin from ${name} to be a "string" but encountered "${typeof snowpackPluginName}"!`);
|
||||||
|
}
|
||||||
|
|
||||||
|
return {
|
||||||
|
name,
|
||||||
|
snowpackPlugin,
|
||||||
|
client: path.join(name, raw.client),
|
||||||
|
server: path.join(name, raw.server),
|
||||||
|
};
|
||||||
|
});
|
||||||
|
|
||||||
astroPluginOptions.renderers = rendererInstances;
|
astroPluginOptions.renderers = rendererInstances;
|
||||||
|
|
||||||
// Make sure that Snowpack builds our renderer plugins
|
// Make sure that Snowpack builds our renderer plugins
|
||||||
const knownEntrypoints = [].concat(...rendererInstances.map(renderer => [renderer.server, renderer.client]) as any) as string[];
|
const knownEntrypoints = [].concat(...(rendererInstances.map((renderer) => [renderer.server, renderer.client]) as any)) as string[];
|
||||||
const rendererSnowpackPlugins = rendererInstances.filter(renderer => renderer.snowpackPlugin).map(renderer => renderer.snowpackPlugin) as string|[string, any];
|
const rendererSnowpackPlugins = rendererInstances.filter((renderer) => renderer.snowpackPlugin).map((renderer) => renderer.snowpackPlugin) as string | [string, any];
|
||||||
|
|
||||||
const snowpackConfig = await loadConfiguration({
|
const snowpackConfig = await loadConfiguration({
|
||||||
root: fileURLToPath(projectRoot),
|
root: fileURLToPath(projectRoot),
|
||||||
|
@ -395,7 +389,11 @@ export async function createRuntime(astroConfig: AstroConfig, { mode, logging }:
|
||||||
const resolvePackageUrl = async (pkgName: string) => frontendSnowpack.getUrlForPackage(pkgName);
|
const resolvePackageUrl = async (pkgName: string) => frontendSnowpack.getUrlForPackage(pkgName);
|
||||||
|
|
||||||
timer.backend = performance.now();
|
timer.backend = performance.now();
|
||||||
const { snowpack: backendSnowpack, snowpackRuntime: backendSnowpackRuntime, snowpackConfig: backendSnowpackConfig } = await createSnowpack(astroConfig, {
|
const {
|
||||||
|
snowpack: backendSnowpack,
|
||||||
|
snowpackRuntime: backendSnowpackRuntime,
|
||||||
|
snowpackConfig: backendSnowpackConfig,
|
||||||
|
} = await createSnowpack(astroConfig, {
|
||||||
env: {
|
env: {
|
||||||
astro: true,
|
astro: true,
|
||||||
},
|
},
|
||||||
|
@ -405,7 +403,11 @@ export async function createRuntime(astroConfig: AstroConfig, { mode, logging }:
|
||||||
debug(logging, 'core', `backend snowpack created [${stopTimer(timer.backend)}]`);
|
debug(logging, 'core', `backend snowpack created [${stopTimer(timer.backend)}]`);
|
||||||
|
|
||||||
timer.frontend = performance.now();
|
timer.frontend = performance.now();
|
||||||
const { snowpack: frontendSnowpack, snowpackRuntime: frontendSnowpackRuntime, snowpackConfig: frontendSnowpackConfig } = await createSnowpack(astroConfig, {
|
const {
|
||||||
|
snowpack: frontendSnowpack,
|
||||||
|
snowpackRuntime: frontendSnowpackRuntime,
|
||||||
|
snowpackConfig: frontendSnowpackConfig,
|
||||||
|
} = await createSnowpack(astroConfig, {
|
||||||
env: {
|
env: {
|
||||||
astro: false,
|
astro: false,
|
||||||
},
|
},
|
||||||
|
|
|
@ -2,4 +2,4 @@ export default {
|
||||||
name: '@astro-renderer/preact',
|
name: '@astro-renderer/preact',
|
||||||
client: './client',
|
client: './client',
|
||||||
server: './server',
|
server: './server',
|
||||||
}
|
};
|
||||||
|
|
|
@ -7,14 +7,14 @@ function check(Component, props) {
|
||||||
return Boolean(renderToString(h(Component, props)));
|
return Boolean(renderToString(h(Component, props)));
|
||||||
} catch (e) {}
|
} catch (e) {}
|
||||||
return false;
|
return false;
|
||||||
};
|
}
|
||||||
|
|
||||||
function renderToStaticMarkup(Component, props, children) {
|
function renderToStaticMarkup(Component, props, children) {
|
||||||
const html = renderToString(h(Component, props, h(StaticHtml, { value: children })))
|
const html = renderToString(h(Component, props, h(StaticHtml, { value: children })));
|
||||||
return { html };
|
return { html };
|
||||||
}
|
}
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
check,
|
check,
|
||||||
renderToStaticMarkup
|
renderToStaticMarkup,
|
||||||
}
|
};
|
||||||
|
|
|
@ -9,16 +9,16 @@ import { h } from 'preact';
|
||||||
*/
|
*/
|
||||||
const StaticHtml = ({ value }) => {
|
const StaticHtml = ({ value }) => {
|
||||||
if (!value) return null;
|
if (!value) return null;
|
||||||
return h('astro-fragment', { dangerouslySetInnerHTML: { __html: value }});
|
return h('astro-fragment', { dangerouslySetInnerHTML: { __html: value } });
|
||||||
}
|
};
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* This tells Preact to opt-out of re-rendering this subtree,
|
* This tells Preact to opt-out of re-rendering this subtree,
|
||||||
* In addition to being a performance optimization,
|
* In addition to being a performance optimization,
|
||||||
* this also allows other frameworks to attach to `children`.
|
* this also allows other frameworks to attach to `children`.
|
||||||
*
|
*
|
||||||
* See https://preactjs.com/guide/v8/external-dom-mutations
|
* See https://preactjs.com/guide/v8/external-dom-mutations
|
||||||
*/
|
*/
|
||||||
StaticHtml.shouldComponentUpdate = () => false;
|
StaticHtml.shouldComponentUpdate = () => false;
|
||||||
|
|
||||||
export default StaticHtml;
|
export default StaticHtml;
|
||||||
|
|
|
@ -2,4 +2,5 @@ import { createElement } from 'react';
|
||||||
import { hydrate } from 'react-dom';
|
import { hydrate } from 'react-dom';
|
||||||
import StaticHtml from './static-html.js';
|
import StaticHtml from './static-html.js';
|
||||||
|
|
||||||
export default (element) => (Component, props, children) => hydrate(createElement(Component, { ...props, suppressHydrationWarning: true }, createElement(StaticHtml, { value: children, suppressHydrationWarning: true })), element);
|
export default (element) => (Component, props, children) =>
|
||||||
|
hydrate(createElement(Component, { ...props, suppressHydrationWarning: true }, createElement(StaticHtml, { value: children, suppressHydrationWarning: true })), element);
|
||||||
|
|
|
@ -2,4 +2,4 @@ export default {
|
||||||
name: '@astro-renderer/react',
|
name: '@astro-renderer/react',
|
||||||
client: './client',
|
client: './client',
|
||||||
server: './server',
|
server: './server',
|
||||||
}
|
};
|
||||||
|
|
|
@ -7,14 +7,14 @@ function check(Component, props) {
|
||||||
return Boolean(renderToString(h(Component, props)));
|
return Boolean(renderToString(h(Component, props)));
|
||||||
} catch (e) {}
|
} catch (e) {}
|
||||||
return false;
|
return false;
|
||||||
};
|
}
|
||||||
|
|
||||||
function renderToStaticMarkup(Component, props, children) {
|
function renderToStaticMarkup(Component, props, children) {
|
||||||
const html = renderToString(h(Component, props, h(StaticHtml, { value: children })))
|
const html = renderToString(h(Component, props, h(StaticHtml, { value: children })));
|
||||||
return { html };
|
return { html };
|
||||||
}
|
}
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
check,
|
check,
|
||||||
renderToStaticMarkup
|
renderToStaticMarkup,
|
||||||
};
|
};
|
||||||
|
|
|
@ -9,16 +9,16 @@ import { createElement as h } from 'react';
|
||||||
*/
|
*/
|
||||||
const StaticHtml = ({ value }) => {
|
const StaticHtml = ({ value }) => {
|
||||||
if (!value) return null;
|
if (!value) return null;
|
||||||
return h('astro-fragment', { suppressHydrationWarning: true, dangerouslySetInnerHTML: { __html: value }});
|
return h('astro-fragment', { suppressHydrationWarning: true, dangerouslySetInnerHTML: { __html: value } });
|
||||||
}
|
};
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* This tells React to opt-out of re-rendering this subtree,
|
* This tells React to opt-out of re-rendering this subtree,
|
||||||
* In addition to being a performance optimization,
|
* In addition to being a performance optimization,
|
||||||
* this also allows other frameworks to attach to `children`.
|
* this also allows other frameworks to attach to `children`.
|
||||||
*
|
*
|
||||||
* See https://preactjs.com/guide/v8/external-dom-mutations
|
* See https://preactjs.com/guide/v8/external-dom-mutations
|
||||||
*/
|
*/
|
||||||
StaticHtml.shouldComponentUpdate = () => false;
|
StaticHtml.shouldComponentUpdate = () => false;
|
||||||
|
|
||||||
export default StaticHtml;
|
export default StaticHtml;
|
||||||
|
|
|
@ -7,7 +7,7 @@ export default (target) => {
|
||||||
target,
|
target,
|
||||||
props: { __astro_component: component, __astro_children: children, ...props },
|
props: { __astro_component: component, __astro_children: children, ...props },
|
||||||
hydrate: true,
|
hydrate: true,
|
||||||
});
|
});
|
||||||
} catch (e) {}
|
} catch (e) {}
|
||||||
}
|
};
|
||||||
}
|
};
|
||||||
|
|
|
@ -3,5 +3,5 @@ export default {
|
||||||
snowpackPlugin: '@snowpack/plugin-svelte',
|
snowpackPlugin: '@snowpack/plugin-svelte',
|
||||||
snowpackPluginOptions: { compilerOptions: { hydratable: true } },
|
snowpackPluginOptions: { compilerOptions: { hydratable: true } },
|
||||||
client: './client',
|
client: './client',
|
||||||
server: './server'
|
server: './server',
|
||||||
};
|
};
|
||||||
|
|
|
@ -1,15 +1,15 @@
|
||||||
import SvelteWrapper from './Wrapper.svelte';
|
import SvelteWrapper from './Wrapper.svelte';
|
||||||
|
|
||||||
function check(Component) {
|
function check(Component) {
|
||||||
return Component['render'] && Component['$$render'];
|
return Component['render'] && Component['$$render'];
|
||||||
}
|
}
|
||||||
|
|
||||||
async function renderToStaticMarkup (Component, props, children) {
|
async function renderToStaticMarkup(Component, props, children) {
|
||||||
const { html } = SvelteWrapper.render({ __astro_component: Component, __astro_children: children, ...props });
|
const { html } = SvelteWrapper.render({ __astro_component: Component, __astro_children: children, ...props });
|
||||||
return { html };
|
return { html };
|
||||||
}
|
}
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
check,
|
check,
|
||||||
renderToStaticMarkup
|
renderToStaticMarkup,
|
||||||
};
|
};
|
||||||
|
|
|
@ -2,6 +2,6 @@ import { h, createSSRApp } from 'vue';
|
||||||
import StaticHtml from './static-html.js';
|
import StaticHtml from './static-html.js';
|
||||||
|
|
||||||
export default (element) => (Component, props, children) => {
|
export default (element) => (Component, props, children) => {
|
||||||
const app = createSSRApp({ render: () => h(Component, props, { default: () => h(StaticHtml, { value: children }) })});
|
const app = createSSRApp({ render: () => h(Component, props, { default: () => h(StaticHtml, { value: children }) }) });
|
||||||
app.mount(element, true);
|
app.mount(element, true);
|
||||||
};
|
};
|
||||||
|
|
|
@ -2,5 +2,5 @@ export default {
|
||||||
name: '@astro-renderer/vue',
|
name: '@astro-renderer/vue',
|
||||||
snowpackPlugin: '@snowpack/plugin-vue',
|
snowpackPlugin: '@snowpack/plugin-vue',
|
||||||
client: './client',
|
client: './client',
|
||||||
server: './server'
|
server: './server',
|
||||||
};
|
};
|
||||||
|
|
|
@ -7,12 +7,12 @@ function check(Component) {
|
||||||
}
|
}
|
||||||
|
|
||||||
async function renderToStaticMarkup(Component, props, children) {
|
async function renderToStaticMarkup(Component, props, children) {
|
||||||
const app = createSSRApp({ render: () => h(Component, props, { default: () => h(StaticHtml, { value: children }) })});
|
const app = createSSRApp({ render: () => h(Component, props, { default: () => h(StaticHtml, { value: children }) }) });
|
||||||
const html = await renderToString(app);
|
const html = await renderToString(app);
|
||||||
return { html };
|
return { html };
|
||||||
}
|
}
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
check,
|
check,
|
||||||
renderToStaticMarkup
|
renderToStaticMarkup,
|
||||||
}
|
};
|
||||||
|
|
|
@ -8,20 +8,20 @@ import { h, defineComponent } from 'vue';
|
||||||
*/
|
*/
|
||||||
const StaticHtml = defineComponent({
|
const StaticHtml = defineComponent({
|
||||||
props: {
|
props: {
|
||||||
value: String
|
value: String,
|
||||||
},
|
},
|
||||||
setup({ value }) {
|
setup({ value }) {
|
||||||
if (!value) return () => null;
|
if (!value) return () => null;
|
||||||
return () => h('astro-fragment', { innerHTML: value })
|
return () => h('astro-fragment', { innerHTML: value });
|
||||||
}
|
},
|
||||||
})
|
});
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* Other frameworks have `shouldComponentUpdate` in order to signal
|
* Other frameworks have `shouldComponentUpdate` in order to signal
|
||||||
* that this subtree is entirely static and will not be updated
|
* that this subtree is entirely static and will not be updated
|
||||||
*
|
*
|
||||||
* Fortunately, Vue is smart enough to figure that out without any
|
* Fortunately, Vue is smart enough to figure that out without any
|
||||||
* help from us, so this just works out of the box!
|
* help from us, so this just works out of the box!
|
||||||
*/
|
*/
|
||||||
|
|
||||||
export default StaticHtml;
|
export default StaticHtml;
|
||||||
|
|
|
@ -211,7 +211,7 @@ export class TypeScriptDocumentSnapshot implements DocumentSnapshot {
|
||||||
}
|
}
|
||||||
|
|
||||||
async getFragment(): Promise<DocumentFragmentSnapshot> {
|
async getFragment(): Promise<DocumentFragmentSnapshot> {
|
||||||
return (this as unknown) as any;
|
return this as unknown as any;
|
||||||
}
|
}
|
||||||
|
|
||||||
destroyFragment() {
|
destroyFragment() {
|
||||||
|
|
|
@ -61,9 +61,7 @@ export class LanguageServiceManager {
|
||||||
return tsService.updateDocument(pathOrDoc);
|
return tsService.updateDocument(pathOrDoc);
|
||||||
}
|
}
|
||||||
|
|
||||||
async getTypeScriptDoc(
|
async getTypeScriptDoc(document: Document): Promise<{
|
||||||
document: Document
|
|
||||||
): Promise<{
|
|
||||||
tsDoc: DocumentSnapshot;
|
tsDoc: DocumentSnapshot;
|
||||||
lang: ts.LanguageService;
|
lang: ts.LanguageService;
|
||||||
}> {
|
}> {
|
||||||
|
|
Loading…
Reference in a new issue