diff --git a/bun.lock b/bun.lock index 05fe7b54..e53b4526 100644 --- a/bun.lock +++ b/bun.lock @@ -15,6 +15,46 @@ "typescript": "catalog:", }, }, + "fixtures/react-router-rsc": { + "name": "@fixtures/react-router-rsc", + "dependencies": { + "react": "^19.2.7", + "react-dom": "^19.2.7", + "react-router": "7.16.0", + }, + "devDependencies": { + "@cloudflare/workers-types": "catalog:workers", + "@distilled.cloud/cloudflare-runtime": "workspace:*", + "@distilled.cloud/cloudflare-vite-plugin": "workspace:*", + "@tailwindcss/typography": "^0.5.19", + "@tailwindcss/vite": "^4.3.0", + "@types/react": "^19.2.17", + "@types/react-dom": "^19.2.3", + "@vitejs/plugin-react": "latest", + "@vitejs/plugin-rsc": "latest", + "tailwindcss": "^4.3.0", + "vite": "catalog:", + }, + }, + "fixtures/react-rsc": { + "name": "@fixtures/react-rsc", + "version": "0.0.0", + "dependencies": { + "react": "^19.2.7", + "react-dom": "^19.2.7", + }, + "devDependencies": { + "@cloudflare/workers-types": "catalog:workers", + "@distilled.cloud/cloudflare-runtime": "workspace:*", + "@distilled.cloud/cloudflare-vite-plugin": "workspace:*", + "@types/react": "^19.2.17", + "@types/react-dom": "^19.2.3", + "@vitejs/plugin-react": "latest", + "@vitejs/plugin-rsc": "latest", + "rsc-html-stream": "^0.0.7", + "vite": "catalog:", + }, + }, "fixtures/solid-ssr": { "name": "@fixtures/solid-ssr", "version": "0.0.0", @@ -427,6 +467,10 @@ "@esbuild/win32-x64": ["@esbuild/win32-x64@0.27.7", "", { "os": "win32", "cpu": "x64" }, "sha512-56hiAJPhwQ1R4i+21FVF7V8kSD5zZTdHcVuRFMW0hn753vVfQN8xlx4uOPT4xoGH0Z/oVATuR82AiqSTDIpaHg=="], + "@fixtures/react-router-rsc": ["@fixtures/react-router-rsc@workspace:fixtures/react-router-rsc"], + + "@fixtures/react-rsc": ["@fixtures/react-rsc@workspace:fixtures/react-rsc"], + "@fixtures/solid-ssr": ["@fixtures/solid-ssr@workspace:fixtures/solid-ssr"], "@fixtures/solidstart": ["@fixtures/solidstart@workspace:fixtures/solidstart"], @@ -997,7 +1041,7 @@ "@types/node": ["@types/node@24.12.4", "", { "dependencies": { "undici-types": "~7.16.0" } }, "sha512-GUUEShf+PBCGW2KaXwcIt3Yk+e3pkKwWKb9GSyM9WQVE+ep2jzmHdGsHzu4wgcZy5fN9FBdVzjpBQsYlpfpgLA=="], - "@types/react": ["@types/react@19.2.14", "", { "dependencies": { "csstype": "^3.2.2" } }, "sha512-ilcTH/UniCkMdtexkoCN0bI7pMcJDvmQFPvuPvmEaYA/NSfFTAgdUSLAoVjaRJm7+6PvcM+q1zYOwS4wTYMF9w=="], + "@types/react": ["@types/react@19.2.17", "", { "dependencies": { "csstype": "^3.2.2" } }, "sha512-MXfmqaVPEVgkBT/aY0aGCkRWWtByiYQXo3xdQ8r5RzuFrPiRn8Gar2tQdXSUQ2GKV3bkXckek89V8wQBY2Q/Aw=="], "@types/react-dom": ["@types/react-dom@19.2.3", "", { "peerDependencies": { "@types/react": "^19.2.0" } }, "sha512-jp2L/eY6fn+KgVVQAOqYItbF0VY/YApe5Mz2F0aykSO8gx31bYCZyvSeYxCHKvzHG5eZjc+zyaS5BrBWya2+kQ=="], @@ -1011,7 +1055,9 @@ "@vercel/nft": ["@vercel/nft@1.5.0", "", { "dependencies": { "@mapbox/node-pre-gyp": "^2.0.0", "@rollup/pluginutils": "^5.1.3", "acorn": "^8.6.0", "acorn-import-attributes": "^1.9.5", "async-sema": "^3.1.1", "bindings": "^1.4.0", "estree-walker": "2.0.2", "glob": "^13.0.0", "graceful-fs": "^4.2.9", "node-gyp-build": "^4.2.2", "picomatch": "^4.0.2", "resolve-from": "^5.0.0" }, "bin": { "nft": "out/cli.js" } }, "sha512-IWTDeIoWhQ7ZtRO/JRKH+jhmeQvZYhtGPmzw/QGDY+wDCQqfm25P9yIdoAFagu4fWsK4IwZXDFIjrmp5rRm/sA=="], - "@vitejs/plugin-react": ["@vitejs/plugin-react@5.2.0", "", { "dependencies": { "@babel/core": "^7.29.0", "@babel/plugin-transform-react-jsx-self": "^7.27.1", "@babel/plugin-transform-react-jsx-source": "^7.27.1", "@rolldown/pluginutils": "1.0.0-rc.3", "@types/babel__core": "^7.20.5", "react-refresh": "^0.18.0" }, "peerDependencies": { "vite": "^4.2.0 || ^5.0.0 || ^6.0.0 || ^7.0.0 || ^8.0.0" } }, "sha512-YmKkfhOAi3wsB1PhJq5Scj3GXMn3WvtQ/JC0xoopuHoXSdmtdStOpFrYaT1kie2YgFBcIe64ROzMYRjCrYOdYw=="], + "@vitejs/plugin-react": ["@vitejs/plugin-react@6.0.2", "", { "dependencies": { "@rolldown/pluginutils": "^1.0.0" }, "peerDependencies": { "@rolldown/plugin-babel": "^0.1.7 || ^0.2.0", "babel-plugin-react-compiler": "^1.0.0", "vite": "^8.0.0" }, "optionalPeers": ["@rolldown/plugin-babel", "babel-plugin-react-compiler"] }, "sha512-DlSMqo4WhThw4vB8Mpn0Woe9J+Jfq1geJ61AKW0QEgLzGMNwtIMdxbDUzLxcun8W7NbJO0e2Jg/Nxm3cCSVzzg=="], + + "@vitejs/plugin-rsc": ["@vitejs/plugin-rsc@0.5.27", "", { "dependencies": { "@rolldown/pluginutils": "^1.0.1", "es-module-lexer": "^2.1.0", "estree-walker": "^3.0.3", "magic-string": "^0.30.21", "srvx": "^0.11.15", "strip-literal": "^3.1.0", "turbo-stream": "^3.2.0", "vitefu": "^1.1.3" }, "peerDependencies": { "react": "*", "react-dom": "*", "react-server-dom-webpack": "*", "vite": "*" }, "optionalPeers": ["react-server-dom-webpack"] }, "sha512-s1fd5DUkPXk86DDHPM/kP93WrvI0MoA8klxdDZmD1fMSaA9xujfgunsm8ZoUH0FemR+63vNalFsIDR0AJH4ktg=="], "@vitest/expect": ["@vitest/expect@4.1.6", "", { "dependencies": { "@standard-schema/spec": "^1.1.0", "@types/chai": "^5.2.2", "@vitest/spy": "4.1.6", "@vitest/utils": "4.1.6", "chai": "^6.2.2", "tinyrainbow": "^3.1.0" } }, "sha512-7EHDquPthALSV0jhhjgEW8FXaviMx7rSqu8W6oqCoAuOhKov814P99QDV1pxMA3QPv21YudvJngIhjrNI4opLg=="], @@ -1411,7 +1457,7 @@ "jiti": ["jiti@2.7.0", "", { "bin": { "jiti": "lib/jiti-cli.mjs" } }, "sha512-AC/7JofJvZGrrneWNaEnJeOLUx+JlGt7tNa0wZiRPT4MY1wmfKjt2+6O2p2uz2+skll8OZZmJMNqeke7kKbNgQ=="], - "js-tokens": ["js-tokens@4.0.0", "", {}, "sha512-RdJUflcE3cUzKiMqQgsCu06FPu9UdIJO0beYbPhHN4k6apgJtifcoCtT9bcxOpYBtpD2kCM6Sbzg4CausW/PKQ=="], + "js-tokens": ["js-tokens@9.0.1", "", {}, "sha512-mxa9E9ITFOt0ban3j6L5MpjwegGz6lBQmM1IJkWeBZGcMxto50+eWdjC/52xDbS2vy0k7vIMK0Fe2wfL9OQSpQ=="], "js-yaml": ["js-yaml@4.1.1", "", { "dependencies": { "argparse": "^2.0.1" }, "bin": { "js-yaml": "bin/js-yaml.js" } }, "sha512-qQKT4zQxXl8lLwBtHMWwaTcGfFOZviOJet3Oy/xmGk2gZH677CJM9EvtfdSkgWcATZhj/55JZ0rmy3myCT5lsA=="], @@ -1655,12 +1701,14 @@ "rc9": ["rc9@3.0.1", "", { "dependencies": { "defu": "^6.1.6", "destr": "^2.0.5" } }, "sha512-gMDyleLWVE+i6Sgtc0QbbY6pEKqYs97NGi6isHQPqYlLemPoO8dxQ3uGi0f4NiP98c+jMW6cG1Kx9dDwfvqARQ=="], - "react": ["react@19.2.6", "", {}, "sha512-sfWGGfavi0xr8Pg0sVsyHMAOziVYKgPLNrS7ig+ivMNb3wbCBw3KxtflsGBAwD3gYQlE/AEZsTLgToRrSCjb0Q=="], + "react": ["react@19.2.7", "", {}, "sha512-HNe9WslTbXmFK8o8cmwgAeJFSBvt1bPdHCVKtaaV+WlAN36mpT4hcRpwbf3fY56ar2oIXzsBpOAiIRHAdY0OlQ=="], - "react-dom": ["react-dom@19.2.6", "", { "dependencies": { "scheduler": "^0.27.0" }, "peerDependencies": { "react": "^19.2.6" } }, "sha512-0prMI+hvBbPjsWnxDLxlCGyM8PN6UuWjEUCYmZhO67xIV9Xasa/r/vDnq+Xyq4Lo27g8QSbO5YzARu0D1Sps3g=="], + "react-dom": ["react-dom@19.2.7", "", { "dependencies": { "scheduler": "^0.27.0" }, "peerDependencies": { "react": "^19.2.7" } }, "sha512-t0BRVXvbiE/o20Hfw669rLbMCDWtYZLvmJigy2f0MxsXF+71pxhR3xOkspmsO8h3ZlNzyibAmtCa3l4lYKk6gQ=="], "react-refresh": ["react-refresh@0.18.0", "", {}, "sha512-QgT5//D3jfjJb6Gsjxv0Slpj23ip+HtOpnNgnb2S5zU3CB26G/IDPGoy4RJB42wzFE46DRsstbW6tKHoKbhAxw=="], + "react-router": ["react-router@7.16.0", "", { "dependencies": { "cookie": "^1.0.1", "set-cookie-parser": "^2.6.0" }, "peerDependencies": { "react": ">=18", "react-dom": ">=18" }, "optionalPeers": ["react-dom"] }, "sha512-wArC8lVyJb3+jM9OpDyW6hLCizACWkvQR/sSGqSs+o5uEXEtGlqdZ4v8hENR3Jad6i+LRkK93q/+bQAcvl6V1A=="], + "readable-stream": ["readable-stream@4.7.0", "", { "dependencies": { "abort-controller": "^3.0.0", "buffer": "^6.0.3", "events": "^3.3.0", "process": "^0.11.10", "string_decoder": "^1.3.0" } }, "sha512-oIGGmcpTLwPga8Bn6/Z75SVaH1z5dUut2ibSyAMVhmUggWpmDn2dapB0n7f8nwaSiRtepAsfJyfXIO5DCVAODg=="], "readdir-glob": ["readdir-glob@1.1.3", "", { "dependencies": { "minimatch": "^5.1.0" } }, "sha512-v05I2k7xN8zXvPD9N+z/uhXPaj0sUFCe2rcWZIpBsqxfP7xXFQ0tipAd/wjj1YxWyWtUS5IDJpOG82JKt2EAVA=="], @@ -1695,6 +1743,8 @@ "rou3": ["rou3@0.7.12", "", {}, "sha512-iFE4hLDuloSWcD7mjdCDhx2bKcIsYbtOTpfH5MHHLSKMOUyjqQXTeZVa289uuwEGEKFoE/BAPbhaU4B774nceg=="], + "rsc-html-stream": ["rsc-html-stream@0.0.7", "", {}, "sha512-v9+fuY7usTgvXdNl8JmfXCvSsQbq2YMd60kOeeMIqCJFZ69fViuIxztHei7v5mlMMa2h3SqS+v44Gu9i9xANZA=="], + "run-applescript": ["run-applescript@7.1.0", "", {}, "sha512-DPe5pVFaAsinSaV6QjQ6gdiedWDcRCbUuiQfQa2wmWV7+xC9bGulGI8+TdRmoFkAPaBXk8CrAbnlY2ISniJ47Q=="], "run-parallel": ["run-parallel@1.2.0", "", { "dependencies": { "queue-microtask": "^1.2.2" } }, "sha512-5l4VyZR86LZ/lDxZTR6jqL8AFE2S0IFLMP26AbjsLVADxHdhB/c0GUsH+y39UfCi3dzz8OlQuPmnaJOMoDHQBA=="], @@ -1721,6 +1771,8 @@ "serve-static": ["serve-static@2.2.1", "", { "dependencies": { "encodeurl": "^2.0.0", "escape-html": "^1.0.3", "parseurl": "^1.3.3", "send": "^1.2.0" } }, "sha512-xRXBn0pPqQTVQiC8wyQrKs2MOlX24zQ0POGaj0kultvoOCstBQM5yvOhAVSUwOMjQtTvsPWoNCHfPGwaaQJhTw=="], + "set-cookie-parser": ["set-cookie-parser@2.7.2", "", {}, "sha512-oeM1lpU/UvhTxw+g3cIfxXHyJRc/uidd3yK1P242gzHds0udQBYzs3y8j4gCCW+ZJ7ad0yctld8RYO+bdurlvw=="], + "setprototypeof": ["setprototypeof@1.2.0", "", {}, "sha512-E5LDX7Wrp85Kil5bhZv46j8jOeboKq5JMmYM3gVGdGH8xFpPWXUMsNrlODCrkoxMEeNi/XZIwuRvY4XNwYMJpw=="], "sharp": ["sharp@0.34.5", "", { "dependencies": { "@img/colour": "^1.0.0", "detect-libc": "^2.1.2", "semver": "^7.7.3" }, "optionalDependencies": { "@img/sharp-darwin-arm64": "0.34.5", "@img/sharp-darwin-x64": "0.34.5", "@img/sharp-libvips-darwin-arm64": "1.2.4", "@img/sharp-libvips-darwin-x64": "1.2.4", "@img/sharp-libvips-linux-arm": "1.2.4", "@img/sharp-libvips-linux-arm64": "1.2.4", "@img/sharp-libvips-linux-ppc64": "1.2.4", "@img/sharp-libvips-linux-riscv64": "1.2.4", "@img/sharp-libvips-linux-s390x": "1.2.4", "@img/sharp-libvips-linux-x64": "1.2.4", "@img/sharp-libvips-linuxmusl-arm64": "1.2.4", "@img/sharp-libvips-linuxmusl-x64": "1.2.4", "@img/sharp-linux-arm": "0.34.5", "@img/sharp-linux-arm64": "0.34.5", "@img/sharp-linux-ppc64": "0.34.5", "@img/sharp-linux-riscv64": "0.34.5", "@img/sharp-linux-s390x": "0.34.5", "@img/sharp-linux-x64": "0.34.5", "@img/sharp-linuxmusl-arm64": "0.34.5", "@img/sharp-linuxmusl-x64": "0.34.5", "@img/sharp-wasm32": "0.34.5", "@img/sharp-win32-arm64": "0.34.5", "@img/sharp-win32-ia32": "0.34.5", "@img/sharp-win32-x64": "0.34.5" } }, "sha512-Ou9I5Ft9WNcCbXrU9cMgPBcCK8LiwLqcbywW3t4oDV37n1pzpuNLsYiAV8eODnjbtQlSDwZ2cUEeQz4E54Hltg=="], @@ -1761,7 +1813,7 @@ "sql-escaper": ["sql-escaper@1.3.3", "", {}, "sha512-BsTCV265VpTp8tm1wyIm1xqQCS+Q9NHx2Sr+WcnUrgLrQ6yiDIvHYJV5gHxsj1lMBy2zm5twLaZao8Jd+S8JJw=="], - "srvx": ["srvx@0.9.8", "", { "bin": { "srvx": "bin/srvx.mjs" } }, "sha512-RZaxTKJEE/14HYn8COLuUOJAt0U55N9l1Xf6jj+T0GoA01EUH1Xz5JtSUOI+EHn+AEgPCVn7gk6jHJffrr06fQ=="], + "srvx": ["srvx@0.11.15", "", { "bin": { "srvx": "bin/srvx.mjs" } }, "sha512-iXsux0UcOjdvs0LCMa2Ws3WwcDUozA3JN3BquNXkaFPP7TpRqgunKdEgoZ/uwb1J6xaYHfxtz9Twlh6yzwM6Tg=="], "stackback": ["stackback@0.0.2", "", {}, "sha512-1XMJE5fQo1jGH6Y/7ebnwPOBEkIEnT4QF32d5R1+VXdXveM0IBMJt8zfaxX1P3QhVwrYe+576+jkANtSS2mBbw=="], @@ -1845,6 +1897,8 @@ "turbo": ["turbo@2.9.16", "", { "optionalDependencies": { "@turbo/darwin-64": "2.9.16", "@turbo/darwin-arm64": "2.9.16", "@turbo/linux-64": "2.9.16", "@turbo/linux-arm64": "2.9.16", "@turbo/windows-64": "2.9.16", "@turbo/windows-arm64": "2.9.16" }, "bin": { "turbo": "bin/turbo" } }, "sha512-NqgRQy6j6dPYcdSdv0q1g9QsZg7SWg87RERM8otw/1AtKU2yTFVClOM7cbwKzOonZr/Ek1blTBucw64L9H0Bwg=="], + "turbo-stream": ["turbo-stream@3.2.0", "", {}, "sha512-EK+bZ9UVrVh7JLslVFOV0GEMsociOqVOvEMTAd4ixMyffN5YNIEdLZWXUx5PJqDbTxSIBWw04HS9gCY4frYQDQ=="], + "type-fest": ["type-fest@5.6.0", "", { "dependencies": { "tagged-tag": "^1.0.0" } }, "sha512-8ZiHFm91orbSAe2PSAiSVBVko18pbhbiB3U9GglSzF/zCGkR+rxpHx6sEMCUm4kxY4LjDIUGgCfUMtwfZfjfUA=="], "typescript": ["typescript@6.0.3", "", { "bin": { "tsc": "bin/tsc", "tsserver": "bin/tsserver" } }, "sha512-y2TvuxSZPDyQakkFRPZHKFm+KKVqIisdg9/CZwm9ftvKXLP8NRWj38/ODjNbr43SsoXqNuAisEf1GdCxqWcdBw=="], @@ -1961,6 +2015,8 @@ "@babel/code-frame/@babel/helper-validator-identifier": ["@babel/helper-validator-identifier@7.28.5", "", {}, "sha512-qSs4ifwzKJSV39ucNjsvc6WVHs6b7S03sOh2OcHF9UHfVPqWWALUsNUVzhSBiItjRZoLHx7nIarVjqKVusUZ1Q=="], + "@babel/code-frame/js-tokens": ["js-tokens@4.0.0", "", {}, "sha512-RdJUflcE3cUzKiMqQgsCu06FPu9UdIJO0beYbPhHN4k6apgJtifcoCtT9bcxOpYBtpD2kCM6Sbzg4CausW/PKQ=="], + "@babel/core/@babel/generator": ["@babel/generator@7.29.1", "", { "dependencies": { "@babel/parser": "^7.29.0", "@babel/types": "^7.29.0", "@jridgewell/gen-mapping": "^0.3.12", "@jridgewell/trace-mapping": "^0.3.28", "jsesc": "^3.0.2" } }, "sha512-qsaF+9Qcm2Qv8SRIMMscAvG4O3lJ0F1GuMo5HR/Bp02LopNgnZBC/EkbevHFeGs4ls/oPz9v+Bsmzbkbe+0dUw=="], "@babel/core/@babel/parser": ["@babel/parser@7.29.3", "", { "dependencies": { "@babel/types": "^7.29.0" }, "bin": "./bin/babel-parser.js" }, "sha512-b3ctpQwp+PROvU/cttc4OYl4MzfJUWy6FZg+PMXfzmt/+39iHVF0sDfqay8TQM3JA2EUOyKcFZt75jWriQijsA=="], @@ -2005,6 +2061,14 @@ "@fixtures/tanstack-start/@types/node": ["@types/node@22.19.19", "", { "dependencies": { "undici-types": "~6.21.0" } }, "sha512-dyh/xO2Fh5bYrfWaaqGrRQQGkNdmYw6AmaAUvYeUMNTWQtvb796ikLdmTchRmOlOiIJ1TDXfWgVx1QkUlQ6Hew=="], + "@fixtures/tanstack-start/@types/react": ["@types/react@19.2.14", "", { "dependencies": { "csstype": "^3.2.2" } }, "sha512-ilcTH/UniCkMdtexkoCN0bI7pMcJDvmQFPvuPvmEaYA/NSfFTAgdUSLAoVjaRJm7+6PvcM+q1zYOwS4wTYMF9w=="], + + "@fixtures/tanstack-start/@vitejs/plugin-react": ["@vitejs/plugin-react@5.2.0", "", { "dependencies": { "@babel/core": "^7.29.0", "@babel/plugin-transform-react-jsx-self": "^7.27.1", "@babel/plugin-transform-react-jsx-source": "^7.27.1", "@rolldown/pluginutils": "1.0.0-rc.3", "@types/babel__core": "^7.20.5", "react-refresh": "^0.18.0" }, "peerDependencies": { "vite": "^4.2.0 || ^5.0.0 || ^6.0.0 || ^7.0.0 || ^8.0.0" } }, "sha512-YmKkfhOAi3wsB1PhJq5Scj3GXMn3WvtQ/JC0xoopuHoXSdmtdStOpFrYaT1kie2YgFBcIe64ROzMYRjCrYOdYw=="], + + "@fixtures/tanstack-start/react": ["react@19.2.6", "", {}, "sha512-sfWGGfavi0xr8Pg0sVsyHMAOziVYKgPLNrS7ig+ivMNb3wbCBw3KxtflsGBAwD3gYQlE/AEZsTLgToRrSCjb0Q=="], + + "@fixtures/tanstack-start/react-dom": ["react-dom@19.2.6", "", { "dependencies": { "scheduler": "^0.27.0" }, "peerDependencies": { "react": "^19.2.6" } }, "sha512-0prMI+hvBbPjsWnxDLxlCGyM8PN6UuWjEUCYmZhO67xIV9Xasa/r/vDnq+Xyq4Lo27g8QSbO5YzARu0D1Sps3g=="], + "@isaacs/cliui/string-width": ["string-width@5.1.2", "", { "dependencies": { "eastasianwidth": "^0.2.0", "emoji-regex": "^9.2.2", "strip-ansi": "^7.0.1" } }, "sha512-HnLOCR3vjcY8beoNLtcjZ5/nxn2afmME6lhrDrebokqMap+XbeW8n9TXpPDOqdGK5qcI3oT0GKTW6wC7EMiVqA=="], "@isaacs/cliui/wrap-ansi": ["wrap-ansi@8.1.0", "", { "dependencies": { "ansi-styles": "^6.1.0", "string-width": "^5.0.1", "strip-ansi": "^7.0.1" } }, "sha512-si7QWI6zUMq56bESFvagtmzMdGOtoxfR+Sez11Mobfc7tm+VkUckk9bW2UeffTGVUbOksxmSw0AA2gs8g71NCQ=="], @@ -2027,6 +2091,8 @@ "@solidjs/start/esbuild": ["esbuild@0.25.12", "", { "optionalDependencies": { "@esbuild/aix-ppc64": "0.25.12", "@esbuild/android-arm": "0.25.12", "@esbuild/android-arm64": "0.25.12", "@esbuild/android-x64": "0.25.12", "@esbuild/darwin-arm64": "0.25.12", "@esbuild/darwin-x64": "0.25.12", "@esbuild/freebsd-arm64": "0.25.12", "@esbuild/freebsd-x64": "0.25.12", "@esbuild/linux-arm": "0.25.12", "@esbuild/linux-arm64": "0.25.12", "@esbuild/linux-ia32": "0.25.12", "@esbuild/linux-loong64": "0.25.12", "@esbuild/linux-mips64el": "0.25.12", "@esbuild/linux-ppc64": "0.25.12", "@esbuild/linux-riscv64": "0.25.12", "@esbuild/linux-s390x": "0.25.12", "@esbuild/linux-x64": "0.25.12", "@esbuild/netbsd-arm64": "0.25.12", "@esbuild/netbsd-x64": "0.25.12", "@esbuild/openbsd-arm64": "0.25.12", "@esbuild/openbsd-x64": "0.25.12", "@esbuild/openharmony-arm64": "0.25.12", "@esbuild/sunos-x64": "0.25.12", "@esbuild/win32-arm64": "0.25.12", "@esbuild/win32-ia32": "0.25.12", "@esbuild/win32-x64": "0.25.12" }, "bin": { "esbuild": "bin/esbuild" } }, "sha512-bbPBYYrtZbkt6Os6FiTLCTFxvq4tt3JKall1vRwshA3fdVztsLAatFaZobhkBC8/BrPetoa0oksYoKXoG4ryJg=="], + "@solidjs/start/srvx": ["srvx@0.9.8", "", { "bin": { "srvx": "bin/srvx.mjs" } }, "sha512-RZaxTKJEE/14HYn8COLuUOJAt0U55N9l1Xf6jj+T0GoA01EUH1Xz5JtSUOI+EHn+AEgPCVn7gk6jHJffrr06fQ=="], + "@solidjs/start/vite": ["vite@7.3.3", "", { "dependencies": { "esbuild": "^0.27.0", "fdir": "^6.5.0", "picomatch": "^4.0.3", "postcss": "^8.5.6", "rollup": "^4.43.0", "tinyglobby": "^0.2.15" }, "optionalDependencies": { "fsevents": "~2.3.3" }, "peerDependencies": { "@types/node": "^20.19.0 || >=22.12.0", "jiti": ">=1.21.0", "less": "^4.0.0", "lightningcss": "^1.21.0", "sass": "^1.70.0", "sass-embedded": "^1.70.0", "stylus": ">=0.54.8", "sugarss": "^5.0.0", "terser": "^5.16.0", "tsx": "^4.8.1", "yaml": "^2.4.2" }, "optionalPeers": ["@types/node", "jiti", "less", "lightningcss", "sass", "sass-embedded", "stylus", "sugarss", "terser", "tsx", "yaml"], "bin": { "vite": "bin/vite.js" } }, "sha512-/4XH147Ui7OGTjg3HbdWe5arnZQSbfuRzdr9Ec7TQi5I7R+ir0Rlc9GIvD4v0XZurELqA035KVXJXpR61xhiTA=="], "@solidjs/vite-plugin-nitro-2/vite": ["vite@7.3.3", "", { "dependencies": { "esbuild": "^0.27.0", "fdir": "^6.5.0", "picomatch": "^4.0.3", "postcss": "^8.5.6", "rollup": "^4.43.0", "tinyglobby": "^0.2.15" }, "optionalDependencies": { "fsevents": "~2.3.3" }, "peerDependencies": { "@types/node": "^20.19.0 || >=22.12.0", "jiti": ">=1.21.0", "less": "^4.0.0", "lightningcss": "^1.21.0", "sass": "^1.70.0", "sass-embedded": "^1.70.0", "stylus": ">=0.54.8", "sugarss": "^5.0.0", "terser": "^5.16.0", "tsx": "^4.8.1", "yaml": "^2.4.2" }, "optionalPeers": ["@types/node", "jiti", "less", "lightningcss", "sass", "sass-embedded", "stylus", "sugarss", "terser", "tsx", "yaml"], "bin": { "vite": "bin/vite.js" } }, "sha512-/4XH147Ui7OGTjg3HbdWe5arnZQSbfuRzdr9Ec7TQi5I7R+ir0Rlc9GIvD4v0XZurELqA035KVXJXpR61xhiTA=="], @@ -2063,8 +2129,6 @@ "@tanstack/start-plugin-core/@babel/code-frame": ["@babel/code-frame@7.27.1", "", { "dependencies": { "@babel/helper-validator-identifier": "^7.27.1", "js-tokens": "^4.0.0", "picocolors": "^1.1.1" } }, "sha512-cjQ7ZlQ0Mv3b47hABuTevyTuYN4i+loJKGeV9flcCgIK37cCXRh+L1bd3iBHlynerhQ7BhCkn2BPbQUL+rGqFg=="], - "@tanstack/start-plugin-core/srvx": ["srvx@0.11.15", "", { "bin": { "srvx": "bin/srvx.mjs" } }, "sha512-iXsux0UcOjdvs0LCMa2Ws3WwcDUozA3JN3BquNXkaFPP7TpRqgunKdEgoZ/uwb1J6xaYHfxtz9Twlh6yzwM6Tg=="], - "@tanstack/start-plugin-core/zod": ["zod@4.4.3", "", {}, "sha512-ytENFjIJFl2UwYglde2jchW2Hwm4GJFLDiSXWdTrJQBIN9Fcyp7n4DhxJEiWNAJMV1/BqWfW/kkg71UDcHJyTQ=="], "@types/babel__core/@babel/parser": ["@babel/parser@7.29.3", "", { "dependencies": { "@babel/types": "^7.29.0" }, "bin": "./bin/babel-parser.js" }, "sha512-b3ctpQwp+PROvU/cttc4OYl4MzfJUWy6FZg+PMXfzmt/+39iHVF0sDfqay8TQM3JA2EUOyKcFZt75jWriQijsA=="], @@ -2073,8 +2137,6 @@ "@vercel/nft/estree-walker": ["estree-walker@2.0.2", "", {}, "sha512-Rfkk/Mp/DL7JVje3u18FxFujQlTNR2q6QfMSMB7AvCBx91NGj/ba3kCfza0f6dVDbw7YlRf/nDrn7pQrCCyQ/w=="], - "@vitejs/plugin-react/@rolldown/pluginutils": ["@rolldown/pluginutils@1.0.0-rc.3", "", {}, "sha512-eybk3TjzzzV97Dlj5c+XrBFW57eTNhzod66y9HrBlzJ6NsCrWCp/2kaPS3K9wJmurBC0Tdw4yPjXKZqlznim3Q=="], - "anymatch/picomatch": ["picomatch@2.3.2", "", {}, "sha512-V7+vQEJ06Z+c5tSye8S+nHUfI51xoXIXjHQ99cQtKUkQqqO1kO/KCJUfZXuB47h/YBlDhah2H3hdUGXn8ie0oA=="], "archiver-utils/glob": ["glob@10.5.0", "", { "dependencies": { "foreground-child": "^3.1.0", "jackspeak": "^3.1.2", "minimatch": "^9.0.4", "minipass": "^7.1.2", "package-json-from-dist": "^1.0.0", "path-scurry": "^1.11.1" }, "bin": { "glob": "dist/esm/bin.mjs" } }, "sha512-DfXN8DfhJ7NH3Oe7cFmu3NCu1wKbkReJ8TorzSAFbSKrlNaQSKfIzqYqVY8zlbs2NLBbWpRiU52GX2PbaBVNkg=="], @@ -2085,9 +2147,9 @@ "babel-plugin-jsx-dom-expressions/@babel/helper-module-imports": ["@babel/helper-module-imports@7.18.6", "", { "dependencies": { "@babel/types": "^7.18.6" } }, "sha512-0NFvs3VkuSYbFi1x2Vd6tKrywq+z/cLeYC/RJNFrIX/30Bf5aiGYbtvGXolEktzJH8o5E5KJ3tT+nkxuuZFVlA=="], - "h3-v2/rou3": ["rou3@0.8.1", "", {}, "sha512-ePa+XGk00/3HuCqrEnK3LxJW7I0SdNg6EFzKUJG73hMAdDcOUC/i/aSz7LSDwLrGr33kal/rqOGydzwl6U7zBA=="], + "h3/srvx": ["srvx@0.9.8", "", { "bin": { "srvx": "bin/srvx.mjs" } }, "sha512-RZaxTKJEE/14HYn8COLuUOJAt0U55N9l1Xf6jj+T0GoA01EUH1Xz5JtSUOI+EHn+AEgPCVn7gk6jHJffrr06fQ=="], - "h3-v2/srvx": ["srvx@0.11.15", "", { "bin": { "srvx": "bin/srvx.mjs" } }, "sha512-iXsux0UcOjdvs0LCMa2Ws3WwcDUozA3JN3BquNXkaFPP7TpRqgunKdEgoZ/uwb1J6xaYHfxtz9Twlh6yzwM6Tg=="], + "h3-v2/rou3": ["rou3@0.8.1", "", {}, "sha512-ePa+XGk00/3HuCqrEnK3LxJW7I0SdNg6EFzKUJG73hMAdDcOUC/i/aSz7LSDwLrGr33kal/rqOGydzwl6U7zBA=="], "lazystream/readable-stream": ["readable-stream@2.3.8", "", { "dependencies": { "core-util-is": "~1.0.0", "inherits": "~2.0.3", "isarray": "~1.0.0", "process-nextick-args": "~2.0.0", "safe-buffer": "~5.1.1", "string_decoder": "~1.1.1", "util-deprecate": "~1.0.1" } }, "sha512-8p0AUk4XODgIewSi0l8Epjs+EVnWiK7NoDIEGU0HhE7+ZyY8D1IMY7odu5lRrFXGg71L15KG8QrPmum45RTtdA=="], @@ -2137,8 +2199,6 @@ "strip-ansi-cjs/ansi-regex": ["ansi-regex@5.0.1", "", {}, "sha512-quJQXlTSUGL2LH9SUXo8VwsY4soanhgo6LNSm84E1LBcE8s3O0wpdiRzyR9z/ZZJMlMWv37qOOb9pdJlMUEKFQ=="], - "strip-literal/js-tokens": ["js-tokens@9.0.1", "", {}, "sha512-mxa9E9ITFOt0ban3j6L5MpjwegGz6lBQmM1IJkWeBZGcMxto50+eWdjC/52xDbS2vy0k7vIMK0Fe2wfL9OQSpQ=="], - "tar/yallist": ["yallist@5.0.0", "", {}, "sha512-YgvUTfwqyc7UXVMrB+SImsVYSmTS8X/tSrtdNZMImM+n7+QTriRXyXim0mBrTXNeqzVF0KWGgHPeiyViFFrNDw=="], "unctx/unplugin": ["unplugin@2.3.11", "", { "dependencies": { "@jridgewell/remapping": "^2.3.5", "acorn": "^8.15.0", "picomatch": "^4.0.3", "webpack-virtual-modules": "^0.6.2" } }, "sha512-5uKD0nqiYVzlmCRs01Fhs2BdkEgBS3SAVP6ndrBsuK42iC2+JHyxM05Rm9G8+5mkmRtzMZGY8Ct5+mliZxU/Ww=="], @@ -2251,6 +2311,8 @@ "@fixtures/tanstack-start/@types/node/undici-types": ["undici-types@6.21.0", "", {}, "sha512-iwDZqg0QAGrg9Rav5H4n0M64c3mkR59cJ6wQp+7C4nI0gsmExaedaYLNO44eT4AtBBwjbTiGPMlt2Md0T9H9JQ=="], + "@fixtures/tanstack-start/@vitejs/plugin-react/@rolldown/pluginutils": ["@rolldown/pluginutils@1.0.0-rc.3", "", {}, "sha512-eybk3TjzzzV97Dlj5c+XrBFW57eTNhzod66y9HrBlzJ6NsCrWCp/2kaPS3K9wJmurBC0Tdw4yPjXKZqlznim3Q=="], + "@isaacs/cliui/string-width/emoji-regex": ["emoji-regex@9.2.2", "", {}, "sha512-L18DaJsXSUk2+42pv8mLs5jJT2hqFkFE4j21wOmgbUqsZ2hL72NsUU785g9RXgo3s0ZNgVl42TiHp3ZtOv/Vyg=="], "@solidjs/start/esbuild/@esbuild/aix-ppc64": ["@esbuild/aix-ppc64@0.25.12", "", { "os": "aix", "cpu": "ppc64" }, "sha512-Hhmwd6CInZ3dwpuGTF8fJG6yoWmsToE+vYgD4nytZVxcu1ulHpUQRAB1UJ8+N1Am3Mz4+xOByoQoSZf4D+CpkA=="], @@ -2309,6 +2371,8 @@ "@tanstack/directive-functions-plugin/@babel/code-frame/@babel/helper-validator-identifier": ["@babel/helper-validator-identifier@7.28.5", "", {}, "sha512-qSs4ifwzKJSV39ucNjsvc6WVHs6b7S03sOh2OcHF9UHfVPqWWALUsNUVzhSBiItjRZoLHx7nIarVjqKVusUZ1Q=="], + "@tanstack/directive-functions-plugin/@babel/code-frame/js-tokens": ["js-tokens@4.0.0", "", {}, "sha512-RdJUflcE3cUzKiMqQgsCu06FPu9UdIJO0beYbPhHN4k6apgJtifcoCtT9bcxOpYBtpD2kCM6Sbzg4CausW/PKQ=="], + "@tanstack/directive-functions-plugin/@tanstack/router-utils/@babel/generator": ["@babel/generator@7.29.1", "", { "dependencies": { "@babel/parser": "^7.29.0", "@babel/types": "^7.29.0", "@jridgewell/gen-mapping": "^0.3.12", "@jridgewell/trace-mapping": "^0.3.28", "jsesc": "^3.0.2" } }, "sha512-qsaF+9Qcm2Qv8SRIMMscAvG4O3lJ0F1GuMo5HR/Bp02LopNgnZBC/EkbevHFeGs4ls/oPz9v+Bsmzbkbe+0dUw=="], "@tanstack/directive-functions-plugin/@tanstack/router-utils/@babel/parser": ["@babel/parser@7.29.3", "", { "dependencies": { "@babel/types": "^7.29.0" }, "bin": "./bin/babel-parser.js" }, "sha512-b3ctpQwp+PROvU/cttc4OYl4MzfJUWy6FZg+PMXfzmt/+39iHVF0sDfqay8TQM3JA2EUOyKcFZt75jWriQijsA=="], @@ -2317,8 +2381,12 @@ "@tanstack/server-functions-plugin/@babel/code-frame/@babel/helper-validator-identifier": ["@babel/helper-validator-identifier@7.28.5", "", {}, "sha512-qSs4ifwzKJSV39ucNjsvc6WVHs6b7S03sOh2OcHF9UHfVPqWWALUsNUVzhSBiItjRZoLHx7nIarVjqKVusUZ1Q=="], + "@tanstack/server-functions-plugin/@babel/code-frame/js-tokens": ["js-tokens@4.0.0", "", {}, "sha512-RdJUflcE3cUzKiMqQgsCu06FPu9UdIJO0beYbPhHN4k6apgJtifcoCtT9bcxOpYBtpD2kCM6Sbzg4CausW/PKQ=="], + "@tanstack/start-plugin-core/@babel/code-frame/@babel/helper-validator-identifier": ["@babel/helper-validator-identifier@7.28.5", "", {}, "sha512-qSs4ifwzKJSV39ucNjsvc6WVHs6b7S03sOh2OcHF9UHfVPqWWALUsNUVzhSBiItjRZoLHx7nIarVjqKVusUZ1Q=="], + "@tanstack/start-plugin-core/@babel/code-frame/js-tokens": ["js-tokens@4.0.0", "", {}, "sha512-RdJUflcE3cUzKiMqQgsCu06FPu9UdIJO0beYbPhHN4k6apgJtifcoCtT9bcxOpYBtpD2kCM6Sbzg4CausW/PKQ=="], + "archiver-utils/glob/minimatch": ["minimatch@9.0.9", "", { "dependencies": { "brace-expansion": "^2.0.2" } }, "sha512-OBwBN9AL4dqmETlpS2zasx+vTeWclWzkblfZk7KTA5j3jeOONz/tRCnZomUyvNg83wL5Zv9Ss6HMJXAgL8R2Yg=="], "archiver-utils/glob/path-scurry": ["path-scurry@1.11.1", "", { "dependencies": { "lru-cache": "^10.2.0", "minipass": "^5.0.0 || ^6.0.2 || ^7.0.0" } }, "sha512-Xa4Nw17FS9ApQFJ9umLiJS4orGjm7ZzwUrwamcGQuHSzDyth9boKDaycYdDcZDuqYATXw4HFXgaqWTctW/v1HA=="], diff --git a/fixtures/react-router-rsc/README.md b/fixtures/react-router-rsc/README.md new file mode 100644 index 00000000..27e7f9c7 --- /dev/null +++ b/fixtures/react-router-rsc/README.md @@ -0,0 +1,34 @@ +# rsc react-router + +https://vite-rsc-react-router.hiro18181.workers.dev + +> [!NOTE] +> React Router now provides [official RSC support](https://reactrouter.com/how-to/react-server-components) for Vite. The example might not be kept up to date with the latest version. Please refer to React Router's official documentation for the latest integrations. + +Vite RSC example based on demo made by React router team with Parcel: + +- https://github.com/jacob-ebey/parcel-plugin-react-router/ +- https://github.com/jacob-ebey/experimental-parcel-react-router-starter +- https://github.com/remix-run/react-router/tree/rsc/playground/rsc-vite + +See also [`rsc-movies`](https://github.com/hi-ogawa/rsc-movies/). + +[![Open in StackBlitz](https://developer.stackblitz.com/img/open_in_stackblitz.svg)](https://stackblitz.com/github/vitejs/vite-plugin-react/tree/main/packages/plugin-rsc/examples/react-router?file=src%2Froutes%2Froot.tsx) + +Or try it locally by: + +```sh +npx giget gh:vitejs/vite-plugin-react/packages/plugin-rsc/examples/react-router my-app +cd my-app +npm i +npm run dev +npm run build +npm run preview + +# run on @cloudflare/vite-plugin and deploy. +# a separate configuration is found in ./cf/vite.config.ts +npm run cf-dev +npm run cf-build +npm run cf-preview +npm run cf-release +``` diff --git a/fixtures/react-router-rsc/app/paper.css b/fixtures/react-router-rsc/app/paper.css new file mode 100644 index 00000000..84d3e872 --- /dev/null +++ b/fixtures/react-router-rsc/app/paper.css @@ -0,0 +1,150 @@ +@theme { + --default-font-family: "Patrick Hand SC", sans-serif; + --default-mono-font-family: "Patrick Hand SC", sans-serif; + + --color-foreground: black; + --color-danger: rgb(167, 52, 45); + --color-secondary: rgb(11, 116, 213); + --color-success: rgb(134, 163, 97); + --color-warning: rgb(221, 205, 69); + --color-border: #cdcccb; + --color-border-active: rgba(0, 0, 0, 0.2); + + --color-paper-background: white; + --color-paper-border: #cdcccb; + --shadow-paper: -1px 5px 35px -9px rgba(0, 0, 0, 0.2); + + --shadow-btn: 15px 28px 25px -18px rgba(0, 0, 0, 0.2); + --shadow-btn-hover: 2px 8px 8px -5px rgba(0, 0, 0, 0.3); + --color-btn-border: black; + --btn-color-danger: var(--color-danger); + --btn-color-secondary: var(--color-secondary); + --btn-color-success: var(--color-success); + --btn-color-warning: var(--color-warning); +} + +@utility paper-border { + @apply border-2 border-border; + border-bottom-left-radius: 25px 115px; + border-bottom-right-radius: 155px 25px; + border-top-left-radius: 15px 225px; + border-top-right-radius: 25px 150px; +} + +@utility no-paper-border { + @apply border-0; + border-bottom-left-radius: 0; + border-bottom-right-radius: 0; + border-top-left-radius: 0; + border-top-right-radius: 0; +} + +@utility paper-underline { + @apply border-b-3 border-[currentcolor]; + border-bottom-left-radius: 15px 3px; + border-bottom-right-radius: 15px 5px; + border-bottom-style: solid; +} + +@utility paper-underline-hover { + @apply paper-underline border-transparent; + @variant hover { + @apply border-[currentcolor]; + } +} + +@utility paper { + @apply border border-paper-border bg-paper-background p-8 shadow-paper; +} + +@utility breadcrumbs { + @apply flex flex-wrap gap-2; + & > * { + @apply inline-block after:text-lg after:content-[""] not-last:after:ml-2 not-last:after:text-foreground not-last:after:content-["/"]; + } + & > a { + @apply text-secondary; + } +} + +@utility btn { + @apply inline-block cursor-pointer bg-paper-background paper-border px-4 py-2 text-lg shadow-btn transition-[shadow_transition]; + + @variant active { + @apply border-border-active; + } + @variant hover { + @apply translate-y-1 shadow-btn-hover; + } + + &.btn-icon { + @apply aspect-square px-2 py-2; + & img, + & svg { + @apply h-7 w-7; + } + } +} + +@utility btn-* { + border-color: --value(--btn-color-*); + color: --value(--btn-color-*); +} + +@utility btn-sm { + @apply px-2 py-1 text-base; +} + +@utility btn-lg { + @apply px-6 py-3 text-2xl; +} + +@utility label { + @apply mb-1 block font-semibold; +} + +@utility input { + @apply paper-border px-3 py-2; + + @variant disabled { + @apply border-border-active; + } +} + +@utility checkbox { + @apply h-6 w-6 paper-border; + + @variant disabled { + @apply border-border-active; + } +} + +@utility select { + @apply paper-border px-3 py-2; + + @variant disabled { + @apply border-border-active; + } +} + +@layer base { + body { + @apply text-foreground; + } + + * { + @apply outline-secondary; + } +} + +@layer utilities { + .prose { + :where(u):not(:where([class~="not-prose"], [class~="not-prose"] *)) { + @apply paper-underline no-underline; + } + + :where(a):not(:where([class~="not-prose"], [class~="not-prose"] *)) { + @apply paper-underline-hover no-underline text-secondary; + } + } +} diff --git a/fixtures/react-router-rsc/app/root.tsx b/fixtures/react-router-rsc/app/root.tsx new file mode 100644 index 00000000..678b3a48 --- /dev/null +++ b/fixtures/react-router-rsc/app/root.tsx @@ -0,0 +1,55 @@ +// oxlint-disable-next-line import/no-unassigned-import +import "./styles.css"; +import { Link, Outlet } from "react-router"; +import { TestClientState, TestHydrated } from "./routes/client"; +import { DumpError, GlobalNavigationLoadingBar } from "./routes/root.client"; + +export function Layout({ children }: { children: React.ReactNode }) { + console.log("[debug] root - Layout"); + return ( + + + + + React Router Vite + + +
+ +
+ + {children} + + + ); +} + +export default function Component() { + console.log("[debug] root - Component"); + return ( + <> + + + ); +} + +export function ErrorBoundary() { + return ; +} diff --git a/fixtures/react-router-rsc/app/routes.ts b/fixtures/react-router-rsc/app/routes.ts new file mode 100644 index 00000000..5a2907fb --- /dev/null +++ b/fixtures/react-router-rsc/app/routes.ts @@ -0,0 +1,21 @@ +import type { unstable_RSCRouteConfigEntry } from "react-router"; + +export const routes: Array = [ + { + id: "root", + path: "", + lazy: () => import("./root"), + children: [ + { + id: "home", + index: true, + lazy: () => import("./routes/home"), + }, + { + id: "about", + path: "about", + lazy: () => import("./routes/about"), + }, + ], + }, +]; diff --git a/fixtures/react-router-rsc/app/routes/about.tsx b/fixtures/react-router-rsc/app/routes/about.tsx new file mode 100644 index 00000000..583f190f --- /dev/null +++ b/fixtures/react-router-rsc/app/routes/about.tsx @@ -0,0 +1,20 @@ +"use client"; + +import React from "react"; + +export function Component() { + const [count, setCount] = React.useState(0); + + return ( +
+
+

About

+

This is the about page.

+

[test-style-home]

+ +
+
+ ); +} diff --git a/fixtures/react-router-rsc/app/routes/client.tsx b/fixtures/react-router-rsc/app/routes/client.tsx new file mode 100644 index 00000000..8c23e84c --- /dev/null +++ b/fixtures/react-router-rsc/app/routes/client.tsx @@ -0,0 +1,16 @@ +"use client"; + +import React from "react"; + +export function TestHydrated() { + const hydrated = React.useSyncExternalStore( + React.useCallback(() => () => {}, []), + () => true, + () => false, + ); + return [hydrated: {hydrated ? 1 : 0}]; +} + +export function TestClientState() { + return ; +} diff --git a/fixtures/react-router-rsc/app/routes/home.actions.ts b/fixtures/react-router-rsc/app/routes/home.actions.ts new file mode 100644 index 00000000..ece1e13a --- /dev/null +++ b/fixtures/react-router-rsc/app/routes/home.actions.ts @@ -0,0 +1,7 @@ +"use server"; + +export async function sayHello(defaultName: string, formData: FormData) { + await new Promise((resolve) => setTimeout(resolve, 500)); + const name = formData.get("name") || defaultName; + console.log(`[debug] sayHello - ${name}`); +} diff --git a/fixtures/react-router-rsc/app/routes/home.client.tsx b/fixtures/react-router-rsc/app/routes/home.client.tsx new file mode 100644 index 00000000..8f2c4fad --- /dev/null +++ b/fixtures/react-router-rsc/app/routes/home.client.tsx @@ -0,0 +1,12 @@ +"use client"; + +import { useFormStatus } from "react-dom"; + +export function PendingButton() { + const status = useFormStatus(); + return ( + + ); +} diff --git a/fixtures/react-router-rsc/app/routes/home.css b/fixtures/react-router-rsc/app/routes/home.css new file mode 100644 index 00000000..7204e2fd --- /dev/null +++ b/fixtures/react-router-rsc/app/routes/home.css @@ -0,0 +1,3 @@ +.test-style-home { + color: rgb(250, 150, 0); +} diff --git a/fixtures/react-router-rsc/app/routes/home.tsx b/fixtures/react-router-rsc/app/routes/home.tsx new file mode 100644 index 00000000..f82ecd77 --- /dev/null +++ b/fixtures/react-router-rsc/app/routes/home.tsx @@ -0,0 +1,34 @@ +import { sayHello } from "./home.actions.ts"; +import { PendingButton } from "./home.client.tsx"; +// oxlint-disable-next-line import/no-unassigned-import +import "./home.css"; +import { TestActionStateServer } from "./test-action-state/server.tsx"; + +const Component = () => { + return ( +
+
+

Home

+

This is the home page.

+ [test-style-home] +

Server Action

+
+
+ + +
+
+ +
+
+
+ +
+
+
+ ); +}; + +export default Component; diff --git a/fixtures/react-router-rsc/app/routes/root.client.tsx b/fixtures/react-router-rsc/app/routes/root.client.tsx new file mode 100644 index 00000000..8729caa0 --- /dev/null +++ b/fixtures/react-router-rsc/app/routes/root.client.tsx @@ -0,0 +1,44 @@ +"use client"; + +import { useNavigation, useRouteError } from "react-router"; + +export function GlobalNavigationLoadingBar() { + const navigation = useNavigation(); + + if (navigation.state === "idle") return null; + + return ( +
+
+
+ ); +} + +export function DumpError() { + const error = useRouteError(); + const message = + error instanceof Error ? ( +
+ 
+          {JSON.stringify(
+            {
+              ...error,
+              name: error.name,
+              message: error.message,
+            },
+            null,
+            2,
+          )}
+
+ {error.stack && 
{error.stack}
} +
+ ) : ( +
Unknown Error
+ ); + return ( + <> +

Oooops

+ 
{message}
+ + ); +} diff --git a/fixtures/react-router-rsc/app/routes/test-action-state/client.tsx b/fixtures/react-router-rsc/app/routes/test-action-state/client.tsx new file mode 100644 index 00000000..be67c28b --- /dev/null +++ b/fixtures/react-router-rsc/app/routes/test-action-state/client.tsx @@ -0,0 +1,16 @@ +"use client"; + +import React from "react"; + +export function TestActionStateClient(props: { + action: (prev: React.ReactNode) => Promise; +}) { + const [state, formAction, isPending] = React.useActionState(props.action, null); + + return ( +
+ + {isPending ? "pending..." : state} +
+ ); +} diff --git a/fixtures/react-router-rsc/app/routes/test-action-state/server.tsx b/fixtures/react-router-rsc/app/routes/test-action-state/server.tsx new file mode 100644 index 00000000..7044c2e9 --- /dev/null +++ b/fixtures/react-router-rsc/app/routes/test-action-state/server.tsx @@ -0,0 +1,20 @@ +import { TestActionStateClient } from "./client"; + +// Test case based on +// https://github.com/remix-run/react-router/issues/13882 + +export function TestActionStateServer({ message }: { message: string }) { + return ( + { + "use server"; + await new Promise((resolve) => setTimeout(resolve, 200)); + return ( + + [(ok) ({message})] {prev} + + ); + }} + /> + ); +} diff --git a/fixtures/react-router-rsc/app/styles.css b/fixtures/react-router-rsc/app/styles.css new file mode 100644 index 00000000..c66d1648 --- /dev/null +++ b/fixtures/react-router-rsc/app/styles.css @@ -0,0 +1,32 @@ +@import "tailwindcss"; +@plugin "@tailwindcss/typography"; + +@import "./paper.css"; + +@theme { + --animate-progress: progress 1s infinite linear; + + @keyframes progress { + 0% { + transform: translateX(0) scaleX(0); + } + 40% { + transform: translateX(0) scaleX(0.4); + } + 100% { + transform: translateX(100%) scaleX(0.5); + } + } +} + +@utility vt-name { + view-transition-name: var(--vt-name); +} + +@utility no-vt { + view-transition-name: none; +} + +@view-transition { + navigation: auto; +} diff --git a/fixtures/react-router-rsc/package.json b/fixtures/react-router-rsc/package.json new file mode 100644 index 00000000..c8f30999 --- /dev/null +++ b/fixtures/react-router-rsc/package.json @@ -0,0 +1,30 @@ +{ + "name": "@fixtures/react-router-rsc", + "private": true, + "license": "MIT", + "type": "module", + "scripts": { + "dev": "vite dev --port 3200", + "build": "vite build", + "preview": "vite preview", + "test": "bun test" + }, + "dependencies": { + "react": "^19.2.7", + "react-dom": "^19.2.7", + "react-router": "7.16.0" + }, + "devDependencies": { + "@cloudflare/workers-types": "catalog:workers", + "@distilled.cloud/cloudflare-runtime": "workspace:*", + "@distilled.cloud/cloudflare-vite-plugin": "workspace:*", + "@tailwindcss/typography": "^0.5.19", + "@tailwindcss/vite": "^4.3.0", + "@types/react": "^19.2.17", + "@types/react-dom": "^19.2.3", + "@vitejs/plugin-react": "latest", + "@vitejs/plugin-rsc": "latest", + "tailwindcss": "^4.3.0", + "vite": "catalog:" + } +} diff --git a/fixtures/react-router-rsc/public/favicon.ico b/fixtures/react-router-rsc/public/favicon.ico new file mode 100644 index 00000000..5dbdfcdd Binary files /dev/null and b/fixtures/react-router-rsc/public/favicon.ico differ diff --git a/fixtures/react-router-rsc/react-router-vite/entry.browser.tsx b/fixtures/react-router-rsc/react-router-vite/entry.browser.tsx new file mode 100644 index 00000000..f1c3b792 --- /dev/null +++ b/fixtures/react-router-rsc/react-router-vite/entry.browser.tsx @@ -0,0 +1,49 @@ +import { + createFromReadableStream, + createTemporaryReferenceSet, + encodeReply, + setServerCallback, +} from "@vitejs/plugin-rsc/browser"; +import { startTransition, StrictMode } from "react"; +import { hydrateRoot } from "react-dom/client"; +import type { DataRouter, unstable_RSCPayload as RSCServerPayload } from "react-router"; +import { + unstable_createCallServer as createCallServer, + unstable_getRSCStream as getRSCStream, + unstable_RSCHydratedRouter as RSCHydratedRouter, +} from "react-router/dom"; + +// Create and set the callServer function to support post-hydration server actions. +setServerCallback( + createCallServer({ + createFromReadableStream, + createTemporaryReferenceSet, + encodeReply, + }), +); + +// Get and decode the initial server payload +createFromReadableStream(getRSCStream()).then((payload) => { + startTransition(async () => { + const formState = payload.type === "render" ? await payload.formState : undefined; + + hydrateRoot( + document, + + + , + { + // @ts-expect-error - no types for this yet + formState, + }, + ); + }); +}); + +declare let __reactRouterDataRouter: DataRouter; + +if (import.meta.hot) { + import.meta.hot.on("rsc:update", () => { + __reactRouterDataRouter.revalidate(); + }); +} diff --git a/fixtures/react-router-rsc/react-router-vite/entry.rsc.single.tsx b/fixtures/react-router-rsc/react-router-vite/entry.rsc.single.tsx new file mode 100644 index 00000000..5a21ed4f --- /dev/null +++ b/fixtures/react-router-rsc/react-router-vite/entry.rsc.single.tsx @@ -0,0 +1,8 @@ +import type * as EntrySsr from "./entry.ssr"; +import { fetchServer } from "./entry.rsc"; + +export default async function handler(request: Request) { + const ssr = await import.meta.viteRsc.loadModule("ssr", "index"); + + return ssr.default(request, await fetchServer(request)); +} diff --git a/fixtures/react-router-rsc/react-router-vite/entry.rsc.tsx b/fixtures/react-router-rsc/react-router-vite/entry.rsc.tsx new file mode 100644 index 00000000..5d3d27fa --- /dev/null +++ b/fixtures/react-router-rsc/react-router-vite/entry.rsc.tsx @@ -0,0 +1,36 @@ +import { + createTemporaryReferenceSet, + decodeAction, + decodeFormState, + decodeReply, + loadServerAction, + renderToReadableStream, +} from "@vitejs/plugin-rsc/rsc"; +import { unstable_matchRSCServerRequest as matchRSCServerRequest } from "react-router"; +import { routes } from "../app/routes"; + +export function fetchServer(request: Request) { + return matchRSCServerRequest({ + // Provide the React Server touchpoints. + createTemporaryReferenceSet, + decodeAction, + decodeFormState, + decodeReply, + loadServerAction, + // The incoming request. + request, + // The app routes. + routes, + // Encode the match with the React Server implementation. + generateResponse(match, options) { + return new Response(renderToReadableStream(match.payload, options), { + status: match.statusCode, + headers: match.headers, + }); + }, + }); +} + +if (import.meta.hot) { + import.meta.hot.accept(); +} diff --git a/fixtures/react-router-rsc/react-router-vite/entry.ssr.tsx b/fixtures/react-router-rsc/react-router-vite/entry.ssr.tsx new file mode 100644 index 00000000..d4559b37 --- /dev/null +++ b/fixtures/react-router-rsc/react-router-vite/entry.ssr.tsx @@ -0,0 +1,29 @@ +import { createFromReadableStream } from "@vitejs/plugin-rsc/ssr"; +import { renderToReadableStream as renderHTMLToReadableStream } from "react-dom/server.edge"; +import { + unstable_routeRSCServerRequest as routeRSCServerRequest, + unstable_RSCStaticRouter as RSCStaticRouter, +} from "react-router"; + +export default async function handler( + request: Request, + serverResponse: Response, +): Promise { + const bootstrapScriptContent = await import.meta.viteRsc.loadBootstrapScriptContent("index"); + + return await routeRSCServerRequest({ + request, + serverResponse, + createFromReadableStream, + async renderHTML(getPayload, options) { + const payload = getPayload(); + + return await renderHTMLToReadableStream(, { + ...options, + bootstrapScriptContent, + signal: request.signal, + formState: await payload.formState, + }); + }, + }); +} diff --git a/fixtures/react-router-rsc/react-router-vite/entry.worker.tsx b/fixtures/react-router-rsc/react-router-vite/entry.worker.tsx new file mode 100644 index 00000000..cc1f54c5 --- /dev/null +++ b/fixtures/react-router-rsc/react-router-vite/entry.worker.tsx @@ -0,0 +1,24 @@ +import type * as WorkerSsr from "./worker-ssr"; +import handler from "./entry.rsc.single"; + +// The distilled Cloudflare worker wrapper expects a `{ fetch }` default export; +// the RSC single-worker handler is a bare (request) => Response function. +export default { + async fetch(request: Request): Promise { + const url = new URL(request.url); + + // Worker code that needs a non-`react-server` module (here `react-dom/server`) + // must not import it directly in this `rsc` entry — it loads it from the + // `ssr` environment via `loadModule`. Exercises a custom (non-`index`) ssr + // input + cross-environment load through the distilled plugin. + if (url.pathname === "/worker-render") { + const { renderWorkerHtml } = await import.meta.viteRsc.loadModule( + "ssr", + "worker-ssr", + ); + return Response.json({ ok: true, html: renderWorkerHtml() }); + } + + return handler(request); + }, +}; diff --git a/fixtures/react-router-rsc/react-router-vite/types.d.ts b/fixtures/react-router-rsc/react-router-vite/types.d.ts new file mode 100644 index 00000000..bb5578e1 --- /dev/null +++ b/fixtures/react-router-rsc/react-router-vite/types.d.ts @@ -0,0 +1,2 @@ +/// +/// diff --git a/fixtures/react-router-rsc/react-router-vite/worker-ssr.tsx b/fixtures/react-router-rsc/react-router-vite/worker-ssr.tsx new file mode 100644 index 00000000..00880f6c --- /dev/null +++ b/fixtures/react-router-rsc/react-router-vite/worker-ssr.tsx @@ -0,0 +1,13 @@ +import { createElement } from "react"; +import { renderToStaticMarkup } from "react-dom/server.edge"; + +// Lives in the `ssr` environment (no `react-server` condition), so it can use +// `react-dom/server` — which would fail if imported directly in the worker's +// `rsc` entry. The worker reaches it via `loadModule("ssr", "worker-ssr")`. +// This is the pattern James Opstad landed on in +// github.com/agcty/vite-rsc-worker-env-repro PR #1. +export function renderWorkerHtml(): string { + return renderToStaticMarkup( + createElement("section", null, "Worker render via the ssr environment."), + ); +} diff --git a/fixtures/react-router-rsc/test/dev.test.ts b/fixtures/react-router-rsc/test/dev.test.ts new file mode 100644 index 00000000..434ceb6f --- /dev/null +++ b/fixtures/react-router-rsc/test/dev.test.ts @@ -0,0 +1,57 @@ +import { afterAll, beforeAll, expect, test } from "bun:test"; +import { spawn, type ChildProcess } from "node:child_process"; +import { fileURLToPath } from "node:url"; +import path from "node:path"; + +// Dev-mode smoke test: boots `vite dev` (the distilled Cloudflare plugin in +// RSC mode) and asserts the RSC routes, routing, and the worker-loaded ssr +// render all respond. Build-mode tests are intentionally absent — RSC build +// is a separate track. +const fixtureDir = path.dirname(path.dirname(fileURLToPath(import.meta.url))); + +let proc: ChildProcess; +let baseUrl: string; + +beforeAll(async () => { + proc = spawn("bun", ["vite", "dev", "--port", "3251"], { + cwd: fixtureDir, + stdio: ["ignore", "pipe", "pipe"], + }); + baseUrl = await new Promise((resolve, reject) => { + const timer = setTimeout(() => reject(new Error("dev server did not start in time")), 90_000); + const onData = (chunk: Buffer) => { + const match = String(chunk).match(/Local:\s+(http:\/\/\S+?)\/?\s/); + if (match) { + clearTimeout(timer); + resolve(match[1].replace(/\/$/, "")); + } + }; + proc.stdout?.on("data", onData); + proc.stderr?.on("data", onData); + proc.on("exit", (code) => reject(new Error(`dev server exited early (code ${code})`))); + }); +}); + +afterAll(() => { + proc?.kill("SIGTERM"); +}); + +test("renders the RSC home route", async () => { + const res = await fetch(`${baseUrl}/`); + expect(res.status).toBe(200); + expect(await res.text()).toContain("React Router Vite"); +}); + +test("routes to /about", async () => { + const res = await fetch(`${baseUrl}/about`); + expect(res.status).toBe(200); + expect(await res.text()).toContain("About"); +}); + +test("worker loads a custom ssr module via loadModule (react-dom/server in ssr env)", async () => { + const res = await fetch(`${baseUrl}/worker-render`); + expect(res.status).toBe(200); + const body = (await res.json()) as { ok: boolean; html: string }; + expect(body.ok).toBe(true); + expect(body.html).toContain("Worker render via the ssr environment."); +}); diff --git a/fixtures/react-router-rsc/tsconfig.json b/fixtures/react-router-rsc/tsconfig.json new file mode 100644 index 00000000..1950c5a2 --- /dev/null +++ b/fixtures/react-router-rsc/tsconfig.json @@ -0,0 +1,15 @@ +{ + "compilerOptions": { + "allowImportingTsExtensions": true, + "noUnusedLocals": true, + "noUnusedParameters": true, + "skipLibCheck": true, + "verbatimModuleSyntax": true, + "noEmit": true, + "moduleResolution": "Bundler", + "module": "ESNext", + "target": "ESNext", + "lib": ["ESNext", "DOM"], + "jsx": "react-jsx" + } +} diff --git a/fixtures/react-router-rsc/vite.config.ts b/fixtures/react-router-rsc/vite.config.ts new file mode 100644 index 00000000..8496d54f --- /dev/null +++ b/fixtures/react-router-rsc/vite.config.ts @@ -0,0 +1,57 @@ +import cloudflare from "@distilled.cloud/cloudflare-vite-plugin"; +import tailwindcss from "@tailwindcss/vite"; +import react from "@vitejs/plugin-react"; +import rsc from "@vitejs/plugin-rsc"; +import { defineConfig } from "vite"; + +// React Router (hand-rolled on @vitejs/plugin-rsc) wired to the distilled +// Cloudflare vite plugin via the single-worker child-environment model — +// the same topology vermittelbar uses with the official plugin +// (`viteEnvironment: { name: "rsc", childEnvironments: ["ssr"] }`). The worker +// IS the `rsc` env; its handler loads `ssr` at runtime via +// `import.meta.viteRsc.loadModule("ssr", ...)`. +export default defineConfig({ + clearScreen: false, + build: { minify: false }, + plugins: [ + tailwindcss(), + { + // Workaround for https://github.com/tailwindlabs/tailwindcss/pull/19670 + name: "fix-tailwind-full-reload", + configResolved(config) { + const plugin = config.plugins.find((p) => p.name === "@tailwindcss/vite:generate:serve"); + delete plugin?.hotUpdate; + }, + }, + react(), + rsc({ + serverHandler: false, + entries: { + client: "./react-router-vite/entry.browser.tsx", + ssr: "./react-router-vite/entry.ssr.tsx", + rsc: "./react-router-vite/entry.worker.tsx", + }, + }), + cloudflare({ + main: "./react-router-vite/entry.worker.tsx", + compatibilityDate: "2026-03-10", + compatibilityFlags: ["nodejs_compat"], + viteEnvironment: { name: "rsc", childEnvironments: ["ssr"] }, + worker: { name: "fixtures-react-router-rsc" }, + }), + ], + environments: { + // A second `ssr` input the worker loads on demand via + // loadModule("ssr", "worker-ssr") — alongside the framework's `index`. + ssr: { + build: { + rollupOptions: { + input: { "worker-ssr": "./react-router-vite/worker-ssr.tsx" }, + }, + }, + }, + }, + optimizeDeps: { + include: ["react-router", "react-router/internal/react-server-client"], + }, +}); diff --git a/fixtures/react-rsc/README.md b/fixtures/react-rsc/README.md new file mode 100644 index 00000000..cd111710 --- /dev/null +++ b/fixtures/react-rsc/README.md @@ -0,0 +1,40 @@ +# Vite + RSC + +This example shows how to set up a React application with [Server Component](https://react.dev/reference/rsc/server-components) features on Vite using [`@vitejs/plugin-rsc`](https://github.com/vitejs/vite-plugin-react/tree/main/packages/plugin-rsc). + +[![Open in StackBlitz](https://developer.stackblitz.com/img/open_in_stackblitz.svg)](https://stackblitz.com/github/vitejs/vite-plugin-react/tree/main/packages/plugin-rsc/examples/starter) + +```sh +# run dev server +npm run dev + +# build for production and preview +npm run build +npm run preview +``` + +## API usage + +See [`@vitejs/plugin-rsc`](https://github.com/vitejs/vite-plugin-react/tree/main/packages/plugin-rsc) for the documentation. + +- [`vite.config.ts`](./vite.config.ts) + - `@vitejs/plugin-rsc/plugin` +- [`./src/framework/entry.rsc.tsx`](./src/framework/entry.rsc.tsx) + - `@vitejs/plugin-rsc/rsc` + - `import.meta.viteRsc.loadModule` +- [`./src/framework/entry.ssr.tsx`](./src/framework/entry.ssr.tsx) + - `@vitejs/plugin-rsc/ssr` + - `import.meta.viteRsc.loadBootstrapScriptContent` + - `rsc-html-stream/server` +- [`./src/framework/entry.browser.tsx`](./src/framework/entry.browser.tsx) + - `@vitejs/plugin-rsc/browser` + - `rsc-html-stream/client` + +## Notes + +- [`./src/framework/entry.{browser,rsc,ssr}.tsx`](./src/framework) (with inline comments) provides an overview of how low level RSC (React flight) API can be used to build RSC framework. +- You can use [`vite-plugin-inspect`](https://github.com/antfu-collective/vite-plugin-inspect) to understand how `"use client"` and `"use server"` directives are transformed internally. + +## Deployment + +See [vite-plugin-rsc-deploy-example](https://github.com/hi-ogawa/vite-plugin-rsc-deploy-example) diff --git a/fixtures/react-rsc/package.json b/fixtures/react-rsc/package.json new file mode 100644 index 00000000..e98daaf8 --- /dev/null +++ b/fixtures/react-rsc/package.json @@ -0,0 +1,28 @@ +{ + "name": "@fixtures/react-rsc", + "version": "0.0.0", + "private": true, + "license": "MIT", + "type": "module", + "scripts": { + "dev": "vite dev --port 3100", + "build": "vite build", + "preview": "vite preview", + "test": "bun test" + }, + "dependencies": { + "react": "^19.2.7", + "react-dom": "^19.2.7" + }, + "devDependencies": { + "@cloudflare/workers-types": "catalog:workers", + "@distilled.cloud/cloudflare-runtime": "workspace:*", + "@distilled.cloud/cloudflare-vite-plugin": "workspace:*", + "@types/react": "^19.2.17", + "@types/react-dom": "^19.2.3", + "@vitejs/plugin-react": "latest", + "@vitejs/plugin-rsc": "latest", + "rsc-html-stream": "^0.0.7", + "vite": "catalog:" + } +} diff --git a/fixtures/react-rsc/public/vite.svg b/fixtures/react-rsc/public/vite.svg new file mode 100644 index 00000000..e7b8dfb1 --- /dev/null +++ b/fixtures/react-rsc/public/vite.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/fixtures/react-rsc/src/action.tsx b/fixtures/react-rsc/src/action.tsx new file mode 100644 index 00000000..6b5029dc --- /dev/null +++ b/fixtures/react-rsc/src/action.tsx @@ -0,0 +1,11 @@ +"use server"; + +let serverCounter = 0; + +export async function getServerCounter() { + return serverCounter; +} + +export async function updateServerCounter(change: number) { + serverCounter += change; +} diff --git a/fixtures/react-rsc/src/assets/react.svg b/fixtures/react-rsc/src/assets/react.svg new file mode 100644 index 00000000..6c87de9b --- /dev/null +++ b/fixtures/react-rsc/src/assets/react.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/fixtures/react-rsc/src/client.tsx b/fixtures/react-rsc/src/client.tsx new file mode 100644 index 00000000..ac69d863 --- /dev/null +++ b/fixtures/react-rsc/src/client.tsx @@ -0,0 +1,9 @@ +"use client"; + +import React from "react"; + +export function ClientCounter() { + const [count, setCount] = React.useState(0); + + return ; +} diff --git a/fixtures/react-rsc/src/framework/entry.browser.tsx b/fixtures/react-rsc/src/framework/entry.browser.tsx new file mode 100644 index 00000000..5e2c2031 --- /dev/null +++ b/fixtures/react-rsc/src/framework/entry.browser.tsx @@ -0,0 +1,138 @@ +import { + createFromReadableStream, + createFromFetch, + setServerCallback, + createTemporaryReferenceSet, + encodeReply, +} from "@vitejs/plugin-rsc/browser"; +import React from "react"; +import { createRoot, hydrateRoot } from "react-dom/client"; +import { rscStream } from "rsc-html-stream/client"; +import type { RscPayload } from "./entry.rsc"; +import { GlobalErrorBoundary } from "./error-boundary"; +import { createRscRenderRequest } from "./request"; + +async function main() { + // stash `setPayload` function to trigger re-rendering + // from outside of `BrowserRoot` component (e.g. server function call, navigation, hmr) + let setPayload: (v: RscPayload) => void; + + // deserialize RSC stream back to React VDOM for CSR + const initialPayload = await createFromReadableStream( + // initial RSC stream is injected in SSR stream as + rscStream, + ); + + // browser root component to (re-)render RSC payload as state + function BrowserRoot() { + const [payload, setPayload_] = React.useState(initialPayload); + + React.useEffect(() => { + setPayload = (v) => React.startTransition(() => setPayload_(v)); + }, [setPayload_]); + + // re-fetch/render on client side navigation + React.useEffect(() => { + return listenNavigation(() => fetchRscPayload()); + }, []); + + return payload.root; + } + + // re-fetch RSC and trigger re-rendering + async function fetchRscPayload() { + const renderRequest = createRscRenderRequest(window.location.href); + const payload = await createFromFetch(fetch(renderRequest)); + setPayload(payload); + } + + // register a handler which will be internally called by React + // on server function request after hydration. + setServerCallback(async (id, args) => { + const temporaryReferences = createTemporaryReferenceSet(); + const renderRequest = createRscRenderRequest(window.location.href, { + id, + body: await encodeReply(args, { temporaryReferences }), + }); + const payload = await createFromFetch(fetch(renderRequest), { + temporaryReferences, + }); + setPayload(payload); + const { ok, data } = payload.returnValue!; + if (!ok) throw data; + return data; + }); + + // hydration + const browserRoot = ( + + + + + + ); + if ("__NO_HYDRATE" in globalThis) { + createRoot(document).render(browserRoot); + } else { + hydrateRoot(document, browserRoot, { + formState: initialPayload.formState, + }); + } + + // implement server HMR by triggering re-fetch/render of RSC upon server code change + if (import.meta.hot) { + import.meta.hot.on("rsc:update", () => { + fetchRscPayload(); + }); + } +} + +// a little helper to setup events interception for client side navigation +function listenNavigation(onNavigation: () => void) { + window.addEventListener("popstate", onNavigation); + + const oldPushState = window.history.pushState; + window.history.pushState = function (...args) { + const res = oldPushState.apply(this, args); + onNavigation(); + return res; + }; + + const oldReplaceState = window.history.replaceState; + window.history.replaceState = function (...args) { + const res = oldReplaceState.apply(this, args); + onNavigation(); + return res; + }; + + function onClick(e: MouseEvent) { + let link = (e.target as Element).closest("a"); + if ( + link && + link instanceof HTMLAnchorElement && + link.href && + (!link.target || link.target === "_self") && + link.origin === location.origin && + !link.hasAttribute("download") && + e.button === 0 && // left clicks only + !e.metaKey && // open in new tab (mac) + !e.ctrlKey && // open in new tab (windows) + !e.altKey && // download + !e.shiftKey && + !e.defaultPrevented + ) { + e.preventDefault(); + history.pushState(null, "", link.href); + } + } + document.addEventListener("click", onClick); + + return () => { + document.removeEventListener("click", onClick); + window.removeEventListener("popstate", onNavigation); + window.history.pushState = oldPushState; + window.history.replaceState = oldReplaceState; + }; +} + +main(); diff --git a/fixtures/react-rsc/src/framework/entry.rsc.tsx b/fixtures/react-rsc/src/framework/entry.rsc.tsx new file mode 100644 index 00000000..68f4eb94 --- /dev/null +++ b/fixtures/react-rsc/src/framework/entry.rsc.tsx @@ -0,0 +1,121 @@ +import { + renderToReadableStream, + createTemporaryReferenceSet, + decodeReply, + loadServerAction, + decodeAction, + decodeFormState, +} from "@vitejs/plugin-rsc/rsc"; +import type { ReactFormState } from "react-dom/client"; +import type * as EntrySsr from "./entry.ssr.tsx"; +import { Root } from "../root.tsx"; +import { parseRenderRequest } from "./request.tsx"; + +// The schema of payload which is serialized into RSC stream on rsc environment +// and deserialized on ssr/client environments. +export type RscPayload = { + // this demo renders/serializes/deserizlies entire root html element + // but this mechanism can be changed to render/fetch different parts of components + // based on your own route conventions. + root: React.ReactNode; + // server action return value of non-progressive enhancement case + returnValue?: { ok: boolean; data: unknown }; + // server action form state (e.g. useActionState) of progressive enhancement case + formState?: ReactFormState; +}; + +// the plugin by default assumes `rsc` entry having default export of request handler. +// however, how server entries are executed can be customized by registering own server handler. +export default { fetch: handler }; + +async function handler(request: Request): Promise { + // differentiate RSC, SSR, action, etc. + const renderRequest = parseRenderRequest(request); + request = renderRequest.request; + + // handle server function request + let returnValue: RscPayload["returnValue"] | undefined; + let formState: ReactFormState | undefined; + let temporaryReferences: unknown | undefined; + let actionStatus: number | undefined; + if (renderRequest.isAction === true) { + if (renderRequest.actionId) { + // action is called via `ReactClient.setServerCallback`. + const contentType = request.headers.get("content-type"); + const body = contentType?.startsWith("multipart/form-data") + ? await request.formData() + : await request.text(); + temporaryReferences = createTemporaryReferenceSet(); + const args = await decodeReply(body, { temporaryReferences }); + const action = await loadServerAction(renderRequest.actionId); + try { + const data = await action.apply(null, args); + returnValue = { ok: true, data }; + } catch (e) { + returnValue = { ok: false, data: e }; + actionStatus = 500; + } + } else { + // otherwise server function is called via `
` + // before hydration (e.g. when javascript is disabled). + // aka progressive enhancement. + const formData = await request.formData(); + const decodedAction = await decodeAction(formData); + try { + const result = await decodedAction(); + formState = await decodeFormState(result, formData); + } catch { + // there's no single general obvious way to surface this error, + // so explicitly return classic 500 response. + return new Response("Internal Server Error: server action failed", { + status: 500, + }); + } + } + } + + // serialization from React VDOM tree to RSC stream. + // we render RSC stream after handling server function request + // so that new render reflects updated state from server function call + // to achieve single round trip to mutate and fetch from server. + const rscPayload: RscPayload = { + root: , + formState, + returnValue, + }; + const rscOptions = { temporaryReferences }; + const rscStream = renderToReadableStream(rscPayload, rscOptions); + + // Respond RSC stream without HTML rendering as decided by `RenderRequest` + if (renderRequest.isRsc) { + return new Response(rscStream, { + status: actionStatus, + headers: { + "content-type": "text/x-component;charset=utf-8", + }, + }); + } + + // Delegate to SSR environment for html rendering. + // The plugin provides `loadModule` helper to allow loading SSR environment entry module + // in RSC environment. however this can be customized by implementing own runtime communication + // e.g. `@cloudflare/vite-plugin`'s service binding. + const ssrEntryModule = await import.meta.viteRsc.loadModule("ssr", "index"); + const ssrResult = await ssrEntryModule.renderHTML(rscStream, { + formState, + // allow quick simulation of javascript disabled browser + debugNojs: renderRequest.url.searchParams.has("__nojs"), + }); + + // respond html + return new Response(ssrResult.stream, { + status: ssrResult.status, + headers: { + "Content-type": "text/html", + }, + }); +} + +if (import.meta.hot) { + import.meta.hot.accept(); +} diff --git a/fixtures/react-rsc/src/framework/entry.ssr.tsx b/fixtures/react-rsc/src/framework/entry.ssr.tsx new file mode 100644 index 00000000..27d8ae71 --- /dev/null +++ b/fixtures/react-rsc/src/framework/entry.ssr.tsx @@ -0,0 +1,70 @@ +import { createFromReadableStream } from "@vitejs/plugin-rsc/ssr"; +import React from "react"; +import type { ReactFormState } from "react-dom/client"; +import { renderToReadableStream } from "react-dom/server.edge"; +import { injectRSCPayload } from "rsc-html-stream/server"; +import type { RscPayload } from "./entry.rsc"; + +export async function renderHTML( + rscStream: ReadableStream, + options: { + formState?: ReactFormState; + nonce?: string; + debugNojs?: boolean; + }, +): Promise<{ stream: ReadableStream; status?: number }> { + // duplicate one RSC stream into two. + // - one for SSR (ReactClient.createFromReadableStream below) + // - another for browser hydration payload by injecting . + const [rscStream1, rscStream2] = rscStream.tee(); + + // deserialize RSC stream back to React VDOM + let payload: Promise | undefined; + function SsrRoot() { + // deserialization needs to be kicked off inside ReactDOMServer context + // for ReactDomServer preinit/preloading to work + payload ??= createFromReadableStream(rscStream1); + return React.use(payload).root; + } + + // render html (traditional SSR) + const bootstrapScriptContent = await import.meta.viteRsc.loadBootstrapScriptContent("index"); + let htmlStream: ReadableStream; + let status: number | undefined; + try { + htmlStream = await renderToReadableStream(, { + bootstrapScriptContent: options?.debugNojs ? undefined : bootstrapScriptContent, + nonce: options?.nonce, + formState: options?.formState, + }); + } catch { + // fallback to render an empty shell and run pure CSR on browser, + // which can replay server component error and trigger error boundary. + status = 500; + htmlStream = await renderToReadableStream( + + + + + , + { + bootstrapScriptContent: + `self.__NO_HYDRATE=1;` + (options?.debugNojs ? "" : bootstrapScriptContent), + nonce: options?.nonce, + }, + ); + } + + let responseStream: ReadableStream = htmlStream; + if (!options?.debugNojs) { + // initial RSC stream is injected in HTML stream as + // using utility made by devongovett https://github.com/devongovett/rsc-html-stream + responseStream = responseStream.pipeThrough( + injectRSCPayload(rscStream2, { + nonce: options?.nonce, + }), + ); + } + + return { stream: responseStream, status }; +} diff --git a/fixtures/react-rsc/src/framework/error-boundary.tsx b/fixtures/react-rsc/src/framework/error-boundary.tsx new file mode 100644 index 00000000..ccfb696d --- /dev/null +++ b/fixtures/react-rsc/src/framework/error-boundary.tsx @@ -0,0 +1,75 @@ +"use client"; + +import React from "react"; + +// Minimal ErrorBoundary example to handle errors globally on browser +export function GlobalErrorBoundary(props: { children?: React.ReactNode }) { + return {props.children}; +} + +// https://github.com/vercel/next.js/blob/33f8428f7066bf8b2ec61f025427ceb2a54c4bdf/packages/next/src/client/components/error-boundary.tsx +// https://react.dev/reference/react/Component#catching-rendering-errors-with-an-error-boundary +class ErrorBoundary extends React.Component<{ + children?: React.ReactNode; + errorComponent: React.FC<{ + error: Error; + reset: () => void; + }>; +}> { + state: { error?: Error } = {}; + + static getDerivedStateFromError(error: Error) { + return { error }; + } + + reset = () => { + this.setState({ error: null }); + }; + + render() { + const error = this.state.error; + if (error) { + return ; + } + return this.props.children; + } +} + +// https://github.com/vercel/next.js/blob/677c9b372faef680d17e9ba224743f44e1107661/packages/next/src/build/webpack/loaders/next-app-loader.ts#L73 +// https://github.com/vercel/next.js/blob/677c9b372faef680d17e9ba224743f44e1107661/packages/next/src/client/components/error-boundary.tsx#L145 +function DefaultGlobalErrorPage(props: { error: Error; reset: () => void }) { + return ( + + + Unexpected Error + + +

Caught an unexpected error

+ 
+          Error:{" "}
+          {import.meta.env.DEV && "message" in props.error ? props.error.message : "(Unknown)"}
+
+ + + + ); +} diff --git a/fixtures/react-rsc/src/framework/request.tsx b/fixtures/react-rsc/src/framework/request.tsx new file mode 100644 index 00000000..7d48788e --- /dev/null +++ b/fixtures/react-rsc/src/framework/request.tsx @@ -0,0 +1,58 @@ +// Framework conventions (arbitrary choices for this demo): +// - Use `_.rsc` URL suffix to differentiate RSC requests from SSR requests +// - Use `x-rsc-action` header to pass server action ID +const URL_POSTFIX = "_.rsc"; +const HEADER_ACTION_ID = "x-rsc-action"; + +// Parsed request information used to route between RSC/SSR rendering and action handling. +// Created by parseRenderRequest() from incoming HTTP requests. +type RenderRequest = { + isRsc: boolean; // true if request should return RSC payload (via _.rsc suffix) + isAction: boolean; // true if this is a server action call (POST request) + actionId?: string; // server action ID from x-rsc-action header + request: Request; // normalized Request with _.rsc suffix removed from URL + url: URL; // normalized URL with _.rsc suffix removed +}; + +export function createRscRenderRequest( + urlString: string, + action?: { id: string; body: BodyInit }, +): Request { + const url = new URL(urlString); + url.pathname += URL_POSTFIX; + const headers = new Headers(); + if (action) { + headers.set(HEADER_ACTION_ID, action.id); + } + return new Request(url.toString(), { + method: action ? "POST" : "GET", + headers, + body: action?.body, + }); +} + +export function parseRenderRequest(request: Request): RenderRequest { + const url = new URL(request.url); + const isAction = request.method === "POST"; + if (url.pathname.endsWith(URL_POSTFIX)) { + url.pathname = url.pathname.slice(0, -URL_POSTFIX.length); + const actionId = request.headers.get(HEADER_ACTION_ID) || undefined; + if (request.method === "POST" && !actionId) { + throw new Error("Missing action id header for RSC action request"); + } + return { + isRsc: true, + isAction, + actionId, + request: new Request(url, request), + url, + }; + } else { + return { + isRsc: false, + isAction, + request, + url, + }; + } +} diff --git a/fixtures/react-rsc/src/index.css b/fixtures/react-rsc/src/index.css new file mode 100644 index 00000000..f4d2128c --- /dev/null +++ b/fixtures/react-rsc/src/index.css @@ -0,0 +1,112 @@ +:root { + font-family: system-ui, Avenir, Helvetica, Arial, sans-serif; + line-height: 1.5; + font-weight: 400; + + color-scheme: light dark; + color: rgba(255, 255, 255, 0.87); + background-color: #242424; + + font-synthesis: none; + text-rendering: optimizeLegibility; + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; +} + +a { + font-weight: 500; + color: #646cff; + text-decoration: inherit; +} +a:hover { + color: #535bf2; +} + +body { + margin: 0; + display: flex; + place-items: center; + min-width: 320px; + min-height: 100vh; +} + +h1 { + font-size: 3.2em; + line-height: 1.1; +} + +button { + border-radius: 8px; + border: 1px solid transparent; + padding: 0.6em 1.2em; + font-size: 1em; + font-weight: 500; + font-family: inherit; + background-color: #1a1a1a; + cursor: pointer; + transition: border-color 0.25s; +} +button:hover { + border-color: #646cff; +} +button:focus, +button:focus-visible { + outline: 4px auto -webkit-focus-ring-color; +} + +@media (prefers-color-scheme: light) { + :root { + color: #213547; + background-color: #ffffff; + } + a:hover { + color: #747bff; + } + button { + background-color: #f9f9f9; + } +} + +#root { + max-width: 1280px; + margin: 0 auto; + padding: 2rem; + text-align: center; +} + +.logo { + height: 6em; + padding: 1.5em; + will-change: filter; + transition: filter 300ms; +} +.logo:hover { + filter: drop-shadow(0 0 2em #646cffaa); +} +.logo.react:hover { + filter: drop-shadow(0 0 2em #61dafbaa); +} + +@keyframes logo-spin { + from { + transform: rotate(0deg); + } + to { + transform: rotate(360deg); + } +} + +@media (prefers-reduced-motion: no-preference) { + a:nth-of-type(2) .logo { + animation: logo-spin infinite 20s linear; + } +} + +.card { + padding: 1rem; +} + +.read-the-docs { + color: #888; + text-align: left; +} diff --git a/fixtures/react-rsc/src/root.tsx b/fixtures/react-rsc/src/root.tsx new file mode 100644 index 00000000..aaf322d0 --- /dev/null +++ b/fixtures/react-rsc/src/root.tsx @@ -0,0 +1,70 @@ +// oxlint-disable-next-line import/no-unassigned-import +import "./index.css"; // css import is automatically injected in exported server components +// oxlint-disable-next-line import/no-absolute-path +import viteLogo from "/vite.svg"; +import { getServerCounter, updateServerCounter } from "./action.tsx"; +import reactLogo from "./assets/react.svg"; +import { ClientCounter } from "./client.tsx"; + +export function Root(props: { url: URL }) { + return ( + + + + + + Vite + RSC + + + + + + ); +} + +function App(props: { url: URL }) { + return ( +
+ +

Vite + RSC

+
+ +
+
+ + + +
+
Request URL: {props.url?.href}
+
    +
  • + Edit src/client.tsx to test client HMR. +
    • +
  • + Edit src/root.tsx to test server HMR. +
    • +
  • + Visit{" "} + + _.rsc + {" "} + to view RSC stream payload. +
    • +
  • + Visit{" "} + + ?__nojs + {" "} + to test server action without js enabled. +
    • +
+
+ ); +} diff --git a/fixtures/react-rsc/test/dev.test.ts b/fixtures/react-rsc/test/dev.test.ts new file mode 100644 index 00000000..6a86c442 --- /dev/null +++ b/fixtures/react-rsc/test/dev.test.ts @@ -0,0 +1,46 @@ +import { afterAll, beforeAll, expect, test } from "bun:test"; +import { spawn, type ChildProcess } from "node:child_process"; +import { fileURLToPath } from "node:url"; +import path from "node:path"; + +// Dev-mode smoke test: boots `vite dev` (the distilled Cloudflare plugin in +// RSC mode) and asserts the minimal RSC app renders — server components, +// the client component, and the server action are all present in the SSR'd +// HTML. Build-mode is a separate track and intentionally not tested here. +const fixtureDir = path.dirname(path.dirname(fileURLToPath(import.meta.url))); + +let proc: ChildProcess; +let baseUrl: string; + +beforeAll(async () => { + proc = spawn("bun", ["vite", "dev", "--port", "3151"], { + cwd: fixtureDir, + stdio: ["ignore", "pipe", "pipe"], + }); + baseUrl = await new Promise((resolve, reject) => { + const timer = setTimeout(() => reject(new Error("dev server did not start in time")), 90_000); + const onData = (chunk: Buffer) => { + const match = String(chunk).match(/Local:\s+(http:\/\/\S+?)\/?\s/); + if (match) { + clearTimeout(timer); + resolve(match[1].replace(/\/$/, "")); + } + }; + proc.stdout?.on("data", onData); + proc.stderr?.on("data", onData); + proc.on("exit", (code) => reject(new Error(`dev server exited early (code ${code})`))); + }); +}); + +afterAll(() => { + proc?.kill("SIGTERM"); +}); + +test("server-renders the RSC app (server component + client component + server action)", async () => { + const res = await fetch(`${baseUrl}/`); + expect(res.status).toBe(200); + const html = await res.text(); + expect(html).toContain("Vite + RSC"); // server component + expect(html).toContain("Client Counter"); // client component + expect(html).toContain("Server Counter"); // server action +}); diff --git a/fixtures/react-rsc/test/plugin-order.test.ts b/fixtures/react-rsc/test/plugin-order.test.ts new file mode 100644 index 00000000..3aa02ec4 --- /dev/null +++ b/fixtures/react-rsc/test/plugin-order.test.ts @@ -0,0 +1,47 @@ +import { afterAll, beforeAll, expect, test } from "bun:test"; +import { spawn, type ChildProcess } from "node:child_process"; +import { fileURLToPath } from "node:url"; +import path from "node:path"; + +// Locks order-independence (review finding): with the Cloudflare plugin +// registered BEFORE rsc(), the rsc env's resolve.conditions lists `react-server` +// after the workerd conditions (not first). Export-condition resolution is +// set-membership, so the app must still render correctly — if `react-server` +// weren't effective in the rsc env, flight generation would 500. See +// vite.config.cf-first.ts. +const fixtureDir = path.dirname(path.dirname(fileURLToPath(import.meta.url))); + +let proc: ChildProcess; +let baseUrl: string; + +beforeAll(async () => { + proc = spawn("bun", ["vite", "dev", "-c", "vite.config.cf-first.ts", "--port", "3152"], { + cwd: fixtureDir, + stdio: ["ignore", "pipe", "pipe"], + }); + baseUrl = await new Promise((resolve, reject) => { + const timer = setTimeout(() => reject(new Error("dev server did not start in time")), 90_000); + const onData = (chunk: Buffer) => { + const match = String(chunk).match(/Local:\s+(http:\/\/\S+?)\/?\s/); + if (match) { + clearTimeout(timer); + resolve(match[1].replace(/\/$/, "")); + } + }; + proc.stdout?.on("data", onData); + proc.stderr?.on("data", onData); + proc.on("exit", (code) => reject(new Error(`dev server exited early (code ${code})`))); + }); +}); + +afterAll(() => { + proc?.kill("SIGTERM"); +}); + +test("RSC renders correctly even with cloudflare() before rsc() (react-server not first in conditions)", async () => { + const res = await fetch(`${baseUrl}/`); + expect(res.status).toBe(200); + const html = await res.text(); + expect(html).toContain("Vite + RSC"); + expect(html).toContain("Client Counter"); +}); diff --git a/fixtures/react-rsc/tsconfig.json b/fixtures/react-rsc/tsconfig.json new file mode 100644 index 00000000..b212cd7a --- /dev/null +++ b/fixtures/react-rsc/tsconfig.json @@ -0,0 +1,17 @@ +{ + "compilerOptions": { + "erasableSyntaxOnly": true, + "allowImportingTsExtensions": true, + "noUnusedLocals": true, + "noUnusedParameters": true, + "skipLibCheck": true, + "verbatimModuleSyntax": true, + "noEmit": true, + "moduleResolution": "Bundler", + "module": "ESNext", + "target": "ESNext", + "lib": ["ESNext", "DOM"], + "types": ["vite/client", "@vitejs/plugin-rsc/types"], + "jsx": "react-jsx" + } +} diff --git a/fixtures/react-rsc/vite.config.cf-first.ts b/fixtures/react-rsc/vite.config.cf-first.ts new file mode 100644 index 00000000..a1c9ebb1 --- /dev/null +++ b/fixtures/react-rsc/vite.config.cf-first.ts @@ -0,0 +1,37 @@ +import cloudflare from "@distilled.cloud/cloudflare-vite-plugin"; +import react from "@vitejs/plugin-react"; +import rsc from "@vitejs/plugin-rsc"; +import { defineConfig } from "vite"; + +// Same app as vite.config.ts but with the Cloudflare plugin registered BEFORE +// `rsc()`. This deliberately produces the non-conventional condition ordering +// (the rsc env's `resolve.conditions` lists workerd conditions before +// `react-server`). The plugin-order.test.ts boots this config to prove RSC dev +// resolves correctly regardless of plugin order — export-condition resolution +// is set-membership (React's own `exports` ordering decides), so `react-server` +// being present is what matters, not its index in the conditions array. +export default defineConfig({ + plugins: [ + cloudflare({ + main: "./src/framework/entry.rsc.tsx", + compatibilityDate: "2026-03-10", + compatibilityFlags: ["nodejs_compat"], + viteEnvironment: { name: "rsc", childEnvironments: ["ssr"] }, + worker: { name: "fixtures-react-rsc-cf-first" }, + }), + rsc({ serverHandler: false }), + react(), + ], + + environments: { + rsc: { + build: { rollupOptions: { input: { index: "./src/framework/entry.rsc.tsx" } } }, + }, + ssr: { + build: { rollupOptions: { input: { index: "./src/framework/entry.ssr.tsx" } } }, + }, + client: { + build: { rollupOptions: { input: { index: "./src/framework/entry.browser.tsx" } } }, + }, + }, +}); diff --git a/fixtures/react-rsc/vite.config.ts b/fixtures/react-rsc/vite.config.ts new file mode 100644 index 00000000..c0895e05 --- /dev/null +++ b/fixtures/react-rsc/vite.config.ts @@ -0,0 +1,39 @@ +import cloudflare from "@distilled.cloud/cloudflare-vite-plugin"; +import react from "@vitejs/plugin-react"; +import rsc from "@vitejs/plugin-rsc"; +import { defineConfig } from "vite"; + +// Minimal React Server Components app (the @vitejs/plugin-rsc `starter`) +// wired to the distilled Cloudflare vite plugin, to reproduce and then fix +// RSC dev support (cloudflare-tools#43). +// +// The worker IS the `rsc` environment: plugin-rsc resolves it with the +// `react-server` condition and its `default export` ({ fetch }) is the +// request handler. `serverHandler: false` tells plugin-rsc not to mount its +// own Node dev middleware, so requests route into workerd instead. +export default defineConfig({ + plugins: [ + rsc({ serverHandler: false }), + react(), + cloudflare({ + main: "./src/framework/entry.rsc.tsx", + compatibilityDate: "2026-03-10", + compatibilityFlags: ["nodejs_compat"], + // The Worker is the `rsc` environment; it loads `ssr` modules at runtime. + viteEnvironment: { name: "rsc", childEnvironments: ["ssr"] }, + worker: { name: "fixtures-react-rsc" }, + }), + ], + + environments: { + rsc: { + build: { rollupOptions: { input: { index: "./src/framework/entry.rsc.tsx" } } }, + }, + ssr: { + build: { rollupOptions: { input: { index: "./src/framework/entry.ssr.tsx" } } }, + }, + client: { + build: { rollupOptions: { input: { index: "./src/framework/entry.browser.tsx" } } }, + }, + }, +}); diff --git a/fixtures/static-website/src/server.ts b/fixtures/static-website/src/server.ts index 47ae6e97..8771f28c 100644 --- a/fixtures/static-website/src/server.ts +++ b/fixtures/static-website/src/server.ts @@ -1,5 +1,9 @@ export default { - async fetch(_: Request) { - return new Response("Hello World"); + async fetch(request: Request) { + const url = new URL(request.url); + if (url.pathname.startsWith("/api/")) { + return Response.json({ name: "Cloudflare" }); + } + return new Response(null, { status: 404 }); }, }; diff --git a/fixtures/static-website/test/dev.test.ts b/fixtures/static-website/test/dev.test.ts new file mode 100644 index 00000000..4e938e4e --- /dev/null +++ b/fixtures/static-website/test/dev.test.ts @@ -0,0 +1,50 @@ +import { expect, test } from "@playwright/test"; +import { spawn, type ChildProcess } from "node:child_process"; +import path from "node:path"; +import { fileURLToPath } from "node:url"; + +const fixtureDir = path.dirname(path.dirname(fileURLToPath(import.meta.url))); + +let proc: ChildProcess; +let baseUrl: string; + +test.beforeAll(async () => { + proc = spawn("bun", ["vite", "dev", "--host", "127.0.0.1", "--port", "3351"], { + cwd: fixtureDir, + env: { ...process.env, DISTILLED_STATIC_WEBSITE_WORKER: "1" }, + stdio: ["ignore", "pipe", "pipe"], + }); + baseUrl = await new Promise((resolve, reject) => { + const timer = setTimeout(() => reject(new Error("dev server did not start in time")), 90_000); + const onData = (chunk: Buffer) => { + const match = String(chunk).match(/Local:\s+(http:\/\/\S+?)\/?\s/); + if (match) { + clearTimeout(timer); + resolve(match[1].replace(/\/$/, "")); + } + }; + proc.stdout?.on("data", onData); + proc.stderr?.on("data", onData); + proc.on("exit", (code) => reject(new Error(`dev server exited early (code ${code})`))); + }); +}); + +test.afterAll(() => { + proc?.kill("SIGTERM"); +}); + +test("dev server serves Vite HTML assets before falling through to the Worker", async ({ + request, +}) => { + const home = await request.get(`${baseUrl}/`); + expect(home.status()).toBe(200); + expect(await home.text()).toContain('/src/main.ts"'); + + const html = await request.get(`${baseUrl}/index.html`); + expect(html.status()).toBe(200); + expect(await html.text()).toContain('/src/main.ts"'); + + const api = await request.get(`${baseUrl}/api/test`); + expect(api.status()).toBe(200); + expect(await api.json()).toEqual({ name: "Cloudflare" }); +}); diff --git a/fixtures/static-website/vite.config.ts b/fixtures/static-website/vite.config.ts index 82edbf46..58324733 100644 --- a/fixtures/static-website/vite.config.ts +++ b/fixtures/static-website/vite.config.ts @@ -1,8 +1,25 @@ import cloudflare from "@distilled.cloud/cloudflare-vite-plugin"; import { defineConfig } from "vite"; +const enableTestWorker = process.env.DISTILLED_STATIC_WEBSITE_WORKER === "1"; + const config = defineConfig({ - plugins: [cloudflare({})], + plugins: [ + cloudflare( + enableTestWorker + ? { + main: "./src/server.ts", + compatibilityDate: "2025-09-27", + worker: { + name: "fixtures-static-website", + assets: { + notFoundHandling: "single-page-application", + }, + }, + } + : {}, + ), + ], }); export default config; diff --git a/packages/cloudflare-rolldown-plugin/src/options.ts b/packages/cloudflare-rolldown-plugin/src/options.ts index 9ad597fb..53f71450 100644 --- a/packages/cloudflare-rolldown-plugin/src/options.ts +++ b/packages/cloudflare-rolldown-plugin/src/options.ts @@ -28,4 +28,66 @@ export interface CloudflarePluginOptions { * ``` */ exports?: Array; + /** + * Which Vite environment hosts the Worker, and any child environments it + * loads at runtime. Defaults to the single `ssr` environment. + * + * `@vitejs/plugin-rsc` apps run the Worker in the `rsc` environment (resolved + * with the `react-server` condition) and load the `ssr` environment from it, + * so they set `{ name: "rsc", childEnvironments: ["ssr"] }`. Every named + * environment is given the Worker treatment (workerd resolve conditions, + * dependency pre-bundling) and a module runner in dev. Mirrors the + * official `@cloudflare/vite-plugin` option of the same name. + * + * @default { name: "ssr", childEnvironments: [] } + */ + viteEnvironment?: { + name?: string; + childEnvironments?: Array; + }; +} + +/** + * Resolves the Worker's entry Vite environment and any child environments it + * loads at runtime. The entry environment owns the Worker's input and build + * output; children (e.g. an RSC app's `ssr` environment) still need the Worker + * treatment and a dev module runner so the entry can load modules from them. + */ +export function workerEnvironments(options: CloudflarePluginOptions): { + entry: string; + children: Array; + all: Array; +} { + const entry = options.viteEnvironment?.name ?? "ssr"; + const children = options.viteEnvironment?.childEnvironments ?? []; + + // `client` is Vite's reserved browser environment — it must never be given + // Worker config. Children must be distinct and must not collide with the + // entry, since each environment name becomes a computed key in the generated + // config (a collision would silently overwrite one env with another's + // settings). Mirrors the validation in `@cloudflare/vite-plugin`. + if (entry === "client") { + throw new Error( + `[cloudflare] viteEnvironment.name cannot be "client" (the reserved browser environment).`, + ); + } + for (const child of children) { + if (child === "client") { + throw new Error( + `[cloudflare] viteEnvironment.childEnvironments cannot include "client" (the reserved browser environment).`, + ); + } + if (child === entry) { + throw new Error( + `[cloudflare] viteEnvironment.childEnvironments cannot include the entry environment "${entry}".`, + ); + } + } + if (new Set(children).size !== children.length) { + throw new Error( + `[cloudflare] viteEnvironment.childEnvironments contains duplicate names: ${JSON.stringify(children)}`, + ); + } + + return { entry, children, all: [entry, ...children] }; } diff --git a/packages/cloudflare-rolldown-plugin/src/plugins/options.ts b/packages/cloudflare-rolldown-plugin/src/plugins/options.ts index 61862ebd..4d82e689 100644 --- a/packages/cloudflare-rolldown-plugin/src/plugins/options.ts +++ b/packages/cloudflare-rolldown-plugin/src/plugins/options.ts @@ -1,7 +1,7 @@ import path from "node:path"; import type * as vite from "vite"; import { createPlugin } from "../factory.js"; -import type { CloudflarePluginOptions } from "../options.js"; +import { type CloudflarePluginOptions, workerEnvironments } from "../options.js"; import { hasNodejsCompat } from "../utils.js"; import { WORKER_ENTRY_PREFIX } from "./virtual-modules.js"; @@ -55,10 +55,11 @@ export const optionsPlugin = createPlugin<"options", OptionsApi>("options", (plu async config(userConfig) { const vite = await import("vite"); const isRolldown = "rolldownVersion" in this.meta; + const { entry: entryEnv, children: childEnvs } = workerEnvironments(pluginOptions); input = normalizeInput( pluginOptions.main ?? - userConfig.environments?.ssr?.build?.rolldownOptions?.input ?? - userConfig.environments?.ssr?.build?.rollupOptions?.input ?? + userConfig.environments?.[entryEnv]?.build?.rolldownOptions?.input ?? + userConfig.environments?.[entryEnv]?.build?.rollupOptions?.input ?? {}, ); const rollupOptions: vite.Rollup.RollupOptions = { @@ -70,8 +71,122 @@ export const optionsPlugin = createPlugin<"options", OptionsApi>("options", (plu process.env.NODE_ENV || userConfig.mode || "production", ); const appType = userConfig.appType ?? (Object.keys(input).length === 0 ? "spa" : "custom"); + + // The dep-prebundle scanner for each Worker environment must be rooted + // at THAT environment's own entry, so its whole module graph (e.g. an + // RSC app's `ssr` env pulling react-dom/server + react) is bundled in + // the initial optimize pass. Sharing one `entries` (or one config + // object) across envs leaves children with no scan root, so their deps + // are discovered lazily and re-optimized mid-session — which re-hashes + // and duplicates singletons like React (a null hooks dispatcher). + const resolveEnvironmentEntries = (name: string): Array | undefined => { + // Single-worker (non-RSC) default: preserve the original behavior + // exactly — the optimizer's scan root comes only from an explicit + // `main`, otherwise it's left to Vite's auto-discovery. The per-env + // input fallback below applies only to multi-environment topologies. + if (childEnvs.length === 0) { + return pluginOptions.main ? [vite.normalizePath(pluginOptions.main)] : undefined; + } + const rawInput = + name === entryEnv + ? (pluginOptions.main ?? + userConfig.environments?.[name]?.build?.rolldownOptions?.input ?? + userConfig.environments?.[name]?.build?.rollupOptions?.input) + : (userConfig.environments?.[name]?.build?.rolldownOptions?.input ?? + userConfig.environments?.[name]?.build?.rollupOptions?.input ?? + pluginOptions.main); + if (!rawInput) return undefined; + const values = + typeof rawInput === "string" + ? [rawInput] + : Array.isArray(rawInput) + ? rawInput + : Object.values(rawInput); + return values.length > 0 ? values.map((value) => vite.normalizePath(value)) : undefined; + }; + + // The Worker treatment (workerd resolve conditions + dependency + // pre-bundling) applies to the entry environment AND every child + // environment it loads at runtime — without `noDiscovery: false` the + // child/entry envs get Vite's throwing deps optimizer, which breaks + // RSC dev (`registerMissingImport is not supported in dev `). A + // fresh config object is built per environment so each can carry its + // own `optimizeDeps.entries` without aliasing the others. + const makeWorkerEnvironment = ( + name: string, + { isEntry }: { isEntry: boolean }, + ): vite.EnvironmentOptions => ({ + resolve: { + noExternal: true, + conditions: [...DEFAULT_RESOLVE_CONDITION_NAMES, "development|production"], + }, + optimizeDeps: { + noDiscovery: false, + ignoreOutdatedRequests: true, + entries: resolveEnvironmentEntries(name), + ...(isRolldown + ? { + rolldownOptions: { + platform: "neutral", + resolve: { + conditionNames: [ + ...DEFAULT_RESOLVE_CONDITION_NAMES, + "development|production", + ], + mainFields: DEFAULT_RESOLVE_MAIN_FIELDS, + extensions: DEFAULT_RESOLVE_EXTENSIONS, + }, + transform: { + target: TARGET, + define, + }, + }, + } + : { + esbuildOptions: { + platform: "neutral", + conditions: [...DEFAULT_RESOLVE_CONDITION_NAMES, "development|production"], + resolveExtensions: DEFAULT_RESOLVE_EXTENSIONS, + mainFields: DEFAULT_RESOLVE_MAIN_FIELDS, + target: TARGET, + define, + }, + }), + }, + keepProcessEnv: true, + // The entry environment owns the Worker's build input and server + // output directory; children (e.g. `ssr`) keep their own build config + // from the framework plugin (`@vitejs/plugin-rsc`). + ...(isEntry + ? { + build: { + ssr: true, + target: TARGET, + emitAssets: true, + copyPublicDir: false, + outDir: getOutputDirectory(userConfig, "server"), + ...(isRolldown + ? { + rolldownOptions: { + ...rollupOptions, + platform: "neutral", + resolve: { + mainFields: DEFAULT_RESOLVE_MAIN_FIELDS, + extensions: DEFAULT_RESOLVE_EXTENSIONS, + }, + }, + } + : { rollupOptions }), + }, + } + : {}), + }); + return { appType, + // Legacy top-level `ssr` namespace: a baseline for any SSR-kind env + // that doesn't override. Each Worker env sets its own `resolve` + // below; this stays as a harmless default. ssr: { noExternal: true, resolve: { @@ -94,65 +209,10 @@ export const optionsPlugin = createPlugin<"options", OptionsApi>("options", (plu outDir: getOutputDirectory(userConfig, "client"), }, }, - ssr: { - resolve: { - noExternal: true, - conditions: [...DEFAULT_RESOLVE_CONDITION_NAMES, "development|production"], - }, - build: { - ssr: true, - target: TARGET, - emitAssets: true, - copyPublicDir: false, - outDir: getOutputDirectory(userConfig, "server"), - ...(isRolldown - ? { - rolldownOptions: { - ...rollupOptions, - platform: "neutral", - resolve: { - mainFields: DEFAULT_RESOLVE_MAIN_FIELDS, - extensions: DEFAULT_RESOLVE_EXTENSIONS, - }, - }, - } - : { rollupOptions }), - }, - optimizeDeps: { - noDiscovery: false, - ignoreOutdatedRequests: true, - entries: pluginOptions.main ? vite.normalizePath(pluginOptions.main) : undefined, - ...(isRolldown - ? { - rolldownOptions: { - platform: "neutral", - resolve: { - conditionNames: [ - ...DEFAULT_RESOLVE_CONDITION_NAMES, - "development|production", - ], - mainFields: DEFAULT_RESOLVE_MAIN_FIELDS, - extensions: DEFAULT_RESOLVE_EXTENSIONS, - }, - transform: { - target: TARGET, - define, - }, - }, - } - : { - esbuildOptions: { - platform: "neutral", - conditions: [...DEFAULT_RESOLVE_CONDITION_NAMES, "development|production"], - resolveExtensions: DEFAULT_RESOLVE_EXTENSIONS, - mainFields: DEFAULT_RESOLVE_MAIN_FIELDS, - target: TARGET, - define, - }, - }), - }, - keepProcessEnv: true, - }, + [entryEnv]: makeWorkerEnvironment(entryEnv, { isEntry: true }), + ...Object.fromEntries( + childEnvs.map((name) => [name, makeWorkerEnvironment(name, { isEntry: false })]), + ), }, }; }, diff --git a/packages/cloudflare-runtime/src/PluginContext.ts b/packages/cloudflare-runtime/src/PluginContext.ts index 5a09742b..d25627d9 100644 --- a/packages/cloudflare-runtime/src/PluginContext.ts +++ b/packages/cloudflare-runtime/src/PluginContext.ts @@ -60,7 +60,11 @@ export const make = ( const services = configs.flatMap((config) => config.services ?? []); const sockets = configs.flatMap((config) => config.sockets ?? []); const extensions = configs.flatMap((config) => config.extensions ?? []); - const middlewares = configs.flatMap((config) => config.middlewares ?? []); + const middlewareOrder = (middleware: Plugin.Middleware) => + middleware.name === "plugin:entry" ? 1 : 0; + const middlewares = configs + .flatMap((config) => config.middlewares ?? []) + .sort((a, b) => middlewareOrder(a) - middlewareOrder(b)); return { entry: middlewares[0]?.name, sockets, diff --git a/packages/cloudflare-runtime/src/Runtime.ts b/packages/cloudflare-runtime/src/Runtime.ts index 1b601317..e18eda9a 100644 --- a/packages/cloudflare-runtime/src/Runtime.ts +++ b/packages/cloudflare-runtime/src/Runtime.ts @@ -35,9 +35,14 @@ export const RuntimeLive = Layer.effect( const workerd = yield* Workerd.Workerd; const storage = yield* Storage.Storage; const docker = yield* Docker.Docker; - const plugins = yield* PluginContext.pickPluginsFromContext(); + const basePlugins = yield* PluginContext.pickPluginsFromContext(); const preparePlugins = Effect.fnUntraced(function* (worker: RuntimeWorker) { + const plugins = new Map(basePlugins); + const overrides = yield* PluginContext.pickPluginsFromContext(); + for (const [key, builder] of overrides) { + plugins.set(key, builder); + } const context = yield* PluginContext.make(worker as RuntimeWorker, plugins); const bindings = yield* Effect.all(worker.bindings as ReadonlyArray>, { concurrency: "unbounded", diff --git a/packages/cloudflare-runtime/src/bindings/assets/Assets.ts b/packages/cloudflare-runtime/src/bindings/assets/Assets.ts index 0989ccfe..618f303d 100644 --- a/packages/cloudflare-runtime/src/bindings/assets/Assets.ts +++ b/packages/cloudflare-runtime/src/bindings/assets/Assets.ts @@ -274,7 +274,7 @@ export const AssetsLive = Layer.effect( }, }, ], - middleware: [ + middlewares: [ { name: "assets:router", worker: { @@ -332,7 +332,7 @@ export const buildAssetConfigs = ( staticRouting = parseStaticRouting(worker.assets.runWorkerFirst); } const routerConfig: RouterConfig = { - invoke_user_worker_ahead_of_assets: worker.assets?.runWorkerFirst !== false, + invoke_user_worker_ahead_of_assets: worker.assets?.runWorkerFirst === true, static_routing: staticRouting, has_user_worker: true, }; diff --git a/packages/cloudflare-runtime/test/Plugin.test.ts b/packages/cloudflare-runtime/test/Plugin.test.ts index 56c71cc5..aabac49d 100644 --- a/packages/cloudflare-runtime/test/Plugin.test.ts +++ b/packages/cloudflare-runtime/test/Plugin.test.ts @@ -92,6 +92,55 @@ describe("Plugin / PluginContext", () => { }), ); + it.effect("keeps plugin:entry as the innermost middleware before the user worker", () => + Effect.gen(function* () { + class Outer extends Plugin.Service()("cloudflare-runtime/plugin/Outer") {} + class Entry extends Plugin.Service()("cloudflare-runtime/plugin/Entry") {} + const outerLayer = Layer.succeed( + Outer, + Outer.of({ + middlewares: [ + { + name: "assets:router", + worker: { compatibilityDate: "2026-03-10" }, + upstreamBindingName: "USER_WORKER", + }, + ], + }), + ); + const entryLayer = Layer.succeed( + Entry, + Entry.of({ + middlewares: [ + { + name: "plugin:entry", + worker: { compatibilityDate: "2026-03-10" }, + upstreamBindingName: "USER_WORKER", + }, + ], + }), + ); + const ctx = yield* PluginContext.make(makeWorker()).pipe( + Effect.provide(Layer.mergeAll(entryLayer, outerLayer)), + ); + const config = yield* ctx.config; + expect(config.entry).toBe("assets:router"); + + const router = config.services.find((s) => s.name === "assets:router") as { + worker: { bindings: Array }; + }; + const entry = config.services.find((s) => s.name === "plugin:entry") as { + worker: { bindings: Array }; + }; + expect(router.worker.bindings.find((b) => b.name === "USER_WORKER")?.service?.name).toBe( + "plugin:entry", + ); + expect(entry.worker.bindings.find((b) => b.name === "USER_WORKER")?.service?.name).toBe( + SERVICE_USER_WORKER, + ); + }), + ); + it.effect("Plugin.useSync reads a plugin field synchronously", () => Effect.gen(function* () { const ctx = yield* PluginContext.make(makeWorker()); diff --git a/packages/cloudflare-runtime/test/bindings/Assets.test.ts b/packages/cloudflare-runtime/test/bindings/Assets.test.ts index 74eb12f0..260e9e55 100644 --- a/packages/cloudflare-runtime/test/bindings/Assets.test.ts +++ b/packages/cloudflare-runtime/test/bindings/Assets.test.ts @@ -66,7 +66,7 @@ describe("Assets / buildAssetConfigs", () => { }, }); expect(routerConfig).toMatchObject({ - invoke_user_worker_ahead_of_assets: true, + invoke_user_worker_ahead_of_assets: false, has_user_worker: true, }); expect(routerConfig.static_routing).toBeDefined(); @@ -86,4 +86,22 @@ describe("Assets / buildAssetConfigs", () => { }); expect(routerConfig.invoke_user_worker_ahead_of_assets).toBe(false); }); + + it("defaults to assets-first routing when runWorkerFirst is not specified", () => { + const { routerConfig } = Assets.buildAssetConfigs({ + compatibilityDate: "2026-03-10", + compatibilityFlags: [], + assets: { directory: "/tmp/x" }, + }); + expect(routerConfig.invoke_user_worker_ahead_of_assets).toBe(false); + }); + + it("routes every request to the user worker when runWorkerFirst is true", () => { + const { routerConfig } = Assets.buildAssetConfigs({ + compatibilityDate: "2026-03-10", + compatibilityFlags: [], + assets: { directory: "/tmp/x", runWorkerFirst: true }, + }); + expect(routerConfig.invoke_user_worker_ahead_of_assets).toBe(true); + }); }); diff --git a/packages/cloudflare-vite-plugin/src/assets/ViteAssets.ts b/packages/cloudflare-vite-plugin/src/assets/ViteAssets.ts index 42543905..aa4210a9 100644 --- a/packages/cloudflare-vite-plugin/src/assets/ViteAssets.ts +++ b/packages/cloudflare-vite-plugin/src/assets/ViteAssets.ts @@ -82,7 +82,7 @@ export const ViteAssetsLive = (viteDevServer: vite.ViteDevServer) => }, }, ], - middleware: [ + middlewares: [ { name: "assets:router", worker: { diff --git a/packages/cloudflare-vite-plugin/src/dev-plugin.ts b/packages/cloudflare-vite-plugin/src/dev-plugin.ts index 0555ecc6..2bab1038 100644 --- a/packages/cloudflare-vite-plugin/src/dev-plugin.ts +++ b/packages/cloudflare-vite-plugin/src/dev-plugin.ts @@ -1,3 +1,4 @@ +import { workerEnvironments } from "@distilled.cloud/cloudflare-rolldown-plugin/options"; import type { OptionsApi } from "@distilled.cloud/cloudflare-rolldown-plugin/plugins"; import { resolvePluginApi } from "@distilled.cloud/cloudflare-rolldown-plugin/utils"; import type { RuntimeServices } from "@distilled.cloud/cloudflare-runtime"; @@ -28,26 +29,28 @@ export function dev(options: CloudflareVitePluginOptions): vite.Plugin { optionsApi = resolvePluginApi(plugins ?? [], "distilled-cloudflare:options"); }, config() { - return { - environments: { - ssr: { - dev: { - createEnvironment(name, config) { - const hasConfigureServer = config.plugins.some( - (plugin) => - plugin.name === "distilled-cloudflare:dev" && - plugin.configureServer !== undefined, - ); - if (!hasConfigureServer) { - return vite.createRunnableDevEnvironment(name, config); - } + const devEnvironmentConfig = { + dev: { + createEnvironment(name: string, config: vite.ResolvedConfig) { + const hasConfigureServer = config.plugins.some( + (plugin) => + plugin.name === "distilled-cloudflare:dev" && plugin.configureServer !== undefined, + ); + if (!hasConfigureServer) { + return vite.createRunnableDevEnvironment(name, config); + } - return new DistilledDevEnvironment(name, config); - }, - }, + return new DistilledDevEnvironment(name, config); }, }, }; + // The entry environment and every child environment it loads at runtime + // run in workerd with a module runner. (Default: the single `ssr` env.) + return { + environments: Object.fromEntries( + workerEnvironments(options).all.map((name) => [name, devEnvironmentConfig]), + ), + }; }, async buildEnd() { if (!isServerRestarting) { @@ -89,9 +92,18 @@ export function dev(options: CloudflareVitePluginOptions): vite.Plugin { options.context ?? context!, ); const address = handle.address; - const ssrEnvironment = server.environments.ssr; - if (ssrEnvironment instanceof DistilledDevEnvironment) { - await ssrEnvironment.connect(address); + // Connect a module runner for the entry environment and each child it + // loads at runtime, so cross-environment imports (e.g. an RSC entry + // loading `ssr` modules) resolve to a live runner inside workerd. + // Settle each environment's dep optimizer BEFORE its runner starts + // importing: a re-optimization after first import re-hashes shared deps + // and duplicates singletons like React (a null hooks dispatcher). + for (const environmentName of workerEnvironments(options).all) { + const environment = server.environments[environmentName]; + if (environment instanceof DistilledDevEnvironment) { + await environment.depsOptimizer?.init(); + await environment.connect(address); + } } if (!input) { // If there is no input, we are in SPA mode, so we don't need to route requests to the server. diff --git a/packages/cloudflare-vite-plugin/src/dev-server.ts b/packages/cloudflare-vite-plugin/src/dev-server.ts index 41182d89..d0ffcfc2 100644 --- a/packages/cloudflare-vite-plugin/src/dev-server.ts +++ b/packages/cloudflare-vite-plugin/src/dev-server.ts @@ -1,5 +1,7 @@ +import { workerEnvironments } from "@distilled.cloud/cloudflare-rolldown-plugin/options"; import type { BindingHooks, Module, RuntimeServices } from "@distilled.cloud/cloudflare-runtime"; import { layerRuntime, Runtime } from "@distilled.cloud/cloudflare-runtime"; +import { RuntimeLive } from "@distilled.cloud/cloudflare-runtime/Runtime"; import { DurableObjectNamespace, Json, @@ -7,7 +9,7 @@ import { UnsafeEval, } from "@distilled.cloud/cloudflare-runtime/bindings"; import * as Credentials from "@distilled.cloud/cloudflare/Credentials"; -import type * as Context from "effect/Context"; +import * as Context from "effect/Context"; import * as Effect from "effect/Effect"; import * as Exit from "effect/Exit"; import * as Layer from "effect/Layer"; @@ -36,9 +38,20 @@ export const startServer = async ( context: Context.Context, ) => { const scope = Scope.makeUnsafe(); - const address = await serve(options, entry, server).pipe( - Effect.provide(ViteAssets.ViteAssetsLive(server)), + const assetsContext = await ViteAssets.ViteAssetsLive(server).pipe( + Layer.buildWithScope(scope), Effect.provide(context), + Effect.runPromise, + ); + const contextWithAssets = Context.merge(context, assetsContext); + const runtimeContext = await RuntimeLive.pipe( + Layer.buildWithScope(scope), + Effect.provideContext(contextWithAssets), + Effect.runPromise, + ); + const devContext = Context.merge(contextWithAssets, runtimeContext); + const address = await serve(options, entry, server).pipe( + Effect.provideContext(devContext), Scope.provide(scope), Effect.runPromise, ); @@ -103,7 +116,9 @@ const serve = Effect.fn(function* ( className: "ModuleRunnerDO", }), Json.local("__DISTILLED_ENVIRONMENT__", { - environmentName: "ssr", + // The Worker runs the entry environment (the `rsc` env for RSC apps, + // `ssr` otherwise); its module runner imports the entry from here. + environmentName: workerEnvironments(options).entry, entryId: entry.id, entryName: entry.name, }), diff --git a/packages/cloudflare-vite-plugin/src/module-runner/module-runner.worker.ts b/packages/cloudflare-vite-plugin/src/module-runner/module-runner.worker.ts index a7a0771d..250f71ce 100644 --- a/packages/cloudflare-vite-plugin/src/module-runner/module-runner.worker.ts +++ b/packages/cloudflare-vite-plugin/src/module-runner/module-runner.worker.ts @@ -57,7 +57,12 @@ export class ModuleRunnerDO extends DurableObject { globalThis.__VITE_ENVIRONMENT_RUNNER_IMPORT__ = async (environmentName: string, id: string) => { const moduleRunner = this.moduleRunners.get(environmentName); if (!moduleRunner) { - throw new Error(`Module runner not initialized for environment: "${environmentName}"`); + throw new Error( + `Module runner not initialized for environment: "${environmentName}". ` + + `If this is a child environment loaded at runtime (e.g. an RSC app's ` + + `"ssr" environment), ensure it's listed in the plugin's ` + + `viteEnvironment.childEnvironments.`, + ); } return callbacks.run(this.env, () => moduleRunner.import(id)); };