From 502f0631317fe1b23582d4126c44f44cb0b0716f Mon Sep 17 00:00:00 2001
From: Matthew Phillips <matthew@skypack.dev>
Date: Thu, 7 Jul 2022 13:49:46 -0400
Subject: [PATCH] Allow importing Image component from @astrojs/image (#3848)

* Allow importing Image component from @astrojs/image

* Adds a changeset

* Export the Image type
---
 .changeset/nervous-swans-perform.md                         | 6 ++++++
 packages/astro/src/core/create-vite.ts                      | 2 ++
 packages/integrations/image/README.md                       | 6 +++---
 packages/integrations/image/package.json                    | 5 ++++-
 packages/integrations/image/src/types.ts                    | 1 +
 .../image/test/fixtures/basic-image/src/pages/index.astro   | 2 +-
 packages/integrations/image/test/image-ssg.test.js          | 4 +++-
 7 files changed, 20 insertions(+), 6 deletions(-)
 create mode 100644 .changeset/nervous-swans-perform.md

diff --git a/.changeset/nervous-swans-perform.md b/.changeset/nervous-swans-perform.md
new file mode 100644
index 000000000000..a0ed43cea216
--- /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 37673f7c6ca1..a70ff3ede385 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 88f8f1900c96..b1ddee8ac80b 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 538601a4989d..1c3bec67ef95 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 1292169b2053..f619930054cd 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 f5bf1487eced..6ee02360b72e 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';
 ---
 
 <html>
diff --git a/packages/integrations/image/test/image-ssg.test.js b/packages/integrations/image/test/image-ssg.test.js
index 254a3bfae540..7df097d41840 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);
 	}