@wyw-in-js/vite 1.0.9 → 2.0.0-alpha.0

package/types/index.js

@@ -1,44 +1,49 @@
-"use strict";
 /**
  * This file contains a Vite loader for wyw-in-js.
  * It uses the transform.ts function to generate class names from source code,
  * returns transformed code without template literals and attaches generated source maps
  */
-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");
+import { existsSync } from 'fs';
+import path from 'path';
+import { createFilter, loadEnv } from 'vite';
+import { asyncResolverFactory, logger, syncResolve } from '@wyw-in-js/shared';
+import * as transformPkg from '@wyw-in-js/transform';
+const { createTransformManifest, createFileReporter, disposeEvalBroker, getFileIdx, stringifyTransformManifest, transform, TransformCacheCollection, } = transformPkg;
+const createMetadataManifest = (metadata, context) => typeof createTransformManifest === 'function'
+    ? createTransformManifest(metadata, context)
+    : {
+        ...metadata,
+        ...context,
+        version: 1,
+    };
+const stringifyMetadataManifest = (manifest) => typeof stringifyTransformManifest === 'function'
+    ? stringifyTransformManifest(manifest)
+    : `${JSON.stringify(manifest, null, 2)}\n`;
 const isWindowsAbsolutePath = (value) => /^[a-zA-Z]:[\\/]/.test(value);
-const normalizeToPosix = (value) => value.replace(/\\/g, path_1.default.posix.sep);
+const normalizeToPosix = (value) => value.replace(/\\/g, path.posix.sep);
 const isInside = (childPath, parentPath) => {
-    const rel = path_1.default.relative(parentPath, childPath);
-    return rel === '' || (!rel.startsWith('..') && !path_1.default.isAbsolute(rel));
+    const rel = path.relative(parentPath, childPath);
+    return rel === '' || (!rel.startsWith('..') && !path.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)) {
+    const normalized = path.posix.normalize(normalizeToPosix(value).replace(/^\/+/, ''));
+    if (normalized.startsWith('..') || path.posix.isAbsolute(normalized)) {
         return null;
     }
     return normalized;
 };
 const stripExtension = (value) => {
-    const ext = path_1.default.posix.extname(value);
+    const ext = path.posix.extname(value);
     return ext ? value.slice(0, -ext.length) : value;
 };
 const getComparableAssetPaths = (value, rootDir) => {
     const variants = new Set();
     const normalized = normalizeToPosix(value);
     variants.add(normalized);
-    if (path_1.default.isAbsolute(value) || isWindowsAbsolutePath(normalized)) {
+    if (path.isAbsolute(value) || isWindowsAbsolutePath(normalized)) {
         if (isInside(value, rootDir)) {
-            const relativeToRoot = normalizeAssetRelativePath(path_1.default.relative(rootDir, value));
+            const relativeToRoot = normalizeAssetRelativePath(path.relative(rootDir, value));
             if (relativeToRoot) {
                 variants.add(relativeToRoot);
             }
@@ -100,8 +105,8 @@ const findWywCssAssetFileName = (bundle, cssFilename, rootDir) => {
     return null;
 };
 const getRelativeImportPath = (fromFileName, toFileName) => {
-    const fromDir = path_1.default.posix.dirname(normalizeToPosix(fromFileName));
-    const relativePath = path_1.default.posix.relative(fromDir, normalizeToPosix(toFileName));
+    const fromDir = path.posix.dirname(normalizeToPosix(fromFileName));
+    const relativePath = path.posix.relative(fromDir, normalizeToPosix(toFileName));
     return relativePath.startsWith('.') ? relativePath : `./${relativePath}`;
 };
 const escapeForRegExp = (value) => value.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
@@ -144,7 +149,7 @@ const safeDecodeURIComponent = (value) => {
 };
 const normalizeViteFsPath = (value) => {
     const fsPath = value.slice(VITE_FS_PREFIX.length);
-    return path_1.default.normalize(safeDecodeURIComponent(fsPath));
+    return path.normalize(safeDecodeURIComponent(fsPath));
 };
 const isCssReloadTarget = (value) => {
     if (!value || typeof value !== 'object')
@@ -173,12 +178,12 @@ const getWywCssAssetFileNames = (resolvedConfig, output, originalAssetFileNames)
     const preserveModulesRootValue = output.preserveModulesRoot;
     let preserveModulesRootAbs = null;
     if (typeof preserveModulesRootValue === 'string') {
-        preserveModulesRootAbs = path_1.default.isAbsolute(preserveModulesRootValue)
+        preserveModulesRootAbs = path.isAbsolute(preserveModulesRootValue)
             ? preserveModulesRootValue
-            : path_1.default.resolve(rootDir, preserveModulesRootValue);
+            : path.resolve(rootDir, preserveModulesRootValue);
     }
     const preserveModulesRootRel = preserveModulesRootAbs && isInside(preserveModulesRootAbs, rootDir)
-        ? normalizeToPosix(path_1.default.relative(rootDir, preserveModulesRootAbs))
+        ? normalizeToPosix(path.relative(rootDir, preserveModulesRootAbs))
         : null;
     return (assetInfo) => {
         const template = typeof originalAssetFileNames === 'function'
@@ -193,18 +198,18 @@ const getWywCssAssetFileNames = (resolvedConfig, output, originalAssetFileNames)
         }
         let relativePath = null;
         const assetNameNormalized = normalizeToPosix(assetName);
-        if (path_1.default.isAbsolute(assetName) ||
+        if (path.isAbsolute(assetName) ||
             isWindowsAbsolutePath(assetNameNormalized)) {
             const preserveRel = preserveModulesRootAbs && isInside(assetName, preserveModulesRootAbs)
-                ? path_1.default.relative(preserveModulesRootAbs, assetName)
+                ? path.relative(preserveModulesRootAbs, assetName)
                 : null;
             if (preserveRel &&
-                !path_1.default.isAbsolute(preserveRel) &&
+                !path.isAbsolute(preserveRel) &&
                 !preserveRel.startsWith('..')) {
                 relativePath = preserveRel;
             }
             else if (isInside(assetName, rootDir)) {
-                relativePath = path_1.default.relative(rootDir, assetName);
+                relativePath = path.relative(rootDir, assetName);
             }
         }
         else if (preserveModulesRootRel &&
@@ -222,13 +227,13 @@ const getWywCssAssetFileNames = (resolvedConfig, output, originalAssetFileNames)
         }
         const withoutExt = stripExtension(normalized);
         if (template.includes('[name]')) {
-            const dir = path_1.default.posix.dirname(withoutExt);
+            const dir = path.posix.dirname(withoutExt);
             if (dir === '.' || dir === '') {
                 return template;
             }
             return template.replace(/\[name\]/g, `${dir}/[name]`);
         }
-        const dir = path_1.default.posix.dirname(withoutExt);
+        const dir = path.posix.dirname(withoutExt);
         if (dir === '.' || dir === '') {
             return template;
         }
@@ -243,16 +248,38 @@ const getWywCssAssetFileNames = (resolvedConfig, output, originalAssetFileNames)
         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);
+export default function wywInJS({ debug, include, exclude, sourceMap, preserveCssPaths, keepComments, prefixer, preprocessor, ssrDevCss, ssrDevCssPath, transformLibraries, ...rest } = {}) {
+    const supportedModuleExtensions = new Set([
+        '.cjs',
+        '.cts',
+        '.js',
+        '.jsx',
+        '.mjs',
+        '.mts',
+        '.ts',
+        '.tsx',
+    ]);
+    const filter = createFilter(include, exclude);
     const cssLookup = {};
     const cssFileLookup = {};
+    const metadataLookup = {};
     const cssFilesByModuleId = new Map();
     const pendingCssReloads = new WeakMap();
     let ssrDevCssVersion = 0;
     let config;
     let devServer;
     let importMetaEnvForEval = null;
+    const buildOverrideContext = (getEnv) => (context, filename) => {
+        const env = getEnv();
+        const withEnv = env
+            ? { ...context, __wyw_import_meta_env: env }
+            : context;
+        return rest.overrideContext
+            ? rest.overrideContext(withEnv, filename)
+            : withEnv;
+    };
+    const overrideContextClient = buildOverrideContext(() => importMetaEnvForEval?.client);
+    const overrideContextSsr = buildOverrideContext(() => importMetaEnvForEval?.ssr);
     const ssrDevCssEnabled = Boolean(ssrDevCss);
     const [ssrDevCssPathname, ssrDevCssQuery] = (ssrDevCssPath ?? '/_wyw-in-js/ssr.css').split('?', 2);
     const ssrDevCssRoute = ssrDevCssPathname.startsWith('/')
@@ -275,7 +302,35 @@ function wywInJS({ debug, include, exclude, sourceMap, preserveCssPaths, keepCom
             .join('\n');
         return `${merged}\n`;
     };
-    const { emitter, onDone } = (0, transform_1.createFileReporter)(debug ?? false);
+    const { emitter, onDone } = createFileReporter(debug ?? false);
+    const isSafeAssetPath = (fileName) => fileName !== '' &&
+        fileName !== '..' &&
+        !fileName.startsWith(`..${path.posix.sep}`) &&
+        !path.posix.isAbsolute(fileName) &&
+        !isWindowsAbsolutePath(fileName);
+    const replaceModuleExtension = (filename, nextExtension) => {
+        const extension = path.extname(filename);
+        return supportedModuleExtensions.has(extension)
+            ? `${filename.slice(0, -extension.length)}${nextExtension}`
+            : `${filename}${nextExtension}`;
+    };
+    const toBundleRelativePath = (filename) => {
+        const relativePath = normalizeToPosix(path.relative(config.root, filename));
+        if (isSafeAssetPath(relativePath)) {
+            return relativePath;
+        }
+        if (!path.isAbsolute(relativePath) &&
+            !isWindowsAbsolutePath(relativePath)) {
+            return path.posix.join('_wyw-in-js', 'external', ...relativePath
+                .split(path.posix.sep)
+                .filter(Boolean)
+                .map((segment) => (segment === '..' ? '__up__' : segment)));
+        }
+        return path.posix.join('_wyw-in-js', 'external', ...normalizeToPosix(path.resolve(filename))
+            .split(path.posix.sep)
+            .filter(Boolean)
+            .map((segment) => segment.replace(/:$/, '')));
+    };
     const scheduleCssReload = (reloadTarget, cssFilename) => {
         let state = pendingCssReloads.get(reloadTarget);
         if (!state) {
@@ -299,18 +354,27 @@ function wywInJS({ debug, include, exclude, sourceMap, preserveCssPaths, keepCom
     };
     // <dependency id, targets>
     const targets = [];
-    const clientCache = new transform_1.TransformCacheCollection();
-    const ssrCache = new transform_1.TransformCacheCollection();
+    const clientCache = new TransformCacheCollection();
+    const ssrCache = new TransformCacheCollection();
     const caches = new Set([clientCache, ssrCache]);
+    let evalBrokersDisposed = false;
+    const disposeEvalBrokers = () => {
+        if (evalBrokersDisposed)
+            return;
+        evalBrokersDisposed = true;
+        for (const cache of caches) {
+            disposeEvalBroker(cache);
+        }
+    };
     const getCache = (isSsr) => isSsr ? ssrCache : clientCache;
     const isInsideCacheDir = (filename) => {
         if (!config.cacheDir) {
             return false;
         }
-        const relative = path_1.default.relative(config.cacheDir, filename);
+        const relative = path.relative(config.cacheDir, filename);
         return (relative !== '' &&
             !relative.startsWith('..') &&
-            !path_1.default.isAbsolute(relative));
+            !path.isAbsolute(relative));
     };
     const getDepsOptimizer = () => {
         if (!devServer)
@@ -347,8 +411,8 @@ function wywInJS({ debug, include, exclude, sourceMap, preserveCssPaths, keepCom
         }
         return viteResolver(what, importer, false, 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));
+    const createAsyncResolver = asyncResolverFactory(async (resolved, what, importer, stack) => {
+        const log = logger.extend('vite').extend(getFileIdx(importer));
         if (resolved) {
             log("resolve ✅ '%s'@'%s -> %O\n%s", what, importer, resolved);
             // Vite adds param like `?v=667939b3` to cached modules
@@ -364,7 +428,7 @@ function wywInJS({ debug, include, exclude, sourceMap, preserveCssPaths, keepCom
             if (resolvedId.startsWith('/@')) {
                 return null;
             }
-            if (!(0, fs_1.existsSync)(resolvedId)) {
+            if (!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 {
@@ -376,19 +440,19 @@ function wywInJS({ debug, include, exclude, sourceMap, preserveCssPaths, keepCom
                 // 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)) {
+                if (!existsSync(resolvedId) && isInsideCacheDir(resolvedId)) {
                     try {
-                        return (0, shared_1.syncResolve)(what, importer, stack);
+                        return syncResolve(what, importer, stack);
                     }
                     catch {
                         // Fall through to preserve previous behavior: return resolvedId and let WyW surface the error.
                     }
                 }
             }
-            if (!(0, fs_1.existsSync)(resolvedId) && !path_1.default.isAbsolute(resolvedId)) {
+            if (!existsSync(resolvedId) && !path.isAbsolute(resolvedId)) {
                 // Vite can resolve an import to a bare specifier when bundling for SSR and marking it as external.
                 // In that case we still need a real file path for WyW evaluation.
-                return (0, shared_1.syncResolve)(what, importer, stack);
+                return syncResolve(what, importer, stack);
             }
             return resolvedId;
         }
@@ -399,19 +463,30 @@ function wywInJS({ debug, include, exclude, sourceMap, preserveCssPaths, keepCom
         }
         if (!what.startsWith('.') &&
             !what.startsWith('/') &&
-            !path_1.default.isAbsolute(what)) {
+            !path.isAbsolute(what)) {
             // Keep compatibility with SSR externalization: fall back to Node resolution for bare specifiers.
-            return (0, shared_1.syncResolve)(what, importer, stack);
+            return syncResolve(what, importer, stack);
         }
         throw new Error(`Could not resolve ${what}`);
-    }, (what, importer) => [what, importer]);
+    }, (what, importer) => [
+        what,
+        importer,
+    ]);
     const asyncResolveClient = createAsyncResolver(resolveClient);
     const asyncResolveSsr = createAsyncResolver(resolveSsr);
     return {
         name: 'wyw-in-js',
         enforce: 'post',
+        buildStart() {
+            Object.keys(metadataLookup).forEach((key) => {
+                delete metadataLookup[key];
+            });
+        },
         buildEnd() {
             onDone(process.cwd());
+            if (config.command === 'build') {
+                disposeEvalBrokers();
+            }
         },
         configResolved(resolvedConfig) {
             config = resolvedConfig;
@@ -444,7 +519,7 @@ function wywInJS({ debug, include, exclude, sourceMap, preserveCssPaths, keepCom
             'envDir' in config && typeof config.envDir === 'string'
                 ? config.envDir
                 : config.root;
-            const loaded = (0, vite_1.loadEnv)(config.mode, envDir, envPrefix);
+            const loaded = loadEnv(config.mode, envDir, envPrefix);
             const base = {
                 ...loaded,
                 BASE_URL: config.base,
@@ -459,32 +534,33 @@ function wywInJS({ debug, include, exclude, sourceMap, preserveCssPaths, keepCom
         },
         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());
-            });
+            devServer.httpServer?.once('close', disposeEvalBrokers);
+            if (ssrDevCssEnabled && config.command === 'serve') {
+                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')
@@ -534,6 +610,13 @@ function wywInJS({ debug, include, exclude, sourceMap, preserveCssPaths, keepCom
                 .filter((m) => !!m);
         },
         generateBundle(outputOptions, bundle) {
+            Object.entries(metadataLookup).forEach(([fileName, source]) => {
+                this.emitFile({
+                    fileName,
+                    source,
+                    type: 'asset',
+                });
+            });
             if (config.command !== 'build')
                 return;
             if (!outputOptions.preserveModules)
@@ -571,20 +654,14 @@ function wywInJS({ debug, include, exclude, sourceMap, preserveCssPaths, keepCom
                 !filter(url) ||
                 id in cssLookup)
                 return;
-            const log = shared_1.logger.extend('vite').extend((0, transform_1.getFileIdx)(id));
+            const log = logger.extend('vite').extend(getFileIdx(id));
             log('transform %s', id);
             const isSsr = typeof transformOptions === 'boolean'
                 ? transformOptions
                 : Boolean(transformOptions?.ssr);
-            const overrideContext = (context, filename) => {
-                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 overrideContext = isSsr
+                ? overrideContextSsr
+                : overrideContextClient;
             const transformServices = {
                 options: {
                     filename: id,
@@ -602,7 +679,34 @@ function wywInJS({ debug, include, exclude, sourceMap, preserveCssPaths, keepCom
                 eventEmitter: emitter,
             };
             const asyncResolve = isSsr ? asyncResolveSsr : asyncResolveClient;
-            const result = await (0, transform_1.transform)(transformServices, code, asyncResolve);
+            const result = await transform(transformServices, code, asyncResolve);
+            result.diagnostics?.forEach((diagnostic) => {
+                this.warn({
+                    id: diagnostic.filename,
+                    loc: diagnostic.start
+                        ? {
+                            column: diagnostic.start.column,
+                            file: diagnostic.filename,
+                            line: diagnostic.start.line,
+                        }
+                        : undefined,
+                    message: `[wyw-in-js] ${diagnostic.severity} [${diagnostic.category}] ${diagnostic.message}`,
+                    pluginCode: diagnostic.category,
+                });
+            });
+            const relativeId = normalizeToPosix(path.relative(config.root, id));
+            const metadataFilename = replaceModuleExtension(id, '.wyw-in-js.json');
+            const metadataRelativePath = toBundleRelativePath(metadataFilename);
+            delete metadataLookup[metadataRelativePath];
+            if (result.metadata) {
+                const cssFile = typeof result.cssText === 'string' && result.cssText !== ''
+                    ? replaceModuleExtension(relativeId, '.wyw-in-js.css')
+                    : undefined;
+                metadataLookup[metadataRelativePath] = stringifyMetadataManifest(createMetadataManifest(result.metadata, {
+                    cssFile,
+                    source: relativeId,
+                }));
+            }
             let { cssText, dependencies } = result;
             // Heads up, there are three cases:
             // 1. cssText is undefined, it means that file was not transformed
@@ -621,13 +725,9 @@ function wywInJS({ debug, include, exclude, sourceMap, preserveCssPaths, keepCom
                 };
             }
             dependencies ??= [];
-            const cssFilename = path_1.default
-                .normalize(`${id.replace(/\.[jt]sx?$/, '')}.wyw-in-js.css`)
-                .replace(/\\/g, path_1.default.posix.sep);
+            const cssFilename = normalizeToPosix(replaceModuleExtension(id, '.wyw-in-js.css'));
             cssFilesByModuleId.set(id, cssFilename);
-            const cssRelativePath = path_1.default
-                .relative(config.root, cssFilename)
-                .replace(/\\/g, path_1.default.posix.sep);
+            const cssRelativePath = normalizeToPosix(path.relative(config.root, cssFilename));
             const cssId = `/${cssRelativePath}`;
             if (sourceMap && result.cssSourceMapText) {
                 const map = Buffer.from(result.cssSourceMapText).toString('base64');