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

* Allow importing Image component from @astrojs/image

* Adds a changeset

* Export the Image type
This commit is contained in:
Matthew Phillips 2022-07-07 13:49:46 -04:00 committed by GitHub
parent 568960f175
commit 502f063131
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
7 changed files with 20 additions and 6 deletions

View file

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

View file

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

View file

@ -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

View file

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

View file

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

View file

@ -1,6 +1,6 @@
---
import socialJpg from '../assets/social.jpg';
import { Image } from '@astrojs/image/components';
import { Image } from '@astrojs/image';
---
<html>

View file

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