summaryrefslogtreecommitdiff
path: root/src/frontend/render/renderer.ts
diff options
context:
space:
mode:
Diffstat (limited to 'src/frontend/render/renderer.ts')
-rw-r--r--src/frontend/render/renderer.ts61
1 files changed, 0 insertions, 61 deletions
diff --git a/src/frontend/render/renderer.ts b/src/frontend/render/renderer.ts
deleted file mode 100644
index a5cc9d581..000000000
--- a/src/frontend/render/renderer.ts
+++ /dev/null
@@ -1,61 +0,0 @@
-import type { DynamicRenderContext, DynamicRendererGenerator, SupportedComponentRenderer, StaticRendererGenerator } from '../../@types/renderer';
-import { childrenToH } from './utils';
-
-/** Initialize Astro Component renderer for Static and Dynamic components */
-export function createRenderer(renderer: SupportedComponentRenderer) {
- const _static: StaticRendererGenerator = (Component) => renderer.renderStatic(Component);
- const _imports = (context: DynamicRenderContext) => {
- const values = Object.values(renderer.imports ?? {})
- .reduce((acc, v) => {
- return [...acc, `{ ${v.join(', ')} }`];
- }, [])
- .join(', ');
- const libs = Object.keys(renderer.imports ?? {})
- .reduce((acc: string[], lib: string) => {
- return [...acc, `import("${context.frameworkUrls[lib as any]}")`];
- }, [])
- .join(',');
- return `const [{${context.componentExport}: Component}, ${values}] = await Promise.all([import("${context.componentUrl}")${renderer.imports ? ', ' + libs : ''}]);`;
- };
- const serializeProps = ({ children: _, ...props }: Record<string, any>) => JSON.stringify(props);
- const createContext = () => {
- const astroId = `${Math.floor(Math.random() * 1e16)}`;
- return { ['data-astro-id']: astroId, root: `document.querySelector('[data-astro-id="${astroId}"]')`, Component: 'Component' };
- };
- const createDynamicRender: DynamicRendererGenerator = (wrapperStart, wrapperEnd) => (Component, renderContext) => {
- const innerContext = createContext();
- return async (props, ...children) => {
- let value: string;
- try {
- value = await _static(Component)(props, ...children);
- } catch (e) {
- value = '';
- }
- value = `<div data-astro-id="${innerContext['data-astro-id']}" style="display:contents">${value}</div>`;
-
- const script = `
- ${typeof wrapperStart === 'function' ? wrapperStart(innerContext) : wrapperStart}
- ${_imports(renderContext)}
- ${renderer.render({
- ...innerContext,
- props: serializeProps(props),
- children: `[${childrenToH(renderer, children) ?? ''}]`,
- childrenAsString: `\`${children}\``,
- })}
- ${typeof wrapperEnd === 'function' ? wrapperEnd(innerContext) : wrapperEnd}
- `;
-
- return [value, `<script type="module">${script.trim()}</script>`].join('\n');
- };
- };
-
- return {
- static: _static,
- load: createDynamicRender('(async () => {', '})()'),
- idle: createDynamicRender('requestIdleCallback(async () => {', '})'),
- visible: createDynamicRender(
- 'const o = new IntersectionObserver(async ([entry]) => { if (!entry.isIntersecting) { return; } o.disconnect();',
- ({ root }) => `}); Array.from(${root}.children).forEach(child => o.observe(child))`
- ),
- };
-}