Move client types into Astro

.changeset/nervous-swans-perform.md

@@ -0,0 +1,6 @@
+---
+'astro': patch
+'@astrojs/image': patch
+---
+
+Allow importing the Image component from @astrojs/image

examples/basics/tsconfig.json

@@ -10,6 +10,6 @@
     // Enable stricter transpilation for better output.
     "isolatedModules": true,
     // Add type definitions for our Vite runtime.
-    "types": ["vite/client"]
+    "types": ["astro/client"]
   }
 }

examples/blog-multiple-authors/tsconfig.json

@@ -10,6 +10,6 @@
     // Enable stricter transpilation for better output.
     "isolatedModules": true,
     // Add type definitions for our Vite runtime.
-    "types": ["vite/client"]
+    "types": ["astro/client"]
   }
 }

examples/blog/tsconfig.json

@@ -10,6 +10,6 @@
     // Enable stricter transpilation for better output.
     "isolatedModules": true,
     // Add type definitions for our Vite runtime.
-    "types": ["vite/client"]
+    "types": ["astro/client"]
   }
 }

examples/docs/tsconfig.json

@@ -10,6 +10,6 @@
     // Enable stricter transpilation for better output.
     "isolatedModules": true,
     // Add type definitions for our Vite runtime.
-    "types": ["vite/client"]
+    "types": ["astro/client"]
   }
 }

examples/env-vars/src/env.d.ts

@@ -1,4 +1,4 @@
-/// <reference types="vite/client" />
+/// <reference types="astro/client" />
 
 interface ImportMetaEnv {
 	readonly DB_PASSWORD: string;

examples/env-vars/tsconfig.json

@@ -10,6 +10,6 @@
     // Enable stricter transpilation for better output.
     "isolatedModules": true,
     // Add type definitions for our Vite runtime.
-    "types": ["vite/client"]
+    "types": ["astro/client"]
   }
 }

examples/framework-alpine/tsconfig.json

@@ -10,6 +10,6 @@
     // Enable stricter transpilation for better output.
     "isolatedModules": true,
     // Add type definitions for our Vite runtime.
-    "types": ["vite/client"]
+    "types": ["astro/client"]
   }
 }

examples/framework-lit/tsconfig.json

@@ -10,6 +10,6 @@
     // Enable stricter transpilation for better output.
     "isolatedModules": true,
     // Add type definitions for our Vite runtime.
-    "types": ["vite/client"]
+    "types": ["astro/client"]
   }
 }

examples/framework-multiple/tsconfig.json

@@ -10,6 +10,6 @@
     // Enable stricter transpilation for better output.
     "isolatedModules": true,
     // Add type definitions for our Vite runtime.
-    "types": ["vite/client"]
+    "types": ["astro/client"]
   }
 }

examples/framework-preact/tsconfig.json

@@ -13,6 +13,6 @@
     // Enable stricter transpilation for better output.
     "isolatedModules": true,
     // Add type definitions for our Vite runtime.
-    "types": ["vite/client"]
+    "types": ["astro/client"]
   }
 }

examples/framework-react/tsconfig.json

@@ -10,6 +10,6 @@
     // Enable stricter transpilation for better output.
     "isolatedModules": true,
     // Add type definitions for our Vite runtime.
-    "types": ["vite/client"]
+    "types": ["astro/client"]
   }
 }

examples/framework-solid/tsconfig.json

@@ -13,6 +13,6 @@
     // Enable stricter transpilation for better output.
     "isolatedModules": true,
     // Add type definitions for our Vite runtime.
-    "types": ["vite/client"]
+    "types": ["astro/client"]
   }
 }

examples/framework-svelte/tsconfig.json

@@ -10,6 +10,6 @@
     // Enable stricter transpilation for better output.
     "isolatedModules": true,
     // Add type definitions for our Vite runtime.
-    "types": ["vite/client"]
+    "types": ["astro/client"]
   }
 }

examples/framework-vue/tsconfig.json

@@ -10,6 +10,6 @@
     // Enable stricter transpilation for better output.
     "isolatedModules": true,
     // Add type definitions for our Vite runtime.
-    "types": ["vite/client"]
+    "types": ["astro/client"]
   }
 }

examples/integrations-playground/tsconfig.json

@@ -10,6 +10,6 @@
     // Enable stricter transpilation for better output.
     "isolatedModules": true,
     // Add type definitions for our Vite runtime.
-    "types": ["vite/client"]
+    "types": ["astro/client"]
   }
 }

examples/minimal/tsconfig.json

@@ -10,6 +10,6 @@
     // Enable stricter transpilation for better output.
     "isolatedModules": true,
     // Add type definitions for our Vite runtime.
-    "types": ["vite/client"]
+    "types": ["astro/client"]
   }
 }

examples/non-html-pages/tsconfig.json

@@ -10,6 +10,6 @@
     // Enable stricter transpilation for better output.
     "isolatedModules": true,
     // Add type definitions for our Vite runtime.
-    "types": ["vite/client"]
+    "types": ["astro/client"]
   }
 }

examples/portfolio/tsconfig.json

@@ -10,6 +10,6 @@
     // Enable stricter transpilation for better output.
     "isolatedModules": true,
     // Add type definitions for our Vite runtime.
-    "types": ["vite/client"]
+    "types": ["astro/client"]
   }
 }

examples/ssr/tsconfig.json

@@ -10,6 +10,6 @@
     // Enable stricter transpilation for better output.
     "isolatedModules": true,
     // Add type definitions for our Vite runtime.
-    "types": ["vite/client"]
+    "types": ["astro/client"]
   }
 }

examples/starter/tsconfig.json

@@ -10,6 +10,6 @@
     // Enable stricter transpilation for better output.
     "isolatedModules": true,
     // Add type definitions for our Vite runtime.
-    "types": ["vite/client"]
+    "types": ["astro/client"]
   }
 }

examples/subpath/tsconfig.json

@@ -10,6 +10,6 @@
     // Enable stricter transpilation for better output.
     "isolatedModules": true,
     // Add type definitions for our Vite runtime.
-    "types": ["vite/client"]
+    "types": ["astro/client"]
   }
 }

examples/with-markdown-plugins/tsconfig.json

@@ -10,6 +10,6 @@
     // Enable stricter transpilation for better output.
     "isolatedModules": true,
     // Add type definitions for our Vite runtime.
-    "types": ["vite/client"]
+    "types": ["astro/client"]
   }
 }

examples/with-markdown-shiki/tsconfig.json

@@ -10,6 +10,6 @@
     // Enable stricter transpilation for better output.
     "isolatedModules": true,
     // Add type definitions for our Vite runtime.
-    "types": ["vite/client"]
+    "types": ["astro/client"]
   }
 }

examples/with-markdown/tsconfig.json

@@ -10,6 +10,6 @@
     // Enable stricter transpilation for better output.
     "isolatedModules": true,
     // Add type definitions for our Vite runtime.
-    "types": ["vite/client"]
+    "types": ["astro/client"]
   }
 }

examples/with-mdx/tsconfig.json

@@ -10,6 +10,6 @@
     // Enable stricter transpilation for better output.
     "isolatedModules": true,
     // Add type definitions for our Vite runtime.
-    "types": ["vite/client"]
+    "types": ["astro/client"]
   }
 }

examples/with-nanostores/tsconfig.json

@@ -10,6 +10,6 @@
     // Enable stricter transpilation for better output.
     "isolatedModules": true,
     // Add type definitions for our Vite runtime.
-    "types": ["vite/client"]
+    "types": ["astro/client"]
   }
 }

examples/with-tailwindcss/tsconfig.json

@@ -10,6 +10,6 @@
     // Enable stricter transpilation for better output.
     "isolatedModules": true,
     // Add type definitions for our Vite runtime.
-    "types": ["vite/client"]
+    "types": ["astro/client"]
   }
 }

examples/with-vite-plugin-pwa/tsconfig.json

@@ -10,6 +10,6 @@
     // Enable stricter transpilation for better output.
     "isolatedModules": true,
     // Add type definitions for our Vite runtime.
-    "types": ["vite/client"]
+    "types": ["astro/client"]
   }
 }

packages/astro/client.d.ts

@@ -0,0 +1,207 @@
+/// <reference types="vite/types/importMeta" />
+
+// CSS modules
+type CSSModuleClasses = { readonly [key: string]: string }
+
+declare module '*.module.css' {
+  const classes: CSSModuleClasses
+  export default classes
+}
+declare module '*.module.scss' {
+  const classes: CSSModuleClasses
+  export default classes
+}
+declare module '*.module.sass' {
+  const classes: CSSModuleClasses
+  export default classes
+}
+declare module '*.module.less' {
+  const classes: CSSModuleClasses
+  export default classes
+}
+declare module '*.module.styl' {
+  const classes: CSSModuleClasses
+  export default classes
+}
+declare module '*.module.stylus' {
+  const classes: CSSModuleClasses
+  export default classes
+}
+declare module '*.module.pcss' {
+  const classes: CSSModuleClasses
+  export default classes
+}
+
+// CSS
+declare module '*.css' {
+  const css: string
+  export default css
+}
+declare module '*.scss' {
+  const css: string
+  export default css
+}
+declare module '*.sass' {
+  const css: string
+  export default css
+}
+declare module '*.less' {
+  const css: string
+  export default css
+}
+declare module '*.styl' {
+  const css: string
+  export default css
+}
+declare module '*.stylus' {
+  const css: string
+  export default css
+}
+declare module '*.pcss' {
+  const css: string
+  export default css
+}
+
+// Built-in asset types
+// see `src/constants.ts`
+
+// images
+declare module '*.jpg' {
+  const src: string
+  export default src
+}
+declare module '*.jpeg' {
+  const src: string
+  export default src
+}
+declare module '*.png' {
+  const src: string
+  export default src
+}
+declare module '*.gif' {
+  const src: string
+  export default src
+}
+declare module '*.svg' {
+  const src: string
+  export default src
+}
+declare module '*.ico' {
+  const src: string
+  export default src
+}
+declare module '*.webp' {
+  const src: string
+  export default src
+}
+declare module '*.avif' {
+  const src: string
+  export default src
+}
+
+// media
+declare module '*.mp4' {
+  const src: string
+  export default src
+}
+declare module '*.webm' {
+  const src: string
+  export default src
+}
+declare module '*.ogg' {
+  const src: string
+  export default src
+}
+declare module '*.mp3' {
+  const src: string
+  export default src
+}
+declare module '*.wav' {
+  const src: string
+  export default src
+}
+declare module '*.flac' {
+  const src: string
+  export default src
+}
+declare module '*.aac' {
+  const src: string
+  export default src
+}
+
+// fonts
+declare module '*.woff' {
+  const src: string
+  export default src
+}
+declare module '*.woff2' {
+  const src: string
+  export default src
+}
+declare module '*.eot' {
+  const src: string
+  export default src
+}
+declare module '*.ttf' {
+  const src: string
+  export default src
+}
+declare module '*.otf' {
+  const src: string
+  export default src
+}
+
+// other
+declare module '*.wasm' {
+  const initWasm: (options: WebAssembly.Imports) => Promise<WebAssembly.Exports>
+  export default initWasm
+}
+declare module '*.webmanifest' {
+  const src: string
+  export default src
+}
+declare module '*.pdf' {
+  const src: string
+  export default src
+}
+declare module '*.txt' {
+  const src: string
+  export default src
+}
+
+// web worker
+declare module '*?worker' {
+  const workerConstructor: {
+    new (): Worker
+  }
+  export default workerConstructor
+}
+
+declare module '*?worker&inline' {
+  const workerConstructor: {
+    new (): Worker
+  }
+  export default workerConstructor
+}
+
+declare module '*?sharedworker' {
+  const sharedWorkerConstructor: {
+    new (): SharedWorker
+  }
+  export default sharedWorkerConstructor
+}
+
+declare module '*?raw' {
+  const src: string
+  export default src
+}
+
+declare module '*?url' {
+  const src: string
+  export default src
+}
+
+declare module '*?inline' {
+  const src: string
+  export default src
+}

packages/astro/env.d.ts

@@ -1,4 +1,4 @@
-/// <reference types="vite/client" />
+/// <reference path="./client.d.ts" />
 
 type Astro = import('astro').AstroGlobal;
 

packages/astro/package.json

@@ -26,6 +26,7 @@
   "exports": {
     ".": "./astro.js",
     "./env": "./env.d.ts",
+    "./client": "./client.d.ts",
     "./astro-jsx": "./astro-jsx.d.ts",
     "./jsx/*": "./dist/jsx/*",
     "./jsx-runtime": "./dist/jsx-runtime/index.js",
@@ -63,6 +64,7 @@
     "config.d.ts",
     "config.mjs",
     "env.d.ts",
+    "client.d.ts",
     "astro-jsx.d.ts",
     "README.md",
     "vendor"

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;
 }
 

packages/astro/tsconfig.json

@@ -7,6 +7,6 @@
     "module": "ES2020",
     "outDir": "./dist",
     "target": "ES2020",
-    "types": ["vite/client"]
+    "types": ["astro/client"]
   }
 }

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

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",

packages/integrations/image/src/types.ts

@@ -1,4 +1,5 @@
 export * from './index';
+export type { Image } from '../components/index';
 
 export type InputFormat =
 	| 'heic'

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>

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