@nlabs/lex 1.48.6 → 1.49.0

package/webpack.config.js

@@ -53,19 +53,54 @@ const {
   webpack: webpackCustom
 } = lexConfig;
 
-// Only add plugins if they are needed
+const webpackPublicPath = webpackCustom?.publicPath || './src/static';
+
+const { publicPath: _, ...webpackConfigFiltered } = webpackCustom || {};
+
 const plugins = [
   new ProgressPlugin({
     activeModules: false,
     entries: true,
+    handler(percentage, message, ...args) {
+      // custom logic
+    },
     modules: true,
+    modulesCount: 5000,
+    profile: false,
     dependencies: true,
+    dependenciesCount: 10000,
     percentBy: null
   }),
   new DotenvPlugin({
+    allowEmptyValues: true,
     path: pathResolve(process.cwd(), '.env'),
-    systemvars: false
-  })
+    safe: false,
+    silent: true,
+    systemvars: true
+  }),
+  new webpack.ProvidePlugin({
+    Buffer: ['buffer', 'Buffer'],
+    process: 'process/browser',
+    global: 'global'
+  }),
+  new webpack.DefinePlugin({
+    'process.env.NODE_ENV': JSON.stringify(process.env.NODE_ENV || 'development'),
+    'global': 'global'
+  }),
+  {
+    apply: (compiler) => {
+      compiler.hooks.watchRun.tap('NotifyOnRebuild', () => {
+        console.log('\x1b[36m[webpack]\x1b[0m Detected file change. Rebuilding...');
+      });
+      compiler.hooks.done.tap('NotifyOnRebuild', (stats) => {
+        if (stats.hasErrors()) {
+          console.log('\x1b[31m[webpack]\x1b[0m Build failed with errors.');
+        } else {
+          console.log('\x1b[32m[webpack]\x1b[0m Build complete. Watching for changes...');
+        }
+      });
+    }
+  }
 ];
 
 const isWeb = (preset || targetEnvironment) === 'web';
@@ -76,12 +111,12 @@ if(isWeb) {
     new CompressionWebpackPlugin({algorithm: 'gzip'}),
     new ProvidePlugin({
       process: 'process/browser',
+      global: 'global',
       React: pathResolve(dirName, './node_modules/react')
     })
   );
 }
 
-// Add svg files
 const globOptions = {
   cwd: sourceFullPath,
   dot: false,
@@ -108,7 +143,6 @@ if(globSync(svgPaths, globOptions).length) {
   );
 }
 
-// If there is are static directories, make sure we copy the files over
 const staticPaths = [];
 const watchIgnorePaths = [
   `${sourceFullPath}/**/**.gif`,
@@ -119,6 +153,15 @@ const imagePath = `${sourceFullPath}/images/`;
 const fontPath = `${sourceFullPath}/fonts/`;
 const docPath = `${sourceFullPath}/docs/`;
 
+const publicPathFull = pathResolve(process.cwd(), webpackPublicPath);
+if(existsSync(publicPathFull)) {
+  staticPaths.push({
+    from: publicPathFull,
+    to: './'
+  });
+  watchIgnorePaths.push(publicPathFull);
+}
+
 if(existsSync(imagePath)) {
   staticPaths.push({from: imagePath, to: './images/'});
   watchIgnorePaths.push(imagePath);
@@ -144,9 +187,33 @@ if(existsSync(`${sourceFullPath}/${lexConfig.entryHTML}`)) {
       minify: isProduction,
       scriptLoading: 'defer',
       showErrors: !isProduction,
-      template: `${sourceFullPath}/${lexConfig.entryHTML}`
+      template: `${sourceFullPath}/${lexConfig.entryHTML}`,
+      inject: true
     })
   );
+
+  const missingAssets = [];
+  const requiredAssets = ['favicon.ico', 'images/logo-icon-64.png', 'manifest.json'];
+
+  requiredAssets.forEach(asset => {
+    if (!existsSync(`${sourceFullPath}/${asset}`)) {
+      missingAssets.push(asset);
+    }
+  });
+
+  if (missingAssets.length > 0) {
+    plugins.push(
+      new CopyWebpackPlugin({
+        patterns: missingAssets.map(asset => ({
+          from: pathResolve(dirName, 'emptyModule.js'),
+          to: `${outputFullPath}/${asset}`,
+          transform() {
+            return '';
+          }
+        }))
+      })
+    );
+  }
 }
 
 let outputFilename = outputFile;
@@ -166,29 +233,25 @@ if(existsSync(`${sourceFullPath}/tsconfig.json`)) {
   }));
 }
 
-// Loader paths
 const esbuildLoaderPath = relativeNodePath('esbuild-loader', dirName);
 const cssLoaderPath = relativeNodePath('css-loader', dirName);
 const graphqlLoaderPath = relativeNodePath('graphql-tag/loader', dirName);
 const htmlLoaderPath = relativeNodePath('html-loader', dirName);
 const postcssLoaderPath = relativeNodePath('postcss-loader', dirName);
-const sourceMapLoaderPath = relativeNodePath('source-map-loader', dirName);
+const sourceMapLoaderPath = pathResolve(dirName, 'node_modules/source-map-loader');
 const styleLoaderPath = relativeNodePath('style-loader', dirName);
 const webpackPath = relativeNodePath('webpack', dirName);
 
-// Aliases
 const aliasPaths = {
   '@nlabs/arkhamjs': relativeNodePath('@nlabs/arkhamjs', process.cwd()),
-  '@nlabs/arkhamjs-utils-react': relativeNodePath(
-    '@nlabs/arkhamjs-utils-react',
-    process.cwd()
-  ),
-  '@nlabs/utils': '/Users/nitrog7/.nvm/versions/node/v22.14.0/lib/node_modules/@nlabs/utils',
+  '@nlabs/arkhamjs-utils-react': relativeNodePath('@nlabs/arkhamjs-utils-react', process.cwd()),
+  'buffer': relativeNodePath('buffer', dirName),
   'core-js': relativeNodePath('core-js', dirName),
   process: relativeNodePath('process', dirName),
   react: relativeNodePath('react', process.cwd()),
   'react-dom': relativeNodePath('react-dom', process.cwd()),
-  'regenerator-runtime': relativeNodePath('regenerator-runtime', dirName)
+  'regenerator-runtime': relativeNodePath('regenerator-runtime', dirName),
+  'Buffer': relativeNodePath('buffer', dirName)
 };
 const aliasKeys = Object.keys(aliasPaths);
 const alias = aliasKeys.reduce((aliases, key) => {
@@ -199,18 +262,36 @@ const alias = aliasKeys.reduce((aliases, key) => {
   return aliases;
 }, {});
 
-// Webpack config
 export default (webpackEnv, webpackOptions) => {
-  const {bundleAnalyzer, watch} = webpackOptions;
+  const {bundleAnalyzer, watch, entry: cliEntry, mode: cliMode} = webpackOptions;
+  const entryValue = Array.isArray(cliEntry) ? cliEntry[0] : cliEntry;
+
+  // Debug printout for environment and mode
+  console.log('[Lex Webpack] NODE_ENV:', process.env.NODE_ENV);
+  console.log('[Lex Webpack] isProduction:', isProduction);
+  console.log('[Lex Webpack] cliMode:', cliMode);
+
   const webpackConfig = {
     bail: true,
     cache: !isProduction,
     devtool: isProduction
       ? 'inline-cheap-module-source-map'
       : 'eval-cheap-module-source-map',
-    entry: {
-      index: `${sourceFullPath}/${lexConfig.entryJs}`
-    },
+    entry: entryValue
+      ? {
+          index: [
+            'buffer',
+            'process/browser',
+            entryValue
+          ]
+        }
+      : {
+          index: [
+            'buffer',
+            'process/browser',
+            `${sourceFullPath}/${lexConfig.entryJs}`
+          ]
+        },
     externals: isReactNative ? {'react-native': true} : undefined,
     ignoreWarnings: [/Failed to parse source map/],
     mode: isProduction ? 'production' : 'development',
@@ -252,13 +333,38 @@ export default (webpackEnv, webpackOptions) => {
           test: /\.(ts|tsx|js)$/
         },
         {
-          exclude: /(node_modules)/,
+          exclude: [pathResolve(sourceFullPath, lexConfig.entryHTML)],
           include: sourceFullPath,
           test: /\.html$/,
           use: [
             {
               loader: htmlLoaderPath,
-              options: {minimize: isProduction}
+              options: {
+                minimize: isProduction,
+                sources: {
+                  list: [
+                    '...',
+                    {
+                      tag: 'link',
+                      attribute: 'href',
+                      type: 'src',
+                      filter: (tag, attribute, attributes) => {
+                        const href = attributes[attribute];
+                        return !href || !href.match(/\.(ico|png|jpg|jpeg|gif|svg|json)$/);
+                      }
+                    },
+                    {
+                      tag: 'script',
+                      attribute: 'src',
+                      type: 'src',
+                      filter: (tag, attribute, attributes) => {
+                        const src = attributes[attribute];
+                        return !src || !src.match(/\.(ico|png|jpg|jpeg|gif|svg|json)$/);
+                      }
+                    }
+                  ]
+                }
+              }
             }
           ]
         },
@@ -277,7 +383,10 @@ export default (webpackEnv, webpackOptions) => {
               options: {
                 postcssOptions: {
                   plugins: [
-                    postcssImport({addDependencyTo: webpack}),
+                    postcssImport({
+                      addDependencyTo: webpack,
+                      path: [relativeNodePath('', dirName)]
+                    }),
                     postcssUrl(),
                     postcssFor(),
                     postcssPercentage({
@@ -295,14 +404,14 @@ export default (webpackEnv, webpackOptions) => {
                       strict: false,
                       warnings: false
                     }),
+                    postcssNesting(),
                     tailwindcss(),
                     autoprefixer(),
-                    postcssNesting(),
                     postcssFlexbugsFixes(),
                     postcssPresetEnv({
                       stage: 0
                     }),
-                    cssnano({autoprefixer: false}),
+                    ...(isProduction ? [cssnano({autoprefixer: false})] : []),
                     postcssBrowserReporter()
                   ]
                 }
@@ -312,7 +421,7 @@ export default (webpackEnv, webpackOptions) => {
               loader: esbuildLoaderPath,
               options: {
                 loader: 'css',
-                minify: true
+                minify: isProduction
               }
             }
           ]
@@ -323,6 +432,49 @@ export default (webpackEnv, webpackOptions) => {
           test: /\.(gif|jpg|png|svg)$/,
           type: 'asset/resource'
         },
+        {
+          test: /\.(jpg|jpeg|png|gif|webp|svg|mp4|webm|ogg|mp3|wav|flac|aac)$/,
+          include: publicPathFull,
+          type: 'asset/resource',
+          generator: {
+            filename: '[name].[hash][ext]'
+          },
+          use: isProduction ? [
+            {
+              loader: 'image-webpack-loader',
+              options: {
+                mozjpeg: {
+                  progressive: true,
+                  quality: 65
+                },
+                optipng: {
+                  enabled: false
+                },
+                pngquant: {
+                  quality: [0.65, 0.90],
+                  speed: 4
+                },
+                gifsicle: {
+                  interlaced: false
+                },
+                webp: {
+                  quality: 75
+                }
+              }
+            }
+          ] : []
+        },
+        {
+          test: /\.json$/,
+          type: 'json'
+        },
+        {
+          test: /\.ico$/,
+          type: 'asset/resource',
+          generator: {
+            filename: '[name][ext]'
+          }
+        },
         {
           exclude: /(node_modules)/,
           include: sourceFullPath,
@@ -379,15 +531,17 @@ export default (webpackEnv, webpackOptions) => {
       fallback: {
         assert: relativeNodePath('assert', dirName),
         buffer: relativeNodePath('buffer', dirName),
-        crypto: relativeNodePath('crypto-browserify', dirName),
+        crypto: relativeNodePath('crypto-js', dirName),
         http: relativeNodePath('stream-http', dirName),
         https: relativeNodePath('https-browserify', dirName),
         os: relativeNodePath('os-browserify/browser.js', dirName),
         path: relativeNodePath('path-browserify', dirName),
         process: relativeNodePath('process/browser.js', dirName),
+        randombytes: relativeNodePath('randombytes', dirName),
         stream: relativeNodePath('stream-browserify', dirName),
         util: relativeNodePath('util', dirName),
-        vm: relativeNodePath('vm-browserify', dirName)
+        vm: relativeNodePath('vm-browserify', dirName),
+        Buffer: relativeNodePath('buffer', dirName)
       },
       mainFiles: ['index'],
       modules: [sourceFullPath, 'node_modules', relativeNodePath('', dirName), '/Users/nitrog7/.nvm/versions/node/v22.14.0/lib/node_modules'],
@@ -399,7 +553,6 @@ export default (webpackEnv, webpackOptions) => {
     target: isWeb ? 'web' : 'node'
   };
 
-  // Add development plugins
   if(!isProduction) {
     webpackConfig.resolve.alias = {
       ...webpackConfig.resolve.alias,
@@ -422,13 +575,10 @@ export default (webpackEnv, webpackOptions) => {
           index: '/index.html',
           logger: console.log.bind(console),
           rewrites: [
-            // wps
             {
               from: '/wps',
               to: ({parsedUrl: {pathname}}) => pathname
             },
-
-            // Javascript files
             {
               from: /\.js/,
               to: ({parsedUrl: {pathname}}) => {
@@ -437,8 +587,6 @@ export default (webpackEnv, webpackOptions) => {
                 return `/${pathUrl[fileIndex]}`;
               }
             },
-
-            // Static files
             {
               from: /\.[css,gif,ico,jpg,json,png,svg]/,
               to: ({parsedUrl: {pathname}}) => pathname
@@ -460,7 +608,7 @@ export default (webpackEnv, webpackOptions) => {
         open: process.env.WEBPACK_DEV_OPEN === 'true',
         port: 7001,
         progress: 'minimal',
-        static: [outputFullPath],
+        static: existsSync(outputFullPath) ? [outputFullPath] : [],
         status: true
       })
     );
@@ -473,14 +621,12 @@ export default (webpackEnv, webpackOptions) => {
 
     if(watch) {
       webpackConfig.bail = false;
-      // webpackConfig.watch = true;
       webpackConfig.watchOptions = {
         aggregateTimeout: 500,
         ignored: ['node_modules/**', ...watchIgnorePaths]
       };
     }
   } else {
-    // Create site ico files
     const siteLogo = `${sourceFullPath}/images/logo.png`;
 
     if(existsSync(siteLogo)) {
@@ -514,5 +660,49 @@ export default (webpackEnv, webpackOptions) => {
     }
   }
 
-  return merge(webpackConfig, webpackCustom);
-};
+  if (process.env.LEX_CONFIG_DEBUG) {
+    console.log('\n\x1b[36m[LEX_CONFIG_DEBUG] Webpack mode:', process.env.NODE_ENV, 'isProduction:', isProduction, '\x1b[0m');
+    if (webpackConfig && webpackConfig.module && Array.isArray(webpackConfig.module.rules)) {
+      console.log('\x1b[36m[LEX_CONFIG_DEBUG] Loader chains:\x1b[0m');
+      webpackConfig.module.rules.forEach((rule, idx) => {
+        if (rule.test) {
+          let testStr = rule.test.toString();
+          let use = rule.use || rule.loader || rule.type;
+          if (Array.isArray(use)) {
+            use = use.map(u => (typeof u === 'string' ? u : u.loader || u.type)).join(' -> ');
+          } else if (typeof use === 'object' && use !== null) {
+            use = use.loader || use.type;
+          }
+          console.log(`  [${idx}] ${testStr}: ${use}`);
+        }
+      });
+    }
+
+    if (webpackConfig && Array.isArray(webpackConfig.plugins)) {
+      console.log('\x1b[36m[LEX_CONFIG_DEBUG] Plugins:\x1b[0m');
+      webpackConfig.plugins.forEach((plugin, idx) => {
+        let name = plugin.constructor && plugin.constructor.name;
+        if (!name && typeof plugin === 'object' && plugin.apply) name = 'CustomPlugin';
+        if (!name && typeof plugin === 'function') name = 'FunctionPlugin';
+        console.log(`  [${idx}] ${name}`);
+      });
+    }
+
+    if (webpackConfig && webpackConfig.module && Array.isArray(webpackConfig.module.rules)) {
+      const cssRule = webpackConfig.module.rules.find(rule => rule.test && rule.test.toString().includes('css'));
+      if (cssRule) {
+        let use = cssRule.use || cssRule.loader || cssRule.type;
+        if (Array.isArray(use)) {
+          use = use.map(u => (typeof u === 'string' ? u : u.loader || u.type)).join(' -> ');
+        } else if (typeof use === 'object' && use !== null) {
+          use = use.loader || use.type;
+        }
+        console.log('\x1b[36m[LEX_CONFIG_DEBUG] CSS Loader Chain:\x1b[0m', use);
+      } else {
+        console.log('\x1b[36m[LEX_CONFIG_DEBUG] No CSS loader rule found.\x1b[0m');
+      }
+    }
+  }
+
+  return merge(webpackConfig, webpackConfigFiltered);
+};