@wyw-in-js/webpack-loader 0.1.0

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/WYWinJSDebugPlugin.js

@@ -0,0 +1,18 @@
+import { createFileReporter } from '@wyw-in-js/transform';
+export const sharedState = {};
+export class WYWinJSDebugPlugin {
+  constructor(options) {
+    const {
+      emitter,
+      onDone
+    } = createFileReporter(options ?? false);
+    sharedState.emitter = emitter;
+    this.onDone = onDone;
+  }
+  apply(compiler) {
+    compiler.hooks.shutdown.tap('WYWinJSDebug', () => {
+      this.onDone(process.cwd());
+    });
+  }
+}
+//# sourceMappingURL=WYWinJSDebugPlugin.js.map

package/esm/WYWinJSDebugPlugin.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"WYWinJSDebugPlugin.js","names":["createFileReporter","sharedState","WYWinJSDebugPlugin","constructor","options","emitter","onDone","apply","compiler","hooks","shutdown","tap","process","cwd"],"sources":["../src/WYWinJSDebugPlugin.ts"],"sourcesContent":["import type { Compiler } from 'webpack';\n\nimport type { EventEmitter, IFileReporterOptions } from '@wyw-in-js/transform';\nimport { createFileReporter } from '@wyw-in-js/transform';\n\nexport const sharedState: {\n  emitter?: EventEmitter;\n} = {};\n\nexport class WYWinJSDebugPlugin {\n  private readonly onDone: (root: string) => void;\n\n  constructor(options?: IFileReporterOptions) {\n    const { emitter, onDone } = createFileReporter(options ?? false);\n    sharedState.emitter = emitter;\n    this.onDone = onDone;\n  }\n\n  apply(compiler: Compiler) {\n    compiler.hooks.shutdown.tap('WYWinJSDebug', () => {\n      this.onDone(process.cwd());\n    });\n  }\n}\n"],"mappings":"AAGA,SAASA,kBAAkB,QAAQ,sBAAsB;AAEzD,OAAO,MAAMC,WAEZ,GAAG,CAAC,CAAC;AAEN,OAAO,MAAMC,kBAAkB,CAAC;EAG9BC,WAAWA,CAACC,OAA8B,EAAE;IAC1C,MAAM;MAAEC,OAAO;MAAEC;IAAO,CAAC,GAAGN,kBAAkB,CAACI,OAAO,IAAI,KAAK,CAAC;IAChEH,WAAW,CAACI,OAAO,GAAGA,OAAO;IAC7B,IAAI,CAACC,MAAM,GAAGA,MAAM;EACtB;EAEAC,KAAKA,CAACC,QAAkB,EAAE;IACxBA,QAAQ,CAACC,KAAK,CAACC,QAAQ,CAACC,GAAG,CAAC,cAAc,EAAE,MAAM;MAChD,IAAI,CAACL,MAAM,CAACM,OAAO,CAACC,GAAG,CAAC,CAAC,CAAC;IAC5B,CAAC,CAAC;EACJ;AACF"}

package/esm/cache.js

@@ -0,0 +1,40 @@
+// memory cache, which is the default cache implementation in WYW-in-JS
+
+class MemoryCache {
+  cache = new Map();
+  dependenciesCache = new Map();
+  get(key) {
+    return Promise.resolve(this.cache.get(key) ?? '');
+  }
+  getDependencies(key) {
+    return Promise.resolve(this.dependenciesCache.get(key) ?? []);
+  }
+  set(key, value) {
+    this.cache.set(key, value);
+    return Promise.resolve();
+  }
+  setDependencies(key, value) {
+    this.dependenciesCache.set(key, value);
+    return Promise.resolve();
+  }
+}
+export const memoryCache = new MemoryCache();
+
+/**
+ * return cache instance from `options.cacheProvider`
+ * @param cacheProvider string | ICache | undefined
+ * @returns ICache instance
+ */
+export const getCacheInstance = async cacheProvider => {
+  if (!cacheProvider) {
+    return memoryCache;
+  }
+  if (typeof cacheProvider === 'string') {
+    return require(cacheProvider);
+  }
+  if (typeof cacheProvider === 'object' && 'get' in cacheProvider && 'set' in cacheProvider) {
+    return cacheProvider;
+  }
+  throw new Error(`Invalid cache provider: ${cacheProvider}`);
+};
+//# sourceMappingURL=cache.js.map

package/esm/cache.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"cache.js","names":["MemoryCache","cache","Map","dependenciesCache","get","key","Promise","resolve","getDependencies","set","value","setDependencies","memoryCache","getCacheInstance","cacheProvider","require","Error"],"sources":["../src/cache.ts"],"sourcesContent":["export interface ICache {\n  get: (key: string) => Promise<string>;\n  getDependencies?: (key: string) => Promise<string[]>;\n  set: (key: string, value: string) => Promise<void>;\n  setDependencies?: (key: string, value: string[]) => Promise<void>;\n}\n\n// memory cache, which is the default cache implementation in WYW-in-JS\n\nclass MemoryCache implements ICache {\n  private cache: Map<string, string> = new Map();\n\n  private dependenciesCache: Map<string, string[]> = new Map();\n\n  public get(key: string): Promise<string> {\n    return Promise.resolve(this.cache.get(key) ?? '');\n  }\n\n  public getDependencies(key: string): Promise<string[]> {\n    return Promise.resolve(this.dependenciesCache.get(key) ?? []);\n  }\n\n  public set(key: string, value: string): Promise<void> {\n    this.cache.set(key, value);\n    return Promise.resolve();\n  }\n\n  public setDependencies(key: string, value: string[]): Promise<void> {\n    this.dependenciesCache.set(key, value);\n    return Promise.resolve();\n  }\n}\n\nexport const memoryCache = new MemoryCache();\n\n/**\n * return cache instance from `options.cacheProvider`\n * @param cacheProvider string | ICache | undefined\n * @returns ICache instance\n */\nexport const getCacheInstance = async (\n  cacheProvider: string | ICache | undefined\n): Promise<ICache> => {\n  if (!cacheProvider) {\n    return memoryCache;\n  }\n  if (typeof cacheProvider === 'string') {\n    return require(cacheProvider);\n  }\n  if (\n    typeof cacheProvider === 'object' &&\n    'get' in cacheProvider &&\n    'set' in cacheProvider\n  ) {\n    return cacheProvider;\n  }\n  throw new Error(`Invalid cache provider: ${cacheProvider}`);\n};\n"],"mappings":"AAOA;;AAEA,MAAMA,WAAW,CAAmB;EAC1BC,KAAK,GAAwB,IAAIC,GAAG,CAAC,CAAC;EAEtCC,iBAAiB,GAA0B,IAAID,GAAG,CAAC,CAAC;EAErDE,GAAGA,CAACC,GAAW,EAAmB;IACvC,OAAOC,OAAO,CAACC,OAAO,CAAC,IAAI,CAACN,KAAK,CAACG,GAAG,CAACC,GAAG,CAAC,IAAI,EAAE,CAAC;EACnD;EAEOG,eAAeA,CAACH,GAAW,EAAqB;IACrD,OAAOC,OAAO,CAACC,OAAO,CAAC,IAAI,CAACJ,iBAAiB,CAACC,GAAG,CAACC,GAAG,CAAC,IAAI,EAAE,CAAC;EAC/D;EAEOI,GAAGA,CAACJ,GAAW,EAAEK,KAAa,EAAiB;IACpD,IAAI,CAACT,KAAK,CAACQ,GAAG,CAACJ,GAAG,EAAEK,KAAK,CAAC;IAC1B,OAAOJ,OAAO,CAACC,OAAO,CAAC,CAAC;EAC1B;EAEOI,eAAeA,CAACN,GAAW,EAAEK,KAAe,EAAiB;IAClE,IAAI,CAACP,iBAAiB,CAACM,GAAG,CAACJ,GAAG,EAAEK,KAAK,CAAC;IACtC,OAAOJ,OAAO,CAACC,OAAO,CAAC,CAAC;EAC1B;AACF;AAEA,OAAO,MAAMK,WAAW,GAAG,IAAIZ,WAAW,CAAC,CAAC;;AAE5C;AACA;AACA;AACA;AACA;AACA,OAAO,MAAMa,gBAAgB,GAAG,MAC9BC,aAA0C,IACtB;EACpB,IAAI,CAACA,aAAa,EAAE;IAClB,OAAOF,WAAW;EACpB;EACA,IAAI,OAAOE,aAAa,KAAK,QAAQ,EAAE;IACrC,OAAOC,OAAO,CAACD,aAAa,CAAC;EAC/B;EACA,IACE,OAAOA,aAAa,KAAK,QAAQ,IACjC,KAAK,IAAIA,aAAa,IACtB,KAAK,IAAIA,aAAa,EACtB;IACA,OAAOA,aAAa;EACtB;EACA,MAAM,IAAIE,KAAK,CAAE,2BAA0BF,aAAc,EAAC,CAAC;AAC7D,CAAC"}

package/esm/index.js

@@ -0,0 +1,95 @@
+/**
+ * This file contains a Webpack 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 path from 'path';
+import { logger } from '@wyw-in-js/shared';
+import { transform, TransformCacheCollection } from '@wyw-in-js/transform';
+import { sharedState } from './WYWinJSDebugPlugin';
+import { getCacheInstance } from './cache';
+export { WYWinJSDebugPlugin } from './WYWinJSDebugPlugin';
+const outputCssLoader = require.resolve('./outputCssLoader');
+const cache = new TransformCacheCollection();
+const webpack5Loader = function webpack5LoaderPlugin(content, inputSourceMap) {
+  function convertSourceMap(value, filename) {
+    if (typeof value === 'string' || !value) {
+      return undefined;
+    }
+    return {
+      ...value,
+      file: value.file ?? filename,
+      mappings: value.mappings ?? '',
+      names: value.names ?? [],
+      sources: value.sources ?? [],
+      version: value.version ?? 3
+    };
+  }
+
+  // tell Webpack this loader is async
+  this.async();
+  logger('loader %s', this.resourcePath);
+  const {
+    sourceMap = undefined,
+    preprocessor = undefined,
+    extension = '.wyw-in-js.css',
+    cacheProvider,
+    ...rest
+  } = this.getOptions() || {};
+  const outputFileName = this.resourcePath.replace(/\.[^.]+$/, extension);
+  const resolveModule = this.getResolve({
+    dependencyType: 'esm'
+  });
+  const asyncResolve = (token, importer) => {
+    const context = path.isAbsolute(importer) ? path.dirname(importer) : path.join(process.cwd(), path.dirname(importer));
+    return new Promise((resolve, reject) => {
+      resolveModule(context, token, (err, result) => {
+        if (err) {
+          reject(err);
+        } else if (result) {
+          this.addDependency(result);
+          resolve(result);
+        } else {
+          reject(new Error(`Cannot resolve ${token}`));
+        }
+      });
+    });
+  };
+  const transformServices = {
+    options: {
+      filename: this.resourcePath,
+      inputSourceMap: convertSourceMap(inputSourceMap, this.resourcePath),
+      root: process.cwd(),
+      preprocessor,
+      pluginOptions: rest
+    },
+    cache,
+    eventEmitter: sharedState.emitter
+  };
+  transform(transformServices, content.toString(), asyncResolve).then(async result => {
+    if (result.cssText) {
+      let {
+        cssText
+      } = result;
+      if (sourceMap) {
+        cssText += `/*# sourceMappingURL=data:application/json;base64,${Buffer.from(result.cssSourceMapText || '').toString('base64')}*/`;
+      }
+      await Promise.all(result.dependencies?.map(dep => asyncResolve(dep, this.resourcePath)) ?? []);
+      try {
+        const cacheInstance = await getCacheInstance(cacheProvider);
+        await cacheInstance.set(this.resourcePath, cssText);
+        await cacheInstance.setDependencies?.(this.resourcePath, this.getDependencies());
+        const request = `${outputFileName}!=!${outputCssLoader}?cacheProvider=${encodeURIComponent(typeof cacheProvider === 'string' ? cacheProvider : '')}!${this.resourcePath}`;
+        const stringifiedRequest = JSON.stringify(this.utils.contextify(this.context || this.rootContext, request));
+        this.callback(null, `${result.code}\n\nrequire(${stringifiedRequest});`, result.sourceMap ?? undefined);
+      } catch (err) {
+        this.callback(err);
+      }
+      return;
+    }
+    this.callback(null, result.code, result.sourceMap ?? undefined);
+  }, err => this.callback(err)).catch(err => this.callback(err));
+};
+export default webpack5Loader;
+//# sourceMappingURL=index.js.map

package/esm/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":["path","logger","transform","TransformCacheCollection","sharedState","getCacheInstance","WYWinJSDebugPlugin","outputCssLoader","require","resolve","cache","webpack5Loader","webpack5LoaderPlugin","content","inputSourceMap","convertSourceMap","value","filename","undefined","file","mappings","names","sources","version","async","resourcePath","sourceMap","preprocessor","extension","cacheProvider","rest","getOptions","outputFileName","replace","resolveModule","getResolve","dependencyType","asyncResolve","token","importer","context","isAbsolute","dirname","join","process","cwd","Promise","reject","err","result","addDependency","Error","transformServices","options","root","pluginOptions","eventEmitter","emitter","toString","then","cssText","Buffer","from","cssSourceMapText","all","dependencies","map","dep","cacheInstance","set","setDependencies","getDependencies","request","encodeURIComponent","stringifiedRequest","JSON","stringify","utils","contextify","rootContext","callback","code","catch"],"sources":["../src/index.ts"],"sourcesContent":["/**\n * This file contains a Webpack 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 path from 'path';\n\nimport type { RawSourceMap } from 'source-map';\nimport type { RawLoaderDefinitionFunction } from 'webpack';\n\nimport { logger } from '@wyw-in-js/shared';\nimport type { Preprocessor, Result } from '@wyw-in-js/transform';\nimport { transform, TransformCacheCollection } from '@wyw-in-js/transform';\n\nimport { sharedState } from './WYWinJSDebugPlugin';\nimport type { ICache } from './cache';\nimport { getCacheInstance } from './cache';\n\nexport { WYWinJSDebugPlugin } from './WYWinJSDebugPlugin';\n\nconst outputCssLoader = require.resolve('./outputCssLoader');\n\ntype Loader = RawLoaderDefinitionFunction<{\n  cacheProvider?: string | ICache;\n  extension?: string;\n  preprocessor?: Preprocessor;\n  sourceMap?: boolean;\n}>;\n\nconst cache = new TransformCacheCollection();\n\nconst webpack5Loader: Loader = function webpack5LoaderPlugin(\n  content,\n  inputSourceMap\n) {\n  function convertSourceMap(\n    value: typeof inputSourceMap,\n    filename: string\n  ): RawSourceMap | undefined {\n    if (typeof value === 'string' || !value) {\n      return undefined;\n    }\n\n    return {\n      ...value,\n      file: value.file ?? filename,\n      mappings: value.mappings ?? '',\n      names: value.names ?? [],\n      sources: value.sources ?? [],\n      version: value.version ?? 3,\n    };\n  }\n\n  // tell Webpack this loader is async\n  this.async();\n\n  logger('loader %s', this.resourcePath);\n\n  const {\n    sourceMap = undefined,\n    preprocessor = undefined,\n    extension = '.wyw-in-js.css',\n    cacheProvider,\n    ...rest\n  } = this.getOptions() || {};\n\n  const outputFileName = this.resourcePath.replace(/\\.[^.]+$/, extension);\n  const resolveModule = this.getResolve({ dependencyType: 'esm' });\n\n  const asyncResolve = (token: string, importer: string): Promise<string> => {\n    const context = path.isAbsolute(importer)\n      ? path.dirname(importer)\n      : path.join(process.cwd(), path.dirname(importer));\n    return new Promise((resolve, reject) => {\n      resolveModule(context, token, (err, result) => {\n        if (err) {\n          reject(err);\n        } else if (result) {\n          this.addDependency(result);\n          resolve(result);\n        } else {\n          reject(new Error(`Cannot resolve ${token}`));\n        }\n      });\n    });\n  };\n\n  const transformServices = {\n    options: {\n      filename: this.resourcePath,\n      inputSourceMap: convertSourceMap(inputSourceMap, this.resourcePath),\n      root: process.cwd(),\n      preprocessor,\n      pluginOptions: rest,\n    },\n    cache,\n    eventEmitter: sharedState.emitter,\n  };\n\n  transform(transformServices, content.toString(), asyncResolve)\n    .then(\n      async (result: Result) => {\n        if (result.cssText) {\n          let { cssText } = result;\n\n          if (sourceMap) {\n            cssText += `/*# sourceMappingURL=data:application/json;base64,${Buffer.from(\n              result.cssSourceMapText || ''\n            ).toString('base64')}*/`;\n          }\n\n          await Promise.all(\n            result.dependencies?.map((dep) =>\n              asyncResolve(dep, this.resourcePath)\n            ) ?? []\n          );\n\n          try {\n            const cacheInstance = await getCacheInstance(cacheProvider);\n\n            await cacheInstance.set(this.resourcePath, cssText);\n\n            await cacheInstance.setDependencies?.(\n              this.resourcePath,\n              this.getDependencies()\n            );\n\n            const request = `${outputFileName}!=!${outputCssLoader}?cacheProvider=${encodeURIComponent(\n              typeof cacheProvider === 'string' ? cacheProvider : ''\n            )}!${this.resourcePath}`;\n            const stringifiedRequest = JSON.stringify(\n              this.utils.contextify(this.context || this.rootContext, request)\n            );\n\n            this.callback(\n              null,\n              `${result.code}\\n\\nrequire(${stringifiedRequest});`,\n              result.sourceMap ?? undefined\n            );\n          } catch (err) {\n            this.callback(err as Error);\n          }\n\n          return;\n        }\n\n        this.callback(null, result.code, result.sourceMap ?? undefined);\n      },\n      (err: Error) => this.callback(err)\n    )\n    .catch((err: Error) => this.callback(err));\n};\n\nexport default webpack5Loader;\n"],"mappings":"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"}

package/esm/outputCssLoader.js

@@ -0,0 +1,19 @@
+import { getCacheInstance } from './cache';
+export default async function outputCssLoader() {
+  this.async();
+  const {
+    cacheProvider
+  } = this.getOptions();
+  try {
+    const cacheInstance = await getCacheInstance(cacheProvider);
+    const result = await cacheInstance.get(this.resourcePath);
+    const dependencies = (await cacheInstance.getDependencies?.(this.resourcePath)) ?? [];
+    dependencies.forEach(dependency => {
+      this.addDependency(dependency);
+    });
+    this.callback(null, result);
+  } catch (err) {
+    this.callback(err);
+  }
+}
+//# sourceMappingURL=outputCssLoader.js.map

package/esm/outputCssLoader.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"outputCssLoader.js","names":["getCacheInstance","outputCssLoader","async","cacheProvider","getOptions","cacheInstance","result","get","resourcePath","dependencies","getDependencies","forEach","dependency","addDependency","callback","err"],"sources":["../src/outputCssLoader.ts"],"sourcesContent":["import type webpack from 'webpack';\n\nimport type { ICache } from './cache';\nimport { getCacheInstance } from './cache';\n\nexport default async function outputCssLoader(\n  this: webpack.LoaderContext<{ cacheProvider: string | ICache | undefined }>\n) {\n  this.async();\n  const { cacheProvider } = this.getOptions();\n\n  try {\n    const cacheInstance = await getCacheInstance(cacheProvider);\n\n    const result = await cacheInstance.get(this.resourcePath);\n    const dependencies =\n      (await cacheInstance.getDependencies?.(this.resourcePath)) ?? [];\n\n    dependencies.forEach((dependency) => {\n      this.addDependency(dependency);\n    });\n\n    this.callback(null, result);\n  } catch (err) {\n    this.callback(err as Error);\n  }\n}\n"],"mappings":"AAGA,SAASA,gBAAgB,QAAQ,SAAS;AAE1C,eAAe,eAAeC,eAAeA,CAAA,EAE3C;EACA,IAAI,CAACC,KAAK,CAAC,CAAC;EACZ,MAAM;IAAEC;EAAc,CAAC,GAAG,IAAI,CAACC,UAAU,CAAC,CAAC;EAE3C,IAAI;IACF,MAAMC,aAAa,GAAG,MAAML,gBAAgB,CAACG,aAAa,CAAC;IAE3D,MAAMG,MAAM,GAAG,MAAMD,aAAa,CAACE,GAAG,CAAC,IAAI,CAACC,YAAY,CAAC;IACzD,MAAMC,YAAY,GAChB,CAAC,MAAMJ,aAAa,CAACK,eAAe,GAAG,IAAI,CAACF,YAAY,CAAC,KAAK,EAAE;IAElEC,YAAY,CAACE,OAAO,CAAEC,UAAU,IAAK;MACnC,IAAI,CAACC,aAAa,CAACD,UAAU,CAAC;IAChC,CAAC,CAAC;IAEF,IAAI,CAACE,QAAQ,CAAC,IAAI,EAAER,MAAM,CAAC;EAC7B,CAAC,CAAC,OAAOS,GAAG,EAAE;IACZ,IAAI,CAACD,QAAQ,CAACC,GAAY,CAAC;EAC7B;AACF"}

package/lib/WYWinJSDebugPlugin.js

@@ -0,0 +1,25 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.sharedState = exports.WYWinJSDebugPlugin = void 0;
+var _transform = require("@wyw-in-js/transform");
+const sharedState = exports.sharedState = {};
+class WYWinJSDebugPlugin {
+  constructor(options) {
+    const {
+      emitter,
+      onDone
+    } = (0, _transform.createFileReporter)(options !== null && options !== void 0 ? options : false);
+    sharedState.emitter = emitter;
+    this.onDone = onDone;
+  }
+  apply(compiler) {
+    compiler.hooks.shutdown.tap('WYWinJSDebug', () => {
+      this.onDone(process.cwd());
+    });
+  }
+}
+exports.WYWinJSDebugPlugin = WYWinJSDebugPlugin;
+//# sourceMappingURL=WYWinJSDebugPlugin.js.map

package/lib/WYWinJSDebugPlugin.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"WYWinJSDebugPlugin.js","names":["_transform","require","sharedState","exports","WYWinJSDebugPlugin","constructor","options","emitter","onDone","createFileReporter","apply","compiler","hooks","shutdown","tap","process","cwd"],"sources":["../src/WYWinJSDebugPlugin.ts"],"sourcesContent":["import type { Compiler } from 'webpack';\n\nimport type { EventEmitter, IFileReporterOptions } from '@wyw-in-js/transform';\nimport { createFileReporter } from '@wyw-in-js/transform';\n\nexport const sharedState: {\n  emitter?: EventEmitter;\n} = {};\n\nexport class WYWinJSDebugPlugin {\n  private readonly onDone: (root: string) => void;\n\n  constructor(options?: IFileReporterOptions) {\n    const { emitter, onDone } = createFileReporter(options ?? false);\n    sharedState.emitter = emitter;\n    this.onDone = onDone;\n  }\n\n  apply(compiler: Compiler) {\n    compiler.hooks.shutdown.tap('WYWinJSDebug', () => {\n      this.onDone(process.cwd());\n    });\n  }\n}\n"],"mappings":";;;;;;AAGA,IAAAA,UAAA,GAAAC,OAAA;AAEO,MAAMC,WAEZ,GAAAC,OAAA,CAAAD,WAAA,GAAG,CAAC,CAAC;AAEC,MAAME,kBAAkB,CAAC;EAG9BC,WAAWA,CAACC,OAA8B,EAAE;IAC1C,MAAM;MAAEC,OAAO;MAAEC;IAAO,CAAC,GAAG,IAAAC,6BAAkB,EAACH,OAAO,aAAPA,OAAO,cAAPA,OAAO,GAAI,KAAK,CAAC;IAChEJ,WAAW,CAACK,OAAO,GAAGA,OAAO;IAC7B,IAAI,CAACC,MAAM,GAAGA,MAAM;EACtB;EAEAE,KAAKA,CAACC,QAAkB,EAAE;IACxBA,QAAQ,CAACC,KAAK,CAACC,QAAQ,CAACC,GAAG,CAAC,cAAc,EAAE,MAAM;MAChD,IAAI,CAACN,MAAM,CAACO,OAAO,CAACC,GAAG,CAAC,CAAC,CAAC;IAC5B,CAAC,CAAC;EACJ;AACF;AAACb,OAAA,CAAAC,kBAAA,GAAAA,kBAAA"}

package/lib/cache.js

@@ -0,0 +1,49 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.memoryCache = exports.getCacheInstance = void 0;
+// memory cache, which is the default cache implementation in WYW-in-JS
+
+class MemoryCache {
+  cache = new Map();
+  dependenciesCache = new Map();
+  get(key) {
+    var _this$cache$get;
+    return Promise.resolve((_this$cache$get = this.cache.get(key)) !== null && _this$cache$get !== void 0 ? _this$cache$get : '');
+  }
+  getDependencies(key) {
+    var _this$dependenciesCac;
+    return Promise.resolve((_this$dependenciesCac = this.dependenciesCache.get(key)) !== null && _this$dependenciesCac !== void 0 ? _this$dependenciesCac : []);
+  }
+  set(key, value) {
+    this.cache.set(key, value);
+    return Promise.resolve();
+  }
+  setDependencies(key, value) {
+    this.dependenciesCache.set(key, value);
+    return Promise.resolve();
+  }
+}
+const memoryCache = exports.memoryCache = new MemoryCache();
+
+/**
+ * return cache instance from `options.cacheProvider`
+ * @param cacheProvider string | ICache | undefined
+ * @returns ICache instance
+ */
+const getCacheInstance = async cacheProvider => {
+  if (!cacheProvider) {
+    return memoryCache;
+  }
+  if (typeof cacheProvider === 'string') {
+    return require(cacheProvider);
+  }
+  if (typeof cacheProvider === 'object' && 'get' in cacheProvider && 'set' in cacheProvider) {
+    return cacheProvider;
+  }
+  throw new Error(`Invalid cache provider: ${cacheProvider}`);
+};
+exports.getCacheInstance = getCacheInstance;
+//# sourceMappingURL=cache.js.map

package/lib/cache.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"cache.js","names":["MemoryCache","cache","Map","dependenciesCache","get","key","_this$cache$get","Promise","resolve","getDependencies","_this$dependenciesCac","set","value","setDependencies","memoryCache","exports","getCacheInstance","cacheProvider","require","Error"],"sources":["../src/cache.ts"],"sourcesContent":["export interface ICache {\n  get: (key: string) => Promise<string>;\n  getDependencies?: (key: string) => Promise<string[]>;\n  set: (key: string, value: string) => Promise<void>;\n  setDependencies?: (key: string, value: string[]) => Promise<void>;\n}\n\n// memory cache, which is the default cache implementation in WYW-in-JS\n\nclass MemoryCache implements ICache {\n  private cache: Map<string, string> = new Map();\n\n  private dependenciesCache: Map<string, string[]> = new Map();\n\n  public get(key: string): Promise<string> {\n    return Promise.resolve(this.cache.get(key) ?? '');\n  }\n\n  public getDependencies(key: string): Promise<string[]> {\n    return Promise.resolve(this.dependenciesCache.get(key) ?? []);\n  }\n\n  public set(key: string, value: string): Promise<void> {\n    this.cache.set(key, value);\n    return Promise.resolve();\n  }\n\n  public setDependencies(key: string, value: string[]): Promise<void> {\n    this.dependenciesCache.set(key, value);\n    return Promise.resolve();\n  }\n}\n\nexport const memoryCache = new MemoryCache();\n\n/**\n * return cache instance from `options.cacheProvider`\n * @param cacheProvider string | ICache | undefined\n * @returns ICache instance\n */\nexport const getCacheInstance = async (\n  cacheProvider: string | ICache | undefined\n): Promise<ICache> => {\n  if (!cacheProvider) {\n    return memoryCache;\n  }\n  if (typeof cacheProvider === 'string') {\n    return require(cacheProvider);\n  }\n  if (\n    typeof cacheProvider === 'object' &&\n    'get' in cacheProvider &&\n    'set' in cacheProvider\n  ) {\n    return cacheProvider;\n  }\n  throw new Error(`Invalid cache provider: ${cacheProvider}`);\n};\n"],"mappings":";;;;;;AAOA;;AAEA,MAAMA,WAAW,CAAmB;EAC1BC,KAAK,GAAwB,IAAIC,GAAG,CAAC,CAAC;EAEtCC,iBAAiB,GAA0B,IAAID,GAAG,CAAC,CAAC;EAErDE,GAAGA,CAACC,GAAW,EAAmB;IAAA,IAAAC,eAAA;IACvC,OAAOC,OAAO,CAACC,OAAO,EAAAF,eAAA,GAAC,IAAI,CAACL,KAAK,CAACG,GAAG,CAACC,GAAG,CAAC,cAAAC,eAAA,cAAAA,eAAA,GAAI,EAAE,CAAC;EACnD;EAEOG,eAAeA,CAACJ,GAAW,EAAqB;IAAA,IAAAK,qBAAA;IACrD,OAAOH,OAAO,CAACC,OAAO,EAAAE,qBAAA,GAAC,IAAI,CAACP,iBAAiB,CAACC,GAAG,CAACC,GAAG,CAAC,cAAAK,qBAAA,cAAAA,qBAAA,GAAI,EAAE,CAAC;EAC/D;EAEOC,GAAGA,CAACN,GAAW,EAAEO,KAAa,EAAiB;IACpD,IAAI,CAACX,KAAK,CAACU,GAAG,CAACN,GAAG,EAAEO,KAAK,CAAC;IAC1B,OAAOL,OAAO,CAACC,OAAO,CAAC,CAAC;EAC1B;EAEOK,eAAeA,CAACR,GAAW,EAAEO,KAAe,EAAiB;IAClE,IAAI,CAACT,iBAAiB,CAACQ,GAAG,CAACN,GAAG,EAAEO,KAAK,CAAC;IACtC,OAAOL,OAAO,CAACC,OAAO,CAAC,CAAC;EAC1B;AACF;AAEO,MAAMM,WAAW,GAAAC,OAAA,CAAAD,WAAA,GAAG,IAAId,WAAW,CAAC,CAAC;;AAE5C;AACA;AACA;AACA;AACA;AACO,MAAMgB,gBAAgB,GAAG,MAC9BC,aAA0C,IACtB;EACpB,IAAI,CAACA,aAAa,EAAE;IAClB,OAAOH,WAAW;EACpB;EACA,IAAI,OAAOG,aAAa,KAAK,QAAQ,EAAE;IACrC,OAAOC,OAAO,CAACD,aAAa,CAAC;EAC/B;EACA,IACE,OAAOA,aAAa,KAAK,QAAQ,IACjC,KAAK,IAAIA,aAAa,IACtB,KAAK,IAAIA,aAAa,EACtB;IACA,OAAOA,aAAa;EACtB;EACA,MAAM,IAAIE,KAAK,CAAE,2BAA0BF,aAAc,EAAC,CAAC;AAC7D,CAAC;AAACF,OAAA,CAAAC,gBAAA,GAAAA,gBAAA"}

package/lib/index.js

@@ -0,0 +1,111 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "WYWinJSDebugPlugin", {
+  enumerable: true,
+  get: function () {
+    return _WYWinJSDebugPlugin.WYWinJSDebugPlugin;
+  }
+});
+exports.default = void 0;
+var _path = _interopRequireDefault(require("path"));
+var _shared = require("@wyw-in-js/shared");
+var _transform = require("@wyw-in-js/transform");
+var _WYWinJSDebugPlugin = require("./WYWinJSDebugPlugin");
+var _cache = require("./cache");
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+/**
+ * This file contains a Webpack 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
+ */
+
+const outputCssLoader = require.resolve('./outputCssLoader');
+const cache = new _transform.TransformCacheCollection();
+const webpack5Loader = function webpack5LoaderPlugin(content, inputSourceMap) {
+  function convertSourceMap(value, filename) {
+    var _value$file, _value$mappings, _value$names, _value$sources, _value$version;
+    if (typeof value === 'string' || !value) {
+      return undefined;
+    }
+    return {
+      ...value,
+      file: (_value$file = value.file) !== null && _value$file !== void 0 ? _value$file : filename,
+      mappings: (_value$mappings = value.mappings) !== null && _value$mappings !== void 0 ? _value$mappings : '',
+      names: (_value$names = value.names) !== null && _value$names !== void 0 ? _value$names : [],
+      sources: (_value$sources = value.sources) !== null && _value$sources !== void 0 ? _value$sources : [],
+      version: (_value$version = value.version) !== null && _value$version !== void 0 ? _value$version : 3
+    };
+  }
+
+  // tell Webpack this loader is async
+  this.async();
+  (0, _shared.logger)('loader %s', this.resourcePath);
+  const {
+    sourceMap = undefined,
+    preprocessor = undefined,
+    extension = '.wyw-in-js.css',
+    cacheProvider,
+    ...rest
+  } = this.getOptions() || {};
+  const outputFileName = this.resourcePath.replace(/\.[^.]+$/, extension);
+  const resolveModule = this.getResolve({
+    dependencyType: 'esm'
+  });
+  const asyncResolve = (token, importer) => {
+    const context = _path.default.isAbsolute(importer) ? _path.default.dirname(importer) : _path.default.join(process.cwd(), _path.default.dirname(importer));
+    return new Promise((resolve, reject) => {
+      resolveModule(context, token, (err, result) => {
+        if (err) {
+          reject(err);
+        } else if (result) {
+          this.addDependency(result);
+          resolve(result);
+        } else {
+          reject(new Error(`Cannot resolve ${token}`));
+        }
+      });
+    });
+  };
+  const transformServices = {
+    options: {
+      filename: this.resourcePath,
+      inputSourceMap: convertSourceMap(inputSourceMap, this.resourcePath),
+      root: process.cwd(),
+      preprocessor,
+      pluginOptions: rest
+    },
+    cache,
+    eventEmitter: _WYWinJSDebugPlugin.sharedState.emitter
+  };
+  (0, _transform.transform)(transformServices, content.toString(), asyncResolve).then(async result => {
+    var _result$sourceMap2;
+    if (result.cssText) {
+      var _result$dependencies$, _result$dependencies;
+      let {
+        cssText
+      } = result;
+      if (sourceMap) {
+        cssText += `/*# sourceMappingURL=data:application/json;base64,${Buffer.from(result.cssSourceMapText || '').toString('base64')}*/`;
+      }
+      await Promise.all((_result$dependencies$ = (_result$dependencies = result.dependencies) === null || _result$dependencies === void 0 ? void 0 : _result$dependencies.map(dep => asyncResolve(dep, this.resourcePath))) !== null && _result$dependencies$ !== void 0 ? _result$dependencies$ : []);
+      try {
+        var _cacheInstance$setDep, _result$sourceMap;
+        const cacheInstance = await (0, _cache.getCacheInstance)(cacheProvider);
+        await cacheInstance.set(this.resourcePath, cssText);
+        await ((_cacheInstance$setDep = cacheInstance.setDependencies) === null || _cacheInstance$setDep === void 0 ? void 0 : _cacheInstance$setDep.call(cacheInstance, this.resourcePath, this.getDependencies()));
+        const request = `${outputFileName}!=!${outputCssLoader}?cacheProvider=${encodeURIComponent(typeof cacheProvider === 'string' ? cacheProvider : '')}!${this.resourcePath}`;
+        const stringifiedRequest = JSON.stringify(this.utils.contextify(this.context || this.rootContext, request));
+        this.callback(null, `${result.code}\n\nrequire(${stringifiedRequest});`, (_result$sourceMap = result.sourceMap) !== null && _result$sourceMap !== void 0 ? _result$sourceMap : undefined);
+      } catch (err) {
+        this.callback(err);
+      }
+      return;
+    }
+    this.callback(null, result.code, (_result$sourceMap2 = result.sourceMap) !== null && _result$sourceMap2 !== void 0 ? _result$sourceMap2 : undefined);
+  }, err => this.callback(err)).catch(err => this.callback(err));
+};
+var _default = exports.default = webpack5Loader;
+//# sourceMappingURL=index.js.map

package/lib/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":["_path","_interopRequireDefault","require","_shared","_transform","_WYWinJSDebugPlugin","_cache","obj","__esModule","default","outputCssLoader","resolve","cache","TransformCacheCollection","webpack5Loader","webpack5LoaderPlugin","content","inputSourceMap","convertSourceMap","value","filename","_value$file","_value$mappings","_value$names","_value$sources","_value$version","undefined","file","mappings","names","sources","version","async","logger","resourcePath","sourceMap","preprocessor","extension","cacheProvider","rest","getOptions","outputFileName","replace","resolveModule","getResolve","dependencyType","asyncResolve","token","importer","context","path","isAbsolute","dirname","join","process","cwd","Promise","reject","err","result","addDependency","Error","transformServices","options","root","pluginOptions","eventEmitter","sharedState","emitter","transform","toString","then","_result$sourceMap2","cssText","_result$dependencies$","_result$dependencies","Buffer","from","cssSourceMapText","all","dependencies","map","dep","_cacheInstance$setDep","_result$sourceMap","cacheInstance","getCacheInstance","set","setDependencies","call","getDependencies","request","encodeURIComponent","stringifiedRequest","JSON","stringify","utils","contextify","rootContext","callback","code","catch","_default","exports"],"sources":["../src/index.ts"],"sourcesContent":["/**\n * This file contains a Webpack 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 path from 'path';\n\nimport type { RawSourceMap } from 'source-map';\nimport type { RawLoaderDefinitionFunction } from 'webpack';\n\nimport { logger } from '@wyw-in-js/shared';\nimport type { Preprocessor, Result } from '@wyw-in-js/transform';\nimport { transform, TransformCacheCollection } from '@wyw-in-js/transform';\n\nimport { sharedState } from './WYWinJSDebugPlugin';\nimport type { ICache } from './cache';\nimport { getCacheInstance } from './cache';\n\nexport { WYWinJSDebugPlugin } from './WYWinJSDebugPlugin';\n\nconst outputCssLoader = require.resolve('./outputCssLoader');\n\ntype Loader = RawLoaderDefinitionFunction<{\n  cacheProvider?: string | ICache;\n  extension?: string;\n  preprocessor?: Preprocessor;\n  sourceMap?: boolean;\n}>;\n\nconst cache = new TransformCacheCollection();\n\nconst webpack5Loader: Loader = function webpack5LoaderPlugin(\n  content,\n  inputSourceMap\n) {\n  function convertSourceMap(\n    value: typeof inputSourceMap,\n    filename: string\n  ): RawSourceMap | undefined {\n    if (typeof value === 'string' || !value) {\n      return undefined;\n    }\n\n    return {\n      ...value,\n      file: value.file ?? filename,\n      mappings: value.mappings ?? '',\n      names: value.names ?? [],\n      sources: value.sources ?? [],\n      version: value.version ?? 3,\n    };\n  }\n\n  // tell Webpack this loader is async\n  this.async();\n\n  logger('loader %s', this.resourcePath);\n\n  const {\n    sourceMap = undefined,\n    preprocessor = undefined,\n    extension = '.wyw-in-js.css',\n    cacheProvider,\n    ...rest\n  } = this.getOptions() || {};\n\n  const outputFileName = this.resourcePath.replace(/\\.[^.]+$/, extension);\n  const resolveModule = this.getResolve({ dependencyType: 'esm' });\n\n  const asyncResolve = (token: string, importer: string): Promise<string> => {\n    const context = path.isAbsolute(importer)\n      ? path.dirname(importer)\n      : path.join(process.cwd(), path.dirname(importer));\n    return new Promise((resolve, reject) => {\n      resolveModule(context, token, (err, result) => {\n        if (err) {\n          reject(err);\n        } else if (result) {\n          this.addDependency(result);\n          resolve(result);\n        } else {\n          reject(new Error(`Cannot resolve ${token}`));\n        }\n      });\n    });\n  };\n\n  const transformServices = {\n    options: {\n      filename: this.resourcePath,\n      inputSourceMap: convertSourceMap(inputSourceMap, this.resourcePath),\n      root: process.cwd(),\n      preprocessor,\n      pluginOptions: rest,\n    },\n    cache,\n    eventEmitter: sharedState.emitter,\n  };\n\n  transform(transformServices, content.toString(), asyncResolve)\n    .then(\n      async (result: Result) => {\n        if (result.cssText) {\n          let { cssText } = result;\n\n          if (sourceMap) {\n            cssText += `/*# sourceMappingURL=data:application/json;base64,${Buffer.from(\n              result.cssSourceMapText || ''\n            ).toString('base64')}*/`;\n          }\n\n          await Promise.all(\n            result.dependencies?.map((dep) =>\n              asyncResolve(dep, this.resourcePath)\n            ) ?? []\n          );\n\n          try {\n            const cacheInstance = await getCacheInstance(cacheProvider);\n\n            await cacheInstance.set(this.resourcePath, cssText);\n\n            await cacheInstance.setDependencies?.(\n              this.resourcePath,\n              this.getDependencies()\n            );\n\n            const request = `${outputFileName}!=!${outputCssLoader}?cacheProvider=${encodeURIComponent(\n              typeof cacheProvider === 'string' ? cacheProvider : ''\n            )}!${this.resourcePath}`;\n            const stringifiedRequest = JSON.stringify(\n              this.utils.contextify(this.context || this.rootContext, request)\n            );\n\n            this.callback(\n              null,\n              `${result.code}\\n\\nrequire(${stringifiedRequest});`,\n              result.sourceMap ?? undefined\n            );\n          } catch (err) {\n            this.callback(err as Error);\n          }\n\n          return;\n        }\n\n        this.callback(null, result.code, result.sourceMap ?? undefined);\n      },\n      (err: Error) => this.callback(err)\n    )\n    .catch((err: Error) => this.callback(err));\n};\n\nexport default webpack5Loader;\n"],"mappings":";;;;;;;;;;;;AAMA,IAAAA,KAAA,GAAAC,sBAAA,CAAAC,OAAA;AAKA,IAAAC,OAAA,GAAAD,OAAA;AAEA,IAAAE,UAAA,GAAAF,OAAA;AAEA,IAAAG,mBAAA,GAAAH,OAAA;AAEA,IAAAI,MAAA,GAAAJ,OAAA;AAA2C,SAAAD,uBAAAM,GAAA,WAAAA,GAAA,IAAAA,GAAA,CAAAC,UAAA,GAAAD,GAAA,KAAAE,OAAA,EAAAF,GAAA;AAjB3C;AACA;AACA;AACA;AACA;;AAiBA,MAAMG,eAAe,GAAGR,OAAO,CAACS,OAAO,CAAC,mBAAmB,CAAC;AAS5D,MAAMC,KAAK,GAAG,IAAIC,mCAAwB,CAAC,CAAC;AAE5C,MAAMC,cAAsB,GAAG,SAASC,oBAAoBA,CAC1DC,OAAO,EACPC,cAAc,EACd;EACA,SAASC,gBAAgBA,CACvBC,KAA4B,EAC5BC,QAAgB,EACU;IAAA,IAAAC,WAAA,EAAAC,eAAA,EAAAC,YAAA,EAAAC,cAAA,EAAAC,cAAA;IAC1B,IAAI,OAAON,KAAK,KAAK,QAAQ,IAAI,CAACA,KAAK,EAAE;MACvC,OAAOO,SAAS;IAClB;IAEA,OAAO;MACL,GAAGP,KAAK;MACRQ,IAAI,GAAAN,WAAA,GAAEF,KAAK,CAACQ,IAAI,cAAAN,WAAA,cAAAA,WAAA,GAAID,QAAQ;MAC5BQ,QAAQ,GAAAN,eAAA,GAAEH,KAAK,CAACS,QAAQ,cAAAN,eAAA,cAAAA,eAAA,GAAI,EAAE;MAC9BO,KAAK,GAAAN,YAAA,GAAEJ,KAAK,CAACU,KAAK,cAAAN,YAAA,cAAAA,YAAA,GAAI,EAAE;MACxBO,OAAO,GAAAN,cAAA,GAAEL,KAAK,CAACW,OAAO,cAAAN,cAAA,cAAAA,cAAA,GAAI,EAAE;MAC5BO,OAAO,GAAAN,cAAA,GAAEN,KAAK,CAACY,OAAO,cAAAN,cAAA,cAAAA,cAAA,GAAI;IAC5B,CAAC;EACH;;EAEA;EACA,IAAI,CAACO,KAAK,CAAC,CAAC;EAEZ,IAAAC,cAAM,EAAC,WAAW,EAAE,IAAI,CAACC,YAAY,CAAC;EAEtC,MAAM;IACJC,SAAS,GAAGT,SAAS;IACrBU,YAAY,GAAGV,SAAS;IACxBW,SAAS,GAAG,gBAAgB;IAC5BC,aAAa;IACb,GAAGC;EACL,CAAC,GAAG,IAAI,CAACC,UAAU,CAAC,CAAC,IAAI,CAAC,CAAC;EAE3B,MAAMC,cAAc,GAAG,IAAI,CAACP,YAAY,CAACQ,OAAO,CAAC,UAAU,EAAEL,SAAS,CAAC;EACvE,MAAMM,aAAa,GAAG,IAAI,CAACC,UAAU,CAAC;IAAEC,cAAc,EAAE;EAAM,CAAC,CAAC;EAEhE,MAAMC,YAAY,GAAGA,CAACC,KAAa,EAAEC,QAAgB,KAAsB;IACzE,MAAMC,OAAO,GAAGC,aAAI,CAACC,UAAU,CAACH,QAAQ,CAAC,GACrCE,aAAI,CAACE,OAAO,CAACJ,QAAQ,CAAC,GACtBE,aAAI,CAACG,IAAI,CAACC,OAAO,CAACC,GAAG,CAAC,CAAC,EAAEL,aAAI,CAACE,OAAO,CAACJ,QAAQ,CAAC,CAAC;IACpD,OAAO,IAAIQ,OAAO,CAAC,CAAC7C,OAAO,EAAE8C,MAAM,KAAK;MACtCd,aAAa,CAACM,OAAO,EAAEF,KAAK,EAAE,CAACW,GAAG,EAAEC,MAAM,KAAK;QAC7C,IAAID,GAAG,EAAE;UACPD,MAAM,CAACC,GAAG,CAAC;QACb,CAAC,MAAM,IAAIC,MAAM,EAAE;UACjB,IAAI,CAACC,aAAa,CAACD,MAAM,CAAC;UAC1BhD,OAAO,CAACgD,MAAM,CAAC;QACjB,CAAC,MAAM;UACLF,MAAM,CAAC,IAAII,KAAK,CAAE,kBAAiBd,KAAM,EAAC,CAAC,CAAC;QAC9C;MACF,CAAC,CAAC;IACJ,CAAC,CAAC;EACJ,CAAC;EAED,MAAMe,iBAAiB,GAAG;IACxBC,OAAO,EAAE;MACP3C,QAAQ,EAAE,IAAI,CAACc,YAAY;MAC3BjB,cAAc,EAAEC,gBAAgB,CAACD,cAAc,EAAE,IAAI,CAACiB,YAAY,CAAC;MACnE8B,IAAI,EAAEV,OAAO,CAACC,GAAG,CAAC,CAAC;MACnBnB,YAAY;MACZ6B,aAAa,EAAE1B;IACjB,CAAC;IACD3B,KAAK;IACLsD,YAAY,EAAEC,+BAAW,CAACC;EAC5B,CAAC;EAED,IAAAC,oBAAS,EAACP,iBAAiB,EAAE9C,OAAO,CAACsD,QAAQ,CAAC,CAAC,EAAExB,YAAY,CAAC,CAC3DyB,IAAI,CACH,MAAOZ,MAAc,IAAK;IAAA,IAAAa,kBAAA;IACxB,IAAIb,MAAM,CAACc,OAAO,EAAE;MAAA,IAAAC,qBAAA,EAAAC,oBAAA;MAClB,IAAI;QAAEF;MAAQ,CAAC,GAAGd,MAAM;MAExB,IAAIxB,SAAS,EAAE;QACbsC,OAAO,IAAK,qDAAoDG,MAAM,CAACC,IAAI,CACzElB,MAAM,CAACmB,gBAAgB,IAAI,EAC7B,CAAC,CAACR,QAAQ,CAAC,QAAQ,CAAE,IAAG;MAC1B;MAEA,MAAMd,OAAO,CAACuB,GAAG,EAAAL,qBAAA,IAAAC,oBAAA,GACfhB,MAAM,CAACqB,YAAY,cAAAL,oBAAA,uBAAnBA,oBAAA,CAAqBM,GAAG,CAAEC,GAAG,IAC3BpC,YAAY,CAACoC,GAAG,EAAE,IAAI,CAAChD,YAAY,CACrC,CAAC,cAAAwC,qBAAA,cAAAA,qBAAA,GAAI,EACP,CAAC;MAED,IAAI;QAAA,IAAAS,qBAAA,EAAAC,iBAAA;QACF,MAAMC,aAAa,GAAG,MAAM,IAAAC,uBAAgB,EAAChD,aAAa,CAAC;QAE3D,MAAM+C,aAAa,CAACE,GAAG,CAAC,IAAI,CAACrD,YAAY,EAAEuC,OAAO,CAAC;QAEnD,QAAAU,qBAAA,GAAME,aAAa,CAACG,eAAe,cAAAL,qBAAA,uBAA7BA,qBAAA,CAAAM,IAAA,CAAAJ,aAAa,EACjB,IAAI,CAACnD,YAAY,EACjB,IAAI,CAACwD,eAAe,CAAC,CACvB,CAAC;QAED,MAAMC,OAAO,GAAI,GAAElD,cAAe,MAAK/B,eAAgB,kBAAiBkF,kBAAkB,CACxF,OAAOtD,aAAa,KAAK,QAAQ,GAAGA,aAAa,GAAG,EACtD,CAAE,IAAG,IAAI,CAACJ,YAAa,EAAC;QACxB,MAAM2D,kBAAkB,GAAGC,IAAI,CAACC,SAAS,CACvC,IAAI,CAACC,KAAK,CAACC,UAAU,CAAC,IAAI,CAAChD,OAAO,IAAI,IAAI,CAACiD,WAAW,EAAEP,OAAO,CACjE,CAAC;QAED,IAAI,CAACQ,QAAQ,CACX,IAAI,EACH,GAAExC,MAAM,CAACyC,IAAK,eAAcP,kBAAmB,IAAG,GAAAT,iBAAA,GACnDzB,MAAM,CAACxB,SAAS,cAAAiD,iBAAA,cAAAA,iBAAA,GAAI1D,SACtB,CAAC;MACH,CAAC,CAAC,OAAOgC,GAAG,EAAE;QACZ,IAAI,CAACyC,QAAQ,CAACzC,GAAY,CAAC;MAC7B;MAEA;IACF;IAEA,IAAI,CAACyC,QAAQ,CAAC,IAAI,EAAExC,MAAM,CAACyC,IAAI,GAAA5B,kBAAA,GAAEb,MAAM,CAACxB,SAAS,cAAAqC,kBAAA,cAAAA,kBAAA,GAAI9C,SAAS,CAAC;EACjE,CAAC,EACAgC,GAAU,IAAK,IAAI,CAACyC,QAAQ,CAACzC,GAAG,CACnC,CAAC,CACA2C,KAAK,CAAE3C,GAAU,IAAK,IAAI,CAACyC,QAAQ,CAACzC,GAAG,CAAC,CAAC;AAC9C,CAAC;AAAC,IAAA4C,QAAA,GAAAC,OAAA,CAAA9F,OAAA,GAEaK,cAAc"}

package/lib/outputCssLoader.js

@@ -0,0 +1,26 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = outputCssLoader;
+var _cache = require("./cache");
+async function outputCssLoader() {
+  this.async();
+  const {
+    cacheProvider
+  } = this.getOptions();
+  try {
+    var _await$cacheInstance$, _cacheInstance$getDep;
+    const cacheInstance = await (0, _cache.getCacheInstance)(cacheProvider);
+    const result = await cacheInstance.get(this.resourcePath);
+    const dependencies = (_await$cacheInstance$ = await ((_cacheInstance$getDep = cacheInstance.getDependencies) === null || _cacheInstance$getDep === void 0 ? void 0 : _cacheInstance$getDep.call(cacheInstance, this.resourcePath))) !== null && _await$cacheInstance$ !== void 0 ? _await$cacheInstance$ : [];
+    dependencies.forEach(dependency => {
+      this.addDependency(dependency);
+    });
+    this.callback(null, result);
+  } catch (err) {
+    this.callback(err);
+  }
+}
+//# sourceMappingURL=outputCssLoader.js.map

package/lib/outputCssLoader.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"outputCssLoader.js","names":["_cache","require","outputCssLoader","async","cacheProvider","getOptions","_await$cacheInstance$","_cacheInstance$getDep","cacheInstance","getCacheInstance","result","get","resourcePath","dependencies","getDependencies","call","forEach","dependency","addDependency","callback","err"],"sources":["../src/outputCssLoader.ts"],"sourcesContent":["import type webpack from 'webpack';\n\nimport type { ICache } from './cache';\nimport { getCacheInstance } from './cache';\n\nexport default async function outputCssLoader(\n  this: webpack.LoaderContext<{ cacheProvider: string | ICache | undefined }>\n) {\n  this.async();\n  const { cacheProvider } = this.getOptions();\n\n  try {\n    const cacheInstance = await getCacheInstance(cacheProvider);\n\n    const result = await cacheInstance.get(this.resourcePath);\n    const dependencies =\n      (await cacheInstance.getDependencies?.(this.resourcePath)) ?? [];\n\n    dependencies.forEach((dependency) => {\n      this.addDependency(dependency);\n    });\n\n    this.callback(null, result);\n  } catch (err) {\n    this.callback(err as Error);\n  }\n}\n"],"mappings":";;;;;;AAGA,IAAAA,MAAA,GAAAC,OAAA;AAEe,eAAeC,eAAeA,CAAA,EAE3C;EACA,IAAI,CAACC,KAAK,CAAC,CAAC;EACZ,MAAM;IAAEC;EAAc,CAAC,GAAG,IAAI,CAACC,UAAU,CAAC,CAAC;EAE3C,IAAI;IAAA,IAAAC,qBAAA,EAAAC,qBAAA;IACF,MAAMC,aAAa,GAAG,MAAM,IAAAC,uBAAgB,EAACL,aAAa,CAAC;IAE3D,MAAMM,MAAM,GAAG,MAAMF,aAAa,CAACG,GAAG,CAAC,IAAI,CAACC,YAAY,CAAC;IACzD,MAAMC,YAAY,IAAAP,qBAAA,GACf,QAAAC,qBAAA,GAAMC,aAAa,CAACM,eAAe,cAAAP,qBAAA,uBAA7BA,qBAAA,CAAAQ,IAAA,CAAAP,aAAa,EAAmB,IAAI,CAACI,YAAY,CAAC,eAAAN,qBAAA,cAAAA,qBAAA,GAAK,EAAE;IAElEO,YAAY,CAACG,OAAO,CAAEC,UAAU,IAAK;MACnC,IAAI,CAACC,aAAa,CAACD,UAAU,CAAC;IAChC,CAAC,CAAC;IAEF,IAAI,CAACE,QAAQ,CAAC,IAAI,EAAET,MAAM,CAAC;EAC7B,CAAC,CAAC,OAAOU,GAAG,EAAE;IACZ,IAAI,CAACD,QAAQ,CAACC,GAAY,CAAC;EAC7B;AACF"}

package/package.json

@@ -0,0 +1,40 @@
+{
+  "name": "@wyw-in-js/webpack-loader",
+  "version": "0.1.0",
+  "dependencies": {
+    "@wyw-in-js/shared": "0.1.0",
+    "@wyw-in-js/transform": "0.1.0"
+  },
+  "devDependencies": {
+    "@types/node": "^16.18.55",
+    "source-map": "^0.7.4",
+    "webpack": "^5.76.0",
+    "@wyw-in-js/babel-config": "0.1.0",
+    "@wyw-in-js/eslint-config": "0.1.0",
+    "@wyw-in-js/ts-config": "0.1.0"
+  },
+  "engines": {
+    "node": ">=16.0.0"
+  },
+  "files": [
+    "esm/",
+    "lib/",
+    "types/"
+  ],
+  "license": "MIT",
+  "main": "lib/index.js",
+  "module": "esm/index.js",
+  "peerDependencies": {
+    "webpack": "^5.76.0"
+  },
+  "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/WYWinJSDebugPlugin.d.ts

@@ -0,0 +1,10 @@
+import type { Compiler } from 'webpack';
+import type { EventEmitter, IFileReporterOptions } from '@wyw-in-js/transform';
+export declare const sharedState: {
+    emitter?: EventEmitter;
+};
+export declare class WYWinJSDebugPlugin {
+    private readonly onDone;
+    constructor(options?: IFileReporterOptions);
+    apply(compiler: Compiler): void;
+}

package/types/WYWinJSDebugPlugin.js

@@ -0,0 +1,19 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.WYWinJSDebugPlugin = exports.sharedState = void 0;
+const transform_1 = require("@wyw-in-js/transform");
+exports.sharedState = {};
+class WYWinJSDebugPlugin {
+    onDone;
+    constructor(options) {
+        const { emitter, onDone } = (0, transform_1.createFileReporter)(options ?? false);
+        exports.sharedState.emitter = emitter;
+        this.onDone = onDone;
+    }
+    apply(compiler) {
+        compiler.hooks.shutdown.tap('WYWinJSDebug', () => {
+            this.onDone(process.cwd());
+        });
+    }
+}
+exports.WYWinJSDebugPlugin = WYWinJSDebugPlugin;

package/types/cache.d.ts

@@ -0,0 +1,22 @@
+export interface ICache {
+    get: (key: string) => Promise<string>;
+    getDependencies?: (key: string) => Promise<string[]>;
+    set: (key: string, value: string) => Promise<void>;
+    setDependencies?: (key: string, value: string[]) => Promise<void>;
+}
+declare class MemoryCache implements ICache {
+    private cache;
+    private dependenciesCache;
+    get(key: string): Promise<string>;
+    getDependencies(key: string): Promise<string[]>;
+    set(key: string, value: string): Promise<void>;
+    setDependencies(key: string, value: string[]): Promise<void>;
+}
+export declare const memoryCache: MemoryCache;
+/**
+ * return cache instance from `options.cacheProvider`
+ * @param cacheProvider string | ICache | undefined
+ * @returns ICache instance
+ */
+export declare const getCacheInstance: (cacheProvider: string | ICache | undefined) => Promise<ICache>;
+export {};

package/types/cache.js

@@ -0,0 +1,43 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getCacheInstance = exports.memoryCache = void 0;
+// memory cache, which is the default cache implementation in WYW-in-JS
+class MemoryCache {
+    cache = new Map();
+    dependenciesCache = new Map();
+    get(key) {
+        return Promise.resolve(this.cache.get(key) ?? '');
+    }
+    getDependencies(key) {
+        return Promise.resolve(this.dependenciesCache.get(key) ?? []);
+    }
+    set(key, value) {
+        this.cache.set(key, value);
+        return Promise.resolve();
+    }
+    setDependencies(key, value) {
+        this.dependenciesCache.set(key, value);
+        return Promise.resolve();
+    }
+}
+exports.memoryCache = new MemoryCache();
+/**
+ * return cache instance from `options.cacheProvider`
+ * @param cacheProvider string | ICache | undefined
+ * @returns ICache instance
+ */
+const getCacheInstance = async (cacheProvider) => {
+    if (!cacheProvider) {
+        return exports.memoryCache;
+    }
+    if (typeof cacheProvider === 'string') {
+        return require(cacheProvider);
+    }
+    if (typeof cacheProvider === 'object' &&
+        'get' in cacheProvider &&
+        'set' in cacheProvider) {
+        return cacheProvider;
+    }
+    throw new Error(`Invalid cache provider: ${cacheProvider}`);
+};
+exports.getCacheInstance = getCacheInstance;

package/types/index.d.ts

@@ -0,0 +1,17 @@
+/**
+ * This file contains a Webpack 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 { RawLoaderDefinitionFunction } from 'webpack';
+import type { Preprocessor } from '@wyw-in-js/transform';
+import type { ICache } from './cache';
+export { WYWinJSDebugPlugin } from './WYWinJSDebugPlugin';
+type Loader = RawLoaderDefinitionFunction<{
+    cacheProvider?: string | ICache;
+    extension?: string;
+    preprocessor?: Preprocessor;
+    sourceMap?: boolean;
+}>;
+declare const webpack5Loader: Loader;
+export default webpack5Loader;

package/types/index.js

@@ -0,0 +1,96 @@
+"use strict";
+/**
+ * This file contains a Webpack 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.WYWinJSDebugPlugin = void 0;
+const path_1 = __importDefault(require("path"));
+const shared_1 = require("@wyw-in-js/shared");
+const transform_1 = require("@wyw-in-js/transform");
+const WYWinJSDebugPlugin_1 = require("./WYWinJSDebugPlugin");
+const cache_1 = require("./cache");
+var WYWinJSDebugPlugin_2 = require("./WYWinJSDebugPlugin");
+Object.defineProperty(exports, "WYWinJSDebugPlugin", { enumerable: true, get: function () { return WYWinJSDebugPlugin_2.WYWinJSDebugPlugin; } });
+const outputCssLoader = require.resolve('./outputCssLoader');
+const cache = new transform_1.TransformCacheCollection();
+const webpack5Loader = function webpack5LoaderPlugin(content, inputSourceMap) {
+    function convertSourceMap(value, filename) {
+        if (typeof value === 'string' || !value) {
+            return undefined;
+        }
+        return {
+            ...value,
+            file: value.file ?? filename,
+            mappings: value.mappings ?? '',
+            names: value.names ?? [],
+            sources: value.sources ?? [],
+            version: value.version ?? 3,
+        };
+    }
+    // tell Webpack this loader is async
+    this.async();
+    (0, shared_1.logger)('loader %s', this.resourcePath);
+    const { sourceMap = undefined, preprocessor = undefined, extension = '.wyw-in-js.css', cacheProvider, ...rest } = this.getOptions() || {};
+    const outputFileName = this.resourcePath.replace(/\.[^.]+$/, extension);
+    const resolveModule = this.getResolve({ dependencyType: 'esm' });
+    const asyncResolve = (token, importer) => {
+        const context = path_1.default.isAbsolute(importer)
+            ? path_1.default.dirname(importer)
+            : path_1.default.join(process.cwd(), path_1.default.dirname(importer));
+        return new Promise((resolve, reject) => {
+            resolveModule(context, token, (err, result) => {
+                if (err) {
+                    reject(err);
+                }
+                else if (result) {
+                    this.addDependency(result);
+                    resolve(result);
+                }
+                else {
+                    reject(new Error(`Cannot resolve ${token}`));
+                }
+            });
+        });
+    };
+    const transformServices = {
+        options: {
+            filename: this.resourcePath,
+            inputSourceMap: convertSourceMap(inputSourceMap, this.resourcePath),
+            root: process.cwd(),
+            preprocessor,
+            pluginOptions: rest,
+        },
+        cache,
+        eventEmitter: WYWinJSDebugPlugin_1.sharedState.emitter,
+    };
+    (0, transform_1.transform)(transformServices, content.toString(), asyncResolve)
+        .then(async (result) => {
+        if (result.cssText) {
+            let { cssText } = result;
+            if (sourceMap) {
+                cssText += `/*# sourceMappingURL=data:application/json;base64,${Buffer.from(result.cssSourceMapText || '').toString('base64')}*/`;
+            }
+            await Promise.all(result.dependencies?.map((dep) => asyncResolve(dep, this.resourcePath)) ?? []);
+            try {
+                const cacheInstance = await (0, cache_1.getCacheInstance)(cacheProvider);
+                await cacheInstance.set(this.resourcePath, cssText);
+                await cacheInstance.setDependencies?.(this.resourcePath, this.getDependencies());
+                const request = `${outputFileName}!=!${outputCssLoader}?cacheProvider=${encodeURIComponent(typeof cacheProvider === 'string' ? cacheProvider : '')}!${this.resourcePath}`;
+                const stringifiedRequest = JSON.stringify(this.utils.contextify(this.context || this.rootContext, request));
+                this.callback(null, `${result.code}\n\nrequire(${stringifiedRequest});`, result.sourceMap ?? undefined);
+            }
+            catch (err) {
+                this.callback(err);
+            }
+            return;
+        }
+        this.callback(null, result.code, result.sourceMap ?? undefined);
+    }, (err) => this.callback(err))
+        .catch((err) => this.callback(err));
+};
+exports.default = webpack5Loader;

package/types/outputCssLoader.d.ts

@@ -0,0 +1,5 @@
+import type webpack from 'webpack';
+import type { ICache } from './cache';
+export default function outputCssLoader(this: webpack.LoaderContext<{
+    cacheProvider: string | ICache | undefined;
+}>): Promise<void>;

package/types/outputCssLoader.js

@@ -0,0 +1,20 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const cache_1 = require("./cache");
+async function outputCssLoader() {
+    this.async();
+    const { cacheProvider } = this.getOptions();
+    try {
+        const cacheInstance = await (0, cache_1.getCacheInstance)(cacheProvider);
+        const result = await cacheInstance.get(this.resourcePath);
+        const dependencies = (await cacheInstance.getDependencies?.(this.resourcePath)) ?? [];
+        dependencies.forEach((dependency) => {
+            this.addDependency(dependency);
+        });
+        this.callback(null, result);
+    }
+    catch (err) {
+        this.callback(err);
+    }
+}
+exports.default = outputCssLoader;