Allow importing Image component from @astrojs/image (#3848)

* Allow importing Image component from @astrojs/image * Adds a changeset * Export the Image type
withastro · Jul 7, 2022 · 502f063 · 502f063
1 parent 568960f
commit 502f063
Show file tree

Hide file tree

Showing 7 changed files with 20 additions and 6 deletions.
diff --git a/.changeset/nervous-swans-perform.md 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -1,6 +1,6 @@
 ---
 import socialJpg from '../assets/social.jpg';
-import { Image } from '@astrojs/image/components';
+import { Image } from '@astrojs/image';
 ---
 
 <html>

diff --git 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);
 	}