@wyw-in-js/vite 0.1.1

package/LICENSE

@@ -0,0 +1,21 @@
+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.

package/esm/index.js

@@ -0,0 +1,162 @@
+/**
+ * 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
+ */
+
+import { existsSync } from 'fs';
+import path from 'path';
+import { createFilter } from '@rollup/pluginutils';
+import { optimizeDeps } from 'vite';
+import { logger, syncResolve } from '@wyw-in-js/shared';
+import { createFileReporter, getFileIdx, slugify, transform, TransformCacheCollection } from '@wyw-in-js/transform';
+export default function wywInJS({
+  debug,
+  include,
+  exclude,
+  sourceMap,
+  preprocessor,
+  ...rest
+} = {}) {
+  const filter = createFilter(include, exclude);
+  const cssLookup = {};
+  const cssFileLookup = {};
+  let config;
+  let devServer;
+  const {
+    emitter,
+    onDone
+  } = createFileReporter(debug ?? false);
+
+  // <dependency id, targets>
+  const targets = [];
+  const cache = new TransformCacheCollection();
+  return {
+    name: 'wyw-in-js',
+    enforce: 'post',
+    buildEnd() {
+      onDone(process.cwd());
+    },
+    configResolved(resolvedConfig) {
+      config = resolvedConfig;
+    },
+    configureServer(_server) {
+      devServer = _server;
+    },
+    load(url) {
+      const [id] = url.split('?', 1);
+      return cssLookup[id];
+    },
+    /* eslint-disable-next-line consistent-return */
+    resolveId(importeeUrl) {
+      const [id] = importeeUrl.split('?', 1);
+      if (cssLookup[id]) return id;
+      return cssFileLookup[id];
+    },
+    handleHotUpdate(ctx) {
+      // it's module, so just transform it
+      if (ctx.modules.length) return ctx.modules;
+
+      // Select affected modules of changed dependency
+      const affected = targets.filter(x =>
+      // file is dependency of any target
+      x.dependencies.some(dep => dep === ctx.file) ||
+      // or changed module is a dependency of any target
+      x.dependencies.some(dep => ctx.modules.some(m => m.file === dep)));
+      const deps = affected.flatMap(target => target.dependencies);
+
+      // eslint-disable-next-line no-restricted-syntax
+      for (const depId of deps) {
+        cache.invalidateForFile(depId);
+      }
+      return affected.map(target => devServer.moduleGraph.getModuleById(target.id)).concat(ctx.modules).filter(m => !!m);
+    },
+    async transform(code, url) {
+      const [id] = url.split('?', 1);
+
+      // Do not transform ignored and generated files
+      if (url.includes('node_modules') || !filter(url) || id in cssLookup) return;
+      const log = logger.extend('vite').extend(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 = 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 (!existsSync(resolvedId)) {
+            await optimizeDeps(config);
+          }
+          return resolvedId;
+        }
+        log("resolve ❌ '%s'@'%s", what, importer);
+        throw new Error(`Could not resolve ${what}`);
+      };
+      const transformServices = {
+        options: {
+          filename: id,
+          root: process.cwd(),
+          preprocessor,
+          pluginOptions: rest
+        },
+        cache,
+        eventEmitter: emitter
+      };
+      const result = await transform(transformServices, code, asyncResolve);
+      let {
+        cssText,
+        dependencies
+      } = result;
+      if (!cssText) return;
+      dependencies ??= [];
+      const slug = slugify(cssText);
+      const cssFilename = path.normalize(`${id.replace(/\.[jt]sx?$/, '')}_${slug}.css`).replace(/\\/g, path.posix.sep);
+      const cssRelativePath = path.relative(config.root, cssFilename).replace(/\\/g, path.posix.sep);
+      const cssId = `/${cssRelativePath}`;
+      if (sourceMap && result.cssSourceMapText) {
+        const map = Buffer.from(result.cssSourceMapText).toString('base64');
+        cssText += `/*# sourceMappingURL=data:application/json;base64,${map}*/`;
+      }
+      cssLookup[cssFilename] = cssText;
+      cssFileLookup[cssId] = cssFilename;
+      result.code += `\nimport ${JSON.stringify(cssFilename)};\n`;
+      if (devServer?.moduleGraph) {
+        const module = devServer.moduleGraph.getModuleById(cssId);
+        if (module) {
+          devServer.moduleGraph.invalidateModule(module);
+          module.lastHMRTimestamp = module.lastInvalidationTimestamp || Date.now();
+        }
+      }
+      for (let i = 0, end = dependencies.length; i < end; i++) {
+        // eslint-disable-next-line no-await-in-loop
+        const depModule = await this.resolve(dependencies[i], url, {
+          isEntry: false
+        });
+        if (depModule) dependencies[i] = depModule.id;
+      }
+      const target = targets.find(t => t.id === id);
+      if (!target) targets.push({
+        id,
+        dependencies
+      });else target.dependencies = dependencies;
+      /* eslint-disable-next-line consistent-return */
+      return {
+        code: result.code,
+        map: result.sourceMap
+      };
+    }
+  };
+}
+//# sourceMappingURL=index.js.map

package/esm/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":["existsSync","path","createFilter","optimizeDeps","logger","syncResolve","createFileReporter","getFileIdx","slugify","transform","TransformCacheCollection","wywInJS","debug","include","exclude","sourceMap","preprocessor","rest","filter","cssLookup","cssFileLookup","config","devServer","emitter","onDone","targets","cache","name","enforce","buildEnd","process","cwd","configResolved","resolvedConfig","configureServer","_server","load","url","id","split","resolveId","importeeUrl","handleHotUpdate","ctx","modules","length","affected","x","dependencies","some","dep","file","m","deps","flatMap","target","depId","invalidateForFile","map","moduleGraph","getModuleById","concat","code","includes","log","extend","asyncResolve","what","importer","stack","resolved","resolve","external","resolvedId","startsWith","Error","transformServices","options","filename","root","pluginOptions","eventEmitter","result","cssText","slug","cssFilename","normalize","replace","posix","sep","cssRelativePath","relative","cssId","cssSourceMapText","Buffer","from","toString","JSON","stringify","module","invalidateModule","lastHMRTimestamp","lastInvalidationTimestamp","Date","now","i","end","depModule","isEntry","find","t","push"],"sources":["../src/index.ts"],"sourcesContent":["/**\n * This file contains a Vite loader for wyw-in-js.\n * It uses the transform.ts function to generate class names from source code,\n * returns transformed code without template literals and attaches generated source maps\n */\n\nimport { existsSync } from 'fs';\nimport path from 'path';\n\nimport type { FilterPattern } from '@rollup/pluginutils';\nimport { createFilter } from '@rollup/pluginutils';\nimport { optimizeDeps } from 'vite';\nimport type { ModuleNode, Plugin, ResolvedConfig, ViteDevServer } from 'vite';\n\nimport { logger, syncResolve } from '@wyw-in-js/shared';\nimport type {\n  IFileReporterOptions,\n  PluginOptions,\n  Preprocessor,\n} from '@wyw-in-js/transform';\nimport {\n  createFileReporter,\n  getFileIdx,\n  slugify,\n  transform,\n  TransformCacheCollection,\n} from '@wyw-in-js/transform';\n\ntype VitePluginOptions = {\n  debug?: IFileReporterOptions | false | null | undefined;\n  exclude?: FilterPattern;\n  include?: FilterPattern;\n  preprocessor?: Preprocessor;\n  sourceMap?: boolean;\n} & Partial<PluginOptions>;\n\nexport { Plugin };\n\nexport default function wywInJS({\n  debug,\n  include,\n  exclude,\n  sourceMap,\n  preprocessor,\n  ...rest\n}: VitePluginOptions = {}): Plugin {\n  const filter = createFilter(include, exclude);\n  const cssLookup: { [key: string]: string } = {};\n  const cssFileLookup: { [key: string]: string } = {};\n  let config: ResolvedConfig;\n  let devServer: ViteDevServer;\n\n  const { emitter, onDone } = createFileReporter(debug ?? false);\n\n  // <dependency id, targets>\n  const targets: { dependencies: string[]; id: string }[] = [];\n  const cache = new TransformCacheCollection();\n  return {\n    name: 'wyw-in-js',\n    enforce: 'post',\n    buildEnd() {\n      onDone(process.cwd());\n    },\n    configResolved(resolvedConfig: ResolvedConfig) {\n      config = resolvedConfig;\n    },\n    configureServer(_server) {\n      devServer = _server;\n    },\n    load(url: string) {\n      const [id] = url.split('?', 1);\n      return cssLookup[id];\n    },\n    /* eslint-disable-next-line consistent-return */\n    resolveId(importeeUrl: string) {\n      const [id] = importeeUrl.split('?', 1);\n      if (cssLookup[id]) return id;\n      return cssFileLookup[id];\n    },\n    handleHotUpdate(ctx) {\n      // it's module, so just transform it\n      if (ctx.modules.length) return ctx.modules;\n\n      // Select affected modules of changed dependency\n      const affected = targets.filter(\n        (x) =>\n          // file is dependency of any target\n          x.dependencies.some((dep) => dep === ctx.file) ||\n          // or changed module is a dependency of any target\n          x.dependencies.some((dep) => ctx.modules.some((m) => m.file === dep))\n      );\n      const deps = affected.flatMap((target) => target.dependencies);\n\n      // eslint-disable-next-line no-restricted-syntax\n      for (const depId of deps) {\n        cache.invalidateForFile(depId);\n      }\n\n      return affected\n        .map((target) => devServer.moduleGraph.getModuleById(target.id))\n        .concat(ctx.modules)\n        .filter((m): m is ModuleNode => !!m);\n    },\n    async transform(code: string, url: string) {\n      const [id] = url.split('?', 1);\n\n      // Do not transform ignored and generated files\n      if (url.includes('node_modules') || !filter(url) || id in cssLookup)\n        return;\n\n      const log = logger.extend('vite').extend(getFileIdx(id));\n\n      log('transform %s', id);\n\n      const asyncResolve = async (\n        what: string,\n        importer: string,\n        stack: string[]\n      ) => {\n        const resolved = await this.resolve(what, importer);\n        if (resolved) {\n          if (resolved.external) {\n            // If module is marked as external, Rollup will not resolve it,\n            // so we need to resolve it ourselves with default resolver\n            const resolvedId = syncResolve(what, importer, stack);\n            log(\"resolve ✅ '%s'@'%s -> %O\\n%s\", what, importer, resolved);\n            return resolvedId;\n          }\n\n          log(\"resolve ✅ '%s'@'%s -> %O\\n%s\", what, importer, resolved);\n          // Vite adds param like `?v=667939b3` to cached modules\n          const resolvedId = resolved.id.split('?', 1)[0];\n\n          if (resolvedId.startsWith('\\0')) {\n            // \\0 is a special character in Rollup that tells Rollup to not include this in the bundle\n            // https://rollupjs.org/guide/en/#outputexports\n            return null;\n          }\n\n          if (!existsSync(resolvedId)) {\n            await optimizeDeps(config);\n          }\n\n          return resolvedId;\n        }\n\n        log(\"resolve ❌ '%s'@'%s\", what, importer);\n        throw new Error(`Could not resolve ${what}`);\n      };\n\n      const transformServices = {\n        options: {\n          filename: id,\n          root: process.cwd(),\n          preprocessor,\n          pluginOptions: rest,\n        },\n        cache,\n        eventEmitter: emitter,\n      };\n\n      const result = await transform(transformServices, code, asyncResolve);\n\n      let { cssText, dependencies } = result;\n\n      if (!cssText) return;\n      dependencies ??= [];\n\n      const slug = slugify(cssText);\n\n      const cssFilename = path\n        .normalize(`${id.replace(/\\.[jt]sx?$/, '')}_${slug}.css`)\n        .replace(/\\\\/g, path.posix.sep);\n\n      const cssRelativePath = path\n        .relative(config.root, cssFilename)\n        .replace(/\\\\/g, path.posix.sep);\n\n      const cssId = `/${cssRelativePath}`;\n\n      if (sourceMap && result.cssSourceMapText) {\n        const map = Buffer.from(result.cssSourceMapText).toString('base64');\n        cssText += `/*# sourceMappingURL=data:application/json;base64,${map}*/`;\n      }\n\n      cssLookup[cssFilename] = cssText;\n      cssFileLookup[cssId] = cssFilename;\n\n      result.code += `\\nimport ${JSON.stringify(cssFilename)};\\n`;\n      if (devServer?.moduleGraph) {\n        const module = devServer.moduleGraph.getModuleById(cssId);\n\n        if (module) {\n          devServer.moduleGraph.invalidateModule(module);\n          module.lastHMRTimestamp =\n            module.lastInvalidationTimestamp || Date.now();\n        }\n      }\n\n      for (let i = 0, end = dependencies.length; i < end; i++) {\n        // eslint-disable-next-line no-await-in-loop\n        const depModule = await this.resolve(dependencies[i], url, {\n          isEntry: false,\n        });\n        if (depModule) dependencies[i] = depModule.id;\n      }\n      const target = targets.find((t) => t.id === id);\n      if (!target) targets.push({ id, dependencies });\n      else target.dependencies = dependencies;\n      /* eslint-disable-next-line consistent-return */\n      return { code: result.code, map: result.sourceMap };\n    },\n  };\n}\n"],"mappings":"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"}

package/lib/index.js

@@ -0,0 +1,170 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = wywInJS;
+var _fs = require("fs");
+var _path = _interopRequireDefault(require("path"));
+var _pluginutils = require("@rollup/pluginutils");
+var _vite = require("vite");
+var _shared = require("@wyw-in-js/shared");
+var _transform = require("@wyw-in-js/transform");
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+/**
+ * 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
+ */
+
+function wywInJS({
+  debug,
+  include,
+  exclude,
+  sourceMap,
+  preprocessor,
+  ...rest
+} = {}) {
+  const filter = (0, _pluginutils.createFilter)(include, exclude);
+  const cssLookup = {};
+  const cssFileLookup = {};
+  let config;
+  let devServer;
+  const {
+    emitter,
+    onDone
+  } = (0, _transform.createFileReporter)(debug !== null && debug !== void 0 ? debug : false);
+
+  // <dependency id, targets>
+  const targets = [];
+  const cache = new _transform.TransformCacheCollection();
+  return {
+    name: 'wyw-in-js',
+    enforce: 'post',
+    buildEnd() {
+      onDone(process.cwd());
+    },
+    configResolved(resolvedConfig) {
+      config = resolvedConfig;
+    },
+    configureServer(_server) {
+      devServer = _server;
+    },
+    load(url) {
+      const [id] = url.split('?', 1);
+      return cssLookup[id];
+    },
+    /* eslint-disable-next-line consistent-return */
+    resolveId(importeeUrl) {
+      const [id] = importeeUrl.split('?', 1);
+      if (cssLookup[id]) return id;
+      return cssFileLookup[id];
+    },
+    handleHotUpdate(ctx) {
+      // it's module, so just transform it
+      if (ctx.modules.length) return ctx.modules;
+
+      // Select affected modules of changed dependency
+      const affected = targets.filter(x =>
+      // file is dependency of any target
+      x.dependencies.some(dep => dep === ctx.file) ||
+      // or changed module is a dependency of any target
+      x.dependencies.some(dep => ctx.modules.some(m => m.file === dep)));
+      const deps = affected.flatMap(target => target.dependencies);
+
+      // eslint-disable-next-line no-restricted-syntax
+      for (const depId of deps) {
+        cache.invalidateForFile(depId);
+      }
+      return affected.map(target => devServer.moduleGraph.getModuleById(target.id)).concat(ctx.modules).filter(m => !!m);
+    },
+    async transform(code, url) {
+      var _dependencies, _devServer;
+      const [id] = url.split('?', 1);
+
+      // Do not transform ignored and generated files
+      if (url.includes('node_modules') || !filter(url) || id in cssLookup) return;
+      const log = _shared.logger.extend('vite').extend((0, _transform.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.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.existsSync)(resolvedId)) {
+            await (0, _vite.optimizeDeps)(config);
+          }
+          return resolvedId;
+        }
+        log("resolve ❌ '%s'@'%s", what, importer);
+        throw new Error(`Could not resolve ${what}`);
+      };
+      const transformServices = {
+        options: {
+          filename: id,
+          root: process.cwd(),
+          preprocessor,
+          pluginOptions: rest
+        },
+        cache,
+        eventEmitter: emitter
+      };
+      const result = await (0, _transform.transform)(transformServices, code, asyncResolve);
+      let {
+        cssText,
+        dependencies
+      } = result;
+      if (!cssText) return;
+      (_dependencies = dependencies) !== null && _dependencies !== void 0 ? _dependencies : dependencies = [];
+      const slug = (0, _transform.slugify)(cssText);
+      const cssFilename = _path.default.normalize(`${id.replace(/\.[jt]sx?$/, '')}_${slug}.css`).replace(/\\/g, _path.default.posix.sep);
+      const cssRelativePath = _path.default.relative(config.root, cssFilename).replace(/\\/g, _path.default.posix.sep);
+      const cssId = `/${cssRelativePath}`;
+      if (sourceMap && result.cssSourceMapText) {
+        const map = Buffer.from(result.cssSourceMapText).toString('base64');
+        cssText += `/*# sourceMappingURL=data:application/json;base64,${map}*/`;
+      }
+      cssLookup[cssFilename] = cssText;
+      cssFileLookup[cssId] = cssFilename;
+      result.code += `\nimport ${JSON.stringify(cssFilename)};\n`;
+      if ((_devServer = devServer) !== null && _devServer !== void 0 && _devServer.moduleGraph) {
+        const module = devServer.moduleGraph.getModuleById(cssId);
+        if (module) {
+          devServer.moduleGraph.invalidateModule(module);
+          module.lastHMRTimestamp = module.lastInvalidationTimestamp || Date.now();
+        }
+      }
+      for (let i = 0, end = dependencies.length; i < end; i++) {
+        // eslint-disable-next-line no-await-in-loop
+        const depModule = await this.resolve(dependencies[i], url, {
+          isEntry: false
+        });
+        if (depModule) dependencies[i] = depModule.id;
+      }
+      const target = targets.find(t => t.id === id);
+      if (!target) targets.push({
+        id,
+        dependencies
+      });else target.dependencies = dependencies;
+      /* eslint-disable-next-line consistent-return */
+      return {
+        code: result.code,
+        map: result.sourceMap
+      };
+    }
+  };
+}
+//# sourceMappingURL=index.js.map

package/lib/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":["_fs","require","_path","_interopRequireDefault","_pluginutils","_vite","_shared","_transform","obj","__esModule","default","wywInJS","debug","include","exclude","sourceMap","preprocessor","rest","filter","createFilter","cssLookup","cssFileLookup","config","devServer","emitter","onDone","createFileReporter","targets","cache","TransformCacheCollection","name","enforce","buildEnd","process","cwd","configResolved","resolvedConfig","configureServer","_server","load","url","id","split","resolveId","importeeUrl","handleHotUpdate","ctx","modules","length","affected","x","dependencies","some","dep","file","m","deps","flatMap","target","depId","invalidateForFile","map","moduleGraph","getModuleById","concat","transform","code","_dependencies","_devServer","includes","log","logger","extend","getFileIdx","asyncResolve","what","importer","stack","resolved","resolve","external","resolvedId","syncResolve","startsWith","existsSync","optimizeDeps","Error","transformServices","options","filename","root","pluginOptions","eventEmitter","result","cssText","slug","slugify","cssFilename","path","normalize","replace","posix","sep","cssRelativePath","relative","cssId","cssSourceMapText","Buffer","from","toString","JSON","stringify","module","invalidateModule","lastHMRTimestamp","lastInvalidationTimestamp","Date","now","i","end","depModule","isEntry","find","t","push"],"sources":["../src/index.ts"],"sourcesContent":["/**\n * This file contains a Vite loader for wyw-in-js.\n * It uses the transform.ts function to generate class names from source code,\n * returns transformed code without template literals and attaches generated source maps\n */\n\nimport { existsSync } from 'fs';\nimport path from 'path';\n\nimport type { FilterPattern } from '@rollup/pluginutils';\nimport { createFilter } from '@rollup/pluginutils';\nimport { optimizeDeps } from 'vite';\nimport type { ModuleNode, Plugin, ResolvedConfig, ViteDevServer } from 'vite';\n\nimport { logger, syncResolve } from '@wyw-in-js/shared';\nimport type {\n  IFileReporterOptions,\n  PluginOptions,\n  Preprocessor,\n} from '@wyw-in-js/transform';\nimport {\n  createFileReporter,\n  getFileIdx,\n  slugify,\n  transform,\n  TransformCacheCollection,\n} from '@wyw-in-js/transform';\n\ntype VitePluginOptions = {\n  debug?: IFileReporterOptions | false | null | undefined;\n  exclude?: FilterPattern;\n  include?: FilterPattern;\n  preprocessor?: Preprocessor;\n  sourceMap?: boolean;\n} & Partial<PluginOptions>;\n\nexport { Plugin };\n\nexport default function wywInJS({\n  debug,\n  include,\n  exclude,\n  sourceMap,\n  preprocessor,\n  ...rest\n}: VitePluginOptions = {}): Plugin {\n  const filter = createFilter(include, exclude);\n  const cssLookup: { [key: string]: string } = {};\n  const cssFileLookup: { [key: string]: string } = {};\n  let config: ResolvedConfig;\n  let devServer: ViteDevServer;\n\n  const { emitter, onDone } = createFileReporter(debug ?? false);\n\n  // <dependency id, targets>\n  const targets: { dependencies: string[]; id: string }[] = [];\n  const cache = new TransformCacheCollection();\n  return {\n    name: 'wyw-in-js',\n    enforce: 'post',\n    buildEnd() {\n      onDone(process.cwd());\n    },\n    configResolved(resolvedConfig: ResolvedConfig) {\n      config = resolvedConfig;\n    },\n    configureServer(_server) {\n      devServer = _server;\n    },\n    load(url: string) {\n      const [id] = url.split('?', 1);\n      return cssLookup[id];\n    },\n    /* eslint-disable-next-line consistent-return */\n    resolveId(importeeUrl: string) {\n      const [id] = importeeUrl.split('?', 1);\n      if (cssLookup[id]) return id;\n      return cssFileLookup[id];\n    },\n    handleHotUpdate(ctx) {\n      // it's module, so just transform it\n      if (ctx.modules.length) return ctx.modules;\n\n      // Select affected modules of changed dependency\n      const affected = targets.filter(\n        (x) =>\n          // file is dependency of any target\n          x.dependencies.some((dep) => dep === ctx.file) ||\n          // or changed module is a dependency of any target\n          x.dependencies.some((dep) => ctx.modules.some((m) => m.file === dep))\n      );\n      const deps = affected.flatMap((target) => target.dependencies);\n\n      // eslint-disable-next-line no-restricted-syntax\n      for (const depId of deps) {\n        cache.invalidateForFile(depId);\n      }\n\n      return affected\n        .map((target) => devServer.moduleGraph.getModuleById(target.id))\n        .concat(ctx.modules)\n        .filter((m): m is ModuleNode => !!m);\n    },\n    async transform(code: string, url: string) {\n      const [id] = url.split('?', 1);\n\n      // Do not transform ignored and generated files\n      if (url.includes('node_modules') || !filter(url) || id in cssLookup)\n        return;\n\n      const log = logger.extend('vite').extend(getFileIdx(id));\n\n      log('transform %s', id);\n\n      const asyncResolve = async (\n        what: string,\n        importer: string,\n        stack: string[]\n      ) => {\n        const resolved = await this.resolve(what, importer);\n        if (resolved) {\n          if (resolved.external) {\n            // If module is marked as external, Rollup will not resolve it,\n            // so we need to resolve it ourselves with default resolver\n            const resolvedId = syncResolve(what, importer, stack);\n            log(\"resolve ✅ '%s'@'%s -> %O\\n%s\", what, importer, resolved);\n            return resolvedId;\n          }\n\n          log(\"resolve ✅ '%s'@'%s -> %O\\n%s\", what, importer, resolved);\n          // Vite adds param like `?v=667939b3` to cached modules\n          const resolvedId = resolved.id.split('?', 1)[0];\n\n          if (resolvedId.startsWith('\\0')) {\n            // \\0 is a special character in Rollup that tells Rollup to not include this in the bundle\n            // https://rollupjs.org/guide/en/#outputexports\n            return null;\n          }\n\n          if (!existsSync(resolvedId)) {\n            await optimizeDeps(config);\n          }\n\n          return resolvedId;\n        }\n\n        log(\"resolve ❌ '%s'@'%s\", what, importer);\n        throw new Error(`Could not resolve ${what}`);\n      };\n\n      const transformServices = {\n        options: {\n          filename: id,\n          root: process.cwd(),\n          preprocessor,\n          pluginOptions: rest,\n        },\n        cache,\n        eventEmitter: emitter,\n      };\n\n      const result = await transform(transformServices, code, asyncResolve);\n\n      let { cssText, dependencies } = result;\n\n      if (!cssText) return;\n      dependencies ??= [];\n\n      const slug = slugify(cssText);\n\n      const cssFilename = path\n        .normalize(`${id.replace(/\\.[jt]sx?$/, '')}_${slug}.css`)\n        .replace(/\\\\/g, path.posix.sep);\n\n      const cssRelativePath = path\n        .relative(config.root, cssFilename)\n        .replace(/\\\\/g, path.posix.sep);\n\n      const cssId = `/${cssRelativePath}`;\n\n      if (sourceMap && result.cssSourceMapText) {\n        const map = Buffer.from(result.cssSourceMapText).toString('base64');\n        cssText += `/*# sourceMappingURL=data:application/json;base64,${map}*/`;\n      }\n\n      cssLookup[cssFilename] = cssText;\n      cssFileLookup[cssId] = cssFilename;\n\n      result.code += `\\nimport ${JSON.stringify(cssFilename)};\\n`;\n      if (devServer?.moduleGraph) {\n        const module = devServer.moduleGraph.getModuleById(cssId);\n\n        if (module) {\n          devServer.moduleGraph.invalidateModule(module);\n          module.lastHMRTimestamp =\n            module.lastInvalidationTimestamp || Date.now();\n        }\n      }\n\n      for (let i = 0, end = dependencies.length; i < end; i++) {\n        // eslint-disable-next-line no-await-in-loop\n        const depModule = await this.resolve(dependencies[i], url, {\n          isEntry: false,\n        });\n        if (depModule) dependencies[i] = depModule.id;\n      }\n      const target = targets.find((t) => t.id === id);\n      if (!target) targets.push({ id, dependencies });\n      else target.dependencies = dependencies;\n      /* eslint-disable-next-line consistent-return */\n      return { code: result.code, map: result.sourceMap };\n    },\n  };\n}\n"],"mappings":"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"}

package/package.json

@@ -0,0 +1,47 @@
+{
+  "name": "@wyw-in-js/vite",
+  "version": "0.1.1",
+  "dependencies": {
+    "@rollup/pluginutils": "^5.0.4",
+    "@wyw-in-js/shared": "0.1.1",
+    "@wyw-in-js/transform": "0.1.1"
+  },
+  "devDependencies": {
+    "@types/node": "^16.18.55",
+    "source-map": "^0.7.4",
+    "vite": ">=3.2.7",
+    "@wyw-in-js/babel-config": "0.1.1",
+    "@wyw-in-js/eslint-config": "0.1.1",
+    "@wyw-in-js/jest-preset": "0.1.1",
+    "@wyw-in-js/ts-config": "0.1.1"
+  },
+  "engines": {
+    "node": ">=16.0.0"
+  },
+  "exports": {
+    "import": "./esm/index.js",
+    "require": "./lib/index.js",
+    "types": "./types/index.d.ts"
+  },
+  "files": [
+    "esm/",
+    "lib/",
+    "types/"
+  ],
+  "license": "MIT",
+  "main": "lib/index.js",
+  "module": "esm/index.js",
+  "peerDependencies": {
+    "vite": ">=3.2.7"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "types": "types/index.d.ts",
+  "scripts": {
+    "build:esm": "babel src --out-dir esm --extensions '.js,.jsx,.ts,.tsx' --source-maps --delete-dir-on-start",
+    "build:lib": "cross-env NODE_ENV=legacy babel src --out-dir lib --extensions '.js,.jsx,.ts,.tsx' --source-maps --delete-dir-on-start",
+    "build:types": "tsc --project ./tsconfig.lib.json --baseUrl . --rootDir ./src",
+    "lint": "eslint --ext .js,.ts ."
+  }
+}

package/types/index.d.ts

@@ -0,0 +1,17 @@
+/**
+ * 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
+ */
+import type { FilterPattern } from '@rollup/pluginutils';
+import type { Plugin } from 'vite';
+import type { IFileReporterOptions, PluginOptions, Preprocessor } from '@wyw-in-js/transform';
+type VitePluginOptions = {
+    debug?: IFileReporterOptions | false | null | undefined;
+    exclude?: FilterPattern;
+    include?: FilterPattern;
+    preprocessor?: Preprocessor;
+    sourceMap?: boolean;
+} & Partial<PluginOptions>;
+export { Plugin };
+export default function wywInJS({ debug, include, exclude, sourceMap, preprocessor, ...rest }?: VitePluginOptions): Plugin;

package/types/index.js

@@ -0,0 +1,159 @@
+"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 });
+const fs_1 = require("fs");
+const path_1 = __importDefault(require("path"));
+const pluginutils_1 = require("@rollup/pluginutils");
+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, preprocessor, ...rest } = {}) {
+    const filter = (0, pluginutils_1.createFilter)(include, exclude);
+    const cssLookup = {};
+    const cssFileLookup = {};
+    let config;
+    let devServer;
+    const { emitter, onDone } = (0, transform_1.createFileReporter)(debug ?? false);
+    // <dependency id, targets>
+    const targets = [];
+    const cache = new transform_1.TransformCacheCollection();
+    return {
+        name: 'wyw-in-js',
+        enforce: 'post',
+        buildEnd() {
+            onDone(process.cwd());
+        },
+        configResolved(resolvedConfig) {
+            config = resolvedConfig;
+        },
+        configureServer(_server) {
+            devServer = _server;
+        },
+        load(url) {
+            const [id] = url.split('?', 1);
+            return cssLookup[id];
+        },
+        /* eslint-disable-next-line consistent-return */
+        resolveId(importeeUrl) {
+            const [id] = importeeUrl.split('?', 1);
+            if (cssLookup[id])
+                return id;
+            return cssFileLookup[id];
+        },
+        handleHotUpdate(ctx) {
+            // it's module, so just transform it
+            if (ctx.modules.length)
+                return ctx.modules;
+            // Select affected modules of changed dependency
+            const affected = targets.filter((x) => 
+            // file is dependency of any target
+            x.dependencies.some((dep) => dep === ctx.file) ||
+                // or changed module is a dependency of any target
+                x.dependencies.some((dep) => ctx.modules.some((m) => m.file === dep)));
+            const deps = affected.flatMap((target) => target.dependencies);
+            // eslint-disable-next-line no-restricted-syntax
+            for (const depId of deps) {
+                cache.invalidateForFile(depId);
+            }
+            return affected
+                .map((target) => devServer.moduleGraph.getModuleById(target.id))
+                .concat(ctx.modules)
+                .filter((m) => !!m);
+        },
+        async transform(code, url) {
+            const [id] = url.split('?', 1);
+            // Do not transform ignored and generated files
+            if (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 transformServices = {
+                options: {
+                    filename: id,
+                    root: process.cwd(),
+                    preprocessor,
+                    pluginOptions: rest,
+                },
+                cache,
+                eventEmitter: emitter,
+            };
+            const result = await (0, transform_1.transform)(transformServices, code, asyncResolve);
+            let { cssText, dependencies } = result;
+            if (!cssText)
+                return;
+            dependencies ??= [];
+            const slug = (0, transform_1.slugify)(cssText);
+            const cssFilename = path_1.default
+                .normalize(`${id.replace(/\.[jt]sx?$/, '')}_${slug}.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 cssId = `/${cssRelativePath}`;
+            if (sourceMap && result.cssSourceMapText) {
+                const map = Buffer.from(result.cssSourceMapText).toString('base64');
+                cssText += `/*# sourceMappingURL=data:application/json;base64,${map}*/`;
+            }
+            cssLookup[cssFilename] = cssText;
+            cssFileLookup[cssId] = cssFilename;
+            result.code += `\nimport ${JSON.stringify(cssFilename)};\n`;
+            if (devServer?.moduleGraph) {
+                const module = devServer.moduleGraph.getModuleById(cssId);
+                if (module) {
+                    devServer.moduleGraph.invalidateModule(module);
+                    module.lastHMRTimestamp =
+                        module.lastInvalidationTimestamp || Date.now();
+                }
+            }
+            for (let i = 0, end = dependencies.length; i < end; i++) {
+                // eslint-disable-next-line no-await-in-loop
+                const depModule = await this.resolve(dependencies[i], url, {
+                    isEntry: false,
+                });
+                if (depModule)
+                    dependencies[i] = depModule.id;
+            }
+            const target = targets.find((t) => t.id === id);
+            if (!target)
+                targets.push({ id, dependencies });
+            else
+                target.dependencies = dependencies;
+            /* eslint-disable-next-line consistent-return */
+            return { code: result.code, map: result.sourceMap };
+        },
+    };
+}
+exports.default = wywInJS;