wip: play with separate markdoc config

bholmesdev · bholmesdev · commit 97664e0f862f · 2023-02-16T13:06:00.000-05:00
diff --git a/examples/with-markdoc/src/components/Marquee.astro b/examples/with-markdoc/src/components/Marquee.astro
@@ -0,0 +1,7 @@
+<marquee {...Astro.props}><slot /></marquee>
+
+<style>
+marquee {
+	color: red;
+}
+</style>
diff --git a/examples/with-markdoc/src/components/test.mdoc b/examples/with-markdoc/src/components/test.mdoc
@@ -1,6 +1,6 @@
 # Hey there
 
-This is a test file?
+Look at this table! Built-in to Markdoc, neat.
 
 {% table %}
 * Heading 1
@@ -15,14 +15,12 @@ This is a test file?
 
 {% if $shouldMarquee %}
 {% mq direction="right" %}
-Testing!
+Im a marquee!
 {% /mq %}
 {% /if %}
 
 {% link href=$href %}Link{% /link %}
 
-Some `inline code` should help
-
 ```js
 const testing = true;
 function further() {
diff --git a/examples/with-markdoc/src/markdoc.config.ts b/examples/with-markdoc/src/markdoc.config.ts
@@ -0,0 +1,30 @@
+export default {
+	transform: {
+		variables: {
+			shouldMarquee: true,
+			href: 'https://astro.build',
+		},
+		tags: {
+			mq: {
+				render: 'marquee',
+				attributes: {
+					direction: {
+						type: String,
+						default: 'left',
+						matches: ['left', 'right', 'up', 'down'],
+						errorLevel: 'critical',
+					},
+				},
+			},
+			link: {
+				render: 'a',
+				attributes: {
+					href: {
+						type: String,
+						required: true,
+					},
+				},
+			},
+		},
+	},
+};
diff --git a/examples/with-markdoc/src/pages/index.astro b/examples/with-markdoc/src/pages/index.astro
@@ -1,52 +1,10 @@
 ---
-import { body } from '../components/test.mdoc';
 import { Markdoc } from '@astrojs/markdoc';
 import RenderMarkdoc from '../renderer/RenderMarkdoc.astro';
-import RedP from '../components/RedP.astro';
-import { Code } from 'astro/components';
-import { Tag } from '@markdoc/markdoc';
-import { ComponentRenderer } from '../renderer/astroNode';
-
-const parsed = Markdoc.parse(body);
-const content = Markdoc.transform(parsed, {
-	variables: {
-		shouldMarquee: true,
-		href: 'https://astro.build',
-	},
-	tags: {
-		mq: {
-			render: 'marquee',
-			attributes: {
-				direction: {
-					type: String,
-					default: 'left',
-					matches: ['left', 'right', 'up', 'down'],
-					errorLevel: 'critical',
-				},
-			},
-		},
-		link: {
-			render: 'a',
-			attributes: {
-				href: {
-					type: String,
-					required: true,
-				},
-			},
-		},
-	},
-});
 
-const code: ComponentRenderer = {
-	component: Code,
-	props({ attributes, getTreeNode }) {
-		return {
-			...attributes,
-			lang: attributes.lang ?? attributes['data-language'],
-			code: attributes.code ?? Markdoc.renderers.html(getTreeNode().children),
-		};
-	},
-};
+import { getTransformed } from '../components/test.mdoc';
+import { Code } from 'astro/components';
+import Marquee from '../components/Marquee.astro';
 ---
 
 <html lang="en">
@@ -61,11 +19,19 @@ const code: ComponentRenderer = {
 		<h1>Astro</h1>
 		<article>
 			<RenderMarkdoc
-				content={content}
+				content={await getTransformed()}
 				components={{
-					p: RedP,
-					code,
-					pre: code,
+					marquee: Marquee,
+					pre: {
+						component: Code,
+						props({ attributes, getTreeNode }) {
+							return {
+								...attributes,
+								lang: attributes.lang ?? attributes['data-language'],
+								code: attributes.code ?? Markdoc.renderers.html(getTreeNode().children),
+							};
+						},
+					},
 				}}
 			/>
 		</article>
diff --git a/packages/integrations/markdoc/src/index.ts b/packages/integrations/markdoc/src/index.ts
@@ -9,14 +9,25 @@ export default function markdoc(partialOptions: {} = {}): AstroIntegration {
 			'astro:config:setup': async ({ updateConfig, config, addPageExtension, command }: any) => {
 				addPageExtension('.mdoc');
 				console.log('Markdoc working!');
+				const markdocConfigUrl = new URL('./markdoc.config.ts', config.srcDir);
 
 				const viteConfig: InlineConfig = {
 					plugins: [
 						{
 							name: '@astrojs/markdoc',
 							async transform(code, id) {
 								if (!id.endsWith('.mdoc')) return;
-								return `export const body = ${JSON.stringify(code)}`;
+								return `import { Markdoc } from '@astrojs/markdoc';\nexport const body = ${JSON.stringify(
+									code
+								)};\nexport function getParsed() { return Markdoc.parse(body); }\nexport async function getTransformed(inlineConfig) {
+let config = inlineConfig;
+if (!config) {
+	try {
+		const importedConfig = await import(${JSON.stringify(markdocConfigUrl.pathname)});
+		config = importedConfig.default.transform;
+	} catch {}
+}
+return Markdoc.transform(getParsed(), config) }`;
 							},
 						},
 					],
