Adding an optional image service based on Squoosh (#4738)
* WIP: adding a service built on @squoosh/lib * WIP: investigating memory leaks in Squoosh * WIP: vendoring Squoosh to work with our build * chore: a bit of cleanup and a small perf gain * removing a few unused deps * fix: removing temp .only() in sharp test * hooking up the last build steps to copy over .wasm files * removing the duplicated lib/*.wasm files * defaulting to Sharp for the initial @next release * make sure pnpm always runs the postbuild script * removing a few node dependencies * refactor: move the copy .wasm build step out of the SSR bundle * linter fixes * fixing lock file * chore: add TEMP changeset * fix built wasm location for SSG builds * Revert "defaulting to Sharp for the initial @next release" This reverts commit1a8d4f7f60
. * removing sharp dependency * Revert "fix built wasm location for SSG builds" This reverts commit446b80bb53
. * chore: update lockfile * fixing up image tests for the wasm loader * updating the README for squoosh * parallel wasm builds * refactor: a bit of house keeping * perf: allow a thread for each output encoding format * fix: dev broke with the shift to wasm workers * adds a new `astro:build:generated` hook for SSG builds * fix: typo + calling cleanup methods in wasm codecs * adding @astrojs/webapi for the TransformStream polyfill * Revert "adding @astrojs/webapi for the TransformStream polyfill" This reverts commit39e5b845a5
. * perf: using sharp for most of the CI tests * chore: update lockfile * removing hard-coded squoosh imports * fix: adding sharp to rollup externals * test: using dev for the squoosh tests * fix: updating the build output dir for wasm filles in SSG builds * updating the changeset with migration details * Revert "adds a new `astro:build:generated` hook for SSG builds" This reverts commit59b5fec7be
. * nit: adding comments for the wasm file copy * chore: fix eslint warning
This commit is contained in:
parent
6a1a17dd28
commit
fad3867adb
82 changed files with 13865 additions and 542 deletions
24
.changeset/old-ladybugs-roll.md
Normal file
24
.changeset/old-ladybugs-roll.md
Normal file
|
@ -0,0 +1,24 @@
|
||||||
|
---
|
||||||
|
'@astrojs/image': minor
|
||||||
|
---
|
||||||
|
|
||||||
|
Adds a new built-in image service based on web assembly libraries :drum: web container support!
|
||||||
|
|
||||||
|
**Migration:** Happy with the previous image service based on [`sharp`](https://sharp.pixelplumbing.com/)? No problem! Install `sharp` in your project and update your Astro config to match.
|
||||||
|
|
||||||
|
```sh
|
||||||
|
npm install sharp
|
||||||
|
```
|
||||||
|
|
||||||
|
```astro title="astro.config.mjs"
|
||||||
|
---
|
||||||
|
import image from '@astrojs/image';
|
||||||
|
|
||||||
|
export default {
|
||||||
|
// ...
|
||||||
|
integrations: [image({
|
||||||
|
serviceEntryPoint: '@astrojs/image/sharp'
|
||||||
|
})],
|
||||||
|
}
|
||||||
|
---
|
||||||
|
```
|
|
@ -18,7 +18,7 @@ This **[Astro integration][astro-integration]** makes it easy to optimize images
|
||||||
|
|
||||||
Images play a big role in overall site performance and usability. Serving properly sized images makes all the difference but is often tricky to automate.
|
Images play a big role in overall site performance and usability. Serving properly sized images makes all the difference but is often tricky to automate.
|
||||||
|
|
||||||
This integration provides `<Image />` and `<Picture>` components as well as a basic image transformer powered by [sharp](https://sharp.pixelplumbing.com/), with full support for static sites and server-side rendering. The built-in `sharp` transformer is also replaceable, opening the door for future integrations that work with your favorite hosted image service.
|
This integration provides `<Image />` and `<Picture>` components as well as a basic image transformer, with full support for static sites and server-side rendering. The built-in image transformer is also replaceable, opening the door for future integrations that work with your favorite hosted image service.
|
||||||
|
|
||||||
## Installation
|
## Installation
|
||||||
|
|
||||||
|
@ -57,6 +57,31 @@ export default {
|
||||||
}
|
}
|
||||||
```
|
```
|
||||||
|
|
||||||
|
### Installing `sharp` (optional)
|
||||||
|
|
||||||
|
The default image transformer is based on [Squoosh](https://github.com/GoogleChromeLabs/squoosh) and uses web assembly libraries to support most deployment environments.
|
||||||
|
|
||||||
|
If you are building a static site or using an SSR deployment host that supports NodeJS, we recommend installing [sharp](https://sharp.pixelplumbing.com/) for faster builds and more fine-grained control of image transformations.
|
||||||
|
|
||||||
|
|
||||||
|
First, install the `sharp` package using your package manger. If you're using npm or aren't sure, run this in the terminal:
|
||||||
|
```sh
|
||||||
|
npm install sharp
|
||||||
|
```
|
||||||
|
Then, update the integration in you `astro.config.*` file to use the built-in `sharp` image transformer.
|
||||||
|
```astro title="astro.config.mjs"
|
||||||
|
---
|
||||||
|
import image from '@astrojs/image';
|
||||||
|
|
||||||
|
export default {
|
||||||
|
// ...
|
||||||
|
integrations: [image({
|
||||||
|
serviceEntryPoint: '@astrojs/image/sharp'
|
||||||
|
})],
|
||||||
|
}
|
||||||
|
---
|
||||||
|
```
|
||||||
|
|
||||||
### Update `env.d.ts`
|
### Update `env.d.ts`
|
||||||
|
|
||||||
For the best development experience, add the integrations type definitions to your project's `env.d.ts` file.
|
For the best development experience, add the integrations type definitions to your project's `env.d.ts` file.
|
||||||
|
@ -85,7 +110,7 @@ import { Image, Picture } from '@astrojs/image/components';
|
||||||
---
|
---
|
||||||
```
|
```
|
||||||
|
|
||||||
The included `sharp` transformer supports resizing images and encoding them to different image formats. Third-party image services will be able to add support for custom transformations as well (ex: `blur`, `filter`, `rotate`, etc).
|
The included image transformers support resizing images and encoding them to different image formats. Third-party image services will be able to add support for custom transformations as well (ex: `blur`, `filter`, `rotate`, etc).
|
||||||
|
|
||||||
Astro’s `<Image />` and `<Picture />` components require the `alt` attribute, which provides descriptive text for images. A warning will be logged if alt text is missing, and a future release of the integration will throw an error if no alt text is provided.
|
Astro’s `<Image />` and `<Picture />` components require the `alt` attribute, which provides descriptive text for images. A warning will be logged if alt text is missing, and a future release of the integration will throw an error if no alt text is provided.
|
||||||
|
|
||||||
|
@ -195,6 +220,8 @@ A `number` can also be provided, useful when the aspect ratio is calculated at b
|
||||||
**Default:** `undefined`
|
**Default:** `undefined`
|
||||||
</p>
|
</p>
|
||||||
|
|
||||||
|
> This is not supported by the default Squoosh service. See the [installation section](#installing-sharp-optional) for details on using the `sharp` service instead.
|
||||||
|
|
||||||
The background color is used to fill the remaining background when using `contain` for the `fit` property.
|
The background color is used to fill the remaining background when using `contain` for the `fit` property.
|
||||||
|
|
||||||
The background color is also used for replacing the alpha channel with `sharp`'s `flatten` method. In case the output format
|
The background color is also used for replacing the alpha channel with `sharp`'s `flatten` method. In case the output format
|
||||||
|
@ -215,6 +242,8 @@ color representation with 3 or 6 hexadecimal characters in the form `#123[abc]`,
|
||||||
**Default:** `'cover'`
|
**Default:** `'cover'`
|
||||||
</p>
|
</p>
|
||||||
|
|
||||||
|
> This is not supported by the default Squoosh service. See the [installation section](#installing-sharp-optional) for details on using the `sharp` service instead.
|
||||||
|
|
||||||
How the image should be resized to fit both `height` and `width`.
|
How the image should be resized to fit both `height` and `width`.
|
||||||
|
|
||||||
#### position
|
#### position
|
||||||
|
@ -225,6 +254,8 @@ How the image should be resized to fit both `height` and `width`.
|
||||||
**Default:** `'centre'`
|
**Default:** `'centre'`
|
||||||
</p>
|
</p>
|
||||||
|
|
||||||
|
> This is not supported by the default Squoosh service. See the [installation section](#installing-sharp-optional) for details on using the `sharp` service instead.
|
||||||
|
|
||||||
Position of the crop when fit is `cover` or `contain`.
|
Position of the crop when fit is `cover` or `contain`.
|
||||||
|
|
||||||
### `<Picture />`
|
### `<Picture />`
|
||||||
|
@ -316,6 +347,8 @@ The output formats to be used in the optimized image. If not provided, `webp` an
|
||||||
**Default:** `undefined`
|
**Default:** `undefined`
|
||||||
</p>
|
</p>
|
||||||
|
|
||||||
|
> This is not supported by the default Squoosh service. See the [installation section](#installing-sharp-optional) for details on using the `sharp` service instead.
|
||||||
|
|
||||||
The background color to use for replacing the alpha channel with `sharp`'s `flatten` method. In case the output format
|
The background color to use for replacing the alpha channel with `sharp`'s `flatten` method. In case the output format
|
||||||
doesn't support transparency (i.e. `jpeg`), it's advisable to include a background color, otherwise black will be used
|
doesn't support transparency (i.e. `jpeg`), it's advisable to include a background color, otherwise black will be used
|
||||||
as default replacement for transparent pixels.
|
as default replacement for transparent pixels.
|
||||||
|
@ -334,6 +367,8 @@ color representation with 3 or 6 hexadecimal characters in the form `#123[abc]`,
|
||||||
**Default:** `'cover'`
|
**Default:** `'cover'`
|
||||||
</p>
|
</p>
|
||||||
|
|
||||||
|
> This is not supported by the default Squoosh service. See the [installation section](#installing-sharp-optional) for details on using the `sharp` service instead.
|
||||||
|
|
||||||
How the image should be resized to fit both `height` and `width`.
|
How the image should be resized to fit both `height` and `width`.
|
||||||
|
|
||||||
#### position
|
#### position
|
||||||
|
@ -346,6 +381,8 @@ How the image should be resized to fit both `height` and `width`.
|
||||||
**Default:** `'centre'`
|
**Default:** `'centre'`
|
||||||
</p>
|
</p>
|
||||||
|
|
||||||
|
> This is not supported by the default Squoosh service. See the [installation section](#installing-sharp-optional) for details on using the `sharp` service instead.
|
||||||
|
|
||||||
Position of the crop when fit is `cover` or `contain`.
|
Position of the crop when fit is `cover` or `contain`.
|
||||||
|
|
||||||
### `getImage`
|
### `getImage`
|
||||||
|
@ -380,12 +417,12 @@ This helper takes in an object with the same properties as the `<Picture />` com
|
||||||
|
|
||||||
The integration can be configured to run with a different image service, either a hosted image service or a full image transformer that runs locally in your build or SSR deployment.
|
The integration can be configured to run with a different image service, either a hosted image service or a full image transformer that runs locally in your build or SSR deployment.
|
||||||
|
|
||||||
> During development, local images may not have been published yet and would not be available to hosted image services. Local images will always use the built-in `sharp` service when using `astro dev`.
|
> During development, local images may not have been published yet and would not be available to hosted image services. Local images will always use the built-in image service when using `astro dev`.
|
||||||
|
|
||||||
|
|
||||||
### config.serviceEntryPoint
|
### config.serviceEntryPoint
|
||||||
|
|
||||||
The `serviceEntryPoint` should resolve to the image service installed from NPM. The default entry point is `@astrojs/image/sharp`, which resolves to the entry point exported from this integration's `package.json`.
|
The `serviceEntryPoint` should resolve to the image service installed from NPM. The default entry point is `@astrojs/image/squoosh`, which resolves to the entry point exported from this integration's `package.json`.
|
||||||
|
|
||||||
```js
|
```js
|
||||||
// astro.config.mjs
|
// astro.config.mjs
|
||||||
|
|
|
@ -23,6 +23,7 @@
|
||||||
".": "./dist/index.js",
|
".": "./dist/index.js",
|
||||||
"./endpoint": "./dist/endpoint.js",
|
"./endpoint": "./dist/endpoint.js",
|
||||||
"./sharp": "./dist/loaders/sharp.js",
|
"./sharp": "./dist/loaders/sharp.js",
|
||||||
|
"./squoosh": "./dist/loaders/squoosh.js",
|
||||||
"./components": "./components/index.js",
|
"./components": "./components/index.js",
|
||||||
"./package.json": "./package.json",
|
"./package.json": "./package.json",
|
||||||
"./client": "./client.d.ts",
|
"./client": "./client.d.ts",
|
||||||
|
@ -34,8 +35,9 @@
|
||||||
"client.d.ts"
|
"client.d.ts"
|
||||||
],
|
],
|
||||||
"scripts": {
|
"scripts": {
|
||||||
"build": "astro-scripts build \"src/**/*.ts\" && tsc",
|
"build": "astro-scripts build \"src/**/*.ts\" && tsc && pnpm run postbuild",
|
||||||
"build:ci": "astro-scripts build \"src/**/*.ts\"",
|
"build:ci": "astro-scripts build \"src/**/*.ts\" && pnpm run postbuild",
|
||||||
|
"postbuild": "astro-scripts copy \"src/**/*.wasm\"",
|
||||||
"dev": "astro-scripts dev \"src/**/*.ts\"",
|
"dev": "astro-scripts dev \"src/**/*.ts\"",
|
||||||
"test": "mocha --exit --timeout 20000 test"
|
"test": "mocha --exit --timeout 20000 test"
|
||||||
},
|
},
|
||||||
|
@ -43,13 +45,14 @@
|
||||||
"@altano/tiny-async-pool": "^1.0.2",
|
"@altano/tiny-async-pool": "^1.0.2",
|
||||||
"image-size": "^1.0.2",
|
"image-size": "^1.0.2",
|
||||||
"magic-string": "^0.25.9",
|
"magic-string": "^0.25.9",
|
||||||
"mime": "^3.0.0",
|
"mime": "^3.0.0"
|
||||||
"sharp": "^0.30.6"
|
|
||||||
},
|
},
|
||||||
"devDependencies": {
|
"devDependencies": {
|
||||||
"@types/sharp": "^0.30.5",
|
"@types/sharp": "^0.30.5",
|
||||||
"astro": "workspace:*",
|
"astro": "workspace:*",
|
||||||
"astro-scripts": "workspace:*",
|
"astro-scripts": "workspace:*",
|
||||||
"kleur": "^4.1.4"
|
"kleur": "^4.1.4",
|
||||||
|
"rollup-plugin-copy": "^3.4.0",
|
||||||
|
"web-streams-polyfill": "^3.2.1"
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
@ -6,10 +6,31 @@ import OS from 'node:os';
|
||||||
import path from 'node:path';
|
import path from 'node:path';
|
||||||
import { fileURLToPath } from 'node:url';
|
import { fileURLToPath } from 'node:url';
|
||||||
import type { SSRImageService, TransformOptions } from '../loaders/index.js';
|
import type { SSRImageService, TransformOptions } from '../loaders/index.js';
|
||||||
import { loadLocalImage, loadRemoteImage } from '../utils/images.js';
|
|
||||||
import { debug, info, LoggerLevel, warn } from '../utils/logger.js';
|
import { debug, info, LoggerLevel, warn } from '../utils/logger.js';
|
||||||
import { isRemoteImage } from '../utils/paths.js';
|
import { isRemoteImage } from '../utils/paths.js';
|
||||||
|
|
||||||
|
async function loadLocalImage(src: string | URL) {
|
||||||
|
try {
|
||||||
|
return await fs.readFile(src);
|
||||||
|
} catch {
|
||||||
|
return undefined;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
async function loadRemoteImage(src: string) {
|
||||||
|
try {
|
||||||
|
const res = await fetch(src);
|
||||||
|
|
||||||
|
if (!res.ok) {
|
||||||
|
return undefined;
|
||||||
|
}
|
||||||
|
|
||||||
|
return Buffer.from(await res.arrayBuffer());
|
||||||
|
} catch {
|
||||||
|
return undefined;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
function getTimeStat(timeStart: number, timeEnd: number) {
|
function getTimeStat(timeStart: number, timeEnd: number) {
|
||||||
const buildTime = timeEnd - timeStart;
|
const buildTime = timeEnd - timeStart;
|
||||||
return buildTime < 750 ? `${Math.round(buildTime)}ms` : `${(buildTime / 1000).toFixed(2)}s`;
|
return buildTime < 750 ? `${Math.round(buildTime)}ms` : `${(buildTime / 1000).toFixed(2)}s`;
|
||||||
|
@ -39,8 +60,6 @@ export async function ssgBuild({ loader, staticImages, config, outDir, logLevel
|
||||||
)}`,
|
)}`,
|
||||||
});
|
});
|
||||||
|
|
||||||
const inputFiles = new Set<string>();
|
|
||||||
|
|
||||||
async function processStaticImage([src, transformsMap]: [
|
async function processStaticImage([src, transformsMap]: [
|
||||||
string,
|
string,
|
||||||
Map<string, TransformOptions>
|
Map<string, TransformOptions>
|
||||||
|
@ -61,9 +80,6 @@ export async function ssgBuild({ loader, staticImages, config, outDir, logLevel
|
||||||
const inputFileURL = new URL(`.${src}`, outDir);
|
const inputFileURL = new URL(`.${src}`, outDir);
|
||||||
inputFile = fileURLToPath(inputFileURL);
|
inputFile = fileURLToPath(inputFileURL);
|
||||||
inputBuffer = await loadLocalImage(inputFile);
|
inputBuffer = await loadLocalImage(inputFile);
|
||||||
|
|
||||||
// track the local file used so the original can be copied over
|
|
||||||
inputFiles.add(inputFile);
|
|
||||||
}
|
}
|
||||||
|
|
||||||
if (!inputBuffer) {
|
if (!inputBuffer) {
|
||||||
|
|
|
@ -48,6 +48,7 @@ export const get: APIRoute = async ({ request }) => {
|
||||||
},
|
},
|
||||||
});
|
});
|
||||||
} catch (err: unknown) {
|
} catch (err: unknown) {
|
||||||
|
console.error(err);
|
||||||
return new Response(`Server Error: ${err}`, { status: 500 });
|
return new Response(`Server Error: ${err}`, { status: 500 });
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|
|
@ -1,9 +1,10 @@
|
||||||
import type { AstroConfig, AstroIntegration } from 'astro';
|
import type { AstroConfig, AstroIntegration, BuildConfig } from 'astro';
|
||||||
import { ssgBuild } from './build/ssg.js';
|
import { ssgBuild } from './build/ssg.js';
|
||||||
import type { ImageService, TransformOptions } from './loaders/index.js';
|
import type { ImageService, SSRImageService, TransformOptions } from './loaders/index.js';
|
||||||
import type { LoggerLevel } from './utils/logger.js';
|
import type { LoggerLevel } from './utils/logger.js';
|
||||||
import { joinPaths, prependForwardSlash, propsToFilename } from './utils/paths.js';
|
import { joinPaths, prependForwardSlash, propsToFilename } from './utils/paths.js';
|
||||||
import { createPlugin } from './vite-plugin-astro-image.js';
|
import { createPlugin } from './vite-plugin-astro-image.js';
|
||||||
|
import { copyWasmFiles } from './vendor/squoosh/copy-wasm.js';
|
||||||
|
|
||||||
export { getImage } from './lib/get-image.js';
|
export { getImage } from './lib/get-image.js';
|
||||||
export { getPicture } from './lib/get-picture.js';
|
export { getPicture } from './lib/get-picture.js';
|
||||||
|
@ -13,12 +14,13 @@ const ROUTE_PATTERN = '/_image';
|
||||||
|
|
||||||
interface ImageIntegration {
|
interface ImageIntegration {
|
||||||
loader?: ImageService;
|
loader?: ImageService;
|
||||||
|
defaultLoader: SSRImageService;
|
||||||
addStaticImage?: (transform: TransformOptions) => string;
|
addStaticImage?: (transform: TransformOptions) => string;
|
||||||
}
|
}
|
||||||
|
|
||||||
declare global {
|
declare global {
|
||||||
// eslint-disable-next-line no-var
|
// eslint-disable-next-line no-var
|
||||||
var astroImage: ImageIntegration | undefined;
|
var astroImage: ImageIntegration;
|
||||||
}
|
}
|
||||||
|
|
||||||
export interface IntegrationOptions {
|
export interface IntegrationOptions {
|
||||||
|
@ -31,12 +33,13 @@ export interface IntegrationOptions {
|
||||||
|
|
||||||
export default function integration(options: IntegrationOptions = {}): AstroIntegration {
|
export default function integration(options: IntegrationOptions = {}): AstroIntegration {
|
||||||
const resolvedOptions = {
|
const resolvedOptions = {
|
||||||
serviceEntryPoint: '@astrojs/image/sharp',
|
serviceEntryPoint: '@astrojs/image/squoosh',
|
||||||
logLevel: 'info' as LoggerLevel,
|
logLevel: 'info' as LoggerLevel,
|
||||||
...options,
|
...options,
|
||||||
};
|
};
|
||||||
|
|
||||||
let _config: AstroConfig;
|
let _config: AstroConfig;
|
||||||
|
let _buildConfig: BuildConfig;
|
||||||
|
|
||||||
// During SSG builds, this is used to track all transformed images required.
|
// During SSG builds, this is used to track all transformed images required.
|
||||||
const staticImages = new Map<string, Map<string, TransformOptions>>();
|
const staticImages = new Map<string, Map<string, TransformOptions>>();
|
||||||
|
@ -45,18 +48,26 @@ export default function integration(options: IntegrationOptions = {}): AstroInte
|
||||||
return {
|
return {
|
||||||
plugins: [createPlugin(_config, resolvedOptions)],
|
plugins: [createPlugin(_config, resolvedOptions)],
|
||||||
optimizeDeps: {
|
optimizeDeps: {
|
||||||
include: ['image-size', 'sharp'],
|
include: [
|
||||||
|
'image-size',
|
||||||
|
].filter(Boolean),
|
||||||
},
|
},
|
||||||
|
build: {
|
||||||
|
rollupOptions: {
|
||||||
|
external: ["sharp"]
|
||||||
|
}
|
||||||
|
},
|
||||||
ssr: {
|
ssr: {
|
||||||
noExternal: ['@astrojs/image', resolvedOptions.serviceEntryPoint],
|
noExternal: ['@astrojs/image', resolvedOptions.serviceEntryPoint],
|
||||||
},
|
},
|
||||||
|
assetsInclude: ['**/*.wasm']
|
||||||
};
|
};
|
||||||
}
|
}
|
||||||
|
|
||||||
return {
|
return {
|
||||||
name: PKG_NAME,
|
name: PKG_NAME,
|
||||||
hooks: {
|
hooks: {
|
||||||
'astro:config:setup': ({ command, config, updateConfig, injectRoute }) => {
|
'astro:config:setup': async ({ command, config, updateConfig, injectRoute }) => {
|
||||||
_config = config;
|
_config = config;
|
||||||
|
|
||||||
updateConfig({ vite: getViteConfiguration() });
|
updateConfig({ vite: getViteConfiguration() });
|
||||||
|
@ -67,8 +78,20 @@ export default function integration(options: IntegrationOptions = {}): AstroInte
|
||||||
entryPoint: '@astrojs/image/endpoint',
|
entryPoint: '@astrojs/image/endpoint',
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
|
const { default: defaultLoader } = await import(resolvedOptions.serviceEntryPoint === '@astrojs/image/sharp'
|
||||||
|
? './loaders/sharp.js'
|
||||||
|
: './loaders/squoosh.js'
|
||||||
|
);
|
||||||
|
|
||||||
|
globalThis.astroImage = {
|
||||||
|
defaultLoader
|
||||||
|
}
|
||||||
},
|
},
|
||||||
'astro:build:setup': () => {
|
'astro:build:start': async ({ buildConfig }) => {
|
||||||
|
_buildConfig = buildConfig
|
||||||
|
},
|
||||||
|
'astro:build:setup': async () => {
|
||||||
// Used to cache all images rendered to HTML
|
// Used to cache all images rendered to HTML
|
||||||
// Added to globalThis to share the same map in Node and Vite
|
// Added to globalThis to share the same map in Node and Vite
|
||||||
function addStaticImage(transform: TransformOptions) {
|
function addStaticImage(transform: TransformOptions) {
|
||||||
|
@ -89,29 +112,36 @@ export default function integration(options: IntegrationOptions = {}): AstroInte
|
||||||
}
|
}
|
||||||
|
|
||||||
// Helpers for building static images should only be available for SSG
|
// Helpers for building static images should only be available for SSG
|
||||||
globalThis.astroImage =
|
|
||||||
_config.output === 'static'
|
|
||||||
? {
|
|
||||||
addStaticImage,
|
|
||||||
}
|
|
||||||
: {};
|
|
||||||
},
|
|
||||||
'astro:build:done': async ({ dir }) => {
|
|
||||||
if (_config.output === 'static') {
|
if (_config.output === 'static') {
|
||||||
// for SSG builds, build all requested image transforms to dist
|
globalThis.astroImage.addStaticImage = addStaticImage;
|
||||||
const loader = globalThis?.astroImage?.loader;
|
|
||||||
|
|
||||||
if (loader && 'transform' in loader && staticImages.size > 0) {
|
|
||||||
await ssgBuild({
|
|
||||||
loader,
|
|
||||||
staticImages,
|
|
||||||
config: _config,
|
|
||||||
outDir: dir,
|
|
||||||
logLevel: resolvedOptions.logLevel,
|
|
||||||
});
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
'astro:build:generated': async ({ dir }) => {
|
||||||
|
// for SSG builds, build all requested image transforms to dist
|
||||||
|
const loader = globalThis?.astroImage?.loader;
|
||||||
|
|
||||||
|
if (resolvedOptions.serviceEntryPoint === '@astrojs/image/squoosh') {
|
||||||
|
// For the Squoosh service, copy all wasm files to dist/chunks.
|
||||||
|
// Because the default loader is dynamically imported (above),
|
||||||
|
// Vite will bundle squoosh to dist/chunks and expect to find the wasm files there
|
||||||
|
await copyWasmFiles(new URL('./chunks', dir));
|
||||||
|
}
|
||||||
|
|
||||||
|
if (loader && 'transform' in loader && staticImages.size > 0) {
|
||||||
|
await ssgBuild({
|
||||||
|
loader,
|
||||||
|
staticImages,
|
||||||
|
config: _config,
|
||||||
|
outDir: dir,
|
||||||
|
logLevel: resolvedOptions.logLevel,
|
||||||
|
});
|
||||||
|
}
|
||||||
|
},
|
||||||
|
'astro:build:ssr': async () => {
|
||||||
|
if (resolvedOptions.serviceEntryPoint === '@astrojs/image/squoosh') {
|
||||||
|
await copyWasmFiles(_buildConfig.server);
|
||||||
|
}
|
||||||
|
}
|
||||||
},
|
},
|
||||||
};
|
};
|
||||||
}
|
}
|
||||||
|
|
|
@ -6,7 +6,6 @@ import type {
|
||||||
TransformOptions,
|
TransformOptions,
|
||||||
} from '../loaders/index.js';
|
} from '../loaders/index.js';
|
||||||
import { isSSRService, parseAspectRatio } from '../loaders/index.js';
|
import { isSSRService, parseAspectRatio } from '../loaders/index.js';
|
||||||
import sharp from '../loaders/sharp.js';
|
|
||||||
import { isRemoteImage } from '../utils/paths.js';
|
import { isRemoteImage } from '../utils/paths.js';
|
||||||
import type { ImageMetadata } from '../vite-plugin-astro-image.js';
|
import type { ImageMetadata } from '../vite-plugin-astro-image.js';
|
||||||
|
|
||||||
|
@ -131,7 +130,7 @@ export async function getImage(
|
||||||
const isDev = import.meta.env?.DEV;
|
const isDev = import.meta.env?.DEV;
|
||||||
const isLocalImage = !isRemoteImage(resolved.src);
|
const isLocalImage = !isRemoteImage(resolved.src);
|
||||||
|
|
||||||
const _loader = isDev && isLocalImage ? sharp : loader;
|
const _loader = isDev && isLocalImage ? globalThis.astroImage.defaultLoader : loader;
|
||||||
|
|
||||||
if (!_loader) {
|
if (!_loader) {
|
||||||
throw new Error('@astrojs/image: loader not found!');
|
throw new Error('@astrojs/image: loader not found!');
|
||||||
|
@ -139,7 +138,7 @@ export async function getImage(
|
||||||
|
|
||||||
const { searchParams } = isSSRService(_loader)
|
const { searchParams } = isSSRService(_loader)
|
||||||
? _loader.serializeTransform(resolved)
|
? _loader.serializeTransform(resolved)
|
||||||
: sharp.serializeTransform(resolved);
|
: globalThis.astroImage.defaultLoader.serializeTransform(resolved);
|
||||||
|
|
||||||
let src: string;
|
let src: string;
|
||||||
|
|
||||||
|
|
|
@ -1,9 +1,9 @@
|
||||||
/// <reference types="astro/astro-jsx" />
|
/// <reference types="astro/astro-jsx" />
|
||||||
import mime from 'mime';
|
import mime from 'mime';
|
||||||
import { extname } from 'node:path';
|
|
||||||
import { OutputFormat, parseAspectRatio, TransformOptions } from '../loaders/index.js';
|
import { OutputFormat, parseAspectRatio, TransformOptions } from '../loaders/index.js';
|
||||||
import { ImageMetadata } from '../vite-plugin-astro-image.js';
|
import { ImageMetadata } from '../vite-plugin-astro-image.js';
|
||||||
import { getImage } from './get-image.js';
|
import { getImage } from './get-image.js';
|
||||||
|
import { extname } from '../utils/paths.js';
|
||||||
|
|
||||||
export interface GetPictureParams {
|
export interface GetPictureParams {
|
||||||
src: string | ImageMetadata | Promise<{ default: ImageMetadata }>;
|
src: string | ImageMetadata | Promise<{ default: ImageMetadata }>;
|
||||||
|
|
|
@ -1,4 +1,5 @@
|
||||||
import { htmlColorNames, type NamedColor } from './colornames.js';
|
import { AstroConfig } from 'astro';
|
||||||
|
import { htmlColorNames, type NamedColor } from '../utils/colornames.js';
|
||||||
|
|
||||||
/// <reference types="astro/astro-jsx" />
|
/// <reference types="astro/astro-jsx" />
|
||||||
export type InputFormat =
|
export type InputFormat =
|
||||||
|
@ -13,7 +14,7 @@ export type InputFormat =
|
||||||
| 'gif';
|
| 'gif';
|
||||||
|
|
||||||
export type OutputFormatSupportsAlpha = 'avif' | 'png' | 'webp';
|
export type OutputFormatSupportsAlpha = 'avif' | 'png' | 'webp';
|
||||||
export type OutputFormat = OutputFormatSupportsAlpha | 'jpeg';
|
export type OutputFormat = OutputFormatSupportsAlpha | 'jpeg' | 'jpg';
|
||||||
|
|
||||||
export type ColorDefinition =
|
export type ColorDefinition =
|
||||||
| NamedColor
|
| NamedColor
|
||||||
|
@ -49,7 +50,7 @@ export type CropPosition =
|
||||||
| 'attention';
|
| 'attention';
|
||||||
|
|
||||||
export function isOutputFormat(value: string): value is OutputFormat {
|
export function isOutputFormat(value: string): value is OutputFormat {
|
||||||
return ['avif', 'jpeg', 'png', 'webp'].includes(value);
|
return ['avif', 'jpeg', 'jpg', 'png', 'webp'].includes(value);
|
||||||
}
|
}
|
||||||
|
|
||||||
export function isOutputFormatSupportsAlpha(value: string): value is OutputFormatSupportsAlpha {
|
export function isOutputFormatSupportsAlpha(value: string): value is OutputFormatSupportsAlpha {
|
||||||
|
@ -194,3 +195,109 @@ export function isHostedService(service: ImageService): service is ImageService
|
||||||
export function isSSRService(service: ImageService): service is SSRImageService {
|
export function isSSRService(service: ImageService): service is SSRImageService {
|
||||||
return 'transform' in service;
|
return 'transform' in service;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
export abstract class BaseSSRService implements SSRImageService {
|
||||||
|
async getImageAttributes(transform: TransformOptions) {
|
||||||
|
// strip off the known attributes
|
||||||
|
const { width, height, src, format, quality, aspectRatio, ...rest } = transform;
|
||||||
|
|
||||||
|
return {
|
||||||
|
...rest,
|
||||||
|
width: width,
|
||||||
|
height: height,
|
||||||
|
};
|
||||||
|
}
|
||||||
|
|
||||||
|
serializeTransform(transform: TransformOptions) {
|
||||||
|
const searchParams = new URLSearchParams();
|
||||||
|
|
||||||
|
if (transform.quality) {
|
||||||
|
searchParams.append('q', transform.quality.toString());
|
||||||
|
}
|
||||||
|
|
||||||
|
if (transform.format) {
|
||||||
|
searchParams.append('f', transform.format);
|
||||||
|
}
|
||||||
|
|
||||||
|
if (transform.width) {
|
||||||
|
searchParams.append('w', transform.width.toString());
|
||||||
|
}
|
||||||
|
|
||||||
|
if (transform.height) {
|
||||||
|
searchParams.append('h', transform.height.toString());
|
||||||
|
}
|
||||||
|
|
||||||
|
if (transform.aspectRatio) {
|
||||||
|
searchParams.append('ar', transform.aspectRatio.toString());
|
||||||
|
}
|
||||||
|
|
||||||
|
if (transform.fit) {
|
||||||
|
searchParams.append('fit', transform.fit);
|
||||||
|
}
|
||||||
|
|
||||||
|
if (transform.background) {
|
||||||
|
searchParams.append('bg', transform.background);
|
||||||
|
}
|
||||||
|
|
||||||
|
if (transform.position) {
|
||||||
|
searchParams.append('p', encodeURI(transform.position));
|
||||||
|
}
|
||||||
|
|
||||||
|
searchParams.append('href', transform.src);
|
||||||
|
|
||||||
|
return { searchParams };
|
||||||
|
}
|
||||||
|
|
||||||
|
parseTransform(searchParams: URLSearchParams) {
|
||||||
|
if (!searchParams.has('href')) {
|
||||||
|
return undefined;
|
||||||
|
}
|
||||||
|
|
||||||
|
let transform: TransformOptions = { src: searchParams.get('href')! };
|
||||||
|
|
||||||
|
if (searchParams.has('q')) {
|
||||||
|
transform.quality = parseInt(searchParams.get('q')!);
|
||||||
|
}
|
||||||
|
|
||||||
|
if (searchParams.has('f')) {
|
||||||
|
const format = searchParams.get('f')!;
|
||||||
|
if (isOutputFormat(format)) {
|
||||||
|
transform.format = format;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
if (searchParams.has('w')) {
|
||||||
|
transform.width = parseInt(searchParams.get('w')!);
|
||||||
|
}
|
||||||
|
|
||||||
|
if (searchParams.has('h')) {
|
||||||
|
transform.height = parseInt(searchParams.get('h')!);
|
||||||
|
}
|
||||||
|
|
||||||
|
if (searchParams.has('ar')) {
|
||||||
|
const ratio = searchParams.get('ar')!;
|
||||||
|
|
||||||
|
if (isAspectRatioString(ratio)) {
|
||||||
|
transform.aspectRatio = ratio;
|
||||||
|
} else {
|
||||||
|
transform.aspectRatio = parseFloat(ratio);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
if (searchParams.has('fit')) {
|
||||||
|
transform.fit = searchParams.get('fit') as typeof transform.fit;
|
||||||
|
}
|
||||||
|
|
||||||
|
if (searchParams.has('p')) {
|
||||||
|
transform.position = decodeURI(searchParams.get('p')!) as typeof transform.position;
|
||||||
|
}
|
||||||
|
|
||||||
|
if (searchParams.has('bg')) {
|
||||||
|
transform.background = searchParams.get('bg') as ColorDefinition;
|
||||||
|
}
|
||||||
|
|
||||||
|
return transform;
|
||||||
|
}
|
||||||
|
|
||||||
|
abstract transform(inputBuffer: Buffer, transform: TransformOptions): Promise<{ data: Buffer, format: OutputFormat }>;
|
||||||
|
}
|
||||||
|
|
|
@ -1,110 +1,9 @@
|
||||||
import sharp from 'sharp';
|
import sharp from 'sharp';
|
||||||
import {
|
import { BaseSSRService, isOutputFormatSupportsAlpha } from '../loaders/index.js';
|
||||||
ColorDefinition,
|
import type { SSRImageService } from '../loaders/index.js';
|
||||||
isAspectRatioString,
|
import type { OutputFormat, TransformOptions } from './index.js';
|
||||||
isOutputFormat,
|
|
||||||
isOutputFormatSupportsAlpha,
|
|
||||||
} from '../loaders/index.js';
|
|
||||||
import type { OutputFormat, SSRImageService, TransformOptions } from './index.js';
|
|
||||||
|
|
||||||
class SharpService implements SSRImageService {
|
|
||||||
async getImageAttributes(transform: TransformOptions) {
|
|
||||||
// strip off the known attributes
|
|
||||||
const { width, height, src, format, quality, aspectRatio, fit, position, background, ...rest } =
|
|
||||||
transform;
|
|
||||||
|
|
||||||
return {
|
|
||||||
...rest,
|
|
||||||
width: width,
|
|
||||||
height: height,
|
|
||||||
};
|
|
||||||
}
|
|
||||||
|
|
||||||
serializeTransform(transform: TransformOptions) {
|
|
||||||
const searchParams = new URLSearchParams();
|
|
||||||
|
|
||||||
if (transform.quality) {
|
|
||||||
searchParams.append('q', transform.quality.toString());
|
|
||||||
}
|
|
||||||
|
|
||||||
if (transform.format) {
|
|
||||||
searchParams.append('f', transform.format);
|
|
||||||
}
|
|
||||||
|
|
||||||
if (transform.width) {
|
|
||||||
searchParams.append('w', transform.width.toString());
|
|
||||||
}
|
|
||||||
|
|
||||||
if (transform.height) {
|
|
||||||
searchParams.append('h', transform.height.toString());
|
|
||||||
}
|
|
||||||
|
|
||||||
if (transform.aspectRatio) {
|
|
||||||
searchParams.append('ar', transform.aspectRatio.toString());
|
|
||||||
}
|
|
||||||
|
|
||||||
if (transform.fit) {
|
|
||||||
searchParams.append('fit', transform.fit);
|
|
||||||
}
|
|
||||||
|
|
||||||
if (transform.background) {
|
|
||||||
searchParams.append('bg', transform.background);
|
|
||||||
}
|
|
||||||
|
|
||||||
if (transform.position) {
|
|
||||||
searchParams.append('p', encodeURI(transform.position));
|
|
||||||
}
|
|
||||||
|
|
||||||
return { searchParams };
|
|
||||||
}
|
|
||||||
|
|
||||||
parseTransform(searchParams: URLSearchParams) {
|
|
||||||
let transform: TransformOptions = { src: searchParams.get('href')! };
|
|
||||||
|
|
||||||
if (searchParams.has('q')) {
|
|
||||||
transform.quality = parseInt(searchParams.get('q')!);
|
|
||||||
}
|
|
||||||
|
|
||||||
if (searchParams.has('f')) {
|
|
||||||
const format = searchParams.get('f')!;
|
|
||||||
if (isOutputFormat(format)) {
|
|
||||||
transform.format = format;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
if (searchParams.has('w')) {
|
|
||||||
transform.width = parseInt(searchParams.get('w')!);
|
|
||||||
}
|
|
||||||
|
|
||||||
if (searchParams.has('h')) {
|
|
||||||
transform.height = parseInt(searchParams.get('h')!);
|
|
||||||
}
|
|
||||||
|
|
||||||
if (searchParams.has('ar')) {
|
|
||||||
const ratio = searchParams.get('ar')!;
|
|
||||||
|
|
||||||
if (isAspectRatioString(ratio)) {
|
|
||||||
transform.aspectRatio = ratio;
|
|
||||||
} else {
|
|
||||||
transform.aspectRatio = parseFloat(ratio);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
if (searchParams.has('fit')) {
|
|
||||||
transform.fit = searchParams.get('fit') as typeof transform.fit;
|
|
||||||
}
|
|
||||||
|
|
||||||
if (searchParams.has('p')) {
|
|
||||||
transform.position = decodeURI(searchParams.get('p')!) as typeof transform.position;
|
|
||||||
}
|
|
||||||
|
|
||||||
if (searchParams.has('bg')) {
|
|
||||||
transform.background = searchParams.get('bg') as ColorDefinition | undefined;
|
|
||||||
}
|
|
||||||
|
|
||||||
return transform;
|
|
||||||
}
|
|
||||||
|
|
||||||
|
class SharpService extends BaseSSRService {
|
||||||
async transform(inputBuffer: Buffer, transform: TransformOptions) {
|
async transform(inputBuffer: Buffer, transform: TransformOptions) {
|
||||||
const sharpImage = sharp(inputBuffer, { failOnError: false, pages: -1 });
|
const sharpImage = sharp(inputBuffer, { failOnError: false, pages: -1 });
|
||||||
|
|
||||||
|
|
122
packages/integrations/image/src/loaders/squoosh.ts
Normal file
122
packages/integrations/image/src/loaders/squoosh.ts
Normal file
|
@ -0,0 +1,122 @@
|
||||||
|
// @ts-ignore
|
||||||
|
import { red } from 'kleur/colors';
|
||||||
|
import { BaseSSRService } from './index.js';
|
||||||
|
import { error } from '../utils/logger.js';
|
||||||
|
import { metadata } from '../utils/metadata.js';
|
||||||
|
import { isRemoteImage } from '../utils/paths.js';
|
||||||
|
import type { OutputFormat, TransformOptions } from './index.js';
|
||||||
|
import { processBuffer } from '../vendor/squoosh/image-pool.js';
|
||||||
|
import type { Operation } from '../vendor/squoosh/image.js';
|
||||||
|
|
||||||
|
class SquooshService extends BaseSSRService {
|
||||||
|
async processAvif(image: any, transform: TransformOptions) {
|
||||||
|
const encodeOptions = transform.quality
|
||||||
|
? { avif: { quality: transform.quality } }
|
||||||
|
: { avif: {} };
|
||||||
|
await image.encode(encodeOptions);
|
||||||
|
const data = await image.encodedWith.avif;
|
||||||
|
|
||||||
|
return {
|
||||||
|
data: data.binary,
|
||||||
|
format: 'avif' as OutputFormat,
|
||||||
|
};
|
||||||
|
}
|
||||||
|
|
||||||
|
async processJpeg(image: any, transform: TransformOptions) {
|
||||||
|
const encodeOptions = transform.quality
|
||||||
|
? { mozjpeg: { quality: transform.quality } }
|
||||||
|
: { mozjpeg: {} };
|
||||||
|
await image.encode(encodeOptions);
|
||||||
|
const data = await image.encodedWith.mozjpeg;
|
||||||
|
|
||||||
|
return {
|
||||||
|
data: data.binary,
|
||||||
|
format: 'jpeg' as OutputFormat,
|
||||||
|
};
|
||||||
|
}
|
||||||
|
|
||||||
|
async processPng(image: any, transform: TransformOptions) {
|
||||||
|
await image.encode({ oxipng: {} });
|
||||||
|
const data = await image.encodedWith.oxipng;
|
||||||
|
|
||||||
|
return {
|
||||||
|
data: data.binary,
|
||||||
|
format: 'png' as OutputFormat,
|
||||||
|
};
|
||||||
|
}
|
||||||
|
|
||||||
|
async processWebp(image: any, transform: TransformOptions) {
|
||||||
|
const encodeOptions = transform.quality
|
||||||
|
? { webp: { quality: transform.quality } }
|
||||||
|
: { webp: {} };
|
||||||
|
await image.encode(encodeOptions);
|
||||||
|
const data = await image.encodedWith.webp;
|
||||||
|
|
||||||
|
return {
|
||||||
|
data: data.binary,
|
||||||
|
format: 'webp' as OutputFormat,
|
||||||
|
};
|
||||||
|
}
|
||||||
|
|
||||||
|
async autorotate(transform: TransformOptions, inputBuffer: Buffer): Promise<Operation | undefined> {
|
||||||
|
// check EXIF orientation data and rotate the image if needed
|
||||||
|
try {
|
||||||
|
const meta = await metadata(transform.src, inputBuffer);
|
||||||
|
|
||||||
|
switch (meta?.orientation) {
|
||||||
|
case 3:
|
||||||
|
case 4:
|
||||||
|
return { type: 'rotate', numRotations: 2 };
|
||||||
|
case 5:
|
||||||
|
case 6:
|
||||||
|
return { type: 'rotate', numRotations: 1 };
|
||||||
|
case 7:
|
||||||
|
case 8:
|
||||||
|
return { type: 'rotate', numRotations: 3 };
|
||||||
|
}
|
||||||
|
} catch { }
|
||||||
|
}
|
||||||
|
|
||||||
|
async transform(inputBuffer: Buffer, transform: TransformOptions) {
|
||||||
|
const operations: Operation[] = [];
|
||||||
|
|
||||||
|
if (!isRemoteImage(transform.src)) {
|
||||||
|
const autorotate = await this.autorotate(transform, inputBuffer)
|
||||||
|
|
||||||
|
if (autorotate) {
|
||||||
|
operations.push(autorotate);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
if (transform.width || transform.height) {
|
||||||
|
const width = transform.width && Math.round(transform.width);
|
||||||
|
const height = transform.height && Math.round(transform.height);
|
||||||
|
|
||||||
|
operations.push({
|
||||||
|
type: 'resize',
|
||||||
|
width,
|
||||||
|
height,
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
if (!transform.format) {
|
||||||
|
error({
|
||||||
|
level: 'info',
|
||||||
|
prefix: false,
|
||||||
|
message: red(`Unknown image output: "${transform.format}" used for ${transform.src}`),
|
||||||
|
});
|
||||||
|
throw new Error(`Unknown image output: "${transform.format}" used for ${transform.src}`);
|
||||||
|
}
|
||||||
|
|
||||||
|
const data = await processBuffer(inputBuffer, operations, transform.format, transform.quality || 100);
|
||||||
|
|
||||||
|
return {
|
||||||
|
data: Buffer.from(data),
|
||||||
|
format: transform.format
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
const service = new SquooshService();
|
||||||
|
|
||||||
|
export default service;
|
14
packages/integrations/image/src/utils/execOnce.ts
Normal file
14
packages/integrations/image/src/utils/execOnce.ts
Normal file
|
@ -0,0 +1,14 @@
|
||||||
|
export default function execOnce<T extends (...args: any[]) => ReturnType<T>>(
|
||||||
|
fn: T
|
||||||
|
): T {
|
||||||
|
let used = false
|
||||||
|
let result: ReturnType<T>
|
||||||
|
|
||||||
|
return ((...args: any[]) => {
|
||||||
|
if (!used) {
|
||||||
|
used = true
|
||||||
|
result = fn(...args)
|
||||||
|
}
|
||||||
|
return result
|
||||||
|
}) as T
|
||||||
|
}
|
|
@ -1,23 +0,0 @@
|
||||||
import fs from 'node:fs/promises';
|
|
||||||
|
|
||||||
export async function loadLocalImage(src: string | URL) {
|
|
||||||
try {
|
|
||||||
return await fs.readFile(src);
|
|
||||||
} catch {
|
|
||||||
return undefined;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
export async function loadRemoteImage(src: string) {
|
|
||||||
try {
|
|
||||||
const res = await fetch(src);
|
|
||||||
|
|
||||||
if (!res.ok) {
|
|
||||||
return undefined;
|
|
||||||
}
|
|
||||||
|
|
||||||
return Buffer.from(await res.arrayBuffer());
|
|
||||||
} catch {
|
|
||||||
return undefined;
|
|
||||||
}
|
|
||||||
}
|
|
|
@ -4,8 +4,12 @@ import { fileURLToPath } from 'node:url';
|
||||||
import { InputFormat } from '../loaders/index.js';
|
import { InputFormat } from '../loaders/index.js';
|
||||||
import { ImageMetadata } from '../vite-plugin-astro-image.js';
|
import { ImageMetadata } from '../vite-plugin-astro-image.js';
|
||||||
|
|
||||||
export async function metadata(src: URL): Promise<ImageMetadata | undefined> {
|
export interface Metadata extends ImageMetadata {
|
||||||
const file = await fs.readFile(src);
|
orientation?: number;
|
||||||
|
}
|
||||||
|
|
||||||
|
export async function metadata(src: URL | string, data?: Buffer): Promise<Metadata | undefined> {
|
||||||
|
const file = data || await fs.readFile(src);
|
||||||
|
|
||||||
const { width, height, type, orientation } = await sizeOf(file);
|
const { width, height, type, orientation } = await sizeOf(file);
|
||||||
const isPortrait = (orientation || 0) >= 5;
|
const isPortrait = (orientation || 0) >= 5;
|
||||||
|
@ -19,5 +23,6 @@ export async function metadata(src: URL): Promise<ImageMetadata | undefined> {
|
||||||
width: isPortrait ? height : width,
|
width: isPortrait ? height : width,
|
||||||
height: isPortrait ? width : height,
|
height: isPortrait ? width : height,
|
||||||
format: type as InputFormat,
|
format: type as InputFormat,
|
||||||
|
orientation,
|
||||||
};
|
};
|
||||||
}
|
}
|
||||||
|
|
|
@ -10,14 +10,15 @@ function removeQueryString(src: string) {
|
||||||
return index > 0 ? src.substring(0, index) : src;
|
return index > 0 ? src.substring(0, index) : src;
|
||||||
}
|
}
|
||||||
|
|
||||||
function extname(src: string, format?: OutputFormat) {
|
export function extname(src: string) {
|
||||||
const index = src.lastIndexOf('.');
|
const base = basename(src);
|
||||||
|
const index = base.lastIndexOf('.');
|
||||||
|
|
||||||
if (index <= 0) {
|
if (index <= 0) {
|
||||||
return '';
|
return '';
|
||||||
}
|
}
|
||||||
|
|
||||||
return src.substring(index);
|
return src.substring(src.length - (base.length - index));
|
||||||
}
|
}
|
||||||
|
|
||||||
function removeExtname(src: string) {
|
function removeExtname(src: string) {
|
||||||
|
|
125
packages/integrations/image/src/utils/workerPool.ts
Normal file
125
packages/integrations/image/src/utils/workerPool.ts
Normal file
|
@ -0,0 +1,125 @@
|
||||||
|
/* tslint-disable ban-types */
|
||||||
|
import { Worker, parentPort } from 'worker_threads';
|
||||||
|
import { TransformStream } from 'web-streams-polyfill';
|
||||||
|
|
||||||
|
function uuid() {
|
||||||
|
return Array.from({ length: 16 }, () =>
|
||||||
|
Math.floor(Math.random() * 256).toString(16),
|
||||||
|
).join('');
|
||||||
|
}
|
||||||
|
|
||||||
|
interface Job<I> {
|
||||||
|
msg: I;
|
||||||
|
resolve: (result: any) => void;
|
||||||
|
reject: (reason: any) => void;
|
||||||
|
}
|
||||||
|
|
||||||
|
export default class WorkerPool<I, O> {
|
||||||
|
public numWorkers: number;
|
||||||
|
public jobQueue: TransformStream<Job<I>, Job<I>>;
|
||||||
|
public workerQueue: TransformStream<Worker, Worker>;
|
||||||
|
public done: Promise<void>;
|
||||||
|
|
||||||
|
constructor(numWorkers: number, workerFile: string) {
|
||||||
|
this.numWorkers = numWorkers;
|
||||||
|
this.jobQueue = new TransformStream();
|
||||||
|
this.workerQueue = new TransformStream();
|
||||||
|
|
||||||
|
const writer = this.workerQueue.writable.getWriter();
|
||||||
|
for (let i = 0; i < numWorkers; i++) {
|
||||||
|
writer.write(new Worker(workerFile));
|
||||||
|
}
|
||||||
|
writer.releaseLock();
|
||||||
|
|
||||||
|
this.done = this._readLoop();
|
||||||
|
}
|
||||||
|
|
||||||
|
async _readLoop() {
|
||||||
|
const reader = this.jobQueue.readable.getReader();
|
||||||
|
while (true) {
|
||||||
|
const { value, done } = await reader.read();
|
||||||
|
if (done) {
|
||||||
|
await this._terminateAll();
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
if (!value) {
|
||||||
|
throw new Error('Reader did not return any value');
|
||||||
|
}
|
||||||
|
|
||||||
|
const { msg, resolve, reject } = value;
|
||||||
|
const worker = await this._nextWorker();
|
||||||
|
this.jobPromise(worker, msg)
|
||||||
|
.then((result) => resolve(result))
|
||||||
|
.catch((reason) => reject(reason))
|
||||||
|
.finally(() => {
|
||||||
|
// Return the worker to the pool
|
||||||
|
const writer = this.workerQueue.writable.getWriter();
|
||||||
|
writer.write(worker);
|
||||||
|
writer.releaseLock();
|
||||||
|
});
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
async _nextWorker() {
|
||||||
|
const reader = this.workerQueue.readable.getReader();
|
||||||
|
const { value } = await reader.read();
|
||||||
|
reader.releaseLock();
|
||||||
|
if (!value) {
|
||||||
|
throw new Error('No worker left');
|
||||||
|
}
|
||||||
|
|
||||||
|
return value;
|
||||||
|
}
|
||||||
|
|
||||||
|
async _terminateAll() {
|
||||||
|
for (let n = 0; n < this.numWorkers; n++) {
|
||||||
|
const worker = await this._nextWorker();
|
||||||
|
worker.terminate();
|
||||||
|
}
|
||||||
|
this.workerQueue.writable.close();
|
||||||
|
}
|
||||||
|
|
||||||
|
async join() {
|
||||||
|
this.jobQueue.writable.getWriter().close();
|
||||||
|
await this.done;
|
||||||
|
}
|
||||||
|
|
||||||
|
dispatchJob(msg: I): Promise<O> {
|
||||||
|
return new Promise((resolve, reject) => {
|
||||||
|
const writer = this.jobQueue.writable.getWriter();
|
||||||
|
writer.write({ msg, resolve, reject });
|
||||||
|
writer.releaseLock();
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
private jobPromise(worker: Worker, msg: I) {
|
||||||
|
return new Promise((resolve, reject) => {
|
||||||
|
const id = uuid();
|
||||||
|
worker.postMessage({ msg, id });
|
||||||
|
worker.on('message', function f({ error, result, id: rid }) {
|
||||||
|
if (rid !== id) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
if (error) {
|
||||||
|
reject(error);
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
worker.off('message', f);
|
||||||
|
resolve(result);
|
||||||
|
});
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
static useThisThreadAsWorker<I, O>(cb: (msg: I) => O) {
|
||||||
|
parentPort!.on('message', async (data) => {
|
||||||
|
const { msg, id } = data;
|
||||||
|
try {
|
||||||
|
const result = await cb(msg);
|
||||||
|
parentPort!.postMessage({ result, id });
|
||||||
|
} catch (e: any) {
|
||||||
|
parentPort!.postMessage({ error: e.message, id });
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
|
}
|
245
packages/integrations/image/src/vendor/squoosh/LICENSE
vendored
Normal file
245
packages/integrations/image/src/vendor/squoosh/LICENSE
vendored
Normal file
|
@ -0,0 +1,245 @@
|
||||||
|
|
||||||
|
Skip to content
|
||||||
|
Pull requests
|
||||||
|
Issues
|
||||||
|
Marketplace
|
||||||
|
Explore
|
||||||
|
@tony-sull
|
||||||
|
vercel /
|
||||||
|
next.js
|
||||||
|
Public
|
||||||
|
|
||||||
|
Code
|
||||||
|
Issues 1.1k
|
||||||
|
Pull requests 216
|
||||||
|
Discussions
|
||||||
|
Actions
|
||||||
|
Security 8
|
||||||
|
|
||||||
|
Insights
|
||||||
|
|
||||||
|
next.js/packages/next/server/lib/squoosh/LICENSE
|
||||||
|
@timneutkens
|
||||||
|
timneutkens Move next-server directory files to server directory (#26756)
|
||||||
|
Latest commit 5b9ad8d on Jun 30, 2021
|
||||||
|
History
|
||||||
|
1 contributor
|
||||||
|
202 lines (169 sloc) 11.1 KB
|
||||||
|
|
||||||
|
Apache License
|
||||||
|
Version 2.0, January 2004
|
||||||
|
http://www.apache.org/licenses/
|
||||||
|
|
||||||
|
TERMS AND CONDITIONS FOR USE, REPRODUCTION, AND DISTRIBUTION
|
||||||
|
|
||||||
|
1. Definitions.
|
||||||
|
|
||||||
|
"License" shall mean the terms and conditions for use, reproduction,
|
||||||
|
and distribution as defined by Sections 1 through 9 of this document.
|
||||||
|
|
||||||
|
"Licensor" shall mean the copyright owner or entity authorized by
|
||||||
|
the copyright owner that is granting the License.
|
||||||
|
|
||||||
|
"Legal Entity" shall mean the union of the acting entity and all
|
||||||
|
other entities that control, are controlled by, or are under common
|
||||||
|
control with that entity. For the purposes of this definition,
|
||||||
|
"control" means (i) the power, direct or indirect, to cause the
|
||||||
|
direction or management of such entity, whether by contract or
|
||||||
|
otherwise, or (ii) ownership of fifty percent (50%) or more of the
|
||||||
|
outstanding shares, or (iii) beneficial ownership of such entity.
|
||||||
|
|
||||||
|
"You" (or "Your") shall mean an individual or Legal Entity
|
||||||
|
exercising permissions granted by this License.
|
||||||
|
|
||||||
|
"Source" form shall mean the preferred form for making modifications,
|
||||||
|
including but not limited to software source code, documentation
|
||||||
|
source, and configuration files.
|
||||||
|
|
||||||
|
"Object" form shall mean any form resulting from mechanical
|
||||||
|
transformation or translation of a Source form, including but
|
||||||
|
not limited to compiled object code, generated documentation,
|
||||||
|
and conversions to other media types.
|
||||||
|
|
||||||
|
"Work" shall mean the work of authorship, whether in Source or
|
||||||
|
Object form, made available under the License, as indicated by a
|
||||||
|
copyright notice that is included in or attached to the work
|
||||||
|
(an example is provided in the Appendix below).
|
||||||
|
|
||||||
|
"Derivative Works" shall mean any work, whether in Source or Object
|
||||||
|
form, that is based on (or derived from) the Work and for which the
|
||||||
|
editorial revisions, annotations, elaborations, or other modifications
|
||||||
|
represent, as a whole, an original work of authorship. For the purposes
|
||||||
|
of this License, Derivative Works shall not include works that remain
|
||||||
|
separable from, or merely link (or bind by name) to the interfaces of,
|
||||||
|
the Work and Derivative Works thereof.
|
||||||
|
|
||||||
|
"Contribution" shall mean any work of authorship, including
|
||||||
|
the original version of the Work and any modifications or additions
|
||||||
|
to that Work or Derivative Works thereof, that is intentionally
|
||||||
|
submitted to Licensor for inclusion in the Work by the copyright owner
|
||||||
|
or by an individual or Legal Entity authorized to submit on behalf of
|
||||||
|
the copyright owner. For the purposes of this definition, "submitted"
|
||||||
|
means any form of electronic, verbal, or written communication sent
|
||||||
|
to the Licensor or its representatives, including but not limited to
|
||||||
|
communication on electronic mailing lists, source code control systems,
|
||||||
|
and issue tracking systems that are managed by, or on behalf of, the
|
||||||
|
Licensor for the purpose of discussing and improving the Work, but
|
||||||
|
excluding communication that is conspicuously marked or otherwise
|
||||||
|
designated in writing by the copyright owner as "Not a Contribution."
|
||||||
|
|
||||||
|
"Contributor" shall mean Licensor and any individual or Legal Entity
|
||||||
|
on behalf of whom a Contribution has been received by Licensor and
|
||||||
|
subsequently incorporated within the Work.
|
||||||
|
|
||||||
|
2. Grant of Copyright License. Subject to the terms and conditions of
|
||||||
|
this License, each Contributor hereby grants to You a perpetual,
|
||||||
|
worldwide, non-exclusive, no-charge, royalty-free, irrevocable
|
||||||
|
copyright license to reproduce, prepare Derivative Works of,
|
||||||
|
publicly display, publicly perform, sublicense, and distribute the
|
||||||
|
Work and such Derivative Works in Source or Object form.
|
||||||
|
|
||||||
|
3. Grant of Patent License. Subject to the terms and conditions of
|
||||||
|
this License, each Contributor hereby grants to You a perpetual,
|
||||||
|
worldwide, non-exclusive, no-charge, royalty-free, irrevocable
|
||||||
|
(except as stated in this section) patent license to make, have made,
|
||||||
|
use, offer to sell, sell, import, and otherwise transfer the Work,
|
||||||
|
where such license applies only to those patent claims licensable
|
||||||
|
by such Contributor that are necessarily infringed by their
|
||||||
|
Contribution(s) alone or by combination of their Contribution(s)
|
||||||
|
with the Work to which such Contribution(s) was submitted. If You
|
||||||
|
institute patent litigation against any entity (including a
|
||||||
|
cross-claim or counterclaim in a lawsuit) alleging that the Work
|
||||||
|
or a Contribution incorporated within the Work constitutes direct
|
||||||
|
or contributory patent infringement, then any patent licenses
|
||||||
|
granted to You under this License for that Work shall terminate
|
||||||
|
as of the date such litigation is filed.
|
||||||
|
|
||||||
|
4. Redistribution. You may reproduce and distribute copies of the
|
||||||
|
Work or Derivative Works thereof in any medium, with or without
|
||||||
|
modifications, and in Source or Object form, provided that You
|
||||||
|
meet the following conditions:
|
||||||
|
|
||||||
|
(a) You must give any other recipients of the Work or
|
||||||
|
Derivative Works a copy of this License; and
|
||||||
|
|
||||||
|
(b) You must cause any modified files to carry prominent notices
|
||||||
|
stating that You changed the files; and
|
||||||
|
|
||||||
|
(c) You must retain, in the Source form of any Derivative Works
|
||||||
|
that You distribute, all copyright, patent, trademark, and
|
||||||
|
attribution notices from the Source form of the Work,
|
||||||
|
excluding those notices that do not pertain to any part of
|
||||||
|
the Derivative Works; and
|
||||||
|
|
||||||
|
(d) If the Work includes a "NOTICE" text file as part of its
|
||||||
|
distribution, then any Derivative Works that You distribute must
|
||||||
|
include a readable copy of the attribution notices contained
|
||||||
|
within such NOTICE file, excluding those notices that do not
|
||||||
|
pertain to any part of the Derivative Works, in at least one
|
||||||
|
of the following places: within a NOTICE text file distributed
|
||||||
|
as part of the Derivative Works; within the Source form or
|
||||||
|
documentation, if provided along with the Derivative Works; or,
|
||||||
|
within a display generated by the Derivative Works, if and
|
||||||
|
wherever such third-party notices normally appear. The contents
|
||||||
|
of the NOTICE file are for informational purposes only and
|
||||||
|
do not modify the License. You may add Your own attribution
|
||||||
|
notices within Derivative Works that You distribute, alongside
|
||||||
|
or as an addendum to the NOTICE text from the Work, provided
|
||||||
|
that such additional attribution notices cannot be construed
|
||||||
|
as modifying the License.
|
||||||
|
|
||||||
|
You may add Your own copyright statement to Your modifications and
|
||||||
|
may provide additional or different license terms and conditions
|
||||||
|
for use, reproduction, or distribution of Your modifications, or
|
||||||
|
for any such Derivative Works as a whole, provided Your use,
|
||||||
|
reproduction, and distribution of the Work otherwise complies with
|
||||||
|
the conditions stated in this License.
|
||||||
|
|
||||||
|
5. Submission of Contributions. Unless You explicitly state otherwise,
|
||||||
|
any Contribution intentionally submitted for inclusion in the Work
|
||||||
|
by You to the Licensor shall be under the terms and conditions of
|
||||||
|
this License, without any additional terms or conditions.
|
||||||
|
Notwithstanding the above, nothing herein shall supersede or modify
|
||||||
|
the terms of any separate license agreement you may have executed
|
||||||
|
with Licensor regarding such Contributions.
|
||||||
|
|
||||||
|
6. Trademarks. This License does not grant permission to use the trade
|
||||||
|
names, trademarks, service marks, or product names of the Licensor,
|
||||||
|
except as required for reasonable and customary use in describing the
|
||||||
|
origin of the Work and reproducing the content of the NOTICE file.
|
||||||
|
|
||||||
|
7. Disclaimer of Warranty. Unless required by applicable law or
|
||||||
|
agreed to in writing, Licensor provides the Work (and each
|
||||||
|
Contributor provides its Contributions) on an "AS IS" BASIS,
|
||||||
|
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or
|
||||||
|
implied, including, without limitation, any warranties or conditions
|
||||||
|
of TITLE, NON-INFRINGEMENT, MERCHANTABILITY, or FITNESS FOR A
|
||||||
|
PARTICULAR PURPOSE. You are solely responsible for determining the
|
||||||
|
appropriateness of using or redistributing the Work and assume any
|
||||||
|
risks associated with Your exercise of permissions under this License.
|
||||||
|
|
||||||
|
8. Limitation of Liability. In no event and under no legal theory,
|
||||||
|
whether in tort (including negligence), contract, or otherwise,
|
||||||
|
unless required by applicable law (such as deliberate and grossly
|
||||||
|
negligent acts) or agreed to in writing, shall any Contributor be
|
||||||
|
liable to You for damages, including any direct, indirect, special,
|
||||||
|
incidental, or consequential damages of any character arising as a
|
||||||
|
result of this License or out of the use or inability to use the
|
||||||
|
Work (including but not limited to damages for loss of goodwill,
|
||||||
|
work stoppage, computer failure or malfunction, or any and all
|
||||||
|
other commercial damages or losses), even if such Contributor
|
||||||
|
has been advised of the possibility of such damages.
|
||||||
|
|
||||||
|
9. Accepting Warranty or Additional Liability. While redistributing
|
||||||
|
the Work or Derivative Works thereof, You may choose to offer,
|
||||||
|
and charge a fee for, acceptance of support, warranty, indemnity,
|
||||||
|
or other liability obligations and/or rights consistent with this
|
||||||
|
License. However, in accepting such obligations, You may act only
|
||||||
|
on Your own behalf and on Your sole responsibility, not on behalf
|
||||||
|
of any other Contributor, and only if You agree to indemnify,
|
||||||
|
defend, and hold each Contributor harmless for any liability
|
||||||
|
incurred by, or claims asserted against, such Contributor by reason
|
||||||
|
of your accepting any such warranty or additional liability.
|
||||||
|
|
||||||
|
END OF TERMS AND CONDITIONS
|
||||||
|
|
||||||
|
APPENDIX: How to apply the Apache License to your work.
|
||||||
|
|
||||||
|
To apply the Apache License to your work, attach the following
|
||||||
|
boilerplate notice, with the fields enclosed by brackets "[]"
|
||||||
|
replaced with your own identifying information. (Don't include
|
||||||
|
the brackets!) The text should be enclosed in the appropriate
|
||||||
|
comment syntax for the file format. We also recommend that a
|
||||||
|
file or class name and description of purpose be included on the
|
||||||
|
same "printed page" as the copyright notice for easier
|
||||||
|
identification within third-party archives.
|
||||||
|
|
||||||
|
Copyright [yyyy] [name of copyright owner]
|
||||||
|
|
||||||
|
Licensed under the Apache License, Version 2.0 (the "License");
|
||||||
|
you may not use this file except in compliance with the License.
|
||||||
|
You may obtain a copy of the License at
|
||||||
|
|
||||||
|
http://www.apache.org/licenses/LICENSE-2.0
|
||||||
|
|
||||||
|
Unless required by applicable law or agreed to in writing, software
|
||||||
|
distributed under the License is distributed on an "AS IS" BASIS,
|
||||||
|
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
||||||
|
See the License for the specific language governing permissions and
|
||||||
|
limitations under the License.
|
||||||
|
Footer
|
||||||
|
© 2022 GitHub, Inc.
|
||||||
|
Footer navigation
|
||||||
|
|
||||||
|
Terms
|
||||||
|
Privacy
|
||||||
|
Security
|
||||||
|
Status
|
||||||
|
Docs
|
||||||
|
Contact GitHub
|
||||||
|
Pricing
|
||||||
|
API
|
||||||
|
Training
|
||||||
|
Blog
|
||||||
|
About
|
||||||
|
|
32
packages/integrations/image/src/vendor/squoosh/avif/avif_enc.d.ts
vendored
Normal file
32
packages/integrations/image/src/vendor/squoosh/avif/avif_enc.d.ts
vendored
Normal file
|
@ -0,0 +1,32 @@
|
||||||
|
// eslint-disable-next-line no-shadow
|
||||||
|
export const enum AVIFTune {
|
||||||
|
auto,
|
||||||
|
psnr,
|
||||||
|
ssim,
|
||||||
|
}
|
||||||
|
|
||||||
|
export interface EncodeOptions {
|
||||||
|
cqLevel: number
|
||||||
|
denoiseLevel: number
|
||||||
|
cqAlphaLevel: number
|
||||||
|
tileRowsLog2: number
|
||||||
|
tileColsLog2: number
|
||||||
|
speed: number
|
||||||
|
subsample: number
|
||||||
|
chromaDeltaQ: boolean
|
||||||
|
sharpness: number
|
||||||
|
tune: AVIFTune
|
||||||
|
}
|
||||||
|
|
||||||
|
export interface AVIFModule extends EmscriptenWasm.Module {
|
||||||
|
encode(
|
||||||
|
data: BufferSource,
|
||||||
|
width: number,
|
||||||
|
height: number,
|
||||||
|
options: EncodeOptions
|
||||||
|
): Uint8Array
|
||||||
|
}
|
||||||
|
|
||||||
|
declare var moduleFactory: EmscriptenWasm.ModuleFactory<AVIFModule>
|
||||||
|
|
||||||
|
export default moduleFactory
|
1799
packages/integrations/image/src/vendor/squoosh/avif/avif_node_dec.ts
vendored
Normal file
1799
packages/integrations/image/src/vendor/squoosh/avif/avif_node_dec.ts
vendored
Normal file
File diff suppressed because it is too large
Load diff
BIN
packages/integrations/image/src/vendor/squoosh/avif/avif_node_dec.wasm
vendored
Normal file
BIN
packages/integrations/image/src/vendor/squoosh/avif/avif_node_dec.wasm
vendored
Normal file
Binary file not shown.
2066
packages/integrations/image/src/vendor/squoosh/avif/avif_node_enc.ts
vendored
Normal file
2066
packages/integrations/image/src/vendor/squoosh/avif/avif_node_enc.ts
vendored
Normal file
File diff suppressed because it is too large
Load diff
BIN
packages/integrations/image/src/vendor/squoosh/avif/avif_node_enc.wasm
vendored
Normal file
BIN
packages/integrations/image/src/vendor/squoosh/avif/avif_node_enc.wasm
vendored
Normal file
Binary file not shown.
373
packages/integrations/image/src/vendor/squoosh/codecs.ts
vendored
Normal file
373
packages/integrations/image/src/vendor/squoosh/codecs.ts
vendored
Normal file
|
@ -0,0 +1,373 @@
|
||||||
|
import { promises as fsp } from 'node:fs'
|
||||||
|
import { instantiateEmscriptenWasm, pathify } from './emscripten-utils.js'
|
||||||
|
|
||||||
|
interface DecodeModule extends EmscriptenWasm.Module {
|
||||||
|
decode: (data: Uint8Array) => ImageData
|
||||||
|
}
|
||||||
|
|
||||||
|
type DecodeModuleFactory = EmscriptenWasm.ModuleFactory<DecodeModule>
|
||||||
|
|
||||||
|
interface RotateModuleInstance {
|
||||||
|
exports: {
|
||||||
|
memory: WebAssembly.Memory
|
||||||
|
rotate(width: number, height: number, rotate: number): void
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
interface ResizeWithAspectParams {
|
||||||
|
input_width: number
|
||||||
|
input_height: number
|
||||||
|
target_width?: number
|
||||||
|
target_height?: number
|
||||||
|
}
|
||||||
|
|
||||||
|
export interface ResizeOptions {
|
||||||
|
width?: number
|
||||||
|
height?: number
|
||||||
|
method: 'triangle' | 'catrom' | 'mitchell' | 'lanczos3'
|
||||||
|
premultiply: boolean
|
||||||
|
linearRGB: boolean
|
||||||
|
}
|
||||||
|
|
||||||
|
export interface RotateOptions {
|
||||||
|
numRotations: number
|
||||||
|
}
|
||||||
|
|
||||||
|
// MozJPEG
|
||||||
|
import type { MozJPEGModule as MozJPEGEncodeModule } from './mozjpeg/mozjpeg_enc'
|
||||||
|
// @ts-ignore
|
||||||
|
import mozEnc from './mozjpeg/mozjpeg_node_enc.js'
|
||||||
|
const mozEncWasm = new URL('./mozjpeg/mozjpeg_node_enc.wasm', import.meta.url)
|
||||||
|
// @ts-ignore
|
||||||
|
import mozDec from './mozjpeg/mozjpeg_node_dec.js'
|
||||||
|
const mozDecWasm = new URL('./mozjpeg/mozjpeg_node_dec.wasm', import.meta.url)
|
||||||
|
|
||||||
|
// WebP
|
||||||
|
import type { WebPModule as WebPEncodeModule } from './webp/webp_enc'
|
||||||
|
// @ts-ignore
|
||||||
|
import webpEnc from './webp/webp_node_enc.js'
|
||||||
|
const webpEncWasm = new URL('./webp/webp_node_enc.wasm', import.meta.url)
|
||||||
|
// @ts-ignore
|
||||||
|
import webpDec from './webp/webp_node_dec.js'
|
||||||
|
const webpDecWasm = new URL('./webp/webp_node_dec.wasm', import.meta.url)
|
||||||
|
|
||||||
|
// AVIF
|
||||||
|
import type { AVIFModule as AVIFEncodeModule } from './avif/avif_enc'
|
||||||
|
// @ts-ignore
|
||||||
|
import avifEnc from './avif/avif_node_enc.js'
|
||||||
|
const avifEncWasm = new URL('./avif/avif_node_enc.wasm', import.meta.url)
|
||||||
|
// @ts-ignore
|
||||||
|
import avifDec from './avif/avif_node_dec.js'
|
||||||
|
const avifDecWasm = new URL('./avif/avif_node_dec.wasm', import.meta.url)
|
||||||
|
|
||||||
|
// PNG
|
||||||
|
// @ts-ignore
|
||||||
|
import * as pngEncDec from './png/squoosh_png.js'
|
||||||
|
const pngEncDecWasm = new URL('./png/squoosh_png_bg.wasm', import.meta.url)
|
||||||
|
const pngEncDecInit = () =>
|
||||||
|
pngEncDec.default(fsp.readFile(pathify(pngEncDecWasm.toString())))
|
||||||
|
|
||||||
|
// OxiPNG
|
||||||
|
// @ts-ignore
|
||||||
|
import * as oxipng from './png/squoosh_oxipng.js'
|
||||||
|
const oxipngWasm = new URL('./png/squoosh_oxipng_bg.wasm', import.meta.url)
|
||||||
|
const oxipngInit = () => oxipng.default(fsp.readFile(pathify(oxipngWasm.toString())))
|
||||||
|
|
||||||
|
// Resize
|
||||||
|
// @ts-ignore
|
||||||
|
import * as resize from './resize/squoosh_resize.js'
|
||||||
|
const resizeWasm = new URL('./resize/squoosh_resize_bg.wasm', import.meta.url)
|
||||||
|
const resizeInit = () => resize.default(fsp.readFile(pathify(resizeWasm.toString())))
|
||||||
|
|
||||||
|
// rotate
|
||||||
|
const rotateWasm = new URL('./rotate/rotate.wasm', import.meta.url)
|
||||||
|
|
||||||
|
// Our decoders currently rely on a `ImageData` global.
|
||||||
|
import ImageData from './image_data.js';
|
||||||
|
(global as any).ImageData = ImageData
|
||||||
|
|
||||||
|
function resizeNameToIndex(
|
||||||
|
name: 'triangle' | 'catrom' | 'mitchell' | 'lanczos3'
|
||||||
|
) {
|
||||||
|
switch (name) {
|
||||||
|
case 'triangle':
|
||||||
|
return 0
|
||||||
|
case 'catrom':
|
||||||
|
return 1
|
||||||
|
case 'mitchell':
|
||||||
|
return 2
|
||||||
|
case 'lanczos3':
|
||||||
|
return 3
|
||||||
|
default:
|
||||||
|
throw Error(`Unknown resize algorithm "${name}"`)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
function resizeWithAspect({
|
||||||
|
input_width,
|
||||||
|
input_height,
|
||||||
|
target_width,
|
||||||
|
target_height,
|
||||||
|
}: ResizeWithAspectParams): { width: number; height: number } {
|
||||||
|
if (!target_width && !target_height) {
|
||||||
|
throw Error('Need to specify at least width or height when resizing')
|
||||||
|
}
|
||||||
|
|
||||||
|
if (target_width && target_height) {
|
||||||
|
return { width: target_width, height: target_height }
|
||||||
|
}
|
||||||
|
|
||||||
|
if (!target_width) {
|
||||||
|
return {
|
||||||
|
width: Math.round((input_width / input_height) * target_height!),
|
||||||
|
height: target_height!,
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
return {
|
||||||
|
width: target_width,
|
||||||
|
height: Math.round((input_height / input_width) * target_width),
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
export const preprocessors = {
|
||||||
|
resize: {
|
||||||
|
name: 'Resize',
|
||||||
|
description: 'Resize the image before compressing',
|
||||||
|
instantiate: async () => {
|
||||||
|
await resizeInit()
|
||||||
|
return (
|
||||||
|
buffer: Uint8Array,
|
||||||
|
input_width: number,
|
||||||
|
input_height: number,
|
||||||
|
{ width, height, method, premultiply, linearRGB }: ResizeOptions
|
||||||
|
) => {
|
||||||
|
;({ width, height } = resizeWithAspect({
|
||||||
|
input_width,
|
||||||
|
input_height,
|
||||||
|
target_width: width,
|
||||||
|
target_height: height,
|
||||||
|
}))
|
||||||
|
const imageData = new ImageData(
|
||||||
|
resize.resize(
|
||||||
|
buffer,
|
||||||
|
input_width,
|
||||||
|
input_height,
|
||||||
|
width,
|
||||||
|
height,
|
||||||
|
resizeNameToIndex(method),
|
||||||
|
premultiply,
|
||||||
|
linearRGB
|
||||||
|
),
|
||||||
|
width,
|
||||||
|
height
|
||||||
|
)
|
||||||
|
resize.cleanup()
|
||||||
|
return imageData
|
||||||
|
}
|
||||||
|
},
|
||||||
|
defaultOptions: {
|
||||||
|
method: 'lanczos3',
|
||||||
|
fitMethod: 'stretch',
|
||||||
|
premultiply: true,
|
||||||
|
linearRGB: true,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
rotate: {
|
||||||
|
name: 'Rotate',
|
||||||
|
description: 'Rotate image',
|
||||||
|
instantiate: async () => {
|
||||||
|
return async (
|
||||||
|
buffer: Uint8Array,
|
||||||
|
width: number,
|
||||||
|
height: number,
|
||||||
|
{ numRotations }: RotateOptions
|
||||||
|
) => {
|
||||||
|
const degrees = (numRotations * 90) % 360
|
||||||
|
const sameDimensions = degrees === 0 || degrees === 180
|
||||||
|
const size = width * height * 4
|
||||||
|
const instance = (
|
||||||
|
await WebAssembly.instantiate(await fsp.readFile(pathify(rotateWasm.toString())))
|
||||||
|
).instance as RotateModuleInstance
|
||||||
|
const { memory } = instance.exports
|
||||||
|
const additionalPagesNeeded = Math.ceil(
|
||||||
|
(size * 2 - memory.buffer.byteLength + 8) / (64 * 1024)
|
||||||
|
)
|
||||||
|
if (additionalPagesNeeded > 0) {
|
||||||
|
memory.grow(additionalPagesNeeded)
|
||||||
|
}
|
||||||
|
const view = new Uint8ClampedArray(memory.buffer)
|
||||||
|
view.set(buffer, 8)
|
||||||
|
instance.exports.rotate(width, height, degrees)
|
||||||
|
return new ImageData(
|
||||||
|
view.slice(size + 8, size * 2 + 8),
|
||||||
|
sameDimensions ? width : height,
|
||||||
|
sameDimensions ? height : width
|
||||||
|
)
|
||||||
|
}
|
||||||
|
},
|
||||||
|
defaultOptions: {
|
||||||
|
numRotations: 0,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
} as const
|
||||||
|
|
||||||
|
export const codecs = {
|
||||||
|
mozjpeg: {
|
||||||
|
name: 'MozJPEG',
|
||||||
|
extension: 'jpg',
|
||||||
|
detectors: [/^\xFF\xD8\xFF/],
|
||||||
|
dec: () =>
|
||||||
|
instantiateEmscriptenWasm(mozDec as DecodeModuleFactory, mozDecWasm.toString()),
|
||||||
|
enc: () =>
|
||||||
|
instantiateEmscriptenWasm(
|
||||||
|
mozEnc as EmscriptenWasm.ModuleFactory<MozJPEGEncodeModule>,
|
||||||
|
mozEncWasm.toString()
|
||||||
|
),
|
||||||
|
defaultEncoderOptions: {
|
||||||
|
quality: 75,
|
||||||
|
baseline: false,
|
||||||
|
arithmetic: false,
|
||||||
|
progressive: true,
|
||||||
|
optimize_coding: true,
|
||||||
|
smoothing: 0,
|
||||||
|
color_space: 3 /*YCbCr*/,
|
||||||
|
quant_table: 3,
|
||||||
|
trellis_multipass: false,
|
||||||
|
trellis_opt_zero: false,
|
||||||
|
trellis_opt_table: false,
|
||||||
|
trellis_loops: 1,
|
||||||
|
auto_subsample: true,
|
||||||
|
chroma_subsample: 2,
|
||||||
|
separate_chroma_quality: false,
|
||||||
|
chroma_quality: 75,
|
||||||
|
},
|
||||||
|
autoOptimize: {
|
||||||
|
option: 'quality',
|
||||||
|
min: 0,
|
||||||
|
max: 100,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
webp: {
|
||||||
|
name: 'WebP',
|
||||||
|
extension: 'webp',
|
||||||
|
detectors: [/^RIFF....WEBPVP8[LX ]/s],
|
||||||
|
dec: () =>
|
||||||
|
instantiateEmscriptenWasm(webpDec as DecodeModuleFactory, webpDecWasm.toString()),
|
||||||
|
enc: () =>
|
||||||
|
instantiateEmscriptenWasm(
|
||||||
|
webpEnc as EmscriptenWasm.ModuleFactory<WebPEncodeModule>,
|
||||||
|
webpEncWasm.toString()
|
||||||
|
),
|
||||||
|
defaultEncoderOptions: {
|
||||||
|
quality: 75,
|
||||||
|
target_size: 0,
|
||||||
|
target_PSNR: 0,
|
||||||
|
method: 4,
|
||||||
|
sns_strength: 50,
|
||||||
|
filter_strength: 60,
|
||||||
|
filter_sharpness: 0,
|
||||||
|
filter_type: 1,
|
||||||
|
partitions: 0,
|
||||||
|
segments: 4,
|
||||||
|
pass: 1,
|
||||||
|
show_compressed: 0,
|
||||||
|
preprocessing: 0,
|
||||||
|
autofilter: 0,
|
||||||
|
partition_limit: 0,
|
||||||
|
alpha_compression: 1,
|
||||||
|
alpha_filtering: 1,
|
||||||
|
alpha_quality: 100,
|
||||||
|
lossless: 0,
|
||||||
|
exact: 0,
|
||||||
|
image_hint: 0,
|
||||||
|
emulate_jpeg_size: 0,
|
||||||
|
thread_level: 0,
|
||||||
|
low_memory: 0,
|
||||||
|
near_lossless: 100,
|
||||||
|
use_delta_palette: 0,
|
||||||
|
use_sharp_yuv: 0,
|
||||||
|
},
|
||||||
|
autoOptimize: {
|
||||||
|
option: 'quality',
|
||||||
|
min: 0,
|
||||||
|
max: 100,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
avif: {
|
||||||
|
name: 'AVIF',
|
||||||
|
extension: 'avif',
|
||||||
|
// eslint-disable-next-line no-control-regex
|
||||||
|
detectors: [/^\x00\x00\x00 ftypavif\x00\x00\x00\x00/],
|
||||||
|
dec: () =>
|
||||||
|
instantiateEmscriptenWasm(avifDec as DecodeModuleFactory, avifDecWasm.toString()),
|
||||||
|
enc: async () => {
|
||||||
|
return instantiateEmscriptenWasm(
|
||||||
|
avifEnc as EmscriptenWasm.ModuleFactory<AVIFEncodeModule>,
|
||||||
|
avifEncWasm.toString()
|
||||||
|
)
|
||||||
|
},
|
||||||
|
defaultEncoderOptions: {
|
||||||
|
cqLevel: 33,
|
||||||
|
cqAlphaLevel: -1,
|
||||||
|
denoiseLevel: 0,
|
||||||
|
tileColsLog2: 0,
|
||||||
|
tileRowsLog2: 0,
|
||||||
|
speed: 6,
|
||||||
|
subsample: 1,
|
||||||
|
chromaDeltaQ: false,
|
||||||
|
sharpness: 0,
|
||||||
|
tune: 0 /* AVIFTune.auto */,
|
||||||
|
},
|
||||||
|
autoOptimize: {
|
||||||
|
option: 'cqLevel',
|
||||||
|
min: 62,
|
||||||
|
max: 0,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
oxipng: {
|
||||||
|
name: 'OxiPNG',
|
||||||
|
extension: 'png',
|
||||||
|
// eslint-disable-next-line no-control-regex
|
||||||
|
detectors: [/^\x89PNG\x0D\x0A\x1A\x0A/],
|
||||||
|
dec: async () => {
|
||||||
|
await pngEncDecInit()
|
||||||
|
return {
|
||||||
|
decode: (buffer: Buffer | Uint8Array) => {
|
||||||
|
const imageData = pngEncDec.decode(buffer)
|
||||||
|
pngEncDec.cleanup()
|
||||||
|
return imageData
|
||||||
|
},
|
||||||
|
}
|
||||||
|
},
|
||||||
|
enc: async () => {
|
||||||
|
await pngEncDecInit()
|
||||||
|
await oxipngInit()
|
||||||
|
return {
|
||||||
|
encode: (
|
||||||
|
buffer: Uint8ClampedArray | ArrayBuffer,
|
||||||
|
width: number,
|
||||||
|
height: number,
|
||||||
|
opts: { level: number }
|
||||||
|
) => {
|
||||||
|
const simplePng = pngEncDec.encode(
|
||||||
|
new Uint8Array(buffer),
|
||||||
|
width,
|
||||||
|
height
|
||||||
|
)
|
||||||
|
const imageData = oxipng.optimise(simplePng, opts.level, false)
|
||||||
|
oxipng.cleanup()
|
||||||
|
return imageData
|
||||||
|
},
|
||||||
|
}
|
||||||
|
},
|
||||||
|
defaultEncoderOptions: {
|
||||||
|
level: 2,
|
||||||
|
},
|
||||||
|
autoOptimize: {
|
||||||
|
option: 'level',
|
||||||
|
min: 6,
|
||||||
|
max: 1,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
} as const
|
24
packages/integrations/image/src/vendor/squoosh/copy-wasm.ts
vendored
Normal file
24
packages/integrations/image/src/vendor/squoosh/copy-wasm.ts
vendored
Normal file
|
@ -0,0 +1,24 @@
|
||||||
|
import fs from 'node:fs/promises';
|
||||||
|
import path from 'node:path';
|
||||||
|
import { fileURLToPath } from 'node:url';
|
||||||
|
|
||||||
|
export async function copyWasmFiles(dir: URL) {
|
||||||
|
const src = new URL('./', import.meta.url);
|
||||||
|
await copyDir(fileURLToPath(src), fileURLToPath(dir));
|
||||||
|
}
|
||||||
|
|
||||||
|
async function copyDir(src: string, dest: string) {
|
||||||
|
const itemNames = await fs.readdir(src);
|
||||||
|
await Promise.all(itemNames.map(async (srcName) => {
|
||||||
|
const srcPath = path.join(src, srcName);
|
||||||
|
const destPath = path.join(dest, srcName);
|
||||||
|
const s = await fs.stat(srcPath);
|
||||||
|
if (s.isFile() && /.wasm$/.test(srcPath)) {
|
||||||
|
await fs.mkdir(path.dirname(destPath), { recursive: true });
|
||||||
|
await fs.copyFile(srcPath, destPath);
|
||||||
|
}
|
||||||
|
else if (s.isDirectory()) {
|
||||||
|
await copyDir(srcPath, destPath);
|
||||||
|
}
|
||||||
|
}));
|
||||||
|
}
|
121
packages/integrations/image/src/vendor/squoosh/emscripten-types.d.ts
vendored
Normal file
121
packages/integrations/image/src/vendor/squoosh/emscripten-types.d.ts
vendored
Normal file
|
@ -0,0 +1,121 @@
|
||||||
|
// These types roughly model the object that the JS files generated by Emscripten define. Copied from https://github.com/DefinitelyTyped/DefinitelyTyped/blob/master/types/emscripten/index.d.ts and turned into a type definition rather than a global to support our way of using Emscripten.
|
||||||
|
declare namespace EmscriptenWasm {
|
||||||
|
type ModuleFactory<T extends Module = Module> = (
|
||||||
|
moduleOverrides?: ModuleOpts
|
||||||
|
) => Promise<T>
|
||||||
|
|
||||||
|
type EnvironmentType = 'WEB' | 'NODE' | 'SHELL' | 'WORKER'
|
||||||
|
|
||||||
|
// Options object for modularized Emscripten files. Shoe-horned by @surma.
|
||||||
|
// FIXME: This an incomplete definition!
|
||||||
|
interface ModuleOpts {
|
||||||
|
mainScriptUrlOrBlob?: string
|
||||||
|
noInitialRun?: boolean
|
||||||
|
locateFile?: (url: string) => string
|
||||||
|
onRuntimeInitialized?: () => void
|
||||||
|
}
|
||||||
|
|
||||||
|
interface Module {
|
||||||
|
print(str: string): void
|
||||||
|
printErr(str: string): void
|
||||||
|
arguments: string[]
|
||||||
|
environment: EnvironmentType
|
||||||
|
preInit: { (): void }[]
|
||||||
|
preRun: { (): void }[]
|
||||||
|
postRun: { (): void }[]
|
||||||
|
preinitializedWebGLContext: WebGLRenderingContext
|
||||||
|
noInitialRun: boolean
|
||||||
|
noExitRuntime: boolean
|
||||||
|
logReadFiles: boolean
|
||||||
|
filePackagePrefixURL: string
|
||||||
|
wasmBinary: ArrayBuffer
|
||||||
|
|
||||||
|
destroy(object: object): void
|
||||||
|
getPreloadedPackage(
|
||||||
|
remotePackageName: string,
|
||||||
|
remotePackageSize: number
|
||||||
|
): ArrayBuffer
|
||||||
|
instantiateWasm(
|
||||||
|
imports: WebAssembly.Imports,
|
||||||
|
successCallback: (module: WebAssembly.Module) => void
|
||||||
|
): WebAssembly.Exports
|
||||||
|
locateFile(url: string): string
|
||||||
|
onCustomMessage(event: MessageEvent): void
|
||||||
|
|
||||||
|
Runtime: any
|
||||||
|
|
||||||
|
ccall(
|
||||||
|
ident: string,
|
||||||
|
returnType: string | null,
|
||||||
|
argTypes: string[],
|
||||||
|
args: any[]
|
||||||
|
): any
|
||||||
|
cwrap(ident: string, returnType: string | null, argTypes: string[]): any
|
||||||
|
|
||||||
|
setValue(ptr: number, value: any, type: string, noSafe?: boolean): void
|
||||||
|
getValue(ptr: number, type: string, noSafe?: boolean): number
|
||||||
|
|
||||||
|
ALLOC_NORMAL: number
|
||||||
|
ALLOC_STACK: number
|
||||||
|
ALLOC_STATIC: number
|
||||||
|
ALLOC_DYNAMIC: number
|
||||||
|
ALLOC_NONE: number
|
||||||
|
|
||||||
|
allocate(slab: any, types: string, allocator: number, ptr: number): number
|
||||||
|
allocate(slab: any, types: string[], allocator: number, ptr: number): number
|
||||||
|
|
||||||
|
Pointer_stringify(ptr: number, length?: number): string
|
||||||
|
UTF16ToString(ptr: number): string
|
||||||
|
stringToUTF16(str: string, outPtr: number): void
|
||||||
|
UTF32ToString(ptr: number): string
|
||||||
|
stringToUTF32(str: string, outPtr: number): void
|
||||||
|
|
||||||
|
// USE_TYPED_ARRAYS == 1
|
||||||
|
HEAP: Int32Array
|
||||||
|
IHEAP: Int32Array
|
||||||
|
FHEAP: Float64Array
|
||||||
|
|
||||||
|
// USE_TYPED_ARRAYS == 2
|
||||||
|
HEAP8: Int8Array
|
||||||
|
HEAP16: Int16Array
|
||||||
|
HEAP32: Int32Array
|
||||||
|
HEAPU8: Uint8Array
|
||||||
|
HEAPU16: Uint16Array
|
||||||
|
HEAPU32: Uint32Array
|
||||||
|
HEAPF32: Float32Array
|
||||||
|
HEAPF64: Float64Array
|
||||||
|
|
||||||
|
TOTAL_STACK: number
|
||||||
|
TOTAL_MEMORY: number
|
||||||
|
FAST_MEMORY: number
|
||||||
|
|
||||||
|
addOnPreRun(cb: () => any): void
|
||||||
|
addOnInit(cb: () => any): void
|
||||||
|
addOnPreMain(cb: () => any): void
|
||||||
|
addOnExit(cb: () => any): void
|
||||||
|
addOnPostRun(cb: () => any): void
|
||||||
|
|
||||||
|
// Tools
|
||||||
|
intArrayFromString(
|
||||||
|
stringy: string,
|
||||||
|
dontAddNull?: boolean,
|
||||||
|
length?: number
|
||||||
|
): number[]
|
||||||
|
intArrayToString(array: number[]): string
|
||||||
|
writeStringToMemory(str: string, buffer: number, dontAddNull: boolean): void
|
||||||
|
writeArrayToMemory(array: number[], buffer: number): void
|
||||||
|
writeAsciiToMemory(str: string, buffer: number, dontAddNull: boolean): void
|
||||||
|
|
||||||
|
addRunDependency(id: any): void
|
||||||
|
removeRunDependency(id: any): void
|
||||||
|
|
||||||
|
preloadedImages: any
|
||||||
|
preloadedAudios: any
|
||||||
|
|
||||||
|
_malloc(size: number): number
|
||||||
|
_free(ptr: number): void
|
||||||
|
|
||||||
|
// Augmentations below by @surma.
|
||||||
|
onRuntimeInitialized: () => void | null
|
||||||
|
}
|
||||||
|
}
|
31
packages/integrations/image/src/vendor/squoosh/emscripten-utils.ts
vendored
Normal file
31
packages/integrations/image/src/vendor/squoosh/emscripten-utils.ts
vendored
Normal file
|
@ -0,0 +1,31 @@
|
||||||
|
//
|
||||||
|
import { fileURLToPath } from 'node:url'
|
||||||
|
|
||||||
|
export function pathify(path: string): string {
|
||||||
|
if (path.startsWith('file://')) {
|
||||||
|
path = fileURLToPath(path)
|
||||||
|
}
|
||||||
|
return path
|
||||||
|
}
|
||||||
|
|
||||||
|
export function instantiateEmscriptenWasm<T extends EmscriptenWasm.Module>(
|
||||||
|
factory: EmscriptenWasm.ModuleFactory<T>,
|
||||||
|
path: string,
|
||||||
|
workerJS = ''
|
||||||
|
): Promise<T> {
|
||||||
|
return factory({
|
||||||
|
locateFile(requestPath) {
|
||||||
|
// The glue code generated by emscripten uses the original
|
||||||
|
// file names of the worker file and the wasm binary.
|
||||||
|
// These will have changed in the bundling process and
|
||||||
|
// we need to inject them here.
|
||||||
|
if (requestPath.endsWith('.wasm')) return pathify(path)
|
||||||
|
if (requestPath.endsWith('.worker.js')) return pathify(workerJS)
|
||||||
|
return requestPath
|
||||||
|
},
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
export function dirname(url: string) {
|
||||||
|
return url.substring(0, url.lastIndexOf('/'))
|
||||||
|
}
|
139
packages/integrations/image/src/vendor/squoosh/image-pool.ts
vendored
Normal file
139
packages/integrations/image/src/vendor/squoosh/image-pool.ts
vendored
Normal file
|
@ -0,0 +1,139 @@
|
||||||
|
import { cpus } from 'os'
|
||||||
|
import { isMainThread } from 'node:worker_threads';
|
||||||
|
import WorkerPool from '../../utils/workerPool.js';
|
||||||
|
import type { Operation } from './image.js';
|
||||||
|
import * as impl from './impl.js';
|
||||||
|
import execOnce from '../../utils/execOnce.js';
|
||||||
|
import type { OutputFormat } from '../../loaders/index.js';
|
||||||
|
|
||||||
|
const getWorker = execOnce(
|
||||||
|
() => {
|
||||||
|
return new WorkerPool(
|
||||||
|
// There will be at most 7 workers needed since each worker will take
|
||||||
|
// at least 1 operation type.
|
||||||
|
Math.max(1, Math.min(cpus().length - 1, 7)),
|
||||||
|
'./node_modules/@astrojs/image/dist/vendor/squoosh/image-pool.js'
|
||||||
|
);
|
||||||
|
}
|
||||||
|
)
|
||||||
|
|
||||||
|
type DecodeParams = {
|
||||||
|
operation: 'decode',
|
||||||
|
buffer: Buffer
|
||||||
|
};
|
||||||
|
type ResizeParams = {
|
||||||
|
operation: 'resize',
|
||||||
|
imageData: ImageData,
|
||||||
|
height?: number,
|
||||||
|
width?: number
|
||||||
|
};
|
||||||
|
type RotateParams = {
|
||||||
|
operation: 'rotate',
|
||||||
|
imageData: ImageData,
|
||||||
|
numRotations: number
|
||||||
|
};
|
||||||
|
type EncodeAvifParams = {
|
||||||
|
operation: 'encodeavif',
|
||||||
|
imageData: ImageData,
|
||||||
|
quality: number
|
||||||
|
}
|
||||||
|
type EncodeJpegParams = {
|
||||||
|
operation: 'encodejpeg',
|
||||||
|
imageData: ImageData,
|
||||||
|
quality: number
|
||||||
|
}
|
||||||
|
type EncodePngParams = {
|
||||||
|
operation: 'encodepng',
|
||||||
|
imageData: ImageData
|
||||||
|
}
|
||||||
|
type EncodeWebpParams = {
|
||||||
|
operation: 'encodewebp',
|
||||||
|
imageData: ImageData,
|
||||||
|
quality: number
|
||||||
|
}
|
||||||
|
type JobMessage = DecodeParams | ResizeParams | RotateParams | EncodeAvifParams | EncodeJpegParams | EncodePngParams | EncodeWebpParams
|
||||||
|
|
||||||
|
function handleJob(params: JobMessage) {
|
||||||
|
switch (params.operation) {
|
||||||
|
case 'decode':
|
||||||
|
return impl.decodeBuffer(params.buffer)
|
||||||
|
case 'resize':
|
||||||
|
return impl.resize({ image: params.imageData as any, width: params.width, height: params.height })
|
||||||
|
case 'rotate':
|
||||||
|
return impl.rotate(params.imageData as any, params.numRotations);
|
||||||
|
case 'encodeavif':
|
||||||
|
return impl.encodeAvif(params.imageData as any, { quality: params.quality })
|
||||||
|
case 'encodejpeg':
|
||||||
|
return impl.encodeJpeg(params.imageData as any, { quality: params.quality })
|
||||||
|
case 'encodepng':
|
||||||
|
return impl.encodePng(params.imageData as any)
|
||||||
|
case 'encodewebp':
|
||||||
|
return impl.encodeWebp(params.imageData as any, { quality: params.quality })
|
||||||
|
default:
|
||||||
|
throw Error(`Invalid job "${(params as any).operation}"`);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
export async function processBuffer(
|
||||||
|
buffer: Buffer,
|
||||||
|
operations: Operation[],
|
||||||
|
encoding: OutputFormat,
|
||||||
|
quality: number
|
||||||
|
): Promise<Uint8Array> {
|
||||||
|
// @ts-ignore
|
||||||
|
const worker = await getWorker()
|
||||||
|
|
||||||
|
let imageData = await worker.dispatchJob({
|
||||||
|
operation: 'decode',
|
||||||
|
buffer,
|
||||||
|
})
|
||||||
|
for (const operation of operations) {
|
||||||
|
if (operation.type === 'rotate') {
|
||||||
|
imageData = await worker.dispatchJob({
|
||||||
|
operation: 'rotate',
|
||||||
|
imageData,
|
||||||
|
numRotations: operation.numRotations
|
||||||
|
});
|
||||||
|
} else if (operation.type === 'resize') {
|
||||||
|
imageData = await worker.dispatchJob({
|
||||||
|
operation: 'resize',
|
||||||
|
imageData,
|
||||||
|
height: operation.height,
|
||||||
|
width: operation.width
|
||||||
|
})
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
switch (encoding) {
|
||||||
|
case 'avif':
|
||||||
|
return await worker.dispatchJob({
|
||||||
|
operation: 'encodeavif',
|
||||||
|
imageData,
|
||||||
|
quality: quality || 100
|
||||||
|
}) as Uint8Array;
|
||||||
|
case 'jpeg':
|
||||||
|
case 'jpg':
|
||||||
|
return await worker.dispatchJob({
|
||||||
|
operation: 'encodejpeg',
|
||||||
|
imageData,
|
||||||
|
quality: quality || 100,
|
||||||
|
}) as Uint8Array;
|
||||||
|
case 'png':
|
||||||
|
return await worker.dispatchJob({
|
||||||
|
operation: 'encodepng',
|
||||||
|
imageData,
|
||||||
|
}) as Uint8Array;
|
||||||
|
case 'webp':
|
||||||
|
return await worker.dispatchJob({
|
||||||
|
operation: 'encodewebp',
|
||||||
|
imageData,
|
||||||
|
quality: quality || 100,
|
||||||
|
}) as Uint8Array;
|
||||||
|
default:
|
||||||
|
throw Error(`Unsupported encoding format`)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
if (!isMainThread) {
|
||||||
|
WorkerPool.useThisThreadAsWorker(handleJob);
|
||||||
|
}
|
43
packages/integrations/image/src/vendor/squoosh/image.ts
vendored
Normal file
43
packages/integrations/image/src/vendor/squoosh/image.ts
vendored
Normal file
|
@ -0,0 +1,43 @@
|
||||||
|
import * as impl from './impl.js';
|
||||||
|
import type { OutputFormat } from '../../loaders/index.js';
|
||||||
|
|
||||||
|
type RotateOperation = {
|
||||||
|
type: 'rotate'
|
||||||
|
numRotations: number
|
||||||
|
}
|
||||||
|
type ResizeOperation = {
|
||||||
|
type: 'resize'
|
||||||
|
width?: number
|
||||||
|
height?: number
|
||||||
|
}
|
||||||
|
export type Operation = RotateOperation | ResizeOperation
|
||||||
|
|
||||||
|
export async function processBuffer(
|
||||||
|
buffer: Buffer,
|
||||||
|
operations: Operation[],
|
||||||
|
encoding: OutputFormat,
|
||||||
|
quality: number
|
||||||
|
): Promise<Uint8Array> {
|
||||||
|
let imageData = await impl.decodeBuffer(buffer)
|
||||||
|
for (const operation of operations) {
|
||||||
|
if (operation.type === 'rotate') {
|
||||||
|
imageData = await impl.rotate(imageData, operation.numRotations);
|
||||||
|
} else if (operation.type === 'resize') {
|
||||||
|
imageData = await impl.resize({ image: imageData, width: operation.width, height: operation.height })
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
switch (encoding) {
|
||||||
|
case 'avif':
|
||||||
|
return await impl.encodeAvif(imageData, { quality: quality }) as Uint8Array;
|
||||||
|
case 'jpeg':
|
||||||
|
case 'jpg':
|
||||||
|
return await impl.encodeJpeg(imageData, { quality }) as Uint8Array;
|
||||||
|
case 'png':
|
||||||
|
return await impl.encodePng(imageData) as Uint8Array;
|
||||||
|
case 'webp':
|
||||||
|
return await impl.encodeWebp(imageData, { quality }) as Uint8Array;
|
||||||
|
default:
|
||||||
|
throw Error(`Unsupported encoding format`)
|
||||||
|
}
|
||||||
|
}
|
33
packages/integrations/image/src/vendor/squoosh/image_data.ts
vendored
Normal file
33
packages/integrations/image/src/vendor/squoosh/image_data.ts
vendored
Normal file
|
@ -0,0 +1,33 @@
|
||||||
|
export default class ImageData {
|
||||||
|
static from(input: ImageData): ImageData {
|
||||||
|
return new ImageData(input.data || input._data, input.width, input.height)
|
||||||
|
}
|
||||||
|
|
||||||
|
private _data: Buffer | Uint8Array | Uint8ClampedArray
|
||||||
|
width: number
|
||||||
|
height: number
|
||||||
|
|
||||||
|
get data(): Buffer {
|
||||||
|
if (Object.prototype.toString.call(this._data) === '[object Object]') {
|
||||||
|
return Buffer.from(Object.values(this._data))
|
||||||
|
}
|
||||||
|
if (
|
||||||
|
this._data instanceof Buffer ||
|
||||||
|
this._data instanceof Uint8Array ||
|
||||||
|
this._data instanceof Uint8ClampedArray
|
||||||
|
) {
|
||||||
|
return Buffer.from(this._data)
|
||||||
|
}
|
||||||
|
throw new Error('invariant')
|
||||||
|
}
|
||||||
|
|
||||||
|
constructor(
|
||||||
|
data: Buffer | Uint8Array | Uint8ClampedArray,
|
||||||
|
width: number,
|
||||||
|
height: number
|
||||||
|
) {
|
||||||
|
this._data = data
|
||||||
|
this.width = width
|
||||||
|
this.height = height
|
||||||
|
}
|
||||||
|
}
|
135
packages/integrations/image/src/vendor/squoosh/impl.ts
vendored
Normal file
135
packages/integrations/image/src/vendor/squoosh/impl.ts
vendored
Normal file
|
@ -0,0 +1,135 @@
|
||||||
|
import { codecs as supportedFormats, preprocessors } from './codecs.js'
|
||||||
|
import ImageData from './image_data.js'
|
||||||
|
|
||||||
|
type EncoderKey = keyof typeof supportedFormats
|
||||||
|
|
||||||
|
const DELAY_MS = 1000
|
||||||
|
let _promise: Promise<void> | undefined
|
||||||
|
|
||||||
|
function delayOnce(ms: number): Promise<void> {
|
||||||
|
if (!_promise) {
|
||||||
|
_promise = new Promise((resolve) => {
|
||||||
|
setTimeout(resolve, ms)
|
||||||
|
})
|
||||||
|
}
|
||||||
|
return _promise
|
||||||
|
}
|
||||||
|
|
||||||
|
function maybeDelay(): Promise<void> {
|
||||||
|
const isAppleM1 = process.arch === 'arm64' && process.platform === 'darwin'
|
||||||
|
if (isAppleM1) {
|
||||||
|
return delayOnce(DELAY_MS)
|
||||||
|
}
|
||||||
|
return Promise.resolve()
|
||||||
|
}
|
||||||
|
|
||||||
|
export async function decodeBuffer(
|
||||||
|
_buffer: Buffer | Uint8Array
|
||||||
|
): Promise<ImageData> {
|
||||||
|
const buffer = Buffer.from(_buffer)
|
||||||
|
const firstChunk = buffer.slice(0, 16)
|
||||||
|
const firstChunkString = Array.from(firstChunk)
|
||||||
|
.map((v) => String.fromCodePoint(v))
|
||||||
|
.join('')
|
||||||
|
const key = Object.entries(supportedFormats).find(([, { detectors }]) =>
|
||||||
|
detectors.some((detector) => detector.exec(firstChunkString))
|
||||||
|
)?.[0] as EncoderKey | undefined
|
||||||
|
if (!key) {
|
||||||
|
throw Error(`Buffer has an unsupported format`)
|
||||||
|
}
|
||||||
|
const encoder = supportedFormats[key]
|
||||||
|
const mod = await encoder.dec()
|
||||||
|
const rgba = mod.decode(new Uint8Array(buffer))
|
||||||
|
// @ts-ignore
|
||||||
|
return rgba
|
||||||
|
}
|
||||||
|
|
||||||
|
export async function rotate(
|
||||||
|
image: ImageData,
|
||||||
|
numRotations: number
|
||||||
|
): Promise<ImageData> {
|
||||||
|
image = ImageData.from(image)
|
||||||
|
|
||||||
|
const m = await preprocessors['rotate'].instantiate()
|
||||||
|
return await m(image.data, image.width, image.height, { numRotations })
|
||||||
|
}
|
||||||
|
|
||||||
|
type ResizeOpts = { image: ImageData } & { width?: number; height?: number }
|
||||||
|
|
||||||
|
export async function resize({ image, width, height }: ResizeOpts) {
|
||||||
|
image = ImageData.from(image)
|
||||||
|
|
||||||
|
const p = preprocessors['resize']
|
||||||
|
const m = await p.instantiate()
|
||||||
|
await maybeDelay()
|
||||||
|
return await m(image.data, image.width, image.height, {
|
||||||
|
...p.defaultOptions,
|
||||||
|
width,
|
||||||
|
height,
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
export async function encodeJpeg(
|
||||||
|
image: ImageData,
|
||||||
|
{ quality }: { quality: number }
|
||||||
|
): Promise<Uint8Array> {
|
||||||
|
image = ImageData.from(image)
|
||||||
|
|
||||||
|
const e = supportedFormats['mozjpeg']
|
||||||
|
const m = await e.enc()
|
||||||
|
await maybeDelay()
|
||||||
|
const r = await m.encode(image.data, image.width, image.height, {
|
||||||
|
...e.defaultEncoderOptions,
|
||||||
|
quality,
|
||||||
|
})
|
||||||
|
return r
|
||||||
|
}
|
||||||
|
|
||||||
|
export async function encodeWebp(
|
||||||
|
image: ImageData,
|
||||||
|
{ quality }: { quality: number }
|
||||||
|
): Promise<Uint8Array> {
|
||||||
|
image = ImageData.from(image)
|
||||||
|
|
||||||
|
const e = supportedFormats['webp']
|
||||||
|
const m = await e.enc()
|
||||||
|
await maybeDelay()
|
||||||
|
const r = await m.encode(image.data, image.width, image.height, {
|
||||||
|
...e.defaultEncoderOptions,
|
||||||
|
quality,
|
||||||
|
})
|
||||||
|
return r
|
||||||
|
}
|
||||||
|
|
||||||
|
export async function encodeAvif(
|
||||||
|
image: ImageData,
|
||||||
|
{ quality }: { quality: number }
|
||||||
|
): Promise<Uint8Array> {
|
||||||
|
image = ImageData.from(image)
|
||||||
|
|
||||||
|
const e = supportedFormats['avif']
|
||||||
|
const m = await e.enc()
|
||||||
|
await maybeDelay()
|
||||||
|
const val = e.autoOptimize.min
|
||||||
|
const r = await m.encode(image.data, image.width, image.height, {
|
||||||
|
...e.defaultEncoderOptions,
|
||||||
|
// Think of cqLevel as the "amount" of quantization (0 to 62),
|
||||||
|
// so a lower value yields higher quality (0 to 100).
|
||||||
|
cqLevel: quality === 0 ? val : Math.round(val - (quality / 100) * val),
|
||||||
|
})
|
||||||
|
return r
|
||||||
|
}
|
||||||
|
|
||||||
|
export async function encodePng(
|
||||||
|
image: ImageData
|
||||||
|
): Promise<Uint8Array> {
|
||||||
|
image = ImageData.from(image)
|
||||||
|
|
||||||
|
const e = supportedFormats['oxipng']
|
||||||
|
const m = await e.enc()
|
||||||
|
await maybeDelay()
|
||||||
|
const r = await m.encode(image.data, image.width, image.height, {
|
||||||
|
...e.defaultEncoderOptions,
|
||||||
|
})
|
||||||
|
return r
|
||||||
|
}
|
38
packages/integrations/image/src/vendor/squoosh/mozjpeg/mozjpeg_enc.d.ts
vendored
Normal file
38
packages/integrations/image/src/vendor/squoosh/mozjpeg/mozjpeg_enc.d.ts
vendored
Normal file
|
@ -0,0 +1,38 @@
|
||||||
|
// eslint-disable-next-line no-shadow
|
||||||
|
export const enum MozJpegColorSpace {
|
||||||
|
GRAYSCALE = 1,
|
||||||
|
RGB,
|
||||||
|
YCbCr,
|
||||||
|
}
|
||||||
|
|
||||||
|
export interface EncodeOptions {
|
||||||
|
quality: number
|
||||||
|
baseline: boolean
|
||||||
|
arithmetic: boolean
|
||||||
|
progressive: boolean
|
||||||
|
optimize_coding: boolean
|
||||||
|
smoothing: number
|
||||||
|
color_space: MozJpegColorSpace
|
||||||
|
quant_table: number
|
||||||
|
trellis_multipass: boolean
|
||||||
|
trellis_opt_zero: boolean
|
||||||
|
trellis_opt_table: boolean
|
||||||
|
trellis_loops: number
|
||||||
|
auto_subsample: boolean
|
||||||
|
chroma_subsample: number
|
||||||
|
separate_chroma_quality: boolean
|
||||||
|
chroma_quality: number
|
||||||
|
}
|
||||||
|
|
||||||
|
export interface MozJPEGModule extends EmscriptenWasm.Module {
|
||||||
|
encode(
|
||||||
|
data: BufferSource,
|
||||||
|
width: number,
|
||||||
|
height: number,
|
||||||
|
options: EncodeOptions
|
||||||
|
): Uint8Array
|
||||||
|
}
|
||||||
|
|
||||||
|
declare var moduleFactory: EmscriptenWasm.ModuleFactory<MozJPEGModule>
|
||||||
|
|
||||||
|
export default moduleFactory
|
1809
packages/integrations/image/src/vendor/squoosh/mozjpeg/mozjpeg_node_dec.ts
vendored
Normal file
1809
packages/integrations/image/src/vendor/squoosh/mozjpeg/mozjpeg_node_dec.ts
vendored
Normal file
File diff suppressed because it is too large
Load diff
BIN
packages/integrations/image/src/vendor/squoosh/mozjpeg/mozjpeg_node_dec.wasm
vendored
Normal file
BIN
packages/integrations/image/src/vendor/squoosh/mozjpeg/mozjpeg_node_dec.wasm
vendored
Normal file
Binary file not shown.
1935
packages/integrations/image/src/vendor/squoosh/mozjpeg/mozjpeg_node_enc.ts
vendored
Normal file
1935
packages/integrations/image/src/vendor/squoosh/mozjpeg/mozjpeg_node_enc.ts
vendored
Normal file
File diff suppressed because it is too large
Load diff
BIN
packages/integrations/image/src/vendor/squoosh/mozjpeg/mozjpeg_node_enc.wasm
vendored
Normal file
BIN
packages/integrations/image/src/vendor/squoosh/mozjpeg/mozjpeg_node_enc.wasm
vendored
Normal file
Binary file not shown.
120
packages/integrations/image/src/vendor/squoosh/png/squoosh_oxipng.ts
vendored
Normal file
120
packages/integrations/image/src/vendor/squoosh/png/squoosh_oxipng.ts
vendored
Normal file
|
@ -0,0 +1,120 @@
|
||||||
|
// @ts-nocheck
|
||||||
|
let wasm
|
||||||
|
|
||||||
|
let cachedTextDecoder = new TextDecoder('utf-8', {
|
||||||
|
ignoreBOM: true,
|
||||||
|
fatal: true,
|
||||||
|
})
|
||||||
|
|
||||||
|
cachedTextDecoder.decode()
|
||||||
|
|
||||||
|
let cachegetUint8Memory0 = null
|
||||||
|
function getUint8Memory0() {
|
||||||
|
if (
|
||||||
|
cachegetUint8Memory0 === null ||
|
||||||
|
cachegetUint8Memory0.buffer !== wasm.memory.buffer
|
||||||
|
) {
|
||||||
|
cachegetUint8Memory0 = new Uint8Array(wasm.memory.buffer)
|
||||||
|
}
|
||||||
|
return cachegetUint8Memory0
|
||||||
|
}
|
||||||
|
|
||||||
|
function getStringFromWasm0(ptr, len) {
|
||||||
|
return cachedTextDecoder.decode(getUint8Memory0().subarray(ptr, ptr + len))
|
||||||
|
}
|
||||||
|
|
||||||
|
let WASM_VECTOR_LEN = 0
|
||||||
|
|
||||||
|
function passArray8ToWasm0(arg, malloc) {
|
||||||
|
const ptr = malloc(arg.length * 1)
|
||||||
|
getUint8Memory0().set(arg, ptr / 1)
|
||||||
|
WASM_VECTOR_LEN = arg.length
|
||||||
|
return ptr
|
||||||
|
}
|
||||||
|
|
||||||
|
let cachegetInt32Memory0 = null
|
||||||
|
function getInt32Memory0() {
|
||||||
|
if (
|
||||||
|
cachegetInt32Memory0 === null ||
|
||||||
|
cachegetInt32Memory0.buffer !== wasm.memory.buffer
|
||||||
|
) {
|
||||||
|
cachegetInt32Memory0 = new Int32Array(wasm.memory.buffer)
|
||||||
|
}
|
||||||
|
return cachegetInt32Memory0
|
||||||
|
}
|
||||||
|
|
||||||
|
function getArrayU8FromWasm0(ptr, len) {
|
||||||
|
return getUint8Memory0().subarray(ptr / 1, ptr / 1 + len)
|
||||||
|
}
|
||||||
|
/**
|
||||||
|
* @param {Uint8Array} data
|
||||||
|
* @param {number} level
|
||||||
|
* @param {boolean} interlace
|
||||||
|
* @returns {Uint8Array}
|
||||||
|
*/
|
||||||
|
export function optimise(data, level, interlace) {
|
||||||
|
try {
|
||||||
|
const retptr = wasm.__wbindgen_add_to_stack_pointer(-16)
|
||||||
|
const ptr0 = passArray8ToWasm0(data, wasm.__wbindgen_malloc)
|
||||||
|
const len0 = WASM_VECTOR_LEN
|
||||||
|
wasm.optimise(retptr, ptr0, len0, level, interlace)
|
||||||
|
const r0 = getInt32Memory0()[retptr / 4 + 0]
|
||||||
|
const r1 = getInt32Memory0()[retptr / 4 + 1]
|
||||||
|
const v1 = getArrayU8FromWasm0(r0, r1).slice()
|
||||||
|
wasm.__wbindgen_free(r0, r1 * 1)
|
||||||
|
return v1
|
||||||
|
} finally {
|
||||||
|
wasm.__wbindgen_add_to_stack_pointer(16)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
async function load(module, imports) {
|
||||||
|
if (typeof Response === 'function' && module instanceof Response) {
|
||||||
|
if (typeof WebAssembly.instantiateStreaming === 'function') {
|
||||||
|
return await WebAssembly.instantiateStreaming(module, imports)
|
||||||
|
}
|
||||||
|
|
||||||
|
const bytes = await module.arrayBuffer()
|
||||||
|
return await WebAssembly.instantiate(bytes, imports)
|
||||||
|
} else {
|
||||||
|
const instance = await WebAssembly.instantiate(module, imports)
|
||||||
|
|
||||||
|
if (instance instanceof WebAssembly.Instance) {
|
||||||
|
return { instance, module }
|
||||||
|
} else {
|
||||||
|
return instance
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
async function init(input) {
|
||||||
|
const imports = {}
|
||||||
|
imports.wbg = {}
|
||||||
|
imports.wbg.__wbindgen_throw = function (arg0, arg1) {
|
||||||
|
throw new Error(getStringFromWasm0(arg0, arg1))
|
||||||
|
}
|
||||||
|
|
||||||
|
if (
|
||||||
|
typeof input === 'string' ||
|
||||||
|
(typeof Request === 'function' && input instanceof Request) ||
|
||||||
|
(typeof URL === 'function' && input instanceof URL)
|
||||||
|
) {
|
||||||
|
input = fetch(input)
|
||||||
|
}
|
||||||
|
|
||||||
|
const { instance, module } = await load(await input, imports)
|
||||||
|
|
||||||
|
wasm = instance.exports
|
||||||
|
init.__wbindgen_wasm_module = module
|
||||||
|
|
||||||
|
return wasm
|
||||||
|
}
|
||||||
|
|
||||||
|
export default init
|
||||||
|
|
||||||
|
// Manually remove the wasm and memory references to trigger GC
|
||||||
|
export function cleanup() {
|
||||||
|
wasm = null
|
||||||
|
cachegetUint8Memory0 = null
|
||||||
|
cachegetInt32Memory0 = null
|
||||||
|
}
|
BIN
packages/integrations/image/src/vendor/squoosh/png/squoosh_oxipng_bg.wasm
vendored
Normal file
BIN
packages/integrations/image/src/vendor/squoosh/png/squoosh_oxipng_bg.wasm
vendored
Normal file
Binary file not shown.
184
packages/integrations/image/src/vendor/squoosh/png/squoosh_png.ts
vendored
Normal file
184
packages/integrations/image/src/vendor/squoosh/png/squoosh_png.ts
vendored
Normal file
|
@ -0,0 +1,184 @@
|
||||||
|
// @ts-nocheck
|
||||||
|
let wasm
|
||||||
|
|
||||||
|
let cachedTextDecoder = new TextDecoder('utf-8', {
|
||||||
|
ignoreBOM: true,
|
||||||
|
fatal: true,
|
||||||
|
})
|
||||||
|
|
||||||
|
cachedTextDecoder.decode()
|
||||||
|
|
||||||
|
let cachegetUint8Memory0 = null
|
||||||
|
function getUint8Memory0() {
|
||||||
|
if (
|
||||||
|
cachegetUint8Memory0 === null ||
|
||||||
|
cachegetUint8Memory0.buffer !== wasm.memory.buffer
|
||||||
|
) {
|
||||||
|
cachegetUint8Memory0 = new Uint8Array(wasm.memory.buffer)
|
||||||
|
}
|
||||||
|
return cachegetUint8Memory0
|
||||||
|
}
|
||||||
|
|
||||||
|
function getStringFromWasm0(ptr, len) {
|
||||||
|
return cachedTextDecoder.decode(getUint8Memory0().subarray(ptr, ptr + len))
|
||||||
|
}
|
||||||
|
|
||||||
|
let cachegetUint8ClampedMemory0 = null
|
||||||
|
function getUint8ClampedMemory0() {
|
||||||
|
if (
|
||||||
|
cachegetUint8ClampedMemory0 === null ||
|
||||||
|
cachegetUint8ClampedMemory0.buffer !== wasm.memory.buffer
|
||||||
|
) {
|
||||||
|
cachegetUint8ClampedMemory0 = new Uint8ClampedArray(wasm.memory.buffer)
|
||||||
|
}
|
||||||
|
return cachegetUint8ClampedMemory0
|
||||||
|
}
|
||||||
|
|
||||||
|
function getClampedArrayU8FromWasm0(ptr, len) {
|
||||||
|
return getUint8ClampedMemory0().subarray(ptr / 1, ptr / 1 + len)
|
||||||
|
}
|
||||||
|
|
||||||
|
const heap = new Array(32).fill(undefined)
|
||||||
|
|
||||||
|
heap.push(undefined, null, true, false)
|
||||||
|
|
||||||
|
let heap_next = heap.length
|
||||||
|
|
||||||
|
function addHeapObject(obj) {
|
||||||
|
if (heap_next === heap.length) heap.push(heap.length + 1)
|
||||||
|
const idx = heap_next
|
||||||
|
heap_next = heap[idx]
|
||||||
|
|
||||||
|
heap[idx] = obj
|
||||||
|
return idx
|
||||||
|
}
|
||||||
|
|
||||||
|
let WASM_VECTOR_LEN = 0
|
||||||
|
|
||||||
|
function passArray8ToWasm0(arg, malloc) {
|
||||||
|
const ptr = malloc(arg.length * 1)
|
||||||
|
getUint8Memory0().set(arg, ptr / 1)
|
||||||
|
WASM_VECTOR_LEN = arg.length
|
||||||
|
return ptr
|
||||||
|
}
|
||||||
|
|
||||||
|
let cachegetInt32Memory0 = null
|
||||||
|
function getInt32Memory0() {
|
||||||
|
if (
|
||||||
|
cachegetInt32Memory0 === null ||
|
||||||
|
cachegetInt32Memory0.buffer !== wasm.memory.buffer
|
||||||
|
) {
|
||||||
|
cachegetInt32Memory0 = new Int32Array(wasm.memory.buffer)
|
||||||
|
}
|
||||||
|
return cachegetInt32Memory0
|
||||||
|
}
|
||||||
|
|
||||||
|
function getArrayU8FromWasm0(ptr, len) {
|
||||||
|
return getUint8Memory0().subarray(ptr / 1, ptr / 1 + len)
|
||||||
|
}
|
||||||
|
/**
|
||||||
|
* @param {Uint8Array} data
|
||||||
|
* @param {number} width
|
||||||
|
* @param {number} height
|
||||||
|
* @returns {Uint8Array}
|
||||||
|
*/
|
||||||
|
export function encode(data, width, height) {
|
||||||
|
try {
|
||||||
|
const retptr = wasm.__wbindgen_add_to_stack_pointer(-16)
|
||||||
|
const ptr0 = passArray8ToWasm0(data, wasm.__wbindgen_malloc)
|
||||||
|
const len0 = WASM_VECTOR_LEN
|
||||||
|
wasm.encode(retptr, ptr0, len0, width, height)
|
||||||
|
const r0 = getInt32Memory0()[retptr / 4 + 0]
|
||||||
|
const r1 = getInt32Memory0()[retptr / 4 + 1]
|
||||||
|
const v1 = getArrayU8FromWasm0(r0, r1).slice()
|
||||||
|
wasm.__wbindgen_free(r0, r1 * 1)
|
||||||
|
return v1
|
||||||
|
} finally {
|
||||||
|
wasm.__wbindgen_add_to_stack_pointer(16)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
function getObject(idx) {
|
||||||
|
return heap[idx]
|
||||||
|
}
|
||||||
|
|
||||||
|
function dropObject(idx) {
|
||||||
|
if (idx < 36) return
|
||||||
|
heap[idx] = heap_next
|
||||||
|
heap_next = idx
|
||||||
|
}
|
||||||
|
|
||||||
|
function takeObject(idx) {
|
||||||
|
const ret = getObject(idx)
|
||||||
|
dropObject(idx)
|
||||||
|
return ret
|
||||||
|
}
|
||||||
|
/**
|
||||||
|
* @param {Uint8Array} data
|
||||||
|
* @returns {ImageData}
|
||||||
|
*/
|
||||||
|
export function decode(data) {
|
||||||
|
const ptr0 = passArray8ToWasm0(data, wasm.__wbindgen_malloc)
|
||||||
|
const len0 = WASM_VECTOR_LEN
|
||||||
|
const ret = wasm.decode(ptr0, len0)
|
||||||
|
return takeObject(ret)
|
||||||
|
}
|
||||||
|
|
||||||
|
async function load(module, imports) {
|
||||||
|
if (typeof Response === 'function' && module instanceof Response) {
|
||||||
|
if (typeof WebAssembly.instantiateStreaming === 'function') {
|
||||||
|
return await WebAssembly.instantiateStreaming(module, imports)
|
||||||
|
}
|
||||||
|
|
||||||
|
const bytes = await module.arrayBuffer()
|
||||||
|
return await WebAssembly.instantiate(bytes, imports)
|
||||||
|
} else {
|
||||||
|
const instance = await WebAssembly.instantiate(module, imports)
|
||||||
|
|
||||||
|
if (instance instanceof WebAssembly.Instance) {
|
||||||
|
return { instance, module }
|
||||||
|
} else {
|
||||||
|
return instance
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
async function init(input) {
|
||||||
|
const imports = {}
|
||||||
|
imports.wbg = {}
|
||||||
|
imports.wbg.__wbg_newwithownedu8clampedarrayandsh_787b2db8ea6bfd62 =
|
||||||
|
function (arg0, arg1, arg2, arg3) {
|
||||||
|
const v0 = getClampedArrayU8FromWasm0(arg0, arg1).slice()
|
||||||
|
wasm.__wbindgen_free(arg0, arg1 * 1)
|
||||||
|
const ret = new ImageData(v0, arg2 >>> 0, arg3 >>> 0)
|
||||||
|
return addHeapObject(ret)
|
||||||
|
}
|
||||||
|
imports.wbg.__wbindgen_throw = function (arg0, arg1) {
|
||||||
|
throw new Error(getStringFromWasm0(arg0, arg1))
|
||||||
|
}
|
||||||
|
|
||||||
|
if (
|
||||||
|
typeof input === 'string' ||
|
||||||
|
(typeof Request === 'function' && input instanceof Request) ||
|
||||||
|
(typeof URL === 'function' && input instanceof URL)
|
||||||
|
) {
|
||||||
|
input = fetch(input)
|
||||||
|
}
|
||||||
|
|
||||||
|
const { instance, module } = await load(await input, imports)
|
||||||
|
|
||||||
|
wasm = instance.exports
|
||||||
|
init.__wbindgen_wasm_module = module
|
||||||
|
|
||||||
|
return wasm
|
||||||
|
}
|
||||||
|
|
||||||
|
export default init
|
||||||
|
|
||||||
|
// Manually remove the wasm and memory references to trigger GC
|
||||||
|
export function cleanup() {
|
||||||
|
wasm = null
|
||||||
|
cachegetUint8ClampedMemory0 = null
|
||||||
|
cachegetUint8Memory0 = null
|
||||||
|
cachegetInt32Memory0 = null
|
||||||
|
}
|
BIN
packages/integrations/image/src/vendor/squoosh/png/squoosh_png_bg.wasm
vendored
Normal file
BIN
packages/integrations/image/src/vendor/squoosh/png/squoosh_png_bg.wasm
vendored
Normal file
Binary file not shown.
141
packages/integrations/image/src/vendor/squoosh/resize/squoosh_resize.ts
vendored
Normal file
141
packages/integrations/image/src/vendor/squoosh/resize/squoosh_resize.ts
vendored
Normal file
|
@ -0,0 +1,141 @@
|
||||||
|
// @ts-nocheck
|
||||||
|
let wasm
|
||||||
|
|
||||||
|
let cachegetUint8Memory0 = null
|
||||||
|
function getUint8Memory0() {
|
||||||
|
if (
|
||||||
|
cachegetUint8Memory0 === null ||
|
||||||
|
cachegetUint8Memory0.buffer !== wasm.memory.buffer
|
||||||
|
) {
|
||||||
|
cachegetUint8Memory0 = new Uint8Array(wasm.memory.buffer)
|
||||||
|
}
|
||||||
|
return cachegetUint8Memory0
|
||||||
|
}
|
||||||
|
|
||||||
|
let WASM_VECTOR_LEN = 0
|
||||||
|
|
||||||
|
function passArray8ToWasm0(arg, malloc) {
|
||||||
|
const ptr = malloc(arg.length * 1)
|
||||||
|
getUint8Memory0().set(arg, ptr / 1)
|
||||||
|
WASM_VECTOR_LEN = arg.length
|
||||||
|
return ptr
|
||||||
|
}
|
||||||
|
|
||||||
|
let cachegetInt32Memory0 = null
|
||||||
|
function getInt32Memory0() {
|
||||||
|
if (
|
||||||
|
cachegetInt32Memory0 === null ||
|
||||||
|
cachegetInt32Memory0.buffer !== wasm.memory.buffer
|
||||||
|
) {
|
||||||
|
cachegetInt32Memory0 = new Int32Array(wasm.memory.buffer)
|
||||||
|
}
|
||||||
|
return cachegetInt32Memory0
|
||||||
|
}
|
||||||
|
|
||||||
|
let cachegetUint8ClampedMemory0 = null
|
||||||
|
function getUint8ClampedMemory0() {
|
||||||
|
if (
|
||||||
|
cachegetUint8ClampedMemory0 === null ||
|
||||||
|
cachegetUint8ClampedMemory0.buffer !== wasm.memory.buffer
|
||||||
|
) {
|
||||||
|
cachegetUint8ClampedMemory0 = new Uint8ClampedArray(wasm.memory.buffer)
|
||||||
|
}
|
||||||
|
return cachegetUint8ClampedMemory0
|
||||||
|
}
|
||||||
|
|
||||||
|
function getClampedArrayU8FromWasm0(ptr, len) {
|
||||||
|
return getUint8ClampedMemory0().subarray(ptr / 1, ptr / 1 + len)
|
||||||
|
}
|
||||||
|
/**
|
||||||
|
* @param {Uint8Array} input_image
|
||||||
|
* @param {number} input_width
|
||||||
|
* @param {number} input_height
|
||||||
|
* @param {number} output_width
|
||||||
|
* @param {number} output_height
|
||||||
|
* @param {number} typ_idx
|
||||||
|
* @param {boolean} premultiply
|
||||||
|
* @param {boolean} color_space_conversion
|
||||||
|
* @returns {Uint8ClampedArray}
|
||||||
|
*/
|
||||||
|
export function resize(
|
||||||
|
input_image,
|
||||||
|
input_width,
|
||||||
|
input_height,
|
||||||
|
output_width,
|
||||||
|
output_height,
|
||||||
|
typ_idx,
|
||||||
|
premultiply,
|
||||||
|
color_space_conversion
|
||||||
|
) {
|
||||||
|
try {
|
||||||
|
const retptr = wasm.__wbindgen_add_to_stack_pointer(-16)
|
||||||
|
const ptr0 = passArray8ToWasm0(input_image, wasm.__wbindgen_malloc)
|
||||||
|
const len0 = WASM_VECTOR_LEN
|
||||||
|
wasm.resize(
|
||||||
|
retptr,
|
||||||
|
ptr0,
|
||||||
|
len0,
|
||||||
|
input_width,
|
||||||
|
input_height,
|
||||||
|
output_width,
|
||||||
|
output_height,
|
||||||
|
typ_idx,
|
||||||
|
premultiply,
|
||||||
|
color_space_conversion
|
||||||
|
)
|
||||||
|
const r0 = getInt32Memory0()[retptr / 4 + 0]
|
||||||
|
const r1 = getInt32Memory0()[retptr / 4 + 1]
|
||||||
|
const v1 = getClampedArrayU8FromWasm0(r0, r1).slice()
|
||||||
|
wasm.__wbindgen_free(r0, r1 * 1)
|
||||||
|
return v1
|
||||||
|
} finally {
|
||||||
|
wasm.__wbindgen_add_to_stack_pointer(16)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
async function load(module, imports) {
|
||||||
|
if (typeof Response === 'function' && module instanceof Response) {
|
||||||
|
if (typeof WebAssembly.instantiateStreaming === 'function') {
|
||||||
|
return await WebAssembly.instantiateStreaming(module, imports)
|
||||||
|
}
|
||||||
|
|
||||||
|
const bytes = await module.arrayBuffer()
|
||||||
|
return await WebAssembly.instantiate(bytes, imports)
|
||||||
|
} else {
|
||||||
|
const instance = await WebAssembly.instantiate(module, imports)
|
||||||
|
|
||||||
|
if (instance instanceof WebAssembly.Instance) {
|
||||||
|
return { instance, module }
|
||||||
|
} else {
|
||||||
|
return instance
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
async function init(input) {
|
||||||
|
const imports = {}
|
||||||
|
|
||||||
|
if (
|
||||||
|
typeof input === 'string' ||
|
||||||
|
(typeof Request === 'function' && input instanceof Request) ||
|
||||||
|
(typeof URL === 'function' && input instanceof URL)
|
||||||
|
) {
|
||||||
|
input = fetch(input)
|
||||||
|
}
|
||||||
|
|
||||||
|
const { instance, module } = await load(await input, imports)
|
||||||
|
|
||||||
|
wasm = instance.exports
|
||||||
|
init.__wbindgen_wasm_module = module
|
||||||
|
|
||||||
|
return wasm
|
||||||
|
}
|
||||||
|
|
||||||
|
export default init
|
||||||
|
|
||||||
|
// Manually remove the wasm and memory references to trigger GC
|
||||||
|
export function cleanup() {
|
||||||
|
wasm = null
|
||||||
|
cachegetUint8Memory0 = null
|
||||||
|
cachegetInt32Memory0 = null
|
||||||
|
}
|
BIN
packages/integrations/image/src/vendor/squoosh/resize/squoosh_resize_bg.wasm
vendored
Normal file
BIN
packages/integrations/image/src/vendor/squoosh/resize/squoosh_resize_bg.wasm
vendored
Normal file
Binary file not shown.
BIN
packages/integrations/image/src/vendor/squoosh/rotate/rotate.wasm
vendored
Normal file
BIN
packages/integrations/image/src/vendor/squoosh/rotate/rotate.wasm
vendored
Normal file
Binary file not shown.
42
packages/integrations/image/src/vendor/squoosh/webp/webp_enc.d.ts
vendored
Normal file
42
packages/integrations/image/src/vendor/squoosh/webp/webp_enc.d.ts
vendored
Normal file
|
@ -0,0 +1,42 @@
|
||||||
|
export interface EncodeOptions {
|
||||||
|
quality: number
|
||||||
|
target_size: number
|
||||||
|
target_PSNR: number
|
||||||
|
method: number
|
||||||
|
sns_strength: number
|
||||||
|
filter_strength: number
|
||||||
|
filter_sharpness: number
|
||||||
|
filter_type: number
|
||||||
|
partitions: number
|
||||||
|
segments: number
|
||||||
|
pass: number
|
||||||
|
show_compressed: number
|
||||||
|
preprocessing: number
|
||||||
|
autofilter: number
|
||||||
|
partition_limit: number
|
||||||
|
alpha_compression: number
|
||||||
|
alpha_filtering: number
|
||||||
|
alpha_quality: number
|
||||||
|
lossless: number
|
||||||
|
exact: number
|
||||||
|
image_hint: number
|
||||||
|
emulate_jpeg_size: number
|
||||||
|
thread_level: number
|
||||||
|
low_memory: number
|
||||||
|
near_lossless: number
|
||||||
|
use_delta_palette: number
|
||||||
|
use_sharp_yuv: number
|
||||||
|
}
|
||||||
|
|
||||||
|
export interface WebPModule extends EmscriptenWasm.Module {
|
||||||
|
encode(
|
||||||
|
data: BufferSource,
|
||||||
|
width: number,
|
||||||
|
height: number,
|
||||||
|
options: EncodeOptions
|
||||||
|
): Uint8Array
|
||||||
|
}
|
||||||
|
|
||||||
|
declare var moduleFactory: EmscriptenWasm.ModuleFactory<WebPModule>
|
||||||
|
|
||||||
|
export default moduleFactory
|
1648
packages/integrations/image/src/vendor/squoosh/webp/webp_node_dec.ts
vendored
Normal file
1648
packages/integrations/image/src/vendor/squoosh/webp/webp_node_dec.ts
vendored
Normal file
File diff suppressed because it is too large
Load diff
BIN
packages/integrations/image/src/vendor/squoosh/webp/webp_node_dec.wasm
vendored
Normal file
BIN
packages/integrations/image/src/vendor/squoosh/webp/webp_node_dec.wasm
vendored
Normal file
Binary file not shown.
1833
packages/integrations/image/src/vendor/squoosh/webp/webp_node_enc.ts
vendored
Normal file
1833
packages/integrations/image/src/vendor/squoosh/webp/webp_node_enc.ts
vendored
Normal file
File diff suppressed because it is too large
Load diff
BIN
packages/integrations/image/src/vendor/squoosh/webp/webp_node_enc.wasm
vendored
Normal file
BIN
packages/integrations/image/src/vendor/squoosh/webp/webp_node_enc.wasm
vendored
Normal file
Binary file not shown.
|
@ -8,7 +8,6 @@ import slash from 'slash';
|
||||||
import type { Plugin, ResolvedConfig } from 'vite';
|
import type { Plugin, ResolvedConfig } from 'vite';
|
||||||
import type { IntegrationOptions } from './index.js';
|
import type { IntegrationOptions } from './index.js';
|
||||||
import type { InputFormat } from './loaders/index.js';
|
import type { InputFormat } from './loaders/index.js';
|
||||||
import sharp from './loaders/sharp.js';
|
|
||||||
import { metadata } from './utils/metadata.js';
|
import { metadata } from './utils/metadata.js';
|
||||||
|
|
||||||
export interface ImageMetadata {
|
export interface ImageMetadata {
|
||||||
|
@ -90,13 +89,13 @@ export function createPlugin(config: AstroConfig, options: Required<IntegrationO
|
||||||
return next();
|
return next();
|
||||||
}
|
}
|
||||||
|
|
||||||
const transform = await sharp.parseTransform(url.searchParams);
|
const transform = await globalThis.astroImage.defaultLoader.parseTransform(url.searchParams);
|
||||||
|
|
||||||
if (!transform) {
|
if (!transform) {
|
||||||
return next();
|
return next();
|
||||||
}
|
}
|
||||||
|
|
||||||
const result = await sharp.transform(file, transform);
|
const result = await globalThis.astroImage.defaultLoader.transform(file, transform);
|
||||||
|
|
||||||
res.setHeader('Content-Type', `image/${result.format}`);
|
res.setHeader('Content-Type', `image/${result.format}`);
|
||||||
res.setHeader('Cache-Control', 'max-age=360000');
|
res.setHeader('Cache-Control', 'max-age=360000');
|
||||||
|
|
|
@ -4,5 +4,5 @@ import image from '@astrojs/image';
|
||||||
// https://astro.build/config
|
// https://astro.build/config
|
||||||
export default defineConfig({
|
export default defineConfig({
|
||||||
site: 'http://localhost:3000',
|
site: 'http://localhost:3000',
|
||||||
integrations: [image({ logLevel: 'silent' })]
|
integrations: [image({ logLevel: 'silent', serviceEntryPoint: '@astrojs/image/sharp' })]
|
||||||
});
|
});
|
||||||
|
|
|
@ -5,6 +5,7 @@
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
"@astrojs/image": "workspace:*",
|
"@astrojs/image": "workspace:*",
|
||||||
"@astrojs/node": "workspace:*",
|
"@astrojs/node": "workspace:*",
|
||||||
"astro": "workspace:*"
|
"astro": "workspace:*",
|
||||||
|
"sharp": "^0.31.0"
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
@ -4,5 +4,5 @@ import image from '@astrojs/image';
|
||||||
// https://astro.build/config
|
// https://astro.build/config
|
||||||
export default defineConfig({
|
export default defineConfig({
|
||||||
site: 'http://localhost:3000',
|
site: 'http://localhost:3000',
|
||||||
integrations: [image({ logLevel: 'silent' })]
|
integrations: [image({ logLevel: 'silent', serviceEntryPoint: '@astrojs/image/sharp' })]
|
||||||
});
|
});
|
||||||
|
|
|
@ -5,6 +5,7 @@
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
"@astrojs/image": "workspace:*",
|
"@astrojs/image": "workspace:*",
|
||||||
"@astrojs/node": "workspace:*",
|
"@astrojs/node": "workspace:*",
|
||||||
"astro": "workspace:*"
|
"astro": "workspace:*",
|
||||||
|
"sharp": "^0.31.0"
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
@ -23,6 +23,6 @@ import { Image } from '@astrojs/image/components';
|
||||||
<br />
|
<br />
|
||||||
<Image id="bg-color" src="https://www.google.com/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png" width={544} height={184} format="jpeg" alt="Google" background="#333333" />
|
<Image id="bg-color" src="https://www.google.com/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png" width={544} height={184} format="jpeg" alt="Google" background="#333333" />
|
||||||
<br />
|
<br />
|
||||||
<Image id="ipsum" src="https://picsum.photos/200/300" width={200} height={300} alt="ipsum" format="jpeg" />
|
<Image id="ipsum" src="https://dummyimage.com/200x300" width={200} height={300} alt="ipsum" format="jpeg" />
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
|
|
|
@ -4,5 +4,5 @@ import image from '@astrojs/image';
|
||||||
// https://astro.build/config
|
// https://astro.build/config
|
||||||
export default defineConfig({
|
export default defineConfig({
|
||||||
site: 'http://localhost:3000',
|
site: 'http://localhost:3000',
|
||||||
integrations: [image({ logLevel: 'silent' })]
|
integrations: [image({ logLevel: 'silent', serviceEntryPoint: '@astrojs/image/sharp' })]
|
||||||
});
|
});
|
||||||
|
|
|
@ -5,6 +5,7 @@
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
"@astrojs/image": "workspace:*",
|
"@astrojs/image": "workspace:*",
|
||||||
"@astrojs/node": "workspace:*",
|
"@astrojs/node": "workspace:*",
|
||||||
"astro": "workspace:*"
|
"astro": "workspace:*",
|
||||||
|
"sharp": "^0.31.0"
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
@ -18,6 +18,6 @@ import { Picture } from '@astrojs/image/components';
|
||||||
<br />
|
<br />
|
||||||
<Picture id="bg-color" src="https://www.google.com/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png" sizes="(min-width: 640px) 50vw, 100vw" widths={[272, 544]} aspectRatio={544/184} alt="Google logo" background="rgb(51, 51, 51)" formats={['avif', 'jpeg']} />
|
<Picture id="bg-color" src="https://www.google.com/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png" sizes="(min-width: 640px) 50vw, 100vw" widths={[272, 544]} aspectRatio={544/184} alt="Google logo" background="rgb(51, 51, 51)" formats={['avif', 'jpeg']} />
|
||||||
<br />
|
<br />
|
||||||
<Picture id="ipsum" src="https://picsum.photos/200/300" sizes="100vw" widths={[100, 200]} aspectRatio={2/3} formats={["avif", "webp", "jpg"]} alt="ipsum" />
|
<Picture id="ipsum" src="https://dummyimage.com/200x300" sizes="100vw" widths={[100, 200]} aspectRatio={2/3} formats={["avif", "webp", "jpg"]} alt="ipsum" />
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
|
|
|
@ -4,5 +4,5 @@ import image from '@astrojs/image';
|
||||||
// https://astro.build/config
|
// https://astro.build/config
|
||||||
export default defineConfig({
|
export default defineConfig({
|
||||||
site: 'http://localhost:3000',
|
site: 'http://localhost:3000',
|
||||||
integrations: [image({ logLevel: 'silent' })]
|
integrations: [image({ logLevel: 'silent', serviceEntryPoint: '@astrojs/image/sharp' })]
|
||||||
});
|
});
|
||||||
|
|
|
@ -5,6 +5,7 @@
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
"@astrojs/image": "workspace:*",
|
"@astrojs/image": "workspace:*",
|
||||||
"@astrojs/node": "workspace:*",
|
"@astrojs/node": "workspace:*",
|
||||||
"astro": "workspace:*"
|
"astro": "workspace:*",
|
||||||
|
"sharp": "^0.31.0"
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
@ -4,5 +4,5 @@ import image from '@astrojs/image';
|
||||||
// https://astro.build/config
|
// https://astro.build/config
|
||||||
export default defineConfig({
|
export default defineConfig({
|
||||||
site: 'http://localhost:3000',
|
site: 'http://localhost:3000',
|
||||||
integrations: [image({ logLevel: 'silent' })]
|
integrations: [image({ logLevel: 'silent', serviceEntryPoint: '@astrojs/image/sharp' })]
|
||||||
});
|
});
|
||||||
|
|
|
@ -5,6 +5,7 @@
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
"@astrojs/image": "workspace:*",
|
"@astrojs/image": "workspace:*",
|
||||||
"@astrojs/node": "workspace:*",
|
"@astrojs/node": "workspace:*",
|
||||||
"astro": "workspace:*"
|
"astro": "workspace:*",
|
||||||
|
"sharp": "^0.31.0"
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
@ -4,5 +4,5 @@ import image from '@astrojs/image';
|
||||||
// https://astro.build/config
|
// https://astro.build/config
|
||||||
export default defineConfig({
|
export default defineConfig({
|
||||||
site: 'http://localhost:3000',
|
site: 'http://localhost:3000',
|
||||||
integrations: [image({ logLevel: 'silent' })]
|
integrations: [image({ logLevel: 'silent', serviceEntryPoint: '@astrojs/image/sharp' })]
|
||||||
});
|
});
|
||||||
|
|
|
@ -5,6 +5,7 @@
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
"@astrojs/image": "workspace:*",
|
"@astrojs/image": "workspace:*",
|
||||||
"@astrojs/node": "workspace:*",
|
"@astrojs/node": "workspace:*",
|
||||||
"astro": "workspace:*"
|
"astro": "workspace:*",
|
||||||
|
"sharp": "^0.31.0"
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
8
packages/integrations/image/test/fixtures/squoosh-service/astro.config.mjs
vendored
Normal file
8
packages/integrations/image/test/fixtures/squoosh-service/astro.config.mjs
vendored
Normal file
|
@ -0,0 +1,8 @@
|
||||||
|
import { defineConfig } from 'astro/config';
|
||||||
|
import image from '@astrojs/image';
|
||||||
|
|
||||||
|
// https://astro.build/config
|
||||||
|
export default defineConfig({
|
||||||
|
site: 'http://localhost:3000',
|
||||||
|
integrations: [image({ logLevel: 'silent' })]
|
||||||
|
});
|
10
packages/integrations/image/test/fixtures/squoosh-service/package.json
vendored
Normal file
10
packages/integrations/image/test/fixtures/squoosh-service/package.json
vendored
Normal file
|
@ -0,0 +1,10 @@
|
||||||
|
{
|
||||||
|
"name": "@test/basic-image",
|
||||||
|
"version": "0.0.0",
|
||||||
|
"private": true,
|
||||||
|
"dependencies": {
|
||||||
|
"@astrojs/image": "workspace:*",
|
||||||
|
"@astrojs/node": "workspace:*",
|
||||||
|
"astro": "workspace:*"
|
||||||
|
}
|
||||||
|
}
|
BIN
packages/integrations/image/test/fixtures/squoosh-service/public/favicon.ico
vendored
Normal file
BIN
packages/integrations/image/test/fixtures/squoosh-service/public/favicon.ico
vendored
Normal file
Binary file not shown.
After Width: | Height: | Size: 4.2 KiB |
BIN
packages/integrations/image/test/fixtures/squoosh-service/public/hero.jpg
vendored
Normal file
BIN
packages/integrations/image/test/fixtures/squoosh-service/public/hero.jpg
vendored
Normal file
Binary file not shown.
After Width: | Height: | Size: 270 KiB |
44
packages/integrations/image/test/fixtures/squoosh-service/server/server.mjs
vendored
Normal file
44
packages/integrations/image/test/fixtures/squoosh-service/server/server.mjs
vendored
Normal file
|
@ -0,0 +1,44 @@
|
||||||
|
import { createServer } from 'http';
|
||||||
|
import fs from 'fs';
|
||||||
|
import mime from 'mime';
|
||||||
|
import { handler as ssrHandler } from '../dist/server/entry.mjs';
|
||||||
|
|
||||||
|
const clientRoot = new URL('../dist/client/', import.meta.url);
|
||||||
|
|
||||||
|
async function handle(req, res) {
|
||||||
|
ssrHandler(req, res, async (err) => {
|
||||||
|
if (err) {
|
||||||
|
res.writeHead(500);
|
||||||
|
res.end(err.stack);
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
let local = new URL('.' + req.url, clientRoot);
|
||||||
|
try {
|
||||||
|
const data = await fs.promises.readFile(local);
|
||||||
|
res.writeHead(200, {
|
||||||
|
'Content-Type': mime.getType(req.url),
|
||||||
|
});
|
||||||
|
res.end(data);
|
||||||
|
} catch {
|
||||||
|
res.writeHead(404);
|
||||||
|
res.end();
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
const server = createServer((req, res) => {
|
||||||
|
handle(req, res).catch((err) => {
|
||||||
|
console.error(err);
|
||||||
|
res.writeHead(500, {
|
||||||
|
'Content-Type': 'text/plain',
|
||||||
|
});
|
||||||
|
res.end(err.toString());
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
|
server.listen(8085);
|
||||||
|
console.log('Serving at http://localhost:8085');
|
||||||
|
|
||||||
|
// Silence weird <time> warning
|
||||||
|
console.error = () => {};
|
BIN
packages/integrations/image/test/fixtures/squoosh-service/src/assets/blog/introducing astro.jpg
vendored
Normal file
BIN
packages/integrations/image/test/fixtures/squoosh-service/src/assets/blog/introducing astro.jpg
vendored
Normal file
Binary file not shown.
After Width: | Height: | Size: 270 KiB |
BIN
packages/integrations/image/test/fixtures/squoosh-service/src/assets/social.jpg
vendored
Normal file
BIN
packages/integrations/image/test/fixtures/squoosh-service/src/assets/social.jpg
vendored
Normal file
Binary file not shown.
After Width: | Height: | Size: 25 KiB |
BIN
packages/integrations/image/test/fixtures/squoosh-service/src/assets/social.png
vendored
Normal file
BIN
packages/integrations/image/test/fixtures/squoosh-service/src/assets/social.png
vendored
Normal file
Binary file not shown.
After Width: | Height: | Size: 1.4 MiB |
18
packages/integrations/image/test/fixtures/squoosh-service/src/pages/index.astro
vendored
Normal file
18
packages/integrations/image/test/fixtures/squoosh-service/src/pages/index.astro
vendored
Normal file
|
@ -0,0 +1,18 @@
|
||||||
|
---
|
||||||
|
import socialJpg from '../assets/social.jpg';
|
||||||
|
import introJpg from '../assets/blog/introducing astro.jpg';
|
||||||
|
import { Image } from '@astrojs/image/components';
|
||||||
|
---
|
||||||
|
|
||||||
|
<html>
|
||||||
|
<head>
|
||||||
|
<!-- Head Stuff -->
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<Image id="hero" src="/hero.jpg" width={768} height={414} format="webp" alt="hero" />
|
||||||
|
<br />
|
||||||
|
<Image id="social-jpg" src={socialJpg} width={506} height={253} alt="social-jpg" />
|
||||||
|
<br />
|
||||||
|
<Image id="google" src="https://www.google.com/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png" width={544} height={184} format="webp" alt="Google" />
|
||||||
|
</body>
|
||||||
|
</html>
|
|
@ -5,5 +5,5 @@ import mdx from '@astrojs/mdx';
|
||||||
// https://astro.build/config
|
// https://astro.build/config
|
||||||
export default defineConfig({
|
export default defineConfig({
|
||||||
site: 'http://localhost:3000',
|
site: 'http://localhost:3000',
|
||||||
integrations: [image({ logLevel: 'silent' }), mdx()]
|
integrations: [image({ logLevel: 'silent', serviceEntryPoint: '@astrojs/image/sharp' }), mdx()]
|
||||||
});
|
});
|
||||||
|
|
|
@ -6,6 +6,7 @@
|
||||||
"@astrojs/image": "workspace:*",
|
"@astrojs/image": "workspace:*",
|
||||||
"@astrojs/mdx": "workspace:*",
|
"@astrojs/mdx": "workspace:*",
|
||||||
"@astrojs/node": "workspace:*",
|
"@astrojs/node": "workspace:*",
|
||||||
"astro": "workspace:*"
|
"astro": "workspace:*",
|
||||||
|
"sharp": "^0.31.0"
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
@ -57,7 +57,7 @@ describe('SSG images - dev', function () {
|
||||||
query: {
|
query: {
|
||||||
w: '200',
|
w: '200',
|
||||||
h: '300',
|
h: '300',
|
||||||
href: 'https://picsum.photos/200/300',
|
href: 'https://dummyimage.com/200x300',
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
|
@ -150,7 +150,7 @@ describe('SSG images with subpath - dev', function () {
|
||||||
query: {
|
query: {
|
||||||
w: '200',
|
w: '200',
|
||||||
h: '300',
|
h: '300',
|
||||||
href: 'https://picsum.photos/200/300',
|
href: 'https://dummyimage.com/200x300',
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
|
@ -237,7 +237,7 @@ describe('SSG images - build', function () {
|
||||||
{
|
{
|
||||||
title: 'Remote without file extension',
|
title: 'Remote without file extension',
|
||||||
id: '#ipsum',
|
id: '#ipsum',
|
||||||
regex: /^\/assets\/300_\w{4,10}/,
|
regex: /^\/assets\/200x300_\w{4,10}/,
|
||||||
size: { width: 200, height: 300, type: 'jpg' },
|
size: { width: 200, height: 300, type: 'jpg' },
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
|
@ -313,7 +313,7 @@ describe('SSG images with subpath - build', function () {
|
||||||
{
|
{
|
||||||
title: 'Remote without file extension',
|
title: 'Remote without file extension',
|
||||||
id: '#ipsum',
|
id: '#ipsum',
|
||||||
regex: /^\/docs\/assets\/300_\w{4,10}/,
|
regex: /^\/docs\/assets\/200x300_\w{4,10}/,
|
||||||
size: { width: 200, height: 300, type: 'jpg' },
|
size: { width: 200, height: 300, type: 'jpg' },
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
|
|
|
@ -52,7 +52,7 @@ describe('SSR images - build', async function () {
|
||||||
query: {
|
query: {
|
||||||
w: '200',
|
w: '200',
|
||||||
h: '300',
|
h: '300',
|
||||||
href: 'https://picsum.photos/200/300',
|
href: 'https://dummyimage.com/200x300',
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
|
@ -168,7 +168,7 @@ describe('SSR images with subpath - build', function () {
|
||||||
query: {
|
query: {
|
||||||
w: '200',
|
w: '200',
|
||||||
h: '300',
|
h: '300',
|
||||||
href: 'https://picsum.photos/200/300',
|
href: 'https://dummyimage.com/200x300',
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
|
|
|
@ -65,7 +65,7 @@ describe('SSR images - dev', function () {
|
||||||
query: {
|
query: {
|
||||||
w: '200',
|
w: '200',
|
||||||
h: '300',
|
h: '300',
|
||||||
href: 'https://picsum.photos/200/300',
|
href: 'https://dummyimage.com/200x300',
|
||||||
},
|
},
|
||||||
contentType: 'image/jpeg',
|
contentType: 'image/jpeg',
|
||||||
},
|
},
|
||||||
|
@ -180,7 +180,7 @@ describe('SSR images with subpath - dev', function () {
|
||||||
query: {
|
query: {
|
||||||
w: '200',
|
w: '200',
|
||||||
h: '300',
|
h: '300',
|
||||||
href: 'https://picsum.photos/200/300',
|
href: 'https://dummyimage.com/200x300',
|
||||||
},
|
},
|
||||||
contentType: 'image/jpeg',
|
contentType: 'image/jpeg',
|
||||||
},
|
},
|
||||||
|
|
|
@ -216,7 +216,7 @@ describe('SSG pictures - build', function () {
|
||||||
{
|
{
|
||||||
title: 'Remote without file extension',
|
title: 'Remote without file extension',
|
||||||
id: '#ipsum',
|
id: '#ipsum',
|
||||||
regex: /^\/assets\/300_\w{4,10}/,
|
regex: /^\/assets\/200x300_\w{4,10}/,
|
||||||
size: { width: 200, height: 300, type: 'jpg' },
|
size: { width: 200, height: 300, type: 'jpg' },
|
||||||
alt: 'ipsum',
|
alt: 'ipsum',
|
||||||
},
|
},
|
||||||
|
@ -311,7 +311,7 @@ describe('SSG pictures with subpath - build', function () {
|
||||||
{
|
{
|
||||||
title: 'Remote without file extension',
|
title: 'Remote without file extension',
|
||||||
id: '#ipsum',
|
id: '#ipsum',
|
||||||
regex: /^\/docs\/assets\/300_\w{4,10}/,
|
regex: /^\/docs\/assets\/200x300_\w{4,10}/,
|
||||||
size: { width: 200, height: 300, type: 'jpg' },
|
size: { width: 200, height: 300, type: 'jpg' },
|
||||||
alt: 'ipsum',
|
alt: 'ipsum',
|
||||||
},
|
},
|
||||||
|
|
|
@ -49,7 +49,7 @@ describe('SSR pictures - build', function () {
|
||||||
query: {
|
query: {
|
||||||
w: '200',
|
w: '200',
|
||||||
h: '300',
|
h: '300',
|
||||||
href: 'https://picsum.photos/200/300',
|
href: 'https://dummyimage.com/200x300',
|
||||||
},
|
},
|
||||||
alt: 'ipsum',
|
alt: 'ipsum',
|
||||||
},
|
},
|
||||||
|
@ -153,7 +153,7 @@ describe('SSR pictures with subpath - build', function () {
|
||||||
query: {
|
query: {
|
||||||
w: '200',
|
w: '200',
|
||||||
h: '300',
|
h: '300',
|
||||||
href: 'https://picsum.photos/200/300',
|
href: 'https://dummyimage.com/200x300',
|
||||||
},
|
},
|
||||||
alt: 'ipsum',
|
alt: 'ipsum',
|
||||||
},
|
},
|
||||||
|
|
|
@ -62,7 +62,7 @@ describe('SSR pictures - dev', function () {
|
||||||
f: 'jpg',
|
f: 'jpg',
|
||||||
w: '200',
|
w: '200',
|
||||||
h: '300',
|
h: '300',
|
||||||
href: 'https://picsum.photos/200/300',
|
href: 'https://dummyimage.com/200x300',
|
||||||
},
|
},
|
||||||
contentType: 'image/jpeg',
|
contentType: 'image/jpeg',
|
||||||
alt: 'ipsum',
|
alt: 'ipsum',
|
||||||
|
@ -183,7 +183,7 @@ describe('SSR pictures with subpath - dev', function () {
|
||||||
f: 'jpg',
|
f: 'jpg',
|
||||||
w: '200',
|
w: '200',
|
||||||
h: '300',
|
h: '300',
|
||||||
href: 'https://picsum.photos/200/300',
|
href: 'https://dummyimage.com/200x300',
|
||||||
},
|
},
|
||||||
contentType: 'image/jpeg',
|
contentType: 'image/jpeg',
|
||||||
alt: 'ipsum',
|
alt: 'ipsum',
|
||||||
|
|
61
packages/integrations/image/test/squoosh-service.test.js
Normal file
61
packages/integrations/image/test/squoosh-service.test.js
Normal file
|
@ -0,0 +1,61 @@
|
||||||
|
import { expect } from 'chai';
|
||||||
|
import * as cheerio from 'cheerio';
|
||||||
|
import { loadFixture } from './test-utils.js';
|
||||||
|
|
||||||
|
describe('Squoosh service', function () {
|
||||||
|
let fixture;
|
||||||
|
let devServer;
|
||||||
|
let $;
|
||||||
|
|
||||||
|
before(async () => {
|
||||||
|
fixture = await loadFixture({ root: './fixtures/basic-image/' });
|
||||||
|
devServer = await fixture.startDevServer();
|
||||||
|
const html = await fixture.fetch('/').then((res) => res.text());
|
||||||
|
$ = cheerio.load(html);
|
||||||
|
});
|
||||||
|
|
||||||
|
after(async () => {
|
||||||
|
await devServer.stop();
|
||||||
|
});
|
||||||
|
|
||||||
|
[
|
||||||
|
{
|
||||||
|
title: 'Local images',
|
||||||
|
id: '#social-jpg',
|
||||||
|
url: '/@astroimage/assets/social.jpg',
|
||||||
|
query: { f: 'jpg', w: '506', h: '253' },
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: 'Remote images',
|
||||||
|
id: '#google',
|
||||||
|
url: '/_image',
|
||||||
|
query: {
|
||||||
|
f: 'webp',
|
||||||
|
w: '544',
|
||||||
|
h: '184',
|
||||||
|
href: 'https://www.google.com/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png',
|
||||||
|
},
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: 'Public images',
|
||||||
|
id: '#hero',
|
||||||
|
url: '/_image',
|
||||||
|
query: { f: 'webp', w: '768', h: '414', href: '/hero.jpg' },
|
||||||
|
},
|
||||||
|
].forEach(({ title, id, url, query }) => {
|
||||||
|
it(title, () => {
|
||||||
|
const image = $(id);
|
||||||
|
|
||||||
|
const src = image.attr('src');
|
||||||
|
const [route, params] = src.split('?');
|
||||||
|
|
||||||
|
expect(route).to.equal(url);
|
||||||
|
|
||||||
|
const searchParams = new URLSearchParams(params);
|
||||||
|
|
||||||
|
for (const [key, value] of Object.entries(query)) {
|
||||||
|
expect(searchParams.get(key)).to.equal(value);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
});
|
||||||
|
});
|
679
pnpm-lock.yaml
679
pnpm-lock.yaml
File diff suppressed because it is too large
Load diff
Loading…
Reference in a new issue