feat: expose jsToMdxTreeNode util
This commit is contained in:
bholmesdev
parent
15174fa532
commit
e05ef2d492
6 changed files with 116 additions and 103 deletions
|
|
@ -20,6 +20,7 @@
|
|||
"homepage": "https://docs.astro.build/en/guides/integrations-guide/mdx/",
|
||||
"exports": {
|
||||
".": "./dist/index.js",
|
||||
"./utils": "./dist/utils.js",
|
||||
"./package.json": "./package.json"
|
||||
},
|
||||
"scripts": {
|
||||
|
|
|
|||
|
|
@ -5,8 +5,7 @@ import type { AstroIntegration } from 'astro';
|
|||
import { parse as parseESM } from 'es-module-lexer';
|
||||
import { blue, bold } from 'kleur/colors';
|
||||
import fs from 'node:fs/promises';
|
||||
import { VFile } from 'vfile';
|
||||
import type { Plugin as VitePlugin } from 'vite';
|
||||
import { getFileInfo, handleExtendsNotSupported, parseFrontmatter } from './internal-utils.js';
|
||||
import {
|
||||
getRehypePlugins,
|
||||
getRemarkPlugins,
|
||||
|
|
|
|||
104
packages/integrations/mdx/src/internal-utils.ts
Normal file
104
packages/integrations/mdx/src/internal-utils.ts
Normal file
|
|
@ -0,0 +1,104 @@
|
|||
import type { Options as AcornOpts } from 'acorn';
|
||||
import { parse } from 'acorn';
|
||||
import type { AstroConfig, SSRError } from 'astro';
|
||||
import matter from 'gray-matter';
|
||||
import type { MdxjsEsm } from 'mdast-util-mdx';
|
||||
|
||||
function appendForwardSlash(path: string) {
|
||||
return path.endsWith('/') ? path : path + '/';
|
||||
}
|
||||
|
||||
interface FileInfo {
|
||||
fileId: string;
|
||||
fileUrl: string;
|
||||
}
|
||||
|
||||
/** @see 'vite-plugin-utils' for source */
|
||||
export function getFileInfo(id: string, config: AstroConfig): FileInfo {
|
||||
const sitePathname = appendForwardSlash(
|
||||
config.site ? new URL(config.base, config.site).pathname : config.base
|
||||
);
|
||||
|
||||
// Try to grab the file's actual URL
|
||||
let url: URL | undefined = undefined;
|
||||
try {
|
||||
url = new URL(`file://${id}`);
|
||||
} catch {}
|
||||
|
||||
const fileId = id.split('?')[0];
|
||||
let fileUrl: string;
|
||||
const isPage = fileId.includes('/pages/');
|
||||
if (isPage) {
|
||||
fileUrl = fileId.replace(/^.*?\/pages\//, sitePathname).replace(/(\/index)?\.mdx$/, '');
|
||||
} else if (url && url.pathname.startsWith(config.root.pathname)) {
|
||||
fileUrl = url.pathname.slice(config.root.pathname.length);
|
||||
} else {
|
||||
fileUrl = fileId;
|
||||
}
|
||||
|
||||
if (fileUrl && config.trailingSlash === 'always') {
|
||||
fileUrl = appendForwardSlash(fileUrl);
|
||||
}
|
||||
return { fileId, fileUrl };
|
||||
}
|
||||
|
||||
/**
|
||||
* Match YAML exception handling from Astro core errors
|
||||
* @see 'astro/src/core/errors.ts'
|
||||
*/
|
||||
export function parseFrontmatter(code: string, id: string) {
|
||||
try {
|
||||
return matter(code);
|
||||
} catch (e: any) {
|
||||
if (e.name === 'YAMLException') {
|
||||
const err: SSRError = e;
|
||||
err.id = id;
|
||||
err.loc = { file: e.id, line: e.mark.line + 1, column: e.mark.column };
|
||||
err.message = e.reason;
|
||||
throw err;
|
||||
} else {
|
||||
throw e;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Convert a string of JavaScript to an MDX-compatible tree node
|
||||
* for use in remark or rehype plugins
|
||||
* @param jsString String of valid JavaScript
|
||||
* @param acornOpts Acorn parser options ([see Acorn docs](https://github.com/acornjs/acorn/tree/master/acorn#interface) for more).
|
||||
* @returns An MDX-compatible tree node
|
||||
*/
|
||||
export function jsToMdxTreeNode(
|
||||
jsString: string,
|
||||
acornOpts: AcornOpts = {
|
||||
ecmaVersion: 'latest',
|
||||
sourceType: 'module',
|
||||
}
|
||||
): MdxjsEsm {
|
||||
return {
|
||||
type: 'mdxjsEsm',
|
||||
value: '',
|
||||
data: {
|
||||
estree: {
|
||||
body: [],
|
||||
...parse(jsString, acornOpts),
|
||||
type: 'Program',
|
||||
sourceType: 'module',
|
||||
},
|
||||
},
|
||||
};
|
||||
}
|
||||
|
||||
// TODO: remove for 1.0
|
||||
export function handleExtendsNotSupported(pluginConfig: any) {
|
||||
if (
|
||||
typeof pluginConfig === 'object' &&
|
||||
pluginConfig !== null &&
|
||||
(pluginConfig as any).hasOwnProperty('extends')
|
||||
) {
|
||||
throw new Error(
|
||||
`[MDX] The "extends" plugin option is no longer supported! Astro now extends your project's \`markdown\` plugin configuration by default. To customize this behavior, see the \`extendPlugins\` option instead: https://docs.astro.build/en/guides/integrations-guide/mdx/#extendplugins`
|
||||
);
|
||||
}
|
||||
}
|
||||
|
|
@ -1,3 +1,8 @@
|
|||
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 { jsToMdxTreeNode } from './internal-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';
|
||||
|
|
@ -57,7 +62,7 @@ export function rehypeApplyFrontmatterExport(pageFrontmatter: Record<string, any
|
|||
const { frontmatter: injectedFrontmatter } = safelyGetAstroData(vfile.data);
|
||||
const frontmatter = { ...injectedFrontmatter, ...pageFrontmatter };
|
||||
const exportNodes = [
|
||||
jsToTreeNode(`export const ${EXPORT_NAME} = ${JSON.stringify(frontmatter)};`),
|
||||
jsToMdxTreeNode(`export const ${EXPORT_NAME} = ${JSON.stringify(frontmatter)};`),
|
||||
];
|
||||
if (frontmatter.layout) {
|
||||
// NOTE(bholmesdev) 08-22-2022
|
||||
|
|
@ -65,7 +70,7 @@ export function rehypeApplyFrontmatterExport(pageFrontmatter: Record<string, any
|
|||
// 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(
|
||||
jsToMdxTreeNode(
|
||||
/** @see 'vite-plugin-markdown' for layout props reference */
|
||||
`import { jsx as layoutJsx } from 'astro/jsx-runtime';
|
||||
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
import Slugger from 'github-slugger';
|
||||
import { visit } from 'unist-util-visit';
|
||||
import { jsToTreeNode } from './utils.js';
|
||||
import { jsToMdxTreeNode } from './internal-utils.js';
|
||||
|
||||
export interface MarkdownHeading {
|
||||
depth: number;
|
||||
|
|
@ -44,7 +44,7 @@ export default function rehypeCollectHeadings() {
|
|||
headings.push({ depth, slug: node.properties.id, text });
|
||||
});
|
||||
tree.children.unshift(
|
||||
jsToTreeNode(`export function getHeadings() { return ${JSON.stringify(headings)} }`)
|
||||
jsToMdxTreeNode(`export function getHeadings() { return ${JSON.stringify(headings)} }`)
|
||||
);
|
||||
};
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,97 +1 @@
|
|||
import type { Options as AcornOpts } from 'acorn';
|
||||
import { parse } from 'acorn';
|
||||
import type { AstroConfig, SSRError } from 'astro';
|
||||
import matter from 'gray-matter';
|
||||
import type { MdxjsEsm } from 'mdast-util-mdx';
|
||||
|
||||
function appendForwardSlash(path: string) {
|
||||
return path.endsWith('/') ? path : path + '/';
|
||||
}
|
||||
|
||||
interface FileInfo {
|
||||
fileId: string;
|
||||
fileUrl: string;
|
||||
}
|
||||
|
||||
/** @see 'vite-plugin-utils' for source */
|
||||
export function getFileInfo(id: string, config: AstroConfig): FileInfo {
|
||||
const sitePathname = appendForwardSlash(
|
||||
config.site ? new URL(config.base, config.site).pathname : config.base
|
||||
);
|
||||
|
||||
// Try to grab the file's actual URL
|
||||
let url: URL | undefined = undefined;
|
||||
try {
|
||||
url = new URL(`file://${id}`);
|
||||
} catch {}
|
||||
|
||||
const fileId = id.split('?')[0];
|
||||
let fileUrl: string;
|
||||
const isPage = fileId.includes('/pages/');
|
||||
if (isPage) {
|
||||
fileUrl = fileId.replace(/^.*?\/pages\//, sitePathname).replace(/(\/index)?\.mdx$/, '');
|
||||
} else if (url && url.pathname.startsWith(config.root.pathname)) {
|
||||
fileUrl = url.pathname.slice(config.root.pathname.length);
|
||||
} else {
|
||||
fileUrl = fileId;
|
||||
}
|
||||
|
||||
if (fileUrl && config.trailingSlash === 'always') {
|
||||
fileUrl = appendForwardSlash(fileUrl);
|
||||
}
|
||||
return { fileId, fileUrl };
|
||||
}
|
||||
|
||||
/**
|
||||
* Match YAML exception handling from Astro core errors
|
||||
* @see 'astro/src/core/errors.ts'
|
||||
*/
|
||||
export function parseFrontmatter(code: string, id: string) {
|
||||
try {
|
||||
return matter(code);
|
||||
} catch (e: any) {
|
||||
if (e.name === 'YAMLException') {
|
||||
const err: SSRError = e;
|
||||
err.id = id;
|
||||
err.loc = { file: e.id, line: e.mark.line + 1, column: e.mark.column };
|
||||
err.message = e.reason;
|
||||
throw err;
|
||||
} else {
|
||||
throw e;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
export function jsToTreeNode(
|
||||
jsString: string,
|
||||
acornOpts: AcornOpts = {
|
||||
ecmaVersion: 'latest',
|
||||
sourceType: 'module',
|
||||
}
|
||||
): MdxjsEsm {
|
||||
return {
|
||||
type: 'mdxjsEsm',
|
||||
value: '',
|
||||
data: {
|
||||
estree: {
|
||||
body: [],
|
||||
...parse(jsString, acornOpts),
|
||||
type: 'Program',
|
||||
sourceType: 'module',
|
||||
},
|
||||
},
|
||||
};
|
||||
}
|
||||
|
||||
// TODO: remove for 1.0
|
||||
export function handleExtendsNotSupported(pluginConfig: any) {
|
||||
if (
|
||||
typeof pluginConfig === 'object' &&
|
||||
pluginConfig !== null &&
|
||||
(pluginConfig as any).hasOwnProperty('extends')
|
||||
) {
|
||||
throw new Error(
|
||||
`[MDX] The "extends" plugin option is no longer supported! Astro now extends your project's \`markdown\` plugin configuration by default. To customize this behavior, see the \`extendPlugins\` option instead: https://docs.astro.build/en/guides/integrations-guide/mdx/#extendplugins`
|
||||
);
|
||||
}
|
||||
}
|
||||
export { jsToMdxTreeNode } from './internal-utils.js';
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue