diff options
| author |  Jarred Sumner <jarred@jarredsumner.com>
| 2021-08-11 13:56:32 -0700 |
|---|---|---|
| committer | Jarred Sumner <jarred@jarredsumner.com>
| 2021-08-11 13:56:32 -0700 |
| commit | cfb549b7cef635e084a5566bbd92699a44ec0d1c (patch) | |
| tree | f22a2612530f78ad547c64ab094b4adfab0751b3 /demos/css-stress-test/nexty/server.development.tsx | |
| parent | 842bb9cba28e51172407523a4e8b624fde8d702e (diff) | |
| download | bun-cfb549b7cef635e084a5566bbd92699a44ec0d1c.tar.gz bun-cfb549b7cef635e084a5566bbd92699a44ec0d1c.tar.zst bun-cfb549b7cef635e084a5566bbd92699a44ec0d1c.zip | |
wip
Former-commit-id: e335f297c8ad57af82e74c405351a100524cd7e0
Diffstat (limited to 'demos/css-stress-test/nexty/server.development.tsx')
| -rw-r--r-- | demos/css-stress-test/nexty/server.development.tsx | 70 |
1 files changed, 70 insertions, 0 deletions
diff --git a/demos/css-stress-test/nexty/server.development.tsx b/demos/css-stress-test/nexty/server.development.tsx new file mode 100644 index 000000000..ab330359e --- /dev/null +++ b/demos/css-stress-test/nexty/server.development.tsx @@ -0,0 +1,70 @@ +import ReactDOMServer from "react-dom/server.browser"; + +addEventListener( + "fetch", + + // Anything imported in here will automatically reload in development. + // The module registry cache is reset at the end of each page load + async (event: FetchEvent) => { + var appRoute; + + try { + appRoute = await import(Wundle.routesDir + "_app"); + } catch (exception) { + appRoute = null; + } + + var route = Wundle.match(event); + + // This imports the currently matched route. + const { default: PageComponent } = await import(route.filePath); + + // This returns all .css files that were imported in the line above. + // It's recursive, so any file that imports a CSS file will be included. + const stylesheets = Wundle.getImportedStyles() as string[]; + + // Ordinarily, this is just the formatted filepath URL (rewritten to match the public url of the HTTP server) + // But, when you set `client` in the package.json for the framework, this becomes a path like this: + // "/pages/index.js" -> "pages/index.entry.js" ("entry" is for entry point) + const src = route.scriptSrc; + + // From there, the inside of that script like this: + // ``` + // import * as Framework from 'framework-path'; + // import * as EntryPoint from 'entry-point'; + // + // Framework.default(EntryPoint); + // ``` + // That's how the client-side framework loads + + const response = new Response(` + <!DOCTYPE html> +<html> + <head> + ${stylesheets + .map((style) => `<link rel="stylesheet" href="${style}">`) + .join("\n")} + + <link + rel="stylesheet" + crossorigin="anonymous" + href="https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:wght@400;700&family=Space+Mono:wght@400;700" + /> + </head> + <body> + + <div id="#__next">${ReactDOMServer.renderToString(<PageComponent />)}</div> + + <script src="${src}" async type="module"></script> + </body> +</html> + `); + + event.respondWith(response); + } +); + +// typescript isolated modules +export {}; + +declare var Wundle: any; |