michael/astro
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

Markdown issue cleanup (#224)

Browse source 
* fix: markdown issues

* chore: add changeset

* chore: add missing dep

* perf: parallelize compileHtml for children
This commit is contained in:
Nate Moore 2021-05-21 15:52:20 -05:00 committed by GitHub
parent 19e20f2c54
commit 9cdada0bcc
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
16 changed files with 380 additions and 206 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

6
.changeset/spotty-ways-leave.md Normal file
View file

@ -0,0 +1,6 @@
---
'astro': patch
'astro-parser': patch
---
Fixes a few edge case bugs with Astro's handling of Markdown content

10
packages/astro-parser/src/parse/state/text.ts
View file

@ -8,7 +8,15 @@ export default function text(parser: Parser) {
let data = '';
while (parser.index < parser.template.length && !parser.match('---') && !parser.match('<') && !parser.match('{') && !parser.match('`')) {
const shouldContinue = () => {
// Special case 'code' content to avoid tripping up on user code
if (parser.current().name === 'code') {
return !parser.match('<') && !parser.match('{');
}
return !parser.match('---') && !parser.match('<') && !parser.match('{') && !parser.match('`');
}
while (parser.index < parser.template.length && shouldContinue()) {
data += parser.template[parser.index++];
}

1
packages/astro/package.json
View file

@ -61,6 +61,7 @@
"locate-character": "^2.0.5",
"magic-string": "^0.25.3",
"mdast-util-mdx": "^0.1.1",
"micromark-extension-mdxjs": "^0.3.0",
"mime": "^2.5.2",
"moize": "^6.0.1",
"node-fetch": "^2.6.1",

8
packages/astro/src/@types/astro.ts
View file

@ -8,12 +8,20 @@ export interface AstroConfigRaw {
export type ValidExtensionPlugins = 'astro' | 'react' | 'preact' | 'svelte' | 'vue';
export interface AstroMarkdownOptions {
/** Enable or disable footnotes syntax extension */
footnotes: boolean;
/** Enable or disable GitHub-flavored Markdown syntax extension */
gfm: boolean;
}
export interface AstroConfig {
dist: string;
projectRoot: URL;
astroRoot: URL;
public: URL;
extensions?: Record<string, ValidExtensionPlugins>;
/** Options for rendering markdown content */
markdownOptions?: Partial<AstroMarkdownOptions>;
/** Options specific to `astro build` */
buildOptions: {
/** Your public domain, e.g.: https://my-site.dev/. Used to generate sitemaps and canonical URLs. */

334
packages/astro/src/compiler/codegen/index.ts
View file

@ -1,12 +1,13 @@
import type { Ast, Script, Style, TemplateNode } from 'astro-parser';
import type { CompileOptions } from '../../@types/compiler';
import type { AstroConfig, TransformResult, ValidExtensionPlugins } from '../../@types/astro';
import type { AstroConfig, AstroMarkdownOptions, TransformResult, ValidExtensionPlugins } from '../../@types/astro';
import 'source-map-support/register.js';
import eslexer from 'es-module-lexer';
import esbuild from 'esbuild';
import path from 'path';
import { walk } from 'estree-walker';
import { parse } from 'astro-parser';
import { walk, asyncWalk } from 'estree-walker';
import _babelGenerator from '@babel/generator';
import babelParser from '@babel/parser';
import { codeFrameColumns } from '@babel/code-frame';
@ -16,6 +17,7 @@ import { error, warn } from '../../logger.js';
import { fetchContent } from './content.js';
import { isFetchContent } from './utils.js';
import { yellow } from 'kleur/colors';
import { MarkdownRenderingOptions, renderMarkdown } from '../utils';
const traverse: typeof babelTraverse.default = (babelTraverse.default as any).default;
@ -306,7 +308,7 @@ interface CodegenState {
components: Components;
css: string[];
markers: {
insideMarkdown: boolean | string;
insideMarkdown: boolean | Record<string, any>;
};
importExportStatements: Set<string>;
dynamicImports: DynamicImportMap;
@ -538,160 +540,210 @@ function compileCss(style: Style, state: CodegenState) {
});
}
/** dedent markdown */
function dedent(str: string) {
let arr = str.match(/^[ \t]*(?=\S)/gm);
let first = !!arr && arr.find((x) => x.length > 0)?.length;
return !arr || !first ? str : str.replace(new RegExp(`^[ \\t]{0,${first}}`, 'gm'), '');
}
/** Compile page markup */
function compileHtml(enterNode: TemplateNode, state: CodegenState, compileOptions: CompileOptions) {
const { components, css, importExportStatements, dynamicImports, filename } = state;
const { astroConfig } = compileOptions;
async function compileHtml(enterNode: TemplateNode, state: CodegenState, compileOptions: CompileOptions): Promise<string> {
return new Promise((resolve) => {
const { components, css, importExportStatements, dynamicImports, filename } = state;
const { astroConfig } = compileOptions;
let outSource = '';
walk(enterNode, {
enter(node: TemplateNode, parent: TemplateNode) {
switch (node.type) {
case 'Expression': {
let children: string[] = [];
for (const child of node.children || []) {
children.push(compileHtml(child, state, compileOptions));
}
let raw = '';
let nextChildIndex = 0;
for (const chunk of node.codeChunks) {
raw += chunk;
if (nextChildIndex < children.length) {
raw += children[nextChildIndex++];
}
}
// TODO Do we need to compile this now, or should we compile the entire module at the end?
let code = compileExpressionSafe(raw).trim().replace(/\;$/, '');
outSource += `,(${code})`;
this.skip();
break;
}
case 'MustacheTag':
case 'Comment':
return;
case 'Fragment':
break;
case 'Slot':
case 'Head':
case 'InlineComponent':
case 'Title':
case 'Element': {
const name: string = node.name;
if (!name) {
throw new Error('AHHHH');
}
try {
const attributes = getAttributes(node.attributes);
let paren = -1;
let buffers = {
out: '',
markdown: '',
};
let curr: keyof typeof buffers = 'out';
outSource += outSource === '' ? '' : ',';
if (node.type === 'Slot') {
outSource += `(children`;
return;
}
const COMPONENT_NAME_SCANNER = /^[A-Z]/;
if (!COMPONENT_NAME_SCANNER.test(name)) {
outSource += `h("${name}", ${attributes ? generateAttributes(attributes) : 'null'}`;
if (state.markers.insideMarkdown) {
outSource += `,h(__astroMarkdownRender, null`;
/** renders markdown stored in `buffers.markdown` to JSX and pushes that to `buffers.out` */
async function pushMarkdownToBuffer() {
const md = buffers.markdown;
const { markdownOptions = {} } = astroConfig;
const { $scope: scopedClassName } = state.markers.insideMarkdown as Record<'$scope', any>;
let { content: rendered } = await renderMarkdown(dedent(md), { ...markdownOptions as AstroMarkdownOptions, mode: 'astro-md', $: { scopedClassName: scopedClassName.slice(1, -1) } });
const ast = parse(rendered);
const result = await compileHtml(ast.html, {...state, markers: {...state.markers, insideMarkdown: false }}, compileOptions);
buffers.out += ',' + result;
buffers.markdown = '';
curr = 'out';
}
asyncWalk(enterNode, {
async enter(node: TemplateNode, parent: TemplateNode) {
switch (node.type) {
case 'Expression': {
const children: string[] = await Promise.all((node.children ?? []).map(child => compileHtml(child, state, compileOptions)));
let raw = '';
let nextChildIndex = 0;
for (const chunk of node.codeChunks) {
raw += chunk;
if (nextChildIndex < children.length) {
raw += children[nextChildIndex++];
}
return;
}
const [componentName, componentKind] = name.split(':');
const componentImportData = components[componentName];
if (!componentImportData) {
throw new Error(`Unknown Component: ${componentName}`);
// TODO Do we need to compile this now, or should we compile the entire module at the end?
let code = compileExpressionSafe(raw).trim().replace(/\;$/, '');
if (state.markers.insideMarkdown) {
buffers[curr] += `{${code}}`;
} else {
buffers[curr] += `,(${code})`;
}
if (componentImportData.type === '.astro') {
if (componentName === 'Markdown') {
const attributeStr = attributes ? generateAttributes(attributes) : 'null';
state.markers.insideMarkdown = attributeStr;
outSource += `h(__astroMarkdownRender, ${attributeStr}`;
this.skip();
break;
}
case 'MustacheTag':
case 'Comment':
return;
case 'Fragment':
break;
case 'Slot':
case 'Head':
case 'InlineComponent':
case 'Title':
case 'Element': {
const name: string = node.name;
if (!name) {
throw new Error('AHHHH');
}
try {
const attributes = getAttributes(node.attributes);
buffers.out += buffers.out === '' ? '' : ',';
if (node.type === 'Slot') {
buffers[curr] += `(children`;
paren++;
return;
}
}
const { wrapper, wrapperImport } = getComponentWrapper(name, components[componentName], { astroConfig, dynamicImports, filename });
if (wrapperImport) {
importExportStatements.add(wrapperImport);
}
const COMPONENT_NAME_SCANNER = /^[A-Z]/;
if (!COMPONENT_NAME_SCANNER.test(name)) {
if (curr === 'markdown') {
await pushMarkdownToBuffer();
}
buffers[curr] += `h("${name}", ${attributes ? generateAttributes(attributes) : 'null'}`;
paren++;
return;
}
const [componentName, componentKind] = name.split(':');
const componentImportData = components[componentName];
if (!componentImportData) {
throw new Error(`Unknown Component: ${componentName}`);
}
if (componentImportData.type === '.astro') {
if (componentName === 'Markdown') {
const { $scope } = attributes ?? {};
state.markers.insideMarkdown = { $scope };
curr = 'markdown';
return;
}
}
const { wrapper, wrapperImport } = getComponentWrapper(name, components[componentName], { astroConfig, dynamicImports, filename });
if (wrapperImport) {
importExportStatements.add(wrapperImport);
}
if (curr === 'markdown') {
await pushMarkdownToBuffer();
}
outSource += `h(${wrapper}, ${attributes ? generateAttributes(attributes) : 'null'}`;
if (state.markers.insideMarkdown) {
const attributeStr = state.markers.insideMarkdown;
outSource += `,h(__astroMarkdownRender, ${attributeStr}`;
paren++;
buffers[curr] += `h(${wrapper}, ${attributes ? generateAttributes(attributes) : 'null'}`;
} catch (err) {
// handle errors in scope with filename
const rel = filename.replace(astroConfig.projectRoot.pathname, '');
// TODO: return actual codeframe here
error(compileOptions.logging, rel, err.toString());
}
} catch (err) {
// handle errors in scope with filename
const rel = filename.replace(astroConfig.projectRoot.pathname, '');
// TODO: return actual codeframe here
error(compileOptions.logging, rel, err.toString());
}
return;
}
case 'Attribute': {
this.skip();
return;
}
case 'Style': {
css.push(node.content.styles); // if multiple <style> tags, combine together
this.skip();
return;
}
case 'CodeSpan':
case 'CodeFence': {
outSource += ',' + JSON.stringify(node.raw);
return;
}
case 'Text': {
const text = getTextFromAttribute(node);
// Whitespace is significant if we are immediately inside of <Markdown>,
// but not if we're inside of another component in <Markdown>
if (parent.name !== 'Markdown' && !text.trim()) {
return;
}
outSource += ',' + JSON.stringify(text);
return;
}
default:
throw new Error('Unexpected (enter) node type: ' + node.type);
}
},
leave(node, parent, prop, index) {
switch (node.type) {
case 'Text':
case 'CodeSpan':
case 'CodeFence':
case 'Attribute':
case 'Comment':
case 'Fragment':
case 'Expression':
case 'MustacheTag':
return;
case 'Slot':
case 'Head':
case 'Body':
case 'Title':
case 'Element':
case 'InlineComponent': {
if (node.type === 'InlineComponent' && node.name === 'Markdown') {
state.markers.insideMarkdown = false;
case 'Attribute': {
this.skip();
return;
}
if (state.markers.insideMarkdown) {
outSource += ')';
case 'Style': {
css.push(node.content.styles); // if multiple <style> tags, combine together
this.skip();
return;
}
outSource += ')';
return;
case 'CodeSpan':
case 'CodeFence': {
if (state.markers.insideMarkdown) {
if (curr === 'out') curr = 'markdown';
buffers[curr] += node.raw;
return;
}
buffers[curr] += ',' + JSON.stringify(node.data);
return;
}
case 'Text': {
let text = getTextFromAttribute(node);
if (state.markers.insideMarkdown) {
if (curr === 'out') curr = 'markdown';
buffers[curr] += text;
return;
}
if (parent.name !== 'Markdown' && !text.trim()) {
return;
}
if (parent.name === 'code') {
// Special case, escaped { characters from markdown content
text = node.raw.replace(/&#x26;#123;/g, '{');
}
buffers[curr] += ',' + JSON.stringify(text);
return;
}
default:
throw new Error('Unexpected (enter) node type: ' + node.type);
}
case 'Style': {
this.remove(); // this will be optimized in a global CSS file; remove so it‘s not accidentally inlined
return;
},
async leave(node, parent, prop, index) {
switch (node.type) {
case 'Text':
case 'Attribute':
case 'Comment':
case 'Fragment':
case 'Expression':
case 'MustacheTag':
return;
case 'CodeSpan':
case 'CodeFence':
return;
case 'Slot':
case 'Head':
case 'Body':
case 'Title':
case 'Element':
case 'InlineComponent': {
if (node.type === 'InlineComponent' && curr === 'markdown' && buffers.markdown !== '') {
await pushMarkdownToBuffer();
}
if (paren !== -1) {
buffers.out += ')';
paren--;
}
return;
}
case 'Style': {
this.remove(); // this will be optimized in a global CSS file; remove so it‘s not accidentally inlined
return;
}
default:
throw new Error('Unexpected (leave) node type: ' + node.type);
}
default:
throw new Error('Unexpected (leave) node type: ' + node.type);
}
},
},
}).then(() => {
const content = buffers.out.replace(/^\,/, '').replace(/\,\)/g, ')').replace(/\,+/g, ',').replace(/\)h/g, '),h');
buffers.out = '';
buffers.markdown = '';
return resolve(content);
});
});
return outSource;
}
/**
@ -721,7 +773,7 @@ export async function codegen(ast: Ast, { compileOptions, filename }: CodeGenOpt
compileCss(ast.css, state);
const html = compileHtml(ast.html, state, compileOptions);
const html = await compileHtml(ast.html, state, compileOptions);
return {
script: script,

7
packages/astro/src/compiler/index.ts
View file

@ -29,7 +29,7 @@ interface ConvertAstroOptions {
* 2. Transform
* 3. Codegen
*/
async function convertAstroToJsx(template: string, opts: ConvertAstroOptions): Promise<TransformResult> {
export async function convertAstroToJsx(template: string, opts: ConvertAstroOptions): Promise<TransformResult> {
const { filename } = opts;
// 1. Parse
@ -48,11 +48,12 @@ async function convertAstroToJsx(template: string, opts: ConvertAstroOptions): P
* .md -> .astro source
*/
export async function convertMdToAstroSource(contents: string, { filename }: { filename: string }): Promise<string> {
const {
let {
content,
frontmatter: { layout, ...frontmatter },
...data
} = await renderMarkdownWithFrontmatter(contents);
if (frontmatter['astro'] !== undefined) {
throw new Error(`"astro" is a reserved word but was used as a frontmatter value!\n\tat ${filename}`);
}
@ -109,7 +110,6 @@ export async function compileComponent(
): Promise<CompileResult> {
const result = await transformFromSource(source, { compileOptions, filename, projectRoot });
const site = compileOptions.astroConfig.buildOptions.site || `http://localhost:${compileOptions.astroConfig.devOptions.port}`;
const usesMarkdown = !!result.imports.find((spec) => spec.indexOf('Markdown') > -1);
// return template
let modJsx = `
@ -120,7 +120,6 @@ ${result.imports.join('\n')}
// \`__render()\`: Render the contents of the Astro module.
import { h, Fragment } from '${internalImport('h.js')}';
${usesMarkdown ? `import __astroMarkdownRender from '${internalImport('markdown.js')}';` : ''};
const __astroRequestSymbol = Symbol('astro.request');
async function __render(props, ...children) {
const Astro = {

41
packages/astro/src/compiler/markdown/codeblock.ts Normal file
View file

@ -0,0 +1,41 @@
import { visit } from 'unist-util-visit';
/** */
export function remarkCodeBlock() {
const visitor = (node: any) => {
const { data, lang, meta } = node;
let currentClassName = data?.hProperties?.class ?? '';
node.data = node.data || {};
node.data.hProperties = node.data.hProperties || {};
node.data.hProperties = { ...node.data.hProperties, class: `language-${lang} ${currentClassName}`.trim(), lang, meta }
return node;
};
return () => (tree: any) => visit(tree, 'code', visitor);
}
/** */
export function rehypeCodeBlock() {
const escapeCode = (code: any) => {
code.children = code.children.map((child: any) => {
if (child.type === 'text') {
return { ...child, value: child.value.replace(/\{/g, '&#123;') };
}
return child;
})
}
const visitor = (node: any) => {
if (node.tagName === 'code') {
escapeCode(node);
return;
}
if (node.tagName !== 'pre') return;
const code = node.children[0];
if (code.tagName !== 'code') return;
node.properties = { ...code.properties };
return node;
};
return () => (tree: any) => visit(tree, 'element', visitor);
}

3
packages/astro/src/compiler/markdown/micromark.d.ts vendored
View file

@ -2,6 +2,9 @@ declare module '@silvenon/remark-smartypants' {
export default function (): any;
}
declare module 'mdast-util-mdx';
declare module 'micromark-extension-mdxjs';
declare module 'mdast-util-mdx/from-markdown.js' {
export default function (): any;
}

39
packages/astro/src/compiler/markdown/remark-mdx-lite.ts
View file

@ -1,26 +1,31 @@
import fromMarkdown from 'mdast-util-mdx/from-markdown.js';
import toMarkdown from 'mdast-util-mdx/to-markdown.js';
/** See https://github.com/micromark/micromark-extension-mdx-md */
const syntax = { disable: { null: ['autolink', 'codeIndented'] } };
import syntaxMdxjs from 'micromark-extension-mdxjs'
import {fromMarkdown, toMarkdown} from 'mdast-util-mdx'
/**
* Lite version of https://github.com/mdx-js/mdx/tree/main/packages/remark-mdx
* We don't need all the features MDX does because all components are precompiled
* to HTML. We just want to disable a few MD features that cause issues.
* Add the micromark and mdast extensions for MDX.js (JS aware MDX).
*
* @this {Processor}
* @param {MdxOptions} [options]
* @return {void}
*/
function mdxLite(this: any) {
let data = this.data();
export function remarkMdx(this: any, options: any) {
let data = this.data()
add('micromarkExtensions', syntax);
add('fromMarkdownExtensions', fromMarkdown);
add('toMarkdownExtensions', toMarkdown);
add('micromarkExtensions', syntaxMdxjs(options))
add('fromMarkdownExtensions', fromMarkdown)
add('toMarkdownExtensions', toMarkdown)
/** Adds remark plugin */
/**
* @param {string} field
* @param {unknown} value
*/
function add(field: string, value: any) {
if (data[field]) data[field].push(value);
else data[field] = [value];
// Other extensions defined before this.
// Useful when externalizing.
/* c8 ignore next 2 */
// @ts-ignore Assume it’s an array.
if (data[field]) data[field].push(value)
else data[field] = [value]
}
}
export default mdxLite;

4
packages/astro/src/compiler/markdown/remark-scoped-styles.ts
View file

@ -7,10 +7,10 @@ export default function scopedStyles(className: string) {
if (noVisit.has(node.type)) return;
const { data } = node;
const currentClassName = data?.hProperties?.class ?? '';
let currentClassName = data?.hProperties?.class ?? '';
node.data = node.data || {};
node.data.hProperties = node.data.hProperties || {};
node.data.hProperties.className = `${className} ${currentClassName}`.trim();
node.data.hProperties.class = `${className} ${currentClassName}`.trim();
return node;
};

19
packages/astro/src/compiler/transform/prism.ts
View file

@ -1,5 +1,5 @@
import type { Transformer } from '../../@types/transformer';
import type { Script } from 'astro-parser';
import type { Script, TemplateNode } from 'astro-parser';
import { getAttrValue } from '../../ast.js';
const PRISM_IMPORT = `import Prism from 'astro/components/Prism.astro';\n`;
@ -8,7 +8,17 @@ const prismImportExp = /import Prism from ['"]astro\/components\/Prism.astro['"]
function escape(code: string) {
return code.replace(/[`$]/g, (match) => {
return '\\' + match;
});
}).replace(/&#123;/g, '{');
}
/** Unescape { characters transformed by Markdown generation */
function unescapeCode(code: TemplateNode) {
code.children = code.children?.map(child => {
if (child.type === 'Text') {
return { ...child, raw: child.raw.replace(/&#x26;#123;/g, '{') }
}
return child;
})
}
/** default export - Transform prism */
export default function (module: Script): Transformer {
@ -19,6 +29,11 @@ export default function (module: Script): Transformer {
html: {
Element: {
enter(node) {
if (node.name === 'code') {
unescapeCode(node);
return;
}
if (node.name !== 'pre') return;
const codeEl = node.children && node.children[0];
if (!codeEl || codeEl.name !== 'code') return;

23
packages/astro/src/compiler/utils.ts
View file

@ -1,20 +1,20 @@
import mdxLite from './markdown/remark-mdx-lite.js';
import type { AstroMarkdownOptions } from '../@types/astro';
import createCollectHeaders from './markdown/rehype-collect-headers.js';
import scopedStyles from './markdown/remark-scoped-styles.js';
import { remarkCodeBlock, rehypeCodeBlock } from './markdown/codeblock.js';
import raw from 'rehype-raw';
import unified from 'unified';
import markdown from 'remark-parse';
import markdownToHtml from 'remark-rehype';
import smartypants from '@silvenon/remark-smartypants';
import stringify from 'rehype-stringify';
// import smartypants from '@silvenon/remark-smartypants';
import rehypeStringify from 'rehype-stringify';
export interface MarkdownRenderingOptions {
export interface MarkdownRenderingOptions extends Partial<AstroMarkdownOptions> {
$?: {
scopedClassName: string | null;
};
footnotes?: boolean;
gfm?: boolean;
plugins?: any[];
mode: 'md'|'astro-md';
}
/** Internal utility for rendering a full markdown file and extracting Frontmatter data */
@ -22,16 +22,16 @@ export async function renderMarkdownWithFrontmatter(contents: string, opts?: Mar
// Dynamic import to ensure that "gray-matter" isn't built by Snowpack
const { default: matter } = await import('gray-matter');
const { data: frontmatter, content } = matter(contents);
const value = await renderMarkdown(content, opts);
const value = await renderMarkdown(content, { ...opts, mode: 'md' });
return { ...value, frontmatter };
}
/** Shared utility for rendering markdown */
export async function renderMarkdown(content: string, opts?: MarkdownRenderingOptions | null) {
const { $: { scopedClassName = null } = {}, footnotes: useFootnotes = true, gfm: useGfm = true, plugins = [] } = opts ?? {};
const { $: { scopedClassName = null } = {}, mode = 'astro-md', footnotes: useFootnotes = true, gfm: useGfm = true } = opts ?? {};
const { headers, rehypeCollectHeaders } = createCollectHeaders();
let parser = unified().use(markdown).use(mdxLite).use(smartypants);
let parser = unified().use(markdown).use(remarkCodeBlock());
if (scopedClassName) {
parser = parser.use(scopedStyles(scopedClassName));
@ -53,7 +53,8 @@ export async function renderMarkdown(content: string, opts?: MarkdownRenderingOp
.use(markdownToHtml, { allowDangerousHtml: true, passThrough: ['raw'] })
.use(raw)
.use(rehypeCollectHeaders)
.use(stringify)
.use(rehypeCodeBlock())
.use(rehypeStringify)
.process(content);
result = vfile.contents.toString();
} catch (err) {

1
packages/astro/src/config.ts
View file

@ -60,6 +60,7 @@ function configDefaults(userConfig?: any): any {
if (!config.devOptions) config.devOptions = {};
if (!config.devOptions.port) config.devOptions.port = 3000;
if (!config.buildOptions) config.buildOptions = {};
if (!config.markdownOptions) config.markdownOptions = {};
if (typeof config.buildOptions.sitemap === 'undefined') config.buildOptions.sitemap = true;
return config;

26
packages/astro/src/frontend/markdown.ts
View file

@ -1,26 +0,0 @@
import { renderMarkdown } from '../compiler/utils.js';
/**
* Functional component which uses Astro's built-in Markdown rendering
* to render out its children.
*
* Note: the children have already been properly escaped/rendered
* by the parser and Astro, so at this point we're just rendering
* out plain markdown, no need for JSX support
*/
export default async function Markdown(props: { $scope: string | null }, ...children: string[]): Promise<string> {
const { $scope = null } = props ?? {};
const text = dedent(children.join('').trimEnd());
let { content } = await renderMarkdown(text, { $: { scopedClassName: $scope } });
if (content.split('<p>').length === 2) {
content = content.replace(/^\<p\>/i, '').replace(/\<\/p\>$/i, '');
}
return content;
}
/** Remove leading indentation based on first line */
function dedent(str: string) {
let arr = str.match(/^[ \t]*(?=\S)/gm);
let first = !!arr && arr.find((x) => x.length > 0)?.length;
return !arr || !first ? str : str.replace(new RegExp(`^[ \\t]{0,${first}}`, 'gm'), '');
}

7
packages/astro/src/runtime.ts
View file

@ -339,7 +339,12 @@ async function createSnowpack(astroConfig: AstroConfig, options: CreateSnowpackO
},
packageOptions: {
knownEntrypoints: ['preact-render-to-string'],
external: ['@vue/server-renderer', 'node-fetch', 'prismjs/components/index.js'],
external: [
'@vue/server-renderer',
'node-fetch',
'prismjs/components/index.js',
'gray-matter',
],
},
});

57
yarn.lock
View file

@ -1710,7 +1710,7 @@ acorn-globals@^3.0.0:
dependencies:
acorn "^4.0.4"
acorn-jsx@^5.3.1:
acorn-jsx@^5.0.0, acorn-jsx@^5.3.1:
version "5.3.1"
resolved "https://registry.npmjs.org/acorn-jsx/-/acorn-jsx-5.3.1.tgz"
integrity sha512-K0Ptm/47OKfQRpNQ2J/oIN/3QYiK6FwW+eJbILhsdxh2WTLdl+30o8aGdTbm5JbffpFFAg/g+zi1E+jvJha5ng==
@ -1744,6 +1744,11 @@ acorn@^7.0.0, acorn@^7.4.0:
resolved "https://registry.npmjs.org/acorn/-/acorn-7.4.1.tgz"
integrity sha512-nQyp0o1/mNdbTO1PO6kHkwSrmgZ0MT/jCCpNiwbUjGoRN4dlBhqJtoQuCnEOKzgTVwg0ZWiCoQy6SxMebQVh8A==
acorn@^8.0.0:
version "8.2.4"
resolved "https://registry.yarnpkg.com/acorn/-/acorn-8.2.4.tgz#caba24b08185c3b56e3168e97d15ed17f4d31fd0"
integrity sha512-Ibt84YwBDDA890eDiDCEqcbwvHlBvzzDkU2cGBBDDI1QWT12jTiXIOn2CIw5KK4i6N5Z2HUxwYjzriDyqaqqZg==
add-stream@^1.0.0:
version "1.0.0"
resolved "https://registry.npmjs.org/add-stream/-/add-stream-1.0.0.tgz"
@ -4043,6 +4048,11 @@ estraverse@^5.1.0, estraverse@^5.2.0:
resolved "https://registry.npmjs.org/estraverse/-/estraverse-5.2.0.tgz"
integrity sha512-BxbNGGNm0RyRYvUdHpIwv9IWzeM9XClbOxwoATuFdOE7ZE6wHL+HQ5T8hoPM+zHvmKzzsEqhgy0GrQ5X13afiQ==
estree-util-is-identifier-name@^1.0.0:
version "1.1.0"
resolved "https://registry.yarnpkg.com/estree-util-is-identifier-name/-/estree-util-is-identifier-name-1.1.0.tgz#2e3488ea06d9ea2face116058864f6370b37456d"
integrity sha512-OVJZ3fGGt9By77Ix9NhaRbzfbDV/2rx9EP7YIDJTmsZSEc5kYn2vWcNccYyahJL2uAQZK2a5Or2i0wtIKTPoRQ==
estree-walker@^0.6.1:
version "0.6.1"
resolved "https://registry.npmjs.org/estree-walker/-/estree-walker-0.6.1.tgz"
@ -6627,6 +6637,51 @@ micromark-extension-gfm@^0.3.0:
micromark-extension-gfm-tagfilter "~0.3.0"
micromark-extension-gfm-task-list-item "~0.3.0"
micromark-extension-mdx-expression@^0.3.0, micromark-extension-mdx-expression@^0.3.2, micromark-extension-mdx-expression@~0.3.0:
version "0.3.2"
resolved "https://registry.yarnpkg.com/micromark-extension-mdx-expression/-/micromark-extension-mdx-expression-0.3.2.tgz#827592af50116110dc9ee27201a73c037e61aa27"
integrity sha512-Sh8YHLSAlbm/7TZkVKEC4wDcJE8XhVpZ9hUXBue1TcAicrrzs/oXu7PHH3NcyMemjGyMkiVS34Y0AHC5KG3y4A==
dependencies:
micromark "~2.11.0"
vfile-message "^2.0.0"
micromark-extension-mdx-jsx@~0.3.0:
version "0.3.3"
resolved "https://registry.yarnpkg.com/micromark-extension-mdx-jsx/-/micromark-extension-mdx-jsx-0.3.3.tgz#68e8e700f2860e32e96ff48e44afb7465d462e21"
integrity sha512-kG3VwaJlzAPdtIVDznfDfBfNGMTIzsHqKpTmMlew/iPnUCDRNkX+48ElpaOzXAtK5axtpFKE3Hu3VBriZDnRTQ==
dependencies:
estree-util-is-identifier-name "^1.0.0"
micromark "~2.11.0"
micromark-extension-mdx-expression "^0.3.2"
vfile-message "^2.0.0"
micromark-extension-mdx-md@~0.1.0:
version "0.1.1"
resolved "https://registry.yarnpkg.com/micromark-extension-mdx-md/-/micromark-extension-mdx-md-0.1.1.tgz#277b4e82ada37bfdf222f6c3530e20563d73e064"
integrity sha512-emlFQEyfx/2aPhwyEqeNDfKE6jPH1cvLTb5ANRo4qZBjaUObnzjLRdzK8RJ4Xc8+/dOmKN8TTRxFnOYF5/EAwQ==
micromark-extension-mdxjs-esm@~0.3.0:
version "0.3.1"
resolved "https://registry.yarnpkg.com/micromark-extension-mdxjs-esm/-/micromark-extension-mdxjs-esm-0.3.1.tgz#40a710fe145b381e39a2930db2813f3efaa014ac"
integrity sha512-tuLgcELrgY1a5tPxjk+MrI3BdYtwW67UaHZdzKiDYD8loNbxwIscfdagI6A2BKuAkrfeyHF6FW3B8KuDK3ZMXw==
dependencies:
micromark "~2.11.0"
micromark-extension-mdx-expression "^0.3.0"
vfile-message "^2.0.0"
micromark-extension-mdxjs@^0.3.0:
version "0.3.0"
resolved "https://registry.yarnpkg.com/micromark-extension-mdxjs/-/micromark-extension-mdxjs-0.3.0.tgz#35ecebaf14b8377b6046b659780fd3111196eccd"
integrity sha512-NQuiYA0lw+eFDtSG4+c7ao3RG9dM4P0Kx/sn8OLyPhxtIc6k+9n14k5VfLxRKfAxYRTo8c5PLZPaRNmslGWxJw==
dependencies:
acorn "^8.0.0"
acorn-jsx "^5.0.0"
micromark "~2.11.0"
micromark-extension-mdx-expression "~0.3.0"
micromark-extension-mdx-jsx "~0.3.0"
micromark-extension-mdx-md "~0.1.0"
micromark-extension-mdxjs-esm "~0.3.0"
micromark@^2.11.3, micromark@~2.11.0, micromark@~2.11.3:
version "2.11.4"
resolved "https://registry.npmjs.org/micromark/-/micromark-2.11.4.tgz"