Fix saving issues

docs/package.json

@@ -60,7 +60,7 @@
     "lz-string": "^1.4.4",
     "markdown-to-jsx": "^7.1.7",
     "marked": "^4.1.1",
-    "next": "^12.3.1",
+    "next": "12.2.2",
     "next-transpile-modules": "^9.1.0",
     "nprogress": "^0.2.0",
     "postcss": "^8.4.17",

packages/toolpad-app/jest-environment-jsdom.ts

@@ -1,13 +1,13 @@
 import { TextDecoder, TextEncoder } from 'util';
 import fetch, { Headers, Request, Response } from 'node-fetch';
-
-const JsdomEnvironment = require('jest-environment-jsdom').default;
+import JsdomEnvironment from 'jest-environment-jsdom';
 
 export default class CustomJsdomEnvironment extends JsdomEnvironment {
   async setup() {
     await super.setup();
 
     if (!this.global.TextDecoder) {
+      // @ts-expect-error The polyfill is not 100% spec-compliant
       this.global.TextDecoder = TextDecoder;
     } else {
       throw new Error(`Unnecessary polyfill "TextDecoder"`);
@@ -20,9 +20,13 @@ export default class CustomJsdomEnvironment extends JsdomEnvironment {
     }
 
     if (!this.global.fetch) {
+      // @ts-expect-error The polyfill is not 100% spec-compliant
       this.global.fetch = fetch;
+      // @ts-expect-error The polyfill is not 100% spec-compliant
       this.global.Headers = Headers;
+      // @ts-expect-error The polyfill is not 100% spec-compliant
       this.global.Request = Request;
+      // @ts-expect-error The polyfill is not 100% spec-compliant
       this.global.Response = Response;
     } else {
       throw new Error(`Unnecessary polyfill "fetch"`);

packages/toolpad-app/middleware.ts

@@ -1,6 +1,16 @@
-import { NextRequest, NextResponse, URLPattern } from 'next/server';
+import {
+  NextRequest,
+  NextResponse,
+  // @ts-expect-error
+  // TODO: As soon as next/server exports this member:
+  //   - remove ` as NextURLPattern` from this line
+  //   - remove the line below with `const URLPattern = ...`
+  URLPattern as NextURLPattern,
+} from 'next/server';
 import { checkBasicAuthHeader } from './src/server/basicAuth';
 
+const URLPattern = NextURLPattern || (global as any).URLPattern;
+
 const BASIC_AUTH_WHITELIST = [
   // Healthcheck must always be public
   new URLPattern({ pathname: '/health-check' }),

packages/toolpad-app/package.json

@@ -78,7 +78,7 @@
     "lodash-es": "^4.17.21",
     "mitt": "^3.0.0",
     "monaco-editor": "0.34.0",
-    "next": "12.3.1",
+    "next": "12.2.2",
     "node-fetch": "^2.6.7",
     "node-fetch-har": "^1.0.1",
     "path-to-regexp": "^6.2.1",

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

@@ -5,11 +5,23 @@ interface GithubRelease {
   url: string;
 }
 
+function abortSignalTimeout(ms: number): AbortSignal {
+  // @ts-expect-error See https://github.com/microsoft/TypeScript/issues/48003
+  if (AbortSignal.timeout) {
+    console.warn('Next.js support AbortSignal.timeout, remove this polyfill');
+    // @ts-expect-error See https://github.com/microsoft/TypeScript/issues/48003
+    return AbortSignal.timeout(ms);
+  }
+
+  const controller = new AbortController();
+  setTimeout(() => controller.abort(), ms);
+  return controller.signal;
+}
+
 async function fetchRelease(): Promise<GithubRelease> {
   const response = await fetch(LATEST_RELEASE_API_URL, {
     // Abort the request after 30 seconds
-    // @ts-expect-error See https://github.com/microsoft/TypeScript/issues/48003
-    signal: AbortSignal.timeout(30_000),
+    signal: abortSignalTimeout(30_000),
   });
 
   if (response.ok) {

renovate.json

@@ -68,6 +68,11 @@
       "groupName": "core-js",
       "matchPackageNames": ["core-js"],
       "allowedVersions": "< 2.0.0"
+    },
+    {
+      "groupName": "next",
+      "matchPackageNames": ["next"],
+      "allowedVersions": "1.2.2"
     }
   ],
   "postUpdateOptions": ["yarnDedupeHighest"],

test/integration/large-dom/index.spec.ts

@@ -0,0 +1,12 @@
+import * as path from 'path';
+import { test } from '@playwright/test';
+import { ToolpadHome } from '../../models/ToolpadHome';
+import { readJsonFile } from '../../utils/fs';
+
+test('large dom', async ({ page }) => {
+  const dom = await readJsonFile(path.resolve(__dirname, './large.json'));
+
+  const homeModel = new ToolpadHome(page);
+  await homeModel.goto();
+  await homeModel.createApplication({ dom });
+});