@wyw-in-js/vite 0.8.0 → 1.0.0

package/types/index.js

@@ -8,21 +8,238 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
+exports.default = wywInJS;
 const fs_1 = require("fs");
 const path_1 = __importDefault(require("path"));
 const vite_1 = require("vite");
 const shared_1 = require("@wyw-in-js/shared");
 const transform_1 = require("@wyw-in-js/transform");
-function wywInJS({ debug, include, exclude, sourceMap, prefixer, preprocessor, ...rest } = {}) {
+const isWindowsAbsolutePath = (value) => /^[a-zA-Z]:[\\/]/.test(value);
+const normalizeToPosix = (value) => value.replace(/\\/g, path_1.default.posix.sep);
+const isInside = (childPath, parentPath) => {
+    const rel = path_1.default.relative(parentPath, childPath);
+    return rel === '' || (!rel.startsWith('..') && !path_1.default.isAbsolute(rel));
+};
+const isWywCssAssetName = (value) => value.endsWith('.wyw-in-js.css');
+const normalizeAssetRelativePath = (value) => {
+    const normalized = path_1.default.posix.normalize(normalizeToPosix(value).replace(/^\/+/, ''));
+    if (normalized.startsWith('..') || path_1.default.posix.isAbsolute(normalized)) {
+        return null;
+    }
+    return normalized;
+};
+const stripExtension = (value) => {
+    const ext = path_1.default.posix.extname(value);
+    return ext ? value.slice(0, -ext.length) : value;
+};
+const getWywCssAssetFileNames = (resolvedConfig, output, originalAssetFileNames) => {
+    if (!output.preserveModules)
+        return null;
+    const rootDir = resolvedConfig.root;
+    const preserveModulesRootValue = output.preserveModulesRoot;
+    let preserveModulesRootAbs = null;
+    if (typeof preserveModulesRootValue === 'string') {
+        preserveModulesRootAbs = path_1.default.isAbsolute(preserveModulesRootValue)
+            ? preserveModulesRootValue
+            : path_1.default.resolve(rootDir, preserveModulesRootValue);
+    }
+    const preserveModulesRootRel = preserveModulesRootAbs && isInside(preserveModulesRootAbs, rootDir)
+        ? normalizeToPosix(path_1.default.relative(rootDir, preserveModulesRootAbs))
+        : null;
+    return (assetInfo) => {
+        const template = typeof originalAssetFileNames === 'function'
+            ? originalAssetFileNames(assetInfo)
+            : originalAssetFileNames;
+        const assetName = assetInfo?.name;
+        if (typeof assetName !== 'string' || !isWywCssAssetName(assetName)) {
+            return template;
+        }
+        if (!template.includes('[')) {
+            return template;
+        }
+        let relativePath = null;
+        const assetNameNormalized = normalizeToPosix(assetName);
+        if (path_1.default.isAbsolute(assetName) ||
+            isWindowsAbsolutePath(assetNameNormalized)) {
+            const preserveRel = preserveModulesRootAbs && isInside(assetName, preserveModulesRootAbs)
+                ? path_1.default.relative(preserveModulesRootAbs, assetName)
+                : null;
+            if (preserveRel &&
+                !path_1.default.isAbsolute(preserveRel) &&
+                !preserveRel.startsWith('..')) {
+                relativePath = preserveRel;
+            }
+            else if (isInside(assetName, rootDir)) {
+                relativePath = path_1.default.relative(rootDir, assetName);
+            }
+        }
+        else if (preserveModulesRootRel &&
+            assetNameNormalized.startsWith(`${preserveModulesRootRel}/`)) {
+            relativePath = assetNameNormalized.slice(preserveModulesRootRel.length + 1);
+        }
+        else {
+            relativePath = assetNameNormalized;
+        }
+        const normalized = relativePath
+            ? normalizeAssetRelativePath(relativePath)
+            : null;
+        if (!normalized) {
+            return template;
+        }
+        const withoutExt = stripExtension(normalized);
+        if (template.includes('[name]')) {
+            const dir = path_1.default.posix.dirname(withoutExt);
+            if (dir === '.' || dir === '') {
+                return template;
+            }
+            return template.replace(/\[name\]/g, `${dir}/[name]`);
+        }
+        const dir = path_1.default.posix.dirname(withoutExt);
+        if (dir === '.' || dir === '') {
+            return template;
+        }
+        const idx = template.indexOf('[');
+        if (idx < 0) {
+            return template;
+        }
+        const prefix = template.slice(0, idx);
+        if (prefix !== '' && !prefix.endsWith('/')) {
+            return template;
+        }
+        return `${prefix}${dir}/${template.slice(idx)}`;
+    };
+};
+function wywInJS({ debug, include, exclude, sourceMap, preserveCssPaths, keepComments, prefixer, preprocessor, ssrDevCss, ssrDevCssPath, transformLibraries, ...rest } = {}) {
     const filter = (0, vite_1.createFilter)(include, exclude);
     const cssLookup = {};
     const cssFileLookup = {};
+    const pendingCssReloads = new Set();
+    let pendingCssReloadTimer;
+    let ssrDevCssVersion = 0;
     let config;
     let devServer;
+    let importMetaEnvForEval = null;
+    const ssrDevCssEnabled = Boolean(ssrDevCss);
+    const [ssrDevCssPathname, ssrDevCssQuery] = (ssrDevCssPath ?? '/_wyw-in-js/ssr.css').split('?', 2);
+    const ssrDevCssRoute = ssrDevCssPathname.startsWith('/')
+        ? ssrDevCssPathname
+        : `/${ssrDevCssPathname}`;
+    const getSsrDevCssHref = () => {
+        const versionParam = `v=${ssrDevCssVersion}`;
+        const query = ssrDevCssQuery
+            ? `${ssrDevCssQuery}&${versionParam}`
+            : versionParam;
+        return `${ssrDevCssRoute}?${query}`;
+    };
+    const getSsrDevCssContents = () => {
+        const entries = Object.entries(cssLookup);
+        if (entries.length === 0)
+            return '';
+        const merged = entries
+            .sort(([a], [b]) => a.localeCompare(b))
+            .map(([, cssText]) => cssText)
+            .join('\n');
+        return `${merged}\n`;
+    };
     const { emitter, onDone } = (0, transform_1.createFileReporter)(debug ?? false);
+    const scheduleCssReload = (cssFilename) => {
+        if (!devServer?.moduleGraph)
+            return;
+        pendingCssReloads.add(cssFilename);
+        if (pendingCssReloadTimer)
+            return;
+        pendingCssReloadTimer = setTimeout(() => {
+            pendingCssReloadTimer = undefined;
+            const ids = Array.from(pendingCssReloads);
+            pendingCssReloads.clear();
+            for (const id of ids) {
+                const module = devServer.moduleGraph.getModuleById(id);
+                if (module)
+                    devServer.reloadModule(module);
+            }
+        }, 0);
+    };
     // <dependency id, targets>
     const targets = [];
     const cache = new transform_1.TransformCacheCollection();
+    const isInsideCacheDir = (filename) => {
+        if (!config.cacheDir) {
+            return false;
+        }
+        const relative = path_1.default.relative(config.cacheDir, filename);
+        return (relative !== '' &&
+            !relative.startsWith('..') &&
+            !path_1.default.isAbsolute(relative));
+    };
+    const getDepsOptimizer = () => {
+        if (!devServer)
+            return null;
+        const server = devServer;
+        return (server.environments?.client?.depsOptimizer ??
+            server.depsOptimizer ??
+            server._depsOptimizer ??
+            null);
+    };
+    const waitForOptimizedDep = async (filename) => {
+        const depsOptimizer = getDepsOptimizer();
+        if (!depsOptimizer?.isOptimizedDepFile?.(filename)) {
+            return false;
+        }
+        await depsOptimizer.init?.();
+        await depsOptimizer.scanProcessing;
+        const info = depsOptimizer.metadata?.depInfoList?.find((item) => item.file === filename);
+        if (info?.processing) {
+            await info.processing;
+        }
+        return true;
+    };
+    const createAsyncResolver = (0, shared_1.asyncResolverFactory)(async (resolved, what, importer, stack) => {
+        const log = shared_1.logger.extend('vite').extend((0, transform_1.getFileIdx)(importer));
+        if (resolved) {
+            if (resolved.external) {
+                // If module is marked as external, Rollup will not resolve it,
+                // so we need to resolve it ourselves with default resolver
+                const resolvedId = (0, shared_1.syncResolve)(what, importer, stack);
+                log("resolve ✅ '%s'@'%s -> %O\n%s", what, importer, resolved);
+                return resolvedId;
+            }
+            log("resolve ✅ '%s'@'%s -> %O\n%s", what, importer, resolved);
+            // Vite adds param like `?v=667939b3` to cached modules
+            const resolvedId = resolved.id.split('?', 1)[0];
+            if (resolvedId.startsWith('\0')) {
+                // \0 is a special character in Rollup that tells Rollup to not include this in the bundle
+                // https://rollupjs.org/guide/en/#outputexports
+                return null;
+            }
+            if (resolvedId.startsWith('/@')) {
+                return null;
+            }
+            if (!(0, fs_1.existsSync)(resolvedId)) {
+                // When Vite resolves to an optimized deps entry (cacheDir) it may not be written yet.
+                // Wait for Vite's optimizer instead of calling optimizeDeps() manually (deprecated in Vite 7).
+                try {
+                    await waitForOptimizedDep(resolvedId);
+                }
+                catch {
+                    // If optimizer failed, fall through to preserve previous behavior and surface the error.
+                }
+                // Vite can return an optimized deps entry (from cacheDir) before it's written to disk.
+                // Manually calling optimizeDeps is deprecated in Vite 7 and can also get called many times.
+                // Instead, fall back to resolving the original module path directly.
+                if (!(0, fs_1.existsSync)(resolvedId) && isInsideCacheDir(resolvedId)) {
+                    try {
+                        return (0, shared_1.syncResolve)(what, importer, stack);
+                    }
+                    catch {
+                        // Fall through to preserve previous behavior: return resolvedId and let WyW surface the error.
+                    }
+                }
+            }
+            return resolvedId;
+        }
+        log("resolve ❌ '%s'@'%s", what, importer);
+        throw new Error(`Could not resolve ${what}`);
+    }, (what, importer) => [what, importer]);
     return {
         name: 'wyw-in-js',
         enforce: 'post',
@@ -31,9 +248,89 @@ function wywInJS({ debug, include, exclude, sourceMap, prefixer, preprocessor, .
         },
         configResolved(resolvedConfig) {
             config = resolvedConfig;
+            if (preserveCssPaths && config.command === 'build') {
+                const outputs = config.build.rollupOptions.output;
+                let outputEntries = [];
+                if (Array.isArray(outputs)) {
+                    outputEntries = outputs;
+                }
+                else if (outputs) {
+                    outputEntries = [outputs];
+                }
+                outputEntries.forEach((entry) => {
+                    if (!entry || typeof entry !== 'object')
+                        return;
+                    const output = entry;
+                    if (!output.preserveModules)
+                        return;
+                    const template = output.assetFileNames ??
+                        `${config.build.assetsDir ?? 'assets'}/[name].[hash].[ext]`;
+                    const assetFileNames = getWywCssAssetFileNames(config, output, template);
+                    if (assetFileNames)
+                        output.assetFileNames = assetFileNames;
+                });
+            }
+            const envPrefix = config.envPrefix ?? 'VITE_';
+            const envDir = 
+            // envDir is absolute in modern Vite, but keep a fallback for older versions
+            'envDir' in config && typeof config.envDir === 'string'
+                ? config.envDir
+                : config.root;
+            const loaded = (0, vite_1.loadEnv)(config.mode, envDir, envPrefix);
+            const base = {
+                ...loaded,
+                BASE_URL: config.base,
+                MODE: config.mode,
+                DEV: config.command === 'serve',
+                PROD: config.command === 'build',
+            };
+            importMetaEnvForEval = {
+                client: { ...base, SSR: false },
+                ssr: { ...base, SSR: true },
+            };
         },
         configureServer(_server) {
             devServer = _server;
+            if (!ssrDevCssEnabled || config.command !== 'serve')
+                return;
+            devServer.middlewares.use((req, res, next) => {
+                const { url } = req;
+                if (!url) {
+                    next();
+                    return;
+                }
+                const [pathname] = url.split('?', 1);
+                if (pathname !== ssrDevCssRoute) {
+                    next();
+                    return;
+                }
+                const etag = `W/"${ssrDevCssVersion}"`;
+                const ifNoneMatch = req.headers['if-none-match'];
+                if (ifNoneMatch === etag) {
+                    res.statusCode = 304;
+                    res.end();
+                    return;
+                }
+                res.statusCode = 200;
+                res.setHeader('Content-Type', 'text/css; charset=utf-8');
+                res.setHeader('Cache-Control', 'no-cache');
+                res.setHeader('ETag', etag);
+                res.end(getSsrDevCssContents());
+            });
+        },
+        transformIndexHtml(html) {
+            if (!ssrDevCssEnabled || config.command !== 'serve')
+                return undefined;
+            return {
+                html,
+                tags: [
+                    {
+                        tag: 'link',
+                        attrs: { rel: 'stylesheet', href: getSsrDevCssHref() },
+                        injectTo: 'head-prepend',
+                    },
+                ],
+            };
         },
         load(url) {
             const [id] = url.split('?', 1);
@@ -66,51 +363,44 @@ function wywInJS({ debug, include, exclude, sourceMap, prefixer, preprocessor, .
                 .concat(ctx.modules)
                 .filter((m) => !!m);
         },
-        async transform(code, url) {
+        async transform(code, url, transformOptions) {
             const [id] = url.split('?', 1);
             // Do not transform ignored and generated files
-            if (url.includes('node_modules') || !filter(url) || id in cssLookup)
+            if ((!transformLibraries && url.includes('node_modules')) ||
+                !filter(url) ||
+                id in cssLookup)
                 return;
             const log = shared_1.logger.extend('vite').extend((0, transform_1.getFileIdx)(id));
             log('transform %s', id);
-            const asyncResolve = async (what, importer, stack) => {
-                const resolved = await this.resolve(what, importer);
-                if (resolved) {
-                    if (resolved.external) {
-                        // If module is marked as external, Rollup will not resolve it,
-                        // so we need to resolve it ourselves with default resolver
-                        const resolvedId = (0, shared_1.syncResolve)(what, importer, stack);
-                        log("resolve ✅ '%s'@'%s -> %O\n%s", what, importer, resolved);
-                        return resolvedId;
-                    }
-                    log("resolve ✅ '%s'@'%s -> %O\n%s", what, importer, resolved);
-                    // Vite adds param like `?v=667939b3` to cached modules
-                    const resolvedId = resolved.id.split('?', 1)[0];
-                    if (resolvedId.startsWith('\0')) {
-                        // \0 is a special character in Rollup that tells Rollup to not include this in the bundle
-                        // https://rollupjs.org/guide/en/#outputexports
-                        return null;
-                    }
-                    if (!(0, fs_1.existsSync)(resolvedId)) {
-                        await (0, vite_1.optimizeDeps)(config);
-                    }
-                    return resolvedId;
-                }
-                log("resolve ❌ '%s'@'%s", what, importer);
-                throw new Error(`Could not resolve ${what}`);
+            const overrideContext = (context, filename) => {
+                const isSsr = typeof transformOptions === 'boolean'
+                    ? transformOptions
+                    : Boolean(transformOptions?.ssr);
+                const env = importMetaEnvForEval?.[isSsr ? 'ssr' : 'client'];
+                const withEnv = env
+                    ? { ...context, __wyw_import_meta_env: env }
+                    : context;
+                return rest.overrideContext
+                    ? rest.overrideContext(withEnv, filename)
+                    : withEnv;
             };
             const transformServices = {
                 options: {
                     filename: id,
                     root: process.cwd(),
                     prefixer,
+                    keepComments,
                     preprocessor,
-                    pluginOptions: rest,
+                    pluginOptions: {
+                        ...rest,
+                        overrideContext,
+                    },
                 },
                 cache,
+                emitWarning: (message) => this.warn(message),
                 eventEmitter: emitter,
             };
-            const result = await (0, transform_1.transform)(transformServices, code, asyncResolve);
+            const result = await (0, transform_1.transform)(transformServices, code, createAsyncResolver(this.resolve));
             let { cssText, dependencies } = result;
             // Heads up, there are three cases:
             // 1. cssText is undefined, it means that file was not transformed
@@ -138,6 +428,7 @@ function wywInJS({ debug, include, exclude, sourceMap, prefixer, preprocessor, .
                 const map = Buffer.from(result.cssSourceMapText).toString('base64');
                 cssText += `/*# sourceMappingURL=data:application/json;base64,${map}*/`;
             }
+            const didCssChange = cssLookup[cssFilename] !== cssText;
             cssLookup[cssFilename] = cssText;
             cssFileLookup[cssId] = cssFilename;
             result.code += `\nimport ${JSON.stringify(cssFilename)};\n`;
@@ -154,10 +445,10 @@ function wywInJS({ debug, include, exclude, sourceMap, prefixer, preprocessor, .
                 targets.push({ id, dependencies });
             else
                 target.dependencies = dependencies;
-            if (devServer?.moduleGraph) {
-                const module = devServer.moduleGraph.getModuleById(cssFilename);
-                if (module) {
-                    devServer.reloadModule(module);
+            if (didCssChange) {
+                scheduleCssReload(cssFilename);
+                if (ssrDevCssEnabled && config.command === 'serve') {
+                    ssrDevCssVersion += 1;
                 }
             }
             /* eslint-disable-next-line consistent-return */
@@ -165,4 +456,3 @@ function wywInJS({ debug, include, exclude, sourceMap, prefixer, preprocessor, .
         },
     };
 }
-exports.default = wywInJS;

package/LICENSE

@@ -1,21 +0,0 @@
-MIT License
-
-Copyright (c) 2023 Anton Evzhakov
-
-Permission is hereby granted, free of charge, to any person obtaining a copy
-of this software and associated documentation files (the "Software"), to deal
-in the Software without restriction, including without limitation the rights
-to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
-copies of the Software, and to permit persons to whom the Software is
-furnished to do so, subject to the following conditions:
-
-The above copyright notice and this permission notice shall be included in all
-copies or substantial portions of the Software.
-
-THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
-IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
-FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
-AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
-LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
-OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
-SOFTWARE.