add React.Children.only pollyfill

Former-commit-id: e140319390f56979487444529ca49a677264ad57

demos/hello-next/bun-framework-next/client.development.tsx

@@ -1,3 +1,13 @@
+var onlyChildPolyfill = React.Children.only;
+React.Children.only = function (children) {
+  if (children && typeof children === "object" && children.length == 1) {
+    return onlyChildPolyfill(children[0]);
+  }
+
+  return onlyChildPolyfill(children);
+};
+
+globalThis.global = globalThis;
 import * as ReactDOM from "react-dom";
 import App from "next/app";
 import mitt, { MittEmitter } from "next/dist/shared/lib/mitt";
@@ -21,7 +31,7 @@ import {
   NEXT_DATA,
   ST,
 } from "next/dist/shared/lib/utils";
-import { Portal } from "next/dist/client/portal";
+// import { Portal } from "next/dist/client/portal";
 import initHeadManager from "next/dist/client/head-manager";
 import PageLoader, { StyleSheetTuple } from "next/dist/client/page-loader";
 import measureWebVitals from "next/dist/client/performance-relayer";
@@ -187,7 +197,7 @@ let CachedComponent: React.ComponentType;
 
 function _boot(EntryPointNamespace) {
   const PageComponent = EntryPointNamespace.default;
-  
+
   ReactDOM.hydrate(
     <Container fn={(error) => <div>{JSON.stringify(error)}</div>}>
       <App Component={PageComponent} pageProps={data.props}></App>

demos/hello-next/bun-framework-next/package.json

@@ -68,5 +68,6 @@
     "test": "echo \"Error: no test specified\" && exit 1"
   },
   "author": "",
-  "license": "ISC"
+  "license": "ISC",
+  "dependencies": {}
 }

demos/hello-next/bun-framework-next/server.development.tsx

@@ -1,3 +1,19 @@
+import React from "react";
+class URL {
+  constructor(base, source) {
+    this.pathname = source;
+    this.href = base + source;
+  }
+}
+var onlyChildPolyfill = React.Children.only;
+React.Children.only = function (children) {
+  if (children && typeof children === "object" && children.length == 1) {
+    return onlyChildPolyfill(children[0]);
+  }
+
+  return onlyChildPolyfill(children);
+};
+globalThis.URL = URL;
 globalThis.global = globalThis;
 import { render } from "./renderDocument";
 

demos/hello-next/components/Title.tsx

@@ -0,0 +1,3 @@
+export default function Title() {
+  return <h1>Hello</h1>;
+}

demos/hello-next/package.json

@@ -7,6 +7,7 @@
     "next": "^11.1.0",
     "path": "^0.12.7",
     "react": "^17.0.2",
-    "react-dom": "^17.0.2"
+    "react-dom": "^17.0.2",
+    "whatwg-url": "^9.1.0"
   }
 }

demos/hello-next/pages/blue.tsx

@@ -0,0 +1,9 @@
+import Link from "next/link";
+
+export default function Blue({}) {
+  return (
+    <div>
+      <h1>Blue</h1>
+    </div>
+  );
+}

demos/hello-next/pages/index.tsx

@@ -1,6 +1,9 @@
 import Head from "next/head";
 import Image from "next/image";
 import styles from "../styles/Home.module.css";
+import Link from "next/link";
+
+import Title from "../components/Title";
 
 export default function Home() {
   return (
@@ -13,9 +16,15 @@ export default function Home() {
 
       <main className={styles.main}>
         <h1 className={styles.title}>
-          Welcome to <a href="https://nextjs.org">Next.js!</a>
+          Welcom <a href="https://nextjs.org">Next.js!</a>
         </h1>
 
+        <Title />
+
+        <Link href="/blue">
+          <a>Blue page</a>
+        </Link>
+
         <p className={styles.description}>
           Get started by editing{" "}
           <code className={styles.code}>pages/index.js</code>