@enhanced-dom/webpack 0.0.2 → 0.0.5

package/config.js

@@ -1,7 +1,11 @@
 "use strict";
 var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
     if (k2 === undefined) k2 = k;
-    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
 }) : (function(o, m, k, k2) {
     if (k2 === undefined) k2 = k;
     o[k2] = m[k];

package/loaders/ExposeCssSourceLoader.js

@@ -1,14 +1,24 @@
 "use strict";
-const loader_utils_1 = require("loader-utils");
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+const style_loader_1 = __importDefault(require("style-loader"));
+const lodash_1 = require("lodash");
 const loader = function () { };
 loader.pitch = function pitch(remainingRequest) {
     if (this.cacheable) {
         this.cacheable();
     }
-    return `
-    var content = require(${loader_utils_1.stringifyRequest(this, `!!${remainingRequest}`)});
-    module.exports = content.locals || {};
-    module.exports._source = content.toString();
+    const result = style_loader_1.default.pitch.call(this, remainingRequest);
+    const index = result.indexOf('var update = API(content, options)');
+    if (index <= -1)
+        return result;
+    const insertIndex = index - 1;
+    const stylesheetName = (0, lodash_1.uniqueId)('stylesheet-');
+    const insertAttr = `
+    options.attributes = options.attributes || {}
+    options.attributes.title = "${stylesheetName}";
   `;
+    return result.slice(0, insertIndex) + insertAttr + result.slice(insertIndex) + `export const _stylesheetName = "${stylesheetName}";`;
 };
 module.exports = loader;

package/loaders/index.d.ts

@@ -20,36 +20,16 @@ export declare const nullConfigFactory: ({ rules }?: {
     use: string;
     enforce: string;
 }[];
-export declare const assetsConfigFactory: {
-    ({ embed, extraConfig, pathPrefix }?: {
-        embed?: boolean;
-        extraConfig?: {};
-        pathPrefix?: string;
-    }): {
-        loader: string;
-        options: {
-            esModule: boolean;
-        };
-    }[] | {
-        loader: string;
-        options: {
-            esModule: boolean;
-            name: string;
-        };
-    }[];
-    fontExtensions: string[];
-    imageExtensions: string[];
-    extensions(extensions?: string[]): RegExp;
-};
-export declare const babelConfigFactory: ({ babel, cache }?: {
+export declare const fontExtensions: string[];
+export declare const imageExtensions: string[];
+export declare const assetExtensions: (extensions?: string[]) => RegExp;
+export declare const babelConfigFactory: ({ babel }: {
     babel?: any;
-    cache?: boolean | Record<string, any>;
 }) => {
     loader: string;
     options: any;
 }[];
-export declare const markdownConfigFactory: ({ babel, cache, remark, }?: {
+export declare const markdownConfigFactory: ({ babel, remark }?: {
     babel?: any;
-    cache?: boolean | Record<string, any>;
     remark?: any[];
 }) => any[];

package/loaders/index.js

@@ -3,16 +3,12 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.markdownConfigFactory = exports.babelConfigFactory = exports.assetsConfigFactory = exports.nullConfigFactory = exports.styleConfigFactory = void 0;
+exports.markdownConfigFactory = exports.babelConfigFactory = exports.assetExtensions = exports.imageExtensions = exports.fontExtensions = exports.nullConfigFactory = exports.styleConfigFactory = void 0;
 const mini_css_extract_plugin_1 = __importDefault(require("mini-css-extract-plugin"));
-const path_1 = __importDefault(require("path"));
 const postcss_import_webpack_resolver_1 = __importDefault(require("postcss-import-webpack-resolver"));
 const ExposeCssSourceLoader = require.resolve('./ExposeCssSourceLoader');
-// @ts-ignore
 const remark_code_import_1 = __importDefault(require("remark-code-import"));
-// @ts-ignore
 const remark_unwrap_images_1 = __importDefault(require("remark-unwrap-images"));
-// @ts-ignore
 const remark_embed_images_1 = __importDefault(require("remark-embed-images"));
 const styleConfigFactory = ({ raw = false, extract = false, sourceMap = false, typedStyles = false, modules = undefined, parser = undefined, aliases = {}, } = {}) => {
     var _a;
@@ -20,23 +16,28 @@ const styleConfigFactory = ({ raw = false, extract = false, sourceMap = false, t
     if (raw) {
         loaders.push({
             loader: ExposeCssSourceLoader,
+            options: {
+                attributes: {},
+            },
         });
     }
-    const finalStyleLoader = extract
-        ? {
+    else if (extract) {
+        loaders.push({
             loader: mini_css_extract_plugin_1.default.loader,
             options: {
                 publicPath: './',
             },
-        }
-        : { loader: 'style-loader' };
-    loaders.push(finalStyleLoader);
+        });
+    }
+    else {
+        loaders.push({ loader: 'style-loader' });
+    }
     if (typedStyles) {
         loaders.push({
             loader: 'dts-css-modules-loader',
             options: {
                 namedExport: true,
-                banner: raw ? 'export const _source: string;' : undefined,
+                banner: raw ? 'export const _stylesheetName: string;' : undefined,
             },
         });
     }
@@ -81,7 +82,7 @@ const styleConfigFactory = ({ raw = false, extract = false, sourceMap = false, t
                     [
                         'postcss-import',
                         {
-                            resolve: postcss_import_webpack_resolver_1.default({
+                            resolve: (0, postcss_import_webpack_resolver_1.default)({
                                 alias: aliases,
                             }),
                             modules: ['./node_modules', 'node_modules'],
@@ -109,27 +110,19 @@ const nullConfigFactory = ({ rules = [] } = {}) => {
     }));
 };
 exports.nullConfigFactory = nullConfigFactory;
-const assetsConfigFactory = ({ embed = false, extraConfig = {}, pathPrefix = 'static' } = {}) => {
-    return embed
-        ? [{ loader: 'url-loader', options: { esModule: false, ...extraConfig } }]
-        : [{ loader: 'file-loader', options: { esModule: false, name: path_1.default.join(pathPrefix, '[name].[ext]'), ...extraConfig } }];
-};
-exports.assetsConfigFactory = assetsConfigFactory;
-exports.assetsConfigFactory.fontExtensions = ['ttf', 'eot', 'woff', 'woff2'];
-exports.assetsConfigFactory.imageExtensions = ['png', 'jpg', 'jpeg', 'gif', 'svg'];
-exports.assetsConfigFactory.extensions = (extensions = [...exports.assetsConfigFactory.imageExtensions, ...exports.assetsConfigFactory.fontExtensions]) => new RegExp(`\\.(${extensions.join('|')})(\\?.*$|$)?$`);
-const babelConfigFactory = ({ babel = undefined, cache = false } = {}) => {
+exports.fontExtensions = ['ttf', 'eot', 'woff', 'woff2'];
+exports.imageExtensions = ['png', 'jpg', 'jpeg', 'gif', 'svg', 'ico'];
+const assetExtensions = (extensions = [...exports.imageExtensions, ...exports.fontExtensions]) => new RegExp(`\\.(${extensions.join('|')})(\\?.*$|$)?$`);
+exports.assetExtensions = assetExtensions;
+const babelConfigFactory = ({ babel = undefined }) => {
     const loaders = [{ loader: 'babel-loader', options: babel }];
-    if (cache) {
-        loaders.unshift({ loader: 'cache-loader', options: { cacheDirectory: '.babelcache', ...cache } });
-    }
     return loaders;
 };
 exports.babelConfigFactory = babelConfigFactory;
-const markdownConfigFactory = ({ babel, cache, remark = [], } = {}) => {
+const markdownConfigFactory = ({ babel, remark = [] } = {}) => {
     const loaders = [];
     if (babel) {
-        loaders.push(...exports.babelConfigFactory({ babel, cache }));
+        loaders.push(...(0, exports.babelConfigFactory)({ babel }));
         loaders.push({
             loader: '@mdx-js/loader',
             options: {
@@ -138,9 +131,6 @@ const markdownConfigFactory = ({ babel, cache, remark = [], } = {}) => {
         });
     }
     else {
-        if (cache) {
-            loaders.push({ loader: 'cache-loader', options: { cacheDirectory: '.markdowncache', ...cache } });
-        }
         loaders.push({
             loader: 'html-loader',
         }, {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@enhanced-dom/webpack",
-  "version": "0.0.2",
+  "version": "0.0.5",
   "description": "Helpers for webpack configuration",
   "keywords": [],
   "repository": "https://github.com/enhanced-dom/webpack.git",
@@ -18,12 +18,12 @@
     "@mdx-js/loader": "^1.6.22",
     "autoprefixer": "^10.3.5",
     "babel-loader": "^8.2.2",
-    "cache-loader": "^4.1.0",
     "copyfiles": "^2.4.1",
     "css-loader": "^6.2.0",
     "cssnano-preset-advanced": "^5.1.3",
     "dts-css-modules-loader": "^1.2.3",
-    "file-loader": "^6.2.0",
+    "html-inline-css-webpack-plugin": "^1.11.1",
+    "html-inline-script-webpack-plugin": "^2.0.3",
     "html-loader": "^2.1.2",
     "html-webpack-inline-source-plugin": "^0.0.10",
     "html-webpack-plugin": "^5.3.1",
@@ -40,6 +40,7 @@
     "postcss-advanced-variables": "^3.0.1",
     "postcss-scss": "^4.0.0",
     "module-from-string": "^3.0.0",
+    "raw-loader": "^4.0.2",
     "remark-code-import": "^0.3.0",
     "remark-embed-images": "^2.0.0",
     "remark-images": "^2.0.0",
@@ -49,12 +50,10 @@
     "source-map-loader": "^3.0.0",
     "style-loader": "^3.2.1",
     "terser-webpack-plugin": "^5.1.2",
-    "url-loader": "^4.1.1",
-    "webpack": "^5.53.0",
-    "webpack-bundle-analyzer": "^4.4.2",
-    "webpack-cli": "^4.8.0",
-    "webpack-dev-server": "^4.2.1",
-    "semver": "^7.3.5",
+    "webpack": "^5.70.0",
+    "webpack-bundle-analyzer": "^4.5.0",
+    "webpack-cli": "^4.9.2",
+    "webpack-dev-server": "^4.7.4",
     "serve": "^12.0.0"
   },
   "devDependencies": {
@@ -63,16 +62,16 @@
     "@types/loader-utils": "^2.0.2",
     "@types/mini-css-extract-plugin": "^1.4.3",
     "@types/optimize-css-assets-webpack-plugin": "^5.0.3",
-    "@types/terser-webpack-plugin": "^5.0.3",
+    "@types/terser-webpack-plugin": "^5.2.0",
     "@types/webpack": "^5.28.0",
     "@types/webpack-bundle-analyzer": "^2.9.2",
     "typescript": "^4.2.2"
-
   },
   "overrides": {
     "postcss": "^8.2.15",
     "postcss-scss": "^4.0.0",
-    "autoprefixer": "^10.3.5"
+    "autoprefixer": "^10.3.5",
+    "terser": "^5.12.1"
   },
   "engines": {
     "node": ">=14.17.0",

package/plugins/HtmlWebpackInlineSourcePlugin.js

@@ -3,39 +3,46 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 const html_webpack_plugin_1 = __importDefault(require("html-webpack-plugin"));
-// @ts-ignore
 const html_webpack_inline_source_plugin_1 = __importDefault(require("html-webpack-inline-source-plugin"));
-html_webpack_inline_source_plugin_1.default.prototype.processTags = function (compilation, regexStr, pluginData) {
+const fs_1 = __importDefault(require("fs"));
+const path_1 = __importDefault(require("path"));
+html_webpack_inline_source_plugin_1.default.prototype.processTags = function (compilation, pluginData) {
     const self = this;
-    const scripts = [];
-    const styles = [];
-    const regex = new RegExp(regexStr);
-    pluginData.assetTags.scripts.forEach(function (tag) {
-        scripts.push(self.processTag(compilation, regex, tag));
+    const headTags = [];
+    const bodyTags = [];
+    pluginData.headTags.forEach((tag) => {
+        headTags.push(self.processTag(compilation, self.assetsRegExp, tag));
     });
-    pluginData.assetTags.styles.forEach(function (tag) {
-        styles.push(self.processTag(compilation, regex, tag));
+    pluginData.bodyTags.forEach((tag) => {
+        bodyTags.push(self.processTag(compilation, self.assetsRegExp, tag));
     });
-    return { ...pluginData, assetTags: { ...pluginData.assetTags, scripts, styles } };
+    return { ...pluginData, headTags, bodyTags };
 };
 html_webpack_inline_source_plugin_1.default.prototype.apply = function (compiler) {
     const self = this;
     self.assetsRegExp = undefined;
+    self.faviconPath = undefined;
     compiler.hooks.compilation.tap('html-webpack-inline-source-plugin', (compilation) => {
-        html_webpack_plugin_1.default.getHooks(compilation).alterAssetTags.tapAsync('html-webpack-inline-source-plugin', (htmlPluginData, callback) => {
-            if (!htmlPluginData.plugin.options.inlineSource) {
-                return callback(null, htmlPluginData);
+        html_webpack_plugin_1.default.getHooks(compilation).afterTemplateExecution.tapAsync('html-webpack-inline-source-plugin', (htmlPluginData, callback) => {
+            self.assetsRegExp = new RegExp('.(js|css)$');
+            const result = self.processTags(compilation, htmlPluginData);
+            const favicon = htmlPluginData.plugin.options.favicon;
+            if (!favicon || !fs_1.default.existsSync(favicon)) {
+                return callback(null, result);
+            }
+            const faviconTag = result.headTags.find((tag) => tag.tagName === 'link' && tag.attributes.rel === 'icon');
+            if (faviconTag) {
+                self.faviconPath = faviconTag.attributes.href;
+                faviconTag.attributes.href = `data:image/x-icon;base64, ${fs_1.default.readFileSync(favicon, 'base64')}`;
             }
-            const regexStr = htmlPluginData.plugin.options.inlineSource;
-            self.assetsRegExp = new RegExp(regexStr);
-            const result = self.processTags(compilation, regexStr, htmlPluginData);
             callback(null, result);
         });
     });
     compiler.hooks.emit.tap('html-webpack-inline-source-plugin', (compilation) => {
         if (self.assetsRegExp) {
             Object.keys(compilation.assets).forEach(function (file) {
-                if (file.match(self.assetsRegExp)) {
+                var _a, _b;
+                if (file.match(self.assetsRegExp) || file === ((_b = (_a = self.faviconPath) === null || _a === void 0 ? void 0 : _a.split(path_1.default.sep)) === null || _b === void 0 ? void 0 : _b.pop())) {
                     delete compilation.assets[file];
                 }
             });

package/plugins/index.d.ts

@@ -1,18 +1,20 @@
 import { BundleAnalyzerPlugin } from 'webpack-bundle-analyzer';
+import CssMinimizerPlugin from 'css-minimizer-webpack-plugin';
+import MiniCssExtractPlugin from 'mini-css-extract-plugin';
 import TerserPlugin from 'terser-webpack-plugin';
 import { MinifyOptions } from 'terser';
 import HtmlWebpackPlugin from 'html-webpack-plugin';
+import { WebpackPluginInstance } from 'webpack';
 export declare const cssConfigFactory: ({ filename, cssnanoOptions, }?: {
     filename?: string;
     cssnanoOptions?: any;
-}) => any[];
+}) => (MiniCssExtractPlugin | CssMinimizerPlugin<CssMinimizerPlugin.CssNanoOptionsExtended>)[];
 export declare const bundleAnalyzerConfigFactory: (extraConfig?: BundleAnalyzerPlugin.Options) => BundleAnalyzerPlugin[];
 export declare const htmlConfigFactory: ({ html, embed }?: {
     embed?: boolean;
     html?: Partial<HtmlWebpackPlugin.Options>;
-}) => HtmlWebpackPlugin[];
-export declare const terserConfigFactory: ({ enableSourcemaps, cachePath, terserOptions, }?: {
+}) => WebpackPluginInstance[];
+export declare const terserConfigFactory: ({ enableSourcemaps, terserOptions }?: {
     enableSourcemaps?: boolean;
-    cachePath?: string;
     terserOptions?: MinifyOptions;
-}) => TerserPlugin[];
+}) => TerserPlugin<MinifyOptions>[];

package/plugins/index.js

@@ -55,12 +55,11 @@ const htmlConfigFactory = ({ html = {}, embed } = {}) => {
     const favicon = html.favicon ? (path_1.default.isAbsolute(html.favicon) ? html.favicon : path_1.default.join(process.cwd(), html.favicon)) : undefined;
     const plugins = [
         new html_webpack_plugin_1.default({
-            inject: true,
-            inlineSource: embed ? '.(js|css)$' : undefined,
+            inject: 'body',
             lang: 'en-US',
             ...(templateExists ? { template } : { templateContent }),
             ...html,
-            favicon: favicon && embed && fs_1.default.existsSync(favicon) ? `data:image/x-icon;base64, ${fs_1.default.readFileSync(favicon, 'base64')}` : favicon,
+            favicon,
         }),
     ];
     if (embed) {
@@ -69,13 +68,12 @@ const htmlConfigFactory = ({ html = {}, embed } = {}) => {
     return plugins;
 };
 exports.htmlConfigFactory = htmlConfigFactory;
-const terserConfigFactory = ({ enableSourcemaps = true, cachePath = './.tersercache', terserOptions = {}, } = {}) => [
+const terserConfigFactory = ({ enableSourcemaps = true, terserOptions = {} } = {}) => [
     new terser_webpack_plugin_1.default({
         parallel: true,
-        cache: cachePath,
-        sourceMap: enableSourcemaps,
         terserOptions: {
             ie8: false,
+            sourceMap: enableSourcemaps,
             compress: {
                 evaluate: false,
             },