diff --git a/.changeset/nervous-swans-perform.md b/.changeset/nervous-swans-perform.md new file mode 100644 index 000000000..a0ed43cea --- /dev/null +++ b/.changeset/nervous-swans-perform.md @@ -0,0 +1,6 @@ +--- +'astro': patch +'@astrojs/image': patch +--- + +Allow importing the Image component from @astrojs/image diff --git a/packages/astro/src/core/create-vite.ts b/packages/astro/src/core/create-vite.ts index 37673f7c6..a70ff3ede 100644 --- a/packages/astro/src/core/create-vite.ts +++ b/packages/astro/src/core/create-vite.ts @@ -111,6 +111,7 @@ export async function createVite( replacement: fileURLToPath(new URL('../@types/astro', import.meta.url)), }, ], + conditions: ['astro'], }, // Note: SSR API is in beta (https://vitejs.dev/guide/ssr.html) ssr: { @@ -129,6 +130,7 @@ export async function createVite( result = vite.mergeConfig(result, astroConfig.vite || {}); result = vite.mergeConfig(result, commandConfig); sortPlugins(result); + return result; } diff --git a/packages/integrations/image/README.md b/packages/integrations/image/README.md index 88f8f1900..b1ddee8ac 100644 --- a/packages/integrations/image/README.md +++ b/packages/integrations/image/README.md @@ -109,7 +109,7 @@ export default { ```html --- -import { Image } from '@astrojs/image/components'; +import { Image } from '@astrojs/image'; import heroImage from '../assets/hero.png'; --- @@ -136,7 +136,7 @@ import heroImage from '../assets/hero.png'; ```html --- -import { Image } from '@astrojs/image/components'; +import { Image } from '@astrojs/image'; const imageUrl = 'https://www.google.com/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png'; --- @@ -162,7 +162,7 @@ const imageUrl = 'https://www.google.com/images/branding/googlelogo/2x/googlelog ```html --- setup: | - import { Image } from '@astrojs/image/components' + import { Image } from '@astrojs/image' import hero from '../../assets/blog/introducing-astro.jpg' title: Hello world! publishDate: 12 Sep 2021 diff --git a/packages/integrations/image/package.json b/packages/integrations/image/package.json index 538601a49..1c3bec67e 100644 --- a/packages/integrations/image/package.json +++ b/packages/integrations/image/package.json @@ -19,7 +19,10 @@ "bugs": "https://github.com/withastro/astro/issues", "homepage": "https://astro.build", "exports": { - ".": "./dist/index.js", + ".": { + "astro": "./components/index.js", + "import": "./dist/index.js" + }, "./sharp": "./dist/loaders/sharp.js", "./endpoints/dev": "./dist/endpoints/dev.js", "./endpoints/prod": "./dist/endpoints/prod.js", diff --git a/packages/integrations/image/src/types.ts b/packages/integrations/image/src/types.ts index 1292169b2..f61993005 100644 --- a/packages/integrations/image/src/types.ts +++ b/packages/integrations/image/src/types.ts @@ -1,4 +1,5 @@ export * from './index'; +export type { Image } from '../components/index'; export type InputFormat = | 'heic' diff --git a/packages/integrations/image/test/fixtures/basic-image/src/pages/index.astro b/packages/integrations/image/test/fixtures/basic-image/src/pages/index.astro index f5bf1487e..6ee02360b 100644 --- a/packages/integrations/image/test/fixtures/basic-image/src/pages/index.astro +++ b/packages/integrations/image/test/fixtures/basic-image/src/pages/index.astro @@ -1,6 +1,6 @@ --- import socialJpg from '../assets/social.jpg'; -import { Image } from '@astrojs/image/components'; +import { Image } from '@astrojs/image'; --- diff --git a/packages/integrations/image/test/image-ssg.test.js b/packages/integrations/image/test/image-ssg.test.js index 254a3bfae..7df097d41 100644 --- a/packages/integrations/image/test/image-ssg.test.js +++ b/packages/integrations/image/test/image-ssg.test.js @@ -2,6 +2,7 @@ import { expect } from 'chai'; import * as cheerio from 'cheerio'; import path from 'path'; import sizeOf from 'image-size'; +import { fileURLToPath } from 'url'; import { loadFixture } from './test-utils.js'; let fixture; @@ -12,7 +13,8 @@ describe('SSG images', function () { }); function verifyImage(pathname, expected) { - const dist = path.join('test/fixtures/basic-image/dist', pathname); + const url = new URL('./fixtures/basic-image/dist/' + pathname, import.meta.url); + const dist = fileURLToPath(url); const result = sizeOf(dist); expect(result).to.deep.equal(expected); }