feat: move Renderer to markdoc, get Content component!

withastro · Feb 16, 2023 · 2487aed · 2487aed
1 parent 44faff9
commit 2487aed
Show file tree

Hide file tree

Showing 9 changed files with 45 additions and 32 deletions.
diff --git a/examples/with-markdoc/src/content/blog/test.mdoc b/examples/with-markdoc/src/content/blog/test.mdoc
@@ -3,3 +3,32 @@ title: Example!
 ---
 
 # Hey there
+
+Look at this table! Built-in to Markdoc, neat.
+
+{% table %}
+* Heading 1
+* Heading 2
+---
+* Row 1 Cell 1
+* Row 1 Cell 2
+---
+* Row 2 Cell 1
+* Row 2 cell 2
+{% /table %}
+
+{% if $shouldMarquee %}
+{% mq direction="right" %}
+Im a marquee!
+{% /mq %}
+{% /if %}
+
+{% link href=$href %}Link{% /link %}
+
+```js
+const testing = true;
+function further() {
+	console.log('still highlighted!')
+}
+```
+
diff --git a/examples/with-markdoc/src/pages/index.astro b/examples/with-markdoc/src/pages/index.astro
@@ -1,14 +1,13 @@
 ---
 import { Markdoc } from '@astrojs/markdoc';
-import RenderMarkdoc from '../renderer/RenderMarkdoc.astro';
-
-import { getTransformed } from '../components/test.mdoc';
 import { Code } from 'astro/components';
 import Marquee from '../components/Marquee.astro';
 import { getEntryBySlug } from 'astro:content';
+import RedP from '../components/RedP.astro';
 
-const mdocEntry = await getEntryBySlug('blog', 'test');
-console.log(mdocEntry);
+const testEntry = await getEntryBySlug('blog', 'test');
+console.log(testEntry);
+const { Content } = await testEntry.render();
 ---
 
 <html lang="en">
@@ -22,10 +21,10 @@ console.log(mdocEntry);
 	<body>
 		<h1>Astro</h1>
 		<article>
-			<RenderMarkdoc
-				content={await getTransformed()}
+			<Content
 				components={{
 					marquee: Marquee,
+					p: RedP,
 					pre: {
 						component: Code,
 						props({ attributes, getTreeNode }) {

diff --git a/packages/astro/src/content/internal.ts b/packages/astro/src/content/internal.ts
@@ -184,7 +184,7 @@ async function render({
 
 	return {
 		Content,
-		headings: mod.getHeadings(),
-		remarkPluginFrontmatter: mod.frontmatter,
+		headings: mod.getHeadings?.() ?? [],
+		remarkPluginFrontmatter: mod.frontmatter ?? {},
 	};
 }
diff --git a/...ith-markdoc/src/renderer/RenderNode.astro → ...tions/markdoc/components/RenderNode.astro b/...ith-markdoc/src/renderer/RenderNode.astro → ...tions/markdoc/components/RenderNode.astro
diff --git a/...-markdoc/src/renderer/RenderMarkdoc.astro → ...rations/markdoc/components/Renderer.astro b/...-markdoc/src/renderer/RenderMarkdoc.astro → ...rations/markdoc/components/Renderer.astro
diff --git a/...es/with-markdoc/src/renderer/astroNode.ts → ...egrations/markdoc/components/astroNode.ts b/...es/with-markdoc/src/renderer/astroNode.ts → ...egrations/markdoc/components/astroNode.ts
@@ -36,12 +36,12 @@ export function createAstroNode(
 		return '';
 	}
 
-	if (Object.hasOwn(components, node.name)) {
+	if (node.name in components) {
 		const componentRenderer = components[node.name];
 		const component =
 			'component' in componentRenderer ? componentRenderer.component : componentRenderer;
 		const props =
-			'props' in componentRenderer
+			'props' in componentRenderer && typeof componentRenderer.props === 'function'
 				? componentRenderer.props({
 						attributes: node.attributes,
 						getTreeNode() {

diff --git a/packages/integrations/markdoc/components/index.ts b/packages/integrations/markdoc/components/index.ts
@@ -0,0 +1 @@
+export { default as Renderer } from './Renderer.astro';
diff --git a/packages/integrations/markdoc/src/index.ts b/packages/integrations/markdoc/src/index.ts
@@ -17,23 +17,6 @@ const contentEntryType = {
 			rawData: parsed.matter,
 		};
 	},
-	async render({ entry }: { entry: any }) {
-		function getParsed() {
-			return Markdoc.parse(entry.body);
-		}
-		async function getTransformed(inlineConfig: any) {
-			let config = inlineConfig;
-			// TODO: load config file
-			// if (!config) {
-			// 	try {
-			// 		const importedConfig = await import('./markdoc.config.ts');
-			// 		config = importedConfig.default.transform;
-			// 	} catch {}
-			// }
-			return Markdoc.transform(getParsed(), config);
-		}
-		return { getParsed, getTransformed };
-	},
 };
 
 export default function markdoc(partialOptions: {} = {}): AstroIntegration {
@@ -51,17 +34,18 @@ export default function markdoc(partialOptions: {} = {}): AstroIntegration {
 							name: '@astrojs/markdoc',
 							async transform(code, id) {
 								if (!id.endsWith('.mdoc')) return;
-								return `import { Markdoc } from '@astrojs/markdoc';\nexport const body = ${JSON.stringify(
+								return `import { jsx as h } from 'astro/jsx-runtime';\nimport { Markdoc } from '@astrojs/markdoc';\nimport { Renderer } from '@astrojs/markdoc/components';\nexport const body = ${JSON.stringify(
 									code
 								)};\nexport function getParsed() { return Markdoc.parse(body); }\nexport async function getTransformed(inlineConfig) {
-let config = inlineConfig;
+let config = inlineConfig ?? {};
 if (!config) {
 	try {
 		const importedConfig = await import(${JSON.stringify(markdocConfigUrl.pathname)});
+		console.log({ importedConfig })
 		config = importedConfig.default.transform;
 	} catch {}
 }
-return Markdoc.transform(getParsed(), config) }`;
+return Markdoc.transform(getParsed(), config) }\nexport async function Content ({ transformConfig, components }) { return h(Renderer, { content: await getTransformed(transformConfig), components }); }\nContent[Symbol.for('astro.needsHeadRendering')] = true;`;
 							},
 						},
 					],

diff --git a/packages/integrations/markdoc/tsconfig.json b/packages/integrations/markdoc/tsconfig.json
@@ -1,6 +1,6 @@
 {
   "extends": "../../../tsconfig.base.json",
-  "include": ["src"],
+  "include": ["src", "components"],
   "compilerOptions": {
     "allowJs": true,
     "module": "ES2020",