From 50164f5e37cdc6ad81216627d8edb2a98ed37491 Mon Sep 17 00:00:00 2001 From: Nate Moore Date: Sat, 11 Nov 2023 22:31:34 -0600 Subject: [PATCH 01/12] Fix asset propagation regression in 3.5 (#9069) --- .changeset/quick-parrots-judge.md | 5 +++++ .../src/content/vite-plugin-content-assets.ts | 2 +- .../vite-plugin-content-virtual-mod.ts | 2 +- .../src/core/build/plugins/plugin-css.ts | 20 +++++++++++------ .../astro/test/content-collections.test.js | 8 +++++++ packages/astro/test/core-image.test.js | 2 +- .../src/pages/propagation.astro | 22 +++++++++++++++++++ 7 files changed, 51 insertions(+), 10 deletions(-) create mode 100644 .changeset/quick-parrots-judge.md create mode 100644 packages/astro/test/fixtures/content-collections/src/pages/propagation.astro diff --git a/.changeset/quick-parrots-judge.md b/.changeset/quick-parrots-judge.md new file mode 100644 index 000000000000..44675ce81ec2 --- /dev/null +++ b/.changeset/quick-parrots-judge.md @@ -0,0 +1,5 @@ +--- +"astro": patch +--- + +Fix a regression introduced in 3.5.0 related to content collection styles diff --git a/packages/astro/src/content/vite-plugin-content-assets.ts b/packages/astro/src/content/vite-plugin-content-assets.ts index d1f2ca4ce15a..5b79d5653ea7 100644 --- a/packages/astro/src/content/vite-plugin-content-assets.ts +++ b/packages/astro/src/content/vite-plugin-content-assets.ts @@ -169,7 +169,7 @@ export function astroConfigBuildPlugin( const pageData = getPageDataByViteID(internals, pageViteID); if (!pageData) continue; - const _entryCss = internals.propagatedStylesMap?.get(id); + const _entryCss = pageData.propagatedStyles?.get(id); const _entryScripts = pageData.propagatedScripts?.get(id); if (_entryCss) { for (const value of _entryCss) { 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 941359c977f7..92d47003e78d 100644 --- a/packages/astro/src/content/vite-plugin-content-virtual-mod.ts +++ b/packages/astro/src/content/vite-plugin-content-virtual-mod.ts @@ -76,7 +76,7 @@ export function astroContentVirtualModPlugin({ hydratedComponents: [], clientOnlyComponents: [], scripts: [], - containsHead: true, + containsHead: false, propagation: 'in-tree', pageOptions: {}, }, diff --git a/packages/astro/src/core/build/plugins/plugin-css.ts b/packages/astro/src/core/build/plugins/plugin-css.ts index 1073ed0566a9..59a5aa3c622f 100644 --- a/packages/astro/src/core/build/plugins/plugin-css.ts +++ b/packages/astro/src/core/build/plugins/plugin-css.ts @@ -59,6 +59,8 @@ function rollupPluginAstroBuildCSS(options: PluginOptions): VitePlugin[] { const pagesToCss: Record> = {}; const pagesToPropagatedCss: Record>> = {}; + const isContentCollectionCache = options.buildOptions.settings.config.output === 'static' && options.buildOptions.settings.config.experimental.contentCollectionCache; + const cssBuildPlugin: VitePlugin = { name: 'astro:rollup-plugin-build-css', @@ -93,10 +95,7 @@ function rollupPluginAstroBuildCSS(options: PluginOptions): VitePlugin[] { // so they can be injected where needed const chunkId = assetName.createNameHash(id, [id]); internals.cssModuleToChunkIdMap.set(id, chunkId); - if ( - options.buildOptions.settings.config.output === 'static' && - options.buildOptions.settings.config.experimental.contentCollectionCache - ) { + if (isContentCollectionCache) { // TODO: Handle inlining? const propagatedStyles = internals.propagatedStylesMap.get(pageInfo.id) ?? new Set(); @@ -251,9 +250,16 @@ function rollupPluginAstroBuildCSS(options: PluginOptions): VitePlugin[] { // return early if the stylesheet needing propagation has already been included if (pageData.styles.some((s) => s.sheet === sheet)) return; - const propagatedStyles = - internals.propagatedStylesMap.get(pageInfoId) ?? - internals.propagatedStylesMap.set(pageInfoId, new Set()).get(pageInfoId)!; + let propagatedStyles: Set; + if (isContentCollectionCache) { + propagatedStyles = + internals.propagatedStylesMap.get(pageInfoId) ?? + internals.propagatedStylesMap.set(pageInfoId, new Set()).get(pageInfoId)!; + } else { + propagatedStyles = + pageData.propagatedStyles.get(pageInfoId) ?? + pageData.propagatedStyles.set(pageInfoId, new Set()).get(pageInfoId)!; + } propagatedStyles.add(sheet); sheetAddedToPage = true; diff --git a/packages/astro/test/content-collections.test.js b/packages/astro/test/content-collections.test.js index 6992549919c8..cee54f82e449 100644 --- a/packages/astro/test/content-collections.test.js +++ b/packages/astro/test/content-collections.test.js @@ -95,6 +95,14 @@ describe('Content Collections', () => { }); }); + describe('Propagation', () => { + it('Applies styles', async () => { + const html = await fixture.readFile('/propagation/index.html'); + const $ = cheerio.load(html); + expect($('style').text()).to.include('content:"works!"'); + }); + }) + describe('Entry', () => { let json; before(async () => { diff --git a/packages/astro/test/core-image.test.js b/packages/astro/test/core-image.test.js index 0583ed376657..74f86ba7ff6e 100644 --- a/packages/astro/test/core-image.test.js +++ b/packages/astro/test/core-image.test.js @@ -1010,7 +1010,7 @@ describe('astro:image', () => { await fixture.build(); }); - it('dynamic route images are built at response time sss', async () => { + it('dynamic route images are built at response time', async () => { const app = await fixture.loadTestAdapterApp(); let request = new Request('http://example.com/'); let response = await app.render(request); diff --git a/packages/astro/test/fixtures/content-collections/src/pages/propagation.astro b/packages/astro/test/fixtures/content-collections/src/pages/propagation.astro new file mode 100644 index 000000000000..3775697acd00 --- /dev/null +++ b/packages/astro/test/fixtures/content-collections/src/pages/propagation.astro @@ -0,0 +1,22 @@ +--- +import { getCollection } from "astro:content"; +const posts = await getCollection("with-schema-config"); +--- + + + +
+
Hello World
+ Styles? +
+ + + + From c5d7f4452ab3b240804a8c1bddbabc4e63000f48 Mon Sep 17 00:00:00 2001 From: natemoo-re Date: Sun, 12 Nov 2023 04:33:14 +0000 Subject: [PATCH 02/12] [ci] format --- packages/astro/src/core/build/plugins/plugin-css.ts | 4 +++- packages/astro/test/content-collections.test.js | 2 +- 2 files changed, 4 insertions(+), 2 deletions(-) diff --git a/packages/astro/src/core/build/plugins/plugin-css.ts b/packages/astro/src/core/build/plugins/plugin-css.ts index 59a5aa3c622f..f8611898f0a0 100644 --- a/packages/astro/src/core/build/plugins/plugin-css.ts +++ b/packages/astro/src/core/build/plugins/plugin-css.ts @@ -59,7 +59,9 @@ function rollupPluginAstroBuildCSS(options: PluginOptions): VitePlugin[] { const pagesToCss: Record> = {}; const pagesToPropagatedCss: Record>> = {}; - const isContentCollectionCache = options.buildOptions.settings.config.output === 'static' && options.buildOptions.settings.config.experimental.contentCollectionCache; + const isContentCollectionCache = + options.buildOptions.settings.config.output === 'static' && + options.buildOptions.settings.config.experimental.contentCollectionCache; const cssBuildPlugin: VitePlugin = { name: 'astro:rollup-plugin-build-css', diff --git a/packages/astro/test/content-collections.test.js b/packages/astro/test/content-collections.test.js index cee54f82e449..44d08b532e6f 100644 --- a/packages/astro/test/content-collections.test.js +++ b/packages/astro/test/content-collections.test.js @@ -101,7 +101,7 @@ describe('Content Collections', () => { const $ = cheerio.load(html); expect($('style').text()).to.include('content:"works!"'); }); - }) + }); describe('Entry', () => { let json; From 5f2db426ce13d8b3ad6f506490aec8a980e48cc7 Mon Sep 17 00:00:00 2001 From: "Houston (Bot)" <108291165+astrobot-houston@users.noreply.github.com> Date: Sat, 11 Nov 2023 20:39:47 -0800 Subject: [PATCH 03/12] [ci] release (#9070) Co-authored-by: github-actions[bot] --- .changeset/quick-parrots-judge.md | 5 -- examples/basics/package.json | 2 +- examples/blog/package.json | 2 +- examples/component/package.json | 2 +- examples/framework-alpine/package.json | 2 +- examples/framework-lit/package.json | 2 +- examples/framework-multiple/package.json | 2 +- examples/framework-preact/package.json | 2 +- examples/framework-react/package.json | 2 +- examples/framework-solid/package.json | 2 +- examples/framework-svelte/package.json | 2 +- examples/framework-vue/package.json | 2 +- examples/hackernews/package.json | 2 +- examples/integration/package.json | 2 +- examples/middleware/package.json | 2 +- examples/minimal/package.json | 2 +- examples/non-html-pages/package.json | 2 +- examples/portfolio/package.json | 2 +- examples/ssr/package.json | 2 +- examples/view-transitions/package.json | 2 +- examples/with-markdoc/package.json | 2 +- examples/with-markdown-plugins/package.json | 2 +- examples/with-markdown-shiki/package.json | 2 +- examples/with-mdx/package.json | 2 +- examples/with-nanostores/package.json | 2 +- examples/with-tailwindcss/package.json | 2 +- examples/with-vite-plugin-pwa/package.json | 2 +- examples/with-vitest/package.json | 2 +- packages/astro/CHANGELOG.md | 6 +++ packages/astro/package.json | 2 +- pnpm-lock.yaml | 54 ++++++++++----------- 31 files changed, 61 insertions(+), 60 deletions(-) delete mode 100644 .changeset/quick-parrots-judge.md diff --git a/.changeset/quick-parrots-judge.md b/.changeset/quick-parrots-judge.md deleted file mode 100644 index 44675ce81ec2..000000000000 --- a/.changeset/quick-parrots-judge.md +++ /dev/null @@ -1,5 +0,0 @@ ---- -"astro": patch ---- - -Fix a regression introduced in 3.5.0 related to content collection styles diff --git a/examples/basics/package.json b/examples/basics/package.json index 4530fc132bbc..904e00bb637e 100644 --- a/examples/basics/package.json +++ b/examples/basics/package.json @@ -11,6 +11,6 @@ "astro": "astro" }, "dependencies": { - "astro": "^3.5.2" + "astro": "^3.5.3" } } diff --git a/examples/blog/package.json b/examples/blog/package.json index 9d8327e5f76a..4819ada61b0a 100644 --- a/examples/blog/package.json +++ b/examples/blog/package.json @@ -14,6 +14,6 @@ "@astrojs/mdx": "^1.1.4", "@astrojs/rss": "^3.0.0", "@astrojs/sitemap": "^3.0.3", - "astro": "^3.5.2" + "astro": "^3.5.3" } } diff --git a/examples/component/package.json b/examples/component/package.json index 4efe10b8e382..fc92e6588b1a 100644 --- a/examples/component/package.json +++ b/examples/component/package.json @@ -15,7 +15,7 @@ ], "scripts": {}, "devDependencies": { - "astro": "^3.5.2" + "astro": "^3.5.3" }, "peerDependencies": { "astro": "^3.0.0" diff --git a/examples/framework-alpine/package.json b/examples/framework-alpine/package.json index dbb12bb26b85..7304bd353c6a 100644 --- a/examples/framework-alpine/package.json +++ b/examples/framework-alpine/package.json @@ -14,6 +14,6 @@ "@astrojs/alpinejs": "^0.3.1", "@types/alpinejs": "^3.7.2", "alpinejs": "^3.12.3", - "astro": "^3.5.2" + "astro": "^3.5.3" } } diff --git a/examples/framework-lit/package.json b/examples/framework-lit/package.json index 3100831735ff..63e02889b12f 100644 --- a/examples/framework-lit/package.json +++ b/examples/framework-lit/package.json @@ -13,7 +13,7 @@ "dependencies": { "@astrojs/lit": "^3.0.3", "@webcomponents/template-shadowroot": "^0.2.1", - "astro": "^3.5.2", + "astro": "^3.5.3", "lit": "^2.8.0" } } diff --git a/examples/framework-multiple/package.json b/examples/framework-multiple/package.json index 09fda9806bc0..a39fc8514a2b 100644 --- a/examples/framework-multiple/package.json +++ b/examples/framework-multiple/package.json @@ -16,7 +16,7 @@ "@astrojs/solid-js": "^3.0.2", "@astrojs/svelte": "^4.0.3", "@astrojs/vue": "^3.0.4", - "astro": "^3.5.2", + "astro": "^3.5.3", "preact": "^10.17.1", "react": "^18.2.0", "react-dom": "^18.2.0", diff --git a/examples/framework-preact/package.json b/examples/framework-preact/package.json index 6a7a91d7185a..ec0c6f4004c3 100644 --- a/examples/framework-preact/package.json +++ b/examples/framework-preact/package.json @@ -13,7 +13,7 @@ "dependencies": { "@astrojs/preact": "^3.0.1", "@preact/signals": "^1.2.1", - "astro": "^3.5.2", + "astro": "^3.5.3", "preact": "^10.17.1" } } diff --git a/examples/framework-react/package.json b/examples/framework-react/package.json index 544c00c7d021..53c58a73b5be 100644 --- a/examples/framework-react/package.json +++ b/examples/framework-react/package.json @@ -14,7 +14,7 @@ "@astrojs/react": "^3.0.4", "@types/react": "^18.2.21", "@types/react-dom": "^18.2.7", - "astro": "^3.5.2", + "astro": "^3.5.3", "react": "^18.2.0", "react-dom": "^18.2.0" } diff --git a/examples/framework-solid/package.json b/examples/framework-solid/package.json index 68ee1e826214..819cc77e60db 100644 --- a/examples/framework-solid/package.json +++ b/examples/framework-solid/package.json @@ -12,7 +12,7 @@ }, "dependencies": { "@astrojs/solid-js": "^3.0.2", - "astro": "^3.5.2", + "astro": "^3.5.3", "solid-js": "^1.7.11" } } diff --git a/examples/framework-svelte/package.json b/examples/framework-svelte/package.json index 9566e4a1e3be..04386d258ef0 100644 --- a/examples/framework-svelte/package.json +++ b/examples/framework-svelte/package.json @@ -12,7 +12,7 @@ }, "dependencies": { "@astrojs/svelte": "^4.0.3", - "astro": "^3.5.2", + "astro": "^3.5.3", "svelte": "^4.2.0" } } diff --git a/examples/framework-vue/package.json b/examples/framework-vue/package.json index f8e7b5f697af..59203105709b 100644 --- a/examples/framework-vue/package.json +++ b/examples/framework-vue/package.json @@ -12,7 +12,7 @@ }, "dependencies": { "@astrojs/vue": "^3.0.4", - "astro": "^3.5.2", + "astro": "^3.5.3", "vue": "^3.3.4" } } diff --git a/examples/hackernews/package.json b/examples/hackernews/package.json index 28f72b89ed7f..95e199737481 100644 --- a/examples/hackernews/package.json +++ b/examples/hackernews/package.json @@ -12,6 +12,6 @@ }, "dependencies": { "@astrojs/node": "^6.0.3", - "astro": "^3.5.2" + "astro": "^3.5.3" } } diff --git a/examples/integration/package.json b/examples/integration/package.json index 6b1e413e8b21..edf4162fef76 100644 --- a/examples/integration/package.json +++ b/examples/integration/package.json @@ -15,7 +15,7 @@ ], "scripts": {}, "devDependencies": { - "astro": "^3.5.2" + "astro": "^3.5.3" }, "peerDependencies": { "astro": "^3.0.0" diff --git a/examples/middleware/package.json b/examples/middleware/package.json index 8c451548ab92..b33c9aeab1ad 100644 --- a/examples/middleware/package.json +++ b/examples/middleware/package.json @@ -13,7 +13,7 @@ }, "dependencies": { "@astrojs/node": "^6.0.3", - "astro": "^3.5.2", + "astro": "^3.5.3", "html-minifier": "^4.0.0" } } diff --git a/examples/minimal/package.json b/examples/minimal/package.json index f874b175bae1..425f7fcf645a 100644 --- a/examples/minimal/package.json +++ b/examples/minimal/package.json @@ -11,6 +11,6 @@ "astro": "astro" }, "dependencies": { - "astro": "^3.5.2" + "astro": "^3.5.3" } } diff --git a/examples/non-html-pages/package.json b/examples/non-html-pages/package.json index 96fc3b77cc76..4ed01d69390c 100644 --- a/examples/non-html-pages/package.json +++ b/examples/non-html-pages/package.json @@ -11,6 +11,6 @@ "astro": "astro" }, "dependencies": { - "astro": "^3.5.2" + "astro": "^3.5.3" } } diff --git a/examples/portfolio/package.json b/examples/portfolio/package.json index 9f2868591838..184213711677 100644 --- a/examples/portfolio/package.json +++ b/examples/portfolio/package.json @@ -11,6 +11,6 @@ "astro": "astro" }, "dependencies": { - "astro": "^3.5.2" + "astro": "^3.5.3" } } diff --git a/examples/ssr/package.json b/examples/ssr/package.json index e8526bd4c135..fd3f9dc43074 100644 --- a/examples/ssr/package.json +++ b/examples/ssr/package.json @@ -14,7 +14,7 @@ "dependencies": { "@astrojs/node": "^6.0.3", "@astrojs/svelte": "^4.0.3", - "astro": "^3.5.2", + "astro": "^3.5.3", "svelte": "^4.2.0" } } diff --git a/examples/view-transitions/package.json b/examples/view-transitions/package.json index 10f0c0f8881a..0df2f967b192 100644 --- a/examples/view-transitions/package.json +++ b/examples/view-transitions/package.json @@ -12,6 +12,6 @@ "devDependencies": { "@astrojs/tailwind": "^5.0.2", "@astrojs/node": "^6.0.3", - "astro": "^3.5.2" + "astro": "^3.5.3" } } diff --git a/examples/with-markdoc/package.json b/examples/with-markdoc/package.json index 561ee91b8ea2..dc2d0f4a19c2 100644 --- a/examples/with-markdoc/package.json +++ b/examples/with-markdoc/package.json @@ -12,6 +12,6 @@ }, "dependencies": { "@astrojs/markdoc": "^0.7.1", - "astro": "^3.5.2" + "astro": "^3.5.3" } } diff --git a/examples/with-markdown-plugins/package.json b/examples/with-markdown-plugins/package.json index 1209c236846c..b51a030201c2 100644 --- a/examples/with-markdown-plugins/package.json +++ b/examples/with-markdown-plugins/package.json @@ -12,7 +12,7 @@ }, "dependencies": { "@astrojs/markdown-remark": "^3.4.0", - "astro": "^3.5.2", + "astro": "^3.5.3", "hast-util-select": "^5.0.5", "rehype-autolink-headings": "^6.1.1", "rehype-slug": "^5.1.0", diff --git a/examples/with-markdown-shiki/package.json b/examples/with-markdown-shiki/package.json index 7e0a946f1575..e87aa117c4f3 100644 --- a/examples/with-markdown-shiki/package.json +++ b/examples/with-markdown-shiki/package.json @@ -11,6 +11,6 @@ "astro": "astro" }, "dependencies": { - "astro": "^3.5.2" + "astro": "^3.5.3" } } diff --git a/examples/with-mdx/package.json b/examples/with-mdx/package.json index baaf61bb32ba..87dd6e71f111 100644 --- a/examples/with-mdx/package.json +++ b/examples/with-mdx/package.json @@ -13,7 +13,7 @@ "dependencies": { "@astrojs/mdx": "^1.1.4", "@astrojs/preact": "^3.0.1", - "astro": "^3.5.2", + "astro": "^3.5.3", "preact": "^10.17.1" } } diff --git a/examples/with-nanostores/package.json b/examples/with-nanostores/package.json index c854b95fc638..a3625b61fec6 100644 --- a/examples/with-nanostores/package.json +++ b/examples/with-nanostores/package.json @@ -13,7 +13,7 @@ "dependencies": { "@astrojs/preact": "^3.0.1", "@nanostores/preact": "^0.5.0", - "astro": "^3.5.2", + "astro": "^3.5.3", "nanostores": "^0.9.3", "preact": "^10.17.1" } diff --git a/examples/with-tailwindcss/package.json b/examples/with-tailwindcss/package.json index 65c50399d766..b8b41b427eb3 100644 --- a/examples/with-tailwindcss/package.json +++ b/examples/with-tailwindcss/package.json @@ -14,7 +14,7 @@ "@astrojs/mdx": "^1.1.4", "@astrojs/tailwind": "^5.0.2", "@types/canvas-confetti": "^1.6.0", - "astro": "^3.5.2", + "astro": "^3.5.3", "autoprefixer": "^10.4.15", "canvas-confetti": "^1.6.0", "postcss": "^8.4.28", diff --git a/examples/with-vite-plugin-pwa/package.json b/examples/with-vite-plugin-pwa/package.json index 96e9cb278d16..c5870809e670 100644 --- a/examples/with-vite-plugin-pwa/package.json +++ b/examples/with-vite-plugin-pwa/package.json @@ -11,7 +11,7 @@ "astro": "astro" }, "dependencies": { - "astro": "^3.5.2", + "astro": "^3.5.3", "vite-plugin-pwa": "0.16.4", "workbox-window": "^7.0.0" } diff --git a/examples/with-vitest/package.json b/examples/with-vitest/package.json index 395079783966..220f2fd798b8 100644 --- a/examples/with-vitest/package.json +++ b/examples/with-vitest/package.json @@ -12,7 +12,7 @@ "test": "vitest" }, "dependencies": { - "astro": "^3.5.2", + "astro": "^3.5.3", "vitest": "^0.34.2" } } diff --git a/packages/astro/CHANGELOG.md b/packages/astro/CHANGELOG.md index 2fda17388997..7a281aeb029a 100644 --- a/packages/astro/CHANGELOG.md +++ b/packages/astro/CHANGELOG.md @@ -1,5 +1,11 @@ # astro +## 3.5.3 + +### Patch Changes + +- [#9069](https://github.com/withastro/astro/pull/9069) [`50164f5e3`](https://github.com/withastro/astro/commit/50164f5e37cdc6ad81216627d8edb2a98ed37491) Thanks [@natemoo-re](https://github.com/natemoo-re)! - Fix a regression introduced in 3.5.0 related to content collection styles + ## 3.5.2 ### Patch Changes diff --git a/packages/astro/package.json b/packages/astro/package.json index 9ba98b4fc12a..ac93f13fcd19 100644 --- a/packages/astro/package.json +++ b/packages/astro/package.json @@ -1,6 +1,6 @@ { "name": "astro", - "version": "3.5.2", + "version": "3.5.3", "description": "Astro is a modern site builder with web best practices, performance, and DX front-of-mind.", "type": "module", "author": "withastro", diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index e76e5350f7be..29ceae7f2282 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -125,7 +125,7 @@ importers: examples/basics: dependencies: astro: - specifier: ^3.5.2 + specifier: ^3.5.3 version: link:../../packages/astro examples/blog: @@ -140,13 +140,13 @@ importers: specifier: ^3.0.3 version: link:../../packages/integrations/sitemap astro: - specifier: ^3.5.2 + specifier: ^3.5.3 version: link:../../packages/astro examples/component: devDependencies: astro: - specifier: ^3.5.2 + specifier: ^3.5.3 version: link:../../packages/astro examples/framework-alpine: @@ -161,7 +161,7 @@ importers: specifier: ^3.12.3 version: 3.13.2 astro: - specifier: ^3.5.2 + specifier: ^3.5.3 version: link:../../packages/astro examples/framework-lit: @@ -173,7 +173,7 @@ importers: specifier: ^0.2.1 version: 0.2.1 astro: - specifier: ^3.5.2 + specifier: ^3.5.3 version: link:../../packages/astro lit: specifier: ^2.8.0 @@ -197,7 +197,7 @@ importers: specifier: ^3.0.4 version: link:../../packages/integrations/vue astro: - specifier: ^3.5.2 + specifier: ^3.5.3 version: link:../../packages/astro preact: specifier: ^10.17.1 @@ -227,7 +227,7 @@ importers: specifier: ^1.2.1 version: 1.2.1(preact@10.18.1) astro: - specifier: ^3.5.2 + specifier: ^3.5.3 version: link:../../packages/astro preact: specifier: ^10.17.1 @@ -245,7 +245,7 @@ importers: specifier: ^18.2.7 version: 18.2.14 astro: - specifier: ^3.5.2 + specifier: ^3.5.3 version: link:../../packages/astro react: specifier: ^18.2.0 @@ -260,7 +260,7 @@ importers: specifier: ^3.0.2 version: link:../../packages/integrations/solid astro: - specifier: ^3.5.2 + specifier: ^3.5.3 version: link:../../packages/astro solid-js: specifier: ^1.7.11 @@ -272,7 +272,7 @@ importers: specifier: ^4.0.3 version: link:../../packages/integrations/svelte astro: - specifier: ^3.5.2 + specifier: ^3.5.3 version: link:../../packages/astro svelte: specifier: ^4.2.0 @@ -284,7 +284,7 @@ importers: specifier: ^3.0.4 version: link:../../packages/integrations/vue astro: - specifier: ^3.5.2 + specifier: ^3.5.3 version: link:../../packages/astro vue: specifier: ^3.3.4 @@ -296,13 +296,13 @@ importers: specifier: ^6.0.3 version: link:../../packages/integrations/node astro: - specifier: ^3.5.2 + specifier: ^3.5.3 version: link:../../packages/astro examples/integration: devDependencies: astro: - specifier: ^3.5.2 + specifier: ^3.5.3 version: link:../../packages/astro examples/middleware: @@ -311,7 +311,7 @@ importers: specifier: ^6.0.3 version: link:../../packages/integrations/node astro: - specifier: ^3.5.2 + specifier: ^3.5.3 version: link:../../packages/astro html-minifier: specifier: ^4.0.0 @@ -320,19 +320,19 @@ importers: examples/minimal: dependencies: astro: - specifier: ^3.5.2 + specifier: ^3.5.3 version: link:../../packages/astro examples/non-html-pages: dependencies: astro: - specifier: ^3.5.2 + specifier: ^3.5.3 version: link:../../packages/astro examples/portfolio: dependencies: astro: - specifier: ^3.5.2 + specifier: ^3.5.3 version: link:../../packages/astro examples/ssr: @@ -344,7 +344,7 @@ importers: specifier: ^4.0.3 version: link:../../packages/integrations/svelte astro: - specifier: ^3.5.2 + specifier: ^3.5.3 version: link:../../packages/astro svelte: specifier: ^4.2.0 @@ -359,7 +359,7 @@ importers: specifier: ^5.0.2 version: link:../../packages/integrations/tailwind astro: - specifier: ^3.5.2 + specifier: ^3.5.3 version: link:../../packages/astro examples/with-markdoc: @@ -368,7 +368,7 @@ importers: specifier: ^0.7.1 version: link:../../packages/integrations/markdoc astro: - specifier: ^3.5.2 + specifier: ^3.5.3 version: link:../../packages/astro examples/with-markdown-plugins: @@ -377,7 +377,7 @@ importers: specifier: ^3.4.0 version: link:../../packages/markdown/remark astro: - specifier: ^3.5.2 + specifier: ^3.5.3 version: link:../../packages/astro hast-util-select: specifier: ^5.0.5 @@ -398,7 +398,7 @@ importers: examples/with-markdown-shiki: dependencies: astro: - specifier: ^3.5.2 + specifier: ^3.5.3 version: link:../../packages/astro examples/with-mdx: @@ -410,7 +410,7 @@ importers: specifier: ^3.0.1 version: link:../../packages/integrations/preact astro: - specifier: ^3.5.2 + specifier: ^3.5.3 version: link:../../packages/astro preact: specifier: ^10.17.1 @@ -425,7 +425,7 @@ importers: specifier: ^0.5.0 version: 0.5.0(nanostores@0.9.4)(preact@10.18.1) astro: - specifier: ^3.5.2 + specifier: ^3.5.3 version: link:../../packages/astro nanostores: specifier: ^0.9.3 @@ -446,7 +446,7 @@ importers: specifier: ^1.6.0 version: 1.6.2 astro: - specifier: ^3.5.2 + specifier: ^3.5.3 version: link:../../packages/astro autoprefixer: specifier: ^10.4.15 @@ -464,7 +464,7 @@ importers: examples/with-vite-plugin-pwa: dependencies: astro: - specifier: ^3.5.2 + specifier: ^3.5.3 version: link:../../packages/astro vite-plugin-pwa: specifier: 0.16.4 @@ -476,7 +476,7 @@ importers: examples/with-vitest: dependencies: astro: - specifier: ^3.5.2 + specifier: ^3.5.3 version: link:../../packages/astro vitest: specifier: ^0.34.2 From c6e449c5b3e6e994b362b9ce441c8a1a81129f23 Mon Sep 17 00:00:00 2001 From: Daniel Hajduk Date: Mon, 13 Nov 2023 10:07:46 +0100 Subject: [PATCH 04/12] fix(logger): namespace label in debug logger (#9067) --- .changeset/dirty-zoos-fail.md | 5 +++++ packages/astro/src/core/logger/core.ts | 6 +++--- 2 files changed, 8 insertions(+), 3 deletions(-) create mode 100644 .changeset/dirty-zoos-fail.md diff --git a/.changeset/dirty-zoos-fail.md b/.changeset/dirty-zoos-fail.md new file mode 100644 index 000000000000..2572092a72ea --- /dev/null +++ b/.changeset/dirty-zoos-fail.md @@ -0,0 +1,5 @@ +--- +'astro': patch +--- + +Fixes display of debug messages when using the `--verbose` flag diff --git a/packages/astro/src/core/logger/core.ts b/packages/astro/src/core/logger/core.ts index a797848356ac..11804dd01ab7 100644 --- a/packages/astro/src/core/logger/core.ts +++ b/packages/astro/src/core/logger/core.ts @@ -142,8 +142,8 @@ export class Logger { error(label: string | null, message: string) { error(this.options, label, message); } - debug(label: string | null, message: string, ...args: any[]) { - debug(this.options, label, message, args); + debug(label: string | null, ...messages: any[]) { + debug(label, ...messages); } level() { @@ -181,6 +181,6 @@ export class AstroIntegrationLogger { error(this.options, this.label, message); } debug(message: string) { - debug(this.options, this.label, message); + debug(this.label, message); } } From 7aa965f960767916cb4cb7098274fe9c15e17b1e Mon Sep 17 00:00:00 2001 From: Ikko Eltociear Ashimine Date: Mon, 13 Nov 2023 18:14:46 +0900 Subject: [PATCH 05/12] Fix typo in router.ts (#9077) --- packages/astro/src/transitions/router.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/astro/src/transitions/router.ts b/packages/astro/src/transitions/router.ts index 8c008e209176..c4da38c2c8be 100644 --- a/packages/astro/src/transitions/router.ts +++ b/packages/astro/src/transitions/router.ts @@ -446,7 +446,7 @@ export function navigate(href: string, options?: Options) { if (!navigateOnServerWarned) { // instantiate an error for the stacktrace to show to user. const warning = new Error( - 'The view transtions client API was called during a server side render. This may be unintentional as the navigate() function is expected to be called in response to user interactions. Please make sure that your usage is correct.' + 'The view transitions client API was called during a server side render. This may be unintentional as the navigate() function is expected to be called in response to user interactions. Please make sure that your usage is correct.' ); warning.name = 'Warning'; // eslint-disable-next-line no-console From c5dc8f2ec9c8c1bbbffabed9eeb12d151aefb81e Mon Sep 17 00:00:00 2001 From: Erika <3019731+Princesseuh@users.noreply.github.com> Date: Mon, 13 Nov 2023 10:58:58 +0100 Subject: [PATCH 06/12] fix(assets): Only use src to hash files generated by the passthrough service (#9075) * fix(assets): Only use src to hash files generated by the passthrough service * chore: changeset --- .changeset/famous-hats-teach.md | 5 +++++ packages/astro/src/assets/services/noop.ts | 1 + 2 files changed, 6 insertions(+) create mode 100644 .changeset/famous-hats-teach.md diff --git a/.changeset/famous-hats-teach.md b/.changeset/famous-hats-teach.md new file mode 100644 index 000000000000..c3ffb7755181 --- /dev/null +++ b/.changeset/famous-hats-teach.md @@ -0,0 +1,5 @@ +--- +'astro': patch +--- + +Fix Passthrough image service generating multiple images with the same content in certain cases diff --git a/packages/astro/src/assets/services/noop.ts b/packages/astro/src/assets/services/noop.ts index d57ffeb2728d..38d7dbdb65e2 100644 --- a/packages/astro/src/assets/services/noop.ts +++ b/packages/astro/src/assets/services/noop.ts @@ -2,6 +2,7 @@ import { baseService, type LocalImageService } from './service.js'; // Empty service used for platforms that neither support Squoosh or Sharp. const noopService: LocalImageService = { + propertiesToHash: ['src'], validateOptions: baseService.validateOptions, getURL: baseService.getURL, parseURL: baseService.parseURL, From a7f8123ba45359e3d4db71089c6db5d50ac2088c Mon Sep 17 00:00:00 2001 From: Risu <79110363+risu729@users.noreply.github.com> Date: Mon, 13 Nov 2023 19:15:02 +0900 Subject: [PATCH 07/12] chore(config.d.ts): Update comment (#9076) --- packages/astro/config.d.ts | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/packages/astro/config.d.ts b/packages/astro/config.d.ts index cdd38c4ea147..a12f862d651b 100644 --- a/packages/astro/config.d.ts +++ b/packages/astro/config.d.ts @@ -16,12 +16,12 @@ export function getViteConfig(config: ViteUserConfig): ViteUserConfigFn; /** * Return the configuration needed to use the Sharp-based image service - * See: https://docs.astro.build/en/guides/assets/#using-sharp */ export function sharpImageService(): ImageServiceConfig; /** * Return the configuration needed to use the Squoosh-based image service + * See: https://docs.astro.build/en/guides/images/#configure-squoosh */ export function squooshImageService(): ImageServiceConfig; @@ -29,5 +29,6 @@ export function squooshImageService(): ImageServiceConfig; * Return the configuration needed to use the passthrough image service. This image services does not perform * any image transformations, and is mainly useful when your platform does not support other image services, or you are * not using Astro's built-in image processing. + * See: https://docs.astro.build/en/guides/images/#configure-no-op-passthrough-service */ export function passthroughImageService(): ImageServiceConfig; From 5ef89ef33e0dc4621db947b6889b3c563eb56a78 Mon Sep 17 00:00:00 2001 From: Erika <3019731+Princesseuh@users.noreply.github.com> Date: Mon, 13 Nov 2023 13:09:32 +0100 Subject: [PATCH 08/12] feat(overlay): Add a settings panel (#9058) --- .changeset/six-chefs-flash.md | 5 + packages/astro/e2e/dev-overlay.test.js | 19 ++++ packages/astro/src/@types/astro.ts | 2 + .../runtime/client/dev-overlay/entrypoint.ts | 14 ++- .../src/runtime/client/dev-overlay/overlay.ts | 26 +++-- .../client/dev-overlay/plugins/astro.ts | 50 ++------- .../client/dev-overlay/plugins/settings.ts | 106 ++++++++++++++++++ .../dev-overlay/plugins/utils/window.ts | 56 +++++++++ .../runtime/client/dev-overlay/settings.ts | 32 ++++++ .../client/dev-overlay/ui-library/icons.ts | 1 + .../client/dev-overlay/ui-library/toggle.ts | 52 +++++++++ .../client/dev-overlay/ui-library/window.ts | 45 ++++++-- 12 files changed, 349 insertions(+), 59 deletions(-) create mode 100644 .changeset/six-chefs-flash.md create mode 100644 packages/astro/src/runtime/client/dev-overlay/plugins/settings.ts create mode 100644 packages/astro/src/runtime/client/dev-overlay/plugins/utils/window.ts create mode 100644 packages/astro/src/runtime/client/dev-overlay/settings.ts create mode 100644 packages/astro/src/runtime/client/dev-overlay/ui-library/toggle.ts diff --git a/.changeset/six-chefs-flash.md b/.changeset/six-chefs-flash.md new file mode 100644 index 000000000000..3de93b983741 --- /dev/null +++ b/.changeset/six-chefs-flash.md @@ -0,0 +1,5 @@ +--- +'astro': patch +--- + +Add a new settings panel to the dev overlay diff --git a/packages/astro/e2e/dev-overlay.test.js b/packages/astro/e2e/dev-overlay.test.js index 3e8c6662c705..1a358487cb27 100644 --- a/packages/astro/e2e/dev-overlay.test.js +++ b/packages/astro/e2e/dev-overlay.test.js @@ -98,4 +98,23 @@ test.describe('Dev Overlay', () => { await expect(auditHighlight).not.toBeVisible(); await expect(auditHighlightTooltip).not.toBeVisible(); }); + + test('can open Settings plugin', async ({ page, astro }) => { + await page.goto(astro.resolveUrl('/')); + + const overlay = page.locator('astro-dev-overlay'); + const pluginButton = overlay.locator('button[data-plugin-id="astro:settings"]'); + await pluginButton.click(); + + const settingsPluginCanvas = overlay.locator( + 'astro-dev-overlay-plugin-canvas[data-plugin-id="astro:settings"]' + ); + const settingsWindow = settingsPluginCanvas.locator('astro-dev-overlay-window'); + await expect(settingsWindow).toHaveCount(1); + await expect(settingsWindow).toBeVisible(); + + // Toggle plugin off + await pluginButton.click(); + await expect(settingsWindow).not.toBeVisible(); + }); }); diff --git a/packages/astro/src/@types/astro.ts b/packages/astro/src/@types/astro.ts index faa2df03ebb9..e517a0424d8d 100644 --- a/packages/astro/src/@types/astro.ts +++ b/packages/astro/src/@types/astro.ts @@ -24,6 +24,7 @@ import type { AstroIntegrationLogger, Logger, LoggerLevel } from '../core/logger import type { AstroDevOverlay, DevOverlayCanvas } from '../runtime/client/dev-overlay/overlay.js'; import type { DevOverlayHighlight } from '../runtime/client/dev-overlay/ui-library/highlight.js'; import type { Icon } from '../runtime/client/dev-overlay/ui-library/icons.js'; +import type { DevOverlayToggle } from '../runtime/client/dev-overlay/ui-library/toggle.js'; import type { DevOverlayTooltip } from '../runtime/client/dev-overlay/ui-library/tooltip.js'; import type { DevOverlayWindow } from '../runtime/client/dev-overlay/ui-library/window.js'; import type { AstroComponentFactory, AstroComponentInstance } from '../runtime/server/index.js'; @@ -2578,5 +2579,6 @@ declare global { 'astro-dev-overlay-plugin-canvas': DevOverlayCanvas; 'astro-dev-overlay-tooltip': DevOverlayTooltip; 'astro-dev-overlay-highlight': DevOverlayHighlight; + 'astro-dev-overlay-toggle': DevOverlayToggle; } } diff --git a/packages/astro/src/runtime/client/dev-overlay/entrypoint.ts b/packages/astro/src/runtime/client/dev-overlay/entrypoint.ts index 7336f9d06673..887449c3772c 100644 --- a/packages/astro/src/runtime/client/dev-overlay/entrypoint.ts +++ b/packages/astro/src/runtime/client/dev-overlay/entrypoint.ts @@ -1,5 +1,6 @@ import type { DevOverlayPlugin as DevOverlayPluginDefinition } from '../../../@types/astro.js'; import { type AstroDevOverlay, type DevOverlayPlugin } from './overlay.js'; +import { settings } from './settings.js'; let overlay: AstroDevOverlay; @@ -9,22 +10,26 @@ document.addEventListener('DOMContentLoaded', async () => { { default: astroDevToolPlugin }, { default: astroAuditPlugin }, { default: astroXrayPlugin }, + { default: astroSettingsPlugin }, { AstroDevOverlay, DevOverlayCanvas }, { DevOverlayCard }, { DevOverlayHighlight }, { DevOverlayTooltip }, { DevOverlayWindow }, + { DevOverlayToggle }, ] = await Promise.all([ // @ts-expect-error import('astro:dev-overlay'), import('./plugins/astro.js'), import('./plugins/audit.js'), import('./plugins/xray.js'), + import('./plugins/settings.js'), import('./overlay.js'), import('./ui-library/card.js'), import('./ui-library/highlight.js'), import('./ui-library/tooltip.js'), import('./ui-library/window.js'), + import('./ui-library/toggle.js'), ]); // Register custom elements @@ -34,6 +39,7 @@ document.addEventListener('DOMContentLoaded', async () => { customElements.define('astro-dev-overlay-tooltip', DevOverlayTooltip); customElements.define('astro-dev-overlay-highlight', DevOverlayHighlight); customElements.define('astro-dev-overlay-card', DevOverlayCard); + customElements.define('astro-dev-overlay-toggle', DevOverlayToggle); overlay = document.createElement('astro-dev-overlay'); @@ -60,7 +66,9 @@ document.addEventListener('DOMContentLoaded', async () => { newState = evt.detail.state ?? true; } - target.querySelector('.notification')?.toggleAttribute('data-active', newState); + if (settings.config.showPluginNotifications === false) { + target.querySelector('.notification')?.toggleAttribute('data-active', newState); + } }); eventTarget.addEventListener('toggle-plugin', async (evt) => { @@ -77,8 +85,8 @@ document.addEventListener('DOMContentLoaded', async () => { const customPluginsDefinitions = (await loadDevOverlayPlugins()) as DevOverlayPluginDefinition[]; const plugins: DevOverlayPlugin[] = [ - ...[astroDevToolPlugin, astroXrayPlugin, astroAuditPlugin].map((pluginDef) => - preparePlugin(pluginDef, true) + ...[astroDevToolPlugin, astroXrayPlugin, astroAuditPlugin, astroSettingsPlugin].map( + (pluginDef) => preparePlugin(pluginDef, true) ), ...customPluginsDefinitions.map((pluginDef) => preparePlugin(pluginDef, false)), ]; diff --git a/packages/astro/src/runtime/client/dev-overlay/overlay.ts b/packages/astro/src/runtime/client/dev-overlay/overlay.ts index e0ab02e481a7..70d95726920b 100644 --- a/packages/astro/src/runtime/client/dev-overlay/overlay.ts +++ b/packages/astro/src/runtime/client/dev-overlay/overlay.ts @@ -1,5 +1,6 @@ /* eslint-disable no-console */ import type { DevOverlayPlugin as DevOverlayPluginDefinition } from '../../../@types/astro.js'; +import { settings } from './settings.js'; import { getIconElement, isDefinedIcon, type Icon } from './ui-library/icons.js'; export type DevOverlayPlugin = DevOverlayPluginDefinition & { @@ -235,14 +236,21 @@ export class AstroDevOverlay extends HTMLElement {
${this.plugins - .filter((plugin) => plugin.builtIn) + .filter((plugin) => plugin.builtIn && plugin.id !== 'astro:settings') .map((plugin) => this.getPluginTemplate(plugin)) .join('')} + ${ + this.plugins.filter((plugin) => !plugin.builtIn).length > 0 + ? `
${this.plugins + .filter((plugin) => !plugin.builtIn) + .map((plugin) => this.getPluginTemplate(plugin)) + .join('')}` + : '' + }
- ${this.plugins - .filter((plugin) => !plugin.builtIn) - .map((plugin) => this.getPluginTemplate(plugin)) - .join('')} + ${this.getPluginTemplate( + this.plugins.find((plugin) => plugin.builtIn && plugin.id === 'astro:settings')! + )}
@@ -254,7 +262,8 @@ export class AstroDevOverlay extends HTMLElement { // Create plugin canvases this.plugins.forEach(async (plugin) => { if (!this.hasBeenInitialized) { - console.log(`Creating plugin canvas for ${plugin.id}`); + if (settings.config.verbose) console.log(`Creating plugin canvas for ${plugin.id}`); + const pluginCanvas = document.createElement('astro-dev-overlay-plugin-canvas'); pluginCanvas.dataset.pluginId = plugin.id; this.shadowRoot?.append(pluginCanvas); @@ -321,7 +330,7 @@ export class AstroDevOverlay extends HTMLElement { if (this.isHidden()) { this.hoverTimeout = window.setTimeout(() => { this.toggleOverlay(true); - }, this.HOVER_DELAY); + }, this.HOVER_DELAY + 200); // Slightly higher delay here to prevent users opening the overlay by accident } else { this.hoverTimeout = window.setTimeout(() => { this.toggleMinimizeButton(true); @@ -374,7 +383,8 @@ export class AstroDevOverlay extends HTMLElement { const shadowRoot = this.getPluginCanvasById(plugin.id)!.shadowRoot!; try { - console.info(`Initializing plugin ${plugin.id}`); + if (settings.config.verbose) console.info(`Initializing plugin ${plugin.id}`); + await plugin.init?.(shadowRoot, plugin.eventTarget); plugin.status = 'ready'; diff --git a/packages/astro/src/runtime/client/dev-overlay/plugins/astro.ts b/packages/astro/src/runtime/client/dev-overlay/plugins/astro.ts index ea3b7f26fc1f..352a018e11e2 100644 --- a/packages/astro/src/runtime/client/dev-overlay/plugins/astro.ts +++ b/packages/astro/src/runtime/client/dev-overlay/plugins/astro.ts @@ -1,4 +1,5 @@ import type { DevOverlayPlugin } from '../../../../@types/astro.js'; +import { createWindowWithTransition, waitForTransition } from './utils/window.js'; export default { id: 'astro', @@ -10,38 +11,10 @@ export default { document.addEventListener('astro:after-swap', createWindow); function createWindow() { - const style = document.createElement('style'); - style.textContent = ` - :host { - opacity: 0; - transition: opacity 0.15s ease-in-out; - } - - :host([data-active]) { - opacity: 1; - } - - @media screen and (prefers-reduced-motion: no-preference) { - :host astro-dev-overlay-window { - transform: translateY(55px) translate(-50%, -50%); - transition: transform 0.15s ease-in-out; - transform-origin: center bottom; - } - - :host([data-active]) astro-dev-overlay-window { - transform: translateY(0) translate(-50%, -50%); - } - } - `; - canvas.append(style); - - const astroWindow = document.createElement('astro-dev-overlay-window'); - - astroWindow.windowTitle = 'Astro'; - astroWindow.windowIcon = 'astro:logo'; - - astroWindow.innerHTML = ` - +

General

+ `, + settingsRows.flatMap((setting) => [ + getElementForSettingAsString(setting), + document.createElement('hr'), + ]) + ); + canvas.append(window); + + function getElementForSettingAsString(setting: SettingRow) { + const label = document.createElement('label'); + label.classList.add('setting-row'); + const section = document.createElement('section'); + section.innerHTML = `

${setting.name}

${setting.description}`; + label.append(section); + + switch (setting.input) { + case 'checkbox': { + const astroToggle = document.createElement('astro-dev-overlay-toggle'); + astroToggle.input.addEventListener('change', setting.changeEvent); + astroToggle.input.checked = settings.config[setting.settingKey]; + label.append(astroToggle); + } + } + + return label; + } + } + }, + async beforeTogglingOff(canvas) { + return await waitForTransition(canvas); + }, +} satisfies DevOverlayPlugin; diff --git a/packages/astro/src/runtime/client/dev-overlay/plugins/utils/window.ts b/packages/astro/src/runtime/client/dev-overlay/plugins/utils/window.ts new file mode 100644 index 000000000000..04f09d6e6473 --- /dev/null +++ b/packages/astro/src/runtime/client/dev-overlay/plugins/utils/window.ts @@ -0,0 +1,56 @@ +import type { Icon } from '../../ui-library/icons.js'; + +export function createWindowWithTransition( + title: string, + icon: Icon, + windowContent: string, + addedNodes: Node[] = [] +): DocumentFragment { + const fragment = document.createDocumentFragment(); + + const style = document.createElement('style'); + style.textContent = ` + :host { + opacity: 0; + transition: opacity 0.15s ease-in-out; + } + + :host([data-active]) { + opacity: 1; + } + + @media screen and (prefers-reduced-motion: no-preference) { + :host astro-dev-overlay-window { + transform: translateY(55px) translate(-50%, -50%); + transition: transform 0.15s ease-in-out; + transform-origin: center bottom; + } + + :host([data-active]) astro-dev-overlay-window { + transform: translateY(0) translate(-50%, -50%); + } + } + `; + fragment.append(style); + + const window = document.createElement('astro-dev-overlay-window'); + window.windowTitle = title; + window.windowIcon = icon; + window.innerHTML = windowContent; + + window.append(...addedNodes); + + fragment.append(window); + + return fragment; +} + +export async function waitForTransition(canvas: ShadowRoot): Promise { + canvas.host?.removeAttribute('data-active'); + + await new Promise((resolve) => { + canvas.host.addEventListener('transitionend', resolve); + }); + + return true; +} diff --git a/packages/astro/src/runtime/client/dev-overlay/settings.ts b/packages/astro/src/runtime/client/dev-overlay/settings.ts new file mode 100644 index 000000000000..a6c086d2c9f9 --- /dev/null +++ b/packages/astro/src/runtime/client/dev-overlay/settings.ts @@ -0,0 +1,32 @@ +export interface Settings { + showPluginNotifications: boolean; + verbose: boolean; +} + +export const defaultSettings = { + showPluginNotifications: true, + verbose: false, +} satisfies Settings; + +export const settings = getSettings(); + +function getSettings() { + let _settings: Settings = { ...defaultSettings }; + const overlaySettings = localStorage.getItem('astro:dev-overlay:settings'); + + if (overlaySettings) { + _settings = { ..._settings, ...JSON.parse(overlaySettings) }; + } + + function updateSetting(key: keyof Settings, value: Settings[typeof key]) { + _settings[key] = value; + localStorage.setItem('astro:dev-overlay:settings', JSON.stringify(_settings)); + } + + return { + get config() { + return _settings; + }, + updateSetting, + }; +} diff --git a/packages/astro/src/runtime/client/dev-overlay/ui-library/icons.ts b/packages/astro/src/runtime/client/dev-overlay/ui-library/icons.ts index 10f33cad114b..7a02369007e5 100644 --- a/packages/astro/src/runtime/client/dev-overlay/ui-library/icons.ts +++ b/packages/astro/src/runtime/client/dev-overlay/ui-library/icons.ts @@ -30,4 +30,5 @@ const icons = { '', 'check-circle': '', + gear: '', } as const; diff --git a/packages/astro/src/runtime/client/dev-overlay/ui-library/toggle.ts b/packages/astro/src/runtime/client/dev-overlay/ui-library/toggle.ts new file mode 100644 index 000000000000..5ff21fd1837a --- /dev/null +++ b/packages/astro/src/runtime/client/dev-overlay/ui-library/toggle.ts @@ -0,0 +1,52 @@ +export class DevOverlayToggle extends HTMLElement { + shadowRoot: ShadowRoot; + input: HTMLInputElement; + + constructor() { + super(); + this.shadowRoot = this.attachShadow({ mode: 'open' }); + + this.shadowRoot.innerHTML = ` + + `; + + this.input = document.createElement('input'); + } + + connectedCallback() { + this.input.type = 'checkbox'; + this.shadowRoot.append(this.input); + } +} diff --git a/packages/astro/src/runtime/client/dev-overlay/ui-library/window.ts b/packages/astro/src/runtime/client/dev-overlay/ui-library/window.ts index 64bf580769d0..18b515429ad8 100644 --- a/packages/astro/src/runtime/client/dev-overlay/ui-library/window.ts +++ b/packages/astro/src/runtime/client/dev-overlay/ui-library/window.ts @@ -19,11 +19,12 @@ export class DevOverlayWindow extends HTMLElement { this.shadowRoot.innerHTML = ` -

${this.windowIcon ? this.getElementForIcon(this.windowIcon) : ''}${this.windowTitle ?? ''}

+

${this.windowIcon ? this.getElementForIcon(this.windowIcon) : ''}${ + this.windowTitle ?? '' + }


`; From 045e5ec9793a4ba2e3f0248d734246eb033225e8 Mon Sep 17 00:00:00 2001 From: Matthew Phillips Date: Mon, 13 Nov 2023 14:03:07 -0500 Subject: [PATCH 09/12] Support formmethod and formaction in ViewTransitions (#9084) * Support formmethod and formaction in ViewTransitions * Adding a changeset * Update .changeset/new-pets-fail.md Co-authored-by: Emanuele Stoppa * Be less clever --------- Co-authored-by: Emanuele Stoppa --- .changeset/new-pets-fail.md | 5 ++++ .../astro/components/ViewTransitions.astro | 7 +++-- .../src/pages/form-three.astro | 20 +++++++++++++ packages/astro/e2e/view-transitions.test.js | 12 ++++++++ packages/astro/package.json | 2 +- pnpm-lock.yaml | 28 +++++++++++++++++-- 6 files changed, 69 insertions(+), 5 deletions(-) create mode 100644 .changeset/new-pets-fail.md create mode 100644 packages/astro/e2e/fixtures/view-transitions/src/pages/form-three.astro diff --git a/.changeset/new-pets-fail.md b/.changeset/new-pets-fail.md new file mode 100644 index 000000000000..ed791a6a5710 --- /dev/null +++ b/.changeset/new-pets-fail.md @@ -0,0 +1,5 @@ +--- +'astro': patch +--- + +Supports `formmethod` and `formaction` for form overrides diff --git a/packages/astro/components/ViewTransitions.astro b/packages/astro/components/ViewTransitions.astro index 2e8b93c2f100..089d8d8e554e 100644 --- a/packages/astro/components/ViewTransitions.astro +++ b/packages/astro/components/ViewTransitions.astro @@ -88,11 +88,14 @@ const { fallback = 'animate', handleForms } = Astro.props; } const form = el as HTMLFormElement; + const submitter = ev.submitter; const formData = new FormData(form); // Use the form action, if defined, otherwise fallback to current path. - let action = form.action ?? location.pathname; + let action = submitter?.getAttribute('formaction') ?? form.action ?? location.pathname; + const method = submitter?.getAttribute('formmethod') ?? form.method; + const options: Options = {}; - if (form.method === 'get') { + if (method === 'get') { const params = new URLSearchParams(formData as any); const url = new URL(action); url.search = params.toString(); diff --git a/packages/astro/e2e/fixtures/view-transitions/src/pages/form-three.astro b/packages/astro/e2e/fixtures/view-transitions/src/pages/form-three.astro new file mode 100644 index 000000000000..9d27534de8c1 --- /dev/null +++ b/packages/astro/e2e/fixtures/view-transitions/src/pages/form-three.astro @@ -0,0 +1,20 @@ +--- +import Layout from '../components/Layout.astro'; +let formData: FormData | undefined; +if(Astro.request.method === 'POST') { + formData = await Astro.request.formData(); +} +--- + + { + Astro.request.method === 'GET' ? ( +

Contact Form

+
+ + +
+ ) : ( +
Got: {formData?.get('name')}
+ ) + } +
diff --git a/packages/astro/e2e/view-transitions.test.js b/packages/astro/e2e/view-transitions.test.js index ac0af3be2332..20ea8adbc302 100644 --- a/packages/astro/e2e/view-transitions.test.js +++ b/packages/astro/e2e/view-transitions.test.js @@ -1004,4 +1004,16 @@ test.describe('View Transitions', () => { 'There should be only 1 page load. No additional loads for the form submission' ).toEqual(1); }); + + test('forms are overridden by formmethod and formaction', async ({ page, astro }) => { + await page.goto(astro.resolveUrl('/form-three')); + + let locator = page.locator('h2'); + await expect(locator, 'should have content').toHaveText('Contact Form'); + + // Submit the form + await page.click('#submit'); + const result = page.locator('#three-result'); + await expect(result, 'should have content').toHaveText('Got: Testing'); + }); }); diff --git a/packages/astro/package.json b/packages/astro/package.json index ac93f13fcd19..3470a589d39e 100644 --- a/packages/astro/package.json +++ b/packages/astro/package.json @@ -186,7 +186,7 @@ }, "devDependencies": { "@astrojs/check": "^0.1.0", - "@playwright/test": "^1.37.1", + "@playwright/test": "1.40.0-alpha-nov-13-2023", "@types/babel__generator": "^7.6.4", "@types/babel__traverse": "^7.20.1", "@types/chai": "^4.3.5", diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 29ceae7f2282..0ca2231f2cf5 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -667,8 +667,8 @@ importers: specifier: ^0.1.0 version: 0.1.0(prettier-plugin-astro@0.12.0)(prettier@3.0.3)(typescript@5.1.6) '@playwright/test': - specifier: ^1.37.1 - version: 1.39.0 + specifier: 1.40.0-alpha-nov-13-2023 + version: 1.40.0-alpha-nov-13-2023 '@types/babel__generator': specifier: ^7.6.4 version: 7.6.6 @@ -8061,6 +8061,14 @@ packages: playwright: 1.39.0 dev: true + /@playwright/test@1.40.0-alpha-nov-13-2023: + resolution: {integrity: sha512-qb5AzKN2pf14C4AT90ps3VGbDhx1/9LnzzT+D2TBZQ/vRUUvacvxxhjieelFKvw+FN4BIXFnEs2bNecc37Jyww==} + engines: {node: '>=16'} + hasBin: true + dependencies: + playwright: 1.40.0-alpha-nov-13-2023 + dev: true + /@preact/preset-vite@2.6.0(preact@10.18.1): resolution: {integrity: sha512-5nztNzXbCpqyVum/K94nB2YQ5PTnvWdz4u7/X0jc8+kLyskSSpkNUxLQJeI90zfGSFIX1Ibj2G2JIS/mySHWYQ==} peerDependencies: @@ -14360,6 +14368,12 @@ packages: hasBin: true dev: true + /playwright-core@1.40.0-alpha-nov-13-2023: + resolution: {integrity: sha512-EVClUNNwgSh7y161ACuTQ6ULzb51dgBVbvLSGBd6lBtcb5DZ3gwG6TZLU6UrE4KNSeMxZTBsXlFlrasR6L6G3w==} + engines: {node: '>=16'} + hasBin: true + dev: true + /playwright@1.39.0: resolution: {integrity: sha512-naE5QT11uC/Oiq0BwZ50gDmy8c8WLPRTEWuSSFVG2egBka/1qMoSqYQcROMT9zLwJ86oPofcTH2jBY/5wWOgIw==} engines: {node: '>=16'} @@ -14370,6 +14384,16 @@ packages: fsevents: 2.3.2 dev: true + /playwright@1.40.0-alpha-nov-13-2023: + resolution: {integrity: sha512-/jHChcF6JXbFaL1YpZvNlXaFDfCJiXPyzooNo4TTp4yUG0vtq0b7r8jSOwmC1AcByIr4tIYkC0nOjn2TjvPlYw==} + engines: {node: '>=16'} + hasBin: true + dependencies: + playwright-core: 1.40.0-alpha-nov-13-2023 + optionalDependencies: + fsevents: 2.3.2 + dev: true + /port-authority@2.0.1: resolution: {integrity: sha512-Hz/WvSNt5+7x+Rq1Cn6DetJOZxKtLDehJ1mLCYge6ju4QvSF/PHvRgy94e1SKJVI96AJTcqEdNwkkaAFad+TXQ==} dev: false From fc66ecff18a20dd436026cb8e75bcc8b5ab0e681 Mon Sep 17 00:00:00 2001 From: Emanuele Stoppa Date: Mon, 13 Nov 2023 14:12:46 -0500 Subject: [PATCH 10/12] fix(i18n): middleware should consider trailing slash when redirecting (#9085) --- .changeset/calm-lemons-compare.md | 5 ++ packages/astro/src/core/app/index.ts | 6 +- packages/astro/src/core/app/types.ts | 1 + packages/astro/src/core/build/generate.ts | 4 +- .../src/core/build/plugins/plugin-manifest.ts | 1 + packages/astro/src/i18n/middleware.ts | 15 +++-- .../src/vite-plugin-astro-server/plugin.ts | 1 + .../src/vite-plugin-astro-server/route.ts | 6 +- packages/astro/test/i18-routing.test.js | 57 ++++++++++++++++++- 9 files changed, 86 insertions(+), 10 deletions(-) create mode 100644 .changeset/calm-lemons-compare.md diff --git a/.changeset/calm-lemons-compare.md b/.changeset/calm-lemons-compare.md new file mode 100644 index 000000000000..d441d65e144e --- /dev/null +++ b/.changeset/calm-lemons-compare.md @@ -0,0 +1,5 @@ +--- +'astro': patch +--- + +When redirecting to the default root locale, Astro middleare should take into consideration the value of `trailingSlash` diff --git a/packages/astro/src/core/app/index.ts b/packages/astro/src/core/app/index.ts index 9c91d06a1ccd..2d5cd16ed6bb 100644 --- a/packages/astro/src/core/app/index.ts +++ b/packages/astro/src/core/app/index.ts @@ -166,7 +166,11 @@ export class App { ); let response; try { - let i18nMiddleware = createI18nMiddleware(this.#manifest.i18n, this.#manifest.base); + let i18nMiddleware = createI18nMiddleware( + this.#manifest.i18n, + this.#manifest.base, + this.#manifest.trailingSlash + ); if (i18nMiddleware) { if (mod.onRequest) { this.#pipeline.setMiddlewareFunction( diff --git a/packages/astro/src/core/app/types.ts b/packages/astro/src/core/app/types.ts index 5ae0ecf2c499..9f9d80f44511 100644 --- a/packages/astro/src/core/app/types.ts +++ b/packages/astro/src/core/app/types.ts @@ -37,6 +37,7 @@ export type SSRManifest = { routes: RouteInfo[]; site?: string; base: string; + trailingSlash: 'always' | 'never' | 'ignore'; compressHTML: boolean; assetsPrefix?: string; renderers: SSRLoadedRenderer[]; diff --git a/packages/astro/src/core/build/generate.ts b/packages/astro/src/core/build/generate.ts index 0a0bb56448bf..6d8f51df2acd 100644 --- a/packages/astro/src/core/build/generate.ts +++ b/packages/astro/src/core/build/generate.ts @@ -278,7 +278,8 @@ async function generatePage( const onRequest = ssrEntry.onRequest; const i18nMiddleware = createI18nMiddleware( pipeline.getManifest().i18n, - pipeline.getManifest().base + pipeline.getManifest().base, + pipeline.getManifest().trailingSlash ); if (config.experimental.i18n && i18nMiddleware) { if (onRequest) { @@ -636,6 +637,7 @@ export function createBuildManifest( }; } return { + trailingSlash: settings.config.trailingSlash, assets: new Set(), entryModules: Object.fromEntries(internals.entrySpecifierToBundleMap.entries()), routes: [], diff --git a/packages/astro/src/core/build/plugins/plugin-manifest.ts b/packages/astro/src/core/build/plugins/plugin-manifest.ts index 337719163168..83065ecacbe4 100644 --- a/packages/astro/src/core/build/plugins/plugin-manifest.ts +++ b/packages/astro/src/core/build/plugins/plugin-manifest.ts @@ -256,6 +256,7 @@ function buildManifest( routes, site: settings.config.site, base: settings.config.base, + trailingSlash: settings.config.trailingSlash, compressHTML: settings.config.compressHTML, assetsPrefix: settings.config.build.assetsPrefix, componentMetadata: Array.from(internals.componentMetadata), diff --git a/packages/astro/src/i18n/middleware.ts b/packages/astro/src/i18n/middleware.ts index d50a58b1566f..f40eb2b45b14 100644 --- a/packages/astro/src/i18n/middleware.ts +++ b/packages/astro/src/i18n/middleware.ts @@ -1,5 +1,5 @@ -import { joinPaths } from '@astrojs/internal-helpers/path'; -import type { MiddlewareEndpointHandler, SSRManifest } from '../@types/astro.js'; +import { appendForwardSlash, joinPaths } from '@astrojs/internal-helpers/path'; +import type { AstroConfig, MiddlewareEndpointHandler, SSRManifest } from '../@types/astro.js'; // Checks if the pathname doesn't have any locale, exception for the defaultLocale, which is ignored on purpose function checkIsLocaleFree(pathname: string, locales: string[]): boolean { @@ -14,7 +14,8 @@ function checkIsLocaleFree(pathname: string, locales: string[]): boolean { export function createI18nMiddleware( i18n: SSRManifest['i18n'], - base: SSRManifest['base'] + base: SSRManifest['base'], + trailingSlash: SSRManifest['trailingSlash'] ): MiddlewareEndpointHandler | undefined { if (!i18n) { return undefined; @@ -42,8 +43,12 @@ export function createI18nMiddleware( headers: response.headers, }); } else if (i18n.routingStrategy === 'prefix-always') { - if (url.pathname === base || url.pathname === base + '/') { - return context.redirect(`${joinPaths(base, i18n.defaultLocale)}`); + if (url.pathname === base + '/' || url.pathname === base) { + if (trailingSlash === 'always') { + return context.redirect(`${appendForwardSlash(joinPaths(base, i18n.defaultLocale))}`); + } else { + return context.redirect(`${joinPaths(base, i18n.defaultLocale)}`); + } } // Astro can't know where the default locale is supposed to be, so it returns a 404 with no content. diff --git a/packages/astro/src/vite-plugin-astro-server/plugin.ts b/packages/astro/src/vite-plugin-astro-server/plugin.ts index 94ac24c9c924..b8f4ab661aba 100644 --- a/packages/astro/src/vite-plugin-astro-server/plugin.ts +++ b/packages/astro/src/vite-plugin-astro-server/plugin.ts @@ -96,6 +96,7 @@ export function createDevelopmentManifest(settings: AstroSettings): SSRManifest }; } return { + trailingSlash: settings.config.trailingSlash, compressHTML: settings.config.compressHTML, assets: new Set(), entryModules: {}, diff --git a/packages/astro/src/vite-plugin-astro-server/route.ts b/packages/astro/src/vite-plugin-astro-server/route.ts index 89173a1ecf8d..580ceb0b6468 100644 --- a/packages/astro/src/vite-plugin-astro-server/route.ts +++ b/packages/astro/src/vite-plugin-astro-server/route.ts @@ -277,7 +277,11 @@ export async function handleRoute({ const onRequest = middleware?.onRequest as MiddlewareEndpointHandler | undefined; if (config.experimental.i18n) { - const i18Middleware = createI18nMiddleware(config.experimental.i18n, config.base); + const i18Middleware = createI18nMiddleware( + config.experimental.i18n, + config.base, + config.trailingSlash + ); if (i18Middleware) { if (onRequest) { diff --git a/packages/astro/test/i18-routing.test.js b/packages/astro/test/i18-routing.test.js index 47d6b65af05f..d9a96ef6eb9f 100644 --- a/packages/astro/test/i18-routing.test.js +++ b/packages/astro/test/i18-routing.test.js @@ -253,6 +253,26 @@ describe('[DEV] i18n routing', () => { const response = await fixture.fetch('/new-site/fr/start'); expect(response.status).to.equal(404); }); + + describe('[trailingSlash: always]', () => { + before(async () => { + fixture = await loadFixture({ + root: './fixtures/i18n-routing-prefix-always/', + trailingSlash: 'always', + }); + devServer = await fixture.startDevServer(); + }); + + after(async () => { + await devServer.stop(); + }); + + it('should redirect to the index of the default locale', async () => { + const response = await fixture.fetch('/new-site/'); + expect(response.status).to.equal(200); + expect(await response.text()).includes('Hello'); + }); + }); }); describe('i18n routing fallback', () => { @@ -314,7 +334,6 @@ describe('[DEV] i18n routing', () => { }); }); }); - describe('[SSG] i18n routing', () => { describe('i18n routing', () => { /** @type {import('./test-utils').Fixture} */ @@ -547,6 +566,21 @@ describe('[SSG] i18n routing', () => { return true; } }); + + describe('[trailingSlash: always]', () => { + before(async () => { + fixture = await loadFixture({ + root: './fixtures/i18n-routing-prefix-always/', + trailingSlash: 'always', + }); + }); + + it('should redirect to the index of the default locale', async () => { + const html = await fixture.readFile('/index.html'); + expect(html).to.include('http-equiv="refresh'); + expect(html).to.include('url=/new-site/en'); + }); + }); }); describe('i18n routing with fallback', () => { @@ -607,7 +641,6 @@ describe('[SSG] i18n routing', () => { }); }); }); - describe('[SSR] i18n routing', () => { let app; describe('default', () => { @@ -792,6 +825,26 @@ describe('[SSR] i18n routing', () => { let response = await app.render(request); expect(response.status).to.equal(404); }); + + describe('[trailingSlash: always]', () => { + before(async () => { + fixture = await loadFixture({ + root: './fixtures/i18n-routing-prefix-always/', + output: 'server', + adapter: testAdapter(), + trailingSlash: 'always', + }); + await fixture.build(); + app = await fixture.loadTestAdapterApp(); + }); + + it('should redirect to the index of the default locale', async () => { + let request = new Request('http://example.com/new-site/'); + let response = await app.render(request); + expect(response.status).to.equal(302); + expect(response.headers.get('location')).to.equal('/new-site/en/'); + }); + }); }); describe('with fallback', () => { From 9294c7535d6a5dcf362a6484dad2751b514b5efd Mon Sep 17 00:00:00 2001 From: ematipico Date: Mon, 13 Nov 2023 19:14:26 +0000 Subject: [PATCH 11/12] [ci] format --- packages/astro/src/i18n/middleware.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/astro/src/i18n/middleware.ts b/packages/astro/src/i18n/middleware.ts index f40eb2b45b14..7d94d79679ea 100644 --- a/packages/astro/src/i18n/middleware.ts +++ b/packages/astro/src/i18n/middleware.ts @@ -1,5 +1,5 @@ import { appendForwardSlash, joinPaths } from '@astrojs/internal-helpers/path'; -import type { AstroConfig, MiddlewareEndpointHandler, SSRManifest } from '../@types/astro.js'; +import type { MiddlewareEndpointHandler, SSRManifest } from '../@types/astro.js'; // Checks if the pathname doesn't have any locale, exception for the defaultLocale, which is ignored on purpose function checkIsLocaleFree(pathname: string, locales: string[]): boolean { From 554017b66ac139a422eb1c2a128c519de8945116 Mon Sep 17 00:00:00 2001 From: Sarah Rainsberger Date: Mon, 13 Nov 2023 20:52:09 -0400 Subject: [PATCH 12/12] [docs] config-reference typo (#9094) --- packages/astro/src/@types/astro.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/astro/src/@types/astro.ts b/packages/astro/src/@types/astro.ts index e517a0424d8d..f15cf7d09630 100644 --- a/packages/astro/src/@types/astro.ts +++ b/packages/astro/src/@types/astro.ts @@ -1500,7 +1500,7 @@ export interface AstroUserConfig { * The following example configures your content fallback strategy to redirect unavailable pages in `/pt-br/` to their `es` version, and unavailable pages in `/fr/` to their `en` version. Unavailable `/es/` pages will return a 404. * * ```js - * export defualt defineConfig({ + * export default defineConfig({ * experimental: { * i18n: { * defaultLocale: "en",