diff options
Diffstat (limited to 'packages/integrations/markdoc')
| -rw-r--r-- | packages/integrations/markdoc/components/Renderer.astro | 3 | ||||
| -rw-r--r-- | packages/integrations/markdoc/components/TreeNode.ts | 110 | ||||
| -rw-r--r-- | packages/integrations/markdoc/src/index.ts | 59 | ||||
| -rw-r--r-- | packages/integrations/markdoc/src/nodes/heading.ts | 7 |
4 files changed, 25 insertions, 154 deletions
diff --git a/packages/integrations/markdoc/components/Renderer.astro b/packages/integrations/markdoc/components/Renderer.astro index 6571e8c71..5e2b6833a 100644 --- a/packages/integrations/markdoc/components/Renderer.astro +++ b/packages/integrations/markdoc/components/Renderer.astro @@ -1,5 +1,4 @@ --- -//! astro-head-inject import type { Config } from '@markdoc/markdoc'; import Markdoc from '@markdoc/markdoc'; import { ComponentNode, createTreeNode } from './TreeNode.js'; @@ -15,4 +14,4 @@ const ast = Markdoc.Ast.fromJSON(stringifiedAst); const content = Markdoc.transform(ast, config); --- -<ComponentNode treeNode={await createTreeNode(content)} /> +<ComponentNode treeNode={createTreeNode(content)} /> diff --git a/packages/integrations/markdoc/components/TreeNode.ts b/packages/integrations/markdoc/components/TreeNode.ts index e491d1dc9..a60597a0d 100644 --- a/packages/integrations/markdoc/components/TreeNode.ts +++ b/packages/integrations/markdoc/components/TreeNode.ts @@ -2,16 +2,7 @@ import type { AstroInstance } from 'astro'; import { Fragment } from 'astro/jsx-runtime'; import type { RenderableTreeNode } from '@markdoc/markdoc'; import Markdoc from '@markdoc/markdoc'; -import { - createComponent, - renderComponent, - render, - renderScriptElement, - renderUniqueStylesheet, - createHeadAndContent, - unescapeHTML, - renderTemplate, -} from 'astro/runtime/server/index.js'; +import { createComponent, renderComponent, render } from 'astro/runtime/server/index.js'; export type TreeNode = | { @@ -21,9 +12,6 @@ export type TreeNode = | { type: 'component'; component: AstroInstance['default']; - collectedLinks?: string[]; - collectedStyles?: string[]; - collectedScripts?: string[]; props: Record<string, any>; children: TreeNode[]; } @@ -44,67 +32,20 @@ export const ComponentNode = createComponent({ )}`, }; if (treeNode.type === 'component') { - let styles = '', - links = '', - scripts = ''; - if (Array.isArray(treeNode.collectedStyles)) { - styles = treeNode.collectedStyles - .map((style: any) => - renderUniqueStylesheet({ - type: 'inline', - content: style, - }) - ) - .join(''); - } - if (Array.isArray(treeNode.collectedLinks)) { - links = treeNode.collectedLinks - .map((link: any) => { - return renderUniqueStylesheet(result, { - href: link[0] === '/' ? link : '/' + link, - }); - }) - .join(''); - } - if (Array.isArray(treeNode.collectedScripts)) { - scripts = treeNode.collectedScripts - .map((script: any) => renderScriptElement(script)) - .join(''); - } - - const head = unescapeHTML(styles + links + scripts); - - let headAndContent = createHeadAndContent( - head, - renderTemplate`${renderComponent( - result, - treeNode.component.name, - treeNode.component, - treeNode.props, - slots - )}` + return renderComponent( + result, + treeNode.component.name, + treeNode.component, + treeNode.props, + slots ); - - // Let the runtime know that this component is being used. - result.propagators.set( - {}, - { - init() { - return headAndContent; - }, - } - ); - - return headAndContent; } return renderComponent(result, treeNode.tag, treeNode.tag, treeNode.attributes, slots); }, - propagation: 'self', + propagation: 'none', }); -export async function createTreeNode( - node: RenderableTreeNode | RenderableTreeNode[] -): Promise<TreeNode> { +export function createTreeNode(node: RenderableTreeNode | RenderableTreeNode[]): TreeNode { if (typeof node === 'string' || typeof node === 'number') { return { type: 'text', content: String(node) }; } else if (Array.isArray(node)) { @@ -112,17 +53,16 @@ export async function createTreeNode( type: 'component', component: Fragment, props: {}, - children: await Promise.all(node.map((child) => createTreeNode(child))), + children: node.map((child) => createTreeNode(child)), }; } else if (node === null || typeof node !== 'object' || !Markdoc.Tag.isTag(node)) { return { type: 'text', content: '' }; } - const children = await Promise.all(node.children.map((child) => createTreeNode(child))); - if (typeof node.name === 'function') { const component = node.name; const props = node.attributes; + const children = node.children.map((child) => createTreeNode(child)); return { type: 'component', @@ -130,38 +70,12 @@ export async function createTreeNode( props, children, }; - } else if (isPropagatedAssetsModule(node.name)) { - const { collectedStyles, collectedLinks, collectedScripts } = node.name; - const component = (await node.name.getMod())?.default ?? Fragment; - const props = node.attributes; - - return { - type: 'component', - component, - collectedStyles, - collectedLinks, - collectedScripts, - props, - children, - }; } else { return { type: 'element', tag: node.name, attributes: node.attributes, - children, + children: node.children.map((child) => createTreeNode(child)), }; } } - -type PropagatedAssetsModule = { - __astroPropagation: true; - getMod: () => Promise<AstroInstance['default']>; - collectedStyles: string[]; - collectedLinks: string[]; - collectedScripts: string[]; -}; - -function isPropagatedAssetsModule(module: any): module is PropagatedAssetsModule { - return typeof module === 'object' && module != null && '__astroPropagation' in module; -} diff --git a/packages/integrations/markdoc/src/index.ts b/packages/integrations/markdoc/src/index.ts index ba8a0af84..627f08c77 100644 --- a/packages/integrations/markdoc/src/index.ts +++ b/packages/integrations/markdoc/src/index.ts @@ -32,11 +32,7 @@ export default function markdocIntegration(legacyConfig?: any): AstroIntegration name: '@astrojs/markdoc', hooks: { 'astro:config:setup': async (params) => { - const { - config: astroConfig, - updateConfig, - addContentEntryType, - } = params as SetupHookParams; + const { config: astroConfig, addContentEntryType } = params as SetupHookParams; markdocConfigResult = await loadMarkdocConfig(astroConfig); const userMarkdocConfig = markdocConfigResult?.config ?? {}; @@ -53,9 +49,6 @@ export default function markdocIntegration(legacyConfig?: any): AstroIntegration addContentEntryType({ extensions: ['.mdoc'], getEntryInfo, - // Markdoc handles script / style propagation - // for Astro components internally - handlePropagation: false, async getRenderModule({ entry, viteId }) { const ast = Markdoc.parse(entry.body); const pluginContext = this; @@ -95,10 +88,7 @@ export default function markdocIntegration(legacyConfig?: any): AstroIntegration }); } - const res = `import { - createComponent, - renderComponent, - } from 'astro/runtime/server/index.js'; + const res = `import { jsx as h } from 'astro/jsx-runtime'; import { Renderer } from '@astrojs/markdoc/components'; import { collectHeadings, setupConfig, Markdoc } from '@astrojs/markdoc/runtime'; import * as entry from ${JSON.stringify(viteId + '?astroContentCollectionEntry')}; @@ -129,24 +119,14 @@ export function getHeadings() { const content = Markdoc.transform(ast, config); return collectHeadings(Array.isArray(content) ? content : content.children); } +export async function Content (props) { + const config = setupConfig({ + ...userConfig, + variables: { ...userConfig.variables, ...props }, + }, entry); -export const Content = createComponent({ - factory(result, props) { - const config = setupConfig({ - ...userConfig, - variables: { ...userConfig.variables, ...props }, - }, entry); - - return renderComponent( - result, - Renderer.name, - Renderer, - { stringifiedAst, config }, - {} - ); - }, - propagation: 'self', -});`; + return h(Renderer, { config, stringifiedAst }); +}`; return { code: res }; }, contentModuleTypes: await fs.promises.readFile( @@ -154,27 +134,6 @@ export const Content = createComponent({ 'utf-8' ), }); - - updateConfig({ - vite: { - plugins: [ - { - name: '@astrojs/markdoc:astro-propagated-assets', - enforce: 'pre', - // Astro component styles and scripts should only be injected - // When a given Markdoc file actually uses that component. - // Add the `astroPropagatedAssets` flag to inject only when rendered. - resolveId(this: rollup.TransformPluginContext, id: string, importer: string) { - if (importer === markdocConfigResult?.fileUrl.pathname && id.endsWith('.astro')) { - return this.resolve(id + '?astroPropagatedAssets', importer, { - skipSelf: true, - }); - } - }, - }, - ], - }, - }); }, 'astro:server:setup': async ({ server }) => { server.watcher.on('all', (event, entry) => { diff --git a/packages/integrations/markdoc/src/nodes/heading.ts b/packages/integrations/markdoc/src/nodes/heading.ts index cb50dd231..0210e9b90 100644 --- a/packages/integrations/markdoc/src/nodes/heading.ts +++ b/packages/integrations/markdoc/src/nodes/heading.ts @@ -37,14 +37,13 @@ export const heading: Schema = { const slug = getSlug(attributes, children, config.ctx.headingSlugger); const render = config.nodes?.heading?.render ?? `h${level}`; - const tagProps = // For components, pass down `level` as a prop, // alongside `__collectHeading` for our `headings` collector. // Avoid accidentally rendering `level` as an HTML attribute otherwise! - typeof render === 'string' - ? { ...attributes, id: slug } - : { ...attributes, id: slug, __collectHeading: true, level }; + typeof render === 'function' + ? { ...attributes, id: slug, __collectHeading: true, level } + : { ...attributes, id: slug }; return new Markdoc.Tag(render, tagProps, children); }, |