Head propagation #5511

matthewp · 2022-12-01T21:44:37Z

Changes

This implements the primitives for head propagation. See the test case to see how this can be used.
Any module in the graph can be marked as doing head injection. Right now this is based on a comment syntax (which will be used for renderEntry. In the future Astro components could be marked as doing head injection by the compiler.
A Vite plugin walks the graph to mark the tree as having head injection.
At runtime components will mark themselves as doing injection. When we go to render the page we will recursively run their frontmatter scripts and collect all of the head content.
When we go to render the head content is populated and renders out separately from the rest of the page.

Testing

Added a test case using the low-level APIs. This is what renderEntry will do as well.

Docs

This is a low-level implementation to be used by renderEntry and in the future, a head propagation API.

changeset-bot · 2022-12-01T21:44:41Z

🦋 Changeset detected

Latest commit: 2a7f1d7

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

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/package.json

packages/astro/src/runtime/server/index.ts

packages/astro/src/runtime/server/render/page.ts

packages/astro/src/vite-plugin-astro/types.ts

packages/astro/src/runtime/server/render/astro/instance.ts

bluwy

Tried to digest this and it looks great aside from some comments below

packages/astro/src/vite-plugin-head-propagation/index.ts

packages/astro/src/core/compile/compile.ts

Co-authored-by: Bjorn Lu <[email protected]>

matthewp · 2022-12-05T21:00:23Z

!bench

matthewp · 2022-12-06T14:33:03Z

!bench

matthewp · 2022-12-06T15:20:02Z

!bench

github-actions · 2022-12-06T15:22:43Z

Node: 14
PR: 23k requests in 30.08s, 1.56 GB read
MAIN: 22k requests in 30.09s, 1.52 GB read

Node: 16
PR: 20k requests in 30.08s, 1.35 GB read
MAIN: 20k requests in 30.12s, 1.34 GB read

natemoo-re

Two small nits, but otherwise LGTM.

packages/astro/src/vite-plugin-head-propagation/index.ts

packages/astro/src/@types/astro.ts

bholmesdev

Small nit and a clarifying question, but propagreat work!

bholmesdev · 2022-12-06T20:51:15Z

packages/astro/src/runtime/server/render/head.ts

+	}
+}
+
+export function renderHead(result: SSRResult) {


nit: maybe name createRenderHead to clarify this returns another function?

bholmesdev · 2022-12-06T20:55:44Z

packages/astro/test/units/dev/head-injection.test.js

+
+const root = new URL('../../fixtures/alias/', import.meta.url);
+
+describe('head injection', () => {


Couldn't quite tell from these test cases, but will head injection support inline styles alongside standard stylesheets? I know that renderEntry needs to handle both inline styles and links from the render result today, since MDX outputs as inline styles in dev, stylesheets in production.

This makes it possible to create a component that does head injection. So renderEntry will need to use the right APIs, such as the createComponent object form, to return the CSS it needs.

So if I'm understanding you right, that work will be done in the renderEntry PR.

@matthewp got it. I'm asking since I know a component may want to inject an inline style or a link tag. It sounds like this API gives you the freedom to inject any HTML element + element children that you want?

Right, you can return any string or iterable, essentially the same thing you can do in a template. This PR contains a helper for rendering a stylesheet: https://github.com/withastro/astro/pull/5511/files#diff-a2d99b846ae3297fe01c808e11546d92b906ffafdbc17134bca73edf276fd3b5R17

I'll probably add more helpers in the other PR.

* Head propagation * Adding a changeset * Fix broken build * Self review stuff * Use compiler prerelease exact version * new compiler version * Update packages/astro/src/vite-plugin-head-propagation/index.ts Co-authored-by: Bjorn Lu <[email protected]> * Use getAstroMetadata * add .js * make relative lookup work on win * Use [email protected] * PR review comments * Make renderHead an alias for a better named function Co-authored-by: Bjorn Lu <[email protected]>

matthewp requested a review from a team as a code owner December 1, 2022 21:44

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

matthewp commented Dec 1, 2022

View reviewed changes

packages/astro/package.json Outdated Show resolved Hide resolved

matthewp self-assigned this Dec 1, 2022

matthewp commented Dec 1, 2022

View reviewed changes

packages/astro/src/runtime/server/index.ts Outdated Show resolved Hide resolved

matthewp commented Dec 1, 2022

View reviewed changes

packages/astro/src/runtime/server/render/page.ts Outdated Show resolved Hide resolved

matthewp commented Dec 1, 2022

View reviewed changes

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

sarah11918 removed the request for review from a team December 2, 2022 07:56

bluwy reviewed Dec 5, 2022

View reviewed changes

packages/astro/src/runtime/server/render/astro/instance.ts Outdated Show resolved Hide resolved

bluwy reviewed Dec 5, 2022

View reviewed changes

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

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

packages/astro/src/core/compile/compile.ts Outdated Show resolved Hide resolved

matthewp added 4 commits December 5, 2022 10:36

Head propagation

1106952

Adding a changeset

88b8046

Fix broken build

d839c59

Self review stuff

d93a668

matthewp force-pushed the head-propogation branch from dc2196c to d93a668 Compare December 5, 2022 15:42

matthewp and others added 3 commits December 5, 2022 11:00

Use compiler prerelease exact version

ee1926b

new compiler version

4630c62

Update packages/astro/src/vite-plugin-head-propagation/index.ts

a3ffb72

Co-authored-by: Bjorn Lu <[email protected]>

matthewp and others added 4 commits December 5, 2022 16:14

Use getAstroMetadata

77b9748

add .js

a13462d

make relative lookup work on win

878d5ba

Use [email protected]

163d6af

withastro deleted a comment from github-actions bot Dec 6, 2022

natemoo-re approved these changes Dec 6, 2022

View reviewed changes

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

packages/astro/src/@types/astro.ts Show resolved Hide resolved

PR review comments

2fe8b3c

bholmesdev reviewed Dec 6, 2022

View reviewed changes

Make renderHead an alias for a better named function

2a7f1d7

matthewp merged commit 05915fe into main Dec 6, 2022

matthewp deleted the head-propogation branch December 6, 2022 21:26

astrobot-houston mentioned this pull request Dec 6, 2022

[ci] release #5544

Merged

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Head propagation #5511

Head propagation #5511

matthewp commented Dec 1, 2022

changeset-bot bot commented Dec 1, 2022 •

edited

Loading

bluwy left a comment

matthewp commented Dec 5, 2022

matthewp commented Dec 6, 2022

matthewp commented Dec 6, 2022

github-actions bot commented Dec 6, 2022

natemoo-re left a comment

bholmesdev left a comment

bholmesdev Dec 6, 2022

bholmesdev Dec 6, 2022

matthewp Dec 6, 2022

bholmesdev Dec 6, 2022

matthewp Dec 6, 2022


		const root = new URL('../../fixtures/alias/', import.meta.url);

		describe('head injection', () => {

Head propagation #5511

Head propagation #5511

Conversation

matthewp commented Dec 1, 2022

Changes

Testing

Docs

changeset-bot bot commented Dec 1, 2022 • edited Loading

🦋 Changeset detected

bluwy left a comment

Choose a reason for hiding this comment

matthewp commented Dec 5, 2022

matthewp commented Dec 6, 2022

matthewp commented Dec 6, 2022

github-actions bot commented Dec 6, 2022

natemoo-re left a comment

Choose a reason for hiding this comment

bholmesdev left a comment

Choose a reason for hiding this comment

bholmesdev Dec 6, 2022

Choose a reason for hiding this comment

bholmesdev Dec 6, 2022

Choose a reason for hiding this comment

matthewp Dec 6, 2022

Choose a reason for hiding this comment

bholmesdev Dec 6, 2022

Choose a reason for hiding this comment

matthewp Dec 6, 2022

Choose a reason for hiding this comment

changeset-bot bot commented Dec 1, 2022 •

edited

Loading