Revamp toolpad file system layout

docs/data/toolpad/connecting-to-datasources/serverside-javascript.md

@@ -16,7 +16,7 @@
 
 The most powerful way of bringing data into Toolpad is through serverside JavaScript functions. The setup is as follows:
 
-1. Start by changing `toolpad/queries.ts` and set its content to:
+1. Start by changing `toolpad/resources/functions.ts` and set its content to:
 
    ```tsx
    export async function example() {
@@ -48,7 +48,7 @@ The most powerful way of bringing data into Toolpad is through serverside JavaSc
 
    <img src="/static/toolpad/docs/serverside-js/js-3.png?v=0" alt="Runs in Node.js" width="890px" />
 
-   You can import and use any Node.js module in `toolpad/queries.ts`. That means that you can access any API or database that distributes a client library as a Node.js module.
+   You can import and use any Node.js module in `toolpad/resources/functions.ts`. That means that you can access any API or database that distributes a client library as a Node.js module.
 
 ## Parameters
 

packages/toolpad-app/package.json

@@ -101,7 +101,10 @@
     "superjson": "^1.12.2",
     "ts-node": "^10.9.1",
     "whatwg-url": "^12.0.1",
-    "yaml": "^2.2.1"
+    "yaml": "^2.2.1",
+    "yaml-diff-patch": "^2.0.0",
+    "zod": "^3.21.4",
+    "zod-validation-error": "^1.1.0"
   },
   "devDependencies": {
     "@types/babel__code-frame": "^7.0.3",

packages/toolpad-app/src/appDom/index.ts

@@ -357,10 +357,14 @@ export function assertIsMutation<P>(node: AppDomNode): asserts node is MutationN
   assertIsType<MutationNode>(node, 'mutation');
 }
 
+export function getRoot(dom: AppDom): AppDomNode {
+  return getNode(dom, dom.root);
+}
+
 export function getApp(dom: AppDom): AppNode {
-  const rootNode = getNode(dom, dom.root);
-  assertIsApp(rootNode);
-  return rootNode;
+  const app = getRoot(dom);
+  assertIsApp(app);
+  return app;
 }
 
 export type NodeChildren<N extends AppDomNode = any> = ChildNodesOf<N>;
@@ -500,20 +504,35 @@ export function createNode<T extends AppDomNodeType>(
   });
 }
 
-export function createDom(): AppDom {
-  const rootId = createId();
+export function createFragmentInternal<T extends AppDomNodeType>(
+  id: NodeId,
+  type: T,
+  init: AppDomNodeInitOfType<T> & { name: string },
+): AppDom {
   return {
     nodes: {
-      [rootId]: createNodeInternal(rootId, 'app', {
-        name: 'Application',
-        attributes: {},
-      }),
+      [id]: createNodeInternal(id, type, init),
     },
-    root: rootId,
+    root: id,
     version: CURRENT_APPDOM_VERSION,
   };
 }
 
+export function createFragment<T extends AppDomNodeType>(
+  type: T,
+  init: AppDomNodeInitOfType<T> & { name: string },
+): AppDom {
+  const rootId = createId();
+  return createFragmentInternal(rootId, type, init);
+}
+
+export function createDom(): AppDom {
+  return createFragment('app', {
+    name: 'Application',
+    attributes: {},
+  });
+}
+
 /**
  * Creates a new DOM node representing a React Element
  */

packages/toolpad-app/src/appDom/migrations/v6.ts

@@ -5,7 +5,7 @@ import { mapValues } from '../../utils/collections';
 
 export default {
   up(dom: appDom.AppDom): appDom.AppDom {
-    invariant(dom.version === 5, 'Can only migrate dom of version 4');
+    invariant(dom.version === 5, 'Can only migrate dom of version 5');
 
     const prefix = 'codeComponent.';
     return {

packages/toolpad-app/src/server/data.ts

@@ -7,8 +7,8 @@ import applyTransform from '../toolpadDataSources/applyTransform';
 import createRuntimeState from '../createRuntimeState';
 import { saveLocalDom, loadLocalDom } from './localMode';
 
-export async function saveDom(app: appDom.AppDom): Promise<void> {
-  await saveLocalDom(app);
+export async function saveDom(app: appDom.AppDom): Promise<{ fingerprint: number }> {
+  return saveLocalDom(app);
 }
 
 export async function loadDom(): Promise<appDom.AppDom> {