Merge branch 'main' into fixwrong-assetFileNames

withastro · Apr 11, 2023 · e98b3a9 · e98b3a9
2 parents 71eefbb + c12ca5e
commit e98b3a9
Show file tree

Hide file tree

Showing 17 changed files with 81 additions and 8 deletions.
diff --git a/.changeset/beige-humans-study.md b/.changeset/beige-humans-study.md
@@ -0,0 +1,5 @@
+---
+'astro': patch
+---
+
+Force error overlay direction to be LTR
diff --git a/.changeset/breezy-roses-smash.md b/.changeset/breezy-roses-smash.md
@@ -0,0 +1,5 @@
+---
+'@astrojs/image': patch
+---
+
+Make sizes prop optional on Image component
diff --git a/packages/astro/src/core/errors/overlay.ts b/packages/astro/src/core/errors/overlay.ts
@@ -584,6 +584,7 @@ class ErrorOverlay extends HTMLElement {
 		super();
 		this.root = this.attachShadow({ mode: 'open' });
 		this.root.innerHTML = overlayTemplate;
+		this.dir = 'ltr';
 
 		// theme toggle logic
 		const themeToggle = this.root.querySelector<HTMLInputElement>('.theme-toggle-checkbox');

diff --git a/packages/astro/test/alias-tsconfig.test.js b/packages/astro/test/alias-tsconfig.test.js
@@ -34,5 +34,29 @@ describe('Aliases with tsconfig.json', () => {
 			const scripts = $('script').toArray();
 			expect(scripts.length).to.be.greaterThan(0);
 		});
+
+		it('can load via baseUrl', async () => {
+			const html = await fixture.fetch('/').then((res) => res.text());
+			const $ = cheerio.load(html);
+
+			expect($('#foo').text()).to.equal('foo');
+			expect($('#constants-foo').text()).to.equal('foo');
+		});
+
+		it('can load namespace packages with @* paths', async () => {
+			const html = await fixture.fetch('/').then((res) => res.text());
+			const $ = cheerio.load(html);
+
+			expect($('#namespace').text()).to.equal('namespace');
+		});
+
+		// TODO: fix this https://github.com/withastro/astro/issues/6551
+		it.skip('works in css @import', async () => {
+			const html = await fixture.fetch('/').then((res) => res.text());
+			console.log(html);
+			// imported css should be bundled
+			expect(html).to.include('#style-red');
+			expect(html).to.include('#style-blue');
+		});
 	});
 });
diff --git a/packages/astro/test/fixtures/alias-tsconfig/deps/namespace-package/index.js b/packages/astro/test/fixtures/alias-tsconfig/deps/namespace-package/index.js
@@ -0,0 +1 @@
+export const namespace = 'namespace';
diff --git a/packages/astro/test/fixtures/alias-tsconfig/deps/namespace-package/package.json b/packages/astro/test/fixtures/alias-tsconfig/deps/namespace-package/package.json
@@ -0,0 +1,7 @@
+{
+  "name": "@test/namespace-package",
+  "version": "0.0.0",
+  "private": true,
+  "type": "module",
+  "exports": "./index.js"
+}
diff --git a/packages/astro/test/fixtures/alias-tsconfig/package.json b/packages/astro/test/fixtures/alias-tsconfig/package.json
@@ -4,6 +4,7 @@
   "private": true,
   "dependencies": {
     "@astrojs/svelte": "workspace:*",
+    "@test/namespace-package": "workspace:*",
     "astro": "workspace:*",
     "svelte": "^3.48.0"
   }

diff --git a/packages/astro/test/fixtures/alias-tsconfig/src/components/Foo.astro b/packages/astro/test/fixtures/alias-tsconfig/src/components/Foo.astro
@@ -0,0 +1 @@
+<p id="foo">foo</p>
diff --git a/packages/astro/test/fixtures/alias-tsconfig/src/components/Style.astro b/packages/astro/test/fixtures/alias-tsconfig/src/components/Style.astro
@@ -0,0 +1,2 @@
+<p id="style-blue">i am blue</p>
+<p id="style-red">i am red</p>
diff --git a/packages/astro/test/fixtures/alias-tsconfig/src/pages/index.astro b/packages/astro/test/fixtures/alias-tsconfig/src/pages/index.astro
@@ -1,5 +1,11 @@
 ---
 import Client from '@components/Client.svelte'
+import Foo from 'src/components/Foo.astro';
+import StyleComp from 'src/components/Style.astro';
+import { namespace } from '@test/namespace-package'
+import { foo } from 'src/utils/constants';
+// TODO: support alias in @import https://github.com/withastro/astro/issues/6551
+// import '@styles/main.css';
 ---
 <html lang="en">
   <head>
@@ -10,6 +16,10 @@ import Client from '@components/Client.svelte'
   <body>
     <main>
       <Client client:load />
+      <Foo />
+      <StyleComp />
+      <p id="namespace">{namespace}</p>
+      <p id="constants-foo">{foo}</p>
     </main>
   </body>
 </html>
diff --git a/packages/astro/test/fixtures/alias-tsconfig/src/styles/extra.css b/packages/astro/test/fixtures/alias-tsconfig/src/styles/extra.css
@@ -0,0 +1,3 @@
+#style-red {
+  color: red;
+}
diff --git a/packages/astro/test/fixtures/alias-tsconfig/src/styles/main.css b/packages/astro/test/fixtures/alias-tsconfig/src/styles/main.css
@@ -0,0 +1,5 @@
+@import "@styles/extra.css";
+
+#style-blue {
+  color: blue;
+}
diff --git a/packages/astro/test/fixtures/alias-tsconfig/src/utils/constants.js b/packages/astro/test/fixtures/alias-tsconfig/src/utils/constants.js
@@ -0,0 +1 @@
+export const foo = 'foo'
diff --git a/packages/astro/test/fixtures/alias-tsconfig/tsconfig.json b/packages/astro/test/fixtures/alias-tsconfig/tsconfig.json
@@ -5,12 +5,13 @@
       "@components/*": [
         "src/components/*"
       ],
-      "@layouts/*": [
-        "src/layouts/*"
-      ],
-      "@assets/*": [
-        "src/assets/*"
+      "@styles/*": [
+        "src/styles/*"
       ],
+      // this can really trip up namespaced packages
+      "@*": [
+        "src/*"
+      ]
     }
   }
 }
diff --git a/packages/integrations/image/components/Picture.astro b/packages/integrations/image/components/Picture.astro
@@ -2,6 +2,7 @@
 import { getPicture } from '../dist/index.js';
 import { warnForMissingAlt } from './index.js';
 import type { PictureComponentLocalImageProps, PictureComponentRemoteImageProps } from './index.js';
+import type { GetPictureResult } from '../src/lib/get-picture.js';
 
 export type Props = PictureComponentLocalImageProps | PictureComponentRemoteImageProps;
 
@@ -24,7 +25,7 @@ if (alt === undefined || alt === null) {
 	warnForMissingAlt();
 }
 
-const { image, sources } = await getPicture({
+const { image, sources }: GetPictureResult = await getPicture({
 	src,
 	widths,
 	formats,

diff --git a/packages/integrations/image/components/index.ts b/packages/integrations/image/components/index.ts
@@ -31,8 +31,8 @@ export interface PictureComponentLocalImageProps
 	src: ImageMetadata | Promise<{ default: ImageMetadata }>;
 	/** Defines an alternative text description of the image. Set to an empty string (alt="") if the image is not a key part of the content (it's decoration or a tracking pixel). */
 	alt: string;
-	sizes: HTMLImageElement['sizes'];
 	widths: number[];
+	sizes?: HTMLImageElement['sizes'];
 	formats?: OutputFormat[];
 }
 
@@ -43,9 +43,9 @@ export interface PictureComponentRemoteImageProps
 	src: string;
 	/** Defines an alternative text description of the image. Set to an empty string (alt="") if the image is not a key part of the content (it's decoration or a tracking pixel). */
 	alt: string;
-	sizes: HTMLImageElement['sizes'];
 	widths: number[];
 	aspectRatio: TransformOptions['aspectRatio'];
+	sizes?: HTMLImageElement['sizes'];
 	formats?: OutputFormat[];
 	background?: TransformOptions['background'];
 }

diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1,2 @@
		<p id="style-blue">i am blue</p>
		<p id="style-red">i am red</p>