Refactor: extract custom components loading logic

packages/toolpad-app/pages/app-canvas/[[...path]].tsx

@@ -1,15 +1,10 @@
-import type { GetServerSideProps, NextPage } from 'next';
+import type { NextPage } from 'next';
 import * as React from 'react';
-import AppCanvas, { AppCanvasProps } from '../../src/canvas';
+import AppCanvas from '../../src/canvas';
+import loadComponents from '../../src/runtime/loadDomComponents';
 
-export const getServerSideProps: GetServerSideProps<AppCanvasProps> = async () => {
- return {
- props: {
- basename: `/app-canvas`,
- },
- };
-};
-
-const App: NextPage<AppCanvasProps> = (props) => <AppCanvas {...props} />;
+const App: NextPage<{}> = (props) => (
+ <AppCanvas {...props} loadComponents={loadComponents} basename="/app-canvas" />
+);
 
 export default App;

packages/toolpad-app/pages/preview/[[...path]].tsx

@@ -1,9 +1,15 @@
 import type { GetServerSideProps, NextPage } from 'next';
 import * as React from 'react';
-import ToolpadApp, { ToolpadAppProps } from '../../src/runtime/ToolpadApp';
+import ToolpadApp from '../../src/runtime/ToolpadApp';
 import config from '../../src/config';
+import { RuntimeState } from '../../src/types';
+import loadComponents from '../../src/runtime/loadDomComponents';
 
-export const getServerSideProps: GetServerSideProps<ToolpadAppProps> = async () => {
+interface PreviewPageProps {
+ state: RuntimeState;
+}
+
+export const getServerSideProps: GetServerSideProps<PreviewPageProps> = async () => {
  const { loadRuntimeState } = await import('../../src/server/data');
 
  if (config.cmd !== 'dev') {
@@ -17,11 +23,11 @@ export const getServerSideProps: GetServerSideProps<ToolpadAppProps> = async ()
  return {
  props: {
  state,
- version: 'preview',
- basename: `/preview`,
  },
  };
 };
 
-const App: NextPage<ToolpadAppProps> = (props) => <ToolpadApp {...props} />;
+const App: NextPage<PreviewPageProps> = (props) => (
+ <ToolpadApp {...props} loadComponents={loadComponents} basename="/preview" version="preview" />
+);
 export default App;

packages/toolpad-app/pages/prod/[[...path]].tsx

@@ -1,9 +1,15 @@
 import type { GetServerSideProps, NextPage } from 'next';
 import * as React from 'react';
-import ToolpadApp, { ToolpadAppProps } from '../../src/runtime/ToolpadApp';
+import ToolpadApp from '../../src/runtime/ToolpadApp';
 import config from '../../src/config';
+import { RuntimeState } from '../../src/types';
+import loadComponents from '../../src/runtime/loadDomComponents';
 
-export const getServerSideProps: GetServerSideProps<ToolpadAppProps> = async () => {
+interface ProdPageProps {
+ state: RuntimeState;
+}
+
+export const getServerSideProps: GetServerSideProps<ProdPageProps> = async () => {
  const { loadRuntimeState } = await import('../../src/server/data');
 
  if (config.cmd !== 'start') {
@@ -22,11 +28,11 @@ export const getServerSideProps: GetServerSideProps<ToolpadAppProps> = async ()
  return {
  props: {
  state,
- version: 0,
- basename: `/prod`,
  },
  };
 };
 
-const App: NextPage<ToolpadAppProps> = (props) => <ToolpadApp {...props} />;
+const App: NextPage<ProdPageProps> = (props) => (
+ <ToolpadApp {...props} loadComponents={loadComponents} version={0} basename="/prod" />
+);
 export default App;

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

@@ -2,8 +2,7 @@ import * as React from 'react';
 import invariant from 'invariant';
 import { throttle } from 'lodash-es';
 import { CanvasEventsContext } from '@mui/toolpad-core/runtime';
-import { ToolpadComponent } from '@mui/toolpad-core';
-import ToolpadApp from '../runtime';
+import ToolpadApp, { LoadComponents } from '../runtime';
 import { NodeHashes, RuntimeState } from '../types';
 import getPageViewState from './getPageViewState';
 import { rectContainsPoint } from '../utils/geometry';
@@ -26,10 +25,14 @@ const handleScreenUpdate = throttle(
 export interface AppCanvasProps {
  initialState?: AppCanvasState | null;
  basename: string;
- catalog?: Record<string, ToolpadComponent>;
+ loadComponents: LoadComponents;
 }
 
-export default function AppCanvas({ catalog, basename, initialState = null }: AppCanvasProps) {
+export default function AppCanvas({
+ loadComponents,
+ basename,
+ initialState = null,
+}: AppCanvasProps) {
  const [state, setState] = React.useState<AppCanvasState | null>(initialState);
 
  const appRootRef = React.useRef<HTMLDivElement>();
@@ -135,7 +138,7 @@ export default function AppCanvas({ catalog, basename, initialState = null }: Ap
  <CanvasEventsContext.Provider value={bridge.canvasEvents}>
  <ToolpadApp
  rootRef={onAppRoot}
- catalog={catalog}
+ loadComponents={loadComponents}
  hasShell={false}
  version="development"
  basename={basename}

packages/toolpad-app/src/createRuntimeState.tsx

@@ -5,21 +5,14 @@ import { CompiledModule, RuntimeState } from './types';
 function compileModules(dom: appDom.AppDom): Record<string, CompiledModule> {
  const result: Record<string, CompiledModule> = {};
  const root = appDom.getApp(dom);
- const { codeComponents = [], pages = [] } = appDom.getChildNodes(dom, root);
+ const { codeComponents = [] } = appDom.getChildNodes(dom, root);
 
  for (const node of codeComponents) {
  const src = node.attributes.code.value;
  const name = `codeComponents/${node.id}`;
  result[name] = compileModule(src, name);
  }
 
- for (const node of pages) {
- const src = node.attributes.module?.value;
- if (src) {
- const name = `pages/${node.id}`;
- result[name] = compileModule(src, name);
- }
- }
  return result;
 }