[markdown] Harder, better, faster, stronger `vite-plugin-markdown` #4137

bholmesdev · 2022-08-03T20:56:00Z

Changes

Rework vite-plugin-markdown to 1 compilation step
- No more Astro + esbuild compilation, no more 2 step imports, no more mysterious ?content and ?mdImport flags 🥳
- Pass through renderMarkdown in all cases, including globs - unblocks remark / rehype plugins appending to frontmatter
- Use Astro's JSX runtime to render markdown layouts
- Avoid switch logic on legacy.astroFlavoredMarkdown
Fall back to old vite-plugin-markdown (now renamed vite-plugin-markdown-legacy) based on legacy flag
Enable JSX runtime in all cases, not just MDX!
- Tweak JSX renderer logic to better handle Astro renderer (based on failing unit tests)
Add headings and frontmatter to layout props, for consistency with MDX ([MDX] Add headings and frontmatter to layout props #4134)

Testing

move astro-markdown suite to legacy-astro-flavored-markdown for clarity
port legacy tests to astro-markdown suite (formerly astro-markdown-md-mode): layouts, headings, import.meta.env, raw and compiled content

Docs

N/A

changeset-bot · 2022-08-03T20:56:04Z

🦋 Changeset detected

Latest commit: 95e4d8c

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 13 packages

Name	Type
astro	Minor
@astrojs/markdown-remark	Patch
@e2e/astro-component	Patch
@e2e/error-react-spectrum	Patch
@e2e/error-sass	Patch
@e2e/errors	Patch
@e2e/lit-component	Patch
@e2e/preact-component	Patch
@e2e/react-component	Patch
@e2e/solid-component	Patch
@e2e/svelte-component	Patch
@e2e/e2e-tailwindcss	Patch
@e2e/ts-resolution	Patch

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

packages/astro/src/vite-plugin-markdown-legacy/index.ts

bholmesdev · 2022-08-03T22:56:39Z

examples/docs/src/components/PageContent/PageContent.astro

 const title = content.title;
-const headings = content.astro.headings;


content.astro.headings now throws! You'll get a nice error recommending Astro.props.headings instead 👍

bholmesdev · 2022-08-03T23:00:04Z

packages/astro/src/core/build/graph.ts

@@ -29,7 +29,7 @@ export function* getTopLevelPages(
 ): Generator<string, void, unknown> {
 	for (const info of walkParentInfos(id, ctx)) {
 		const importers = (info?.importers || []).concat(info?.dynamicImporters || []);
-		if (importers.length <= 2 && importers[0] === resolvedPagesVirtualModuleId) {


This assumed a pages entry would never be imported, which breaks glob imports for MD files in /pages. The ?mdImport flag hid this bug before!

I fixed this a different way in #4156

Oh, glad to hear it! Should I revert and let your PR go first @matthewp ?

Update: Rebased with your fix 🙏

Yep, sorry I forgot to reply here.

FredKSchott · 2022-08-04T20:11:46Z

packages/astro/src/vite-plugin-markdown/index.ts

+		// Why not the "transform" hook instead of "load" + readFile?
+		// A: Vite transforms all "import.meta.env" references to their values before
+		// passing to the transform hook. This lets us get the truly raw value
+		// to escape "import.meta.env" ourselves.


why do we want to escape import.meta.env ourselves instead of letting Vite do it?

Because Vite does not escape them! It'll replace all import.meta.env usages with their values before giving you the code, since Vite assumes all modules are JS modules. A manual file read is the only way around it

Ohhhh right, we want them escaped. Makes sense! This is probably more accurate from a Rollup/Vite perspective as well, since I think load() was designed to load the file from disk and turn it into JS, while transform() is just for transforming the file without changing its file type.

packages/astro/src/vite-plugin-markdown/index.ts

FredKSchott

LGTM overall, but left one comment on how to improve the output to reduce potentially-expensive JSON.stringify calls.

packages/astro/src/vite-plugin-markdown/index.ts

packages/astro/src/core/config.ts

packages/astro/src/vite-plugin-jsx/index.ts

packages/astro/src/vite-plugin-markdown/index.ts

natemoo-re

LGTM assuming all other feedback gets addressed! Great work on this, Ben!

…o-markdown

This reverts commit 3e5fa49.

github-actions bot added pkg: astro Related to the core `astro` package (scope) feat: markdown Related to Markdown (scope) labels Aug 3, 2022

FredKSchott reviewed Aug 3, 2022

View reviewed changes

packages/astro/src/vite-plugin-markdown-legacy/index.ts Outdated Show resolved Hide resolved

bholmesdev force-pushed the feat/vite-plugin-markdown-rework branch from b57d625 to 5e24cb5 Compare August 3, 2022 22:25

github-actions bot added the pkg: example Related to an example package (scope) label Aug 3, 2022

bholmesdev commented Aug 3, 2022

View reviewed changes

natemoo-re mentioned this pull request Aug 4, 2022

Include CSS when child component uses Astro.glob on page #4156

Merged

FredKSchott reviewed Aug 4, 2022

View reviewed changes

packages/astro/src/vite-plugin-markdown/index.ts Outdated Show resolved Hide resolved

FredKSchott reviewed Aug 4, 2022

View reviewed changes

packages/astro/src/vite-plugin-markdown/index.ts Outdated Show resolved Hide resolved

matthewp reviewed Aug 4, 2022

View reviewed changes

packages/astro/src/core/config.ts Show resolved Hide resolved

matthewp reviewed Aug 4, 2022

View reviewed changes

packages/astro/src/vite-plugin-jsx/index.ts Show resolved Hide resolved

matthewp reviewed Aug 4, 2022

View reviewed changes

packages/astro/src/vite-plugin-markdown/index.ts Outdated Show resolved Hide resolved

matthewp mentioned this pull request Aug 4, 2022

Allow automatic JSX runtime alongside MDX #4160

Closed

natemoo-re approved these changes Aug 4, 2022

View reviewed changes

bholmesdev added 13 commits August 5, 2022 10:47

refactor: vite-plugin-md -> vite-plugin-md-legacy

fcd57c4

wip: add vite-plugin-md

06b48fb

feat: always apply jsx renderer

884f86b

fix: markHTMLString on VNode result

efa8918

feat: apply new vite-plugin-markdown!

a9f2e04

fix: add meta export to md

3c1dd73

fix: remove needless $$metadata export

fac6712

fix: toggle to legacy plugin on flag

b1b0a27

fix: pass fileId to renderMarkdown

0357fd9

test: raw and compiled content on plain md

6f3a8c2

fix: escape vite env refs

c25c492

refactor: astro-md -> legacy-astro-flavored-md, astro-md-mode -> astr…

1eb27db

…o-markdown

fix: import.meta.env refs with tests

a540695

bholmesdev added 15 commits August 5, 2022 10:48

fix: add pkg.json to clientAddress

42f8d76

fix: prefer JSX integration over Astro runtime

9233347

Revert "fix: prefer JSX integration over Astro runtime"

1eae86d

This reverts commit 3e5fa49.

fix: remove .mdx check on importSource

ee49ec5

chore: changeset

75f49da

chore: remove TODO

5c1c284

fix: add back getHeadings

90dbca5

fix: add pkg.json to astro-head fixture

b7acaa4

fix: default to Astro renderer for MDX and MD

680c220

feat: add "headings" and "frontmatter" to md layouts

6fb1c59

refactor: remove legacy flag conditionals from legacy plugin

12602d7

fix: add back MDX warning when legacy is off

a223d39

test: getHeadings() glob

4849516

fix: add error on "astro.headings" access

9295bae

feat: update docs example astro.headings => headings

37b805b

bholmesdev force-pushed the feat/vite-plugin-markdown-rework branch from 498f6f4 to 37b805b Compare August 5, 2022 14:49

bholmesdev added 4 commits August 5, 2022 10:49

refactor: readFile as string w/ utf-8

6cb3294

chore: remove astro metadata TODO

f919a37

refactor: stringify HTML once

353844b

fix: add pkg.json to glob-pages-css

95e4d8c

bholmesdev merged commit 471c6f7 into main Aug 5, 2022

bholmesdev deleted the feat/vite-plugin-markdown-rework branch August 5, 2022 19:43

astrobot-houston mentioned this pull request Aug 5, 2022

[ci] release #4159

Merged

matthewp mentioned this pull request Aug 5, 2022

Add test for mdx + React usage #4174

Merged

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[markdown] Harder, better, faster, stronger `vite-plugin-markdown` #4137

[markdown] Harder, better, faster, stronger `vite-plugin-markdown` #4137

bholmesdev commented Aug 3, 2022 •

edited

Loading

changeset-bot bot commented Aug 3, 2022 •

edited

Loading

bholmesdev Aug 3, 2022

bholmesdev Aug 3, 2022

matthewp Aug 4, 2022

bholmesdev Aug 4, 2022

bholmesdev Aug 5, 2022

matthewp Aug 5, 2022

FredKSchott Aug 4, 2022

bholmesdev Aug 4, 2022 •

edited

Loading

FredKSchott Aug 4, 2022

FredKSchott left a comment

natemoo-re left a comment

		const title = content.title;
		const headings = content.astro.headings;

[markdown] Harder, better, faster, stronger vite-plugin-markdown #4137

[markdown] Harder, better, faster, stronger vite-plugin-markdown #4137

Conversation

bholmesdev commented Aug 3, 2022 • edited Loading

Changes

Testing

Docs

changeset-bot bot commented Aug 3, 2022 • edited Loading

🦋 Changeset detected

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

bholmesdev Aug 4, 2022 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

FredKSchott left a comment

Choose a reason for hiding this comment

natemoo-re left a comment

Choose a reason for hiding this comment

[markdown] Harder, better, faster, stronger `vite-plugin-markdown` #4137

[markdown] Harder, better, faster, stronger `vite-plugin-markdown` #4137

bholmesdev commented Aug 3, 2022 •

edited

Loading

changeset-bot bot commented Aug 3, 2022 •

edited

Loading

bholmesdev Aug 4, 2022 •

edited

Loading