@wyw-in-js/vite 1.0.8 → 1.1.0

package/types/index.js

@@ -4,6 +4,39 @@
  * 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 __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
 var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
@@ -13,7 +46,18 @@ 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");
+const transformPkg = __importStar(require("@wyw-in-js/transform"));
+const { createTransformManifest, createFileReporter, 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 isInside = (childPath, parentPath) => {
@@ -32,6 +76,107 @@ const stripExtension = (value) => {
     const ext = path_1.default.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 (isInside(value, rootDir)) {
+            const relativeToRoot = normalizeAssetRelativePath(path_1.default.relative(rootDir, value));
+            if (relativeToRoot) {
+                variants.add(relativeToRoot);
+            }
+        }
+        return variants;
+    }
+    const relativePath = normalizeAssetRelativePath(value);
+    if (relativePath) {
+        variants.add(relativePath);
+    }
+    return variants;
+};
+const getStringValues = (value) => {
+    if (!Array.isArray(value))
+        return [];
+    return value.filter((item) => typeof item === 'string');
+};
+const getOutputAssetNames = (asset) => [
+    ...(typeof asset.name === 'string' ? [asset.name] : []),
+    ...getStringValues(asset.names),
+    ...(typeof asset.originalFileName === 'string'
+        ? [asset.originalFileName]
+        : []),
+    ...getStringValues(asset.originalFileNames),
+];
+const isOutputAssetLike = (value) => !!value &&
+    typeof value === 'object' &&
+    value.type === 'asset' &&
+    typeof value.fileName === 'string';
+const isOutputChunkLike = (value) => !!value &&
+    typeof value === 'object' &&
+    value.type === 'chunk' &&
+    typeof value.fileName === 'string' &&
+    typeof value.code === 'string';
+const getTrackedModuleIdForChunk = (chunk, cssFilesByModuleId) => {
+    if (typeof chunk.facadeModuleId === 'string' &&
+        cssFilesByModuleId.has(chunk.facadeModuleId)) {
+        return chunk.facadeModuleId;
+    }
+    if (!Array.isArray(chunk.moduleIds)) {
+        return null;
+    }
+    const moduleId = chunk.moduleIds.find((id) => typeof id === 'string' && cssFilesByModuleId.has(id));
+    return moduleId ?? null;
+};
+const findWywCssAssetFileName = (bundle, cssFilename, rootDir) => {
+    const expectedNames = getComparableAssetPaths(cssFilename, rootDir);
+    for (const item of Object.values(bundle)) {
+        if (isOutputAssetLike(item) && item.fileName.endsWith('.css')) {
+            const isMatch = getOutputAssetNames(item).some((assetName) => {
+                const variants = getComparableAssetPaths(assetName, rootDir);
+                return Array.from(variants).some((variant) => expectedNames.has(variant));
+            });
+            if (isMatch) {
+                return normalizeToPosix(item.fileName);
+            }
+        }
+    }
+    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));
+    return relativePath.startsWith('.') ? relativePath : `./${relativePath}`;
+};
+const escapeForRegExp = (value) => value.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
+const hasStaticImport = (code, specifier) => new RegExp(`(^|\\n)\\s*import\\s*(?:["']${escapeForRegExp(specifier)}["']|[^\\n;]+\\s+from\\s+["']${escapeForRegExp(specifier)}["'])`, 'm').test(code);
+const hasRequireCall = (code, specifier) => new RegExp(`(^|[;\\n])\\s*require\\(\\s*["']${escapeForRegExp(specifier)}["']\\s*\\)`, 'm').test(code);
+const getCssLoadStatement = (format, specifier) => format === 'cjs'
+    ? `require(${JSON.stringify(specifier)});\n`
+    : `import ${JSON.stringify(specifier)};\n`;
+const hasCssLoadStatement = (code, specifier, format) => format === 'cjs'
+    ? hasRequireCall(code, specifier)
+    : hasStaticImport(code, specifier);
+const prependCssLoadStatement = (code, specifier, format) => {
+    const statement = getCssLoadStatement(format, specifier);
+    let insertAt = 0;
+    if (code.startsWith('#!')) {
+        const lineBreakIndex = code.indexOf('\n');
+        if (lineBreakIndex >= 0) {
+            insertAt = lineBreakIndex + 1;
+        }
+        else {
+            return `${code}\n${statement}`;
+        }
+    }
+    if (format === 'cjs') {
+        const directiveMatch = /^(?:\s*(?:"(?:[^"\\]|\\.)*"|'(?:[^'\\]|\\.)*');)+/.exec(code.slice(insertAt));
+        if (directiveMatch) {
+            insertAt += directiveMatch[0].length;
+        }
+    }
+    return `${code.slice(0, insertAt)}${statement}${code.slice(insertAt)}`;
+};
 const VITE_FS_PREFIX = '/@fs/';
 const safeDecodeURIComponent = (value) => {
     try {
@@ -143,9 +288,21 @@ const getWywCssAssetFileNames = (resolvedConfig, output, originalAssetFileNames)
     };
 };
 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 = (0, vite_1.createFilter)(include, exclude);
     const cssLookup = {};
     const cssFileLookup = {};
+    const metadataLookup = {};
+    const cssFilesByModuleId = new Map();
     const pendingCssReloads = new WeakMap();
     let ssrDevCssVersion = 0;
     let config;
@@ -173,7 +330,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_1.default.posix.sep}`) &&
+        !path_1.default.posix.isAbsolute(fileName) &&
+        !isWindowsAbsolutePath(fileName);
+    const replaceModuleExtension = (filename, nextExtension) => {
+        const extension = path_1.default.extname(filename);
+        return supportedModuleExtensions.has(extension)
+            ? `${filename.slice(0, -extension.length)}${nextExtension}`
+            : `${filename}${nextExtension}`;
+    };
+    const toBundleRelativePath = (filename) => {
+        const relativePath = normalizeToPosix(path_1.default.relative(config.root, filename));
+        if (isSafeAssetPath(relativePath)) {
+            return relativePath;
+        }
+        if (!path_1.default.isAbsolute(relativePath) &&
+            !isWindowsAbsolutePath(relativePath)) {
+            return path_1.default.posix.join('_wyw-in-js', 'external', ...relativePath
+                .split(path_1.default.posix.sep)
+                .filter(Boolean)
+                .map((segment) => (segment === '..' ? '__up__' : segment)));
+        }
+        return path_1.default.posix.join('_wyw-in-js', 'external', ...normalizeToPosix(path_1.default.resolve(filename))
+            .split(path_1.default.posix.sep)
+            .filter(Boolean)
+            .map((segment) => segment.replace(/:$/, '')));
+    };
     const scheduleCssReload = (reloadTarget, cssFilename) => {
         let state = pendingCssReloads.get(reloadTarget);
         if (!state) {
@@ -197,8 +382,8 @@ 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]);
     const getCache = (isSsr) => isSsr ? ssrCache : clientCache;
     const isInsideCacheDir = (filename) => {
@@ -246,7 +431,7 @@ 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 log = shared_1.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
@@ -308,6 +493,11 @@ function wywInJS({ debug, include, exclude, sourceMap, preserveCssPaths, keepCom
     return {
         name: 'wyw-in-js',
         enforce: 'post',
+        buildStart() {
+            Object.keys(metadataLookup).forEach((key) => {
+                delete metadataLookup[key];
+            });
+        },
         buildEnd() {
             onDone(process.cwd());
         },
@@ -431,6 +621,44 @@ function wywInJS({ debug, include, exclude, sourceMap, preserveCssPaths, keepCom
                 .concat(ctx.modules)
                 .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)
+                return;
+            if (config.build.cssCodeSplit === false)
+                return;
+            Object.values(bundle).forEach((item) => {
+                if (!isOutputChunkLike(item)) {
+                    return;
+                }
+                const chunk = item;
+                const moduleId = getTrackedModuleIdForChunk(chunk, cssFilesByModuleId);
+                if (!moduleId) {
+                    return;
+                }
+                const cssFilename = cssFilesByModuleId.get(moduleId);
+                if (!cssFilename) {
+                    return;
+                }
+                const emittedCssFileName = findWywCssAssetFileName(bundle, cssFilename, config.root);
+                if (!emittedCssFileName) {
+                    return;
+                }
+                const relativeCssImport = getRelativeImportPath(chunk.fileName, emittedCssFileName);
+                if (hasCssLoadStatement(chunk.code, relativeCssImport, outputOptions.format)) {
+                    return;
+                }
+                chunk.code = prependCssLoadStatement(chunk.code, relativeCssImport, outputOptions.format);
+            });
+        },
         async transform(code, url, transformOptions) {
             const [id] = url.split('?', 1);
             // Do not transform ignored and generated files
@@ -438,7 +666,7 @@ 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 = shared_1.logger.extend('vite').extend(getFileIdx(id));
             log('transform %s', id);
             const isSsr = typeof transformOptions === 'boolean'
                 ? transformOptions
@@ -469,16 +697,45 @@ 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_1.default.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
             // 2. cssText is empty, it means that file was transformed, but it does not contain any styles
             // 3. cssText is not empty, it means that file was transformed and it contains styles
             if (typeof cssText === 'undefined') {
+                cssFilesByModuleId.delete(id);
                 return;
             }
             if (cssText === '') {
+                cssFilesByModuleId.delete(id);
                 /* eslint-disable-next-line consistent-return */
                 return {
                     code: result.code,
@@ -486,12 +743,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 cssRelativePath = path_1.default
-                .relative(config.root, cssFilename)
-                .replace(/\\/g, path_1.default.posix.sep);
+            const cssFilename = normalizeToPosix(replaceModuleExtension(id, '.wyw-in-js.css'));
+            cssFilesByModuleId.set(id, cssFilename);
+            const cssRelativePath = normalizeToPosix(path_1.default.relative(config.root, cssFilename));
             const cssId = `/${cssRelativePath}`;
             if (sourceMap && result.cssSourceMapText) {
                 const map = Buffer.from(result.cssSourceMapText).toString('base64');