Support re-exporting astro components containing client components #3625

matthewp · 2022-06-17T14:40:09Z

Changes

Supports re-exporting an Astro file that contains client usage.
How this works is that the compiler now includes metadata on hydrated / clientonly component usage.
This information is fed into the client build.
We walk the rollup graph to figure out which pages need which components.
All the preload junk doesn't happen any more during the build, improving build perf in big apps significantly.
Fixes 🐛 BUG: Hydrated components exported via JS break prod builds #3217
Fixes 🐛 BUG: Client side <script/> tags in Astro components break when using named imports. #3576

Testing

Tests added

Docs

N/A, perf improvement

changeset-bot · 2022-06-17T14:40:12Z

🦋 Changeset detected

Latest commit: 1476acc

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

This PR includes changesets to release 3 packages

Name	Type
astro	Patch
@astrojs/lit	Minor
@e2e/lit-component	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

matthewp · 2022-06-20T13:42:36Z

packages/astro/src/core/build/page-data.ts

@@ -71,30 +71,18 @@ export async function collectPagesData(
 				css: new Set(),
 				hoistedScript: undefined,
 				scripts: new Set(),
-				preload: await ssrPreload({


This removes the "preload" step which was the expensive part of the build that we no longer need to do. Metadata is extracted via the compiler instead.

matthewp · 2022-06-20T13:43:20Z

packages/astro/src/core/build/static-build.ts

+		...internals.discoveredClientOnlyComponents,
+		...astroConfig._ctx.renderers.map(r => r.clientEntrypoint).filter(a => a) as string[],
+		...internals.discoveredScripts,
+	]);


These are all of the client pieces to build; hydrated and client:only components, renderers, and hoisted scripts.

matthewp · 2022-06-20T13:44:13Z

packages/astro/src/core/build/static-build.ts

@@ -138,6 +89,9 @@ export async function staticBuild(opts: StaticBuildOptions) {
 			await cleanSsrOutput(opts);
 		}
 	} else {
+		// Inject the manifest
+		await injectManifest(opts, internals)


The SSR manifest is injected after both builds, so that we can build a full manifest containing all of the asset information.

matthewp · 2022-06-20T13:45:24Z

packages/astro/src/core/build/vite-plugin-ssr.ts

-						return JSON.stringify(manifest);
-					});
+					internals.ssrEntryChunk = chunk;
+					delete bundle[chunkName];


The SSR entry is removed from the bundle so that we can inject the manifest post client build.

natemoo-re

Very happy to see this! Do you have any benchmarks to measure the perf impact?

Non-blocking, but a bit worried about the custom elements change... Might have some ideas that mostly avoid a breaking change, happy to discuss.

.changeset/unlucky-hairs-camp.md

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

packages/astro/test/fixtures/lit-element/src/pages/index.astro

natemoo-re · 2022-06-20T15:47:23Z

packages/integrations/netlify/src/integration-edge-functions.ts

+				const injectPlugin: VitePlugin = {
+					name: '@astrojs/netlify/plugin-inject',
+					generateBundle(_options, bundle) {
+						if(_buildConfig.serverEntry in bundle) {
+							const chunk = bundle[_buildConfig.serverEntry];
+							if(chunk && chunk.type === 'chunk') {
+								chunk.code = `globalThis.process = { argv: [], env: {}, };${chunk.code}`;
+							}
+						}
+					}
+				};


Is this related?

No, the Netlify Edge functions were failing in CI, but I think this was broken at the time I created this branch. Looks like the tests were disabled here: #3631

FredKSchott · 2022-06-20T16:00:07Z

Re: benchmarks -- definitely run this on https://github.com/rebelchris/ddt-v2 and share the stats/results (if they're on a recent enough beta).

matthewp · 2022-06-20T18:50:20Z

Before

02:31:26 PM [build] 928 page(s) built in 170.82s
02:31:26 PM [build] Complete!

After

02:47:14 PM [build] 928 page(s) built in 114.65s
02:47:14 PM [build] Complete!

32% faster. Note that this PR does not prevent getStaticPaths loading in vite ssr mode. Doing that would likely improve it even more. I wonder if we could do that in the generate step instead of upfront. Something for a future PR.

natemoo-re

Just noticed the drafts change, are we still handling that somewhere?

natemoo-re · 2022-06-20T19:10:57Z

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

-		// Filter pages by using conditions based on their frontmatter.
-		Object.entries(allPages).forEach(([page, data]) => {
-			if ('frontmatter' in data.preload[1]) {
-				// TODO: add better type inference to data.preload[1]
-				const frontmatter = (data.preload[1] as any).frontmatter;
-				if (Boolean(frontmatter.draft) && !this.config.markdown.drafts) {
-					debug('build', timerMessage(`Skipping draft page ${page}`, this.timer.loadStart));
-					delete allPages[page];
-				}
-			}
-		});


Does this break drafts support? Didn't see where this was handled elsewhere.

Hm, I was thinking this was handled in the markdown plugin but I don't see the code for it. There are tests which are passing though. Will investigate more.

The test was just wrong, so this is broken in this branch. Will fix.

Fixed in 2dc17d0

.changeset/unlucky-hairs-camp.md

Co-authored-by: Nate Moore <[email protected]>

natemoo-re

Approved! Nice work.

Feel like this perf boost deserves a callout with an astro changeset!

…ithastro#3625) * Support re-exporting astro components containing client components * Include metadata for markdown too * Fix ssr, probably * Inject post-build * Remove tagName custom element test * Allows using the constructor for lit elements * Fix hoisted script scanning * Pass through plugin context * Get edge functions working in the edge tests * Fix types for the edge function integration * Upgrade the compiler * Upgrade compiler version * Better release notes for lit * Update .changeset/unlucky-hairs-camp.md Co-authored-by: Nate Moore <[email protected]> * Properly test that the draft was not rendered * Prevent from rendering draft posts * Add a changeset about the build perf improvement. Co-authored-by: Nate Moore <[email protected]>

Support re-exporting astro components containing client components

00a2309

github-actions bot added the pkg: astro Related to the core `astro` package (scope) label Jun 17, 2022

matthewp added 5 commits June 17, 2022 11:10

Include metadata for markdown too

e19994a

Fix ssr, probably

599447c

Inject post-build

c562eeb

Remove tagName custom element test

6fa2868

Allows using the constructor for lit elements

b21c957

github-actions bot added pkg: lit Related to Lit (scope) pkg: integration Related to any renderer integration (scope) labels Jun 17, 2022

matthewp added 8 commits June 17, 2022 16:04

Fix hoisted script scanning

e171202

Pass through plugin context

ebfd5cf

Get edge functions working in the edge tests

6094ed3

Merge branch 'main' into re-export-component-client

243f7ae

Merge branch 'main' into re-export-component-client

0c3a85f

Fix types for the edge function integration

4e4ff19

Upgrade the compiler

7f7a82b

Upgrade compiler version

04288d4

matthewp marked this pull request as ready for review June 20, 2022 13:41

matthewp commented Jun 20, 2022

View reviewed changes

matthewp mentioned this pull request Jun 20, 2022

Add private addPageExtension hook #3628

Merged

natemoo-re reviewed Jun 20, 2022

View reviewed changes

matthewp added 2 commits June 20, 2022 15:08

Better release notes for lit

06c2d75

Merge branch 'main' into re-export-component-client

6ca7a81

natemoo-re reviewed Jun 20, 2022

View reviewed changes

matthewp and others added 3 commits June 20, 2022 15:18

Update .changeset/unlucky-hairs-camp.md

79b5118

Co-authored-by: Nate Moore <[email protected]>

Properly test that the draft was not rendered

e47dfb5

Prevent from rendering draft posts

2dc17d0

natemoo-re approved these changes Jun 20, 2022

View reviewed changes

Add a changeset about the build perf improvement.

1476acc

matthewp merged commit f5afaf2 into main Jun 21, 2022

matthewp deleted the re-export-component-client branch June 21, 2022 12:32

github-actions bot mentioned this pull request Jun 21, 2022

[ci] release #3615

Merged

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Support re-exporting astro components containing client components #3625

Support re-exporting astro components containing client components #3625

matthewp commented Jun 17, 2022 •

edited

Loading

changeset-bot bot commented Jun 17, 2022 •

edited

Loading

matthewp Jun 20, 2022

matthewp Jun 20, 2022

matthewp Jun 20, 2022

matthewp Jun 20, 2022

natemoo-re left a comment

natemoo-re Jun 20, 2022

matthewp Jun 20, 2022

FredKSchott commented Jun 20, 2022

matthewp commented Jun 20, 2022 •

edited

Loading

natemoo-re left a comment

natemoo-re Jun 20, 2022

matthewp Jun 20, 2022

matthewp Jun 20, 2022

matthewp Jun 20, 2022

natemoo-re left a comment

Support re-exporting astro components containing client components #3625

Support re-exporting astro components containing client components #3625

Conversation

matthewp commented Jun 17, 2022 • edited Loading

Changes

Testing

Docs

changeset-bot bot commented Jun 17, 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

natemoo-re left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

FredKSchott commented Jun 20, 2022

matthewp commented Jun 20, 2022 • edited Loading

natemoo-re left a 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

natemoo-re left a comment

Choose a reason for hiding this comment

matthewp commented Jun 17, 2022 •

edited

Loading

changeset-bot bot commented Jun 17, 2022 •

edited

Loading

matthewp commented Jun 20, 2022 •

edited

Loading