diff options
Diffstat (limited to 'packages/astro')
| -rw-r--r-- | packages/astro/components/Markdown.astro | 27 | ||||
| -rw-r--r-- | packages/astro/package.json | 3 | ||||
| -rw-r--r-- | packages/astro/src/compiler/codegen/index.ts | 6 | ||||
| -rw-r--r-- | packages/astro/src/dev.ts | 1 | ||||
| -rw-r--r-- | packages/astro/src/external.ts | 2 | ||||
| -rw-r--r-- | packages/astro/src/frontend/markdown.ts | 1 | ||||
| -rw-r--r-- | packages/astro/test/astro-markdown.test.js | 10 | ||||
| -rw-r--r-- | packages/astro/test/fixtures/astro-markdown/src/pages/external.astro | 15 |
8 files changed, 60 insertions, 5 deletions
diff --git a/packages/astro/components/Markdown.astro b/packages/astro/components/Markdown.astro index 8e4e17cee..ae27876a9 100644 --- a/packages/astro/components/Markdown.astro +++ b/packages/astro/components/Markdown.astro @@ -1,3 +1,24 @@ -<!-- Probably not what you're looking for! --> -<!-- Check `astro-parser` or /frontend/markdown.ts --> -<slot /> +--- +import { renderMarkdown } from 'astro/dist/frontend/markdown.js'; + +export let content: string; +export let $scope: string; +let html = null; + +// This flow is only triggered if a user passes `<Markdown content={content} />` +if (content) { + const { content: htmlContent } = await renderMarkdown(content, { + mode: 'md', + $: { + scopedClassName: $scope + } + }); + html = htmlContent; +} + +/* + If we have rendered `html` for `content`, render that + Otherwise, just render the slotted content +*/ +--- +{html ? html : <slot />} diff --git a/packages/astro/package.json b/packages/astro/package.json index a4e29e1cf..237f72a8d 100644 --- a/packages/astro/package.json +++ b/packages/astro/package.json @@ -10,7 +10,8 @@ "./package.json": "./package.json", "./snowpack-plugin": "./snowpack-plugin.cjs", "./components/*": "./components/*", - "./runtime/svelte": "./dist/frontend/runtime/svelte.js" + "./runtime/svelte": "./dist/frontend/runtime/svelte.js", + "./dist/frontend/markdown.js": "./dist/frontend/markdown.js" }, "imports": { "#astro/compiler": "./dist/compiler/index.js", diff --git a/packages/astro/src/compiler/codegen/index.ts b/packages/astro/src/compiler/codegen/index.ts index 68ff8d853..a37861a28 100644 --- a/packages/astro/src/compiler/codegen/index.ts +++ b/packages/astro/src/compiler/codegen/index.ts @@ -557,6 +557,12 @@ async function compileHtml(enterNode: TemplateNode, state: CodegenState, compile if (componentName === 'Markdown') { const { $scope } = attributes ?? {}; state.markers.insideMarkdown = { $scope }; + if (attributes.content) { + if (curr === 'markdown') { + await pushMarkdownToBuffer(); + } + buffers[curr] += `,${componentName}.__render(${attributes ? generateAttributes(attributes) : 'null'}),`; + } curr = 'markdown'; return; } diff --git a/packages/astro/src/dev.ts b/packages/astro/src/dev.ts index 5d1f20cff..a7da0c863 100644 --- a/packages/astro/src/dev.ts +++ b/packages/astro/src/dev.ts @@ -33,6 +33,7 @@ export default async function dev(astroConfig: AstroConfig) { const server = http.createServer(async (req, res) => { timer.load = performance.now(); + const result = await runtime.load(req.url); debug(logging, 'dev', `loaded ${req.url} [${stopTimer(timer.load)}]`); diff --git a/packages/astro/src/external.ts b/packages/astro/src/external.ts index f8ae0e23c..63abeffad 100644 --- a/packages/astro/src/external.ts +++ b/packages/astro/src/external.ts @@ -17,7 +17,7 @@ const isAstroRenderer = (name: string) => { // These packages should NOT be built by `esinstall` // But might not be explicit dependencies of `astro` -const denyList = ['prismjs/components/index.js', '@vue/server-renderer']; +const denyList = ['prismjs/components/index.js', '@vue/server-renderer', 'astro/dist/frontend/markdown.js']; export default Object.keys(pkg.dependencies) // Filter out packages that should be loaded threw Snowpack diff --git a/packages/astro/src/frontend/markdown.ts b/packages/astro/src/frontend/markdown.ts new file mode 100644 index 000000000..3a446092f --- /dev/null +++ b/packages/astro/src/frontend/markdown.ts @@ -0,0 +1 @@ +export { renderMarkdown } from '../compiler/utils';
\ No newline at end of file diff --git a/packages/astro/test/astro-markdown.test.js b/packages/astro/test/astro-markdown.test.js index bb5a540e0..ecd946f47 100644 --- a/packages/astro/test/astro-markdown.test.js +++ b/packages/astro/test/astro-markdown.test.js @@ -45,4 +45,14 @@ Markdown('Bundles client-side JS for prod', async (context) => { assert.ok(counterJs, 'Counter.jsx is bundled for prod'); }); +Markdown('Renders dynamic content though the content attribute', async ({ runtime }) => { + const result = await runtime.load('/external'); + if (result.error) throw new Error(result.error); + + const $ = doc(result.contents); + assert.equal($('#outer').length, 1, 'Rendered markdown content'); + assert.equal($('#inner').length, 1, 'Nested markdown content'); + assert.ok($('#inner').is('[class]'), 'Scoped class passed down'); +}); + Markdown.run(); diff --git a/packages/astro/test/fixtures/astro-markdown/src/pages/external.astro b/packages/astro/test/fixtures/astro-markdown/src/pages/external.astro new file mode 100644 index 000000000..a39209d4a --- /dev/null +++ b/packages/astro/test/fixtures/astro-markdown/src/pages/external.astro @@ -0,0 +1,15 @@ +--- +import Markdown from 'astro/components/Markdown.astro'; +import Hello from '../components/Hello.jsx'; + +const outer = `# Outer`; +const inner = `## Inner`; +--- + +<Markdown content={outer} /> + +<Markdown> + # Nested + + <Markdown content={inner} /> +</Markdown>
\ No newline at end of file |