New vite based application runtime

.circleci/config.yml

@@ -135,6 +135,7 @@ jobs:
       - image: mcr.microsoft.com/playwright:v1.32.3-focal
         environment:
           NODE_ENV: test
+          TOOLPAD_TEST_RETRIES: 1
       - image: kennethreitz/httpbin:latest
 
     steps:
@@ -154,9 +155,12 @@ jobs:
       - run:
           name: Tests real browser
           environment:
-            - LOCAL_MODE_TESTS: '1'
-            - HTTPBIN_BASEURL: 'http://localhost/'
+            HTTPBIN_BASEURL: 'http://localhost/'
+            TOOLPAD_VITE_RUNTIME: 1
           command: yarn test:integration
+      - store_artifacts:
+          path: test-results
+          destination: playwright-test-results
 
 workflows:
   pipeline:

.eslintrc.js

@@ -79,6 +79,7 @@ module.exports = {
       extends: ['plugin:@next/next/recommended'],
       rules: {
         '@next/next/no-html-link-for-pages': ['error', 'packages/toolpad-app/pages/'],
+        '@next/next/no-img-element': 'off',
       },
     },
     {

package.json

@@ -36,7 +36,7 @@
     "release:publish-canary": "lerna publish from-package  --force-publish --no-git-tag-version --no-push --no-git-reset --pre-dist-tag canary",
     "release:changelog": "dotenv -- node ./scripts/releaseChangelog.mjs --repo mui-toolpad",
     "test:build": "lerna run build --scope @mui/toolpad-core --scope @mui/toolpad-components --stream",
-    "test:integration": "playwright test --config ./test/integration/playwright.config.ts",
+    "test:integration": "rm -rf ./node_modules/.vite && playwright test --config ./test/integration/playwright.config.ts",
     "test": "jest",
     "check-types": "lerna run check-types",
     "toolpad": "toolpad"
@@ -48,9 +48,11 @@
     "@swc/helpers": "^0.5.0",
     "@testing-library/jest-dom": "^5.16.5",
     "@testing-library/react": "^14.0.0",
+    "@types/archiver": "^5.3.2",
     "@types/gtag.js": "^0.0.12",
     "@types/jest": "^29.5.0",
     "@types/node": "^18.15.11",
+    "@types/react-inspector": "^4.0.2",
     "@types/rimraf": "^3.0.2",
     "@typescript-eslint/eslint-plugin": "^5.58.0",
     "@typescript-eslint/parser": "^5.58.0",
@@ -77,12 +79,15 @@
     "markdownlint-cli2": "^0.6.0",
     "prettier": "^2.8.7",
     "pretty-quick": "^3.1.3",
+    "react-inspector": "^5.1.1",
+    "recharts": "^2.5.0",
     "regenerator-runtime": "^0.13.11",
     "rimraf": "^5.0.0",
     "typescript": "^5.0.4",
     "yarn-deduplicate": "^6.0.1"
   },
   "dependencies": {
+    "archiver": "^5.3.1",
     "cross-env": "^7.0.3",
     "dotenv-cli": "^7.2.1",
     "inquirer": "^9.1.5",

packages/toolpad-app/cli/appBuilder.ts

@@ -0,0 +1,19 @@
+import invariant from 'invariant';
+import { buildApp } from '../src/server/toolpadAppBuilder';
+
+async function main() {
+  invariant(
+    process.env.NODE_ENV === 'production',
+    'The app builder must be run with NODE_ENV=production',
+  );
+  invariant(!!process.env.TOOLPAD_PROJECT_DIR, 'A project root must be defined');
+
+  const projectDir = process.env.TOOLPAD_PROJECT_DIR;
+
+  await buildApp({ root: projectDir, base: '/prod' });
+}
+
+main().catch((err) => {
+  console.error(err);
+  process.exit(1);
+});

packages/toolpad-app/cli/appServer.ts

@@ -0,0 +1,101 @@
+import invariant from 'invariant';
+import { createServer, Plugin } from 'vite';
+import {
+  getHtmlContent,
+  postProcessHtml,
+  createViteConfig,
+  resolvedComponentsId,
+} from '../src/server/toolpadAppBuilder';
+import config from '../src/config';
+import { loadDomFromDisk } from '../src/server/localMode';
+
+function devServerPlugin(): Plugin {
+  return {
+    name: 'toolpad-dev-server',
+
+    async configureServer(viteServer) {
+      return () => {
+        viteServer.middlewares.use('/', async (req, res, next) => {
+          invariant(req.url, 'request must have a url');
+          const url = new URL(req.url, 'http://x');
+          const canvas = url.searchParams.get('toolpad-display') === 'canvas';
+
+          try {
+            const dom = await loadDomFromDisk();
+
+            const template = getHtmlContent({ canvas });
+
+            let html = await viteServer.transformIndexHtml(req.url, template);
+
+            html = postProcessHtml(html, { config, dom });
+
+            res.setHeader('content-type', 'text/html').end(html);
+          } catch (e) {
+            next(e);
+          }
+        });
+      };
+    },
+  };
+}
+
+export interface ToolpadAppDevServerParams {
+  root: string;
+  base: string;
+}
+
+export async function createDevServer({ root, base }: ToolpadAppDevServerParams) {
+  const devServer = await createServer(
+    createViteConfig({
+      dev: true,
+      root,
+      base,
+      plugins: [devServerPlugin()],
+    }),
+  );
+
+  return devServer;
+}
+
+export type Command = {
+  kind: 'reload-components';
+};
+
+export type Event = {
+  kind: 'ready';
+};
+
+async function main() {
+  invariant(
+    process.env.NODE_ENV === 'development',
+    'The dev server must be run with NODE_ENV=development',
+  );
+  invariant(!!process.env.TOOLPAD_PROJECT_DIR, 'A project root must be defined');
+  invariant(!!process.env.TOOLPAD_PORT, 'A port must be defined');
+  invariant(process.send, 'Process must be spawned with an IPC channel');
+
+  const app = await createDevServer({
+    root: process.env.TOOLPAD_PROJECT_DIR,
+    base: '/preview',
+  });
+
+  await app.listen(Number(process.env.TOOLPAD_PORT));
+
+  process.on('message', (msg: Command) => {
+    if (msg.kind === 'reload-components') {
+      const mod = app.moduleGraph.getModuleById(resolvedComponentsId);
+      if (mod) {
+        app.reloadModule(mod);
+      }
+    }
+  });
+
+  process.send({});
+
+  process.send({ kind: 'ready' } satisfies Event);
+}
+
+main().catch((err) => {
+  console.error(err);
+  process.exit(1);
+});

packages/toolpad-app/cli/index.ts

@@ -37,9 +37,10 @@ interface RunOptions {
   dir: string;
   port?: number;
   dev?: boolean;
+  viteRuntime: boolean;
 }
 
-async function runApp(cmd: Command, { port, dev = false, dir }: RunOptions) {
+async function runApp(cmd: Command, { port, dev = false, dir, viteRuntime }: RunOptions) {
   const projectDir = path.resolve(process.cwd(), dir);
   const { execaNode } = await import('execa');
   const { default: chalk } = await import('chalk');
@@ -63,7 +64,9 @@ async function runApp(cmd: Command, { port, dev = false, dir }: RunOptions) {
     cwd: projectDir,
     stdio: 'pipe',
     env: {
-      NODE_ENV: dev ? 'development' : 'production',
+      NODE_ENV: process.env.NODE_ENV,
+      TOOLPAD_NEXT_DEV: dev ? '1' : '',
+      TOOLPAD_VITE_RUNTIME: viteRuntime ? '1' : '',
       TOOLPAD_DIR: toolpadDir,
       TOOLPAD_PROJECT_DIR: projectDir,
       TOOLPAD_PORT: String(port),
@@ -73,10 +76,11 @@ async function runApp(cmd: Command, { port, dev = false, dir }: RunOptions) {
   });
 
   invariant(cp.stdout, 'child process must be started with "stdio: \'pipe\'"');
+  invariant(cp.stderr, 'child process must be started with "stdio: \'pipe\'"');
 
   process.stdin.pipe(cp.stdin!);
-  cp.stdout?.pipe(process.stdout);
-  cp.stderr?.pipe(process.stderr);
+  cp.stdout.pipe(process.stdout);
+  cp.stderr.pipe(process.stderr);
 
   if (cmd === 'dev') {
     // Poll stdout for "http://localhost:3000" first
@@ -108,19 +112,31 @@ async function devCommand(args: RunOptions) {
 
 interface BuildOptions {
   dir: string;
+  viteRuntime: boolean;
 }
 
-async function buildCommand({ dir }: BuildOptions) {
+async function buildCommand({ dir, viteRuntime }: BuildOptions) {
   const projectDir = path.resolve(process.cwd(), dir);
   const { default: chalk } = await import('chalk');
   // eslint-disable-next-line no-console
-  console.log(
-    `${chalk.blue('info')}  - building Toolpad application at ${chalk.cyan(projectDir)}...`,
-  );
+  console.log(`${chalk.blue('info')}  - building Toolpad application...`);
+
+  if (viteRuntime) {
+    const { execaNode } = await import('execa');
+
+    const builderPath = path.resolve(__dirname, './appBuilder.js');
+
+    await execaNode(builderPath, [], {
+      cwd: projectDir,
+      stdio: 'inherit',
+      env: {
+        NODE_ENV: 'production',
+        TOOLPAD_PROJECT_DIR: projectDir,
+        FORCE_COLOR: '1',
+      },
+    });
+  }
 
-  await new Promise((resolve) => {
-    setTimeout(resolve, 1000);
-  });
   // eslint-disable-next-line no-console
   console.log(`${chalk.green('success')} - build done.`);
 }
@@ -139,6 +155,11 @@ export default async function cli(argv: string[]) {
       describe: 'Directory of the Toolpad application',
       default: '.',
     },
+    viteRuntime: {
+      type: 'boolean',
+      describe: 'Use the new experimental vite runtime',
+      default: false,
+    },
   } as const;
 
   const sharedRunOptions = {