[bun-framework-next] Support Next 12.1.3 & React 18

4 files changed, 86 insertions, 18 deletions

diff --git a/packages/bun-framework-next/client.development.tsx b/packages/bun-framework-next/client.development.tsx
index 30e6c8946..e65cbbcdc 100644
--- a/packages/bun-framework-next/client.development.tsx
+++ b/packages/bun-framework-next/client.development.tsx
@@ -1,11 +1,19 @@
-/// <reference types="react-dom/experimental" />
-
 globalThis.global = globalThis;
 globalThis.Bun_disableCSSImports = true;
 
 import * as React from "react";
 
-import * as ReactDOM from "react-dom";
+var ReactDOM;
+try {
+  ReactDOM = require("react-dom/client");
+} catch (exception) {}
+
+if (!ReactDOM) {
+  try {
+    ReactDOM = require("react-dom");
+  } catch (exception) {}
+}
+
 import NextApp from "next/app";
 import mitt, { MittEmitter } from "next/dist/shared/lib/mitt";
 import { RouterContext } from "next/dist/shared/lib/router-context";
diff --git a/packages/bun-framework-next/packageVersion.ts b/packages/bun-framework-next/packageVersion.ts
new file mode 100644
index 000000000..d6ff0b21d
--- /dev/null
+++ b/packages/bun-framework-next/packageVersion.ts
@@ -0,0 +1,44 @@
+import { readFileSync } from "fs";
+
+var memoizeMap;
+
+// This gives us a package version inline into the build without pulling in the whole package.json
+// it only parses the package.json for a given package name once (relative to the directory of this file)
+export function packageVersion(call) {
+  var name = call.arguments[0].toString();
+
+  // in the general case, this would break when using multiple versions of the same package
+  // but people don't use multiple versions of next in the same bundle
+  // so we don't need to worry about it here
+  // and it skips resolveSync which is a bit faster
+  if (memoizeMap) {
+    const value = memoizeMap.get(name);
+    if (value) return value;
+  }
+  var nextPath;
+  try {
+    nextPath = Bun.resolveSync(`${name}/package.json`, import.meta.dir);
+  } catch (exception) {
+    throw new Error(`${name} is not a valid package name`);
+  }
+
+  var json;
+  try {
+    // TODO: Add sync methods to FileBlob?
+    json = JSON.parse(readFileSync(nextPath, "utf8"));
+  } catch (exc) {
+    throw new AggregateError([exc], `Error parsing ${name}/package.json`);
+  }
+
+  if (!json.version) {
+    throw new Error(`${name}/package.json is missing a version`);
+  }
+
+  if (!memoizeMap) {
+    memoizeMap = new Map();
+  }
+
+  memoizeMap.set(name, json.version);
+
+  return json.version;
+}
diff --git a/packages/bun-framework-next/renderDocument.tsx b/packages/bun-framework-next/renderDocument.tsx
index 1eed8d989..4b299c149 100644
--- a/packages/bun-framework-next/renderDocument.tsx
+++ b/packages/bun-framework-next/renderDocument.tsx
@@ -4,29 +4,43 @@ import { HeadManagerContext } from "next/dist/shared/lib/head-manager-context";
 import Loadable from "next/dist/shared/lib/loadable";
 import { LoadableContext } from "next/dist/shared/lib/loadable-context";
 import { RouterContext } from "next/dist/shared/lib/router-context";
-import { NextRouter } from "next/dist/shared/lib/router/router";
+import { type NextRouter } from "next/dist/shared/lib/router/router";
 import {
-  AppType,
-  ComponentsEnhancer,
-  DocumentInitialProps,
-  DocumentProps,
-  DocumentType,
   getDisplayName,
   loadGetInitialProps,
-  NextComponentType,
-  RenderPage,
-  RenderPageResult,
-  HtmlContext,
+  type AppType,
+  type ComponentsEnhancer,
+  type DocumentInitialProps,
+  type DocumentProps,
+  type DocumentType,
+  type NextComponentType,
+  type RenderPage,
+  type RenderPageResult,
 } from "next/dist/shared/lib/utils";
-import { RenderOpts } from "next/dist/server/render";
+import * as NextUtils from "next/dist/shared/lib/utils";
+import type { RenderOpts } from "next/dist/server/render";
 import * as NextDocument from "next/document";
 import * as ReactDOMServer from "react-dom/server.browser";
 import * as React from "react";
 import * as ReactIs from "react-is";
-import nextPackage from "next/package.json";
+import { packageVersion } from "macro:./packageVersion.ts";
+
+const nextVersion = packageVersion("next");
+
+var HtmlContext;
+// HtmlContext is in different places depending on the next version
+if ("HtmlContext" in NextUtils) {
+  HtmlContext = NextUtils.HtmlContext;
+} else {
+  try {
+    HtmlContext = require("next/dist/shared/lib/html-context").HtmlContext;
+  } catch (err) {
+    throw err;
+  }
+}
 
 function appendNextBody(html: string, docPropsHtml) {
-  if (nextPackage.version.startsWith("12.0")) {
+  if (nextVersion.startsWith("12.0")) {
     const NEXT_12_0_BODY_RENDER_TARGET = "__NEXT_BODY_RENDER_TARGET__";
 
     const bodyRenderIdx = html.indexOf(NEXT_12_0_BODY_RENDER_TARGET);
@@ -228,6 +242,7 @@ function renderDocument(
     useMaybeDeferContent,
     ...docProps,
   };
+
   return (
     "<!DOCTYPE html>" +
     ReactDOMServer.renderToStaticMarkup(
diff --git a/packages/bun-framework-next/server.development.tsx b/packages/bun-framework-next/server.development.tsx
index 41d616ba8..42f57009d 100644
--- a/packages/bun-framework-next/server.development.tsx
+++ b/packages/bun-framework-next/server.development.tsx
@@ -1,8 +1,9 @@
-import nextPackage from "next/package.json";
 import "./server-polyfills";
 import { render } from "./renderDocument";
+import { packageVersion } from "macro:./packageVersion.ts";
+
+const version = packageVersion("next");
 
-const { version } = nextPackage;
 if (
   (!version.startsWith("11.1") &&
     !version.startsWith("12.0") &&