diff options
-rw-r--r-- | demos/hello-next/bun-framework-next/client.development.tsx | 5 | ||||
-rw-r--r-- | demos/hello-next/bun-framework-next/package.json | 5 | ||||
-rw-r--r-- | demos/hello-next/bun-framework-next/page-loader.ts | 91 | ||||
-rw-r--r-- | demos/hello-next/bun-framework-next/renderDocument.tsx | 16 | ||||
-rw-r--r-- | demos/hello-next/bun-framework-next/route-loader.ts | 63 | ||||
-rw-r--r-- | demos/hello-next/next-env.d.ts | 6 | ||||
-rw-r--r-- | demos/hello-next/pages/index.tsx | 2 | ||||
-rw-r--r-- | demos/hello-next/pages/posts/[id].tsx | 1 | ||||
-rw-r--r-- | demos/hello-next/pages/second.tsx | 2 |
9 files changed, 112 insertions, 79 deletions
diff --git a/demos/hello-next/bun-framework-next/client.development.tsx b/demos/hello-next/bun-framework-next/client.development.tsx index 824171086..24c737b55 100644 --- a/demos/hello-next/bun-framework-next/client.development.tsx +++ b/demos/hello-next/bun-framework-next/client.development.tsx @@ -251,6 +251,8 @@ async function _boot(EntryPointNamespace) { ); CachedApp = AppModule.default; + } else { + CachedApp = App; } } @@ -281,6 +283,8 @@ async function _boot(EntryPointNamespace) { isPreview, }); + globalThis.next.router = router; + ReactDOM.hydrate( <TopLevelRender App={CachedApp} @@ -300,6 +304,7 @@ function TopLevelRender({ App, Component, props, scroll }) { } export function render(props) { + ReactDOM.render( <TopLevelRender {...props} />, document.querySelector("#__next") diff --git a/demos/hello-next/bun-framework-next/package.json b/demos/hello-next/bun-framework-next/package.json index 901391964..9f12a57a3 100644 --- a/demos/hello-next/bun-framework-next/package.json +++ b/demos/hello-next/bun-framework-next/package.json @@ -17,9 +17,11 @@ ".tsx" ] }, + "css": "onimportcss", "development": { "client": "client.development.tsx", "server": "server.development.tsx", + "css": "onimportcss", "define": { "client": { ".env": "NEXT_PUBLIC_", @@ -61,7 +63,8 @@ }, "production": { "client": "client.production.tsx", - "server": "server.production.tsx" + "server": "server.production.tsx", + "css": "onimportcss" } }, "scripts": { diff --git a/demos/hello-next/bun-framework-next/page-loader.ts b/demos/hello-next/bun-framework-next/page-loader.ts index 84e623ab1..5674697d9 100644 --- a/demos/hello-next/bun-framework-next/page-loader.ts +++ b/demos/hello-next/bun-framework-next/page-loader.ts @@ -2,6 +2,23 @@ import NextPageLoader from "next/dist/client/page-loader"; import getAssetPathFromRoute from "next/dist/shared/lib/router/utils/get-asset-path-from-route"; import createRouteLoader from "./route-loader"; +function insertStyleSheet(url: string) { + if (document.querySelector(`link[href="${url}"]`)) { + return Promise.resolve(); + } + + return new Promise((resolve, reject) => { + const link = document.createElement("link"); + link.rel = "stylesheet"; + link.href = url; + + link.onload = () => void resolve(); + + link.onerror = () => void reject(); + document.head.appendChild(link); + }); +} + export default class PageLoader extends NextPageLoader { public routeLoader: RouteLoader; @@ -10,39 +27,81 @@ export default class PageLoader extends NextPageLoader { // TODO: assetPrefix? this.routeLoader = createRouteLoader(""); + + // Rewrite the pages object to omit the entry script + // At this point, the entry point has been loaded so we don't want to do that again. + for (let name in pages) { + for (let i = 0; i < pages[name].length; i += 1) { + const lastDot = pages[name][i].lastIndexOf("."); + if (lastDot == -1) continue; + if ( + pages[name][i].substring(lastDot - ".entry".length, lastDot) !== + ".entry" + ) + continue; + + pages[name][i] = + pages[name][i].substring(0, lastDot - ".entry".length) + + pages[name][i].substring(lastDot); + } + } + this.pages = pages; + this.pageList = Object.keys(this.pages); } + pageList: string[]; + pages: Record<string, string[]>; + getPageList() { - return Object.keys(this.pages); + return this.pageList; } + cssQueue = []; + + onImportCSS = (event) => { + this.cssQueue.push(insertStyleSheet(event.detail).then(() => void 0)); + }; async loadPage(route: string): Promise<GoodPageCache> { - try { - const assets = - globalThis.__NEXT_DATA__.pages[route] || - globalThis.__NEXT_DATA__.pages[getAssetPathFromRoute(route)]; - - var src; - console.log(getAssetPathFromRoute(route), assets); - for (let asset of assets) { - if (!asset.endsWith(".css")) { - src = asset; - break; - } + const assets = + this.pages[route] || this.pages[getAssetPathFromRoute(route)]; + + var src; + console.log(getAssetPathFromRoute(route), assets); + for (let asset of assets) { + if (!asset.endsWith(".css")) { + src = asset; + break; } + } + console.assert(src, "Invalid or unknown route passed to loadPage"); - console.assert(src, "Invalid or unknown route passed to loadPage"); + document.removeEventListener("onimportcss", this.onImportCSS); + this.cssQueue.length = 0; + document.addEventListener("onimportcss", this.onImportCSS, { + passive: true, + }); + try { const res = await import(src); - console.log({ res }); + if (this.cssQueue.length > 0) { + await Promise.all(this.cssQueue); + + this.cssQueue.length = 0; + } + document.removeEventListener("onimportcss", this.onImportCSS); return { page: res.default, mod: res, + styleSheets: [], __N_SSG: false, __N_SSP: false, }; - } catch (err) {} + + debugger; + } catch (exception) { + debugger; + } // return this.routeLoader.loadRoute(route).then((res) => { // debugger; diff --git a/demos/hello-next/bun-framework-next/renderDocument.tsx b/demos/hello-next/bun-framework-next/renderDocument.tsx index a25e5d273..7daec0005 100644 --- a/demos/hello-next/bun-framework-next/renderDocument.tsx +++ b/demos/hello-next/bun-framework-next/renderDocument.tsx @@ -411,14 +411,14 @@ export async function render({ const isAutoExport = false; if (isAutoExport || isFallback) { - // remove query values except ones that will be set during export - query = { - ...(query.amp - ? { - amp: query.amp, - } - : {}), - }; + // // remove query values except ones that will be set during export + // query = { + // ...(query.amp + // ? { + // amp: query.amp, + // } + // : {}), + // }; asPath = `${asPath}${ // ensure trailing slash is present for non-dynamic auto-export pages asPath.endsWith("/") && asPath !== "/" && !pageIsDynamic ? "/" : "" diff --git a/demos/hello-next/bun-framework-next/route-loader.ts b/demos/hello-next/bun-framework-next/route-loader.ts index 887a57544..04714a6fe 100644 --- a/demos/hello-next/bun-framework-next/route-loader.ts +++ b/demos/hello-next/bun-framework-next/route-loader.ts @@ -226,35 +226,6 @@ function resolvePromiseWithTimeout<T>( }); } -// TODO: stop exporting or cache the failure -// It'd be best to stop exporting this. It's an implementation detail. We're -// only exporting it for backwards compatibility with the `page-loader`. -// Only cache this response as a last resort if we cannot eliminate all other -// code branches that use the Build Manifest Callback and push them through -// the Route Loader interface. -export function getClientBuildManifest(): Promise<ClientBuildManifest> { - console.log("hiiiiiiiiiiiii"); - if (self.__BUILD_MANIFEST) { - return Promise.resolve(self.__BUILD_MANIFEST); - } - - const onBuildManifest: Promise<ClientBuildManifest> = - new Promise<ClientBuildManifest>((resolve) => { - // Mandatory because this is not concurrent safe: - const cb = self.__BUILD_MANIFEST_CB; - self.__BUILD_MANIFEST_CB = () => { - resolve(self.__BUILD_MANIFEST!); - cb && cb(); - }; - }); - - return resolvePromiseWithTimeout<ClientBuildManifest>( - onBuildManifest, - MS_MAX_IDLE_DELAY, - markAssetError(new Error("Failed to load client build manifest")) - ); -} - interface RouteFiles { scripts: string[]; css: string[]; @@ -263,28 +234,14 @@ function getFilesForRoute( assetPrefix: string, route: string ): Promise<RouteFiles> { - if (process.env.NODE_ENV === "development") { - return Promise.resolve({ - scripts: [ - encodeURI( - globalThis.__NEXT_DATA.pages[route].filter((k) => !k.endsWith(".css")) - ), - ], - // Styles are handled by `style-loader` in development: - css: [], - }); - } - return getClientBuildManifest().then((manifest) => { - if (!(route in manifest)) { - throw markAssetError(new Error(`Failed to lookup route: ${route}`)); - } - const allFiles = manifest[route].map( - (entry) => assetPrefix + "/_next/" + encodeURI(entry) - ); - return { - scripts: allFiles.filter((v) => v.endsWith(".js")), - css: allFiles.filter((v) => v.endsWith(".css")), - }; + return Promise.resolve({ + scripts: [ + encodeURI( + globalThis.__NEXT_DATA.pages[route].filter((k) => !k.endsWith(".css")) + ), + ], + // Styles are handled by `style-loader` in development: + css: [], }); } @@ -297,6 +254,8 @@ export default function createRouteLoader(assetPrefix: string): RouteLoader { new Map(); function maybeExecuteScript(src: string): Promise<unknown> { + debugger; + let prom: Promise<unknown> | undefined = loadedScripts.get(src); if (prom) { return prom; @@ -360,7 +319,7 @@ export default function createRouteLoader(assetPrefix: string): RouteLoader { devBuildResolve = resolve; }); } - + debugger; return resolvePromiseWithTimeout( getFilesForRoute(assetPrefix, route) .then(({ scripts, css }) => { diff --git a/demos/hello-next/next-env.d.ts b/demos/hello-next/next-env.d.ts new file mode 100644 index 000000000..9bc3dd46b --- /dev/null +++ b/demos/hello-next/next-env.d.ts @@ -0,0 +1,6 @@ +/// <reference types="next" /> +/// <reference types="next/types/global" /> +/// <reference types="next/image-types/global" /> + +// NOTE: This file should not be edited +// see https://nextjs.org/docs/basic-features/typescript for more information. diff --git a/demos/hello-next/pages/index.tsx b/demos/hello-next/pages/index.tsx index 0c5c1086f..87ccfd2b3 100644 --- a/demos/hello-next/pages/index.tsx +++ b/demos/hello-next/pages/index.tsx @@ -20,7 +20,7 @@ export default function Home() { <main className={styles.main}> <h1 className={styles.title}> - Welcome <a href="https://nextjs.org">Next.js!</a> + apos[ <a href="https://nextjs.org">Next.js!</a> </h1> <p className={styles.description}> diff --git a/demos/hello-next/pages/posts/[id].tsx b/demos/hello-next/pages/posts/[id].tsx index 26cb704f6..48413669c 100644 --- a/demos/hello-next/pages/posts/[id].tsx +++ b/demos/hello-next/pages/posts/[id].tsx @@ -3,6 +3,7 @@ import Link from "next/link"; export default function Post({}) { const router = useRouter(); + return ( <div style={{ padding: 16 }}> <h1>Post: {router.query.id}</h1> diff --git a/demos/hello-next/pages/second.tsx b/demos/hello-next/pages/second.tsx index 8cb0daa89..0e7b5a5cf 100644 --- a/demos/hello-next/pages/second.tsx +++ b/demos/hello-next/pages/second.tsx @@ -13,7 +13,7 @@ export default function Second({}) { </li> <li> <Link href="/foo/bar/third"> - <a>Third page</a> + <a>Third! page</a> </Link> </li> </ul> |