Partials by matthewp · Pull Request #8755 · withastro/astro

matthewp · 2023-10-05T14:57:06Z

Changes

Implementation for Partials RFC roadmap#721
Any page component's module can export a fragment boolean which is used to determine if rendering should be fragment mode.
When in fragment mode omit the doctype and head injection.

Testing

Fixture test, checks that the fragment only contains the written HTML and not doctype/head content.

Docs

Partials guide docs#5128

changeset-bot · 2023-10-05T14:57:10Z

🦋 Changeset detected

Latest commit: 5a8d9fa

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

This PR is blocked because it contains a minor changeset. A reviewer will merge this at the next release if approved.

matthewp · 2023-10-05T15:45:19Z

!preview fragments

matthewp · 2023-10-05T17:31:29Z

!preview fragments

matthewp · 2023-10-05T17:45:34Z

!preview fragments

matthewp · 2023-10-05T17:58:48Z

!preview fragments

matthewp · 2023-10-05T19:01:58Z

!preview fragments

matthewp · 2023-10-06T19:29:53Z

!preview fragments

matthewp · 2023-10-06T19:50:52Z

!preview fragments

matthewp · 2023-10-06T20:01:29Z

!preview fragments

matthewp · 2023-10-06T20:14:36Z

This feature can be tried out by installing the preview release:

npm install astro@next--fragments

matthewp · 2023-10-17T16:18:37Z

!preview fragments

github-actions · 2023-10-17T16:21:24Z

 > root@0.0.0 release /home/runner/work/astro/astro > pnpm run build && changeset publish "--tag" "next--fragments" > root@0.0.0 build /home/runner/work/astro/astro > turbo run build --filter=astro --filter=create-astro --filter="@astrojs/*" --filter="@benchmark/*" �[2m• Packages in scope: @astrojs/alpinejs, @astrojs/cloudflare, @astrojs/internal-helpers, @astrojs/lit, @astrojs/markdoc, @astrojs/markdown-remark, @astrojs/mdx, @astrojs/netlify, @astrojs/node, @astrojs/partytown, @astrojs/preact, @astrojs/prefetch, @astrojs/prism, @astrojs/react, @astrojs/rss, @astrojs/sitemap, @astrojs/solid-js, @astrojs/svelte, @astrojs/tailwind, @astrojs/telemetry, @astrojs/underscore-redirects, @astrojs/vercel, @astrojs/vue, @benchmark/timer, astro, create-astro�[0m �[2m• Running�[0m �[2m�[1mbuild�[0m�[0m �[2min 26 packages�[0m �[2m• Remote caching enabled�[0m ::group::@astrojs/telemetry:build cache hit, suppressing logs �[2m8f791e5bb7108651�[0m ::endgroup:: ::group::create-astro:build cache hit, suppressing logs �[2mb92067e8d3d6f572�[0m ::endgroup:: ::group::@astrojs/internal-helpers:build cache hit, suppressing logs �[2mc6ad1a8f27dca66f�[0m ::endgroup:: ::group::@astrojs/prism:build cache hit, suppressing logs �[2m1fbe4acc344b9100�[0m ::endgroup:: ::group::@astrojs/markdown-remark:build cache hit, suppressing logs �[2m5ea7eda930ba6d10�[0m ::endgroup:: ::group::astro:build cache miss, executing �[2m937a998db784fe82�[0m > astro@0.0.0-fragments-20231017161931 build /home/runner/work/astro/astro/packages/astro > pnpm run prebuild && astro-scripts build "src/**/*.{ts,js}" && tsc && pnpm run postbuild > astro@0.0.0-fragments-20231017161931 prebuild /home/runner/work/astro/astro/packages/astro > astro-scripts prebuild --to-string "src/runtime/server/astro-island.ts" "src/runtime/client/{idle,load,media,only,visible}.ts" > astro@0.0.0-fragments-20231017161931 postbuild /home/runner/work/astro/astro/packages/astro > astro-scripts copy "src/**/*.astro" && astro-scripts copy "src/**/*.wasm" ::endgroup:: ::group::@astrojs/alpinejs:build cache miss, executing �[2m2c330545195d8d4a�[0m > @astrojs/alpinejs@0.3.1 build /home/runner/work/astro/astro/packages/integrations/alpinejs > astro-scripts build "src/**/*.ts" && tsc ::endgroup:: ::group::@astrojs/tailwind:build cache miss, executing �[2mfd0cf8901d1effd8�[0m > @astrojs/tailwind@5.0.2 build /home/runner/work/astro/astro/packages/integrations/tailwind > astro-scripts build "src/**/*.ts" && tsc ::endgroup:: ::group::@astrojs/underscore-redirects:build cache miss, executing �[2mc351d539a254915e�[0m > @astrojs/underscore-redirects@0.3.1 build /home/runner/work/astro/astro/packages/underscore-redirects > astro-scripts build "src/**/*.ts" && tsc -p tsconfig.json ::endgroup:: ::group::@astrojs/lit:build cache miss, executing �[2mb0905168d6f3a63f�[0m > @astrojs/lit@3.0.2 build /home/runner/work/astro/astro/packages/integrations/lit > astro-scripts build "src/**/*.ts" && tsc ::endgroup:: ::group::@astrojs/rss:build cache miss, executing �[2m44d2c18cbd2df873�[0m > @astrojs/rss@3.0.0 build /home/runner/work/astro/astro/packages/astro-rss > astro-scripts build "src/**/*.ts" && tsc ::endgroup:: ::group::@astrojs/react:build cache miss, executing �[2m788b922887688613�[0m > @astrojs/react@3.0.3 build /home/runner/work/astro/astro/packages/integrations/react > astro-scripts build "src/**/*.ts" && tsc ::endgroup:: ::group::@astrojs/solid-js:build cache miss, executing �[2mf4a237092524cfcb�[0m > @astrojs/solid-js@3.0.2 build /home/runner/work/astro/astro/packages/integrations/solid > astro-scripts build "src/**/*.ts" && tsc ::endgroup:: ::group::@astrojs/preact:build cache miss, executing �[2m8cecb50ee7a6e8cd�[0m > @astrojs/preact@3.0.1 build /home/runner/work/astro/astro/packages/integrations/preact > astro-scripts build "src/**/*.ts" && tsc ::endgroup:: ::group::@astrojs/mdx:build cache miss, executing �[2mb143633fd253ffe8�[0m > @astrojs/mdx@1.1.2 build /home/runner/work/astro/astro/packages/integrations/mdx > astro-scripts build "src/**/*.ts" && tsc ::endgroup:: ::group::@astrojs/svelte:build cache miss, executing �[2mbd7b3500d114700f�[0m > @astrojs/svelte@4.0.3 build /home/runner/work/astro/astro/packages/integrations/svelte > astro-scripts build "src/index.ts" && astro-scripts build "src/editor.cts" --force-cjs --no-clean-dist && tsc ::endgroup:: ::group::@astrojs/partytown:build cache miss, executing �[2mf9914273b86ad728�[0m > @astrojs/partytown@2.0.1 build /home/runner/work/astro/astro/packages/integrations/partytown > astro-scripts build "src/**/*.ts" && tsc ::endgroup:: ::group::@benchmark/timer:build cache miss, executing �[2mf962f45c516ef97d�[0m > @benchmark/timer@0.0.0 build /home/runner/work/astro/astro/benchmark/packages/timer > astro-scripts build "src/**/*.ts" && tsc ::endgroup:: ::group::@astrojs/prefetch:build cache miss, executing �[2mdcbf086ec93c9a2e�[0m > @astrojs/prefetch@0.4.1 build /home/runner/work/astro/astro/packages/integrations/prefetch > astro-scripts build "src/**/*.ts" && tsc ::endgroup:: ::group::@astrojs/vercel:build cache miss, executing �[2m1fbe9b5f7affdbff�[0m > @astrojs/vercel@5.0.2 build /home/runner/work/astro/astro/packages/integrations/vercel > astro-scripts build "src/**/*.ts" && tsc ::endgroup:: ::group::@astrojs/markdoc:build cache miss, executing �[2md34c3c391df28efa�[0m > @astrojs/markdoc@0.6.0 build /home/runner/work/astro/astro/packages/integrations/markdoc > astro-scripts build "src/**/*.ts" && tsc ::endgroup:: ::group::@astrojs/vue:build cache miss, executing �[2m55746bd5041448c4�[0m > @astrojs/vue@3.0.1 build /home/runner/work/astro/astro/packages/integrations/vue > astro-scripts build "src/index.ts" && astro-scripts build "src/editor.cts" --force-cjs --no-clean-dist && tsc ::endgroup:: ::group::@astrojs/node:build cache miss, executing �[2m2b8b8ce22bb2e482�[0m > @astrojs/node@6.0.3 build /home/runner/work/astro/astro/packages/integrations/node > astro-scripts build "src/**/*.ts" && tsc ::endgroup:: ::group::@astrojs/sitemap:build cache miss, executing �[2m1bc6de4a4a31d7da�[0m > @astrojs/sitemap@0.0.0-fragments-20231017161931 build /home/runner/work/astro/astro/packages/integrations/sitemap > astro-scripts build "src/**/*.ts" && tsc ::endgroup:: Tasks: 24 successful, 24 total Cached: 5 cached, 24 total Time: 1m3.96s 🦋 �[33mwarn�[39m �[31m===============================IMPORTANT!===============================�[39m 🦋 �[33mwarn�[39m Packages will be released under the next--fragments tag 🦋 �[33mwarn�[39m �[31m----------------------------------------------------------------------�[39m 🦋 �[36minfo�[39m npm info astro 🦋 �[36minfo�[39m npm info @astrojs/prism 🦋 �[36minfo�[39m npm info @astrojs/rss 🦋 �[36minfo�[39m npm info create-astro 🦋 �[36minfo�[39m npm info @astrojs/alpinejs 🦋 �[36minfo�[39m npm info @astrojs/lit 🦋 �[36minfo�[39m npm info @astrojs/markdoc 🦋 �[36minfo�[39m npm info @astrojs/mdx 🦋 �[36minfo�[39m npm info @astrojs/node 🦋 �[36minfo�[39m npm info @astrojs/partytown 🦋 �[36minfo�[39m npm info @astrojs/preact 🦋 �[36minfo�[39m npm info @astrojs/prefetch 🦋 �[36minfo�[39m npm info @astrojs/react 🦋 �[36minfo�[39m npm info @astrojs/sitemap 🦋 �[36minfo�[39m npm info @astrojs/solid-js 🦋 �[36minfo�[39m npm info @astrojs/svelte 🦋 �[36minfo�[39m npm info @astrojs/tailwind 🦋 �[36minfo�[39m npm info @astrojs/vercel 🦋 �[36minfo�[39m npm info @astrojs/vue 🦋 �[36minfo�[39m npm info @astrojs/internal-helpers 🦋 �[36minfo�[39m npm info @astrojs/markdown-remark 🦋 �[36minfo�[39m npm info @astrojs/telemetry 🦋 �[36minfo�[39m npm info @astrojs/underscore-redirects 🦋 �[36minfo�[39m astro is being published because our local version (0.0.0-fragments-20231017161931) has not been published on npm 🦋 �[33mwarn�[39m @astrojs/prism is not being published because version 3.0.0 is already published on npm 🦋 �[33mwarn�[39m @astrojs/rss is not being published because version 3.0.0 is already published on npm 🦋 �[33mwarn�[39m create-astro is not being published because version 4.2.1 is already published on npm 🦋 �[33mwarn�[39m @astrojs/alpinejs is not being published because version 0.3.1 is already published on npm 🦋 �[33mwarn�[39m @astrojs/lit is not being published because version 3.0.2 is already published on npm 🦋 �[33mwarn�[39m @astrojs/markdoc is not being published because version 0.6.0 is already published on npm 🦋 �[33mwarn�[39m @astrojs/mdx is not being published because version 1.1.2 is already published on npm 🦋 �[33mwarn�[39m @astrojs/node is not being published because version 6.0.3 is already published on npm 🦋 �[33mwarn�[39m @astrojs/partytown is not being published because version 2.0.1 is already published on npm 🦋 �[33mwarn�[39m @astrojs/preact is not being published because version 3.0.1 is already published on npm 🦋 �[33mwarn�[39m @astrojs/prefetch is not being published because version 0.4.1 is already published on npm 🦋 �[33mwarn�[39m @astrojs/react is not being published because version 3.0.3 is already published on npm 🦋 �[36minfo�[39m @astrojs/sitemap is being published because our local version (0.0.0-fragments-20231017161931) has not been published on npm 🦋 �[33mwarn�[39m @astrojs/solid-js is not being published because version 3.0.2 is already published on npm 🦋 �[33mwarn�[39m @astrojs/svelte is not being published because version 4.0.3 is already published on npm 🦋 �[33mwarn�[39m @astrojs/tailwind is not being published because version 5.0.2 is already published on npm 🦋 �[33mwarn�[39m @astrojs/vercel is not being published because version 5.0.2 is already published on npm 🦋 �[33mwarn�[39m @astrojs/vue is not being published because version 3.0.1 is already published on npm 🦋 �[33mwarn�[39m @astrojs/internal-helpers is not being published because version 0.2.1 is already published on npm 🦋 �[33mwarn�[39m @astrojs/markdown-remark is not being published because version 3.3.0 is already published on npm 🦋 �[33mwarn�[39m @astrojs/telemetry is not being published because version 3.0.3 is already published on npm 🦋 �[33mwarn�[39m @astrojs/underscore-redirects is not being published because version 0.3.1 is already published on npm 🦋 �[36minfo�[39m Publishing �[36m"astro"�[39m at �[32m"0.0.0-fragments-20231017161931"�[39m 🦋 �[36minfo�[39m Publishing �[36m"@astrojs/sitemap"�[39m at �[32m"0.0.0-fragments-20231017161931"�[39m 🦋 �[32msuccess�[39m packages published successfully: 🦋 astro@0.0.0-fragments-20231017161931 🦋 @astrojs/sitemap@0.0.0-fragments-20231017161931 🦋 Creating git tags... 🦋 New tag: astro@0.0.0-fragments-20231017161931 🦋 New tag: @astrojs/sitemap@0.0.0-fragments-20231017161931

martrapp

Looks good to me.

.changeset/brave-pots-drop.md

bluwy

Implementation looks simpler than I expected 😄

sarah11918 · 2023-10-19T18:09:14Z

Just a note that I'll probably be in here with some changeset suggestions after Matthew and I have hashed out the docs PR, so that the two forms of documentation align! 🙌

excessivecoding · 2023-10-20T07:53:18Z

is it possible to add the partial option on injectRoute like for prerender? I don't know if it's a niche use case but it could be nice to have it for future integrations

sarah11918 · 2023-10-23T11:08:20Z

Just pointing out that Docs is waiting on confirmation whether only .astro components can be partials, or any otherwise valid page file that can export a statement (e.g. MDX). This would affect wording in the changeset (and, the Docs PR itself)

sarah11918

Added some changset comments to suggest a structure for this! Edit as you like!

.changeset/brave-pots-drop.md

sarah11918 · 2023-10-25T19:30:09Z

.changeset/brave-pots-drop.md

+
+Any page component can now be identified as a *partial*, allowing you fetch them in the client in order to replace only parts of the page. Partials are used in conjuction with a rendering library, like htmx or Stimulus or even just jQuery.
+
+Pages marked as partials do not have a `doctype` or any head content included in the rendered result. You can mark any page as a partial by setting this option:


Suggested change

Pages marked as partials do not have a `doctype` or any head content included in the rendered result. You can mark any page as a partial by setting this option:

You can mark any `.astro` page as a partial with an export statement:

Do you not think it's worth mentioning what this feature does here? I'm thinking in the context of the blog post, shouldn't we explain that it removes the head content?

I'm looking now and one of my comments (my main one) is entirely missing! I rewrote a bunch of stuff to add this earlier!

.changeset/brave-pots-drop.md

Co-authored-by: Sarah Rainsberger <sarah@rainsberger.ca>

.changeset/brave-pots-drop.md

Co-authored-by: Sarah Rainsberger <sarah@rainsberger.ca>

Release day

* Fragment support * Add a changeset * Linting * debuggin * Rename to partial * Update the chagneset * Make work with mdx * Update .changeset/brave-pots-drop.md Co-authored-by: Sarah Rainsberger <sarah@rainsberger.ca> * Update .changeset/brave-pots-drop.md Co-authored-by: Sarah Rainsberger <sarah@rainsberger.ca> * Update .changeset/brave-pots-drop.md Co-authored-by: Sarah Rainsberger <sarah@rainsberger.ca> --------- Co-authored-by: Sarah Rainsberger <sarah@rainsberger.ca>

Fragment support

a6f42fa

github-actions bot added the pkg: astro Related to the core `astro` package (scope) label Oct 5, 2023

Add a changeset

b81f816

github-actions bot added the semver: minor Change triggers a `minor` release label Oct 5, 2023

github-actions bot previously requested changes Oct 5, 2023

View reviewed changes

Linting

6b10fbc

debuggin

b224b31

github-actions bot added the 🚨 action Modifies GitHub Actions label Oct 5, 2023

Merge branch 'main' into fragments

69b6dbe

matthewp removed the 🚨 action Modifies GitHub Actions label Oct 5, 2023

Merge branch 'main' into fragments

53cd065

matthewp added 3 commits October 17, 2023 11:51

Rename to partial

e02e3af

Merge branch 'main' into fragments

a462f63

Update the chagneset

9419ca1

matthewp mentioned this pull request Oct 17, 2023

Partials guide withastro/docs#5128

Merged

matthewp marked this pull request as ready for review October 17, 2023 18:27

matthewp requested a review from a team as a code owner October 17, 2023 18:27

matthewp changed the title ~~Fragment support~~ Partials Oct 17, 2023

matthewp marked this pull request as draft October 17, 2023 18:27

matthewp marked this pull request as ready for review October 17, 2023 18:28

martrapp approved these changes Oct 18, 2023

View reviewed changes

.changeset/brave-pots-drop.md Outdated Show resolved Hide resolved

bluwy approved these changes Oct 19, 2023

View reviewed changes

Make work with mdx

0c746cf

github-actions bot added the pr: docs A PR that includes documentation for review label Oct 25, 2023

sarah11918 reviewed Oct 25, 2023

View reviewed changes

matthewp and others added 2 commits October 25, 2023 15:45

Update .changeset/brave-pots-drop.md

6ead04f

Co-authored-by: Sarah Rainsberger <sarah@rainsberger.ca>

Update .changeset/brave-pots-drop.md

6b5cb83

Co-authored-by: Sarah Rainsberger <sarah@rainsberger.ca>

sarah11918 reviewed Oct 25, 2023

View reviewed changes

.changeset/brave-pots-drop.md Outdated Show resolved Hide resolved

matthewp and others added 2 commits October 25, 2023 18:01

Update .changeset/brave-pots-drop.md

32120b1

Co-authored-by: Sarah Rainsberger <sarah@rainsberger.ca>

Merge branch 'main' into fragments

5a8d9fa

matthewp merged commit fe4079f into main Oct 26, 2023

matthewp deleted the fragments branch October 26, 2023 14:14

astrobot-houston mentioned this pull request Oct 26, 2023

[ci] release #8917

Merged


		Any page component can now be identified as a partial, allowing you fetch them in the client in order to replace only parts of the page. Partials are used in conjuction with a rendering library, like htmx or Stimulus or even just jQuery.

		Pages marked as partials do not have a `doctype` or any head content included in the rendered result. You can mark any page as a partial by setting this option:

	Pages marked as partials do not have a `doctype` or any head content included in the rendered result. You can mark any page as a partial by setting this option:
	You can mark any `.astro` page as a partial with an export statement:

Uh oh!

Conversation

matthewp commented Oct 5, 2023 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Changes

Testing

Docs

Uh oh!

changeset-bot bot commented Oct 5, 2023 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

🦋 Changeset detected

Uh oh!

github-actions bot left a comment

Choose a reason for hiding this comment

Uh oh!

matthewp commented Oct 5, 2023

Uh oh!

matthewp commented Oct 5, 2023

Uh oh!

matthewp commented Oct 5, 2023

Uh oh!

matthewp commented Oct 5, 2023

Uh oh!

matthewp commented Oct 5, 2023

Uh oh!

matthewp commented Oct 6, 2023

Uh oh!

matthewp commented Oct 6, 2023

Uh oh!

matthewp commented Oct 6, 2023

Uh oh!

matthewp commented Oct 6, 2023

Uh oh!

matthewp commented Oct 17, 2023

Uh oh!

github-actions bot commented Oct 17, 2023

Uh oh!

martrapp left a comment • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

bluwy left a comment

Choose a reason for hiding this comment

Uh oh!

sarah11918 commented Oct 19, 2023

Uh oh!

excessivecoding commented Oct 20, 2023 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

sarah11918 commented Oct 23, 2023

Uh oh!

sarah11918 left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

sarah11918 Oct 25, 2023

Choose a reason for hiding this comment

Uh oh!

matthewp Oct 25, 2023

Choose a reason for hiding this comment

Uh oh!

sarah11918 Oct 25, 2023

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

5 participants

matthewp commented Oct 5, 2023 •

edited

Loading

changeset-bot bot commented Oct 5, 2023 •

edited

Loading

martrapp left a comment •

edited

Loading

excessivecoding commented Oct 20, 2023 •

edited

Loading