Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Head propagation #5511

Merged
merged 13 commits into from Dec 6, 2022
Merged

Head propagation #5511

merged 13 commits into from Dec 6, 2022

Conversation

matthewp
Copy link
Contributor

@matthewp matthewp commented Dec 1, 2022

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.

@matthewp matthewp requested a review from a team as a code owner December 1, 2022 21:44
@changeset-bot
Copy link

changeset-bot bot commented Dec 1, 2022 •
edited

🦋 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

@github-actions github-actions bot added the pkg: astro Related to the core `astro` package (scope) label Dec 1, 2022
matthewp
matthewp commented Dec 1, 2022
View reviewed changes
packages/astro/package.json Outdated Show resolved Hide resolved
@matthewp matthewp self-assigned this Dec 1, 2022
@sarah11918 sarah11918 removed the request for review from a team December 2, 2022 07:56
bluwy
bluwy reviewed Dec 5, 2022
View reviewed changes
Copy link
Member

@bluwy bluwy left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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

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
Copy link
Contributor Author

matthewp commented Dec 5, 2022

!bench

@withastro withastro deleted a comment from github-actions bot Dec 6, 2022
@matthewp
Copy link
Contributor Author

matthewp commented Dec 6, 2022

!bench

1 similar comment
@matthewp
Copy link
Contributor Author

matthewp commented Dec 6, 2022

!bench

@github-actions
Copy link
Contributor

github-actions bot commented Dec 6, 2022

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
natemoo-re approved these changes Dec 6, 2022
View reviewed changes
Copy link
Member

@natemoo-re natemoo-re left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Two small nits, but otherwise LGTM.

packages/astro/src/vite-plugin-head-propagation/index.ts Outdated Show resolved Hide resolved
packages/astro/src/@types/astro.ts Show resolved Hide resolved
bholmesdev
bholmesdev reviewed Dec 6, 2022
View reviewed changes
Copy link
Contributor

@bholmesdev bholmesdev left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Small nit and a clarifying question, but propagreat work!

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

export function renderHead(result: SSRResult) {
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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

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

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

describe('head injection', () => {
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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.

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@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?

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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.

@matthewp matthewp merged commit 05915fe into main Dec 6, 2022
@matthewp matthewp deleted the head-propogation branch December 6, 2022 21:26
@astrobot-houston astrobot-houston mentioned this pull request Dec 6, 2022
Merged
matthewp added a commit that referenced this pull request Dec 6, 2022
@matthewp @bluwy
Head propagation (#5511)
74dba1e 
* 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 <bjornlu.dev@gmail.com>

* Use getAstroMetadata

* add .js

* make relative lookup work on win

* Use compiler@0.30.0

* PR review comments

* Make renderHead an alias for a better named function

Co-authored-by: Bjorn Lu <bjornlu.dev@gmail.com>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers

@bluwy bluwy bluwy left review comments

@bholmesdev bholmesdev bholmesdev left review comments

@natemoo-re natemoo-re natemoo-re approved these changes

Assignees

@matthewp matthewp

Labels
pkg: astro Related to the core `astro` package (scope)
Projects
None yet
Milestone
No milestone
Development

Successfully merging this pull request may close these issues.

None yet
4 participants
@matthewp @natemoo-re @bluwy @bholmesdev