vite-plugin-storybook-nextjs 0.0.2 → 0.0.3
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/dist/index.d.ts +12 -0
- package/dist/index.js +143 -208
- package/dist/plugins/next-image/alias/image-context.d.ts +13 -0
- package/dist/plugins/next-image/alias/image-context.js +1 -1
- package/dist/plugins/next-image/alias/image-default-loader.d.ts +5 -0
- package/dist/plugins/next-image/alias/next-image.d.ts +30 -0
- package/dist/plugins/next-image/alias/next-legacy-image.d.ts +6 -0
- package/package.json +4 -4
- package/dist/index.cjs +0 -960
- package/dist/plugins/next-image/alias/image-context.cjs +0 -8
- package/dist/plugins/next-image/alias/image-default-loader.cjs +0 -40
- package/dist/plugins/next-image/alias/next-image.cjs +0 -53
- package/dist/plugins/next-image/alias/next-legacy-image.cjs +0 -27
package/dist/index.d.ts
ADDED
|
@@ -0,0 +1,12 @@
|
|
|
1
|
+
import { Plugin } from 'vite';
|
|
2
|
+
|
|
3
|
+
type VitePluginOptions = {
|
|
4
|
+
/**
|
|
5
|
+
* Provide the path to your Next.js project directory
|
|
6
|
+
* @default process.cwd()
|
|
7
|
+
*/
|
|
8
|
+
dir?: string;
|
|
9
|
+
};
|
|
10
|
+
declare function VitePlugin({ dir }?: VitePluginOptions): Plugin[];
|
|
11
|
+
|
|
12
|
+
export { VitePlugin as default };
|
package/dist/index.js
CHANGED
|
@@ -1,24 +1,26 @@
|
|
|
1
1
|
import path, { resolve, join } from 'node:path';
|
|
2
|
-
import {
|
|
3
|
-
import {
|
|
4
|
-
import
|
|
5
|
-
import
|
|
6
|
-
import
|
|
7
|
-
import {
|
|
8
|
-
import
|
|
9
|
-
import
|
|
10
|
-
import {
|
|
11
|
-
import {
|
|
12
|
-
import {
|
|
13
|
-
import
|
|
14
|
-
import
|
|
15
|
-
import
|
|
16
|
-
import
|
|
17
|
-
import
|
|
18
|
-
import {
|
|
19
|
-
import {
|
|
20
|
-
import
|
|
2
|
+
import { createRequire } from 'node:module';
|
|
3
|
+
import { getDefineEnv } from 'next/dist/build/webpack/plugins/define-env-plugin.js';
|
|
4
|
+
import fs3 from 'node:fs';
|
|
5
|
+
import nextEnv from '@next/env';
|
|
6
|
+
import Log from 'next/dist/build/output/log.js';
|
|
7
|
+
import { transform, loadBindings, lockfilePatchPromise } from 'next/dist/build/swc/index.js';
|
|
8
|
+
import { PHASE_DEVELOPMENT_SERVER, PHASE_TEST, PHASE_PRODUCTION_BUILD } from 'next/dist/shared/lib/constants.js';
|
|
9
|
+
import fs2 from 'node:fs/promises';
|
|
10
|
+
import { fetchCSSFromGoogleFonts } from 'next/dist/compiled/@next/font/dist/google/fetch-css-from-google-fonts.js';
|
|
11
|
+
import { getFontAxes } from 'next/dist/compiled/@next/font/dist/google/get-font-axes.js';
|
|
12
|
+
import { getGoogleFontsUrl } from 'next/dist/compiled/@next/font/dist/google/get-google-fonts-url.js';
|
|
13
|
+
import { validateGoogleFontFunctionCall } from 'next/dist/compiled/@next/font/dist/google/validate-google-font-function-call.js';
|
|
14
|
+
import loaderUtils from 'next/dist/compiled/loader-utils3/index.js';
|
|
15
|
+
import { validateLocalFontFunctionCall } from 'next/dist/compiled/@next/font/dist/local/validate-local-font-function-call.js';
|
|
16
|
+
import { dedent } from 'ts-dedent';
|
|
17
|
+
import loadJsConfig from 'next/dist/build/load-jsconfig.js';
|
|
18
|
+
import { findPagesDir } from 'next/dist/lib/find-pages-dir.js';
|
|
19
|
+
import { getSupportedBrowsers } from 'next/dist/build/utils.js';
|
|
20
|
+
import { getParserOptions } from 'next/dist/build/swc/options.js';
|
|
21
|
+
import loadConfig from 'next/dist/server/config.js';
|
|
21
22
|
import { cpus } from 'node:os';
|
|
23
|
+
import { decode } from 'node:querystring';
|
|
22
24
|
import { fileURLToPath, URL } from 'node:url';
|
|
23
25
|
import imageSizeOf from 'image-size';
|
|
24
26
|
|
|
@@ -28,16 +30,9 @@ var __require = /* @__PURE__ */ ((x) => typeof require !== "undefined" ? require
|
|
|
28
30
|
if (typeof require !== "undefined") return require.apply(this, arguments);
|
|
29
31
|
throw Error('Dynamic require of "' + x + '" is not supported');
|
|
30
32
|
});
|
|
33
|
+
var { loadEnvConfig } = nextEnv;
|
|
31
34
|
var nextDistPath = /(next[\\/]dist[\\/]shared[\\/]lib)|(next[\\/]dist[\\/]client)|(next[\\/]dist[\\/]pages)/;
|
|
32
|
-
async function
|
|
33
|
-
const conf = await loadConfig(PHASE_TEST, dir);
|
|
34
|
-
return conf;
|
|
35
|
-
}
|
|
36
|
-
async function getConfigPaths(dir) {
|
|
37
|
-
return CONFIG_FILES.map((file) => join(dir, file));
|
|
38
|
-
}
|
|
39
|
-
async function loadEnvironmentConfig(dir) {
|
|
40
|
-
const dev = false;
|
|
35
|
+
async function loadEnvironmentConfig(dir, dev) {
|
|
41
36
|
return loadEnvConfig(dir, dev, Log);
|
|
42
37
|
}
|
|
43
38
|
async function loadSWCBindingsEagerly(nextConfig) {
|
|
@@ -49,43 +44,69 @@ async function loadSWCBindingsEagerly(nextConfig) {
|
|
|
49
44
|
function shouldOutputCommonJs(filename) {
|
|
50
45
|
return filename.endsWith(".cjs") || nextDistPath.test(filename);
|
|
51
46
|
}
|
|
47
|
+
async function loadClosestPackageJson(dir, attempts = 1) {
|
|
48
|
+
if (attempts > 5) {
|
|
49
|
+
throw new Error("Can't resolve main package.json file");
|
|
50
|
+
}
|
|
51
|
+
const mainPath = attempts === 1 ? ["."] : new Array(attempts).fill("..");
|
|
52
|
+
try {
|
|
53
|
+
const file = await fs3.promises.readFile(
|
|
54
|
+
join(dir, ...mainPath, "package.json"),
|
|
55
|
+
"utf8"
|
|
56
|
+
);
|
|
57
|
+
return JSON.parse(file);
|
|
58
|
+
} catch (e) {
|
|
59
|
+
return loadClosestPackageJson(dir, attempts + 1);
|
|
60
|
+
}
|
|
61
|
+
}
|
|
52
62
|
|
|
53
63
|
// src/plugins/next-env/plugin.ts
|
|
54
|
-
function
|
|
55
|
-
let nextConfig;
|
|
64
|
+
function vitePluginNextEnv(rootDir, nextConfigResolver) {
|
|
56
65
|
let envConfig;
|
|
57
66
|
let isDev;
|
|
58
67
|
const resolvedDir = resolve(rootDir);
|
|
59
68
|
return {
|
|
60
|
-
name: "vite-plugin-storybook-nextjs-
|
|
69
|
+
name: "vite-plugin-storybook-nextjs-env",
|
|
70
|
+
enforce: "pre",
|
|
61
71
|
async config(config, env) {
|
|
62
|
-
|
|
63
|
-
envConfig = (await loadEnvironmentConfig(resolvedDir)).combinedEnv;
|
|
64
|
-
|
|
72
|
+
isDev = env.mode !== "production";
|
|
73
|
+
envConfig = (await loadEnvironmentConfig(resolvedDir, isDev)).combinedEnv;
|
|
74
|
+
const nextConfig = await nextConfigResolver.promise;
|
|
65
75
|
const publicNextEnvMap = Object.fromEntries(
|
|
66
76
|
Object.entries(envConfig).filter(([key]) => key.startsWith("NEXT_PUBLIC_")).map(([key, value]) => {
|
|
67
77
|
return [`process.env.${key}`, JSON.stringify(value)];
|
|
68
78
|
})
|
|
69
79
|
);
|
|
80
|
+
const finalConfig = {
|
|
81
|
+
...config.define,
|
|
82
|
+
...publicNextEnvMap,
|
|
83
|
+
...getDefineEnv({
|
|
84
|
+
isTurbopack: false,
|
|
85
|
+
config: nextConfig,
|
|
86
|
+
isClient: true,
|
|
87
|
+
isEdgeServer: false,
|
|
88
|
+
isNodeOrEdgeCompilation: false,
|
|
89
|
+
isNodeServer: false,
|
|
90
|
+
clientRouterFilters: void 0,
|
|
91
|
+
dev: isDev,
|
|
92
|
+
middlewareMatchers: void 0,
|
|
93
|
+
hasRewrites: false,
|
|
94
|
+
distDir: nextConfig.distDir,
|
|
95
|
+
fetchCacheKeyPrefix: nextConfig?.experimental?.fetchCacheKeyPrefix
|
|
96
|
+
})
|
|
97
|
+
};
|
|
98
|
+
delete process.env.__NEXT_IMAGE_OPTS;
|
|
99
|
+
delete finalConfig["process.env.__NEXT_IMAGE_OPTS"];
|
|
70
100
|
return {
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
isNodeOrEdgeCompilation: false,
|
|
81
|
-
isNodeServer: false,
|
|
82
|
-
clientRouterFilters: void 0,
|
|
83
|
-
dev: isDev,
|
|
84
|
-
middlewareMatchers: void 0,
|
|
85
|
-
hasRewrites: false,
|
|
86
|
-
distDir: nextConfig.distDir,
|
|
87
|
-
fetchCacheKeyPrefix: nextConfig?.experimental?.fetchCacheKeyPrefix
|
|
88
|
-
})
|
|
101
|
+
define: finalConfig,
|
|
102
|
+
test: {
|
|
103
|
+
deps: {
|
|
104
|
+
optimizer: {
|
|
105
|
+
ssr: {
|
|
106
|
+
include: ["next"]
|
|
107
|
+
}
|
|
108
|
+
}
|
|
109
|
+
}
|
|
89
110
|
}
|
|
90
111
|
};
|
|
91
112
|
}
|
|
@@ -159,14 +180,14 @@ async function getFontFaceDeclarations2(options) {
|
|
|
159
180
|
if ("fontReferenceId" in localFontSrc) {
|
|
160
181
|
return dedent`@font-face {
|
|
161
182
|
font-family: ${id};
|
|
162
|
-
src: url(${localFontSrc.fontReferenceId ? getPlaceholderFontUrl(localFontSrc.fontReferenceId) :
|
|
183
|
+
src: url(${localFontSrc.fontReferenceId ? getPlaceholderFontUrl(localFontSrc.fontReferenceId) : `/@fs${localFontSrc.fontPath}`})
|
|
163
184
|
${fontDeclarations}
|
|
164
185
|
}`;
|
|
165
186
|
}
|
|
166
187
|
return localFontSrc.map((font) => {
|
|
167
188
|
return dedent`@font-face {
|
|
168
189
|
font-family: ${id};
|
|
169
|
-
src: url(${font.path.fontReferenceId ? getPlaceholderFontUrl(font.path.fontReferenceId) :
|
|
190
|
+
src: url(${font.path.fontReferenceId ? getPlaceholderFontUrl(font.path.fontReferenceId) : `/@fs${font.path.fontPath}`});
|
|
170
191
|
${font.weight ? `font-weight: ${font.weight};` : ""}
|
|
171
192
|
${font.style ? `font-style: ${font.style};` : ""}
|
|
172
193
|
${fontDeclarations}
|
|
@@ -243,7 +264,7 @@ function setFontDeclarationsInHead({
|
|
|
243
264
|
});
|
|
244
265
|
}
|
|
245
266
|
}
|
|
246
|
-
return
|
|
267
|
+
return dedent`
|
|
247
268
|
const fontPaths = [${fontPathsImportUrls.map((fontPath) => `{id: '${fontPath.id}', path: ${fontPath.path}}`).join(", ")}];
|
|
248
269
|
if (!document.getElementById('id-${id}')) {
|
|
249
270
|
let fontDeclarations = \`${fontFaceCSS}\`;
|
|
@@ -267,53 +288,17 @@ function setFontDeclarationsInHead({
|
|
|
267
288
|
// src/plugins/next-font/plugin.ts
|
|
268
289
|
var includePattern = /next(\\|\/|\\\\).*(\\|\/|\\\\)target\.css.*$/;
|
|
269
290
|
var virtualModuleId = "virtual:next-font";
|
|
270
|
-
function
|
|
291
|
+
function vitePluginNextFont() {
|
|
271
292
|
let devMode = true;
|
|
272
|
-
const fontAssetPaths = /* @__PURE__ */ new Map();
|
|
273
293
|
return {
|
|
274
|
-
name: "
|
|
294
|
+
name: "vite-plugin-storybook-nextjs-font",
|
|
295
|
+
enforce: "pre",
|
|
275
296
|
async config(config, env) {
|
|
276
|
-
devMode = env.mode
|
|
297
|
+
devMode = env.mode !== "production";
|
|
277
298
|
return config;
|
|
278
299
|
},
|
|
279
|
-
configureServer(server) {
|
|
280
|
-
server.middlewares.use(async (req, res, next) => {
|
|
281
|
-
if (req.url && fontAssetPaths.has(req.url)) {
|
|
282
|
-
const fontAbsoluteAssetPath = fontAssetPaths.get(req.url);
|
|
283
|
-
const fontFileExtension = path.extname(fontAbsoluteAssetPath);
|
|
284
|
-
try {
|
|
285
|
-
const fontData = await fs.readFile(fontAbsoluteAssetPath);
|
|
286
|
-
switch (fontFileExtension) {
|
|
287
|
-
case ".woff":
|
|
288
|
-
res.setHeader("Content-Type", "font/woff");
|
|
289
|
-
break;
|
|
290
|
-
case ".woff2":
|
|
291
|
-
res.setHeader("Content-Type", "font/woff2");
|
|
292
|
-
break;
|
|
293
|
-
case ".ttf":
|
|
294
|
-
res.setHeader("Content-Type", "font/ttf");
|
|
295
|
-
break;
|
|
296
|
-
case ".otf":
|
|
297
|
-
res.setHeader("Content-Type", "font/otf");
|
|
298
|
-
break;
|
|
299
|
-
default:
|
|
300
|
-
res.setHeader("Content-Type", "font");
|
|
301
|
-
}
|
|
302
|
-
res.end(fontData);
|
|
303
|
-
} catch (e) {
|
|
304
|
-
console.error(
|
|
305
|
-
`Could not read font file ${fontAbsoluteAssetPath}:`,
|
|
306
|
-
e
|
|
307
|
-
);
|
|
308
|
-
res.statusCode = 404;
|
|
309
|
-
res.end();
|
|
310
|
-
}
|
|
311
|
-
} else {
|
|
312
|
-
next();
|
|
313
|
-
}
|
|
314
|
-
});
|
|
315
|
-
},
|
|
316
300
|
async resolveId(source, importer) {
|
|
301
|
+
const cwd = process.cwd();
|
|
317
302
|
if (!includePattern.test(source) || !importer) {
|
|
318
303
|
return null;
|
|
319
304
|
}
|
|
@@ -347,14 +332,13 @@ function configureNextFont() {
|
|
|
347
332
|
);
|
|
348
333
|
const fontPath = path.join(importerDirPath, importerRelativeFontPath);
|
|
349
334
|
if (devMode) {
|
|
350
|
-
fontAssetPaths.set(importerRelativeFontPath, fontPath);
|
|
351
335
|
return {
|
|
352
|
-
fontPath:
|
|
336
|
+
fontPath: path.join(cwd, fontPath),
|
|
353
337
|
fontReferenceId: void 0
|
|
354
338
|
};
|
|
355
339
|
}
|
|
356
340
|
try {
|
|
357
|
-
const fontData = await
|
|
341
|
+
const fontData = await fs2.readFile(fontPath);
|
|
358
342
|
const fontReferenceId = this.emitFile({
|
|
359
343
|
name: `${fontBaseName}${fontExtension}`,
|
|
360
344
|
type: "asset",
|
|
@@ -466,7 +450,8 @@ function getEmotionOptions(emotionConfig, development) {
|
|
|
466
450
|
}
|
|
467
451
|
|
|
468
452
|
// src/utils/swc/options.ts
|
|
469
|
-
var
|
|
453
|
+
var require2 = createRequire(import.meta.url);
|
|
454
|
+
var regeneratorRuntimePath = require2.resolve(
|
|
470
455
|
"next/dist/compiled/regenerator-runtime"
|
|
471
456
|
);
|
|
472
457
|
function getBaseSWCOptions({
|
|
@@ -493,7 +478,7 @@ function getBaseSWCOptions({
|
|
|
493
478
|
const useDefineForClassFields = Boolean(
|
|
494
479
|
jsConfig?.compilerOptions?.useDefineForClassFields
|
|
495
480
|
);
|
|
496
|
-
const plugins = (swcPlugins ?? []).filter(Array.isArray).map(([name, options]) => [
|
|
481
|
+
const plugins = (swcPlugins ?? []).filter(Array.isArray).map(([name, options]) => [require2.resolve(name), options]);
|
|
497
482
|
return {
|
|
498
483
|
jsc: {
|
|
499
484
|
...resolvedBaseUrl && paths ? {
|
|
@@ -538,7 +523,7 @@ function getBaseSWCOptions({
|
|
|
538
523
|
}
|
|
539
524
|
}
|
|
540
525
|
},
|
|
541
|
-
sourceMaps:
|
|
526
|
+
sourceMaps: true,
|
|
542
527
|
removeConsole: compilerOptions?.removeConsole,
|
|
543
528
|
reactRemoveProperties: false,
|
|
544
529
|
// Map the k-v map to an array of pairs.
|
|
@@ -581,9 +566,9 @@ var getVitestSWCTransformConfig = ({
|
|
|
581
566
|
nextDirectories,
|
|
582
567
|
nextConfig,
|
|
583
568
|
rootDir,
|
|
584
|
-
isDev
|
|
569
|
+
isDev,
|
|
570
|
+
isEsmProject
|
|
585
571
|
}) => {
|
|
586
|
-
const esm = true;
|
|
587
572
|
const baseOptions = getBaseSWCOptions({
|
|
588
573
|
filename,
|
|
589
574
|
development: false,
|
|
@@ -594,7 +579,7 @@ var getVitestSWCTransformConfig = ({
|
|
|
594
579
|
resolvedBaseUrl: loadedJSConfig.resolvedBaseUrl,
|
|
595
580
|
swcPlugins: nextConfig.experimental.swcPlugins,
|
|
596
581
|
compilerOptions: nextConfig?.compilerOptions,
|
|
597
|
-
esm,
|
|
582
|
+
esm: isEsmProject,
|
|
598
583
|
swcCacheDir: path.join(
|
|
599
584
|
rootDir,
|
|
600
585
|
nextConfig.distDir ?? ".next",
|
|
@@ -635,7 +620,7 @@ var getVitestSWCTransformConfig = ({
|
|
|
635
620
|
}
|
|
636
621
|
},
|
|
637
622
|
module: {
|
|
638
|
-
type:
|
|
623
|
+
type: isEsmProject && !useCjsModules ? "es6" : "commonjs"
|
|
639
624
|
},
|
|
640
625
|
disableNextSsg: true,
|
|
641
626
|
disablePageConfig: true,
|
|
@@ -658,15 +643,18 @@ function vitePluginNextSwc(rootDir, nextConfigResolver) {
|
|
|
658
643
|
let nextDirectories;
|
|
659
644
|
let isServerEnvironment;
|
|
660
645
|
let isDev;
|
|
646
|
+
let isEsmProject;
|
|
661
647
|
const resolvedDir = resolve(rootDir);
|
|
662
648
|
return {
|
|
663
649
|
name: "vite-plugin-storybook-nextjs-swc",
|
|
650
|
+
enforce: "pre",
|
|
664
651
|
async config(config, env) {
|
|
665
652
|
const nextConfig = await nextConfigResolver.promise;
|
|
666
653
|
nextDirectories = findPagesDir(resolvedDir);
|
|
667
|
-
loadedJSConfig = await loadJsConfig(resolvedDir, nextConfig);
|
|
668
|
-
(await loadEnvironmentConfig(resolvedDir)).combinedEnv;
|
|
654
|
+
loadedJSConfig = await loadJsConfig.default(resolvedDir, nextConfig);
|
|
669
655
|
isDev = env.mode === "development";
|
|
656
|
+
await loadClosestPackageJson(resolvedDir);
|
|
657
|
+
isEsmProject = true;
|
|
670
658
|
await loadSWCBindingsEagerly(nextConfig);
|
|
671
659
|
const serverWatchIgnored = config.server?.watch?.ignored;
|
|
672
660
|
const isServerWatchIgnoredArray = Array.isArray(serverWatchIgnored);
|
|
@@ -679,10 +667,10 @@ function vitePluginNextSwc(rootDir, nextConfigResolver) {
|
|
|
679
667
|
"@opentelemetry/api": "next/dist/compiled/@opentelemetry/api"
|
|
680
668
|
}
|
|
681
669
|
},
|
|
682
|
-
esbuild: {
|
|
683
|
-
|
|
684
|
-
|
|
685
|
-
},
|
|
670
|
+
// esbuild: {
|
|
671
|
+
// // We will use Next.js custom SWC transpiler instead of Vite's build-in esbuild
|
|
672
|
+
// exclude: [/node_modules/, /.m?(t|j)sx?/],
|
|
673
|
+
// },
|
|
686
674
|
server: {
|
|
687
675
|
watch: {
|
|
688
676
|
ignored: [
|
|
@@ -706,7 +694,8 @@ function vitePluginNextSwc(rootDir, nextConfigResolver) {
|
|
|
706
694
|
nextConfig: await nextConfigResolver.promise,
|
|
707
695
|
nextDirectories,
|
|
708
696
|
rootDir,
|
|
709
|
-
isDev
|
|
697
|
+
isDev,
|
|
698
|
+
isEsmProject
|
|
710
699
|
})
|
|
711
700
|
);
|
|
712
701
|
return output;
|
|
@@ -749,28 +738,19 @@ try {
|
|
|
749
738
|
function vitePluginNextImage(nextConfigResolver) {
|
|
750
739
|
return {
|
|
751
740
|
name: "vite-plugin-storybook-nextjs-image",
|
|
752
|
-
|
|
753
|
-
|
|
754
|
-
return
|
|
755
|
-
...config,
|
|
756
|
-
resolve: {
|
|
757
|
-
...config.resolve,
|
|
758
|
-
alias: {
|
|
759
|
-
react: "next/dist/compiled/react",
|
|
760
|
-
"react-dom": "next/dist/compiled/react-dom"
|
|
761
|
-
}
|
|
762
|
-
}
|
|
763
|
-
};
|
|
741
|
+
enforce: "pre",
|
|
742
|
+
async config(config, env) {
|
|
743
|
+
return config;
|
|
764
744
|
},
|
|
765
745
|
async resolveId(id, importer) {
|
|
766
|
-
|
|
767
|
-
|
|
768
|
-
|
|
769
|
-
|
|
770
|
-
|
|
771
|
-
|
|
772
|
-
|
|
773
|
-
}
|
|
746
|
+
const [source, queryA] = id.split("?");
|
|
747
|
+
if (queryA === "ignore") {
|
|
748
|
+
return null;
|
|
749
|
+
}
|
|
750
|
+
if (includePattern2.test(source) && !excludeImporterPattern.test(importer ?? "") && !importer?.startsWith(virtualImage)) {
|
|
751
|
+
const isAbsolute = path.isAbsolute(id);
|
|
752
|
+
const imagePath = importer ? isAbsolute ? source : path.join(path.dirname(importer), source) : source;
|
|
753
|
+
return `${virtualImage}?imagePath=${imagePath}`;
|
|
774
754
|
}
|
|
775
755
|
if (id === "next/image" && importer !== virtualNextImage) {
|
|
776
756
|
return virtualNextImage;
|
|
@@ -788,7 +768,7 @@ function vitePluginNextImage(nextConfigResolver) {
|
|
|
788
768
|
},
|
|
789
769
|
async load(id) {
|
|
790
770
|
if (virtualNextImage === id) {
|
|
791
|
-
return (await
|
|
771
|
+
return (await fs3.promises.readFile(
|
|
792
772
|
fileURLToPath(
|
|
793
773
|
new URL(
|
|
794
774
|
"./plugins/next-image/alias/next-image.js",
|
|
@@ -798,7 +778,7 @@ function vitePluginNextImage(nextConfigResolver) {
|
|
|
798
778
|
)).toString("utf-8");
|
|
799
779
|
}
|
|
800
780
|
if (virtualNextLegacyImage === id) {
|
|
801
|
-
return (await
|
|
781
|
+
return (await fs3.promises.readFile(
|
|
802
782
|
fileURLToPath(
|
|
803
783
|
new URL(
|
|
804
784
|
"./plugins/next-image/alias/next-legacy-image.js",
|
|
@@ -808,7 +788,7 @@ function vitePluginNextImage(nextConfigResolver) {
|
|
|
808
788
|
)).toString("utf-8");
|
|
809
789
|
}
|
|
810
790
|
if (virtualNextImageDefaultLoader === id) {
|
|
811
|
-
return (await
|
|
791
|
+
return (await fs3.promises.readFile(
|
|
812
792
|
fileURLToPath(
|
|
813
793
|
new URL(
|
|
814
794
|
"./plugins/next-image/alias/image-default-loader.js",
|
|
@@ -818,7 +798,7 @@ function vitePluginNextImage(nextConfigResolver) {
|
|
|
818
798
|
)).toString("utf-8");
|
|
819
799
|
}
|
|
820
800
|
if (virtualNextImageContext === id) {
|
|
821
|
-
return (await
|
|
801
|
+
return (await fs3.promises.readFile(
|
|
822
802
|
fileURLToPath(
|
|
823
803
|
new URL(
|
|
824
804
|
"./plugins/next-image/alias/image-context.js",
|
|
@@ -827,25 +807,22 @@ function vitePluginNextImage(nextConfigResolver) {
|
|
|
827
807
|
)
|
|
828
808
|
)).toString("utf-8");
|
|
829
809
|
}
|
|
830
|
-
const [source] = id.split("?");
|
|
810
|
+
const [source, query] = id.split("?");
|
|
831
811
|
if (virtualImage === source) {
|
|
832
|
-
const
|
|
833
|
-
const meta = moduleInfo?.meta;
|
|
834
|
-
path.basename(id);
|
|
812
|
+
const imagePath = decode(query).imagePath;
|
|
835
813
|
const nextConfig = await nextConfigResolver.promise;
|
|
836
|
-
const extension =
|
|
837
|
-
const imagePath = path.join(path.dirname(meta.importer), meta.id);
|
|
814
|
+
const extension = path.extname(imagePath);
|
|
838
815
|
try {
|
|
839
816
|
if (nextConfig.images?.disableStaticImages) {
|
|
840
|
-
return
|
|
841
|
-
import image from "${imagePath}";
|
|
817
|
+
return dedent`
|
|
818
|
+
import image from "${imagePath}?ignore";
|
|
842
819
|
export default image;
|
|
843
820
|
`;
|
|
844
821
|
}
|
|
845
|
-
const imageData = await
|
|
822
|
+
const imageData = await fs3.promises.readFile(imagePath);
|
|
846
823
|
let width;
|
|
847
824
|
let height;
|
|
848
|
-
if (extension === "avif" && sharp) {
|
|
825
|
+
if (extension === ".avif" && sharp) {
|
|
849
826
|
const transformer = sharp(Buffer.from(imageData));
|
|
850
827
|
const result = await transformer.metadata();
|
|
851
828
|
width = result.width;
|
|
@@ -855,8 +832,8 @@ function vitePluginNextImage(nextConfigResolver) {
|
|
|
855
832
|
width = result.width;
|
|
856
833
|
height = result.height;
|
|
857
834
|
}
|
|
858
|
-
return
|
|
859
|
-
import src from "${imagePath}";
|
|
835
|
+
return dedent`
|
|
836
|
+
import src from "${imagePath}?ignore";
|
|
860
837
|
export default {
|
|
861
838
|
src,
|
|
862
839
|
height: ${height},
|
|
@@ -875,70 +852,28 @@ function vitePluginNextImage(nextConfigResolver) {
|
|
|
875
852
|
}
|
|
876
853
|
|
|
877
854
|
// src/index.ts
|
|
855
|
+
createRequire(import.meta.url);
|
|
878
856
|
function VitePlugin({ dir = process.cwd() } = {}) {
|
|
879
857
|
const resolvedDir = resolve(dir);
|
|
880
858
|
const nextConfigResolver = Promise.withResolvers();
|
|
881
|
-
|
|
882
|
-
|
|
883
|
-
|
|
884
|
-
|
|
885
|
-
|
|
886
|
-
|
|
887
|
-
|
|
888
|
-
|
|
889
|
-
|
|
890
|
-
|
|
891
|
-
|
|
892
|
-
enforce: "pre",
|
|
893
|
-
configureServer(server) {
|
|
894
|
-
nextFontPlugin.configureServer.call(this, server);
|
|
895
|
-
},
|
|
896
|
-
async config(config, env) {
|
|
897
|
-
nextConfigResolver.resolve(await getConfig(resolvedDir));
|
|
898
|
-
const mergedNextSwcConfig = await nextSwcPlugin.config.call(
|
|
899
|
-
this,
|
|
900
|
-
config,
|
|
901
|
-
env
|
|
902
|
-
);
|
|
903
|
-
const mergedNextEnvConfig = await nextEnvPlugin.config.call(
|
|
904
|
-
this,
|
|
905
|
-
mergedNextSwcConfig,
|
|
906
|
-
env
|
|
907
|
-
);
|
|
908
|
-
const mergedNextFontConfig = await nextFontPlugin.config.call(
|
|
909
|
-
this,
|
|
910
|
-
mergedNextEnvConfig,
|
|
911
|
-
env
|
|
912
|
-
);
|
|
913
|
-
const mergedNextImageConfig = await nextImagePlugin.config.call(
|
|
914
|
-
this,
|
|
915
|
-
mergedNextFontConfig,
|
|
916
|
-
env
|
|
917
|
-
);
|
|
918
|
-
return mergedNextImageConfig;
|
|
919
|
-
},
|
|
920
|
-
async resolveId(source, importer, options) {
|
|
921
|
-
const nextFontResolver = await nextFontPlugin.resolveId.call(
|
|
922
|
-
this,
|
|
923
|
-
source,
|
|
924
|
-
importer
|
|
925
|
-
);
|
|
926
|
-
if (nextFontResolver) {
|
|
927
|
-
return nextFontResolver;
|
|
928
|
-
}
|
|
929
|
-
return nextImagePlugin.resolveId.call(this, source, importer);
|
|
930
|
-
},
|
|
931
|
-
load(id) {
|
|
932
|
-
const nextFontLoaderResult = nextFontPlugin.load.call(this, id);
|
|
933
|
-
if (nextFontLoaderResult) {
|
|
934
|
-
return nextFontLoaderResult;
|
|
859
|
+
return [
|
|
860
|
+
{
|
|
861
|
+
name: "vite-plugin-storybook-nextjs",
|
|
862
|
+
enforce: "pre",
|
|
863
|
+
async config(config, env) {
|
|
864
|
+
const phase = env.mode === "development" ? PHASE_DEVELOPMENT_SERVER : env.mode === "test" ? PHASE_TEST : PHASE_PRODUCTION_BUILD;
|
|
865
|
+
nextConfigResolver.resolve(
|
|
866
|
+
// @ts-ignore TODO figure out why TypeScript is complaining about this
|
|
867
|
+
await loadConfig.default(phase, resolvedDir)
|
|
868
|
+
);
|
|
869
|
+
return config;
|
|
935
870
|
}
|
|
936
|
-
return nextImagePlugin.load.call(this, id);
|
|
937
871
|
},
|
|
938
|
-
|
|
939
|
-
|
|
940
|
-
|
|
941
|
-
|
|
872
|
+
vitePluginNextFont(),
|
|
873
|
+
vitePluginNextSwc(dir, nextConfigResolver),
|
|
874
|
+
vitePluginNextEnv(dir, nextConfigResolver),
|
|
875
|
+
vitePluginNextImage(nextConfigResolver)
|
|
876
|
+
];
|
|
942
877
|
}
|
|
943
878
|
var src_default = VitePlugin;
|
|
944
879
|
|
|
@@ -0,0 +1,13 @@
|
|
|
1
|
+
import * as next_dist_compiled_react from 'next/dist/compiled/react';
|
|
2
|
+
import { ImageProps, StaticImageData } from 'next/image';
|
|
3
|
+
import { ImageProps as ImageProps$1 } from 'next/legacy/image';
|
|
4
|
+
|
|
5
|
+
interface StaticRequire {
|
|
6
|
+
default: StaticImageData;
|
|
7
|
+
}
|
|
8
|
+
declare type StaticImport = StaticRequire | StaticImageData;
|
|
9
|
+
declare const ImageContext: next_dist_compiled_react.Context<Partial<Omit<ImageProps, "src"> & {
|
|
10
|
+
src: string | StaticImport;
|
|
11
|
+
}> & Omit<ImageProps$1, "src">>;
|
|
12
|
+
|
|
13
|
+
export { ImageContext };
|
|
@@ -0,0 +1,30 @@
|
|
|
1
|
+
import * as next_dist_shared_lib_get_img_props from 'next/dist/shared/lib/get-img-props';
|
|
2
|
+
import * as _NextImage from 'next/image';
|
|
3
|
+
import React from 'react';
|
|
4
|
+
|
|
5
|
+
declare const MockedNextImage: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.ImgHTMLAttributes<HTMLImageElement>, HTMLImageElement>, "height" | "width" | "loading" | "ref" | "alt" | "src" | "srcSet"> & {
|
|
6
|
+
src: string | next_dist_shared_lib_get_img_props.StaticImport;
|
|
7
|
+
alt: string;
|
|
8
|
+
width?: number | `${number}` | undefined;
|
|
9
|
+
height?: number | `${number}` | undefined;
|
|
10
|
+
fill?: boolean | undefined;
|
|
11
|
+
loader?: _NextImage.ImageLoader | undefined;
|
|
12
|
+
quality?: number | `${number}` | undefined;
|
|
13
|
+
priority?: boolean | undefined;
|
|
14
|
+
loading?: "lazy" | "eager" | undefined;
|
|
15
|
+
placeholder?: next_dist_shared_lib_get_img_props.PlaceholderValue | undefined;
|
|
16
|
+
blurDataURL?: string | undefined;
|
|
17
|
+
unoptimized?: boolean | undefined;
|
|
18
|
+
overrideSrc?: string | undefined;
|
|
19
|
+
onLoadingComplete?: next_dist_shared_lib_get_img_props.OnLoadingComplete | undefined;
|
|
20
|
+
layout?: string | undefined;
|
|
21
|
+
objectFit?: string | undefined;
|
|
22
|
+
objectPosition?: string | undefined;
|
|
23
|
+
lazyBoundary?: string | undefined;
|
|
24
|
+
lazyRoot?: string | undefined;
|
|
25
|
+
} & React.RefAttributes<HTMLImageElement>>;
|
|
26
|
+
declare const getImageProps: (props: _NextImage.ImageProps) => {
|
|
27
|
+
props: next_dist_shared_lib_get_img_props.ImgProps;
|
|
28
|
+
};
|
|
29
|
+
|
|
30
|
+
export { MockedNextImage as default, getImageProps };
|