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

Consolidate hydration scripts into just one #3571

Merged
merged 12 commits into from
Jun 15, 2022
Merged

Consolidate hydration scripts into just one #3571

merged 12 commits into from
Jun 15, 2022

Conversation

matthewp
Copy link
Contributor

Changes

  • This is a repeat of something we previously did, but had to revert: Revert "Consolidate inline hydration scripts into one (#3244)" #3275
  • New change is that there is a small serializer/deserializer that supports:
    • Date
    • RegExp
    • Map
    • Set
    • BigInt
    • URL
    • Everything that can be JSON.stringified.
  • How this works is:
    1. The first time we encounter a hydrated component in a page a small script is inlined.
    2. This script defines a custom element, astro-island.
    3. Each island contains attributes for things that need to be loaded (directive script, renderer script, component, etc) and its props.
    4. The custom element does the loading and rendering; essentially the same thing that happened in the individual scripts previously.

Testing

  • New E2E test added to ensure complex objects would be serialized correctly.
  • Previous tests updated.

Docs

N/A, perf improvement.

@changeset-bot
Copy link

changeset-bot bot commented Jun 10, 2022 •
edited
Loading

⚠️ No Changeset found

Latest commit: 7941c58

Merging this PR will not cause a version bump for any packages. If these changes should not result in a new version, you're good to go. If these changes should result in a version bump, you need to add a changeset.

This PR includes no changesets

When changesets are added to this PR, you'll see the packages that this PR includes changesets for and the associated semver types

Click here to learn what changesets are, and how to add one.

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

@github-actions github-actions bot added the pkg: astro Related to the core `astro` package (scope) label Jun 10, 2022
@github-actions
Copy link
Contributor

github-actions bot commented Jun 10, 2022 •
edited
Loading

⚖️ Bundle Size Check

Latest commit: 7941c58

File Old Size New Size Change
events 392 B 305 B - NaN undefined
hmr 5.3 KB 5.31 KB + 6 B
client:idle 990 B 471 B - NaN undefined
client:load 894 B 375 B - NaN undefined
client:media 1005 B 486 B - NaN undefined
client:only 894 B 375 B - NaN undefined
client:visible 1.08 KB 584 B - NaN undefined

@github-actions github-actions bot added the feat: markdown Related to Markdown (scope) label Jun 10, 2022
natemoo-re
natemoo-re reviewed Jun 11, 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.

I believe the defineVars codepath also runs the serializeProps function. Reminder to check that we're deserializing that properly, too.

@matthewp
Copy link
Contributor Author

@natemoo-re Looks like define:vars is already using JSON.stringify, this is main:

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

Line 470 in 2a798cc

export function defineScriptVars(vars: Record<any, any>) {

@matthewp matthewp marked this pull request as ready for review June 14, 2022 15:49
natemoo-re
natemoo-re reviewed Jun 14, 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.

Looks good—going to try to break this locally, but since E2E tests are all passing I suspect this is good to go.

packages/astro/package.json
@@ -66,6 +66,7 @@
"vendor"
],
"scripts": {
"prebuild": "astro-scripts prebuild --to-string \"src/runtime/server/astro-island.ts\"",
Copy link
Member

Choose a reason for hiding this comment

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

Clean, I like it!

packages/astro/package.json
@@ -121,7 +122,6 @@
"resolve": "^1.22.0",
"rollup": "^2.75.5",
"semver": "^7.3.7",
"serialize-javascript": "^6.0.0",
Copy link
Member

Choose a reason for hiding this comment

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

Very happy to see this go!

packages/astro/src/runtime/server/astro-island.ts Show resolved Hide resolved
packages/astro/src/runtime/server/astro-island.ts Show resolved Hide resolved
natemoo-re
natemoo-re approved these changes Jun 14, 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.

Awesome stuff, LGTM!

@matthewp matthewp merged commit fc52321 into main Jun 15, 2022
@matthewp matthewp deleted the no-script branch June 15, 2022 12:50
@natemoo-re natemoo-re mentioned this pull request Jun 15, 2022
Merged
@leaysgur leaysgur mentioned this pull request Jun 21, 2022
Merged
SiriousHunter pushed a commit to SiriousHunter/astro that referenced this pull request Feb 3, 2023
@matthewp
Consolidate hydration scripts into just one (withastro#3571)
571c0ea 
* Remove redundant hydration scripts

* Prebuild the island JS

* Fix build

* Updates to tests

* Update more references

* Custom element test now has two classic scripts

* Account for non-default exports

* Restructure hydration directives

* Move nested logic into the island component

* Remove try/catch
SiriousHunter pushed a commit to SiriousHunter/astro that referenced this pull request Feb 3, 2023
@matthewp
Consolidate hydration scripts into just one (withastro#3571)
7cb37f0 
* Remove redundant hydration scripts

* Prebuild the island JS

* Fix build

* Updates to tests

* Update more references

* Custom element test now has two classic scripts

* Account for non-default exports

* Restructure hydration directives

* Move nested logic into the island component

* Remove try/catch
@bluwy bluwy mentioned this pull request Jun 12, 2023
Merged
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers

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

Assignees
No one assigned
Labels
feat: markdown Related to Markdown (scope) 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.
2 participants
@matthewp @natemoo-re