@nlabs/lex 1.51.5 → 1.51.7

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;
+          });
+        });
+      });
     }
   }
 ];
@@ -155,26 +200,31 @@ const fontPath = `${sourceFullPath}/fonts/`;
 const docPath = `${sourceFullPath}/docs/`;
 
 const staticPathFull = pathResolve(process.cwd(), webpackStaticPath);
+
 if(existsSync(staticPathFull)) {
   staticPaths.push({
     from: staticPathFull,
+    globOptions: {
+      ignore: ['**/.DS_Store']
+    },
+    noErrorOnMissing: true,
     to: './'
   });
   watchIgnorePaths.push(staticPathFull);
 }
 
 if(existsSync(imagePath)) {
-  staticPaths.push({from: imagePath, to: './images/'});
+  staticPaths.push({from: imagePath, noErrorOnMissing: true, to: './images/'});
   watchIgnorePaths.push(imagePath);
 }
 
 if(existsSync(fontPath)) {
-  staticPaths.push({from: fontPath, to: './fonts/'});
+  staticPaths.push({from: fontPath, noErrorOnMissing: true, to: './fonts/'});
   watchIgnorePaths.push(fontPath);
 }
 
 if(existsSync(docPath)) {
-  staticPaths.push({from: docPath, to: './docs/'});
+  staticPaths.push({from: docPath, noErrorOnMissing: true, to: './docs/'});
 }
 
 if(staticPaths.length) {
@@ -307,8 +357,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)/,
@@ -323,6 +407,7 @@ export default (webpackEnv, webpackOptions) => {
             `${sourceFullPath}/**/*.test.ts*`
           ],
           include: sourceFullPath,
+          type: 'javascript/esm',
           loader: swcLoaderPath,
           options: {
             ...LexConfig.config.swc,
@@ -330,8 +415,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: {
@@ -346,6 +437,7 @@ export default (webpackEnv, webpackOptions) => {
             `${sourceFullPath}/**/*.test.ts*`
           ],
           include: sourceFullPath,
+          type: 'javascript/esm',
           loader: swcLoaderPath,
           options: {
             ...LexConfig.config.swc,
@@ -538,7 +630,10 @@ export default (webpackEnv, webpackOptions) => {
       library: libraryName,
       libraryTarget,
       path: outputFullPath,
-      publicPath: '/'
+      publicPath: '/',
+      environment: {
+        module: true
+      }
     },
     plugins,
     recordsPath: relativeFilePath('webpack.records.json', process.cwd()),
@@ -615,7 +710,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
             }
           ],
@@ -623,15 +718,50 @@ 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,
         progress: 'minimal',