From ff93d376d33cf8239bc752e7791752239028d46b Mon Sep 17 00:00:00 2001 From: bholmesdev Date: Wed, 19 Oct 2022 11:39:26 -0400 Subject: [PATCH] wip: add ?astro-asset-ssr flag --- packages/astro/src/jsx/babel.ts | 3 ++- packages/astro/src/vite-plugin-asset-ssr/index.ts | 1 + packages/astro/src/vite-plugin-jsx/index.ts | 5 ++++- packages/integrations/mdx/src/index.ts | 12 ++++++++++-- 4 files changed, 17 insertions(+), 4 deletions(-) create mode 100644 packages/astro/src/vite-plugin-asset-ssr/index.ts diff --git a/packages/astro/src/jsx/babel.ts b/packages/astro/src/jsx/babel.ts index 19e4327d7..40501e66f 100644 --- a/packages/astro/src/jsx/babel.ts +++ b/packages/astro/src/jsx/babel.ts @@ -4,6 +4,7 @@ import npath from 'path'; import { normalizePath } from 'vite'; import { resolveJsToTs } from '../core/util.js'; import { HydrationDirectiveProps } from '../runtime/server/hydration.js'; +import { FLAG } from '../vite-plugin-asset-ssr/index.js'; import type { PluginMetadata } from '../vite-plugin-astro/types'; const ClientOnlyPlaceholder = 'astro-client-only'; @@ -184,7 +185,7 @@ export default function astroJSX(): PluginObj { const node = path.node; // Skip automatic `_components` in MDX files if ( - state.filename?.endsWith('.mdx') && + (state.filename?.endsWith('.mdx') || state.filename?.endsWith('.mdx' + FLAG)) && t.isJSXIdentifier(node.object) && node.object.name === '_components' ) { diff --git a/packages/astro/src/vite-plugin-asset-ssr/index.ts b/packages/astro/src/vite-plugin-asset-ssr/index.ts new file mode 100644 index 000000000..4cbc8d8ce --- /dev/null +++ b/packages/astro/src/vite-plugin-asset-ssr/index.ts @@ -0,0 +1 @@ +export const FLAG = '?astro-asset-ssr'; diff --git a/packages/astro/src/vite-plugin-jsx/index.ts b/packages/astro/src/vite-plugin-jsx/index.ts index 357e441f6..d817d274e 100644 --- a/packages/astro/src/vite-plugin-jsx/index.ts +++ b/packages/astro/src/vite-plugin-jsx/index.ts @@ -13,6 +13,7 @@ import path from 'path'; import { error } from '../core/logger/core.js'; import { parseNpmName } from '../core/util.js'; import tagExportsPlugin from './tag.js'; +import { FLAG } from '../vite-plugin-asset-ssr/index.js'; type FixedCompilerOptions = TsConfigJson.CompilerOptions & { jsxImportSource?: string; @@ -185,7 +186,9 @@ export default function jsx({ settings, logging }: AstroPluginJSXOptions): Plugi } defaultJSXRendererEntry = [...jsxRenderersIntegrationOnly.entries()][0]; }, - async transform(code, id, opts) { + async transform(code, unresolvedId, opts) { + let id = unresolvedId.endsWith(`.mdx${FLAG}`) ? unresolvedId.replace(FLAG, '') : unresolvedId; + const ssr = Boolean(opts?.ssr); if (!JSX_EXTENSIONS.has(path.extname(id))) { return null; diff --git a/packages/integrations/mdx/src/index.ts b/packages/integrations/mdx/src/index.ts index eb769535a..13c78ae9d 100644 --- a/packages/integrations/mdx/src/index.ts +++ b/packages/integrations/mdx/src/index.ts @@ -15,6 +15,8 @@ import { } from './plugins.js'; import { getFileInfo, handleExtendsNotSupported, parseFrontmatter } from './utils.js'; +const FLAG = '?astro-asset-ssr'; + const RAW_CONTENT_ERROR = 'MDX does not support rawContent()! If you need to read the Markdown contents to calculate values (ex. reading time), we suggest injecting frontmatter via remark plugins. Learn more on our docs: https://docs.astro.build/en/guides/integrations-guide/mdx/#inject-frontmatter-via-remark-or-rehype-plugins'; @@ -86,7 +88,10 @@ export default function mdx(mdxOptions: MdxOptions = {}): AstroIntegration { }, // Override transform to alter code before MDX compilation // ex. inject layouts - async transform(_, id) { + async transform(_, unresolvedId) { + let id = unresolvedId.endsWith(`.mdx${FLAG}`) + ? unresolvedId.replace(FLAG, '') + : unresolvedId; if (!id.endsWith('mdx')) return; // Read code from file manually to prevent Vite from parsing `import.meta.env` expressions @@ -112,7 +117,10 @@ export default function mdx(mdxOptions: MdxOptions = {}): AstroIntegration { { name: '@astrojs/mdx-postprocess', // These transforms must happen *after* JSX runtime transformations - transform(code, id) { + transform(code, unresolvedId) { + let id = unresolvedId.endsWith(`.mdx${FLAG}`) + ? unresolvedId.replace(FLAG, '') + : unresolvedId; if (!id.endsWith('.mdx')) return; // Ensures styles and scripts are injected into a ``