@nlabs/lex 1.51.6 → 1.52.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nlabs/lex",
-  "version": "1.51.6",
+  "version": "1.52.0",
   "description": "Lex",
   "license": "MIT",
   "type": "module",
@@ -131,7 +131,7 @@
     "dotenv-webpack": "^8.1.1",
     "download-npm-package": "^3.1.12",
     "eslint": "^9.39.1",
-    "eslint-config-styleguidejs": "^4.1.9",
+    "eslint-config-styleguidejs": "^4.1.12",
     "execa": "9.6.1",
     "expect": "^30.2.0",
     "exports-loader": "^5.0.0",
@@ -176,9 +176,12 @@
     "postcss-nesting": "^13.0.2",
     "postcss-percentage": "^0.0.0",
     "postcss-preset-env": "^10.5.0",
+    "postcss-value-parser": "^4.2.0",
+    "math-expression-evaluator": "^2.0.7",
     "postcss-simple-vars": "^7.0.1",
     "postcss-svgo": "7.1.0",
     "postcss-url": "10.1.3",
+    "postcss": "^8.5.6",
     "process": "^0.11.10",
     "randombytes": "^2.1.0",
     "react": "^19.2.1",
@@ -194,7 +197,7 @@
     "stream-browserify": "^3.0.0",
     "stream-http": "^3.2.0",
     "style-loader": "^4.0.0",
-    "svg-spritemap-webpack-plugin": "^5.0.4",
+    "svg-spritemap-webpack-plugin": "^5.1.0",
     "svgo": "4.0.0",
     "swc-loader": "^0.2.6",
     "tailwindcss": "^4.1.17",
@@ -230,10 +233,14 @@
     "css-loader": "7.1.2"
   },
   "overrides": {
+    "cheerio": "^1.0.0-rc.13",
     "cross-spawn": "^7.0.6",
+    "css-select": "^5.1.0",
     "got": "^14.6.5",
     "http-cache-semantics": "^4.2.0",
     "http-proxy-middleware": "^3.0.5",
+    "lodash.pick": "^4.4.0",
+    "nth-check": "^2.1.1",
     "postcss": "^8.5.6",
     "semver-regex": "^4.0.5",
     "tmp": "^0.2.5"

package/scripts/test-static-manual.js

@@ -0,0 +1,117 @@
+#!/usr/bin/env node
+/**
+ * Manual test script to verify static file serving
+ * This script starts the dev server and tests static file access
+ */
+
+import {spawn} from 'child_process';
+import {createConnection} from 'net';
+import {join} from 'path';
+import {fileURLToPath} from 'url';
+import {dirname} from 'path';
+
+const __filename = fileURLToPath(import.meta.url);
+const __dirname = dirname(__filename);
+const projectRoot = join(__dirname, '..');
+
+const testPort = 3002;
+const lexPath = join(projectRoot, 'lib', 'lex.js');
+
+console.log('🧪 Starting dev server to test static file serving...');
+console.log(`   Port: ${testPort}`);
+console.log(`   Static path: ${join(projectRoot, 'src', 'static')}`);
+console.log(`   Test file: ${join(projectRoot, 'src', 'static', 'test.txt')}\n`);
+
+const devServerProcess = spawn('node', [lexPath, 'dev', '--port', testPort.toString()], {
+  cwd: projectRoot,
+  stdio: 'inherit',
+  env: {
+    ...process.env,
+    NODE_ENV: 'development'
+  }
+});
+
+const checkPort = (port) => {
+  return new Promise((resolve) => {
+    const socket = createConnection(port, 'localhost');
+    socket.on('connect', () => {
+      socket.destroy();
+      resolve(true);
+    });
+    socket.on('error', () => {
+      resolve(false);
+    });
+    socket.setTimeout(2000, () => {
+      socket.destroy();
+      resolve(false);
+    });
+  });
+};
+
+const waitForServer = async () => {
+  console.log('⏳ Waiting for server to start...');
+  for (let i = 0; i < 60; i++) {
+    await new Promise(resolve => setTimeout(resolve, 1000));
+    const portOpen = await checkPort(testPort);
+    if (portOpen) {
+      console.log(`✅ Server is running on port ${testPort}\n`);
+      return true;
+    }
+    if (i % 5 === 4) {
+      process.stdout.write('.');
+    }
+  }
+  return false;
+};
+
+const testStaticFile = async () => {
+  try {
+    console.log('🌐 Testing static file access...');
+    const response = await fetch(`http://localhost:${testPort}/test.txt`);
+    console.log(`   Status: ${response.status}`);
+    console.log(`   Headers:`, Object.fromEntries(response.headers.entries()));
+
+    if (response.ok) {
+      const content = await response.text();
+      console.log(`   Content: "${content}"`);
+      console.log('\n✅ Static file is accessible!');
+      return true;
+    } else {
+      console.log(`\n❌ Static file returned status ${response.status}`);
+      const text = await response.text();
+      console.log(`   Response: ${text.substring(0, 200)}`);
+      return false;
+    }
+  } catch (error) {
+    console.log(`\n❌ Error accessing static file: ${error.message}`);
+    return false;
+  }
+};
+
+waitForServer().then(async (serverReady) => {
+  if (!serverReady) {
+    console.log('\n❌ Server did not start within 60 seconds');
+    devServerProcess.kill('SIGTERM');
+    process.exit(1);
+  }
+
+  // Give it a moment to fully initialize
+  await new Promise(resolve => setTimeout(resolve, 2000));
+
+  const success = await testStaticFile();
+
+  console.log('\n🛑 Stopping dev server...');
+  devServerProcess.kill('SIGTERM');
+  setTimeout(() => {
+    if (!devServerProcess.killed) {
+      devServerProcess.kill('SIGKILL');
+    }
+    process.exit(success ? 0 : 1);
+  }, 1000);
+});
+
+devServerProcess.on('error', (error) => {
+  console.error('❌ Failed to start dev server:', error.message);
+  process.exit(1);
+});
+

package/scripts/test-webpack.js

@@ -215,9 +215,14 @@ try {
     });
 
     let serverOutput = '';
+    let serverStartedOutput = false;
     devServerProcess.stdout.on('data', (data) => {
       const output = data.toString();
       serverOutput += output;
+      // Check for server ready indicators
+      if (output.includes('compiled') || output.includes('Local:') || output.includes('http://') || output.includes('webpack compiled')) {
+        serverStartedOutput = true;
+      }
     });
 
     devServerProcess.stderr.on('data', (data) => {
@@ -226,6 +231,10 @@ try {
       if (output.includes('error') || output.includes('Error') || output.includes('ERROR')) {
         serverError = output;
       }
+      // Sometimes webpack outputs to stderr but it's not an error
+      if (output.includes('compiled') || output.includes('webpack')) {
+        serverStartedOutput = true;
+      }
     });
 
     devServerProcess.on('error', (error) => {
@@ -253,33 +262,65 @@ try {
     };
 
     const waitForServer = async () => {
-      for (let i = 0; i < 60; i++) {
+      for (let i = 0; i < 90; i++) {
         await new Promise(resolve => setTimeout(resolve, 1000));
 
         const portOpen = await checkPort(testPort);
-        if (portOpen) {
-          await new Promise(resolve => setTimeout(resolve, 5000));
-          const testEndpoints = ['/test.txt', '/index.html', '/'];
-          for (const endpoint of testEndpoints) {
-            try {
-              const controller = new AbortController();
-              const timeoutId = setTimeout(() => controller.abort(), 5000);
-              const response = await fetch(`http://localhost:${testPort}${endpoint}`, {
-                signal: controller.signal
-              });
-              clearTimeout(timeoutId);
-              if (response.ok || response.status === 200) {
+        if (portOpen || serverStartedOutput) {
+          // Give it a bit more time to fully initialize
+          await new Promise(resolve => setTimeout(resolve, 3000));
+
+          // Try to access the static file directly
+          try {
+            const controller = new AbortController();
+            const timeoutId = setTimeout(() => controller.abort(), 5000);
+            const response = await fetch(`http://localhost:${testPort}/test.txt`, {
+              signal: controller.signal
+            });
+            clearTimeout(timeoutId);
+            if (response.ok && response.status === 200) {
+              const content = await response.text();
+              if (content.includes('Static file content')) {
                 return true;
               }
-            } catch (error) {
-              if (error.name !== 'AbortError') {
+            }
+          } catch (error) {
+            if (error.name !== 'AbortError' && i > 5) {
+              // Only log after a few attempts
+            }
+          }
+
+          // Also try index.html as a fallback check
+          try {
+            const controller = new AbortController();
+            const timeoutId = setTimeout(() => controller.abort(), 5000);
+            const response = await fetch(`http://localhost:${testPort}/index.html`, {
+              signal: controller.signal
+            });
+            clearTimeout(timeoutId);
+            if (response.ok || response.status === 200) {
+              // Server is up, even if static file test didn't work yet
+              if (i > 10) {
+                // After 10 seconds, if server is up, try static file again
+                try {
+                  const staticResponse = await fetch(`http://localhost:${testPort}/test.txt`, {
+                    signal: controller.signal
+                  });
+                  if (staticResponse.ok) {
+                    return true;
+                  }
+                } catch {
+                }
               }
             }
+          } catch (error) {
+            if (error.name !== 'AbortError') {
+            }
           }
         }
 
         if (i % 10 === 9 && i > 0) {
-          console.log(`   Still waiting... (${i + 1}/60 seconds)`);
+          console.log(`   Still waiting... (${i + 1}/90 seconds)`);
         }
       }
       return false;
@@ -288,29 +329,49 @@ try {
     serverReady = await waitForServer();
 
     if (serverError) {
-      console.log(`⚠️  Dev server error: ${serverError}`);
-      console.log('⚠️  Skipping HTTP tests due to server error');
+      console.log(`❌ Dev server error: ${serverError}`);
+      console.log('❌ HTTP tests cannot run due to server error');
       console.log('💡 Note: Static files are copied to build directory and should be accessible via dev server');
+      throw new Error(`Dev server failed to start: ${serverError}`);
     } else if (!serverReady) {
-      console.log('⚠️  Dev server did not start within 60 seconds, skipping HTTP tests');
-      console.log('💡 Note: Static files are copied to build directory and should be accessible via dev server');
+      console.log('❌ Dev server did not start within 60 seconds');
+      console.log('❌ HTTP tests cannot run - this is a required test');
       console.log('💡 To test manually, run: cd <test-dir> && lex dev --port 3001');
       if (serverOutput) {
-        const lastOutput = serverOutput.slice(-1000);
-        console.log('\nServer output (last 1000 chars):');
+        const lastOutput = serverOutput.slice(-2000);
+        console.log('\nServer output (last 2000 chars):');
         console.log(lastOutput);
+        // Check if there are any obvious errors
+        if (lastOutput.includes('Error') || lastOutput.includes('error') || lastOutput.includes('Cannot find')) {
+          console.log('\n⚠️  Potential errors detected in server output above');
+        }
       } else {
         console.log('   (No server output captured - server may not have started)');
+        console.log('   This could indicate the process failed to spawn or exited immediately');
+      }
+
+      // Check if process is still running
+      if (devServerProcess && !devServerProcess.killed) {
+        try {
+          devServerProcess.kill(0); // Check if process exists
+          console.log('   (Dev server process is still running but not responding)');
+        } catch {
+          console.log('   (Dev server process has exited)');
+        }
       }
+      throw new Error('Dev server did not start within timeout period - HTTP static file access test cannot run');
     } else {
       console.log(`✅ Dev server started on port ${testPort}`);
 
       const testUrls = [
-        {url: '/test.txt', expectedContent: 'Static file content', description: 'Static file from staticPath'},
-        {url: '/index.html', expectedContent: 'Test App', description: 'HTML file'},
-        {url: '/images/test.png', expectedContent: 'fake-png-content', description: 'Image file'}
+        {url: '/test.txt', expectedContent: 'Static file content', description: 'Static file from staticPath', required: true},
+        {url: '/index.html', expectedContent: 'Test App', description: 'HTML file', required: false},
+        {url: '/images/test.png', expectedContent: 'fake-png-content', description: 'Image file', required: false}
       ];
 
+      let httpTestFailed = false;
+      const httpTestErrors = [];
+
       for (const test of testUrls) {
         try {
           const response = await fetch(`http://localhost:${testPort}${test.url}`);
@@ -319,19 +380,47 @@ try {
             if (content.includes(test.expectedContent)) {
               console.log(`✅ ${test.description} accessible via HTTP (${test.url})`);
             } else {
-              console.log(`⚠️  ${test.description} accessible but content doesn't match (${test.url})`);
+              const errorMsg = `${test.description} accessible but content doesn't match (${test.url})`;
+              console.log(`❌ ${errorMsg}`);
+              if (test.required) {
+                httpTestFailed = true;
+                httpTestErrors.push(errorMsg);
+              }
             }
           } else {
-            console.log(`❌ ${test.description} returned status ${response.status} (${test.url})`);
+            const errorMsg = `${test.description} returned status ${response.status} (${test.url})`;
+            console.log(`❌ ${errorMsg}`);
+            if (test.required) {
+              httpTestFailed = true;
+              httpTestErrors.push(errorMsg);
+            }
           }
         } catch (error) {
-          console.log(`❌ Failed to fetch ${test.description}: ${error.message}`);
+          const errorMsg = `Failed to fetch ${test.description}: ${error.message}`;
+          console.log(`❌ ${errorMsg}`);
+          if (test.required) {
+            httpTestFailed = true;
+            httpTestErrors.push(errorMsg);
+          }
         }
       }
+
+      if (httpTestFailed) {
+        console.log('\n❌ HTTP static file access test FAILED!');
+        console.log('Errors:');
+        httpTestErrors.forEach(err => console.log(`  - ${err}`));
+        console.log('\n💡 The dev server must be able to serve static files from the staticPath directory.');
+        console.log('💡 Check that the middleware in webpack.config.js is correctly serving files from staticPathFull.');
+        throw new Error('HTTP static file access test failed');
+      } else {
+        console.log('\n✅ All HTTP static file access tests passed!');
+      }
     }
 
   } catch (error) {
-    console.log(`⚠️  Dev server test skipped: ${error.message}`);
+    console.error(`\n❌ Dev server HTTP test failed: ${error.message}`);
+    console.error('This test is required and must pass.');
+    throw error;
   } finally {
     if (devServerProcess) {
       console.log('🛑 Stopping dev server...');
@@ -344,12 +433,17 @@ try {
     }
   }
 
+  // Only print success if we didn't throw an error
   console.log('\n🎉 All tests passed!');
   console.log(`\n📁 Test project location: ${testDir}`);
   console.log('💡 You can inspect the build output in the build/ directory');
 
 } catch (error) {
-  console.error('❌ Build failed:', error.message);
+  console.error('\n❌ Test suite failed:', error.message);
+  if (error.stack) {
+    console.error('\nStack trace:');
+    console.error(error.stack);
+  }
   process.exit(1);
 } finally {
   console.log('\n🧹 Cleaning up...');

package/webpack.config.js

@@ -15,7 +15,9 @@ import {existsSync} from 'fs';
 import {sync as globSync} from 'glob';
 import HtmlWebPackPlugin from 'html-webpack-plugin';
 import isEmpty from 'lodash/isEmpty.js';
+import {createRequire} from 'module';
 import {resolve as pathResolve} from 'path';
+import {fileURLToPath} from 'url';
 import postcssBrowserReporter from 'postcss-browser-reporter';
 import postcssCustomProperties from 'postcss-custom-properties';
 import postcssFlexbugsFixes from 'postcss-flexbugs-fixes';
@@ -40,6 +42,7 @@ const {ProgressPlugin, ProvidePlugin} = webpack;
 const isProduction = process.env.NODE_ENV === 'production';
 const lexConfig = JSON.parse(process.env.LEX_CONFIG) || {};
 const dirName = new URL('.', import.meta.url).pathname;
+const require = createRequire(fileURLToPath(import.meta.url));
 
 const {
   isStatic,
@@ -100,6 +103,48 @@ const plugins = [
           console.log('\x1b[32m[webpack]\x1b[0m Build complete. Watching for changes...');
         }
       });
+      compiler.hooks.normalModuleFactory.tap('ImportMetaTransform', (normalModuleFactory) => {
+        normalModuleFactory.hooks.parser.for('javascript/auto').tap('ImportMetaTransform', (parser) => {
+          parser.hooks.expression.for('import.meta').tap('ImportMetaTransform', (expr) => {
+            const dep = new webpack.dependencies.ConstDependency(
+              '({ url: typeof document !== "undefined" && document.currentScript && document.currentScript.src ? new URL(document.currentScript.src, window.location.href).href : (typeof window !== "undefined" ? new URL("", window.location.href).href : "") })',
+              expr.range
+            );
+            dep.loc = expr.loc;
+            parser.state.module.addPresentationalDependency(dep);
+            return true;
+          });
+          parser.hooks.expression.for('import.meta.url').tap('ImportMetaTransform', (expr) => {
+            const dep = new webpack.dependencies.ConstDependency(
+              '(typeof document !== "undefined" && document.currentScript && document.currentScript.src ? new URL(document.currentScript.src, window.location.href).href : (typeof window !== "undefined" ? new URL("", window.location.href).href : ""))',
+              expr.range
+            );
+            dep.loc = expr.loc;
+            parser.state.module.addPresentationalDependency(dep);
+            return true;
+          });
+        });
+        normalModuleFactory.hooks.parser.for('javascript/esm').tap('ImportMetaTransform', (parser) => {
+          parser.hooks.expression.for('import.meta').tap('ImportMetaTransform', (expr) => {
+            const dep = new webpack.dependencies.ConstDependency(
+              '({ url: typeof document !== "undefined" && document.currentScript && document.currentScript.src ? new URL(document.currentScript.src, window.location.href).href : (typeof window !== "undefined" ? new URL("", window.location.href).href : "") })',
+              expr.range
+            );
+            dep.loc = expr.loc;
+            parser.state.module.addPresentationalDependency(dep);
+            return true;
+          });
+          parser.hooks.expression.for('import.meta.url').tap('ImportMetaTransform', (expr) => {
+            const dep = new webpack.dependencies.ConstDependency(
+              '(typeof document !== "undefined" && document.currentScript && document.currentScript.src ? new URL(document.currentScript.src, window.location.href).href : (typeof window !== "undefined" ? new URL("", window.location.href).href : ""))',
+              expr.range
+            );
+            dep.loc = expr.loc;
+            parser.state.module.addPresentationalDependency(dep);
+            return true;
+          });
+        });
+      });
     }
   }
 ];
@@ -270,6 +315,8 @@ const alias = aliasKeys.reduce((aliases, key) => {
 
 export default (webpackEnv, webpackOptions) => {
   const {bundleAnalyzer, watch, entry: cliEntry, mode: cliMode, port} = webpackOptions;
+  const envPort = process.env.WEBPACK_DEV_PORT ? parseInt(process.env.WEBPACK_DEV_PORT, 10) : null;
+  const finalPort = port || envPort || 3000;
   const entryValue = Array.isArray(cliEntry) ? cliEntry[0] : cliEntry;
 
   // Debug printout for environment and mode
@@ -312,8 +359,42 @@ export default (webpackEnv, webpackOptions) => {
         {
           test: /\.js$/,
           include: /node_modules/,
+          exclude: [
+            /[\\/]websocket\.js$/,
+            /[\\/]websocket.*\.js$/
+          ],
           type: 'javascript/auto'
         },
+        {
+          test: /[\\/]websocket(.*)?\.js$/,
+          include: /node_modules/,
+          use: {
+            loader: swcLoaderPath,
+            options: {
+              jsc: {
+                parser: {
+                  syntax: 'ecmascript',
+                  dynamicImport: true,
+                  importAssertions: true
+                },
+                target: 'es2020',
+                transform: {
+                  legacyDecorator: false,
+                  decoratorMetadata: false
+                }
+              },
+              module: {
+                type: 'es6',
+                strict: false,
+                strictMode: true,
+                lazy: false,
+                noInterop: true
+              },
+              minify: false,
+              sourceMaps: false
+            }
+          }
+        },
         {
           enforce: 'pre',
           exclude: /(node_modules)/,
@@ -328,6 +409,7 @@ export default (webpackEnv, webpackOptions) => {
             `${sourceFullPath}/**/*.test.ts*`
           ],
           include: sourceFullPath,
+          type: 'javascript/esm',
           loader: swcLoaderPath,
           options: {
             ...LexConfig.config.swc,
@@ -335,8 +417,14 @@ export default (webpackEnv, webpackOptions) => {
               ...LexConfig.config.swc?.jsc,
               parser: {
                 ...LexConfig.config.swc?.jsc?.parser,
-                tsx: false
-              }
+                tsx: false,
+                dynamicImport: true
+              },
+              target: LexConfig.config.swc?.jsc?.target || 'es2020'
+            },
+            module: {
+              ...LexConfig.config.swc?.module,
+              type: 'es6'
             }
           },
           resolve: {
@@ -351,6 +439,7 @@ export default (webpackEnv, webpackOptions) => {
             `${sourceFullPath}/**/*.test.ts*`
           ],
           include: sourceFullPath,
+          type: 'javascript/esm',
           loader: swcLoaderPath,
           options: {
             ...LexConfig.config.swc,
@@ -543,7 +632,10 @@ export default (webpackEnv, webpackOptions) => {
       library: libraryName,
       libraryTarget,
       path: outputFullPath,
-      publicPath: '/'
+      publicPath: '/',
+      environment: {
+        module: true
+      }
     },
     plugins,
     recordsPath: relativeFilePath('webpack.records.json', process.cwd()),
@@ -620,7 +712,7 @@ export default (webpackEnv, webpackOptions) => {
               }
             },
             {
-              from: /\\.(css|gif|ico|jpg|json|png|svg)$/,
+              from: /\\.(css|gif|ico|jpg|json|png|svg|txt)$/,
               to: ({parsedUrl: {pathname}}) => pathname
             }
           ],
@@ -628,17 +720,52 @@ export default (webpackEnv, webpackOptions) => {
         },
         hmr: false,
         log: {level: 'trace'},
-        middleware: (app) =>
+        middleware: (app, builtins) => {
+          if(existsSync(staticPathFull)) {
+            if (process.env.LEX_CONFIG_DEBUG) {
+              console.log(`[LEX_DEBUG] Setting up static file serving from: ${staticPathFull}`);
+            }
+
+            const koaStatic = require('koa-static');
+
+            app.use(koaStatic(staticPathFull, {
+              index: false, // Don't auto-serve index files
+              defer: false, // CRITICAL: Don't defer - serve immediately if file exists
+              hidden: false,
+              gzip: true,
+              br: false
+            }));
+
+            if (process.env.LEX_CONFIG_DEBUG) {
+              app.use(async (ctx, next) => {
+                const path = ctx.path || ctx.url || '';
+                if (path && !path.match(/^\/wps/) && !path.match(/^\/webpack/)) {
+                  console.log(`[LEX_DEBUG] Request: ${path}`);
+                }
+                await next();
+                if (ctx.status === 404 && path && path.includes('.')) {
+                  console.log(`[LEX_DEBUG] 404 for: ${path}, body set: ${ctx.body !== undefined}`);
+                }
+              });
+            }
+          } else {
+            if (process.env.LEX_CONFIG_DEBUG) {
+              console.log(`[LEX_DEBUG] Static path does not exist: ${staticPathFull}`);
+            }
+          }
+
           app.use(async (ctx, next) => {
-            if(ctx.path.match(/^\/wps/)) {
+            const path = ctx.path || ctx.url || (ctx.request && ctx.request.path) || '';
+            if(path && path.match(/^\/wps/)) {
               const {accept, Accept, ...remainingHeaders} =
                 ctx.request.header;
               ctx.request.header = remainingHeaders;
             }
             await next();
-          }),
+          });
+        },
         open: process.env.WEBPACK_DEV_OPEN === 'true',
-        port: port || 3000,
+        port: finalPort,
         progress: 'minimal',
         static: existsSync(outputFullPath) ? [outputFullPath] : [],
         status: true