From 99479e6b9505dc929997b5c42f4d7b30d54ef074 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Alper=20Do=C4=9Fan?= <48688801+doganalper@users.noreply.github.com> Date: Mon, 10 Apr 2023 15:09:02 +0300 Subject: [PATCH 1/3] Optional `Sizes` prop on Picture component (#6773) --- .changeset/breezy-roses-smash.md | 5 +++++ packages/integrations/image/components/Picture.astro | 3 ++- packages/integrations/image/components/index.ts | 4 ++-- 3 files changed, 9 insertions(+), 3 deletions(-) create mode 100644 .changeset/breezy-roses-smash.md diff --git a/.changeset/breezy-roses-smash.md b/.changeset/breezy-roses-smash.md new file mode 100644 index 000000000000..59ec9a17dccb --- /dev/null +++ b/.changeset/breezy-roses-smash.md @@ -0,0 +1,5 @@ +--- +'@astrojs/image': patch +--- + +Make sizes prop optional on Image component diff --git a/packages/integrations/image/components/Picture.astro b/packages/integrations/image/components/Picture.astro index f8958f8fea97..bdaaceae0ccc 100644 --- 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 index 2ca557656a09..3135e0e21525 100644 --- 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']; } From a91e0156ab0a5ce01eaf59e6947bb70c34265dc2 Mon Sep 17 00:00:00 2001 From: Bjorn Lu Date: Mon, 10 Apr 2023 22:40:40 +0800 Subject: [PATCH 2/3] Add more tsconfig alias tests (#6812) --- packages/astro/test/alias-tsconfig.test.js | 24 +++++++++++++++++++ .../deps/namespace-package/index.js | 1 + .../deps/namespace-package/package.json | 7 ++++++ .../test/fixtures/alias-tsconfig/package.json | 1 + .../alias-tsconfig/src/components/Foo.astro | 1 + .../alias-tsconfig/src/components/Style.astro | 2 ++ .../alias-tsconfig/src/pages/index.astro | 10 ++++++++ .../alias-tsconfig/src/styles/extra.css | 3 +++ .../alias-tsconfig/src/styles/main.css | 5 ++++ .../alias-tsconfig/src/utils/constants.js | 1 + .../fixtures/alias-tsconfig/tsconfig.json | 11 +++++---- pnpm-lock.yaml | 5 ++++ 12 files changed, 66 insertions(+), 5 deletions(-) create mode 100644 packages/astro/test/fixtures/alias-tsconfig/deps/namespace-package/index.js create mode 100644 packages/astro/test/fixtures/alias-tsconfig/deps/namespace-package/package.json create mode 100644 packages/astro/test/fixtures/alias-tsconfig/src/components/Foo.astro create mode 100644 packages/astro/test/fixtures/alias-tsconfig/src/components/Style.astro create mode 100644 packages/astro/test/fixtures/alias-tsconfig/src/styles/extra.css create mode 100644 packages/astro/test/fixtures/alias-tsconfig/src/styles/main.css create mode 100644 packages/astro/test/fixtures/alias-tsconfig/src/utils/constants.js diff --git a/packages/astro/test/alias-tsconfig.test.js b/packages/astro/test/alias-tsconfig.test.js index 1468aabeb52d..07dd1fe23948 100644 --- 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 new file mode 100644 index 000000000000..fd728a832594 --- /dev/null +++ b/packages/astro/test/fixtures/alias-tsconfig/deps/namespace-package/index.js @@ -0,0 +1 @@ +export const namespace = 'namespace'; \ No newline at end of file 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 new file mode 100644 index 000000000000..90136cfda7fe --- /dev/null +++ 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 index 61e7fb4cb57d..dc4b7e7b9ea2 100644 --- 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 new file mode 100644 index 000000000000..42bd5c2a5349 --- /dev/null +++ b/packages/astro/test/fixtures/alias-tsconfig/src/components/Foo.astro @@ -0,0 +1 @@ +

foo

\ No newline at end of file diff --git a/packages/astro/test/fixtures/alias-tsconfig/src/components/Style.astro b/packages/astro/test/fixtures/alias-tsconfig/src/components/Style.astro new file mode 100644 index 000000000000..9468ef80e338 --- /dev/null +++ b/packages/astro/test/fixtures/alias-tsconfig/src/components/Style.astro @@ -0,0 +1,2 @@ +

i am blue

+

i am red

\ No newline at end of file diff --git a/packages/astro/test/fixtures/alias-tsconfig/src/pages/index.astro b/packages/astro/test/fixtures/alias-tsconfig/src/pages/index.astro index c00b9f0836be..00dc44b92c63 100644 --- 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'; --- @@ -10,6 +16,10 @@ import Client from '@components/Client.svelte'
+ + +

{namespace}

+

{foo}

diff --git a/packages/astro/test/fixtures/alias-tsconfig/src/styles/extra.css b/packages/astro/test/fixtures/alias-tsconfig/src/styles/extra.css new file mode 100644 index 000000000000..0b41276e8545 --- /dev/null +++ b/packages/astro/test/fixtures/alias-tsconfig/src/styles/extra.css @@ -0,0 +1,3 @@ +#style-red { + color: red; +} \ No newline at end of file diff --git a/packages/astro/test/fixtures/alias-tsconfig/src/styles/main.css b/packages/astro/test/fixtures/alias-tsconfig/src/styles/main.css new file mode 100644 index 000000000000..9fd83beee390 --- /dev/null +++ b/packages/astro/test/fixtures/alias-tsconfig/src/styles/main.css @@ -0,0 +1,5 @@ +@import "@styles/extra.css"; + +#style-blue { + color: blue; +} \ No newline at end of file diff --git a/packages/astro/test/fixtures/alias-tsconfig/src/utils/constants.js b/packages/astro/test/fixtures/alias-tsconfig/src/utils/constants.js new file mode 100644 index 000000000000..cb356468240d --- /dev/null +++ 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 index 01dd88abee9c..52553e7d3002 100644 --- 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/pnpm-lock.yaml b/pnpm-lock.yaml index 556de504f69f..5789d3ae190a 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -1270,13 +1270,18 @@ importers: packages/astro/test/fixtures/alias-tsconfig: specifiers: '@astrojs/svelte': workspace:* + '@test/namespace-package': workspace:* astro: workspace:* svelte: ^3.48.0 dependencies: '@astrojs/svelte': link:../../../../integrations/svelte + '@test/namespace-package': link:deps/namespace-package astro: link:../../.. svelte: 3.55.1 + packages/astro/test/fixtures/alias-tsconfig/deps/namespace-package: + specifiers: {} + packages/astro/test/fixtures/api-routes: specifiers: astro: workspace:* From c12ca5ece34beef0fb53f911515a7c752cc2f3ad Mon Sep 17 00:00:00 2001 From: amirhhashemi <87268103+amirhhashemi@users.noreply.github.com> Date: Mon, 10 Apr 2023 18:29:17 +0330 Subject: [PATCH 3/3] fix(error-overlay): force error overlay direction to be LTR (#6782) --- .changeset/beige-humans-study.md | 5 +++++ packages/astro/src/core/errors/overlay.ts | 1 + 2 files changed, 6 insertions(+) create mode 100644 .changeset/beige-humans-study.md diff --git a/.changeset/beige-humans-study.md b/.changeset/beige-humans-study.md new file mode 100644 index 000000000000..607be9712012 --- /dev/null +++ b/.changeset/beige-humans-study.md @@ -0,0 +1,5 @@ +--- +'astro': patch +--- + +Force error overlay direction to be LTR diff --git a/packages/astro/src/core/errors/overlay.ts b/packages/astro/src/core/errors/overlay.ts index b7c9c8b94a28..8f7e464f8c1f 100644 --- 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('.theme-toggle-checkbox');