diff --git a/examples/with-markdoc/src/embeds/aside.astro b/examples/with-markdoc/src/embeds/aside.astro index f0683d6ee..1241f4030 100644 --- a/examples/with-markdoc/src/embeds/aside.astro +++ b/examples/with-markdoc/src/embeds/aside.astro @@ -8,6 +8,8 @@ export interface Props { title?: string; } +export const example = true; + const labelByType = { note: 'Note', tip: 'Tip', diff --git a/examples/with-markdoc/src/embeds/aside.astro.js b/examples/with-markdoc/src/embeds/aside.astro.js new file mode 100644 index 000000000..24d90c458 --- /dev/null +++ b/examples/with-markdoc/src/embeds/aside.astro.js @@ -0,0 +1,57 @@ +import { + render as $$render, + createAstro as $$createAstro, + createComponent as $$createComponent, + maybeRenderHead as $$maybeRenderHead, + renderSlot as $$renderSlot, + addAttribute as $$addAttribute +} from "astro/server/index.js"; +import "/Users/benholmes/Repositories/astro/examples/with-markdoc/src/embeds/aside.astro?astro&type=style&index=0&lang.css"; +const $$Astro = $$createAstro(); +const Astro = $$Astro; +export const example = true; +const $$Aside = $$createComponent(async ($$result, $$props, $$slots) => { + const Astro2 = $$result.createAstro($$Astro, $$props, $$slots); + Astro2.self = $$Aside; + const labelByType = { + note: "Note", + tip: "Tip", + caution: "Caution", + danger: "Danger" + }; + const { type = "note" } = Astro2.props; + const title = Astro2.props.title ?? labelByType[type] ?? ""; + const icons = { + note: { + viewBox: "0 0 18 18", + d: "M0 3.75C0 2.784.784 2 1.75 2h12.5c.966 0 1.75.784 1.75 1.75v8.5A1.75 1.75 0 0114.25 14H1.75A1.75 1.75 0 010 12.25v-8.5zm1.75-.25a.25.25 0 00-.25.25v8.5c0 .138.112.25.25.25h12.5a.25.25 0 00.25-.25v-8.5a.25.25 0 00-.25-.25H1.75zM3.5 6.25a.75.75 0 01.75-.75h7a.75.75 0 010 1.5h-7a.75.75 0 01-.75-.75zm.75 2.25a.75.75 0 000 1.5h4a.75.75 0 000-1.5h-4z" + }, + tip: { + viewBox: "0 0 18 18", + d: "M14 0a8.8 8.8 0 0 0-6 2.6l-.5.4-.9 1H3.3a1.8 1.8 0 0 0-1.5.8L.1 7.6a.8.8 0 0 0 .4 1.1l3.1 1 .2.1 2.4 2.4.1.2 1 3a.8.8 0 0 0 1 .5l2.9-1.7a1.8 1.8 0 0 0 .8-1.5V9.5l1-1 .4-.4A8.8 8.8 0 0 0 16 2v-.1A1.8 1.8 0 0 0 14.2 0h-.1zm-3.5 10.6-.3.2L8 12.3l.5 1.8 2-1.2a.3.3 0 0 0 .1-.2v-2zM3.7 8.1l1.5-2.3.2-.3h-2a.3.3 0 0 0-.3.1l-1.2 2 1.8.5zm5.2-4.5a7.3 7.3 0 0 1 5.2-2.1h.1a.3.3 0 0 1 .3.3v.1a7.3 7.3 0 0 1-2.1 5.2l-.5.4a15.2 15.2 0 0 1-2.5 2L7.1 11 5 9l1.5-2.3a15.3 15.3 0 0 1 2-2.5l.4-.5zM12 5a1 1 0 1 1-2 0 1 1 0 0 1 2 0zm-8.4 9.6a1.5 1.5 0 1 0-2.2-2.2 7 7 0 0 0-1.1 3 .2.2 0 0 0 .3.3c.6 0 2.2-.4 3-1.1z" + }, + caution: { + viewBox: "-1 1 18 18", + d: "M8.9 1.5C8.7 1.2 8.4 1 8 1s-.7.2-.9.5l-7 12a1 1 0 0 0 0 1c.2.3.6.5 1 .5H15c.4 0 .7-.2.9-.5a1 1 0 0 0 0-1l-7-12zM9 13H7v-2h2v2zm0-3H7V6h2v4z" + }, + danger: { + viewBox: "0 1 14 17", + d: "M5 .3c.9 2.2.5 3.4-.5 4.3C3.5 5.6 2 6.5 1 8c-1.5 2-1.7 6.5 3.5 7.7-2.2-1.2-2.6-4.5-.3-6.6-.6 2 .6 3.3 2 2.8 1.4-.4 2.3.6 2.2 1.7 0 .8-.3 1.4-1 1.8A5.6 5.6 0 0 0 12 10c0-2.9-2.5-3.3-1.3-5.7-1.5.2-2 1.2-1.8 2.8 0 1-1 1.8-2 1.3-.6-.4-.6-1.2 0-1.8C8.2 5.3 8.7 2.5 5 .3z" + } + }; + const { viewBox, d } = icons[type]; + return $$render`${$$maybeRenderHead($$result)} + +
+ ${$$renderSlot($$result, $$slots["default"])} +
+`; +}, "/Users/benholmes/Repositories/astro/examples/with-markdoc/src/embeds/aside.astro"); +export default $$Aside; diff --git a/packages/integrations/markdoc/package.json b/packages/integrations/markdoc/package.json index a9d8f1303..d8caacf3d 100644 --- a/packages/integrations/markdoc/package.json +++ b/packages/integrations/markdoc/package.json @@ -42,6 +42,7 @@ "test:match": "mocha --timeout 20000 -g" }, "dependencies": { + "@astrojs/compiler": "^1.4.0", "@astrojs/prism": "^2.1.2", "@markdoc/markdoc": "^0.3.0", "esbuild": "^0.17.12", diff --git a/packages/integrations/markdoc/src/index.ts b/packages/integrations/markdoc/src/index.ts index cfca91d94..0eb600963 100644 --- a/packages/integrations/markdoc/src/index.ts +++ b/packages/integrations/markdoc/src/index.ts @@ -1,6 +1,7 @@ import { isPropsDef, markdocAttributesFromZodProps, usedDefinePropsSymbol } from './props.js'; /* eslint-disable no-console */ import type { Node, Schema } from '@markdoc/markdoc'; +import { transform, type TransformResult } from '@astrojs/compiler'; import Markdoc from '@markdoc/markdoc'; import glob from 'fast-glob'; import type { AstroConfig, AstroIntegration, ContentEntryType, HookParameters } from 'astro'; @@ -14,7 +15,7 @@ import type * as rollup from 'rollup'; import { loadMarkdocConfig, type MarkdocConfigResult } from './load-config.js'; import { setupConfig } from './runtime.js'; import path from 'node:path'; -import type { Plugin } from 'vite'; +import { normalizePath, transformWithEsbuild, type Plugin } from 'vite'; type SetupHookParams = HookParameters<'astro:config:setup'> & { // `contentEntryType` is not a public API @@ -52,6 +53,27 @@ export default function markdocIntegration(legacyConfig?: any): AstroIntegration let componentPathByName: Record = {}; const embedsDir = new URL('embeds/', astroConfig.srcDir); for (const tagPropsModule of tagPropsModules) { + const astroFilePath = tagPropsModule.replace(/\.props\.js$/, '.astro'); + const astroFileContent = await fs.promises.readFile(astroFilePath, 'utf-8'); + const compiled = await compileAstroFile({ + astroConfig, + filename: astroFilePath, + source: astroFileContent, + }); + const builtJs = await transformWithEsbuild(compiled.code, astroFilePath, { + loader: 'ts', + target: 'esnext', + sourcemap: 'external', + tsconfigRaw: { + compilerOptions: { + // Ensure client:only imports are treeshaken + importsNotUsedAsValues: 'remove', + preserveValueImports: false, + }, + }, + }); + const compiledAstroFilePath = tagPropsModule.replace(/\.props\.js$/, '.astro.js'); + await fs.promises.writeFile(compiledAstroFilePath, builtJs.code); const mod = await import(tagPropsModule); if (typeof mod !== 'object' || mod == null) { throw new MarkdocError({ @@ -104,7 +126,7 @@ export default function markdocIntegration(legacyConfig?: any): AstroIntegration }) .join(',\n')} };`; - console.log(code); + // console.log(code); return code; } }, @@ -281,3 +303,74 @@ function shouldOptimizeImage(src: string) { // Optimize anything that is NOT external or an absolute path to `public/` return !isValidUrl(src) && !src.startsWith('/'); } + +async function compileAstroFile({ + astroConfig, + filename, + source, +}: { + astroConfig: AstroConfig; + filename: string; + source: string; +}): Promise { + let transformResult: TransformResult; + + try { + // Transform from `.astro` to valid `.ts` + // use `sourcemap: "both"` so that sourcemap is included in the code + // result passed to esbuild, but also available in the catch handler. + transformResult = await transform(source, { + compact: astroConfig.compressHTML, + filename, + normalizedFilename: normalizeFilename(filename, astroConfig.root), + sourcemap: 'both', + internalURL: 'astro/server/index.js', + astroGlobalArgs: JSON.stringify(astroConfig.site), + scopedStyleStrategy: astroConfig.scopedStyleStrategy, + resultScopedSlot: true, + async resolvePath(specifier) { + return resolvePath(specifier, filename); + }, + }); + } catch (err: any) { + // The compiler should be able to handle errors by itself, however + // for the rare cases where it can't let's directly throw here with as much info as possible + throw new MarkdocError({ + message: 'Failed to transform embed', + location: { + file: filename, + }, + }); + } + + return transformResult; +} + +function normalizeFilename(filename: string, root: URL) { + const normalizedFilename = normalizePath(filename); + const normalizedRoot = normalizePath(fileURLToPath(root)); + if (normalizedFilename.startsWith(normalizedRoot)) { + return normalizedFilename.slice(normalizedRoot.length - 1); + } else { + return normalizedFilename; + } +} + +function resolvePath(specifier: string, importer: string) { + if (specifier.startsWith('.')) { + const absoluteSpecifier = path.resolve(path.dirname(importer), specifier); + return resolveJsToTs(normalizePath(absoluteSpecifier)); + } else { + return specifier; + } +} + +function resolveJsToTs(filePath: string) { + if (filePath.endsWith('.jsx') && !fs.existsSync(filePath)) { + const tryPath = filePath.slice(0, -4) + '.tsx'; + if (fs.existsSync(tryPath)) { + return tryPath; + } + } + return filePath; +} diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 7597a79a0..0f26f7b69 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -3973,6 +3973,9 @@ importers: packages/integrations/markdoc: dependencies: + '@astrojs/compiler': + specifier: ^1.4.0 + version: 1.4.0 '@astrojs/prism': specifier: ^2.1.2 version: link:../../astro-prism