chore: add ssr e2e tests (#1201)

Co-authored-by: brightwwu <[email protected]>

.changeset/tidy-swans-love.md

@@ -0,0 +1,5 @@
+---
+'@farmfe/core': patch
+---
+
+Fix loadConfig error message

crates/plugin_runtime/src/render_resource_pot/mod.rs

@@ -59,8 +59,8 @@ mod source_replacer;
 /// ```js
 /// {
 ///   // commonjs or hybrid module system
-///   "a.js": async function(module, exports, require) {
-///       const b = await require('./b');
+///   "a.js": function(module, exports, require) {
+///       const b = require('./b');
 ///       console.log(b);
 ///    },
 ///    // esm module system

e2e/default.spec.ts

@@ -3,17 +3,13 @@ import { existsSync, readdirSync, statSync } from 'fs';
 import { join } from 'path';
 import { startProjectAndTest } from './vitestSetup.js';
 import { logger } from './utils.js';
+// import { ssrExamples } from './test-utils.js';
 
-const excludeExamples: string[] = [
-  // TODO: add e2e test for ssr
-  'react-ssr',
-  'vue-ssr',
-  'solid-ssr'
-];
+const excludeExamples: string[] = [];
 
 test('Default E2E Tests', async () => {
   const examples = readdirSync('./examples');
-  // const examples = ['x-data-spreadsheet'];
+  // const examples = ['react-ssr', 'solid-ssr', 'vue-ssr'];
   logger(`Running E2E tests for ${examples.length} examples`);
 
   for (const example of examples) {

e2e/test-utils.ts

@@ -1,6 +1,3 @@
+export * from './vitestSetup.js';
 
-export * from './vitestSetup'
-
-
-
-
+export const ssrExamples = ['react-ssr', 'vue-ssr', 'solid-ssr'];

e2e/vitestSetup.ts

@@ -121,15 +121,15 @@ export const startProjectAndTest = async (
   cb: (page: Page) => Promise<void>,
   command = 'start'
 ) => {
-  // using bin path to spawn child process to avoid port conflicts issue
-  const cliBinPath = getFarmCLIBinPath(examplePath);
+  // // using bin path to spawn child process to avoid port conflicts issue
+  // const cliBinPath = getFarmCLIBinPath(examplePath);
 
-  if (!cliBinPath) {
-    throw new Error(`example ${examplePath} does not install @farmfe/cli`);
-  }
+  // if (!cliBinPath) {
+  //   throw new Error(`example ${examplePath} does not install @farmfe/cli`);
+  // }
   const port = getServerPort();
-  logger(`Executing node ${cliBinPath} ${command} in ${examplePath}`);
-  const child = execa('node', [cliBinPath, command], {
+  logger(`Executing npm run ${command} in ${examplePath}`);
+  const child = execa('npm', ['run', command], {
     cwd: examplePath,
     stdin: 'pipe',
     encoding: 'utf8',

examples/css-modules/package.json

@@ -21,6 +21,7 @@
   },
   "scripts": {
     "start": "farm start",
-    "build": "farm build"
+    "build": "farm build",
+    "preview": "farm preview"
   }
 }

examples/less/package.json

@@ -20,6 +20,7 @@
   },
   "scripts": {
     "start": "farm start",
-    "build": "farm build"
+    "build": "farm build",
+    "preview": "farm preview"
   }
 }

examples/qrcode/package.json

@@ -4,8 +4,9 @@
   "private": true,
   "scripts": {
     "dev": "farm start",
+    "start": "farm start",
     "build": "farm build",
-    "preview": "farm build"
+    "preview": "farm preview"
   },
   "devDependencies": {
     "@farmfe/cli": "workspace:^",
@@ -14,4 +15,4 @@
   "dependencies": {
     "qrcode": "^1.5.3"
   }
-}
+}

examples/react-sass-js/package.json

@@ -20,6 +20,7 @@
   },
   "scripts": {
     "start": "farm start",
-    "build": "farm build"
+    "build": "farm build",
+    "preview": "farm preview"
   }
 }

examples/react-ssr/farm.config.mjs

@@ -1,3 +1,5 @@
+import path from 'path';
+
 /**
  * @type {import('@farmfe/core').UserConfig}
  */
@@ -35,10 +37,13 @@ export default {
               .getCompiler()
               .resource('index_client.html')
               .toString();
-            console.log('html template', template);
-            const render = await import('./dist/index.js').then(
-              (m) => m.default
+            // console.log('html template', template);
+            console.log(
+              path.join(path.dirname(import.meta.url), 'dist', 'index.js')
             );
+            const render = await import(
+              path.join(path.dirname(import.meta.url), 'dist', 'index.js')
+            ).then((m) => m.default);
             const renderedHtml = render(ctx.path);
             // console.log(renderedHtml);
             const html = template.replace(

examples/react-ssr/package.json

@@ -24,6 +24,6 @@
     "watch": "farm watch --config farm.config.server.mjs",
     "build": "pnpm build:server && farm build",
     "build:server": "farm build --config farm.config.server.mjs",
-    "preview": "farm preview"
+    "preview": "node server.js"
   }
 }

examples/react-ssr/server.js

@@ -19,15 +19,13 @@ async function createServer() {
       let render;
 
       template = await fsp.readFile(resolve('build/index_client.html'), 'utf8');
-      render = require(resolve('dist/index.js'));
+      const serverEntry = resolve('dist/index.js');
+      render = require(serverEntry);
 
       const renderedHtml = render(url);
       console.log(renderedHtml);
 
-      let html = template.replace(
-        '{app-html-to-replace}',
-        renderedHtml
-      );
+      let html = template.replace('{app-html-to-replace}', renderedHtml);
       console.log(template.includes('{app-html-to-replace}'));
       console.log(html.includes('{app-html-to-replace}'));
 
@@ -43,7 +41,8 @@ async function createServer() {
 }
 
 createServer().then((app) => {
-  app.listen(3000, () => {
-    console.log('HTTP server is running at http://localhost:3000');
+  const port = process.env.FARM_DEFAULT_SERVER_PORT || 3000;
+  app.listen(port, () => {
+    console.log('HTTP server is running at http://localhost:' + port);
   });
 });

examples/sass-plugin-rust/package.json

@@ -20,6 +20,7 @@
   },
   "scripts": {
     "start": "farm start",
-    "build": "farm build"
+    "build": "farm build",
+    "preview": "farm preview"
   }
-}
+}

examples/sass/package.json

@@ -20,6 +20,7 @@
   },
   "scripts": {
     "start": "farm start",
-    "build": "farm build"
+    "build": "farm build",
+    "preview": "farm preview"
   }
 }

examples/solid-ssr/farm.config.mjs

@@ -1,5 +1,7 @@
 import solid from 'vite-plugin-solid';
 import { generateHydrationScript } from 'solid-js/web';
+import path from 'path';
+import { pathToFileURL } from 'url';
 
 /**
  * @type {import('@farmfe/core').UserConfig}
@@ -14,13 +16,11 @@ export default {
     },
     // sourcemap: true,
     css: {
-      // modules: {
-      //   indentName: 'farm-[name]-[hash]'
-      // },
       prefixer: {
         targets: ['last 2 versions', 'Firefox ESR', '> 1%', 'ie >= 11']
       }
     },
+    // minify: false,
     persistentCache: false
     // treeShaking: true,
     // minify: true,babcl
@@ -39,14 +39,18 @@ export default {
               .getCompiler()
               .resource('client.html')
               .toString();
-            const render = await import('./dist/index.js').then(
-              (m) => m.default
-            );
+            const curDir =
+              process.platform === 'win32'
+                ? pathToFileURL(__dirname)
+                : __dirname;
+            const render = await import(
+              path.join(curDir.toString(), 'dist', 'index.js')
+            ).then((m) => m.default);
             const renderedHtml = render(ctx.path);
 
             const html = template
               .replace('<div>app-html-to-replace</div>', renderedHtml)
-              .replace('</head>', generateHydrationScript());
+              .replace('<meta hydration />', generateHydrationScript());
             console.log(renderedHtml);
             ctx.body = html;
             ctx.type = 'text/html';

examples/solid-ssr/index.html

@@ -5,6 +5,7 @@
     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>Document</title>
+    <meta hydration />
   </head>
   <body>
     <div id="root"><div>app-html-to-replace</div></div>

examples/solid-ssr/package.json

@@ -22,6 +22,6 @@
     "watch": "farm watch --config farm.config.server.mjs",
     "build": "pnpm build:server && farm build",
     "build:server": "farm build --config farm.config.server.mjs",
-    "preview": "farm preview"
+    "preview": "node server.js"
   }
 }

examples/solid-ssr/server.js

@@ -2,6 +2,7 @@ import path from 'path';
 import fsp from 'fs/promises';
 import express from 'express';
 import { generateHydrationScript } from 'solid-js/web';
+import { pathToFileURL } from 'url';
 
 function resolve(p) {
   return path.resolve(p);
@@ -17,15 +18,20 @@ async function createServer() {
 
     try {
       let template = await fsp.readFile(resolve('build/client.html'), 'utf8');
-      let render = (await import(resolve('dist/index.js'))).default;
+      const serverEntry = resolve('dist/index.js');
+      let render = (
+        await import(
+          process.platform === 'win32'
+            ? pathToFileURL(serverEntry)
+            : serverEntry
+        )
+      ).default;
 
       const renderedHtml = render(url);
 
       let html = template
         .replace('<div>app-html-to-replace</div>', renderedHtml)
-        .replace('</head>', generateHydrationScript());
-      console.log(template.includes('<div>app-html-to-replace</div>'));
-      console.log(html.includes('<div>app-html-to-replace</div>'));
+        .replace('<meta hydration>', generateHydrationScript());
 
       res.setHeader('Content-Type', 'text/html');
       return res.status(200).end(html);
@@ -39,7 +45,8 @@ async function createServer() {
 }
 
 createServer().then((app) => {
-  app.listen(3000, () => {
-    console.log('HTTP server is running at http://localhost:3000');
+  const port = process.env.FARM_DEFAULT_SERVER_PORT || 3000;
+  app.listen(port, () => {
+    console.log('HTTP server is running at http://localhost:' + port);
   });
 });

examples/tailwind/package.json

@@ -22,6 +22,7 @@
   },
   "scripts": {
     "start": "farm start",
-    "build": "farm build"
+    "build": "farm build",
+    "preview": "farm preview"
   }
 }

examples/vue-jsx/package.json

@@ -13,6 +13,7 @@
   },
   "scripts": {
     "start": "farm start",
-    "build": "farm build"
+    "build": "farm build",
+    "preview": "farm preview"
   }
 }