Add hydration to Solid renderer #1479

ryansolid · 2021-10-03T05:12:54Z

Changes

This change updates Solid's renderer to hydrate instead of delete all the elements in the browser and recreate them. That being said there are some other considerations here.

Solid currently doesn't support multiple asynchronous hydration roots. Since components in Astro can be hydrated at any time there is no guarantee of synchronous execution. This can cause conflicts with automatic data serialization and event replaying. To avoid pitfalls this PR disables both of these features.

In so, I have changed the renderer to be synchronous (ie.. renderToString) during static generation. The impact is that Suspense will now only run in the browser and any async data fetching will need to happen outside of the Solid Components if you wish it to happen on the server. If a user chooses to use Suspense, the static page will contain the loading placeholder and at hydration time in the browser it will do the data fetch and replace the content.

This is definitely a tradeoff as previous to this change one could feasibly use Solid with server-side Suspense to render purely static components. However, app with "hydration" would have completely re-run in the client up to this point anyway which means fetching meant to be server only would have been running in the browser and likely have not worked anyway. I think it is prudent to restrict Solid's advanced features until we can provide an update with proper support.

Also added aliases for Stores which are another subpackage that ships with Solid.

Testing

Docs

changeset-bot · 2021-10-03T05:12:56Z

⚠️ No Changeset found

Latest commit: 1e38271

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

vercel · 2021-10-03T05:12:59Z

This pull request is being automatically deployed with Vercel (learn more).
To see the status of your deployments, click below or on the icon next to each commit.

astro-docs – ./docs

🔍 Inspect: https://vercel.com/pikapkg/astro-docs/8xNDeQGnWbXzFB3ZNmp8yWvwyrJB
✅ Preview: Canceled

[Deployment for 1e38271 canceled]

astro-www – ./www

🔍 Inspect: https://vercel.com/pikapkg/astro-www/tCVvVuH5fjYmi7iUFPT7e1b3RZjY
✅ Preview: Canceled

[Deployment for 1e38271 canceled]

matthewp · 2021-10-04T15:46:17Z

Thanks! I'm first going to try to get this working in the next branch which works slightly differently, but intended to release this in 0.20.x (main) as well.

matthewp · 2021-10-04T18:28:30Z

packages/renderers/renderer-solid/server.js

 })
 );
- return { html };
+ return { html: `<script>window._$HYDRATION||(window._$HYDRATION={events:[],completed:new WeakSet})</script>` + html };


Can this be reversed so that the script is last? The reason is that client:visible works by observing children of the root and script tags don't trigger IntersectionObserver callbacks. Putting the script at the end fixes it.

It won't affect hydration because Astro islands are lazy anyways, this script runs before hydration even if it's at the end.

Ah.. that's what I hit in the stream. Ok sure no problem I will change it.

matthewp

Discussing flipping the script so that client:visible continues to work.

matthewp · 2021-10-05T16:20:47Z

Great, thank you!

* feat: add hydration to Solid renderer * fix: intersection observer, move script to the end

* feat: add hydration to Solid renderer * fix: intersection observer, move script to the end Co-authored-by: Ryan Carniato <[email protected]>

* feat: add hydration to Solid renderer * fix: intersection observer, move script to the end

* feat: add hydration to Solid renderer * fix: intersection observer, move script to the end Co-authored-by: Ryan Carniato <[email protected]>

* make astro-root uids unique * Move Astro to Vite * Update tests * More test improvements * fred fixes * Update compiler, improve tests * Fix runtime, improve code frame * Add Markdown support * Tycho fixes * Fred fixes part 2 * Throw Error for WIP Features * Improve testing suite * Allow users to pass config to Vite * Fix npm install (#1407) * Automate publish on merge (#1408) * Add NPM_TOKEN to publish script (#1409) * Create .npmrc * Clean up astro deps (#1411) * Use new renderers (#1412) * feat: update compiler (#1421) * Try mocha/chai test runners (#1418) * Try mocha/chai test runners * Disable failing smoke test for now Will revert when next can build docs * Enable mocha in parallel mode * Remove warning * Update docs * Fix Windows bug * Fix internal imports * Fix styles * Fix CI release on merge to next (#1427) * Fix logger locale parsing (#1439) * fix(logger): locale parsing * Fixed issue of compiler crash when "c" locale was encountered * Return default locale if parsed locale is less than 2 chars long * chore: add changeset * Apply changes from #1387 * Add back in support for children (#1486) * Add back in support for children * Be more careful * Enables most slot tests (#1494) * Enables most slot tests * Use spreadAttributes * Add hydration to Solid renderer (#1479) (#1495) * feat: add hydration to Solid renderer * fix: intersection observer, move script to the end Co-authored-by: Ryan Carniato <[email protected]> * [next] support Astro.slots API (#1516) * [next] Support for custom elements (#1528) * [next] Support for custom elements * Fix eslint errors * eslint again * [next] Fix Astro.fetchContent (#1480) * fix Astro.fetchContent * fix(fetchContent): cast type Co-authored-by: Nate Moore <[email protected]> * Move hydration to the compiler (#1547) * Move hydration to the compiler * Move extracting url, export to util fn * Brings back astro-dynamic tests (#1548) * Implements top-level Astro + Astro.resolve (#1556) * Implements top-level Astro + Astro.resolve * Fix linting * [next] Update renderers (#1509) * chore: update vite * fix(renderers): point renderers to resolved server/client entrypoints * Chore: Enable more tests with new compiler changes (#1558) * [Next] `fetch` support (#1563) * fix: polyfill fetch in every ssr scenario * test(fetch): update fetch tests * docs: update data fetching guide to remove caveats about `fetch` and isomorphic usage * refactor: update regex for clarity * Restructure (#1569) * Upgrade to @astrojs/compiler 0.2.0 (#1584) * Use Vite fork (#1585) * Use Vite fork * Fix linting * Move Vite to vendor/ and add a license * Fix linting * Include the dist folder * Update files config * Markdown compilation (#1593) * Markdown compilation * remove debugger * Gets lit hydration working (#1595) * Gets Astro.fetchContent compilation to work (#1596) * Gets Astro.fetchContent compilation to work This fixes Astro.fetchContent so that we handle esbuild transforming the name of the nested Astro call. * Remove debugging * Update the tests * Remove another debugger * Update Vite to latest (#1597) * Add Prism syntax highlighting (#1598) * Scoped styles with markdown (#1599) * Bugfix: fix getStaticPaths() cache miss (#1602) * Fix build order (#1609) * Bugfix: restore build to get all paths earlier, when build. Same as main. * Also re-add timings * [next] blog example fully working (#1610) * Add environment variables docs (Closes #873) (#1587) * Added environment variables docs (Closes #873) * Fixed prefix * Remove numbered comments (#1611) * Chore: remove numbered comments * Clean up block comments * comment style fixes (#1614) * [next] Upgrade compiler (#1619) * [next] Upgrade compiler * Upgrade to latest compiler * Fix the path to global css * Removed debugger * feat: add fragment support to vite-plugin-astro (#1600) * [next] fix `.tsx` handling (#1620) * fix: support tsx in JSX plugin * fix: preserve JSX via esbuild, only use Babel for JSX compilation * fix: handle upcoming Vite API for `ssr` flag * [next] Add CSS preprocessing (#1589) * Add concept for style support in Astro * Update style preprocessor to use new compiler * fix: massage preprocessStyle type * fix: @astrojs/compiler types Co-authored-by: Nate Moore <[email protected]> * fix issues in blog-multiple-authors (#1621) * Move Sass to deps (#1622) * Update renderer API for Vite (#1623) * Update renderer API for Vite * Fix lit-element tests * Clean up comments * Throw friendly error if renderer provides viteConfig in a bad format * Fix changesets (#1628) * Remove cheerio scanning from build stats (#1629) * Minor change to jsxTransformOptions, update Renderer API docs (#1630) * [next] docs example fully working (#1627) * [next] docs example fully working * Upgrade compiler to unlock docs * Add `class:list` directive (#1612) * Add support for class:list directive The `class:list` directive serializes an expression of css class names. For React components, `className:list` is also supported. * Remove `className` support and React tests * Add tests for the absence of omitted classes * fix: `define:vars` scoping for styles (#1632) * feat: fix Debug component (#1633) * [next] Fix `<Markdown>` component (#1631) * fix: cleanup issues with <Markdown> component * fix: fix `content` usage with Markdown * [next] Fix `<Code>` component (#1635) * fix: enable Code component * test: update expect to chai format * Fixes solid (#1634) * Fixes solid * Rename the test * Rebase with next * Skip solid test for now * Add support for markdown plugins (#1650) * Fix broken next release (#1652) * Prevent passing to Svelte components * Prevent passing class to Vue components * Add CSS injection, fix portfolio example (#1648) * Fix portfolio example * Add .pcss extension * Update load ssr opts * Update packages/astro/src/runtime/server/index.ts Co-authored-by: Jonathan Neal <[email protected]> Co-authored-by: Nate Moore <[email protected]> Co-authored-by: Jonathan Neal <[email protected]> * Fixes external HMR (#1654) * Upgrade compiler version (#1655) Fixes docs and blog examples * Resolve renderers relative to the projectRoot (#1659) * Template fixes (#1656) * fix: dedupe hashes for identical islands (#1660) * fix: scope `define:vars` to `:root` for `<style global>` (#1663) * chore: update compiler to latest (#1664) * [next] fix island hydration inside of `<Markdown>` (#1665) * fix: create rehype plugin to smooth over island hydration bugs * refactor: remove debug code * chore: explain need for `rehypeIslands` * Bugfix: renderer-lit missing files on npm (#1669) * Force Vite to rebuild dependencies (#1670) * [next] Add `preact/compat` renderer (#1668) * feat: add preact/compat entry for `@astrojs/renderer-preact` * Update index.js * Bugfix: plugin-astro-fetch tries to append node-fetch to node-fetch (#1671) * Fix Vite race condition (#1674) * Fix with-nanostore deps (#1675) Adds missing Solid renderer * [next] Fix `resolveDependency` on Windows (#1666) * fix: Windows issue with resolveDependency util * chore: add comment * Update CONTRIBUTING.md (#1677) * Prevent scanning a user's deps (#1678) * Prevent scanning a user's deps * Remove unused things * remove unused util * Adding a changeset for the remark plugin * Config changes needed for stater template (#1680) This does 2 things: 1. Adds prismjs as a dep. 2. Adds shiki as an external. * Next bugs (#1681) * fix(#1679): hoisted <script> rendering * fix(#1679): do not print global for styles, but do for scripts * fix: update ObjectSet implementation * fix: dedupe elements in sets * [next] update compiler (#1683) * chore: update compiler * chore: update compiler (again) * Fix Astro HMR bottleneck (#1684) * Bugfix: JSX renderers can be declared in any order (#1686) * chore: update compiler (#1690) * Exclude lit-server from being optimized (#1691) This should get the lit example working from `npm`. * fix: exclude all renderer server entrypoints (#1692) * chore: update compiler (#1705) * fix: do not crash when Markdown has no content (#1702) * feat: improve support for third-party React packages (#1701) * Remove prism warning when no language is provided (#1703) * Remove prism warning when no language is provided * Add the plaintext language instead * retry deploy * chore: enter prerelease mode under `next` (#1707) * Updates to the changesets (#1708) * Updates to the changesets * Adds a changeset for astro-prism Co-authored-by: Fred K. Schott <[email protected]> Co-authored-by: Nate Moore <[email protected]> Co-authored-by: Nate Moore <[email protected]> Co-authored-by: Pranav Karawale <[email protected]> Co-authored-by: Matthew Phillips <[email protected]> Co-authored-by: Matthew Phillips <[email protected]> Co-authored-by: Ryan Carniato <[email protected]> Co-authored-by: AsyncBanana <[email protected]> Co-authored-by: Jonathan Neal <[email protected]>

* make astro-root uids unique * Move Astro to Vite * Update tests * More test improvements * fred fixes * Update compiler, improve tests * Fix runtime, improve code frame * Add Markdown support * Tycho fixes * Fred fixes part 2 * Throw Error for WIP Features * Improve testing suite * Allow users to pass config to Vite * Fix npm install (withastro#1407) * Automate publish on merge (withastro#1408) * Add NPM_TOKEN to publish script (withastro#1409) * Create .npmrc * Clean up astro deps (withastro#1411) * Use new renderers (withastro#1412) * feat: update compiler (withastro#1421) * Try mocha/chai test runners (withastro#1418) * Try mocha/chai test runners * Disable failing smoke test for now Will revert when next can build docs * Enable mocha in parallel mode * Remove warning * Update docs * Fix Windows bug * Fix internal imports * Fix styles * Fix CI release on merge to next (withastro#1427) * Fix logger locale parsing (withastro#1439) * fix(logger): locale parsing * Fixed issue of compiler crash when "c" locale was encountered * Return default locale if parsed locale is less than 2 chars long * chore: add changeset * Apply changes from withastro#1387 * Add back in support for children (withastro#1486) * Add back in support for children * Be more careful * Enables most slot tests (withastro#1494) * Enables most slot tests * Use spreadAttributes * Add hydration to Solid renderer (withastro#1479) (withastro#1495) * feat: add hydration to Solid renderer * fix: intersection observer, move script to the end Co-authored-by: Ryan Carniato <[email protected]> * [next] support Astro.slots API (withastro#1516) * [next] Support for custom elements (withastro#1528) * [next] Support for custom elements * Fix eslint errors * eslint again * [next] Fix Astro.fetchContent (withastro#1480) * fix Astro.fetchContent * fix(fetchContent): cast type Co-authored-by: Nate Moore <[email protected]> * Move hydration to the compiler (withastro#1547) * Move hydration to the compiler * Move extracting url, export to util fn * Brings back astro-dynamic tests (withastro#1548) * Implements top-level Astro + Astro.resolve (withastro#1556) * Implements top-level Astro + Astro.resolve * Fix linting * [next] Update renderers (withastro#1509) * chore: update vite * fix(renderers): point renderers to resolved server/client entrypoints * Chore: Enable more tests with new compiler changes (withastro#1558) * [Next] `fetch` support (withastro#1563) * fix: polyfill fetch in every ssr scenario * test(fetch): update fetch tests * docs: update data fetching guide to remove caveats about `fetch` and isomorphic usage * refactor: update regex for clarity * Restructure (withastro#1569) * Upgrade to @astrojs/compiler 0.2.0 (withastro#1584) * Use Vite fork (withastro#1585) * Use Vite fork * Fix linting * Move Vite to vendor/ and add a license * Fix linting * Include the dist folder * Update files config * Markdown compilation (withastro#1593) * Markdown compilation * remove debugger * Gets lit hydration working (withastro#1595) * Gets Astro.fetchContent compilation to work (withastro#1596) * Gets Astro.fetchContent compilation to work This fixes Astro.fetchContent so that we handle esbuild transforming the name of the nested Astro call. * Remove debugging * Update the tests * Remove another debugger * Update Vite to latest (withastro#1597) * Add Prism syntax highlighting (withastro#1598) * Scoped styles with markdown (withastro#1599) * Bugfix: fix getStaticPaths() cache miss (withastro#1602) * Fix build order (withastro#1609) * Bugfix: restore build to get all paths earlier, when build. Same as main. * Also re-add timings * [next] blog example fully working (withastro#1610) * Add environment variables docs (Closes withastro#873) (withastro#1587) * Added environment variables docs (Closes withastro#873) * Fixed prefix * Remove numbered comments (withastro#1611) * Chore: remove numbered comments * Clean up block comments * comment style fixes (withastro#1614) * [next] Upgrade compiler (withastro#1619) * [next] Upgrade compiler * Upgrade to latest compiler * Fix the path to global css * Removed debugger * feat: add fragment support to vite-plugin-astro (withastro#1600) * [next] fix `.tsx` handling (withastro#1620) * fix: support tsx in JSX plugin * fix: preserve JSX via esbuild, only use Babel for JSX compilation * fix: handle upcoming Vite API for `ssr` flag * [next] Add CSS preprocessing (withastro#1589) * Add concept for style support in Astro * Update style preprocessor to use new compiler * fix: massage preprocessStyle type * fix: @astrojs/compiler types Co-authored-by: Nate Moore <[email protected]> * fix issues in blog-multiple-authors (withastro#1621) * Move Sass to deps (withastro#1622) * Update renderer API for Vite (withastro#1623) * Update renderer API for Vite * Fix lit-element tests * Clean up comments * Throw friendly error if renderer provides viteConfig in a bad format * Fix changesets (withastro#1628) * Remove cheerio scanning from build stats (withastro#1629) * Minor change to jsxTransformOptions, update Renderer API docs (withastro#1630) * [next] docs example fully working (withastro#1627) * [next] docs example fully working * Upgrade compiler to unlock docs * Add `class:list` directive (withastro#1612) * Add support for class:list directive The `class:list` directive serializes an expression of css class names. For React components, `className:list` is also supported. * Remove `className` support and React tests * Add tests for the absence of omitted classes * fix: `define:vars` scoping for styles (withastro#1632) * feat: fix Debug component (withastro#1633) * [next] Fix `<Markdown>` component (withastro#1631) * fix: cleanup issues with <Markdown> component * fix: fix `content` usage with Markdown * [next] Fix `<Code>` component (withastro#1635) * fix: enable Code component * test: update expect to chai format * Fixes solid (withastro#1634) * Fixes solid * Rename the test * Rebase with next * Skip solid test for now * Add support for markdown plugins (withastro#1650) * Fix broken next release (withastro#1652) * Prevent passing to Svelte components * Prevent passing class to Vue components * Add CSS injection, fix portfolio example (withastro#1648) * Fix portfolio example * Add .pcss extension * Update load ssr opts * Update packages/astro/src/runtime/server/index.ts Co-authored-by: Jonathan Neal <[email protected]> Co-authored-by: Nate Moore <[email protected]> Co-authored-by: Jonathan Neal <[email protected]> * Fixes external HMR (withastro#1654) * Upgrade compiler version (withastro#1655) Fixes docs and blog examples * Resolve renderers relative to the projectRoot (withastro#1659) * Template fixes (withastro#1656) * fix: dedupe hashes for identical islands (withastro#1660) * fix: scope `define:vars` to `:root` for `<style global>` (withastro#1663) * chore: update compiler to latest (withastro#1664) * [next] fix island hydration inside of `<Markdown>` (withastro#1665) * fix: create rehype plugin to smooth over island hydration bugs * refactor: remove debug code * chore: explain need for `rehypeIslands` * Bugfix: renderer-lit missing files on npm (withastro#1669) * Force Vite to rebuild dependencies (withastro#1670) * [next] Add `preact/compat` renderer (withastro#1668) * feat: add preact/compat entry for `@astrojs/renderer-preact` * Update index.js * Bugfix: plugin-astro-fetch tries to append node-fetch to node-fetch (withastro#1671) * Fix Vite race condition (withastro#1674) * Fix with-nanostore deps (withastro#1675) Adds missing Solid renderer * [next] Fix `resolveDependency` on Windows (withastro#1666) * fix: Windows issue with resolveDependency util * chore: add comment * Update CONTRIBUTING.md (withastro#1677) * Prevent scanning a user's deps (withastro#1678) * Prevent scanning a user's deps * Remove unused things * remove unused util * Adding a changeset for the remark plugin * Config changes needed for stater template (withastro#1680) This does 2 things: 1. Adds prismjs as a dep. 2. Adds shiki as an external. * Next bugs (withastro#1681) * fix(withastro#1679): hoisted <script> rendering * fix(withastro#1679): do not print global for styles, but do for scripts * fix: update ObjectSet implementation * fix: dedupe elements in sets * [next] update compiler (withastro#1683) * chore: update compiler * chore: update compiler (again) * Fix Astro HMR bottleneck (withastro#1684) * Bugfix: JSX renderers can be declared in any order (withastro#1686) * chore: update compiler (withastro#1690) * Exclude lit-server from being optimized (withastro#1691) This should get the lit example working from `npm`. * fix: exclude all renderer server entrypoints (withastro#1692) * chore: update compiler (withastro#1705) * fix: do not crash when Markdown has no content (withastro#1702) * feat: improve support for third-party React packages (withastro#1701) * Remove prism warning when no language is provided (withastro#1703) * Remove prism warning when no language is provided * Add the plaintext language instead * retry deploy * chore: enter prerelease mode under `next` (withastro#1707) * Updates to the changesets (withastro#1708) * Updates to the changesets * Adds a changeset for astro-prism Co-authored-by: Fred K. Schott <[email protected]> Co-authored-by: Nate Moore <[email protected]> Co-authored-by: Nate Moore <[email protected]> Co-authored-by: Pranav Karawale <[email protected]> Co-authored-by: Matthew Phillips <[email protected]> Co-authored-by: Matthew Phillips <[email protected]> Co-authored-by: Ryan Carniato <[email protected]> Co-authored-by: AsyncBanana <[email protected]> Co-authored-by: Jonathan Neal <[email protected]>

feat: add hydration to Solid renderer

db7bfad

ryansolid requested a review from a team as a code owner October 3, 2021 05:12

vercel bot temporarily deployed to Preview – astro-docs October 3, 2021 05:12 Inactive

vercel bot temporarily deployed to Preview – astro-www October 3, 2021 05:13 Inactive

matthewp self-assigned this Oct 4, 2021

matthewp reviewed Oct 4, 2021

View reviewed changes

matthewp requested changes Oct 4, 2021

View reviewed changes

fix: intersection observer, move script to the end

1e38271

vercel bot temporarily deployed to Preview – astro-docs October 5, 2021 03:39 Inactive

vercel bot temporarily deployed to Preview – astro-www October 5, 2021 03:39 Inactive

matthewp approved these changes Oct 5, 2021

View reviewed changes

matthewp merged commit f8d1a35 into withastro:main Oct 5, 2021

matthewp pushed a commit that referenced this pull request Oct 5, 2021

Add hydration to Solid renderer (#1479)

408adbe

* feat: add hydration to Solid renderer * fix: intersection observer, move script to the end

matthewp mentioned this pull request Oct 5, 2021

Add hydration to Solid renderer (#1479) #1495

Merged

matthewp added a commit that referenced this pull request Oct 5, 2021

Add hydration to Solid renderer (#1479) (#1495)

876569d

* feat: add hydration to Solid renderer * fix: intersection observer, move script to the end Co-authored-by: Ryan Carniato <[email protected]>

felipe300 pushed a commit to felipe300/astro that referenced this pull request Oct 13, 2021

Add hydration to Solid renderer (withastro#1479)

a541584

* feat: add hydration to Solid renderer * fix: intersection observer, move script to the end

drwpow pushed a commit that referenced this pull request Oct 15, 2021

Add hydration to Solid renderer (#1479) (#1495)

8c30740

* feat: add hydration to Solid renderer * fix: intersection observer, move script to the end Co-authored-by: Ryan Carniato <[email protected]>

drwpow pushed a commit that referenced this pull request Oct 22, 2021

Add hydration to Solid renderer (#1479) (#1495)

1bd3cf8

* feat: add hydration to Solid renderer * fix: intersection observer, move script to the end Co-authored-by: Ryan Carniato <[email protected]>

ryansolid deleted the solid-hydrate branch April 6, 2022 07:35

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Add hydration to Solid renderer #1479

Add hydration to Solid renderer #1479

ryansolid commented Oct 3, 2021 •

edited

Loading

changeset-bot bot commented Oct 3, 2021 •

edited

Loading

vercel bot commented Oct 3, 2021 •

edited

Loading

matthewp commented Oct 4, 2021

matthewp Oct 4, 2021

ryansolid Oct 5, 2021

matthewp left a comment

matthewp commented Oct 5, 2021

Add hydration to Solid renderer #1479

Add hydration to Solid renderer #1479

Conversation

ryansolid commented Oct 3, 2021 • edited Loading

Changes

Testing

Docs

changeset-bot bot commented Oct 3, 2021 • edited Loading

⚠️ No Changeset found

vercel bot commented Oct 3, 2021 • edited Loading

astro-docs – ./docs

astro-www – ./www

matthewp commented Oct 4, 2021

matthewp Oct 4, 2021

Choose a reason for hiding this comment

ryansolid Oct 5, 2021

Choose a reason for hiding this comment

matthewp left a comment

Choose a reason for hiding this comment

matthewp commented Oct 5, 2021

ryansolid commented Oct 3, 2021 •

edited

Loading

changeset-bot bot commented Oct 3, 2021 •

edited

Loading

vercel bot commented Oct 3, 2021 •

edited

Loading