diff options
author | 2024-09-18 16:42:44 +0100 | |
---|---|---|
committer | 2024-09-18 16:43:14 +0100 | |
commit | b0827022afa52a13d49c37c6c549212aecd32cc5 (patch) | |
tree | 41e34f22f8fa388ca78e62a2ee802367d7e3cf42 | |
parent | 837ee3a4aa6b33362bd680d4a7fc786ed8639444 (diff) | |
parent | 8d4eb95086ae79339764d02215f84f4f21b96edc (diff) | |
download | astro-b0827022afa52a13d49c37c6c549212aecd32cc5.tar.gz astro-b0827022afa52a13d49c37c6c549212aecd32cc5.tar.zst astro-b0827022afa52a13d49c37c6c549212aecd32cc5.zip |
Merge branch 'main' into next
40 files changed, 372 insertions, 93 deletions
diff --git a/.changeset/beige-points-search.md b/.changeset/beige-points-search.md new file mode 100644 index 000000000..ed7909972 --- /dev/null +++ b/.changeset/beige-points-search.md @@ -0,0 +1,5 @@ +--- +'astro': patch +--- + +Fixes an issue where component styles were not correctly included in rendered MDX diff --git a/examples/component/package.json b/examples/component/package.json index 26c15283b..660700e48 100644 --- a/examples/component/package.json +++ b/examples/component/package.json @@ -18,6 +18,6 @@ "astro": "^5.0.0-beta.1" }, "peerDependencies": { - "astro": "^4.0.0" + "astro": "^4.0.0 || ^5.0.0" } } diff --git a/examples/server-islands/package.json b/examples/server-islands/package.json index 4d63c25b4..6e1379256 100644 --- a/examples/server-islands/package.json +++ b/examples/server-islands/package.json @@ -12,7 +12,7 @@ "devDependencies": { "@astrojs/node": "^9.0.0-alpha.1", "@astrojs/react": "^3.6.2", - "@astrojs/tailwind": "^5.1.0", + "@astrojs/tailwind": "^5.1.1", "@fortawesome/fontawesome-free": "^6.6.0", "@tailwindcss/forms": "^0.5.9", "@types/react": "^18.3.5", diff --git a/packages/astro/CHANGELOG.md b/packages/astro/CHANGELOG.md index c507f841d..02ef40186 100644 --- a/packages/astro/CHANGELOG.md +++ b/packages/astro/CHANGELOG.md @@ -215,6 +215,14 @@ - [#11974](https://github.com/withastro/astro/pull/11974) [`60211de`](https://github.com/withastro/astro/commit/60211defbfb2992ba17d1369e71c146d8928b09a) Thanks [@ascorbic](https://github.com/ascorbic)! - Exports the `RenderResult` type +## 4.15.7 + +### Patch Changes + +- [#12000](https://github.com/withastro/astro/pull/12000) [`a2f8c5d`](https://github.com/withastro/astro/commit/a2f8c5d85ff15803f5cedf9148cd70ffc138ddef) Thanks [@ArmandPhilippot](https://github.com/ArmandPhilippot)! - Fixes an outdated link used to document Content Layer API + +- [#11915](https://github.com/withastro/astro/pull/11915) [`0b59fe7`](https://github.com/withastro/astro/commit/0b59fe74d5922c572007572ddca8d11482e2fb5c) Thanks [@azhirov](https://github.com/azhirov)! - Fix: prevent island from re-rendering when using transition:persist (#11854) + ## 4.15.6 ### Patch Changes diff --git a/packages/astro/e2e/fixtures/view-transitions/astro.config.mjs b/packages/astro/e2e/fixtures/view-transitions/astro.config.mjs index 4fdc70ff8..15487f1c4 100644 --- a/packages/astro/e2e/fixtures/view-transitions/astro.config.mjs +++ b/packages/astro/e2e/fixtures/view-transitions/astro.config.mjs @@ -1,6 +1,7 @@ import nodejs from '@astrojs/node'; import react from '@astrojs/react'; import svelte from '@astrojs/svelte'; +import solidjs from '@astrojs/solid-js'; import vue from '@astrojs/vue'; import { defineConfig } from 'astro/config'; @@ -8,7 +9,11 @@ import { defineConfig } from 'astro/config'; export default defineConfig({ output: 'static', adapter: nodejs({ mode: 'standalone' }), - integrations: [react(),vue(),svelte()], + integrations: [react( { + exclude: ['**/solid/**'], + }),vue(),svelte(),solidjs({ + include: ['**/solid/**'], + })], redirects: { '/redirect-two': '/two', '/redirect-external': 'http://example.com/', diff --git a/packages/astro/e2e/fixtures/view-transitions/package.json b/packages/astro/e2e/fixtures/view-transitions/package.json index 48cf30a9a..08aae1afc 100644 --- a/packages/astro/e2e/fixtures/view-transitions/package.json +++ b/packages/astro/e2e/fixtures/view-transitions/package.json @@ -7,10 +7,12 @@ "@astrojs/react": "workspace:*", "@astrojs/svelte": "workspace:*", "@astrojs/vue": "workspace:*", + "@astrojs/solid-js": "workspace:*", "astro": "workspace:*", "react": "^18.3.1", "react-dom": "^18.3.1", "svelte": "^4.2.19", - "vue": "^3.5.3" + "vue": "^3.5.3", + "solid-js": "^1.8.0" } } diff --git a/packages/astro/e2e/fixtures/view-transitions/src/components/SvelteCounter.svelte b/packages/astro/e2e/fixtures/view-transitions/src/components/SvelteCounter.svelte index 6647a19ce..669ee1a5a 100644 --- a/packages/astro/e2e/fixtures/view-transitions/src/components/SvelteCounter.svelte +++ b/packages/astro/e2e/fixtures/view-transitions/src/components/SvelteCounter.svelte @@ -1,5 +1,6 @@ <script lang="ts"> let count = 0; + export let prefix = ""; function add() { count += 1; @@ -11,9 +12,9 @@ </script> <div class="counter"> - <button on:click={subtract}>-</button> - <pre>{count}</pre> - <button on:click={add}>+</button> + <button on:click={subtract} class="decrement">-</button> + <pre>{prefix}{count}</pre> + <button on:click={add} class="increment">+</button> </div> <div class="message"> <slot /> diff --git a/packages/astro/e2e/fixtures/view-transitions/src/components/VueCounter.vue b/packages/astro/e2e/fixtures/view-transitions/src/components/VueCounter.vue index e75620aff..e05cf6a14 100644 --- a/packages/astro/e2e/fixtures/view-transitions/src/components/VueCounter.vue +++ b/packages/astro/e2e/fixtures/view-transitions/src/components/VueCounter.vue @@ -1,8 +1,8 @@ <template> <div class="counter"> - <button @click="subtract()">-</button> - <pre>{{ count }}</pre> - <button @click="add()">+</button> + <button @click="subtract()" class="decrement">-</button> + <pre>{{prefix}}{{ count }}</pre> + <button @click="add()" class="increment">+</button> </div> <div class="counter-message"> <slot /> @@ -12,6 +12,12 @@ <script lang="ts"> import { ref } from 'vue'; export default { + props: { + prefix: { + type: String, + default: '', + }, + }, setup() { const count = ref(0); const add = () => (count.value = count.value + 1); diff --git a/packages/astro/e2e/fixtures/view-transitions/src/components/solid/Counter.jsx b/packages/astro/e2e/fixtures/view-transitions/src/components/solid/Counter.jsx new file mode 100644 index 000000000..13c8dd193 --- /dev/null +++ b/packages/astro/e2e/fixtures/view-transitions/src/components/solid/Counter.jsx @@ -0,0 +1,19 @@ +import {createSignal} from "solid-js"; + +export default function Counter(props) { + const [count, setCount] = createSignal(0); + const add = () => setCount(count() + 1); + const subtract = () => setCount(count() - 1); + + return ( + <> + <div class="counter"> + <button onClick={subtract} class="decrement">-</button> + + <pre>{props.prefix ?? ''}{count()}{props.postfix ?? ""}</pre> + <button onClick={add} class="increment">+</button> + </div> + <div class="counter-message">{props.children}</div> + </> + ); +} diff --git a/packages/astro/e2e/fixtures/view-transitions/src/pages/island-solid-one.astro b/packages/astro/e2e/fixtures/view-transitions/src/pages/island-solid-one.astro new file mode 100644 index 000000000..92a58eaa7 --- /dev/null +++ b/packages/astro/e2e/fixtures/view-transitions/src/pages/island-solid-one.astro @@ -0,0 +1,11 @@ +--- +import Layout from '../components/Layout.astro'; +import Counter from '../components/solid/Counter.jsx'; +export const prerender = false; + +--- +<Layout> + <p id="island-one">Page 1</p> + <a id="click-two" href="/island-solid-two">go to 2</a> + <Counter prefix="A" client:load transition:persist transition:name="counter" /> +</Layout> diff --git a/packages/astro/e2e/fixtures/view-transitions/src/pages/island-solid-two.astro b/packages/astro/e2e/fixtures/view-transitions/src/pages/island-solid-two.astro new file mode 100644 index 000000000..3d17f32b3 --- /dev/null +++ b/packages/astro/e2e/fixtures/view-transitions/src/pages/island-solid-two.astro @@ -0,0 +1,11 @@ +--- +import Layout from '../components/Layout.astro'; +import Counter from '../components/solid/Counter.jsx'; +export const prerender = false; + +--- +<Layout> + <p id="island-two">Page 2</p> + <a id="click-one" href="/island-solid-one">go to 1</a> + <Counter prefix="B" postfix="!" client:load transition:persist transition:name="counter" /> +</Layout> diff --git a/packages/astro/e2e/fixtures/view-transitions/src/pages/island-svelte-one.astro b/packages/astro/e2e/fixtures/view-transitions/src/pages/island-svelte-one.astro new file mode 100644 index 000000000..c60dfa9c9 --- /dev/null +++ b/packages/astro/e2e/fixtures/view-transitions/src/pages/island-svelte-one.astro @@ -0,0 +1,11 @@ +--- +import Counter from '../components/SvelteCounter.svelte'; +import Layout from '../components/Layout.astro'; +export const prerender = false; + +--- +<Layout> + <p id="island-one">Page 1</p> + <a id="click-two" href="/island-svelte-two">go to 2</a> + <Counter prefix="A" client:load transition:persist transition:name="counter"/> +</Layout> diff --git a/packages/astro/e2e/fixtures/view-transitions/src/pages/island-svelte-two.astro b/packages/astro/e2e/fixtures/view-transitions/src/pages/island-svelte-two.astro new file mode 100644 index 000000000..63222bacb --- /dev/null +++ b/packages/astro/e2e/fixtures/view-transitions/src/pages/island-svelte-two.astro @@ -0,0 +1,11 @@ +--- +import Counter from '../components/SvelteCounter.svelte'; +import Layout from '../components/Layout.astro'; +export const prerender = false; + +--- +<Layout> + <p id="island-two">Page 2</p> + <a id="click-one" href="/island-svelte-one">go to 1</a> + <Counter prefix="B" client:load transition:persist transition:name="counter"/> +</Layout> diff --git a/packages/astro/e2e/fixtures/view-transitions/src/pages/island-vue-one.astro b/packages/astro/e2e/fixtures/view-transitions/src/pages/island-vue-one.astro new file mode 100644 index 000000000..b8ce5e48d --- /dev/null +++ b/packages/astro/e2e/fixtures/view-transitions/src/pages/island-vue-one.astro @@ -0,0 +1,11 @@ +--- +import Layout from '../components/Layout.astro'; +import Counter from '../components/VueCounter.vue'; +export const prerender = false; + +--- +<Layout> + <p id="island-one">Page 1</p> + <a id="click-two" href="/island-vue-two">go to 2</a> + <Counter prefix="AA" client:load transition:persist transition:name="counter" /> +</Layout> diff --git a/packages/astro/e2e/fixtures/view-transitions/src/pages/island-vue-two.astro b/packages/astro/e2e/fixtures/view-transitions/src/pages/island-vue-two.astro new file mode 100644 index 000000000..5c688be79 --- /dev/null +++ b/packages/astro/e2e/fixtures/view-transitions/src/pages/island-vue-two.astro @@ -0,0 +1,11 @@ +--- +import Layout from '../components/Layout.astro'; +import Counter from '../components/VueCounter.vue'; +export const prerender = false; + +--- +<Layout> + <p id="island-two">Page 2</p> + <a id="click-two" href="/island-vue-one">go to 1</a> + <Counter prefix="BB" client:load transition:persist transition:name="counter" /> +</Layout> diff --git a/packages/astro/e2e/view-transitions.test.js b/packages/astro/e2e/view-transitions.test.js index 878b9c5fe..042161219 100644 --- a/packages/astro/e2e/view-transitions.test.js +++ b/packages/astro/e2e/view-transitions.test.js @@ -522,7 +522,7 @@ test.describe('View Transitions', () => { expect(secondTime).toBeGreaterThanOrEqual(firstTime); }); - test('Islands can persist using transition:persist', async ({ page, astro }) => { + test('React Islands can persist using transition:persist', async ({ page, astro }) => { // Go to page 1 await page.goto(astro.resolveUrl('/island-one')); let cnt = page.locator('.counter pre'); @@ -544,6 +544,67 @@ test.describe('View Transitions', () => { await expect(pageTitle).toHaveText('Island 2'); }); + test('Solid Islands can persist using transition:persist', async ({ page, astro }) => { + // Go to page 1 + await page.goto(astro.resolveUrl('/island-solid-one')); + let cnt = page.locator('.counter pre'); + await expect(cnt).toHaveText('A0'); + + await page.click('.increment'); + await expect(cnt).toHaveText('A1'); + + // Navigate to page 2 + await page.click('#click-two'); + let p = page.locator('#island-two'); + await expect(p).toBeVisible(); + cnt = page.locator('.counter pre'); + // Count should remain, but the prefix should be updated + await expect(cnt).toHaveText('B1!'); + + await page.click('#click-one'); + p = page.locator('#island-one'); + await expect(p).toBeVisible(); + cnt = page.locator('.counter pre'); + // Count should remain, but the postfix should be removed again (to test unsetting props) + await expect(cnt).toHaveText('A1'); + }); + + test('Svelte Islands can persist using transition:persist', async ({ page, astro }) => { + // Go to page 1 + await page.goto(astro.resolveUrl('/island-svelte-one')); + let cnt = page.locator('.counter pre'); + await expect(cnt).toHaveText('A0'); + + await page.click('.increment'); + await expect(cnt).toHaveText('A1'); + + // Navigate to page 2 + await page.click('#click-two'); + let p = page.locator('#island-two'); + await expect(p).toBeVisible(); + cnt = page.locator('.counter pre'); + // Count should remain, but the prefix should be updated + await expect(cnt).toHaveText('B1'); + }); + + test('Vue Islands can persist using transition:persist', async ({ page, astro }) => { + // Go to page 1 + await page.goto(astro.resolveUrl('/island-vue-one')); + let cnt = page.locator('.counter pre'); + await expect(cnt).toHaveText('AA0'); + + await page.click('.increment'); + await expect(cnt).toHaveText('AA1'); + + // Navigate to page 2 + await page.click('#click-two'); + const p = page.locator('#island-two'); + await expect(p).toBeVisible(); + cnt = page.locator('.counter pre'); + // Count should remain, but the prefix should be updated + await expect(cnt).toHaveText('BB1'); + }); + test('transition:persist-props prevents props from changing', async ({ page, astro }) => { // Go to page 1 await page.goto(astro.resolveUrl('/island-one?persist')); diff --git a/packages/astro/src/content/runtime.ts b/packages/astro/src/content/runtime.ts index 5f6cc938c..1acc33da0 100644 --- a/packages/astro/src/content/runtime.ts +++ b/packages/astro/src/content/runtime.ts @@ -444,13 +444,12 @@ export async function renderEntry( try { // @ts-expect-error virtual module const { default: contentModules } = await import('astro:content-module-imports'); - const module = contentModules.get(entry.filePath); - const deferredMod = await module(); - return { - Content: deferredMod.Content, - headings: deferredMod.getHeadings?.() ?? [], - remarkPluginFrontmatter: deferredMod.frontmatter ?? {}, - }; + const renderEntryImport = contentModules.get(entry.filePath); + return render({ + collection: '', + id: entry.id, + renderEntryImport, + }); } catch (e) { // eslint-disable-next-line console.error(e); diff --git a/packages/astro/src/content/vite-plugin-content-virtual-mod.ts b/packages/astro/src/content/vite-plugin-content-virtual-mod.ts index ca09d1c1e..0c2448493 100644 --- a/packages/astro/src/content/vite-plugin-content-virtual-mod.ts +++ b/packages/astro/src/content/vite-plugin-content-virtual-mod.ts @@ -81,12 +81,12 @@ export function astroContentVirtualModPlugin({ const [, query] = id.split('?'); const params = new URLSearchParams(query); const fileName = params.get('fileName'); - let importerPath = undefined; + let importPath = undefined; if (fileName && URL.canParse(fileName, settings.config.root.toString())) { - importerPath = fileURLToPath(new URL(fileName, settings.config.root)); + importPath = fileURLToPath(new URL(fileName, settings.config.root)); } - if (importerPath) { - return await this.resolve(importerPath); + if (importPath) { + return await this.resolve(`${importPath}?${CONTENT_RENDER_FLAG}`); } } diff --git a/packages/astro/src/transitions/swap-functions.ts b/packages/astro/src/transitions/swap-functions.ts index e2d8557f5..c99de8d3d 100644 --- a/packages/astro/src/transitions/swap-functions.ts +++ b/packages/astro/src/transitions/swap-functions.ts @@ -77,7 +77,11 @@ export function swapBodyElement(newElement: Element, oldElement: Element) { // from the old page so that state is preserved. newEl.replaceWith(el); // For islands, copy over the props to allow them to re-render - if (newEl.localName === 'astro-island' && shouldCopyProps(el as HTMLElement)) { + if ( + newEl.localName === 'astro-island' && + shouldCopyProps(el as HTMLElement) && + !isSameProps(el, newEl) + ) { el.setAttribute('ssr', ''); el.setAttribute('props', newEl.getAttribute('props')!); } @@ -133,6 +137,10 @@ const shouldCopyProps = (el: HTMLElement): boolean => { return persistProps == null || persistProps === 'false'; }; +const isSameProps = (oldEl: Element, newEl: Element) => { + return oldEl.getAttribute('props') === newEl.getAttribute('props'); +}; + export const swapFunctions = { deselectScripts, swapRootAttributes, diff --git a/packages/integrations/mdx/test/css-head-mdx.test.js b/packages/integrations/mdx/test/css-head-mdx.test.js index 96ee7c900..5565cde60 100644 --- a/packages/integrations/mdx/test/css-head-mdx.test.js +++ b/packages/integrations/mdx/test/css-head-mdx.test.js @@ -15,6 +15,7 @@ describe('Head injection w/ MDX', () => { integrations: [mdx()], // test suite was authored when inlineStylesheets defaulted to never build: { inlineStylesheets: 'never' }, + experimental: { contentLayer: true }, }); }); diff --git a/packages/integrations/mdx/test/fixtures/css-head-mdx/src/components/UsingMdx.astro b/packages/integrations/mdx/test/fixtures/css-head-mdx/src/components/UsingMdx.astro index 1804388b0..3ef9d7639 100644 --- a/packages/integrations/mdx/test/fixtures/css-head-mdx/src/components/UsingMdx.astro +++ b/packages/integrations/mdx/test/fixtures/css-head-mdx/src/components/UsingMdx.astro @@ -1,8 +1,8 @@ --- -import { getEntryBySlug } from 'astro:content'; +import { getEntry, render } from 'astro:content'; -const launchWeek = await getEntryBySlug('blog', 'using-mdx'); -const { Content } = await launchWeek.render(); +const launchWeek = await getEntry('blog', 'using-mdx'); +const { Content } = await render(launchWeek); --- <Content /> diff --git a/packages/integrations/mdx/test/fixtures/css-head-mdx/src/content/config.ts b/packages/integrations/mdx/test/fixtures/css-head-mdx/src/content/config.ts new file mode 100644 index 000000000..2c8944d51 --- /dev/null +++ b/packages/integrations/mdx/test/fixtures/css-head-mdx/src/content/config.ts @@ -0,0 +1,18 @@ +import { defineCollection } from "astro:content"; +import { glob } from "astro/loaders" + +const posts = defineCollection({ + loader: glob({ + pattern: "*.mdx", + base: "src/data/posts", + }) +}); + +const blog = defineCollection({ + loader: glob({ + pattern: "*.mdx", + base: "src/data/blog", + }) +}); + +export const collections = { posts, blog }; diff --git a/packages/integrations/mdx/test/fixtures/css-head-mdx/src/content/blog/_styles.css b/packages/integrations/mdx/test/fixtures/css-head-mdx/src/data/blog/_styles.css index 1379b29c0..1379b29c0 100644 --- a/packages/integrations/mdx/test/fixtures/css-head-mdx/src/content/blog/_styles.css +++ b/packages/integrations/mdx/test/fixtures/css-head-mdx/src/data/blog/_styles.css diff --git a/packages/integrations/mdx/test/fixtures/css-head-mdx/src/content/blog/using-mdx.mdx b/packages/integrations/mdx/test/fixtures/css-head-mdx/src/data/blog/using-mdx.mdx index 917fc3331..917fc3331 100644 --- a/packages/integrations/mdx/test/fixtures/css-head-mdx/src/content/blog/using-mdx.mdx +++ b/packages/integrations/mdx/test/fixtures/css-head-mdx/src/data/blog/using-mdx.mdx diff --git a/packages/integrations/mdx/test/fixtures/css-head-mdx/src/content/posts/test.mdx b/packages/integrations/mdx/test/fixtures/css-head-mdx/src/data/posts/test.mdx index 0bb1153ca..0bb1153ca 100644 --- a/packages/integrations/mdx/test/fixtures/css-head-mdx/src/content/posts/test.mdx +++ b/packages/integrations/mdx/test/fixtures/css-head-mdx/src/data/posts/test.mdx diff --git a/packages/integrations/mdx/test/fixtures/css-head-mdx/src/content/posts/using-component.mdx b/packages/integrations/mdx/test/fixtures/css-head-mdx/src/data/posts/using-component.mdx index fa550fb04..fa550fb04 100644 --- a/packages/integrations/mdx/test/fixtures/css-head-mdx/src/content/posts/using-component.mdx +++ b/packages/integrations/mdx/test/fixtures/css-head-mdx/src/data/posts/using-component.mdx diff --git a/packages/integrations/mdx/test/fixtures/css-head-mdx/src/pages/posts/[post].astro b/packages/integrations/mdx/test/fixtures/css-head-mdx/src/pages/posts/[post].astro index 5afb5be92..13a9e56db 100644 --- a/packages/integrations/mdx/test/fixtures/css-head-mdx/src/pages/posts/[post].astro +++ b/packages/integrations/mdx/test/fixtures/css-head-mdx/src/pages/posts/[post].astro @@ -1,17 +1,17 @@ --- -import { getCollection } from 'astro:content'; +import { getCollection, render } from 'astro:content'; import SmallCaps from '../../components/SmallCaps.astro'; import Layout from '../../layouts/ContentLayout.astro'; export async function getStaticPaths() { const entries = await getCollection('posts'); return entries.map(entry => { - return {params: { post: entry.slug }, props: { entry }, - }}); + return { params: { post: entry.id }, props: { entry }}; + }); } const { entry } = Astro.props; -const { Content } = await entry.render(); +const { Content } = await render(entry); --- <Layout title=""> <Content components={{ SmallCaps }} /> diff --git a/packages/integrations/solid/CHANGELOG.md b/packages/integrations/solid/CHANGELOG.md index bc1d135d0..9f69e7e2f 100644 --- a/packages/integrations/solid/CHANGELOG.md +++ b/packages/integrations/solid/CHANGELOG.md @@ -1,5 +1,11 @@ # @astrojs/solid-js +## 4.4.2 + +### Patch Changes + +- [#11998](https://github.com/withastro/astro/pull/11998) [`082f450`](https://github.com/withastro/astro/commit/082f45094471d52e55c55d3291f541306d9388b1) Thanks [@johannesspohr](https://github.com/johannesspohr)! - Fix view transition state persistence + ## 4.4.1 ### Patch Changes diff --git a/packages/integrations/solid/package.json b/packages/integrations/solid/package.json index 5320cc57e..7a3cb6e15 100644 --- a/packages/integrations/solid/package.json +++ b/packages/integrations/solid/package.json @@ -1,6 +1,6 @@ { "name": "@astrojs/solid-js", - "version": "4.4.1", + "version": "4.4.2", "description": "Use Solid components within Astro", "type": "module", "types": "./dist/index.d.ts", diff --git a/packages/integrations/solid/src/client.ts b/packages/integrations/solid/src/client.ts index a47c5310d..f2020bb56 100644 --- a/packages/integrations/solid/src/client.ts +++ b/packages/integrations/solid/src/client.ts @@ -1,10 +1,12 @@ import { Suspense } from 'solid-js'; +import { createStore, reconcile } from 'solid-js/store'; import { createComponent, hydrate, render } from 'solid-js/web'; +const alreadyInitializedElements = new WeakMap<Element, any>(); + export default (element: HTMLElement) => (Component: any, props: any, slotted: any, { client }: { client: string }) => { if (!element.hasAttribute('ssr')) return; - const isHydrate = client !== 'only'; const bootstrap = isHydrate ? hydrate : render; @@ -32,31 +34,44 @@ export default (element: HTMLElement) => const { default: children, ...slots } = _slots; const renderId = element.dataset.solidRenderId; + if (alreadyInitializedElements.has(element)) { + // update the mounted component + alreadyInitializedElements.get(element)!( + // reconcile will make sure to apply as little updates as possible, and also remove missing values w/o breaking reactivity + reconcile({ + ...props, + ...slots, + children, + }), + ); + } else { + const [store, setStore] = createStore({ + ...props, + ...slots, + children, + }); + // store the function to update the current mounted component + alreadyInitializedElements.set(element, setStore); - const dispose = bootstrap( - () => { - const inner = () => - createComponent(Component, { - ...props, - ...slots, - children, - }); + const dispose = bootstrap( + () => { + const inner = () => createComponent(Component, store); - if (isHydrate) { - return createComponent(Suspense, { - get children() { - return inner(); - }, - }); - } else { - return inner(); - } - }, - element, - { - renderId, - }, - ); - - element.addEventListener('astro:unmount', () => dispose(), { once: true }); + if (isHydrate) { + return createComponent(Suspense, { + get children() { + return inner(); + }, + }); + } else { + return inner(); + } + }, + element, + { + renderId, + }, + ); + element.addEventListener('astro:unmount', () => dispose(), { once: true }); + } }; diff --git a/packages/integrations/svelte/CHANGELOG.md b/packages/integrations/svelte/CHANGELOG.md index a498778af..528b7363c 100644 --- a/packages/integrations/svelte/CHANGELOG.md +++ b/packages/integrations/svelte/CHANGELOG.md @@ -7,6 +7,12 @@ - Updated dependencies [[`b6fbdaa`](https://github.com/withastro/astro/commit/b6fbdaa94a9ecec706a99e1938fbf5cd028c72e0), [`89bab1e`](https://github.com/withastro/astro/commit/89bab1e70786123fbe933a9d7a1b80c9334dcc5f), [`d74617c`](https://github.com/withastro/astro/commit/d74617cbd3278feba05909ec83db2d73d57a153e), [`e90f559`](https://github.com/withastro/astro/commit/e90f5593d23043579611452a84b9e18ad2407ef9), [`2df49a6`](https://github.com/withastro/astro/commit/2df49a6fb4f6d92fe45f7429430abe63defeacd6), [`8a53517`](https://github.com/withastro/astro/commit/8a5351737d6a14fc55f1dafad8f3b04079e81af6)]: - astro@5.0.0-alpha.0 +## 5.7.1 + +### Patch Changes + +- [#12006](https://github.com/withastro/astro/pull/12006) [`a582cb6`](https://github.com/withastro/astro/commit/a582cb61241b9c2a6f95900920145c055d5d6c12) Thanks [@johannesspohr](https://github.com/johannesspohr)! - Fix Svelte component view transition state persistence + ## 5.7.0 ### Minor Changes diff --git a/packages/integrations/svelte/client-v5.js b/packages/integrations/svelte/client-v5.js index fda68ee54..78bab3ea3 100644 --- a/packages/integrations/svelte/client-v5.js +++ b/packages/integrations/svelte/client-v5.js @@ -1,5 +1,7 @@ import { createRawSnippet, hydrate, mount, unmount } from 'svelte'; +const existingApplications = new WeakMap(); + export default (element) => { return async (Component, props, slotted, { client }) => { if (!element.hasAttribute('ssr')) return; @@ -21,15 +23,23 @@ export default (element) => { } const bootstrap = client !== 'only' ? hydrate : mount; - - const component = bootstrap(Component, { - target: element, - props: { + if (existingApplications.has(element)) { + existingApplications.get(element).$set({ ...props, children, $$slots, - }, - }); + }); + } else { + const component = bootstrap(Component, { + target: element, + props: { + ...props, + children, + $$slots, + }, + }); + existingApplications.set(element, component); + } element.addEventListener('astro:unmount', () => unmount(component), { once: true }); }; diff --git a/packages/integrations/svelte/client.js b/packages/integrations/svelte/client.js index 005bbe9da..288c7a661 100644 --- a/packages/integrations/svelte/client.js +++ b/packages/integrations/svelte/client.js @@ -3,6 +3,8 @@ const noop = () => {}; let originalConsoleWarning; let consoleFilterRefs = 0; +const existingApplications = new WeakMap(); + export default (element) => { return (Component, props, slotted, { client }) => { if (!element.hasAttribute('ssr')) return; @@ -14,18 +16,23 @@ export default (element) => { try { if (import.meta.env.DEV) useConsoleFilter(); - const component = new Component({ - target: element, - props: { - ...props, - $$slots: slots, - $$scope: { ctx: [] }, - }, - hydrate: client !== 'only', - $$inline: true, - }); + if (existingApplications.has(element)) { + existingApplications.get(element).$set({ ...props, $$slots: slots, $$scope: { ctx: [] } }); + } else { + const component = new Component({ + target: element, + props: { + ...props, + $$slots: slots, + $$scope: { ctx: [] }, + }, + hydrate: client !== 'only', + $$inline: true, + }); + existingApplications.set(element, component); - element.addEventListener('astro:unmount', () => component.$destroy(), { once: true }); + element.addEventListener('astro:unmount', () => component.$destroy(), { once: true }); + } } finally { if (import.meta.env.DEV) finishUsingConsoleFilter(); } diff --git a/packages/integrations/svelte/package.json b/packages/integrations/svelte/package.json index 663309585..7241dbc6a 100644 --- a/packages/integrations/svelte/package.json +++ b/packages/integrations/svelte/package.json @@ -1,6 +1,6 @@ { "name": "@astrojs/svelte", - "version": "5.7.0", + "version": "5.7.1", "description": "Use Svelte components within Astro", "type": "module", "types": "./dist/index.d.ts", diff --git a/packages/integrations/tailwind/CHANGELOG.md b/packages/integrations/tailwind/CHANGELOG.md index cc632bfc2..c2985edef 100644 --- a/packages/integrations/tailwind/CHANGELOG.md +++ b/packages/integrations/tailwind/CHANGELOG.md @@ -7,6 +7,12 @@ - Updated dependencies [[`b6fbdaa`](https://github.com/withastro/astro/commit/b6fbdaa94a9ecec706a99e1938fbf5cd028c72e0), [`89bab1e`](https://github.com/withastro/astro/commit/89bab1e70786123fbe933a9d7a1b80c9334dcc5f), [`d74617c`](https://github.com/withastro/astro/commit/d74617cbd3278feba05909ec83db2d73d57a153e), [`e90f559`](https://github.com/withastro/astro/commit/e90f5593d23043579611452a84b9e18ad2407ef9), [`2df49a6`](https://github.com/withastro/astro/commit/2df49a6fb4f6d92fe45f7429430abe63defeacd6), [`8a53517`](https://github.com/withastro/astro/commit/8a5351737d6a14fc55f1dafad8f3b04079e81af6)]: - astro@5.0.0-alpha.0 +## 5.1.1 + +### Patch Changes + +- [#12018](https://github.com/withastro/astro/pull/12018) [`dcd1158`](https://github.com/withastro/astro/commit/dcd115892a23b17309347c13ce4d82af73d204b2) Thanks [@matthewp](https://github.com/matthewp)! - Make @astrojs/tailwind compat with Astro 5 + ## 5.1.0 ### Minor Changes diff --git a/packages/integrations/tailwind/package.json b/packages/integrations/tailwind/package.json index 65fd41b5b..3e383437c 100644 --- a/packages/integrations/tailwind/package.json +++ b/packages/integrations/tailwind/package.json @@ -1,7 +1,7 @@ { "name": "@astrojs/tailwind", "description": "Use Tailwind CSS to style your Astro site", - "version": "5.1.0", + "version": "5.1.1", "type": "module", "types": "./dist/index.d.ts", "author": "withastro", @@ -44,7 +44,7 @@ "vite": "^5.4.3" }, "peerDependencies": { - "astro": "^5.0.0-alpha.0", + "astro": "^3.0.0 || ^4.0.0 || ^5.0.0-beta.0", "tailwindcss": "^3.0.24" }, "publishConfig": { diff --git a/packages/integrations/vue/CHANGELOG.md b/packages/integrations/vue/CHANGELOG.md index 88ff9204e..a6fbc1ca6 100644 --- a/packages/integrations/vue/CHANGELOG.md +++ b/packages/integrations/vue/CHANGELOG.md @@ -7,6 +7,12 @@ - Updated dependencies [[`b6fbdaa`](https://github.com/withastro/astro/commit/b6fbdaa94a9ecec706a99e1938fbf5cd028c72e0), [`89bab1e`](https://github.com/withastro/astro/commit/89bab1e70786123fbe933a9d7a1b80c9334dcc5f), [`d74617c`](https://github.com/withastro/astro/commit/d74617cbd3278feba05909ec83db2d73d57a153e), [`e90f559`](https://github.com/withastro/astro/commit/e90f5593d23043579611452a84b9e18ad2407ef9), [`2df49a6`](https://github.com/withastro/astro/commit/2df49a6fb4f6d92fe45f7429430abe63defeacd6), [`8a53517`](https://github.com/withastro/astro/commit/8a5351737d6a14fc55f1dafad8f3b04079e81af6)]: - astro@5.0.0-alpha.0 +## 4.5.1 + +### Patch Changes + +- [#11946](https://github.com/withastro/astro/pull/11946) [`b75bfc8`](https://github.com/withastro/astro/commit/b75bfc8cc41f5c631c10055b78670fdc26dff23a) Thanks [@johannesspohr](https://github.com/johannesspohr)! - Fix vue islands keeping their state when using view transition persistence + ## 4.5.0 ### Minor Changes diff --git a/packages/integrations/vue/client.js b/packages/integrations/vue/client.js index 807f843fc..58ee11d5c 100644 --- a/packages/integrations/vue/client.js +++ b/packages/integrations/vue/client.js @@ -2,6 +2,9 @@ import { setup } from 'virtual:@astrojs/vue/app'; import { Suspense, createApp, createSSRApp, h } from 'vue'; import StaticHtml from './static-html.js'; +// keep track of already initialized apps, so we don't hydrate again for view transitions +let appMap = new WeakMap(); + export default (element) => async (Component, props, slotted, { client }) => { if (!element.hasAttribute('ssr')) return; @@ -15,21 +18,36 @@ export default (element) => const isHydrate = client !== 'only'; const bootstrap = isHydrate ? createSSRApp : createApp; - const app = bootstrap({ - name, - render() { - let content = h(Component, props, slots); - // related to https://github.com/withastro/astro/issues/6549 - // if the component is async, wrap it in a Suspense component - if (isAsync(Component.setup)) { - content = h(Suspense, null, content); - } - return content; - }, - }); - await setup(app); - app.mount(element, isHydrate); + // keep a reference to the app, props and slots so we can update a running instance later + let appInstance = appMap.get(element); + + if (!appInstance) { + appInstance = { + props, + slots, + }; + const app = bootstrap({ + name, + render() { + let content = h(Component, appInstance.props, appInstance.slots); + appInstance.component = this; + // related to https://github.com/withastro/astro/issues/6549 + // if the component is async, wrap it in a Suspense component + if (isAsync(Component.setup)) { + content = h(Suspense, null, content); + } + return content; + }, + }); + await setup(app); + app.mount(element, isHydrate); + appMap.set(element, appInstance); + } else { + appInstance.props = props; + appInstance.slots = slots; + appInstance.component.$forceUpdate(); + } element.addEventListener('astro:unmount', () => app.unmount(), { once: true }); }; diff --git a/packages/integrations/vue/package.json b/packages/integrations/vue/package.json index c11771173..eb723f8fb 100644 --- a/packages/integrations/vue/package.json +++ b/packages/integrations/vue/package.json @@ -1,6 +1,6 @@ { "name": "@astrojs/vue", - "version": "4.5.0", + "version": "4.5.1", "description": "Use Vue components within Astro", "type": "module", "types": "./dist/index.d.ts", diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index cc5c68e15..39a5ebb0b 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -355,7 +355,7 @@ importers: specifier: ^3.6.2 version: link:../../packages/integrations/react '@astrojs/tailwind': - specifier: ^5.1.0 + specifier: ^5.1.1 version: link:../../packages/integrations/tailwind '@fortawesome/fontawesome-free': specifier: ^6.6.0 @@ -1682,6 +1682,9 @@ importers: '@astrojs/react': specifier: workspace:* version: link:../../../../integrations/react + '@astrojs/solid-js': + specifier: workspace:* + version: link:../../../../integrations/solid '@astrojs/svelte': specifier: workspace:* version: link:../../../../integrations/svelte @@ -1697,6 +1700,9 @@ importers: react-dom: specifier: ^18.3.1 version: 18.3.1(react@18.3.1) + solid-js: + specifier: ^1.8.0 + version: 1.8.22 svelte: specifier: ^4.2.19 version: 4.2.19 |