This commit is contained in:
Corey Johnson 2025-07-07 15:30:58 -07:00
parent d39c164228
commit 06b9217fee
5 changed files with 139 additions and 47 deletions

View File

@ -49,6 +49,7 @@
"packages/nano-remix": {
"name": "@workshop/nano-remix",
"dependencies": {
"bun-plugin-tailwind": "^0.0.15",
"hono": "catalog:",
},
"devDependencies": {
@ -119,6 +120,19 @@
"typescript": "^5",
},
},
"packages/werewolf-ui": {
"name": "werewolfUI",
"version": "0.1.0",
"dependencies": {
"bun-plugin-tailwind": "^0.0.15",
"hono": "^4.8.3",
"lucide-static": "^0.525.0",
"tailwindcss": "^4.0.6",
},
"devDependencies": {
"@types/bun": "latest",
},
},
},
"catalog": {
"hono": "^4.8.0",
@ -184,6 +198,8 @@
"@types/node": ["@types/node@24.0.3", "", { "dependencies": { "undici-types": "~7.8.0" } }, "sha512-R4I/kzCYAdRLzfiCabn9hxWfbuHS573x+r0dJMkkzThEa7pbrcDWK+9zu3e7aBOouf+rQAciqPFMnxwr0aWgKg=="],
"@types/react": ["@types/react@19.1.8", "", { "dependencies": { "csstype": "^3.0.2" } }, "sha512-AwAfQ2Wa5bCx9WP8nZL2uMZWod7J7/JSplxbTmBQ5ms6QpqNYm672H0Vu9ZVKVngQ+ii4R/byguVEUZQyeg44g=="],
"@types/ws": ["@types/ws@8.18.1", "", { "dependencies": { "@types/node": "*" } }, "sha512-ThVF6DCVhA8kUGy+aazFQ4kXQ7E1Ty7A3ypFOe0IcJV8O/M511G99AW24irKrW56Wt44yG9+ij8FaqoBGkuBXg=="],
"@vladfrangu/async_event_emitter": ["@vladfrangu/async_event_emitter@2.4.6", "", {}, "sha512-RaI5qZo6D2CVS6sTHFKg1v5Ohq/+Bo2LZ5gzUEwZ/WkHhwtGTCB/sVLw8ijOkAUxasZ+WshN/Rzj4ywsABJ5ZA=="],
@ -246,6 +262,8 @@
"buffer-more-ints": ["buffer-more-ints@0.0.2", "", {}, "sha512-PDgX2QJgUc5+Jb2xAoBFP5MxhtVUmZHR33ak+m/SDxRdCrbnX1BggRIaxiW7ImwfmO4iJeCQKN18ToSXWGjYkA=="],
"bun-plugin-tailwind": ["bun-plugin-tailwind@0.0.15", "", { "peerDependencies": { "typescript": "^5.0.0" } }, "sha512-qtAXMNGG4R0UGGI8zWrqm2B7BdXqx48vunJXBPzfDOHPA5WkRUZdTSbE7TFwO4jLhYqSE23YMWsM9NhE6ovobw=="],
"bun-types": ["bun-types@1.2.17", "", { "dependencies": { "@types/node": "*" } }, "sha512-ElC7ItwT3SCQwYZDYoAH+q6KT4Fxjl8DtZ6qDulUFBmXA8YB4xo+l54J9ZJN+k2pphfn9vk7kfubeSd5QfTVJQ=="],
"bytes": ["bytes@3.0.0", "", {}, "sha512-pMhOfFDPiv9t5jjIXkHosWmkSyQbvsgEVNkz0ERHbuLh2T/7j4Mqqpz523Fe8MVY89KC6Sh/QfS2sM+SjgFDcw=="],
@ -290,6 +308,8 @@
"crypto2": ["crypto2@2.0.0", "", { "dependencies": { "babel-runtime": "6.26.0", "node-rsa": "0.4.2", "util.promisify": "1.0.0" } }, "sha512-jdXdAgdILldLOF53md25FiQ6ybj2kUFTiRjs7msKTUoZrzgT/M1FPX5dYGJjbbwFls+RJIiZxNTC02DE/8y0ZQ=="],
"csstype": ["csstype@3.1.3", "", {}, "sha512-M1uQkMl8rQK/szD0LNhtqxIPLpimGm8sOBwU7lLnCpSbTyY3yeU1Vc7l4KT5zT4s/yOxHH5O7tIuuLOCnLADRw=="],
"data-view-buffer": ["data-view-buffer@1.0.2", "", { "dependencies": { "call-bound": "^1.0.3", "es-errors": "^1.3.0", "is-data-view": "^1.0.2" } }, "sha512-EmKO5V3OLXh1rtK2wgXRansaK1/mtVdTUEiEI0W8RkvgT05kfxaH29PliLnpLP73yYO6142Q72QNa8Wx/A5CqQ=="],
"data-view-byte-length": ["data-view-byte-length@1.0.2", "", { "dependencies": { "call-bound": "^1.0.3", "es-errors": "^1.3.0", "is-data-view": "^1.0.2" } }, "sha512-tuhGbE6CfTM9+5ANGf+oQb72Ky/0+s3xKUpHvShfiz2RxMFgFPjsXuRLBVMtvMs15awe45SRb83D6wH4ew6wlQ=="],
@ -498,6 +518,8 @@
"lodash.snakecase": ["lodash.snakecase@4.1.1", "", {}, "sha512-QZ1d4xoBHYUeuouhEq3lk3Uq7ldgyFXGBhg04+oRLnIz8o9T65Eh+8YdroUwn846zchkA9yDsDl5CVVaV2nqYw=="],
"lucide-static": ["lucide-static@0.525.0", "", {}, "sha512-dPQiibOV/kRv/UnaNFbiTxdDFZ267rIjHVWLv6GoUXVD5YSW71cyF4tYJVD27zSb0OOWdeWrqZsuBtRaYc4FHw=="],
"lusca": ["lusca@1.6.1", "", { "dependencies": { "tsscmp": "^1.0.5" } }, "sha512-+JzvUMH/rsE/4XfHdDOl70bip0beRcHSviYATQM0vtls59uVtdn1JMu4iD7ZShBpAmFG8EnaA+PrYG9sECMIOQ=="],
"luxon": ["luxon@3.6.1", "", {}, "sha512-tJLxrKJhO2ukZ5z0gyjY1zPh3Rh88Ej9P7jNrZiHMUXHae1yvI2imgOZtL1TO8TW6biMMKfTtAOoEJANgtWBMQ=="],
@ -656,6 +678,8 @@
"tailwind": ["tailwind@4.0.0", "", { "dependencies": { "@babel/runtime": "7.3.4", "ajv": "6.10.0", "app-root-path": "2.1.0", "async-retry": "1.2.3", "body-parser": "1.18.3", "commands-events": "1.0.4", "compression": "1.7.3", "content-type": "1.0.4", "cors": "2.8.5", "crypto2": "2.0.0", "datasette": "1.0.1", "draht": "1.0.1", "express": "4.16.4 ", "flaschenpost": "1.1.3", "hase": "2.0.0", "json-lines": "1.0.0", "limes": "2.0.0", "lodash": "4.17.11", "lusca": "1.6.1", "morgan": "1.9.1", "nocache": "2.0.0", "partof": "1.0.0", "processenv": "1.1.0", "stethoskop": "1.0.0", "timer2": "1.0.0", "uuidv4": "3.0.1", "ws": "6.2.0" } }, "sha512-LlUNoD/5maFG1h5kQ6/hXfFPdcnYw+1Z7z+kUD/W/E71CUMwcnrskxiBM8c3G8wmPsD1VvCuqGYMHviI8+yrmg=="],
"tailwindcss": ["tailwindcss@4.1.11", "", {}, "sha512-2E9TBm6MDD/xKYe+dvJZAmg3yxIEDNRc0jwlNyDg/4Fil2QcSLjFKGVff0lAf1jjeaArlG/M75Ey/EYr/OJtBA=="],
"timer2": ["timer2@1.0.0", "", {}, "sha512-UOZql+P2ET0da+B7V3/RImN3IhC5ghb+9cpecfUhmYGIm0z73dDr3A781nBLnFYmRzeT1AmoT4w9Lgr8n7n7xg=="],
"toidentifier": ["toidentifier@1.0.1", "", {}, "sha512-o5sSPKEkg/DIQNmH43V0/uerLrpzVedkUh8tGNvaeXpfpuwjKenlSox/2O/BTlZUtEe+JG7s5YhEz608PlAHRA=="],
@ -706,6 +730,8 @@
"w3c-keyname": ["w3c-keyname@2.2.8", "", {}, "sha512-dpojBhNsCNN7T82Tm7k26A6G9ML3NkhDsnw9n/eoxSRlVBB4CEtIQ/KTCLI2Fwf3ataSXRhYFkQi3SlnFwPvPQ=="],
"werewolfUI": ["werewolfUI@workspace:packages/werewolf-ui"],
"which": ["which@2.0.2", "", { "dependencies": { "isexe": "^2.0.0" }, "bin": { "node-which": "./bin/node-which" } }, "sha512-BLI3Tl1TW3Pvl70l3yq3Y64i+awpwXqsGBYWkkqMtnbXgrMD+yj7rhW0kuEDxzJaYXGjEW5ogapKNMEKNMjibA=="],
"which-boxed-primitive": ["which-boxed-primitive@1.1.1", "", { "dependencies": { "is-bigint": "^1.1.0", "is-boolean-object": "^1.2.1", "is-number-object": "^1.1.1", "is-string": "^1.1.1", "is-symbol": "^1.1.1" } }, "sha512-TbX3mj8n0odCBFVlY8AxkqcHASw3L60jIuF8jFP78az3C2YhmGvqbHBpAjTRH2/xqYunrJ9g1jSyjCjpoWzIAA=="],
@ -750,6 +776,10 @@
"@sapphire/shapeshift/lodash": ["lodash@4.17.21", "", {}, "sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg=="],
"@workshop/nano-remix/@types/bun": ["@types/bun@1.2.18", "", { "dependencies": { "bun-types": "1.2.18" } }, "sha512-Xf6RaWVheyemaThV0kUfaAUvCNokFr+bH8Jxp+tTZfx7dAPA8z9ePnP9S9+Vspzuxxx9JRAXhnyccRj3GyCMdQ=="],
"@workshop/nano-remix/hono": ["hono@4.8.4", "", {}, "sha512-KOIBp1+iUs0HrKztM4EHiB2UtzZDTBihDtOF5K6+WaJjCPeaW4Q92R8j63jOhvJI5+tZSMuKD9REVEXXY9illg=="],
"ajv/fast-deep-equal": ["fast-deep-equal@2.0.1", "", {}, "sha512-bCK/2Z4zLidyB4ReuIsvALH6w31YfAQDmXMqMx6FyfHqvBxtjC0eRumeSu4Bs3XtXwpyIywtSTrVT99BxY1f9w=="],
"amqplib/readable-stream": ["readable-stream@1.1.14", "", { "dependencies": { "core-util-is": "~1.0.0", "inherits": "~2.0.1", "isarray": "0.0.1", "string_decoder": "~0.10.x" } }, "sha512-+MeVjFf4L44XUkhM1eYbD8fyEsxcV81pqMSR5gblfcLCHfZvbrqy4/qYHE+/R5HoBUT11WV5O08Cr1n3YXkWVQ=="],
@ -806,6 +836,10 @@
"string_decoder/safe-buffer": ["safe-buffer@5.2.1", "", {}, "sha512-rp3So07KcdmmKbGvgaNxQSJr7bGVSVk5S9Eq1F+ppbRo70+YeaDxkw5Dd8NPN+GD6bjnYm2VuPuCXmpuYvmCXQ=="],
"werewolfUI/@types/bun": ["@types/bun@1.2.18", "", { "dependencies": { "bun-types": "1.2.18" } }, "sha512-Xf6RaWVheyemaThV0kUfaAUvCNokFr+bH8Jxp+tTZfx7dAPA8z9ePnP9S9+Vspzuxxx9JRAXhnyccRj3GyCMdQ=="],
"werewolfUI/hono": ["hono@4.8.4", "", {}, "sha512-KOIBp1+iUs0HrKztM4EHiB2UtzZDTBihDtOF5K6+WaJjCPeaW4Q92R8j63jOhvJI5+tZSMuKD9REVEXXY9illg=="],
"which-builtin-type/isarray": ["isarray@2.0.5", "", {}, "sha512-xHjhDr3cNBK0BzdUJSPXZntQUx/mwMS5Rw4A7lPJ90XGAO6ISP/ePDNuo0vhqOZU+UD5JoodwCAAoZQd3FeAKw=="],
"@modelcontextprotocol/sdk/express/accepts": ["accepts@2.0.0", "", { "dependencies": { "mime-types": "^3.0.0", "negotiator": "^1.0.0" } }, "sha512-5cvg6CtKwfgdmVqY1WIiXKc3Q1bkRqGLi+2W/6ao+6Y7gu/RCwRuAhGEzh5B4KlszSuTLgZYuqFqo5bImjNKng=="],
@ -854,6 +888,8 @@
"@openai/agents/openai/ws": ["ws@8.18.2", "", { "peerDependencies": { "bufferutil": "^4.0.1", "utf-8-validate": ">=5.0.2" }, "optionalPeers": ["bufferutil", "utf-8-validate"] }, "sha512-DMricUmwGZUVr++AEAe2uiVM7UoO9MAVZMDu05UQOaUII0lp+zOzLLU4Xqh/JvTqklB1T4uELaaPBKyjE1r4fQ=="],
"@workshop/nano-remix/@types/bun/bun-types": ["bun-types@1.2.18", "", { "dependencies": { "@types/node": "*" }, "peerDependencies": { "@types/react": "^19" } }, "sha512-04+Eha5NP7Z0A9YgDAzMk5PHR16ZuLVa83b26kH5+cp1qZW4F6FmAURngE7INf4tKOvCE69vYvDEwoNl1tGiWw=="],
"amqplib/readable-stream/inherits": ["inherits@2.0.4", "", {}, "sha512-k/vGaX4/Yla3WzyMCvTQOXYeIHvqOKtnqBduzTHpzpQZzAskKMhZ2K+EnBiSM9zGSoIFeMpXKxa4dYeZIQqewQ=="],
"amqplib/readable-stream/string_decoder": ["string_decoder@0.10.31", "", {}, "sha512-ev2QzSzWPYmy9GuqfIVildA4OdcGLeFZQrq5ys6RtiuF+RQQiZWr8TZNyAcuVXyQRYfEO+MsoB/1BuQVhOJuoQ=="],
@ -868,6 +904,8 @@
"morgan/debug/ms": ["ms@2.0.0", "", {}, "sha512-Tpp60P6IUJDTuOq/5Z8cdskzJujfwqfOTkrwIwj7IRISpnkJnT6SyJ4PCPnGMoFjC9ddhal5KVIYtAt97ix05A=="],
"werewolfUI/@types/bun/bun-types": ["bun-types@1.2.18", "", { "dependencies": { "@types/node": "*" }, "peerDependencies": { "@types/react": "^19" } }, "sha512-04+Eha5NP7Z0A9YgDAzMk5PHR16ZuLVa83b26kH5+cp1qZW4F6FmAURngE7INf4tKOvCE69vYvDEwoNl1tGiWw=="],
"@modelcontextprotocol/sdk/express/accepts/negotiator": ["negotiator@1.0.0", "", {}, "sha512-8Ofs/AUQh8MaEcrlq5xOX0CQ9ypTF5dl78mjlMNfOK08fzpgTHQRQPBxcPlEtIw0yRpws+Zo/3r+5WRby7u3Gg=="],
"@modelcontextprotocol/sdk/express/body-parser/bytes": ["bytes@3.1.2", "", {}, "sha512-/Nf7TyzTx6S3yRJObOAV7956r8cr2+Oj8AC5dt8wSP3BQAoeX58NoHyCU8P8zGkNXStjTSi6fzO6F0pBdcYbEg=="],

View File

@ -11,6 +11,7 @@
"typescript": "^5"
},
"dependencies": {
"bun-plugin-tailwind": "^0.0.15",
"hono": "catalog:"
},
"devDependencies": {

View File

@ -0,0 +1,65 @@
import { mkdirSync } from "node:fs"
import { join, extname, dirname, basename } from "node:path"
if (!import.meta.main) throw new Error("This script is intended to be run as a cli tool.")
type BuildRouteOptions = {
distDir: string
routeName: string
filepath: string
}
/*
* Builds dynamic routes in a separate process to avoid Bun.build corruption.
* Running Bun.build in the same process as nanoRemix causes build failures after the first run.
* Shelling out to this script isolates the build process and prevents this issue.
*/
const buildDynamicRoute = async ({ distDir, routeName, filepath }: BuildRouteOptions) => {
const outDir = dirname(routeName)
const filename = basename(routeName) + extname(filepath)
const dynamicRouteFilepath = join(distDir, "routes", outDir, filename)
await mkdirSync(dirname(dynamicRouteFilepath), { recursive: true })
// Only import the Component so that tree-shaking will get rid of the server-side code
const code = `
import Component from "${filepath}"
import { wrapComponentWithLoader} from "@workshop/nano-remix"
import { render } from 'hono/jsx/dom'
const root = document.getElementById('root')
const WrappedComponent = wrapComponentWithLoader(Component)
render(<WrappedComponent />, root)`
await Bun.write(dynamicRouteFilepath, code)
const result = await Bun.build({
entrypoints: [dynamicRouteFilepath],
outdir: join(distDir, outDir),
sourcemap: "inline",
target: "browser",
splitting: true,
plugins: [await import("bun-plugin-tailwind").then((m) => m.default)],
})
if (!result.success) {
throw new Error(`Build for "${routeName}" failed with exit code ${result.logs}.`)
}
return result
}
const args = process.argv.slice(2)
if (args.length < 3) {
console.error("Usage: bun run scripts/build.ts <distDir> <routeName> <filepath>")
process.exit(1)
}
const [distDir, routeName, filepath] = args as [string, string, string]
try {
await buildDynamicRoute({ distDir, routeName, filepath })
console.log(`✅ Successfully built route: ${routeName}`)
} catch (error) {
console.error(`❌ Build failed:`, error)
process.exit(1)
}

View File

@ -0,0 +1,29 @@
import { join } from "node:path"
type BuildRouteOptions = {
distDir: string
routeName: string
filepath: string
}
export const buildDynamicRoute = async ({ distDir, routeName, filepath }: BuildRouteOptions) => {
const scriptPath = join(import.meta.dirname, "../scripts/build.ts")
const proc = Bun.spawn({
cmd: ["bun", "run", scriptPath, distDir, routeName, filepath],
stdout: "pipe",
stderr: "pipe",
})
const exitCode = await proc.exited
if (exitCode !== 0) {
const stderr = await new Response(proc.stderr).text()
throw new Error(`Build process failed with exit code ${exitCode}: ${stderr}`)
}
const stdout = await new Response(proc.stdout).text()
console.log(stdout)
return { success: true }
}

View File

@ -1,6 +1,6 @@
import { renderServer } from "@/renderServer"
import { mkdirSync } from "node:fs"
import { join, extname, dirname, basename } from "node:path"
import { buildDynamicRoute } from "./buildDynamicRout"
import { join, extname } from "node:path"
type Options = {
routesDir?: string
@ -29,11 +29,14 @@ export const nanoRemix = async (req: Request, options: Options = {}) => {
}
const routeName = route.name === "/" ? "/index" : route.name
// If the the route includes an extension it is a static file that we serve from the distDir
if (!ext) {
await buildDynamicRoute(distDir, routeName, route.filePath) // Eventually this should be running only on initial build and when a route changes
await buildDynamicRoute({ distDir, routeName, filepath: route.filePath }) // Eventually this should be running only on initial build and when a route changes
return await renderServer(req, route)
} else {
const file = Bun.file(join(distDir, routeName + ext))
if (!(await file.exists())) {
return new Response("File Not Found", {
status: 404,
@ -43,47 +46,3 @@ export const nanoRemix = async (req: Request, options: Options = {}) => {
return new Response(file)
}
}
const buildDynamicRoute = async (distDir: string, routeName: string, filepath: string) => {
const outDir = dirname(routeName)
const filename = basename(routeName) + extname(filepath)
const dynamicRouteFilepath = join(distDir, "routes", outDir, filename)
await mkdirSync(dirname(dynamicRouteFilepath), { recursive: true })
// Only import the Component so that tree-shaking will get rid of the server-side code
const code = `
import Component from "${filepath}"
import { wrapComponentWithLoader} from "@workshop/nano-remix"
import { render } from 'hono/jsx/dom'
const root = document.getElementById('root')
const WrappedComponent = wrapComponentWithLoader(Component)
render(<WrappedComponent />, root)`
await Bun.write(dynamicRouteFilepath, code)
// I would rather use Bun.build, but fails when run twice https://github.com/oven-sh/bun/issues/11123
const proc = Bun.spawn({
cmd: ["bun", "build", "--sourcemap=inline", "--outdir", join(distDir, outDir), dynamicRouteFilepath],
stdout: "pipe",
stderr: "pipe",
})
// Read the bundled output
let bundled = ""
for await (const chunk of proc.stdout) {
bundled += new TextDecoder().decode(chunk)
}
let errorOutput = ""
for await (const chunk of proc.stderr) {
errorOutput += new TextDecoder().decode(chunk)
}
const exitCode = await proc.exited
if (exitCode !== 0) {
throw new Error(`Built for "${routeName}" failed with exit code ${exitCode}. ${errorOutput}`)
}
return bundled
}