From 58a2dca2286cb14f6211cf51267c02447e78433a Mon Sep 17 00:00:00 2001 From: Ben Holmes Date: Mon, 26 Sep 2022 18:23:47 -0400 Subject: [PATCH] Fix: correctly transform `import.meta.env.*` in MDX (#4858) * fix: serialize route pattern for Netlify edge Co-authored-by: Jackie Macharia * fix: escape import.meta.env in MDX compiler output * test: env vars in mdx * chore: changeset * deps: estree-util-visit, @types/estree * feat: inject import.meta.env w/ recma * feat: pull importMetaEnv from vite + astro configs * test: `import.meta.env` in JSX * fix: lockfile * chore: update changeset * fix: remove stray stashed commit --- .changeset/metal-hats-explain.md | 5 + packages/integrations/mdx/package.json | 2 + .../integrations/mdx/src/astro-data-utils.ts | 103 ------- packages/integrations/mdx/src/index.ts | 54 +++- packages/integrations/mdx/src/plugins.ts | 273 ++++++++++++++++++ packages/integrations/mdx/src/utils.ts | 118 -------- .../mdx-vite-env-vars/astro.config.mjs | 9 + .../fixtures/mdx-vite-env-vars/package.json | 7 + .../src/pages/frontmatter.json.js | 7 + .../src/pages/vite-env-vars.mdx | 38 +++ .../mdx/test/mdx-vite-env-vars.test.js | 58 ++++ pnpm-lock.yaml | 13 +- 12 files changed, 454 insertions(+), 233 deletions(-) create mode 100644 .changeset/metal-hats-explain.md delete mode 100644 packages/integrations/mdx/src/astro-data-utils.ts create mode 100644 packages/integrations/mdx/src/plugins.ts create mode 100644 packages/integrations/mdx/test/fixtures/mdx-vite-env-vars/astro.config.mjs create mode 100644 packages/integrations/mdx/test/fixtures/mdx-vite-env-vars/package.json create mode 100644 packages/integrations/mdx/test/fixtures/mdx-vite-env-vars/src/pages/frontmatter.json.js create mode 100644 packages/integrations/mdx/test/fixtures/mdx-vite-env-vars/src/pages/vite-env-vars.mdx create mode 100644 packages/integrations/mdx/test/mdx-vite-env-vars.test.js diff --git a/.changeset/metal-hats-explain.md b/.changeset/metal-hats-explain.md new file mode 100644 index 000000000000..cb3be9ad7514 --- /dev/null +++ b/.changeset/metal-hats-explain.md @@ -0,0 +1,5 @@ +--- +'@astrojs/mdx': patch +--- + +Correctly parse import.meta.env in MDX files diff --git a/packages/integrations/mdx/package.json b/packages/integrations/mdx/package.json index 68c272bd3b43..a915ff66a7d3 100644 --- a/packages/integrations/mdx/package.json +++ b/packages/integrations/mdx/package.json @@ -34,6 +34,7 @@ "@mdx-js/rollup": "^2.1.1", "acorn": "^8.8.0", "es-module-lexer": "^0.10.5", + "estree-util-visit": "^1.2.0", "github-slugger": "^1.4.0", "gray-matter": "^4.0.3", "kleur": "^4.1.4", @@ -47,6 +48,7 @@ }, "devDependencies": { "@types/chai": "^4.3.1", + "@types/estree": "^1.0.0", "@types/mocha": "^9.1.1", "@types/yargs-parser": "^21.0.0", "astro": "workspace:*", diff --git a/packages/integrations/mdx/src/astro-data-utils.ts b/packages/integrations/mdx/src/astro-data-utils.ts deleted file mode 100644 index 9be96022e8de..000000000000 --- a/packages/integrations/mdx/src/astro-data-utils.ts +++ /dev/null @@ -1,103 +0,0 @@ -import type { MarkdownAstroData } from 'astro'; -import type { Data, VFile } from 'vfile'; -import { jsToTreeNode } from './utils.js'; - -export function remarkInitializeAstroData() { - return function (tree: any, vfile: VFile) { - if (!vfile.data.astro) { - vfile.data.astro = { frontmatter: {} }; - } - }; -} - -const EXPORT_NAME = 'frontmatter'; - -export function rehypeApplyFrontmatterExport(pageFrontmatter: Record) { - return function (tree: any, vfile: VFile) { - const { frontmatter: injectedFrontmatter } = safelyGetAstroData(vfile.data); - const frontmatter = { ...injectedFrontmatter, ...pageFrontmatter }; - const exportNodes = [ - jsToTreeNode(`export const ${EXPORT_NAME} = ${JSON.stringify(frontmatter)};`), - ]; - if (frontmatter.layout) { - // NOTE(bholmesdev) 08-22-2022 - // Using an async layout import (i.e. `const Layout = (await import...)`) - // Preserves the dev server import cache when globbing a large set of MDX files - // Full explanation: 'https://github.com/withastro/astro/pull/4428' - exportNodes.unshift( - jsToTreeNode( - /** @see 'vite-plugin-markdown' for layout props reference */ - `import { jsx as layoutJsx } from 'astro/jsx-runtime'; - - export default async function ({ children }) { - const Layout = (await import(${JSON.stringify(frontmatter.layout)})).default; - const { layout, ...content } = frontmatter; - content.file = file; - content.url = url; - content.astro = {}; - Object.defineProperty(content.astro, 'headings', { - get() { - throw new Error('The "astro" property is no longer supported! To access "headings" from your layout, try using "Astro.props.headings."') - } - }); - Object.defineProperty(content.astro, 'html', { - get() { - throw new Error('The "astro" property is no longer supported! To access "html" from your layout, try using "Astro.props.compiledContent()."') - } - }); - Object.defineProperty(content.astro, 'source', { - get() { - throw new Error('The "astro" property is no longer supported! To access "source" from your layout, try using "Astro.props.rawContent()."') - } - }); - return layoutJsx(Layout, { - file, - url, - content, - frontmatter: content, - headings: getHeadings(), - 'server:root': true, - children, - }); - };` - ) - ); - } - tree.children = exportNodes.concat(tree.children); - }; -} - -/** - * Copied from markdown utils - * @see "vite-plugin-utils" - */ -function isValidAstroData(obj: unknown): obj is MarkdownAstroData { - if (typeof obj === 'object' && obj !== null && obj.hasOwnProperty('frontmatter')) { - const { frontmatter } = obj as any; - try { - // ensure frontmatter is JSON-serializable - JSON.stringify(frontmatter); - } catch { - return false; - } - return typeof frontmatter === 'object' && frontmatter !== null; - } - return false; -} - -/** - * Copied from markdown utils - * @see "vite-plugin-utils" - */ -export function safelyGetAstroData(vfileData: Data): MarkdownAstroData { - const { astro } = vfileData; - - if (!astro) return { frontmatter: {} }; - if (!isValidAstroData(astro)) { - throw Error( - `[MDX] A remark or rehype plugin tried to add invalid frontmatter. Ensure "astro.frontmatter" is a JSON object!` - ); - } - - return astro; -} diff --git a/packages/integrations/mdx/src/index.ts b/packages/integrations/mdx/src/index.ts index 571fecb678df..8909c8cae9fd 100644 --- a/packages/integrations/mdx/src/index.ts +++ b/packages/integrations/mdx/src/index.ts @@ -1,19 +1,19 @@ +import type { AstroIntegration } from 'astro'; +import type { Plugin as VitePlugin } from 'vite'; import { compile as mdxCompile } from '@mdx-js/mdx'; import mdxPlugin, { Options as MdxRollupPluginOptions } from '@mdx-js/rollup'; -import type { AstroIntegration } from 'astro'; import { parse as parseESM } from 'es-module-lexer'; import { blue, bold } from 'kleur/colors'; import { VFile } from 'vfile'; -import type { Plugin as VitePlugin } from 'vite'; -import { rehypeApplyFrontmatterExport } from './astro-data-utils.js'; -import type { MdxOptions } from './utils.js'; +import fs from 'node:fs/promises'; +import { getFileInfo, handleExtendsNotSupported, parseFrontmatter } from './utils.js'; import { - getFileInfo, + recmaInjectImportMetaEnvPlugin, + rehypeApplyFrontmatterExport, getRehypePlugins, getRemarkPlugins, - handleExtendsNotSupported, - parseFrontmatter, -} from './utils.js'; +} from './plugins.js'; +import { PluggableList } from '@mdx-js/mdx/lib/core.js'; 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'; @@ -21,6 +21,19 @@ const RAW_CONTENT_ERROR = const COMPILED_CONTENT_ERROR = 'MDX does not support compiledContent()! If you need to read the HTML contents to calculate values (ex. reading time), we suggest injecting frontmatter via rehype plugins. Learn more on our docs: https://docs.astro.build/en/guides/integrations-guide/mdx/#inject-frontmatter-via-remark-or-rehype-plugins'; +export type MdxOptions = { + remarkPlugins?: PluggableList; + rehypePlugins?: PluggableList; + /** + * Choose which remark and rehype plugins to inherit, if any. + * + * - "markdown" (default) - inherit your project’s markdown plugin config ([see Markdown docs](https://docs.astro.build/en/guides/markdown-content/#configuring-markdown)) + * - "astroDefaults" - inherit Astro’s default plugins only ([see defaults](https://docs.astro.build/en/reference/configuration-reference/#markdownextenddefaultplugins)) + * - false - do not inherit any plugins + */ + extendPlugins?: 'markdown' | 'astroDefaults' | false; +}; + export default function mdx(mdxOptions: MdxOptions = {}): AstroIntegration { return { name: '@astrojs/mdx', @@ -58,17 +71,28 @@ export default function mdx(mdxOptions: MdxOptions = {}): AstroIntegration { mdExtensions: [], }; + let importMetaEnv: Record = { + SITE: config.site, + }; + updateConfig({ vite: { plugins: [ { enforce: 'pre', ...mdxPlugin(mdxPluginOpts), + configResolved(resolved) { + importMetaEnv = { ...importMetaEnv, ...resolved.env }; + }, // Override transform to alter code before MDX compilation // ex. inject layouts - async transform(code, id) { + async transform(_, id) { if (!id.endsWith('mdx')) return; + // Read code from file manually to prevent Vite from parsing `import.meta.env` expressions + const { fileId } = getFileInfo(id, config); + const code = await fs.readFile(fileId, 'utf-8'); + const { data: frontmatter, content: pageContent } = parseFrontmatter(code, id); const compiled = await mdxCompile(new VFile({ value: pageContent, path: id }), { ...mdxPluginOpts, @@ -76,10 +100,11 @@ export default function mdx(mdxOptions: MdxOptions = {}): AstroIntegration { ...(mdxPluginOpts.rehypePlugins ?? []), () => rehypeApplyFrontmatterExport(frontmatter), ], + recmaPlugins: [() => recmaInjectImportMetaEnvPlugin({ importMetaEnv })], }); return { - code: String(compiled.value), + code: escapeViteEnvReferences(String(compiled.value)), map: compiled.map, }; }, @@ -123,7 +148,7 @@ export default function mdx(mdxOptions: MdxOptions = {}): AstroIntegration { import.meta.hot.decline(); }`; } - return code; + return escapeViteEnvReferences(code); }, }, ] as VitePlugin[], @@ -133,3 +158,10 @@ export default function mdx(mdxOptions: MdxOptions = {}): AstroIntegration { }, }; } + +// Converts the first dot in `import.meta.env` to its Unicode escape sequence, +// which prevents Vite from replacing strings like `import.meta.env.SITE` +// in our JS representation of loaded Markdown files +function escapeViteEnvReferences(code: string) { + return code.replace(/import\.meta\.env/g, 'import\\u002Emeta.env'); +} diff --git a/packages/integrations/mdx/src/plugins.ts b/packages/integrations/mdx/src/plugins.ts new file mode 100644 index 000000000000..f6911ba99858 --- /dev/null +++ b/packages/integrations/mdx/src/plugins.ts @@ -0,0 +1,273 @@ +import type { MemberExpression, Literal } from 'estree'; +import type { MarkdownAstroData, AstroConfig } from 'astro'; +import type { Data, VFile } from 'vfile'; +import { visit as estreeVisit } from 'estree-util-visit'; +import { jsToTreeNode } from './utils.js'; +import { nodeTypes } from '@mdx-js/mdx'; +import type { PluggableList } from '@mdx-js/mdx/lib/core.js'; +import type { Options as MdxRollupPluginOptions } from '@mdx-js/rollup'; +import { bold, yellow } from 'kleur/colors'; +import rehypeRaw from 'rehype-raw'; +import remarkGfm from 'remark-gfm'; +import remarkSmartypants from 'remark-smartypants'; +import rehypeCollectHeadings from './rehype-collect-headings.js'; +import remarkPrism from './remark-prism.js'; +import remarkShiki from './remark-shiki.js'; +import { MdxOptions } from './index.js'; + +export function recmaInjectImportMetaEnvPlugin({ + importMetaEnv, +}: { + importMetaEnv: Record; +}) { + return (tree: any) => { + estreeVisit(tree, (node) => { + if (node.type === 'MemberExpression') { + // attempt to get "import.meta.env" variable name + const envVarName = getImportMetaEnvVariableName(node as MemberExpression); + if (typeof envVarName === 'string') { + // clear object keys to replace with envVarLiteral + for (const key in node) { + delete (node as any)[key]; + } + const envVarLiteral: Literal = { + type: 'Literal', + value: importMetaEnv[envVarName], + raw: JSON.stringify(importMetaEnv[envVarName]), + }; + Object.assign(node, envVarLiteral); + } + } + }); + }; +} + +export function remarkInitializeAstroData() { + return function (tree: any, vfile: VFile) { + if (!vfile.data.astro) { + vfile.data.astro = { frontmatter: {} }; + } + }; +} + +const EXPORT_NAME = 'frontmatter'; + +export function rehypeApplyFrontmatterExport(pageFrontmatter: Record) { + return function (tree: any, vfile: VFile) { + const { frontmatter: injectedFrontmatter } = safelyGetAstroData(vfile.data); + const frontmatter = { ...injectedFrontmatter, ...pageFrontmatter }; + const exportNodes = [ + jsToTreeNode(`export const ${EXPORT_NAME} = ${JSON.stringify(frontmatter)};`), + ]; + if (frontmatter.layout) { + // NOTE(bholmesdev) 08-22-2022 + // Using an async layout import (i.e. `const Layout = (await import...)`) + // Preserves the dev server import cache when globbing a large set of MDX files + // Full explanation: 'https://github.com/withastro/astro/pull/4428' + exportNodes.unshift( + jsToTreeNode( + /** @see 'vite-plugin-markdown' for layout props reference */ + `import { jsx as layoutJsx } from 'astro/jsx-runtime'; + + export default async function ({ children }) { + const Layout = (await import(${JSON.stringify(frontmatter.layout)})).default; + const { layout, ...content } = frontmatter; + content.file = file; + content.url = url; + content.astro = {}; + Object.defineProperty(content.astro, 'headings', { + get() { + throw new Error('The "astro" property is no longer supported! To access "headings" from your layout, try using "Astro.props.headings."') + } + }); + Object.defineProperty(content.astro, 'html', { + get() { + throw new Error('The "astro" property is no longer supported! To access "html" from your layout, try using "Astro.props.compiledContent()."') + } + }); + Object.defineProperty(content.astro, 'source', { + get() { + throw new Error('The "astro" property is no longer supported! To access "source" from your layout, try using "Astro.props.rawContent()."') + } + }); + return layoutJsx(Layout, { + file, + url, + content, + frontmatter: content, + headings: getHeadings(), + 'server:root': true, + children, + }); + };` + ) + ); + } + tree.children = exportNodes.concat(tree.children); + }; +} + +const DEFAULT_REMARK_PLUGINS: PluggableList = [remarkGfm, remarkSmartypants]; +const DEFAULT_REHYPE_PLUGINS: PluggableList = []; + +export async function getRemarkPlugins( + mdxOptions: MdxOptions, + config: AstroConfig +): Promise { + let remarkPlugins: PluggableList = [ + // Set "vfile.data.astro" for plugins to inject frontmatter + remarkInitializeAstroData, + ]; + switch (mdxOptions.extendPlugins) { + case false: + break; + case 'astroDefaults': + remarkPlugins = [...remarkPlugins, ...DEFAULT_REMARK_PLUGINS]; + break; + default: + remarkPlugins = [ + ...remarkPlugins, + ...(markdownShouldExtendDefaultPlugins(config) ? DEFAULT_REMARK_PLUGINS : []), + ...ignoreStringPlugins(config.markdown.remarkPlugins ?? []), + ]; + break; + } + if (config.markdown.syntaxHighlight === 'shiki') { + remarkPlugins.push([await remarkShiki(config.markdown.shikiConfig)]); + } + if (config.markdown.syntaxHighlight === 'prism') { + remarkPlugins.push(remarkPrism); + } + + remarkPlugins = [...remarkPlugins, ...(mdxOptions.remarkPlugins ?? [])]; + return remarkPlugins; +} + +export function getRehypePlugins( + mdxOptions: MdxOptions, + config: AstroConfig +): MdxRollupPluginOptions['rehypePlugins'] { + let rehypePlugins: PluggableList = [ + // getHeadings() is guaranteed by TS, so we can't allow user to override + rehypeCollectHeadings, + // rehypeRaw allows custom syntax highlighters to work without added config + [rehypeRaw, { passThrough: nodeTypes }] as any, + ]; + switch (mdxOptions.extendPlugins) { + case false: + break; + case 'astroDefaults': + rehypePlugins = [...rehypePlugins, ...DEFAULT_REHYPE_PLUGINS]; + break; + default: + rehypePlugins = [ + ...rehypePlugins, + ...(markdownShouldExtendDefaultPlugins(config) ? DEFAULT_REHYPE_PLUGINS : []), + ...ignoreStringPlugins(config.markdown.rehypePlugins ?? []), + ]; + break; + } + + rehypePlugins = [...rehypePlugins, ...(mdxOptions.rehypePlugins ?? [])]; + return rehypePlugins; +} + +function markdownShouldExtendDefaultPlugins(config: AstroConfig): boolean { + return ( + config.markdown.extendDefaultPlugins || + (config.markdown.remarkPlugins.length === 0 && config.markdown.rehypePlugins.length === 0) + ); +} + +function ignoreStringPlugins(plugins: any[]) { + let validPlugins: PluggableList = []; + let hasInvalidPlugin = false; + for (const plugin of plugins) { + if (typeof plugin === 'string') { + console.warn(yellow(`[MDX] ${bold(plugin)} not applied.`)); + hasInvalidPlugin = true; + } else if (Array.isArray(plugin) && typeof plugin[0] === 'string') { + console.warn(yellow(`[MDX] ${bold(plugin[0])} not applied.`)); + hasInvalidPlugin = true; + } else { + validPlugins.push(plugin); + } + } + if (hasInvalidPlugin) { + console.warn( + `To inherit Markdown plugins in MDX, please use explicit imports in your config instead of "strings." See Markdown docs: https://docs.astro.build/en/guides/markdown-content/#markdown-plugins` + ); + } + return validPlugins; +} + +/** + * Copied from markdown utils + * @see "vite-plugin-utils" + */ +function isValidAstroData(obj: unknown): obj is MarkdownAstroData { + if (typeof obj === 'object' && obj !== null && obj.hasOwnProperty('frontmatter')) { + const { frontmatter } = obj as any; + try { + // ensure frontmatter is JSON-serializable + JSON.stringify(frontmatter); + } catch { + return false; + } + return typeof frontmatter === 'object' && frontmatter !== null; + } + return false; +} + +/** + * Copied from markdown utils + * @see "vite-plugin-utils" + */ +function safelyGetAstroData(vfileData: Data): MarkdownAstroData { + const { astro } = vfileData; + + if (!astro) return { frontmatter: {} }; + if (!isValidAstroData(astro)) { + throw Error( + `[MDX] A remark or rehype plugin tried to add invalid frontmatter. Ensure "astro.frontmatter" is a JSON object!` + ); + } + + return astro; +} + +/** + * Check if estree entry is "import.meta.env.VARIABLE" + * If it is, return the variable name (i.e. "VARIABLE") + */ +function getImportMetaEnvVariableName(node: MemberExpression): string | Error { + try { + // check for ".[ANYTHING]" + if (node.object.type !== 'MemberExpression' || node.property.type !== 'Identifier') + return new Error(); + + const nestedExpression = node.object; + // check for ".env" + if (nestedExpression.property.type !== 'Identifier' || nestedExpression.property.name !== 'env') + return new Error(); + + const envExpression = nestedExpression.object; + // check for ".meta" + if ( + envExpression.type !== 'MetaProperty' || + envExpression.property.type !== 'Identifier' || + envExpression.property.name !== 'meta' + ) + return new Error(); + + // check for "import" + if (envExpression.meta.name !== 'import') return new Error(); + + return node.property.name; + } catch (e) { + if (e instanceof Error) { + return e; + } + return new Error('Unknown parsing error'); + } +} diff --git a/packages/integrations/mdx/src/utils.ts b/packages/integrations/mdx/src/utils.ts index d4d13ab05ea8..60a50c85a4a0 100644 --- a/packages/integrations/mdx/src/utils.ts +++ b/packages/integrations/mdx/src/utils.ts @@ -1,32 +1,8 @@ -import { nodeTypes } from '@mdx-js/mdx'; -import type { PluggableList } from '@mdx-js/mdx/lib/core.js'; -import type { Options as MdxRollupPluginOptions } from '@mdx-js/rollup'; import type { Options as AcornOpts } from 'acorn'; import { parse } from 'acorn'; import type { AstroConfig, SSRError } from 'astro'; import matter from 'gray-matter'; -import { bold, yellow } from 'kleur/colors'; import type { MdxjsEsm } from 'mdast-util-mdx'; -import rehypeRaw from 'rehype-raw'; -import remarkGfm from 'remark-gfm'; -import remarkSmartypants from 'remark-smartypants'; -import { remarkInitializeAstroData } from './astro-data-utils.js'; -import rehypeCollectHeadings from './rehype-collect-headings.js'; -import remarkPrism from './remark-prism.js'; -import remarkShiki from './remark-shiki.js'; - -export type MdxOptions = { - remarkPlugins?: PluggableList; - rehypePlugins?: PluggableList; - /** - * Choose which remark and rehype plugins to inherit, if any. - * - * - "markdown" (default) - inherit your project’s markdown plugin config ([see Markdown docs](https://docs.astro.build/en/guides/markdown-content/#configuring-markdown)) - * - "astroDefaults" - inherit Astro’s default plugins only ([see defaults](https://docs.astro.build/en/reference/configuration-reference/#markdownextenddefaultplugins)) - * - false - do not inherit any plugins - */ - extendPlugins?: 'markdown' | 'astroDefaults' | false; -}; function appendForwardSlash(path: string) { return path.endsWith('/') ? path : path + '/'; @@ -37,9 +13,6 @@ interface FileInfo { fileUrl: string; } -const DEFAULT_REMARK_PLUGINS: PluggableList = [remarkGfm, remarkSmartypants]; -const DEFAULT_REHYPE_PLUGINS: PluggableList = []; - /** @see 'vite-plugin-utils' for source */ export function getFileInfo(id: string, config: AstroConfig): FileInfo { const sitePathname = appendForwardSlash( @@ -110,97 +83,6 @@ export function jsToTreeNode( }; } -export async function getRemarkPlugins( - mdxOptions: MdxOptions, - config: AstroConfig -): Promise { - let remarkPlugins: PluggableList = [ - // Set "vfile.data.astro" for plugins to inject frontmatter - remarkInitializeAstroData, - ]; - switch (mdxOptions.extendPlugins) { - case false: - break; - case 'astroDefaults': - remarkPlugins = [...remarkPlugins, ...DEFAULT_REMARK_PLUGINS]; - break; - default: - remarkPlugins = [ - ...remarkPlugins, - ...(markdownShouldExtendDefaultPlugins(config) ? DEFAULT_REMARK_PLUGINS : []), - ...ignoreStringPlugins(config.markdown.remarkPlugins ?? []), - ]; - break; - } - if (config.markdown.syntaxHighlight === 'shiki') { - remarkPlugins.push([await remarkShiki(config.markdown.shikiConfig)]); - } - if (config.markdown.syntaxHighlight === 'prism') { - remarkPlugins.push(remarkPrism); - } - - remarkPlugins = [...remarkPlugins, ...(mdxOptions.remarkPlugins ?? [])]; - return remarkPlugins; -} - -export function getRehypePlugins( - mdxOptions: MdxOptions, - config: AstroConfig -): MdxRollupPluginOptions['rehypePlugins'] { - let rehypePlugins: PluggableList = [ - // getHeadings() is guaranteed by TS, so we can't allow user to override - rehypeCollectHeadings, - // rehypeRaw allows custom syntax highlighters to work without added config - [rehypeRaw, { passThrough: nodeTypes }] as any, - ]; - switch (mdxOptions.extendPlugins) { - case false: - break; - case 'astroDefaults': - rehypePlugins = [...rehypePlugins, ...DEFAULT_REHYPE_PLUGINS]; - break; - default: - rehypePlugins = [ - ...rehypePlugins, - ...(markdownShouldExtendDefaultPlugins(config) ? DEFAULT_REHYPE_PLUGINS : []), - ...ignoreStringPlugins(config.markdown.rehypePlugins ?? []), - ]; - break; - } - - rehypePlugins = [...rehypePlugins, ...(mdxOptions.rehypePlugins ?? [])]; - return rehypePlugins; -} - -function markdownShouldExtendDefaultPlugins(config: AstroConfig): boolean { - return ( - config.markdown.extendDefaultPlugins || - (config.markdown.remarkPlugins.length === 0 && config.markdown.rehypePlugins.length === 0) - ); -} - -function ignoreStringPlugins(plugins: any[]) { - let validPlugins: PluggableList = []; - let hasInvalidPlugin = false; - for (const plugin of plugins) { - if (typeof plugin === 'string') { - console.warn(yellow(`[MDX] ${bold(plugin)} not applied.`)); - hasInvalidPlugin = true; - } else if (Array.isArray(plugin) && typeof plugin[0] === 'string') { - console.warn(yellow(`[MDX] ${bold(plugin[0])} not applied.`)); - hasInvalidPlugin = true; - } else { - validPlugins.push(plugin); - } - } - if (hasInvalidPlugin) { - console.warn( - `To inherit Markdown plugins in MDX, please use explicit imports in your config instead of "strings." See Markdown docs: https://docs.astro.build/en/guides/markdown-content/#markdown-plugins` - ); - } - return validPlugins; -} - // TODO: remove for 1.0 export function handleExtendsNotSupported(pluginConfig: any) { if ( diff --git a/packages/integrations/mdx/test/fixtures/mdx-vite-env-vars/astro.config.mjs b/packages/integrations/mdx/test/fixtures/mdx-vite-env-vars/astro.config.mjs new file mode 100644 index 000000000000..df0e781939e8 --- /dev/null +++ b/packages/integrations/mdx/test/fixtures/mdx-vite-env-vars/astro.config.mjs @@ -0,0 +1,9 @@ +import mdx from '@astrojs/mdx'; + +export default { + site: 'https://mdx-is-neat.com/', + markdown: { + syntaxHighlight: false, + }, + integrations: [mdx()], +} diff --git a/packages/integrations/mdx/test/fixtures/mdx-vite-env-vars/package.json b/packages/integrations/mdx/test/fixtures/mdx-vite-env-vars/package.json new file mode 100644 index 000000000000..d282c887ec25 --- /dev/null +++ b/packages/integrations/mdx/test/fixtures/mdx-vite-env-vars/package.json @@ -0,0 +1,7 @@ +{ + "name": "@test/mdx-env-variables", + "dependencies": { + "astro": "workspace:*", + "@astrojs/mdx": "workspace:*" + } +} diff --git a/packages/integrations/mdx/test/fixtures/mdx-vite-env-vars/src/pages/frontmatter.json.js b/packages/integrations/mdx/test/fixtures/mdx-vite-env-vars/src/pages/frontmatter.json.js new file mode 100644 index 000000000000..ce3cf81e5cf8 --- /dev/null +++ b/packages/integrations/mdx/test/fixtures/mdx-vite-env-vars/src/pages/frontmatter.json.js @@ -0,0 +1,7 @@ +import { frontmatter } from './vite-env-vars.mdx'; + +export function get() { + return { + body: JSON.stringify(frontmatter), + } +} diff --git a/packages/integrations/mdx/test/fixtures/mdx-vite-env-vars/src/pages/vite-env-vars.mdx b/packages/integrations/mdx/test/fixtures/mdx-vite-env-vars/src/pages/vite-env-vars.mdx new file mode 100644 index 000000000000..dae32aed2d8f --- /dev/null +++ b/packages/integrations/mdx/test/fixtures/mdx-vite-env-vars/src/pages/vite-env-vars.mdx @@ -0,0 +1,38 @@ +--- +title: Let's talk about my import.meta.env.SITE +--- + +export const modeWorks = + import.meta.env.MODE === 'production' ? 'MODE works' : 'MODE does not work!'; + +# About my import.meta.env.SITE + +My `import.meta.env.SITE` is so cool, I can put env variables in code! + +```js +const site = import.meta.env.SITE; +``` + +## But I can use import.meta.env properly too + +
+ +I can compute my site, for example: {new URL('/blog/cool-post', import.meta.env.SITE)} + +
+ +
+ +I can also use `import.meta.env` in variable exports: {modeWorks} + +
+ +I can also use vars as HTML attributes: + +
diff --git a/packages/integrations/mdx/test/mdx-vite-env-vars.test.js b/packages/integrations/mdx/test/mdx-vite-env-vars.test.js new file mode 100644 index 000000000000..9504b7305a3b --- /dev/null +++ b/packages/integrations/mdx/test/mdx-vite-env-vars.test.js @@ -0,0 +1,58 @@ +import { expect } from 'chai'; +import { parseHTML } from 'linkedom'; +import { loadFixture } from '../../../astro/test/test-utils.js'; + +describe('MDX - Vite env vars', () => { + let fixture; + before(async () => { + fixture = await loadFixture({ + root: new URL('./fixtures/mdx-vite-env-vars/', import.meta.url), + }); + await fixture.build(); + }); + + it('Avoids transforming `import.meta.env` outside JSX expressions', async () => { + const html = await fixture.readFile('/vite-env-vars/index.html'); + const { document } = parseHTML(html); + + expect(document.querySelector('h1')?.innerHTML).to.contain('import.meta.env.SITE'); + expect(document.querySelector('code')?.innerHTML).to.contain('import.meta.env.SITE'); + expect(document.querySelector('pre')?.innerHTML).to.contain('import.meta.env.SITE'); + }); + it('Allows referencing `import.meta.env` in frontmatter', async () => { + const { title = '' } = JSON.parse(await fixture.readFile('/frontmatter.json')); + expect(title).to.contain('import.meta.env.SITE'); + }); + it('Transforms `import.meta.env` in {JSX expressions}', async () => { + const html = await fixture.readFile('/vite-env-vars/index.html'); + const { document } = parseHTML(html); + + expect(document.querySelector('[data-env-site]')?.innerHTML).to.contain( + 'https://mdx-is-neat.com/blog/cool-post', + ); + }); + it('Transforms `import.meta.env` in variable exports', async () => { + const html = await fixture.readFile('/vite-env-vars/index.html'); + const { document } = parseHTML(html); + + expect(document.querySelector('[data-env-variable-exports]')?.innerHTML).to.contain( + 'MODE works', + ); + }); + it('Transforms `import.meta.env` in HTML attributes', async () => { + const html = await fixture.readFile('/vite-env-vars/index.html'); + const { document } = parseHTML(html); + + const dataAttrDump = document.querySelector('[data-env-dump]'); + expect(dataAttrDump).to.not.be.null; + + expect(dataAttrDump.getAttribute('data-env-prod')).to.not.be.null; + expect(dataAttrDump.getAttribute('data-env-dev')).to.be.null; + expect(dataAttrDump.getAttribute('data-env-base-url')).to.equal( + '/', + ); + expect(dataAttrDump.getAttribute('data-env-mode')).to.equal( + 'production', + ); + }); +}); diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 3a3859003b56..65787cd0d909 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -2440,6 +2440,7 @@ importers: '@mdx-js/mdx': ^2.1.2 '@mdx-js/rollup': ^2.1.1 '@types/chai': ^4.3.1 + '@types/estree': ^1.0.0 '@types/mocha': ^9.1.1 '@types/yargs-parser': ^21.0.0 acorn: ^8.8.0 @@ -2447,6 +2448,7 @@ importers: astro-scripts: workspace:* chai: ^4.3.6 es-module-lexer: ^0.10.5 + estree-util-visit: ^1.2.0 github-slugger: ^1.4.0 gray-matter: ^4.0.3 kleur: ^4.1.4 @@ -2469,6 +2471,7 @@ importers: '@mdx-js/rollup': 2.1.3 acorn: 8.8.0 es-module-lexer: 0.10.5 + estree-util-visit: 1.2.0 github-slugger: 1.4.0 gray-matter: 4.0.3 kleur: 4.1.5 @@ -2481,6 +2484,7 @@ importers: vfile: 5.3.5 devDependencies: '@types/chai': 4.3.3 + '@types/estree': 1.0.0 '@types/mocha': 9.1.1 '@types/yargs-parser': 21.0.0 astro: link:../../astro @@ -2535,6 +2539,14 @@ importers: '@astrojs/react': link:../../../../react astro: link:../../../../../astro + packages/integrations/mdx/test/fixtures/mdx-vite-env-vars: + specifiers: + '@astrojs/mdx': workspace:* + astro: workspace:* + dependencies: + '@astrojs/mdx': link:../../.. + astro: link:../../../../../astro + packages/integrations/netlify: specifiers: '@astrojs/webapi': ^1.0.0 @@ -9062,7 +9074,6 @@ packages: /@types/estree/1.0.0: resolution: {integrity: sha512-WulqXMDUTYAXCjZnk6JtIHPigp55cVtDgDrO2gHRwhyJto21+1zbVCtOYB2L1F9w4qCQ0rOGWBnBe0FNTiEJIQ==} - dev: false /@types/extend/3.0.1: resolution: {integrity: sha512-R1g/VyKFFI2HLC1QGAeTtCBWCo6n75l41OnsVYNbmKG+kempOESaodf6BeJyUM3Q0rKa/NQcTHbB2+66lNnxLw==}