Merge remote-tracking branch 'origin/master' into add-app-navigation

.gitignore

@@ -57,4 +57,5 @@ packages/toolpad-app/public/typings.json
 
 examples/*/yarn.lock
 
+test-results
 .toolpad-generated

CONTRIBUTING.md

@@ -135,7 +135,7 @@ _If you're looking into contributing to the docs, follow the [instructions](#bui
  then run
 
  ```sh
- TOOLPAD_NEXT_DEV=1 yarn test:integration --project chromiun
+ TOOLPAD_NEXT_DEV=1 yarn test:integration --project chromium
  ```
 
 - Use the `--ui` flag to run the tests interactively

docs/package.json

@@ -27,7 +27,7 @@
  "@emotion/server": "^11.10.0",
  "@emotion/styled": "^11.10.6",
  "@mui/icons-material": "^5.11.11",
- "@mui/material": "^5.11.14",
+ "@mui/material": "^5.11.15",
  "@mui/monorepo": "https://github.com/mui/material-ui.git",
  "@mui/styles": "^5.11.13",
  "@mui/utils": "^5.11.13",

packages/toolpad-app/cli/index.ts

@@ -1,5 +1,5 @@
 import 'dotenv/config';
-import arg from 'arg';
+import yargs from 'yargs';
 import path from 'path';
 import invariant from 'invariant';
 import { Readable } from 'stream';
@@ -32,17 +32,14 @@ function* getPreferredPorts(port: number = DEFAULT_PORT): Iterable<number> {
  }
 }
 
-interface RunCommandArgs {
- // Whether Toolpad editor is running in debug mode
- devMode?: boolean;
+type Command = 'dev' | 'start' | 'build';
+interface Options {
  port?: number;
+ dev?: boolean;
  dir?: string;
 }
 
-async function runApp(
- cmd: 'dev' | 'start',
- { devMode = false, port, dir = process.cwd() }: RunCommandArgs,
-) {
+async function runApp(cmd: Command, { port, dev = false, dir = process.cwd() }: Options) {
  const { execaNode } = await import('execa');
  const { default: chalk } = await import('chalk');
  const { default: getPort } = await import('get-port');
@@ -65,7 +62,7 @@ async function runApp(
  cwd: dir,
  stdio: 'pipe',
  env: {
- NODE_ENV: devMode ? 'development' : 'production',
+ NODE_ENV: dev ? 'development' : 'production',
  TOOLPAD_DIR: toolpadDir,
  TOOLPAD_PROJECT_DIR: dir,
  TOOLPAD_PORT: String(port),
@@ -100,7 +97,7 @@ async function runApp(
  });
 }
 
-async function devCommand(args: RunCommandArgs) {
+async function devCommand(args: yargs.ArgumentsCamelCase<Options>) {
  const { default: chalk } = await import('chalk');
 
  // eslint-disable-next-line no-console
@@ -119,50 +116,67 @@ async function buildCommand() {
  console.log(`${chalk.green('success')} - build done.`);
 }
 
-async function startCommand(args: RunCommandArgs) {
+async function startCommand(args: yargs.ArgumentsCamelCase<Options>) {
  const { default: chalk } = await import('chalk');
  // eslint-disable-next-line no-console
  console.log(`${chalk.blue('info')} - Starting Toolpad application...`);
  await runApp('start', args);
 }
 
 export default async function cli(argv: string[]) {
- const args = arg(
- {
- // Types
- '--help': Boolean,
- '--dev': Boolean,
- '--port': Number,
-
- // Aliases
- '-p': '--port',
- },
- {
- argv,
- },
- );
-
- const command: string | undefined = args._[0];
- const dir: string = path.resolve(process.cwd(), args._[1] || '.');
-
- const runArgs = {
- devMode: args['--dev'],
- port: args['--port'],
- dir,
- };
-
- switch (command) {
- case undefined:
- case 'dev':
- await devCommand(runArgs);
- break;
- case 'build':
- await buildCommand();
- break;
- case 'start':
- await startCommand(runArgs);
- break;
- default:
- throw new Error(`Unknown command "${command}"`);
- }
+ await yargs(argv)
+ // See https://github.com/yargs/yargs/issues/538
+ .scriptName('toolpad')
+ .command({
+ command: 'dev [dir]',
+ describe: 'Run Toolpad in development mode',
+ builder: {
+ port: {
+ type: 'number',
+ describe: 'Port to run the application on',
+ demandOption: false,
+ },
+ dev: {
+ type: 'boolean',
+ describe: 'Run the Toolpad editor Next.js app in production mode',
+ demandOption: false,
+ default: false,
+ hidden: true,
+ },
+ },
+ handler: (args) => devCommand(args),
+ })
+ .command({
+ command: 'start [dir]',
+ describe: 'Run built Toolpad application in production mode',
+ builder: {
+ port: {
+ type: 'number',
+ describe: 'Port to run the application on',
+ demandOption: false,
+ },
+ dev: {
+ type: 'boolean',
+ describe: 'Run the Toolpad editor Next.js app in production mode',
+ demandOption: false,
+ default: false,
+ hidden: true,
+ },
+ },
+ handler: (args) => startCommand(args),
+ })
+ .command({
+ command: 'build',
+ describe: 'Build Toolpad app for production',
+ handler: () => buildCommand(),
+ })
+ .command({
+ command: 'help',
+ describe: 'Show help',
+ handler: async () => {
+ // eslint-disable-next-line no-console
+ console.log(await yargs.getHelp());
+ },
+ })
+ .help().argv;
 }

packages/toolpad-app/next.config.mjs

@@ -102,15 +102,6 @@ export default withBundleAnalyzer({
  * @param {import('webpack').Configuration} config
  */
  webpack: (config, options) => {
- config.resolve ??= {};
- config.resolve.fallback = {
- ...config.resolve.fallback,
- // We need these because quickjs-emscripten doesn't export pure browser compatible modules yet
- // https://github.com/justjake/quickjs-emscripten/issues/33
- fs: false,
- path: false,
- };
-
  config.module ??= {};
  config.module.strictExportPresence = true;
 

packages/toolpad-app/package.json

@@ -37,8 +37,8 @@
  "@googleapis/sheets": "^4.0.2",
  "@mui/icons-material": "^5.11.11",
  "@mui/lab": "^5.0.0-alpha.124",
- "@mui/material": "^5.11.14",
- "@mui/system": "^5.11.14",
+ "@mui/material": "^5.11.15",
+ "@mui/system": "^5.11.15",
  "@mui/toolpad-components": "^0.1.1",
  "@mui/toolpad-core": "^0.1.1",
  "@mui/types": "^7.2.3",
@@ -89,7 +89,6 @@
  "pino-elasticsearch": "^6.3.0",
  "prettier": "^2.8.7",
  "pretty-bytes": "^6.1.0",
- "quickjs-emscripten": "^0.22.0",
  "react": "^18.2.0",
  "react-dev-utils": "^12.0.1",
  "react-devtools-inline": "^4.27.4",

packages/toolpad-app/src/toolpad/AppEditor/index.tsx

@@ -1,7 +1,6 @@
 import * as React from 'react';
 import { styled } from '@mui/material';
 import { useNavigate, useLocation } from 'react-router-dom';
-import { JsRuntimeProvider } from '@mui/toolpad-core/jsServerRuntime';
 import PageEditor from './PageEditor';
 import DomProvider, { useAppState } from '../AppState';
 import AppEditorShell from './AppEditorShell';
@@ -63,12 +62,10 @@ function FileEditor() {
 
 export default function Editor() {
  return (
- <JsRuntimeProvider>
- <DomProvider>
- <EditorRoot>
- <FileEditor />
- </EditorRoot>
- </DomProvider>
- </JsRuntimeProvider>
+ <DomProvider>
+ <EditorRoot>
+ <FileEditor />
+ </EditorRoot>
+ </DomProvider>
  );
 }

packages/toolpad-app/src/toolpadDataSources/rest/shared.ts

@@ -3,7 +3,6 @@ import {
  BindableAttrValue,
  BindableAttrValues,
  JsRuntime,
- Serializable,
  SerializedError,
 } from '@mui/toolpad-core';
 import { evaluateBindable } from '@mui/toolpad-core/jsRuntime';
@@ -57,7 +56,7 @@ export function parseBaseUrl(baseUrl: string): URL {
 function resolveBindable(
  jsRuntime: JsRuntime,
  bindable: BindableAttrValue<string>,
- scope: Record<string, Serializable>,
+ scope: Record<string, unknown>,
 ): any {
  const { value, error } = evaluateBindable(jsRuntime, bindable, scope);
  if (error) {
@@ -69,15 +68,15 @@ function resolveBindable(
 function resolveBindableEntries(
  jsRuntime: JsRuntime,
  entries: BindableAttrEntries,
- scope: Record<string, Serializable>,
+ scope: Record<string, unknown>,
 ): [string, any][] {
  return entries.map(([key, value]) => [key, resolveBindable(jsRuntime, value, scope)]);
 }
 
 function resolveBindables<P>(
  jsRuntime: JsRuntime,
  obj: BindableAttrValues<P>,
- scope: Record<string, Serializable>,
+ scope: Record<string, unknown>,
 ): P {
  return Object.fromEntries(
  resolveBindableEntries(jsRuntime, Object.entries(obj) as BindableAttrEntries, scope),
@@ -102,7 +101,7 @@ interface ResolvedRawBody {
 function resolveRawBody(
  jsRuntime: JsRuntime,
  body: RawBody,
- scope: Record<string, Serializable>,
+ scope: Record<string, unknown>,
 ): ResolvedRawBody {
  const { content, contentType } = resolveBindables(
  jsRuntime,
@@ -127,15 +126,15 @@ interface ResolveUrlEncodedBodyBody {
 function resolveUrlEncodedBody(
  jsRuntime: JsRuntime,
  body: UrlEncodedBody,
- scope: Record<string, Serializable>,
+ scope: Record<string, unknown>,
 ): ResolveUrlEncodedBodyBody {
  return {
  kind: 'urlEncoded',
  content: resolveBindableEntries(jsRuntime, body.content, scope),
  };
 }
 
-function resolveBody(jsRuntime: JsRuntime, body: Body, scope: Record<string, Serializable>) {
+function resolveBody(jsRuntime: JsRuntime, body: Body, scope: Record<string, unknown>) {
  switch (body.kind) {
  case 'raw':
  return resolveRawBody(jsRuntime, body, scope);

packages/toolpad-components/package.json

@@ -30,7 +30,7 @@
  "url": "https://github.com/mui/mui-toolpad/issues"
  },
  "dependencies": {
- "@mui/material": "^5.11.14",
+ "@mui/material": "^5.11.15",
  "@mui/toolpad-core": "^0.1.1",
  "@mui/x-data-grid-pro": "^6.0.3",
  "@mui/x-date-pickers": "^6.0.3",