michael/astro
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

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

Browse source 
* 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
Show stats Download patch file Download diff file Expand all files Collapse all files

6
.changeset/nervous-swans-perform.md Normal file
View file

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

2
packages/astro/src/core/create-vite.ts
View file

@ -111,6 +111,7 @@ export async function createVite(
replacement: fileURLToPath(new URL('../@types/astro', import.meta.url)), replacement: fileURLToPath(new URL('../@types/astro', import.meta.url)),
}, },
], ],
conditions: ['astro'],
}, },
// Note: SSR API is in beta (https://vitejs.dev/guide/ssr.html) // Note: SSR API is in beta (https://vitejs.dev/guide/ssr.html)
ssr: { ssr: {
@ -129,6 +130,7 @@ export async function createVite(
result = vite.mergeConfig(result, astroConfig.vite || {}); result = vite.mergeConfig(result, astroConfig.vite || {});
result = vite.mergeConfig(result, commandConfig); result = vite.mergeConfig(result, commandConfig);
sortPlugins(result); sortPlugins(result);
return result; return result;
} }

6
packages/integrations/image/README.md
View file

@ -109,7 +109,7 @@ export default {
```html ```html
--- ---
import { Image } from '@astrojs/image/components'; import { Image } from '@astrojs/image';
import heroImage from '../assets/hero.png'; import heroImage from '../assets/hero.png';
--- ---
@ -136,7 +136,7 @@ import heroImage from '../assets/hero.png';
```html ```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'; 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 ```html
--- ---
setup: | setup: |
import { Image } from '@astrojs/image/components' import { Image } from '@astrojs/image'
import hero from '../../assets/blog/introducing-astro.jpg' import hero from '../../assets/blog/introducing-astro.jpg'
title: Hello world! title: Hello world!
publishDate: 12 Sep 2021 publishDate: 12 Sep 2021

5
packages/integrations/image/package.json
View file

@ -19,7 +19,10 @@
"bugs": "https://github.com/withastro/astro/issues", "bugs": "https://github.com/withastro/astro/issues",
"homepage": "https://astro.build", "homepage": "https://astro.build",
"exports": { "exports": {
".": "./dist/index.js", ".": {
"astro": "./components/index.js",
"import": "./dist/index.js"
},
"./sharp": "./dist/loaders/sharp.js", "./sharp": "./dist/loaders/sharp.js",
"./endpoints/dev": "./dist/endpoints/dev.js", "./endpoints/dev": "./dist/endpoints/dev.js",
"./endpoints/prod": "./dist/endpoints/prod.js", "./endpoints/prod": "./dist/endpoints/prod.js",

1
packages/integrations/image/src/types.ts
View file

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

2
packages/integrations/image/test/fixtures/basic-image/src/pages/index.astro vendored
View file

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

4
packages/integrations/image/test/image-ssg.test.js
View file

@ -2,6 +2,7 @@ import { expect } from 'chai';
import * as cheerio from 'cheerio'; import * as cheerio from 'cheerio';
import path from 'path'; import path from 'path';
import sizeOf from 'image-size'; import sizeOf from 'image-size';
import { fileURLToPath } from 'url';
import { loadFixture } from './test-utils.js'; import { loadFixture } from './test-utils.js';
let fixture; let fixture;
@ -12,7 +13,8 @@ describe('SSG images', function () {
}); });
function verifyImage(pathname, expected) { 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); const result = sizeOf(dist);
expect(result).to.deep.equal(expected); expect(result).to.deep.equal(expected);
} }