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

Merge branch 'main' into feat/squoosh-lib

Browse source
This commit is contained in:
Tony Sullivan 2022-09-08 13:42:11 -05:00
commit 6715e071f2
13 changed files with 1208 additions and 949 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

5
.changeset/orange-llamas-play.md Normal file
View file

@ -0,0 +1,5 @@
---
'@astrojs/react': patch
---
Prevent decoder from leaking

5
.changeset/proud-gifts-explain.md Normal file
View file

@ -0,0 +1,5 @@
---
'@astrojs/image': patch
---
Updates the integration to build all optimized images to `dist/assets` during SSG builds

2
examples/component/src/MyComponent.astro
View file

@ -1,7 +1,7 @@
---
// Write your component code in this file!
export interface Props {
prefix?: string
prefix?: string;
}
---

1
package.json
View file

@ -32,7 +32,6 @@
"packages/*",
"examples/*",
"examples/component/demo",
"examples/component/packages/*",
"scripts",
"packages/astro/test/fixtures/component-library-shared",
"packages/astro/test/fixtures/custom-elements/my-component-lib",

4
packages/integrations/image/src/build/ssg.ts
View file

@ -83,10 +83,10 @@ export async function ssgBuild({ loader, staticImages, config, outDir, logLevel
let outputFile: string;
if (isRemoteImage(src)) {
const outputFileURL = new URL(path.join('./', path.basename(filename)), outDir);
const outputFileURL = new URL(path.join('./assets', path.basename(filename)), outDir);
outputFile = fileURLToPath(outputFileURL);
} else {
const outputFileURL = new URL(path.join('./', filename), outDir);
const outputFileURL = new URL(path.join('./assets', filename), outDir);
outputFile = fileURLToPath(outputFileURL);
}

2
packages/integrations/image/src/index.ts
View file

@ -92,7 +92,7 @@ export default function integration(options: IntegrationOptions = {}): AstroInte
// Doing this here makes sure that base is ignored when building
// staticImages to /dist, but the rendered HTML will include the
// base prefix for `src`.
return prependForwardSlash(joinPaths(_config.base, filename));
return prependForwardSlash(joinPaths(_config.base, 'assets', filename));
}
// Helpers for building static images should only be available for SSG

2
packages/integrations/image/src/loaders/sharp.ts
View file

@ -33,6 +33,6 @@ class SharpService extends BaseSSRService {
}
}
const service = new SharpService();
const service: SSRImageService = new SharpService();
export default service;

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

@ -213,43 +213,43 @@ describe('SSG images - build', function () {
{
title: 'Local images',
id: '#social-jpg',
regex: /^\/social.\w{8}_\w{4,10}.jpg/,
regex: /^\/assets\/social.\w{8}_\w{4,10}.jpg/,
size: { width: 506, height: 253, type: 'jpg' },
},
{
title: 'Filename with spaces',
id: '#spaces',
regex: /^\/introducing astro.\w{8}_\w{4,10}.webp/,
regex: /^\/assets\/introducing astro.\w{8}_\w{4,10}.webp/,
size: { width: 768, height: 414, type: 'webp' },
},
{
title: 'Inline imports',
id: '#inline',
regex: /^\/social.\w{8}_\w{4,10}.jpg/,
regex: /^\/assets\/social.\w{8}_\w{4,10}.jpg/,
size: { width: 506, height: 253, type: 'jpg' },
},
{
title: 'Remote images',
id: '#google',
regex: /^\/googlelogo_color_272x92dp_\w{4,10}.webp/,
regex: /^\/assets\/googlelogo_color_272x92dp_\w{4,10}.webp/,
size: { width: 544, height: 184, type: 'webp' },
},
{
title: 'Remote without file extension',
id: '#ipsum',
regex: /^\/300_\w{4,10}/,
regex: /^\/assets\/300_\w{4,10}/,
size: { width: 200, height: 300, type: 'jpg' },
},
{
title: 'Public images',
id: '#hero',
regex: /^\/hero_\w{4,10}.webp/,
regex: /^\/assets\/hero_\w{4,10}.webp/,
size: { width: 768, height: 414, type: 'webp' },
},
{
title: 'Remote images',
id: '#bg-color',
regex: /^\/googlelogo_color_272x92dp_\w{4,10}.jpeg/,
regex: /^\/assets\/googlelogo_color_272x92dp_\w{4,10}.jpeg/,
size: { width: 544, height: 184, type: 'jpg' },
},
].forEach(({ title, id, regex, size }) => {
@ -289,43 +289,43 @@ describe('SSG images with subpath - build', function () {
{
title: 'Local images',
id: '#social-jpg',
regex: /^\/docs\/social.\w{8}_\w{4,10}.jpg/,
regex: /^\/docs\/assets\/social.\w{8}_\w{4,10}.jpg/,
size: { width: 506, height: 253, type: 'jpg' },
},
{
title: 'Filename with spaces',
id: '#spaces',
regex: /^\/docs\/introducing astro.\w{8}_\w{4,10}.webp/,
regex: /^\/docs\/assets\/introducing astro.\w{8}_\w{4,10}.webp/,
size: { width: 768, height: 414, type: 'webp' },
},
{
title: 'Inline imports',
id: '#inline',
regex: /^\/docs\/social.\w{8}_\w{4,10}.jpg/,
regex: /^\/docs\/assets\/social.\w{8}_\w{4,10}.jpg/,
size: { width: 506, height: 253, type: 'jpg' },
},
{
title: 'Remote images',
id: '#google',
regex: /^\/docs\/googlelogo_color_272x92dp_\w{4,10}.webp/,
regex: /^\/docs\/assets\/googlelogo_color_272x92dp_\w{4,10}.webp/,
size: { width: 544, height: 184, type: 'webp' },
},
{
title: 'Remote without file extension',
id: '#ipsum',
regex: /^\/docs\/300_\w{4,10}/,
regex: /^\/docs\/assets\/300_\w{4,10}/,
size: { width: 200, height: 300, type: 'jpg' },
},
{
title: 'Public images',
id: '#hero',
regex: /^\/docs\/hero_\w{4,10}.webp/,
regex: /^\/docs\/assets\/hero_\w{4,10}.webp/,
size: { width: 768, height: 414, type: 'webp' },
},
{
title: 'Remote images',
id: '#bg-color',
regex: /^\/docs\/googlelogo_color_272x92dp_\w{4,10}.jpeg/,
regex: /^\/docs\/assets\/googlelogo_color_272x92dp_\w{4,10}.jpeg/,
size: { width: 544, height: 184, type: 'jpg' },
},
].forEach(({ title, id, regex, size }) => {

20
packages/integrations/image/test/picture-ssg.test.js
View file

@ -195,35 +195,35 @@ describe('SSG pictures - build', function () {
{
title: 'Local images',
id: '#social-jpg',
regex: /^\/social.\w{8}_\w{4,10}.jpg/,
regex: /^\/assets\/social.\w{8}_\w{4,10}.jpg/,
size: { width: 506, height: 253, type: 'jpg' },
alt: 'Social image',
},
{
title: 'Inline images',
id: '#inline',
regex: /^\/social.\w{8}_\w{4,10}.jpg/,
regex: /^\/assets\/social.\w{8}_\w{4,10}.jpg/,
size: { width: 506, height: 253, type: 'jpg' },
alt: 'Inline social image',
},
{
title: 'Remote images',
id: '#google',
regex: /^\/googlelogo_color_272x92dp_\w{4,10}.png/,
regex: /^\/assets\/googlelogo_color_272x92dp_\w{4,10}.png/,
size: { width: 544, height: 184, type: 'png' },
alt: 'Google logo',
},
{
title: 'Remote without file extension',
id: '#ipsum',
regex: /^\/300_\w{4,10}/,
regex: /^\/assets\/300_\w{4,10}/,
size: { width: 200, height: 300, type: 'jpg' },
alt: 'ipsum',
},
{
title: 'Public images',
id: '#hero',
regex: /^\/hero_\w{4,10}.jpg/,
regex: /^\/assets\/hero_\w{4,10}.jpg/,
size: { width: 768, height: 414, type: 'jpg' },
alt: 'Hero image',
},
@ -290,35 +290,35 @@ describe('SSG pictures with subpath - build', function () {
{
title: 'Local images',
id: '#social-jpg',
regex: /^\/docs\/social.\w{8}_\w{4,10}.jpg/,
regex: /^\/docs\/assets\/social.\w{8}_\w{4,10}.jpg/,
size: { width: 506, height: 253, type: 'jpg' },
alt: 'Social image',
},
{
title: 'Inline images',
id: '#inline',
regex: /^\/docs\/social.\w{8}_\w{4,10}.jpg/,
regex: /^\/docs\/assets\/social.\w{8}_\w{4,10}.jpg/,
size: { width: 506, height: 253, type: 'jpg' },
alt: 'Inline social image',
},
{
title: 'Remote images',
id: '#google',
regex: /^\/docs\/googlelogo_color_272x92dp_\w{4,10}.png/,
regex: /^\/docs\/assets\/googlelogo_color_272x92dp_\w{4,10}.png/,
size: { width: 544, height: 184, type: 'png' },
alt: 'Google logo',
},
{
title: 'Remote without file extension',
id: '#ipsum',
regex: /^\/docs\/300_\w{4,10}/,
regex: /^\/docs\/assets\/300_\w{4,10}/,
size: { width: 200, height: 300, type: 'jpg' },
alt: 'ipsum',
},
{
title: 'Public images',
id: '#hero',
regex: /^\/docs\/hero_\w{4,10}.jpg/,
regex: /^\/docs\/assets\/hero_\w{4,10}.jpg/,
size: { width: 768, height: 414, type: 'jpg' },
alt: 'Hero image',
},

4
packages/integrations/image/test/rotation.test.js
View file

@ -32,7 +32,7 @@ describe('Image rotation', function () {
it('Landscape images', () => {
for (let i = 0; i < 9; i++) {
const image = $(`#landscape-${i}`);
const regex = new RegExp(`\^/Landscape_${i}.\\w{8}_\\w{4,10}.jpg`);
const regex = new RegExp(`\^/assets\/Landscape_${i}.\\w{8}_\\w{4,10}.jpg`);
expect(image.attr('src')).to.match(regex);
expect(image.attr('width')).to.equal('1800');
@ -49,7 +49,7 @@ describe('Image rotation', function () {
it('Portait images', () => {
for (let i = 0; i < 9; i++) {
const image = $(`#portrait-${i}`);
const regex = new RegExp(`\^/Portrait_${i}.\\w{8}_\\w{4,10}.jpg`);
const regex = new RegExp(`\^/assets\/Portrait_${i}.\\w{8}_\\w{4,10}.jpg`);
expect(image.attr('src')).to.match(regex);
expect(image.attr('width')).to.equal('1200');

10
packages/integrations/image/test/with-mdx.test.js
View file

@ -28,31 +28,31 @@ describe('Images in MDX - build', function () {
{
title: 'Local images',
id: '#social-jpg',
regex: /^\/social.\w{8}_\w{4,10}.jpg/,
regex: /^\/assets\/social.\w{8}_\w{4,10}.jpg/,
size: { width: 506, height: 253, type: 'jpg' },
},
{
title: 'Inline imports',
id: '#inline',
regex: /^\/social.\w{8}_\w{4,10}.jpg/,
regex: /^\/assets\/social.\w{8}_\w{4,10}.jpg/,
size: { width: 506, height: 253, type: 'jpg' },
},
{
title: 'Remote images',
id: '#google',
regex: /^\/googlelogo_color_272x92dp_\w{4,10}.webp/,
regex: /^\/assets\/googlelogo_color_272x92dp_\w{4,10}.webp/,
size: { width: 544, height: 184, type: 'webp' },
},
{
title: 'Public images',
id: '#hero',
regex: /^\/hero_\w{4,10}.webp/,
regex: /^\/assets\/hero_\w{4,10}.webp/,
size: { width: 768, height: 414, type: 'webp' },
},
{
title: 'Background color',
id: '#bg-color',
regex: /^\/googlelogo_color_272x92dp_\w{4,10}.jpeg/,
regex: /^\/assets\/googlelogo_color_272x92dp_\w{4,10}.jpeg/,
size: { width: 544, height: 184, type: 'jpg' },
},
].forEach(({ title, id, regex, size }) => {

31
packages/integrations/react/server.js
View file

@ -140,22 +140,27 @@ async function renderToStaticNodeStreamAsync(vnode) {
* See https://github.com/facebook/react/issues/24169
*/
async function readResult(stream) {
const reader = stream.getReader();
let result = '';
const decoder = new TextDecoder('utf-8')
while (true) {
const { done, value } = await reader.read();
if (done) {
return result;
}
result += decoder.decode(value, { stream: true });
}
const reader = stream.getReader();
let result = '';
const decoder = new TextDecoder('utf-8');
while (true) {
const { done, value } = await reader.read();
if (done) {
if (value) {
result += decoder.decode(value);
} else {
// This closes the decoder
decoder.decode(new Uint8Array());
}
return result;
}
result += decoder.decode(value, { stream: true });
}
}
async function renderToReadableStreamAsync(vnode) {
return await readResult(
await ReactDOM.renderToReadableStream(vnode),
);
return await readResult(await ReactDOM.renderToReadableStream(vnode));
}
export default {

2043
pnpm-lock.yaml
View file

File diff suppressed because it is too large Load diff