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 | |
| 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')
| -rw-r--r-- | demos/css-stress-test/nexty/client.development.tsx | 5 | ||||
| -rw-r--r-- | demos/css-stress-test/nexty/index.js | 0 | ||||
| -rw-r--r-- | demos/css-stress-test/nexty/package.json | 32 | ||||
| -rw-r--r-- | demos/css-stress-test/nexty/server.development.tsx | 70 | ||||
| -rw-r--r-- | demos/css-stress-test/nexty/server.production.tsx | 0 | ||||
| -rw-r--r-- | demos/css-stress-test/src/index.tsx | 2 | ||||
| -rw-r--r-- | demos/css-stress-test/src/main.tsx | 6 |
7 files changed, 111 insertions, 4 deletions
diff --git a/demos/css-stress-test/nexty/client.development.tsx b/demos/css-stress-test/nexty/client.development.tsx new file mode 100644 index 000000000..1bc63a0c7 --- /dev/null +++ b/demos/css-stress-test/nexty/client.development.tsx @@ -0,0 +1,5 @@ +import ReactDOM from "react-dom"; + +export default function boot(EntryPointNamespace, loader) { + +} diff --git a/demos/css-stress-test/nexty/index.js b/demos/css-stress-test/nexty/index.js new file mode 100644 index 000000000..e69de29bb --- /dev/null +++ b/demos/css-stress-test/nexty/index.js diff --git a/demos/css-stress-test/nexty/package.json b/demos/css-stress-test/nexty/package.json new file mode 100644 index 000000000..bfcec7c16 --- /dev/null +++ b/demos/css-stress-test/nexty/package.json @@ -0,0 +1,32 @@ +{ + "name": "nexty", + "version": "1.0.0", + "description": "", + "framework": { + "router": { + "dir": "pages", + "extensions": [ + ".js", + ".ts", + ".tsx" + ] + }, + "static": "public", + "development": { + "client": "client.development.tsx", + "server": "server.development.tsx" + }, + "production": { + "client": "client.production.tsx", + "server": "server.production.tsx" + } + }, + "scripts": { + "test": "echo \"Error: no test specified\" && exit 1" + }, + "author": "", + "license": "ISC", + "dependencies": { + "next": "^11.1.0" + } +} 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; diff --git a/demos/css-stress-test/nexty/server.production.tsx b/demos/css-stress-test/nexty/server.production.tsx new file mode 100644 index 000000000..e69de29bb --- /dev/null +++ b/demos/css-stress-test/nexty/server.production.tsx diff --git a/demos/css-stress-test/src/index.tsx b/demos/css-stress-test/src/index.tsx index 00a6cbb88..4c288c3cc 100644 --- a/demos/css-stress-test/src/index.tsx +++ b/demos/css-stress-test/src/index.tsx @@ -7,7 +7,7 @@ const Base = ({}) => { typeof location !== "undefined" ? decodeURIComponent(location.search.substring(1)) : null; - return <Main productName={name || "Bundler"} />; + return <Main productName={name || "asdasdasdasdasdasd"} />; }; function startReact() { diff --git a/demos/css-stress-test/src/main.tsx b/demos/css-stress-test/src/main.tsx index 691efcf30..556f3d3b7 100644 --- a/demos/css-stress-test/src/main.tsx +++ b/demos/css-stress-test/src/main.tsx @@ -2,7 +2,7 @@ export const Main = ({ productName }) => { return ( <> <header> - <div className="Title">CSS HMR Stress Test</div> + <div className="Title">CSS HMR Stress Test!</div> <p className="Description"> This page visually tests how quickly a bundler can update CSS over Hot Module Reloading. @@ -55,10 +55,10 @@ export const Main = ({ productName }) => { <div className="Bundler-container"> <div className="Bundler">{productName}</div> <div className="Bundler-updateRate"> - Saving a css file every + {/* This should loose all the styles <span className="highlight"> <span className="interval"></span>ms - </span> + </span> */} </div> </div> </footer> |