Merge branch 'main' into pr/JoshuaKGoldberg/7425

withastro · Jul 3, 2023 · c5330c3 · c5330c3
2 parents d92c4bc + 94a1529
commit c5330c3
Show file tree

Hide file tree

Showing 28 changed files with 156 additions and 140 deletions.
diff --git a/.changeset/few-ants-brake.md b/.changeset/few-ants-brake.md
@@ -0,0 +1,5 @@
+---
+"@astrojs/image": patch
+---
+
+fix: make `Picture` generate valid dev URLs
diff --git a/.changeset/giant-crews-tell.md b/.changeset/giant-crews-tell.md
@@ -0,0 +1,5 @@
+---
+'astro': patch
+---
+
+Fix bug when using `define:vars` with a `style` object
diff --git a/.changeset/grumpy-readers-draw.md b/.changeset/grumpy-readers-draw.md
@@ -0,0 +1,5 @@
+---
+"astro": patch
+---
+
+Add `Props` generic for `APIRoute` type
diff --git a/packages/astro/package.json b/packages/astro/package.json
@@ -113,7 +113,7 @@
     "test:e2e:match": "playwright test -g"
   },
   "dependencies": {
-    "@astrojs/compiler": "^1.5.0",
+    "@astrojs/compiler": "^1.5.3",
     "@astrojs/internal-helpers": "^0.1.1",
     "@astrojs/language-server": "^1.0.0",
     "@astrojs/markdown-remark": "^2.2.1",

diff --git a/packages/astro/src/@types/astro.ts b/packages/astro/src/@types/astro.ts
@@ -1764,21 +1764,21 @@ export interface APIContext<Props extends Record<string, any> = Record<string, a
 	locals: App.Locals;
 }
 
-export type Props = Record<string, unknown>;
-
 export interface EndpointOutput {
 	body: Body;
 	encoding?: BufferEncoding;
 }
 
-export type APIRoute = (
-	context: APIContext
+export type APIRoute<Props extends Record<string, any> = Record<string, any>> = (
+	context: APIContext<Props>
 ) => EndpointOutput | Response | Promise<EndpointOutput | Response>;
 
 export interface EndpointHandler {
 	[method: string]: APIRoute | ((params: Params, request: Request) => EndpointOutput | Response);
 }
 
+export type Props = Record<string, unknown>;
+
 export interface AstroRenderer {
 	/** Name of the renderer. */
 	name: string;

diff --git a/packages/astro/src/runtime/server/render/util.ts b/packages/astro/src/runtime/server/render/util.ts
@@ -90,8 +90,15 @@ Make sure to use the static attribute syntax (\`${key}={value}\`) instead of the
 	}
 
 	// support object styles for better JSX compat
-	if (key === 'style' && !(value instanceof HTMLString) && typeof value === 'object') {
-		return markHTMLString(` ${key}="${toAttributeString(toStyleString(value), shouldEscape)}"`);
+	if (key === 'style' && !(value instanceof HTMLString)) {
+		if (Array.isArray(value) && value.length === 2) {
+			return markHTMLString(
+				` ${key}="${toAttributeString(`${toStyleString(value[0])};${value[1]}`, shouldEscape)}"`
+			);
+		}
+		if (typeof value === 'object') {
+			return markHTMLString(` ${key}="${toAttributeString(toStyleString(value), shouldEscape)}"`);
+		}
 	}
 
 	// support `className` for better JSX compat

diff --git a/packages/astro/test/astro-directives.test.js b/packages/astro/test/astro-directives.test.js
@@ -53,6 +53,19 @@ describe('Directives', async () => {
 		expect($('h1').attr('style').toString()).to.include('--textColor: red;');
 	});
 
+	it('Properly handles define:vars on style elements with style object', async () => {
+		const html = await fixture.readFile('/define-vars/index.html');
+		const $ = cheerio.load(html);
+
+		// All styles should be bundled
+		expect($('style')).to.have.lengthOf(0);
+
+		// Inject style attribute on top-level element in page
+		expect($('#compound-style').attr('style').toString()).to.include(
+			'color:var(--fg);--fg: black;--bg: white;'
+		);
+	});
+
 	it('set:html', async () => {
 		const html = await fixture.readFile('/set-html/index.html');
 		const $ = cheerio.load(html);

diff --git a/packages/astro/test/fixtures/astro-directives/src/pages/define-vars.astro b/packages/astro/test/fixtures/astro-directives/src/pages/define-vars.astro
@@ -36,7 +36,7 @@ let undef: undefined;
 		<script id="inline-5" define:vars={{ undef }}>
 			console.log(undef);
 		</script>
-
+    <div id="compound-style" style={{ color: `var(--fg)` }}></div>
 		<Title />
   </body>
 </html>
diff --git a/packages/integrations/alpinejs/README.md b/packages/integrations/alpinejs/README.md
@@ -43,9 +43,8 @@ npm install alpinejs @types/alpinejs
 
 Then, apply this integration to your `astro.config.*` file using the `integrations` property:
 
-**`astro.config.mjs`**
-
-```js ins={2} "alpine()"
+```js ins={3} "alpine()"
+// astro.config.mjs
 import { defineConfig } from 'astro/config';
 import alpine from '@astrojs/alpinejs';
 

diff --git a/packages/integrations/deno/README.md b/packages/integrations/deno/README.md
@@ -96,9 +96,8 @@ deno run --allow-net --allow-read --allow-env ./dist/server/entry.mjs
 
 To configure this adapter, pass an object to the `deno()` function call in `astro.config.mjs`.
 
-**`astro.config.mjs`**
-
 ```js
+// astro.config.mjs
 import { defineConfig } from 'astro/config';
 import deno from '@astrojs/deno';
 

diff --git a/packages/integrations/image/README.md b/packages/integrations/image/README.md
@@ -63,9 +63,8 @@ npm install @astrojs/image
 
 Then, apply this integration to your `astro.config.*` file using the `integrations` property:
 
-**`astro.config.mjs`**
-
-```js ins={2} "image()"
+```js ins={3} "image()"
+// astro.config.mjs
 import { defineConfig } from 'astro/config';
 import image from '@astrojs/image';
 
@@ -85,9 +84,8 @@ npm install sharp
 
 Then, update the integration in your `astro.config.*` file to use the built-in `sharp` image transformer.
 
-**`astro.config.mjs`**
-
-```js ins={7}
+```js ins={8}
+// astro.config.mjs
 import { defineConfig } from 'astro/config';
 import image from '@astrojs/image';
 
@@ -478,9 +476,8 @@ The integration can be configured to run with a different image service, either
 
 The `serviceEntryPoint` should resolve to the image service installed from NPM. The default entry point is `@astrojs/image/squoosh`, which resolves to the entry point exported from this integration's `package.json`.
 
-**`astro.config.mjs`**
-
 ```js
+// astro.config.mjs
 import { defineConfig } from 'astro/config';
 import image from '@astrojs/image';
 
@@ -498,9 +495,8 @@ export default defineConfig({
 
 The `logLevel` controls can be used to control how much detail is logged by the integration during builds. This may be useful to track down a specific image or transformation that is taking a long time to build.
 
-**`astro.config.mjs`**
-
 ```js
+// astro.config.mjs
 import { defineConfig } from 'astro/config';
 import image from '@astrojs/image';
 
@@ -523,9 +519,8 @@ Local images will be cached for 1 year and invalidated when the original image f
 
 By default, transformed images will be cached to `./node_modules/.astro/image`. This can be configured in the integration's config options.
 
-**`astro.config.mjs`**
-
 ```js
+// astro.config.mjs
 import { defineConfig } from 'astro/config';
 import image from '@astrojs/image';
 

diff --git a/packages/integrations/image/src/lib/get-picture.ts b/packages/integrations/image/src/lib/get-picture.ts
@@ -85,7 +85,7 @@ export async function getPicture(params: GetPictureParams): Promise<GetPictureRe
 					image = img;
 				}
 
-				return `${encodeURI(img.src ?? '')} ${width}w`;
+				return `${img.src?.replaceAll(' ', encodeURI)} ${width}w`;
 			})
 		);
 

diff --git a/packages/integrations/image/test/picture-ssg.test.js b/packages/integrations/image/test/picture-ssg.test.js
@@ -195,6 +195,18 @@ describe('SSG pictures with subpath - dev', function () {
 			const src = image.attr('src');
 			const [route, params] = src.split('?');
 
+			for (const srcset of picture
+				.children('source')
+				.map((_, source) => source.attribs['srcset'])) {
+				for (const pictureSrc of srcset.split(',')) {
+					const pictureParams = pictureSrc.split('?')[1];
+
+					const expected = new URLSearchParams(params).get('href');
+					const actual = new URLSearchParams(pictureParams).get('href').replace(/\s+\d+w$/, '');
+					expect(expected).to.equal(actual);
+				}
+			}
+
 			expect(route).to.equal(url);
 
 			const searchParams = new URLSearchParams(params);

diff --git a/packages/integrations/image/test/picture-ssr-build.test.js b/packages/integrations/image/test/picture-ssr-build.test.js
@@ -223,6 +223,18 @@ describe('SSR pictures with subpath - build', function () {
 			const src = image.attr('src');
 			const [route, params] = src.split('?');
 
+			for (const srcset of picture
+				.children('source')
+				.map((_, source) => source.attribs['srcset'])) {
+				for (const pictureSrc of srcset.split(',')) {
+					const pictureParams = pictureSrc.split('?')[1];
+
+					const expected = new URLSearchParams(params).get('href');
+					const actual = new URLSearchParams(pictureParams).get('href').replace(/\s+\d+w$/, '');
+					expect(expected).to.equal(actual);
+				}
+			}
+
 			expect(route).to.equal(url);
 
 			const searchParams = new URLSearchParams(params);

diff --git a/packages/integrations/image/test/picture-ssr-dev.test.js b/packages/integrations/image/test/picture-ssr-dev.test.js
@@ -127,6 +127,18 @@ describe('SSR pictures - dev', function () {
 			const src = image.attr('src');
 			const [route, params] = src.split('?');
 
+			for (const srcset of picture
+				.children('source')
+				.map((_, source) => source.attribs['srcset'])) {
+				for (const pictureSrc of srcset.split(',')) {
+					const pictureParams = pictureSrc.split('?')[1];
+
+					const expected = new URLSearchParams(params).get('href');
+					const actual = new URLSearchParams(pictureParams).get('href').replace(/\s+\d+w$/, '');
+					expect(expected).to.equal(actual);
+				}
+			}
+
 			expect(route).to.equal(url);
 
 			const searchParams = new URLSearchParams(params);

diff --git a/packages/integrations/lit/README.md b/packages/integrations/lit/README.md
@@ -42,9 +42,8 @@ npm install lit @webcomponents/template-shadowroot
 
 Now, apply this integration to your `astro.config.*` file using the `integrations` property:
 
-**`astro.config.mjs`**
-
-```js ins={2} "lit()"
+```js ins={3} "lit()"
+// astro.config.mjs
 import { defineConfig } from 'astro/config';
 import lit from '@astrojs/lit';
 
@@ -66,9 +65,8 @@ However, there's a key difference with Lit _custom elements_ over conventional _
 
 Astro needs to know which tag is associated with which component script. We expose this through exporting a `tagName` variable from the component script. It looks like this:
 
-**`src/components/my-element.js`**
-
 ```js
+// src/components/my-element.js
 import { LitElement, html } from 'lit';
 
 const tagName = 'my-element';
@@ -86,10 +84,9 @@ customElements.define(tagName, MyElement);
 
 In your Astro template import this component as a side-effect and use the element.
 
-**`src/pages/index.astro`**
-
 ```astro
 ---
+// src/pages/index.astro
 import { MyElement } from '../components/my-element.js';
 ---
 

diff --git a/packages/integrations/markdoc/README.md b/packages/integrations/markdoc/README.md
@@ -42,9 +42,8 @@ npm install @astrojs/markdoc
 
 Then, apply this integration to your `astro.config.*` file using the `integrations` property:
 
-**`astro.config.mjs`**
-
-```js ins={2} "markdoc()"
+```js ins={3} "markdoc()"
+// astro.config.mjs
 import { defineConfig } from 'astro/config';
 import markdoc from '@astrojs/markdoc';
 

diff --git a/packages/integrations/mdx/README.md b/packages/integrations/mdx/README.md
@@ -42,9 +42,8 @@ npm install @astrojs/mdx
 
 Then, apply this integration to your `astro.config.*` file using the `integrations` property:
 
-**`astro.config.mjs`**
-
-```js ins={2} "mdx()"
+```js ins={3} "mdx()"
+// astro.config.mjs
 import { defineConfig } from 'astro/config';
 import mdx from '@astrojs/mdx';
 
@@ -95,9 +94,8 @@ All [`markdown` configuration options](https://docs.astro.build/en/reference/con
 There is no separate MDX configuration for [including pages marked as draft in the build](https://docs.astro.build/en/reference/configuration-reference/#markdowndrafts). This Markdown setting will be respected by both Markdown and MDX files and cannot be overridden for MDX files specifically.
 :::
 
-**`astro.config.mjs`**
-
 ```js
+// astro.config.mjs
 import { defineConfig } from 'astro/config';
 import mdx from '@astrojs/mdx';
 import remarkToc from 'remark-toc';
@@ -132,9 +130,8 @@ MDX will extend [your project's existing Markdown configuration](https://docs.as
 
 For example, say you need to disable GitHub-Flavored Markdown and apply a different set of remark plugins for MDX files. You can apply these options like so, with `extendMarkdownConfig` enabled by default:
 
-**`astro.config.mjs`**
-
 ```js
+// astro.config.mjs
 import { defineConfig } from 'astro/config';
 import mdx from '@astrojs/mdx';
 
@@ -160,9 +157,8 @@ export default defineConfig({
 
 You may also need to disable `markdown` config extension in MDX. For this, set `extendMarkdownConfig` to `false`:
 
-**`astro.config.mjs`**
-
 ```js
+// astro.config.mjs
 import { defineConfig } from 'astro/config';
 import mdx from '@astrojs/mdx';
 
@@ -194,9 +190,8 @@ This is an optional configuration setting to optimize the MDX output for faster
 
 This is disabled by default. To enable MDX optimization, add the following to your MDX integration configuration:
 
-**`astro.config.mjs`**
-
 ```js
+// astro.config.mjs
 import { defineConfig } from 'astro/config';
 import mdx from '@astrojs/mdx';
 
@@ -230,9 +225,8 @@ import Heading from '../Heading.astro';
 
 To configure optimization for this using the `customComponentNames` property, specify an array of HTML element names that should be treated as custom components:
 
-**`astro.config.mjs`**
-
 ```js
+// astro.config.mjs
 import { defineConfig } from 'astro/config';
 import mdx from '@astrojs/mdx';