Try replacing tsc with tsup as build tool

.eslintignore

@@ -7,4 +7,4 @@
 
 /examples/*/toolpad.yml
 
-/test/integration/**/toolpad.yml
+/test/integration/**/toolpad.yml

package.json

@@ -87,6 +87,7 @@
     "dotenv-cli": "^7.1.0",
     "inquirer": "^9.1.5",
     "semver": "^7.3.8",
+    "tsup": "^6.7.0",
     "yargs": "^17.7.1"
   },
   "engines": {

packages/create-toolpad-app/package.json

@@ -22,8 +22,9 @@
   ],
   "scripts": {
     "prebuild": "rimraf ./dist",
-    "build": "tsc -p ./tsconfig.json",
-    "dev": "tsc -p ./tsconfig.json --watch"
+    "build": "tsup",
+    "dev": "tsup --watch",
+    "check-types": "tsc --noEmit"
   },
   "engines": {
     "node": ">=16.17"

packages/create-toolpad-app/tsconfig.json

@@ -1,6 +1,6 @@
 {
   "compilerOptions": {
-    "target": "es5",
+    "target": "es2020",
     "module": "commonjs",
     "moduleResolution": "node16",
     "isolatedModules": true,

packages/create-toolpad-app/tsup.config.ts

@@ -0,0 +1,11 @@
+import { defineConfig } from 'tsup';
+
+export default defineConfig({
+  entry: ['./src/index.ts'],
+  silent: true,
+  noExternal: ['chalk', 'execa'],
+  async onSuccess() {
+    // eslint-disable-next-line no-console
+    console.log('cli: build successful');
+  },
+});

packages/toolpad-app/jest.config.ts

@@ -1,7 +1,9 @@
 import type { Config } from '@jest/types';
 import nextJest from 'next/jest';
 
-const createJestConfig = nextJest();
+const createJestConfig = nextJest({
+  dir: __dirname,
+});
 
 async function jestConfig(): Promise<Config.InitialOptions> {
   const baseConfig: Config.InitialOptions = {
@@ -10,8 +12,8 @@ async function jestConfig(): Promise<Config.InitialOptions> {
   const nextJestConfig: Config.InitialOptions = await createJestConfig(baseConfig)();
 
   // Workaround, see https://github.com/vercel/next.js/issues/35634#issuecomment-1115250297
-  nextJestConfig.transformIgnorePatterns = nextJestConfig.transformIgnorePatterns ?? [];
-  nextJestConfig.transformIgnorePatterns[0] = '/node_modules/(?!lodash-es)/';
+  nextJestConfig.transformIgnorePatterns ??= [];
+  nextJestConfig.transformIgnorePatterns[0] = '/node_modules/(?!(lodash-es))/';
 
   return nextJestConfig;
 }

packages/toolpad-app/package.json

@@ -9,12 +9,10 @@
     "cli": "./cli.js",
     "lint": "next lint && prettier --check .",
     "fix": "next lint --fix && prettier --write .",
-    "build:cli": "tsc -p tsconfig.cli.json",
+    "build:cli": "tsup",
     "build:next": "NODE_OPTIONS=--max-old-space-size=8192 next build",
-    "build:react-devtools": "rimraf ./public/reactDevtools && esbuild ./reactDevtools/bootstrap.ts --target=es6 --bundle --format=iife --outdir=./public/reactDevtools",
     "build:typings": "ts-node --esm ./scripts/typings.mts",
-    "dev:cli": "yarn build:cli --watch",
-    "dev:react-devtools": "yarn build:react-devtools --watch",
+    "dev:cli": "tsup --watch",
     "dev:typings": "yarn build:typings",
     "waitForApp": "ts-node --esm ./scripts/waitForApp.mts",
     "check-types": "tsc --noEmit"

packages/toolpad-app/pages/_document.tsx

@@ -74,7 +74,7 @@ export default class MyDocument extends Document<ToolpadDocumentProps> {
                 // Add the data-toolpad-canvas attribute to the canvas iframe element
                 if (window.frameElement?.dataset.toolpadCanvas){
                   var script = document.createElement('script');
-                  script.src = '/reactDevtools/bootstrap.js';
+                  script.src = '/reactDevtools/bootstrap.global.js';
                   document.write(script.outerHTML);
                 }
               `,

packages/toolpad-app/pages/api/runtime/[[...path]].ts

@@ -63,7 +63,7 @@ const routes = new Map<RegExp, NextApiHandler<string>>([
               // Add the data-toolpad-canvas attribute to the canvas iframe element
               if (window.frameElement?.dataset.toolpadCanvas){
                 var script = document.createElement('script');
-                script.src = '/reactDevtools/bootstrap.js';
+                script.src = '/reactDevtools/bootstrap.global.js';
                 document.write(script.outerHTML);
               }
 

packages/toolpad-app/tsconfig.json

@@ -2,16 +2,16 @@
   "compilerOptions": {
     "paths": {
       // TODO: remove when typescript module resolution supports package exports. (v5.0 with moduleResolution: 'bundler')
-      "@mui/toolpad-core": ["../toolpad-core/dist/esm"],
-      "@mui/toolpad-core/runtime": ["../toolpad-core/dist/esm/runtime"],
-      "@mui/toolpad-core/jsRuntime": ["../toolpad-core/dist/esm/jsRuntime"],
-      "@mui/toolpad-core/jsBrowserRuntime": ["../toolpad-core/dist/esm/jsBrowserRuntime"],
-      "@mui/toolpad-core/jsServerRuntime": ["../toolpad-core/dist/esm/jsServerRuntime"],
-      "@mui/toolpad-core/objectKey": ["../toolpad-core/dist/esm/objectKey"],
-      "@mui/toolpad-core/utils/*": ["../toolpad-core/dist/esm/utils/*"]
+      "@mui/toolpad-core": ["../toolpad-core/dist"],
+      "@mui/toolpad-core/runtime": ["../toolpad-core/dist/runtime"],
+      "@mui/toolpad-core/jsRuntime": ["../toolpad-core/dist/jsRuntime"],
+      "@mui/toolpad-core/jsBrowserRuntime": ["../toolpad-core/dist/jsBrowserRuntime"],
+      "@mui/toolpad-core/jsServerRuntime": ["../toolpad-core/dist/jsServerRuntime"],
+      "@mui/toolpad-core/objectKey": ["../toolpad-core/dist/objectKey"],
+      "@mui/toolpad-core/utils/*": ["../toolpad-core/dist/utils/*"]
     },
-    "target": "es5",
-    "lib": ["dom", "dom.iterable", "es2022"],
+    "target": "esnext",
+    "lib": ["dom", "dom.iterable", "esnext"],
     "allowJs": true,
     "checkJs": true,
     "skipLibCheck": true,

packages/toolpad-app/tsup.config.ts

@@ -0,0 +1,29 @@
+import { defineConfig } from 'tsup';
+
+export default defineConfig([
+  {
+    entry: {
+      'cli/index': './cli/index.ts',
+      'cli/server': './cli/server.ts',
+    },
+    silent: true,
+    noExternal: ['open-editor', 'execa', 'fractional-indexing'],
+    async onSuccess() {
+      // eslint-disable-next-line no-console
+      console.log('cli: build successful');
+    },
+  },
+  {
+    entry: ['./reactDevtools/bootstrap.ts'],
+    silent: true,
+    outDir: './public/reactDevtools',
+    bundle: true,
+    target: 'es6',
+    format: 'iife',
+    replaceNodeEnv: true,
+    async onSuccess() {
+      // eslint-disable-next-line no-console
+      console.log('reactDevtools: build successful');
+    },
+  },
+]);

packages/toolpad-components/package.json

@@ -5,12 +5,22 @@
   "author": "MUI Toolpad team",
   "homepage": "https://github.com/mui/mui-toolpad#readme",
   "license": "MIT",
-  "main": "dist/index.js",
-  "types": "dist/index.d.ts",
+  "main": "./dist/index.cjs",
+  "module": "./dist/index.js",
+  "types": "./dist/index.d.ts",
   "type": "module",
   "exports": {
-    ".": "./dist/index.js",
-    "./package.json": "./package.json"
+    "./package.json": "./package.json",
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js",
+      "require": "./dist/index.cjs"
+    },
+    "./*": {
+      "types": "./dist/*.d.ts",
+      "import": "./dist/*.js",
+      "require": "./dist/*.cjs"
+    }
   },
   "files": [
     "dist"
@@ -21,21 +31,23 @@
   },
   "scripts": {
     "prebuild": "rimraf dist",
-    "build": "tsc",
-    "dev": "tsc --watch",
+    "build": "tsup",
+    "dev": "tsup --watch",
     "test": "echo \"Error: run tests from root\" && exit 1",
     "check-types": "tsc"
   },
   "bugs": {
     "url": "https://github.com/mui/mui-toolpad/issues"
   },
   "dependencies": {
+    "@mui/lab": "^5.0.0-alpha.121",
     "@mui/material": "^5.11.16",
     "@mui/toolpad-core": "^0.1.2",
     "@mui/x-data-grid-pro": "^6.0.4",
     "@mui/x-date-pickers": "^6.0.4",
     "dayjs": "^1.11.7",
-    "markdown-to-jsx": "^7.2.0"
+    "markdown-to-jsx": "^7.2.0",
+    "react-error-boundary": "^3.1.4"
   },
   "devDependencies": {
     "react": "^18.2.0"

packages/toolpad-components/src/DatePicker.tsx

@@ -6,12 +6,17 @@ import { createComponent } from '@mui/toolpad-core';
 import dayjs from 'dayjs';
 import { SX_PROP_HELPER_TEXT } from './constants.js';
 
-const LOCALE_LOADERS = new Map([
-  ['en', () => import('dayjs/locale/en')],
-  ['nl', () => import('dayjs/locale/nl')],
-  ['fr', () => import('dayjs/locale/fr')],
-  // TODO...
-]);
+const LOCALE_LOADERS = new Map(
+  // jest is choking on this dynamic import
+  process.env.NODE_ENV === 'test'
+    ? []
+    : [
+        ['en', () => import('dayjs/locale/en')],
+        ['nl', () => import('dayjs/locale/nl')],
+        ['fr', () => import('dayjs/locale/fr')],
+        // TODO...
+      ],
+);
 
 interface LoadableLocale {
   locale: string;

packages/toolpad-components/tsup.config.ts

@@ -0,0 +1,14 @@
+import { spawnSync } from 'child_process';
+import { defineConfig } from 'tsup';
+
+export default defineConfig({
+  entry: ['src/*.ts', 'src/*.tsx'],
+  format: ['esm', 'cjs'],
+  dts: false,
+  silent: true,
+  async onSuccess() {
+    // eslint-disable-next-line no-console
+    console.log('build successful');
+    spawnSync('tsc', ['--emitDeclarationOnly', '--declaration']);
+  },
+});

packages/toolpad-core/browser/package.json

@@ -1,5 +1,5 @@
 {
-  "main": "../dist/cjs/browser.js",
-  "types": "../dist/cjs/browser.d.ts",
+  "main": "../dist/browser.cjs",
+  "types": "../dist/browser.d.ts",
   "type": "commonjs"
 }

packages/toolpad-core/package.json

@@ -5,26 +5,26 @@
   "author": "MUI Toolpad team",
   "homepage": "https://github.com/mui/mui-toolpad#readme",
   "license": "MIT",
-  "main": "dist/cjs/index.js",
-  "module": "dist/esm/index.js",
-  "types": "dist/esm/index.d.ts",
+  "main": "./dist/index.cjs",
+  "module": "./dist/index.js",
+  "types": "./dist/index.d.ts",
   "type": "module",
   "exports": {
     "./package.json": "./package.json",
     ".": {
-      "types": "./dist/esm/index.d.ts",
-      "import": "./dist/esm/index.js",
-      "require": "./dist/cjs/index.js"
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js",
+      "require": "./dist/index.cjs"
     },
     "./*": {
-      "types": "./dist/esm/*.d.ts",
-      "import": "./dist/esm/*.js",
-      "require": "./dist/cjs/*.js"
+      "types": "./dist/*.d.ts",
+      "import": "./dist/*.js",
+      "require": "./dist/*.cjs"
     },
     "./utils/*": {
-      "types": "./dist/esm/utils/*.d.ts",
-      "import": "./dist/esm/utils/*.js",
-      "require": "./dist/cjs/utils/*.js"
+      "types": "./dist/utils/*.d.ts",
+      "import": "./dist/utils/*.js",
+      "require": "./dist/utils/*.cjs"
     }
   },
   "files": [
@@ -38,13 +38,8 @@
   },
   "scripts": {
     "prebuild": "rimraf dist",
-    "cjsify": "mkdir -p ./dist/cjs && echo \"{ \\\"type\\\":\\\"commonjs\\\" }\" > ./dist/cjs/package.json",
-    "build": "concurrently \"yarn:build:*\" && yarn cjsify",
-    "build:esm": "tsc --outDir dist/esm --module esnext",
-    "build:cjs": "tsc --outDir dist/cjs --module commonjs",
-    "dev": "concurrently \"yarn:dev:*\" yarn:cjsify",
-    "dev:esm": "yarn build:esm --watch",
-    "dev:cjs": "yarn build:cjs --watch",
+    "build": "tsup",
+    "dev": "tsup --watch",
     "test": "echo \"Error: run tests from root\" && exit 1",
     "check-types": "yarn build"
   },

packages/toolpad-core/server/package.json

@@ -1,5 +1,5 @@
 {
-  "main": "../dist/cjs/server.js",
-  "types": "../dist/cjs/server.d.ts",
+  "main": "../dist/server.cjs",
+  "types": "../dist/server.d.ts",
   "type": "commonjs"
 }

packages/toolpad-core/tsconfig.json

@@ -12,5 +12,5 @@
     "pretty": true,
     "preserveWatchOutput": true
   },
-  "include": ["**/*.ts", "**/*.tsx"]
+  "include": ["src/**/*.ts", "src/**/*.tsx"]
 }

packages/toolpad-core/tsup.config.ts

@@ -0,0 +1,14 @@
+import { spawnSync } from 'child_process';
+import { defineConfig } from 'tsup';
+
+export default defineConfig({
+  entry: ['src/*.ts', 'src/*.tsx', 'src/utils/*.ts', 'src/utils/*.tsx'],
+  format: ['esm', 'cjs'],
+  dts: false,
+  silent: true,
+  async onSuccess() {
+    // eslint-disable-next-line no-console
+    console.log('build successful');
+    spawnSync('tsc', ['--emitDeclarationOnly', '--declaration']);
+  },
+});

packages/toolpad/browser/package.json

@@ -1,5 +1,5 @@
 {
   "type": "commonjs",
-  "main": "../dist/cjs/browser.js",
-  "types": "../dist/esm/browser.d.ts"
+  "main": "../dist/browser.cjs",
+  "types": "../dist/browser.d.ts"
 }

packages/toolpad/package.json

@@ -3,25 +3,22 @@
   "version": "0.1.2",
   "license": "MIT",
   "scripts": {
-    "cjsify": "mkdir -p ./dist/cjs && echo \"{ \\\"type\\\":\\\"commonjs\\\" }\" > ./dist/cjs/package.json",
-    "build": "concurrently \"yarn:build:*\" && yarn cjsify",
-    "build:esm": "tsc",
-    "build:cjs": "tsc -p tsconfig.cjs.json",
-    "dev": "concurrently \"yarn:dev:*\" yarn:cjsify",
-    "dev:esm": "yarn build:esm --watch",
-    "dev:cjs": "yarn build:cjs --watch"
+    "prebuild": "rimraf dist",
+    "build": "tsup",
+    "dev": "tsup --watch",
+    "check-types": "tsc"
   },
   "exports": {
     "./package.json": "./package.json",
     "./server": {
-      "types": "./dist/esm/server.d.ts",
-      "import": "./dist/esm/server.js",
-      "require": "./dist/cjs/server.js"
+      "types": "./dist/server.d.ts",
+      "import": "./dist/server.mjs",
+      "require": "./dist/server.js"
     },
     "./browser": {
-      "types": "./dist/esm/browser.d.ts",
-      "import": "./dist/esm/browser.js",
-      "require": "./dist/cjs/browser.js"
+      "types": "./dist/browser.d.ts",
+      "import": "./dist/browser.mjs",
+      "require": "./dist/browser.js"
     }
   },
   "files": [

packages/toolpad/server/package.json

@@ -1,5 +1,5 @@
 {
   "type": "commonjs",
-  "main": "../dist/cjs/server.js",
-  "types": "../dist/esm/server.d.ts"
+  "main": "../dist/server.cjs",
+  "types": "../dist/server.d.ts"
 }