currentjarred/fetch-experiment

15 files changed, 143 insertions, 48 deletions

diff --git a/examples/hello-next/bun-framework-next/bun-error.css b/packages/bun-framework-next/bun-error.css
index c5ed9881b..c5ed9881b 100644
--- a/examples/hello-next/bun-framework-next/bun-error.css
+++ b/packages/bun-framework-next/bun-error.css
diff --git a/examples/hello-next/bun-framework-next/bun-error.tsx b/packages/bun-framework-next/bun-error.tsx
index 5d57dd0ea..5d57dd0ea 100644
--- a/examples/hello-next/bun-framework-next/bun-error.tsx
+++ b/packages/bun-framework-next/bun-error.tsx
diff --git a/examples/hello-next/bun-framework-next/bun-error/close.png b/packages/bun-framework-next/bun-error/close.png
index 11e513a1b..11e513a1b 100644
--- a/examples/hello-next/bun-framework-next/bun-error/close.png
+++ b/packages/bun-framework-next/bun-error/close.png
diff --git a/examples/hello-next/bun-framework-next/bun-error/error.png b/packages/bun-framework-next/bun-error/error.png
index c35e01a2b..c35e01a2b 100644
--- a/examples/hello-next/bun-framework-next/bun-error/error.png
+++ b/packages/bun-framework-next/bun-error/error.png
diff --git a/examples/hello-next/bun-framework-next/bun-error/powered-by.png b/packages/bun-framework-next/bun-error/powered-by.png
index 7e71f1357..7e71f1357 100644
--- a/examples/hello-next/bun-framework-next/bun-error/powered-by.png
+++ b/packages/bun-framework-next/bun-error/powered-by.png
diff --git a/examples/hello-next/bun-framework-next/bun-error/powered-by.webp b/packages/bun-framework-next/bun-error/powered-by.webp
index 0f48488ea..0f48488ea 100644
--- a/examples/hello-next/bun-framework-next/bun-error/powered-by.webp
+++ b/packages/bun-framework-next/bun-error/powered-by.webp
diff --git a/examples/hello-next/bun-framework-next/bun-runtime-error.ts b/packages/bun-framework-next/bun-runtime-error.ts
index 331040b36..331040b36 100644
--- a/examples/hello-next/bun-framework-next/bun-runtime-error.ts
+++ b/packages/bun-framework-next/bun-runtime-error.ts
diff --git a/packages/bun-framework-next/client.development.tsx b/packages/bun-framework-next/client.development.tsx
index b93b1fcce..c08eb513e 100644
--- a/packages/bun-framework-next/client.development.tsx
+++ b/packages/bun-framework-next/client.development.tsx
@@ -1,5 +1,6 @@
 globalThis.global = globalThis;
 globalThis.Bun_disableCSSImports = true;
+import "./bun-error";
 
 import * as React from "react";
 var onlyChildPolyfill = React.Children.only;
@@ -367,7 +368,7 @@ export async function _boot(EntryPointNamespace, isError) {
       <TopLevelRender
         App={CachedApp}
         Component={PageComponent}
-        props={{ pageProps: hydrateProps }}
+        props={hydrateProps}
       />,
       document.querySelector("#__next")
     );
@@ -376,7 +377,7 @@ export async function _boot(EntryPointNamespace, isError) {
       <TopLevelRender
         App={CachedApp}
         Component={PageComponent}
-        props={{ pageProps: hydrateProps }}
+        props={hydrateProps}
       />,
       document.querySelector("#__next")
     );
diff --git a/packages/bun-framework-next/fallback.development.tsx b/packages/bun-framework-next/fallback.development.tsx
index 34e6cb349..b42835d36 100644
--- a/packages/bun-framework-next/fallback.development.tsx
+++ b/packages/bun-framework-next/fallback.development.tsx
@@ -1,43 +1,83 @@
 import { insertStyleSheet } from "./page-loader";
+import type {
+  FallbackMessageContainer,
+  FallbackStep,
+} from "../../../src/api/schema";
 
-const globalCSSQueue = [];
-function insertGlobalStyleSheet({ detail }) {
-  globalCSSQueue.push(insertStyleSheet(detail));
+var once = false;
+function insertGlobalStyleSheet(detail) {
+  if (!once) {
+    document.head.insertAdjacentHTML(
+      "beforeend",
+      `<meta name="next-head-count" content="${document.head.childElementCount}">`
+    );
+    once = true;
+  }
+  pageLoader.cssQueue.push(insertStyleSheet(detail).then(() => {}));
 }
 
+[...globalThis["__BUN"].allImportedStyles].map((detail) =>
+  insertGlobalStyleSheet(detail)
+);
+
 document.addEventListener("onimportcss", insertGlobalStyleSheet, {
   passive: true,
 });
 
 import { renderError, _boot, pageLoader } from "./client.development";
+import { renderFallbackError } from "bun-error";
 
-export default function render({ router, reason, problems }) {
+function renderFallback({
+  router,
+  reason,
+  problems,
+}: FallbackMessageContainer) {
   const route = router.routes[router.route];
+
   if (!document.getElementById("__next")) {
     const next = document.createElement("div");
     next.id = "__next";
     document.body.prepend(next);
-    document.head.insertAdjacentHTML(
-      "beforeend",
-      `<meta name="next-head-count" content="2">`
-    );
   }
 
   document.removeEventListener("onimportcss", insertGlobalStyleSheet);
   document.addEventListener("onimportcss", pageLoader.onImportCSS, {
     passive: true,
   });
-  import(route)
+
+  globalThis.__NEXT_DATA__.pages["/_app"] = [
+    ...globalThis.__NEXT_DATA__.pages["/_app"],
+    ...globalThis["__BUN"].allImportedStyles,
+  ];
+
+  return import(route)
     .then((Namespace) => {
       return _boot(Namespace, true);
     })
     .then(() => {
-      const cssQueue = pageLoader.cssQueue;
+      const cssQueue = pageLoader.cssQueue.slice();
       pageLoader.cssQueue = [];
-      return Promise.all([...cssQueue, ...globalCSSQueue]);
+      return Promise.all([...cssQueue]);
     })
     .finally(() => {
       document.body.style.visibility = "visible";
       document.removeEventListener("onimportcss", pageLoader.onImportCSS);
     });
 }
+
+export default function render(props: FallbackMessageContainer) {
+  renderFallback(props).then(
+    () => {
+      Promise.all(pageLoader.cssQueue).finally(() => {
+        renderFallbackError(props);
+        document.body.style.visibility = "visible";
+      });
+    },
+    (err) => {
+      console.error(err);
+      Promise.all(pageLoader.cssQueue).finally(() => {
+        renderFallbackError(props);
+      });
+    }
+  );
+}
diff --git a/packages/bun-framework-next/next-image-polyfill.tsx b/packages/bun-framework-next/next-image-polyfill.tsx
new file mode 100644
index 000000000..edc3775d7
--- /dev/null
+++ b/packages/bun-framework-next/next-image-polyfill.tsx
@@ -0,0 +1,36 @@
+function NextImagePolyfill({
+  src,
+  width,
+  height,
+  objectFit,
+  style,
+  layout,
+  ...otherProps
+}) {
+  var _style = style;
+  if (layout === "fit") {
+    objectFit = "contain";
+  } else if (layout === "fill") {
+    objectFit = "cover";
+  }
+
+  if (objectFit) {
+    if (!_style) {
+      _style = { objectFit: objectFit };
+    } else {
+      _style.objectFit = objectFit;
+    }
+  }
+
+  return (
+    <img
+      src={src}
+      width={width}
+      height={height}
+      style={_style}
+      {...otherProps}
+    />
+  );
+}
+
+export default NextImagePolyfill;
diff --git a/packages/bun-framework-next/package.json b/packages/bun-framework-next/package.json
index af6286343..1f937589a 100644
--- a/packages/bun-framework-next/package.json
+++ b/packages/bun-framework-next/package.json
@@ -24,6 +24,9 @@
       "fallback": "fallback.development.tsx",
       "server": "server.development.tsx",
       "css": "onimportcss",
+      "override": {
+        "next/dist/client/image.js": "next-image-polyfill.tsx"
+      },
       "define": {
         "client": {
           ".env": "NEXT_PUBLIC_",
diff --git a/packages/bun-framework-next/page-loader.ts b/packages/bun-framework-next/page-loader.ts
index 98e132a5f..fc07578db 100644
--- a/packages/bun-framework-next/page-loader.ts
+++ b/packages/bun-framework-next/page-loader.ts
@@ -15,7 +15,12 @@ export function insertStyleSheet(url: string) {
     link.onerror = () => reject();
 
     link.href = url;
+
+    // if (headCount) {
+    //   document.head.insertBefore(headCount, link);
+    // } else {
     document.head.appendChild(link);
+    // }
   });
 }
 
diff --git a/packages/bun-framework-next/polyfills.tsx b/packages/bun-framework-next/polyfills.tsx
new file mode 100644
index 000000000..b000c1f54
--- /dev/null
+++ b/packages/bun-framework-next/polyfills.tsx
@@ -0,0 +1,23 @@
+globalThis.global = globalThis;
+
+import { Buffer } from "buffer";
+
+globalThis.Buffer = Buffer;
+
+import * as 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;
diff --git a/packages/bun-framework-next/renderDocument.tsx b/packages/bun-framework-next/renderDocument.tsx
index 97a65fff8..957615047 100644
--- a/packages/bun-framework-next/renderDocument.tsx
+++ b/packages/bun-framework-next/renderDocument.tsx
@@ -71,10 +71,6 @@ const notImplementedProxy = (base) =>
     }
   );
 
-globalThis.fetch = (url, options) => {
-  return Promise.reject(new Error(`fetch is not implemented yet. sorry!!`));
-};
-
 function getScripts(files: DocumentFiles) {
   const { context, props } = this;
   const {
@@ -574,6 +570,9 @@ export async function render({
     ctx,
   });
 
+  const pageProps = Object.assign({}, props.pageProps || {});
+  // This isn't correct.
+  // We don't call getServerSideProps on clients.
   // This isn't correct.
   // We don't call getServerSideProps on clients.
   const getServerSideProps = PageNamespace.getServerSideProps;
@@ -594,7 +593,7 @@ export async function render({
     if (result) {
       if ("props" in result) {
         if (typeof result.props === "object") {
-          Object.assign(props, result.props);
+          Object.assign(pageProps, result.props);
         }
       }
     }
@@ -615,7 +614,7 @@ export async function render({
     if (result) {
       if ("props" in result) {
         if (typeof result.props === "object") {
-          Object.assign(props, result.props);
+          Object.assign(pageProps, result.props);
         }
       }
     }
@@ -623,6 +622,7 @@ export async function render({
 
   const renderToString = ReactDOMServer.renderToString;
   const ErrorDebug = null;
+  props.pageProps = pageProps;
 
   const renderPage: RenderPage = (
     options: ComponentsEnhancer = {}
@@ -648,7 +648,12 @@ export async function render({
 
     const htmlOrPromise = renderToString(
       <AppContainer>
-        <EnhancedApp Component={EnhancedComponent} router={router} {...props} />
+        <EnhancedApp
+          Component={EnhancedComponent}
+          router={router}
+          {...props}
+          pageProps={pageProps}
+        />
       </AppContainer>
     );
     return typeof htmlOrPromise === "string"
diff --git a/packages/bun-framework-next/server.development.tsx b/packages/bun-framework-next/server.development.tsx
index c6a7beebf..7391d9f32 100644
--- a/packages/bun-framework-next/server.development.tsx
+++ b/packages/bun-framework-next/server.development.tsx
@@ -1,23 +1,4 @@
-import * as React from "react";
-import { Buffer } from "buffer";
-globalThis.Buffer = Buffer;
-
-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 "./polyfills";
 import { render } from "./renderDocument";
 
 let buildId = 0;
@@ -40,14 +21,6 @@ import(Bun.routesDir + "_document").then(
 );
 
 addEventListener("fetch", async (event: FetchEvent) => {
-  var appRoute;
-
-  try {
-    appRoute = await import(Bun.routesDir + "_app");
-  } catch (exception) {
-    appRoute = null;
-  }
-  const appStylesheets = (Bun.getImportedStyles() as string[]).slice();
   var route = Bun.match(event);
 
   // This imports the currently matched route.
@@ -57,6 +30,15 @@ addEventListener("fetch", async (event: FetchEvent) => {
   // It's recursive, so any file that imports a CSS file will be included.
   const pageStylesheets = (Bun.getImportedStyles() as string[]).slice();
 
+  var appRoute;
+
+  try {
+    appRoute = await import(Bun.routesDir + "_app");
+  } catch (exception) {
+    appRoute = null;
+  }
+  const appStylesheets = (Bun.getImportedStyles() as string[]).slice();
+
   event.respondWith(
     render({
       route,