@squoosh-kit/vite-plugin 0.0.33
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +100 -0
- package/dist/index.js +101 -0
- package/dist/index.js.map +10 -0
- package/package.json +45 -0
package/README.md
ADDED
|
@@ -0,0 +1,100 @@
|
|
|
1
|
+
# @squoosh-kit/vite-plugin
|
|
2
|
+
|
|
3
|
+
Vite plugin that automatically configures `@squoosh-kit` worker URLs, ensuring workers load correctly in both development and production builds.
|
|
4
|
+
|
|
5
|
+
## Installation
|
|
6
|
+
|
|
7
|
+
```bash
|
|
8
|
+
npm install @squoosh-kit/vite-plugin
|
|
9
|
+
# or
|
|
10
|
+
bun add @squoosh-kit/vite-plugin
|
|
11
|
+
# or
|
|
12
|
+
pnpm add @squoosh-kit/vite-plugin
|
|
13
|
+
```
|
|
14
|
+
|
|
15
|
+
## Usage
|
|
16
|
+
|
|
17
|
+
Add the plugin to your `vite.config.ts`:
|
|
18
|
+
|
|
19
|
+
```typescript
|
|
20
|
+
import { defineConfig } from 'vite';
|
|
21
|
+
import squooshKit from '@squoosh-kit/vite-plugin';
|
|
22
|
+
|
|
23
|
+
export default defineConfig({
|
|
24
|
+
plugins: [
|
|
25
|
+
squooshKit(), // That's it!
|
|
26
|
+
],
|
|
27
|
+
});
|
|
28
|
+
```
|
|
29
|
+
|
|
30
|
+
The plugin automatically:
|
|
31
|
+
|
|
32
|
+
- ✅ Resolves worker file paths using Vite's module resolution
|
|
33
|
+
- ✅ Configures `@squoosh-kit/resize` and `@squoosh-kit/webp` workers
|
|
34
|
+
- ✅ Works in both development and production builds
|
|
35
|
+
- ✅ Maintains full backward compatibility
|
|
36
|
+
|
|
37
|
+
## How It Works
|
|
38
|
+
|
|
39
|
+
The plugin automatically:
|
|
40
|
+
|
|
41
|
+
1. Detects your app's entry point (e.g., `src/main.tsx`)
|
|
42
|
+
2. Injects worker configuration code at the top of the entry file
|
|
43
|
+
3. Resolves worker URLs using `import.meta.url` (which Vite transforms correctly)
|
|
44
|
+
4. Calls `configureResizeWorker()` and `configureWebpWorker()` automatically
|
|
45
|
+
|
|
46
|
+
The configuration runs before your app code, ensuring workers are ready when you use them.
|
|
47
|
+
|
|
48
|
+
## Options
|
|
49
|
+
|
|
50
|
+
```typescript
|
|
51
|
+
squooshKit({
|
|
52
|
+
// Whether to auto-configure workers automatically (default: true)
|
|
53
|
+
// If false, you must manually import '@squoosh-kit/vite-plugin/auto-config'
|
|
54
|
+
autoConfigure: true,
|
|
55
|
+
});
|
|
56
|
+
```
|
|
57
|
+
|
|
58
|
+
## Manual Configuration (Alternative)
|
|
59
|
+
|
|
60
|
+
If you prefer manual control, you can disable auto-configuration and import the config module:
|
|
61
|
+
|
|
62
|
+
```typescript
|
|
63
|
+
// vite.config.ts
|
|
64
|
+
import squooshKit from '@squoosh-kit/vite-plugin';
|
|
65
|
+
|
|
66
|
+
export default defineConfig({
|
|
67
|
+
plugins: [squooshKit({ autoConfigure: false })],
|
|
68
|
+
});
|
|
69
|
+
```
|
|
70
|
+
|
|
71
|
+
```typescript
|
|
72
|
+
// main.tsx or App.tsx
|
|
73
|
+
import '@squoosh-kit/vite-plugin/auto-config';
|
|
74
|
+
// Now use @squoosh-kit normally
|
|
75
|
+
```
|
|
76
|
+
|
|
77
|
+
## Requirements
|
|
78
|
+
|
|
79
|
+
- Vite 4.0.0 or higher
|
|
80
|
+
- `@squoosh-kit/resize` and/or `@squoosh-kit/webp` installed
|
|
81
|
+
|
|
82
|
+
## Troubleshooting
|
|
83
|
+
|
|
84
|
+
### Workers still not loading
|
|
85
|
+
|
|
86
|
+
1. Ensure the plugin is added to your `vite.config.ts`
|
|
87
|
+
2. Check that `@squoosh-kit/resize` and/or `@squoosh-kit/webp` are installed
|
|
88
|
+
3. Verify the packages are in your `node_modules` directory
|
|
89
|
+
|
|
90
|
+
### Plugin not working in production
|
|
91
|
+
|
|
92
|
+
The plugin works in both dev and production. If you're seeing issues:
|
|
93
|
+
|
|
94
|
+
- Check your build output for the auto-configuration script
|
|
95
|
+
- Verify worker files are included in your build output
|
|
96
|
+
- Check browser console for any configuration errors
|
|
97
|
+
|
|
98
|
+
## License
|
|
99
|
+
|
|
100
|
+
MIT
|
package/dist/index.js
ADDED
|
@@ -0,0 +1,101 @@
|
|
|
1
|
+
// src/index.ts
|
|
2
|
+
var VIRTUAL_MODULE_ID = "virtual:@squoosh-kit/vite-plugin/auto-config";
|
|
3
|
+
var RESOLVED_VIRTUAL_MODULE_ID = "\x00" + VIRTUAL_MODULE_ID;
|
|
4
|
+
function squooshKit(options = {}) {
|
|
5
|
+
const { autoConfigure = true } = options;
|
|
6
|
+
const entryPoints = new Set;
|
|
7
|
+
let hasInjected = false;
|
|
8
|
+
return {
|
|
9
|
+
name: "@squoosh-kit/vite-plugin",
|
|
10
|
+
enforce: "pre",
|
|
11
|
+
buildStart() {
|
|
12
|
+
entryPoints.clear();
|
|
13
|
+
hasInjected = false;
|
|
14
|
+
},
|
|
15
|
+
configResolved(config) {
|
|
16
|
+
const input = config.build.rollupOptions.input;
|
|
17
|
+
if (input) {
|
|
18
|
+
if (typeof input === "string") {
|
|
19
|
+
entryPoints.add(input);
|
|
20
|
+
} else if (Array.isArray(input)) {
|
|
21
|
+
input.forEach((entry) => {
|
|
22
|
+
if (typeof entry === "string") {
|
|
23
|
+
entryPoints.add(entry);
|
|
24
|
+
}
|
|
25
|
+
});
|
|
26
|
+
} else {
|
|
27
|
+
Object.values(input).forEach((entry) => {
|
|
28
|
+
if (typeof entry === "string") {
|
|
29
|
+
entryPoints.add(entry);
|
|
30
|
+
}
|
|
31
|
+
});
|
|
32
|
+
}
|
|
33
|
+
}
|
|
34
|
+
if (config.root) {
|
|
35
|
+
const commonEntries = [
|
|
36
|
+
"src/main.ts",
|
|
37
|
+
"src/main.tsx",
|
|
38
|
+
"src/main.js",
|
|
39
|
+
"src/main.jsx",
|
|
40
|
+
"src/index.ts",
|
|
41
|
+
"src/index.tsx",
|
|
42
|
+
"src/index.js",
|
|
43
|
+
"src/index.jsx",
|
|
44
|
+
"src/app.ts",
|
|
45
|
+
"src/app.tsx"
|
|
46
|
+
];
|
|
47
|
+
commonEntries.forEach((entry) => {
|
|
48
|
+
entryPoints.add(entry);
|
|
49
|
+
});
|
|
50
|
+
}
|
|
51
|
+
},
|
|
52
|
+
resolveId(id) {
|
|
53
|
+
if (id === VIRTUAL_MODULE_ID) {
|
|
54
|
+
return RESOLVED_VIRTUAL_MODULE_ID;
|
|
55
|
+
}
|
|
56
|
+
return null;
|
|
57
|
+
},
|
|
58
|
+
async load(id) {
|
|
59
|
+
if (id === RESOLVED_VIRTUAL_MODULE_ID) {
|
|
60
|
+
return generateAutoConfigCode();
|
|
61
|
+
}
|
|
62
|
+
return null;
|
|
63
|
+
},
|
|
64
|
+
transform(code, id) {
|
|
65
|
+
if (!autoConfigure || hasInjected) {
|
|
66
|
+
return null;
|
|
67
|
+
}
|
|
68
|
+
const isEntryPoint = entryPoints.has(id) || entryPoints.has(id.replace(/\\/g, "/")) || /[/\\]src[/\\](main|index|app)\.(ts|tsx|js|jsx)$/.test(id) || id.includes("main.") && (code.includes("ReactDOM") || code.includes("createRoot"));
|
|
69
|
+
if (isEntryPoint) {
|
|
70
|
+
hasInjected = true;
|
|
71
|
+
const configCode = generateAutoConfigCode();
|
|
72
|
+
return {
|
|
73
|
+
code: configCode + `
|
|
74
|
+
|
|
75
|
+
` + code,
|
|
76
|
+
map: null
|
|
77
|
+
};
|
|
78
|
+
}
|
|
79
|
+
return null;
|
|
80
|
+
}
|
|
81
|
+
};
|
|
82
|
+
}
|
|
83
|
+
function generateAutoConfigCode() {
|
|
84
|
+
return `// Auto-configured by @squoosh-kit/vite-plugin
|
|
85
|
+
import { configureResizeWorker } from '@squoosh-kit/resize';
|
|
86
|
+
import { configureWebpWorker } from '@squoosh-kit/webp';
|
|
87
|
+
|
|
88
|
+
// Resolve worker paths - Vite will transform these correctly during build
|
|
89
|
+
const resizeWorkerUrl = new URL('@squoosh-kit/resize/dist/resize.worker.browser.mjs', import.meta.url).href;
|
|
90
|
+
const webpWorkerUrl = new URL('@squoosh-kit/webp/dist/webp.worker.browser.mjs', import.meta.url).href;
|
|
91
|
+
|
|
92
|
+
// Configure workers immediately
|
|
93
|
+
configureResizeWorker(resizeWorkerUrl);
|
|
94
|
+
configureWebpWorker(webpWorkerUrl);`;
|
|
95
|
+
}
|
|
96
|
+
export {
|
|
97
|
+
squooshKit as default
|
|
98
|
+
};
|
|
99
|
+
|
|
100
|
+
//# debugId=478346E675C2FED564756E2164756E21
|
|
101
|
+
//# sourceMappingURL=index.js.map
|
|
@@ -0,0 +1,10 @@
|
|
|
1
|
+
{
|
|
2
|
+
"version": 3,
|
|
3
|
+
"sources": ["../src/index.ts"],
|
|
4
|
+
"sourcesContent": [
|
|
5
|
+
"/**\n * @squoosh-kit/vite-plugin\n *\n * Vite plugin that automatically configures squoosh-kit worker URLs.\n * This plugin resolves worker paths using Vite's module resolution,\n * ensuring workers load correctly in both development and production builds.\n */\n\nimport type { Plugin, ResolvedConfig } from 'vite';\n\nexport interface SquooshKitPluginOptions {\n /**\n * Whether to auto-configure workers automatically.\n * If true, configuration code is injected into entry points.\n * If false, you must manually import '@squoosh-kit/vite-plugin/auto-config' in your app.\n * @default true\n */\n autoConfigure?: boolean;\n}\n\nconst VIRTUAL_MODULE_ID = 'virtual:@squoosh-kit/vite-plugin/auto-config';\nconst RESOLVED_VIRTUAL_MODULE_ID = '\\0' + VIRTUAL_MODULE_ID;\n\n/**\n * Vite plugin for automatic squoosh-kit worker configuration.\n *\n * This plugin automatically resolves and configures worker URLs for\n * @squoosh-kit/resize and @squoosh-kit/webp packages, ensuring they\n * work correctly in both development and production builds.\n *\n * @example\n * ```ts\n * // vite.config.ts\n * import { defineConfig } from 'vite';\n * import squooshKit from '@squoosh-kit/vite-plugin';\n *\n * export default defineConfig({\n * plugins: [squooshKit()],\n * });\n * ```\n */\nexport default function squooshKit(\n options: SquooshKitPluginOptions = {}\n): Plugin {\n const { autoConfigure = true } = options;\n\n // Per-plugin-instance state\n const entryPoints = new Set<string>();\n let hasInjected = false;\n\n return {\n name: '@squoosh-kit/vite-plugin',\n enforce: 'pre',\n\n buildStart() {\n // Reset state for each build\n entryPoints.clear();\n hasInjected = false;\n },\n\n configResolved(config: ResolvedConfig) {\n // Track entry points from Vite config\n const input = config.build.rollupOptions.input;\n if (input) {\n if (typeof input === 'string') {\n entryPoints.add(input);\n } else if (Array.isArray(input)) {\n input.forEach((entry) => {\n if (typeof entry === 'string') {\n entryPoints.add(entry);\n }\n });\n } else {\n // Object format\n Object.values(input).forEach((entry) => {\n if (typeof entry === 'string') {\n entryPoints.add(entry);\n }\n });\n }\n }\n\n // Also track default entry points\n if (config.root) {\n const commonEntries = [\n 'src/main.ts',\n 'src/main.tsx',\n 'src/main.js',\n 'src/main.jsx',\n 'src/index.ts',\n 'src/index.tsx',\n 'src/index.js',\n 'src/index.jsx',\n 'src/app.ts',\n 'src/app.tsx',\n ];\n commonEntries.forEach((entry) => {\n entryPoints.add(entry);\n });\n }\n },\n\n resolveId(id: string) {\n if (id === VIRTUAL_MODULE_ID) {\n return RESOLVED_VIRTUAL_MODULE_ID;\n }\n return null;\n },\n\n async load(id: string) {\n if (id === RESOLVED_VIRTUAL_MODULE_ID) {\n return generateAutoConfigCode();\n }\n return null;\n },\n\n transform(code: string, id: string) {\n if (!autoConfigure || hasInjected) {\n return null;\n }\n\n // Check if this is an entry point\n const isEntryPoint =\n entryPoints.has(id) ||\n entryPoints.has(id.replace(/\\\\/g, '/')) ||\n /[/\\\\]src[/\\\\](main|index|app)\\.(ts|tsx|js|jsx)$/.test(id) ||\n (id.includes('main.') &&\n (code.includes('ReactDOM') || code.includes('createRoot')));\n\n // Only inject once at the first entry point\n if (isEntryPoint) {\n hasInjected = true;\n const configCode = generateAutoConfigCode();\n return {\n code: configCode + '\\n\\n' + code,\n map: null,\n };\n }\n\n return null;\n },\n };\n}\n\n/**\n * Generates the auto-configuration code that resolves and configures worker URLs.\n */\nfunction generateAutoConfigCode(): string {\n return `// Auto-configured by @squoosh-kit/vite-plugin\nimport { configureResizeWorker } from '@squoosh-kit/resize';\nimport { configureWebpWorker } from '@squoosh-kit/webp';\n\n// Resolve worker paths - Vite will transform these correctly during build\nconst resizeWorkerUrl = new URL('@squoosh-kit/resize/dist/resize.worker.browser.mjs', import.meta.url).href;\nconst webpWorkerUrl = new URL('@squoosh-kit/webp/dist/webp.worker.browser.mjs', import.meta.url).href;\n\n// Configure workers immediately\nconfigureResizeWorker(resizeWorkerUrl);\nconfigureWebpWorker(webpWorkerUrl);`;\n}\n"
|
|
6
|
+
],
|
|
7
|
+
"mappings": ";AAoBA,IAAM,oBAAoB;AAC1B,IAAM,6BAA6B,SAAO;AAoB1C,SAAwB,UAAU,CAChC,UAAmC,CAAC,GAC5B;AAAA,EACR,QAAQ,gBAAgB,SAAS;AAAA,EAGjC,MAAM,cAAc,IAAI;AAAA,EACxB,IAAI,cAAc;AAAA,EAElB,OAAO;AAAA,IACL,MAAM;AAAA,IACN,SAAS;AAAA,IAET,UAAU,GAAG;AAAA,MAEX,YAAY,MAAM;AAAA,MAClB,cAAc;AAAA;AAAA,IAGhB,cAAc,CAAC,QAAwB;AAAA,MAErC,MAAM,QAAQ,OAAO,MAAM,cAAc;AAAA,MACzC,IAAI,OAAO;AAAA,QACT,IAAI,OAAO,UAAU,UAAU;AAAA,UAC7B,YAAY,IAAI,KAAK;AAAA,QACvB,EAAO,SAAI,MAAM,QAAQ,KAAK,GAAG;AAAA,UAC/B,MAAM,QAAQ,CAAC,UAAU;AAAA,YACvB,IAAI,OAAO,UAAU,UAAU;AAAA,cAC7B,YAAY,IAAI,KAAK;AAAA,YACvB;AAAA,WACD;AAAA,QACH,EAAO;AAAA,UAEL,OAAO,OAAO,KAAK,EAAE,QAAQ,CAAC,UAAU;AAAA,YACtC,IAAI,OAAO,UAAU,UAAU;AAAA,cAC7B,YAAY,IAAI,KAAK;AAAA,YACvB;AAAA,WACD;AAAA;AAAA,MAEL;AAAA,MAGA,IAAI,OAAO,MAAM;AAAA,QACf,MAAM,gBAAgB;AAAA,UACpB;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,QACF;AAAA,QACA,cAAc,QAAQ,CAAC,UAAU;AAAA,UAC/B,YAAY,IAAI,KAAK;AAAA,SACtB;AAAA,MACH;AAAA;AAAA,IAGF,SAAS,CAAC,IAAY;AAAA,MACpB,IAAI,OAAO,mBAAmB;AAAA,QAC5B,OAAO;AAAA,MACT;AAAA,MACA,OAAO;AAAA;AAAA,SAGH,KAAI,CAAC,IAAY;AAAA,MACrB,IAAI,OAAO,4BAA4B;AAAA,QACrC,OAAO,uBAAuB;AAAA,MAChC;AAAA,MACA,OAAO;AAAA;AAAA,IAGT,SAAS,CAAC,MAAc,IAAY;AAAA,MAClC,IAAI,CAAC,iBAAiB,aAAa;AAAA,QACjC,OAAO;AAAA,MACT;AAAA,MAGA,MAAM,eACJ,YAAY,IAAI,EAAE,KAClB,YAAY,IAAI,GAAG,QAAQ,OAAO,GAAG,CAAC,KACtC,kDAAkD,KAAK,EAAE,KACxD,GAAG,SAAS,OAAO,MACjB,KAAK,SAAS,UAAU,KAAK,KAAK,SAAS,YAAY;AAAA,MAG5D,IAAI,cAAc;AAAA,QAChB,cAAc;AAAA,QACd,MAAM,aAAa,uBAAuB;AAAA,QAC1C,OAAO;AAAA,UACL,MAAM,aAAa;AAAA;AAAA,IAAS;AAAA,UAC5B,KAAK;AAAA,QACP;AAAA,MACF;AAAA,MAEA,OAAO;AAAA;AAAA,EAEX;AAAA;AAMF,SAAS,sBAAsB,GAAW;AAAA,EACxC,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;",
|
|
8
|
+
"debugId": "478346E675C2FED564756E2164756E21",
|
|
9
|
+
"names": []
|
|
10
|
+
}
|
package/package.json
ADDED
|
@@ -0,0 +1,45 @@
|
|
|
1
|
+
{
|
|
2
|
+
"name": "@squoosh-kit/vite-plugin",
|
|
3
|
+
"version": "0.0.33",
|
|
4
|
+
"type": "module",
|
|
5
|
+
"description": "Vite plugin for automatic squoosh-kit worker configuration",
|
|
6
|
+
"author": "Bartosz Nowak <bnowak008@gmail.com>",
|
|
7
|
+
"license": "MIT",
|
|
8
|
+
"repository": {
|
|
9
|
+
"type": "git",
|
|
10
|
+
"url": "https://github.com/bnowak008/squoosh-kit.git",
|
|
11
|
+
"directory": "packages/vite-plugin"
|
|
12
|
+
},
|
|
13
|
+
"homepage": "https://github.com/bnowak008/squoosh-kit/tree/main/packages/vite-plugin#readme",
|
|
14
|
+
"publishConfig": {
|
|
15
|
+
"access": "public",
|
|
16
|
+
"registry": "https://registry.npmjs.org/"
|
|
17
|
+
},
|
|
18
|
+
"main": "./dist/index.js",
|
|
19
|
+
"types": "./dist/index.d.ts",
|
|
20
|
+
"exports": {
|
|
21
|
+
".": {
|
|
22
|
+
"types": "./dist/index.d.ts",
|
|
23
|
+
"import": "./dist/index.js"
|
|
24
|
+
}
|
|
25
|
+
},
|
|
26
|
+
"files": [
|
|
27
|
+
"dist/**",
|
|
28
|
+
"README.md"
|
|
29
|
+
],
|
|
30
|
+
"sideEffects": false,
|
|
31
|
+
"scripts": {
|
|
32
|
+
"build": "bun run build.ts",
|
|
33
|
+
"clean:local": "rm -rf dist node_modules .bun/install/cache bun.lockb bun.lock *.tsbuildinfo",
|
|
34
|
+
"prepack": "bun run build",
|
|
35
|
+
"test": "bun test"
|
|
36
|
+
},
|
|
37
|
+
"peerDependencies": {
|
|
38
|
+
"vite": "^4.0.0 || ^5.0.0"
|
|
39
|
+
},
|
|
40
|
+
"devDependencies": {
|
|
41
|
+
"@types/node": "^24.9.1",
|
|
42
|
+
"typescript": "^5.6.3",
|
|
43
|
+
"vite": "^5.4.11"
|
|
44
|
+
}
|
|
45
|
+
}
|