nukejs 0.0.15 → 0.0.16

package/dist/app.js

@@ -1,7 +1,7 @@
 import http from "http";
 import path from "path";
 import { existsSync, watch } from "fs";
-import { ansi, c, log, setDebugLevel, getDebugLevel } from "./logger.js";
+import { c, log, setDebugLevel, getDebugLevel } from "./logger.js";
 import { loadConfig } from "./config.js";
 import { discoverApiPrefixes, matchApiPrefix, createApiHandler } from "./http-server.js";
 import { loadMiddleware, runMiddleware } from "./middleware-loader.js";
@@ -9,6 +9,7 @@ import { serveReactBundle, serveNukeBundle, serveClientComponentBundle } from ".
 import { serverSideRender } from "./ssr.js";
 import { watchDir, broadcastRestart } from "./hmr.js";
 const isDev = process.env.ENVIRONMENT !== "production";
+const _startMs = Date.now();
 if (isDev) {
   const React = await import("react");
   global.React = React;
@@ -84,30 +85,28 @@ function tryListen(port) {
     server.listen(port, () => resolve(port));
   });
 }
-function printStartupBanner(port, isDev2) {
+function printStartupBanner(port, configuredPort, startMs) {
   const url = `http://localhost:${port}`;
   const level = getDebugLevel();
-  const debugStr = String(level);
-  const innerWidth = 42;
-  const line = "\u2500".repeat(innerWidth);
-  const pad = (text, width) => {
-    const visibleLen = text.replace(/\x1b\[[0-9;]*m/g, "").length;
-    return text + " ".repeat(Math.max(0, width - visibleLen));
+  const elapsed = Date.now() - startMs;
+  const keyW = 5;
+  const visible = (s) => s.replace(/\x1b\[[\d;]*m/g, "").length;
+  const row = (key, val) => {
+    const pad = " ".repeat(Math.max(0, keyW - visible(key)));
+    console.log(`  ${c("gray", key)}${pad}  ${val}`);
   };
-  const row = (content, w = 2) => `${ansi.gray}\u2502${ansi.reset} ${pad(content, innerWidth - w)} ${ansi.gray}\u2502${ansi.reset}`;
-  const label = (key, val) => row(`${c("gray", key)}  ${val}`);
   console.log("");
-  console.log(`${ansi.gray}\u250C${line}\u2510${ansi.reset}`);
-  console.log(row(`  ${c("red", "\u2622\uFE0F        nukejs ", true)}`, 1));
-  console.log(`${ansi.gray}\u251C${line}\u2524${ansi.reset}`);
-  console.log(label("  Local  ", c("cyan", url, true)));
-  console.log(`${ansi.gray}\u251C${line}\u2524${ansi.reset}`);
-  console.log(label("  Pages  ", c("white", path.relative(process.cwd(), PAGES_DIR))));
-  console.log(label("  Server ", c("white", path.relative(process.cwd(), SERVER_DIR))));
-  console.log(label("  Dev    ", isDev2 ? c("green", "yes") : c("gray", "no")));
-  console.log(label("  Debug  ", level === false ? c("gray", "off") : level === true ? c("green", "verbose") : c("yellow", debugStr)));
-  console.log(`${ansi.gray}\u2514${line}\u2518${ansi.reset}`);
+  console.log(`  ${c("orange", "NukeJS", true)}  ${c("gray", `ready in ${elapsed}ms`)}`);
+  console.log("");
+  row(
+    "Local",
+    port !== configuredPort ? `${c("cyan", url, true)}  ${c("yellow", `(${configuredPort} was in use)`)}` : c("cyan", url, true)
+  );
+  row(
+    "Debug",
+    level === false ? c("gray", "off") : level === true ? c("green", "verbose") : c("yellow", String(level))
+  );
   console.log("");
 }
 const actualPort = await tryListen(PORT);
-printStartupBanner(actualPort, isDev);
+printStartupBanner(actualPort, PORT, _startMs);

package/dist/build-common.js

@@ -618,7 +618,7 @@ export default async function handler(req: IncomingMessage, res: ServerResponse)
 
   <script id="__n_data" type="application/json">\${runtimeData}</script>
 
-  <script type="importmap">
+  \${hydrated.size > 0 ? \`<script type="importmap">
   {
     "imports": {
       "react":             "/__n.js",
@@ -633,7 +633,7 @@ export default async function handler(req: IncomingMessage, res: ServerResponse)
     const { initRuntime } = await import('nukejs');
     const data = JSON.parse(document.getElementById('__n_data').textContent);
     await initRuntime(data);
-  </script>
+  </script>\` : ''}
 \${bodyScriptsHtml}</body>
 </html>\`;
 
@@ -800,16 +800,19 @@ async function buildCombinedBundle(staticDir) {
     stdin: {
       contents: `
 import React, {
+  createElement, cloneElement, createRef, isValidElement, Children,
   useState, useEffect, useContext, useReducer, useCallback, useMemo,
   useRef, useImperativeHandle, useLayoutEffect, useDebugValue,
   useDeferredValue, useTransition, useId, useSyncExternalStore,
   useInsertionEffect, createContext, forwardRef, memo, lazy,
-  Suspense, Fragment, StrictMode, Component, PureComponent
+  Suspense, Fragment, StrictMode, Component, PureComponent,
+  createPortal
 } from 'react';
 import { jsx, jsxs } from 'react/jsx-runtime';
 import { hydrateRoot, createRoot } from 'react-dom/client';
 export { initRuntime, setupLocationChangeMonitor } from "./${bundleFile}.js";
 export {
+  createElement, cloneElement, createRef, isValidElement, Children,
   useState, useEffect, useContext, useReducer, useCallback, useMemo,
   useRef, useImperativeHandle, useLayoutEffect, useDebugValue,
   useDeferredValue, useTransition, useId, useSyncExternalStore,

package/dist/bundler.js

@@ -37,16 +37,19 @@ async function serveReactBundle(res) {
       stdin: {
         contents: `
         import React, {
+          createElement, cloneElement, createRef, isValidElement, Children,
           useState, useEffect, useContext, useReducer, useCallback, useMemo,
           useRef, useImperativeHandle, useLayoutEffect, useDebugValue,
           useDeferredValue, useTransition, useId, useSyncExternalStore,
           useInsertionEffect, createContext, forwardRef, memo, lazy,
-          Suspense, Fragment, StrictMode, Component, PureComponent
+          Suspense, Fragment, StrictMode, Component, PureComponent,
+          createPortal
         } from 'react';
         import { jsx, jsxs } from 'react/jsx-runtime';
         import { hydrateRoot, createRoot } from 'react-dom/client';
 
         export {
+          createElement, cloneElement, createRef, isValidElement, Children,
           useState, useEffect, useContext, useReducer, useCallback, useMemo,
           useRef, useImperativeHandle, useLayoutEffect, useDebugValue,
           useDeferredValue, useTransition, useId, useSyncExternalStore,
@@ -75,7 +78,7 @@ async function serveReactBundle(res) {
   res.end(await reactBundlePromise);
 }
 async function serveNukeBundle(res) {
-  log.verbose("Bundling nuke runtime");
+  log.verbose("Bundling NukeJS runtime");
   if (!nukeBundlePromise) {
     const dir = path.dirname(fileURLToPath(import.meta.url));
     const entry = path.join(dir, `bundle.${dir.endsWith("dist") ? "js" : "ts"}`);

package/dist/logger.d.ts

@@ -26,6 +26,7 @@ export declare const ansi: {
     readonly cyan: "\u001B[36m";
     readonly white: "\u001B[37m";
     readonly gray: "\u001B[90m";
+    readonly orange: "\u001B[38;5;208m";
     readonly bgBlue: "\u001B[44m";
     readonly bgGreen: "\u001B[42m";
     readonly bgMagenta: "\u001B[45m";

package/dist/logger.js

@@ -11,6 +11,7 @@ const ansi = {
   cyan: "\x1B[36m",
   white: "\x1B[37m",
   gray: "\x1B[90m",
+  orange: "\x1B[38;5;208m",
   bgBlue: "\x1B[44m",
   bgGreen: "\x1B[42m",
   bgMagenta: "\x1B[45m"

package/dist/middleware-loader.js

@@ -11,7 +11,7 @@ async function loadMiddlewareFromPath(middlewarePath) {
   try {
     const mod = await import(pathToFileURL(middlewarePath).href);
     if (typeof mod.default === "function") {
-      middlewares.push(mod.default);
+      middlewares.push({ fn: mod.default, src: middlewarePath });
       log.info(`Middleware loaded from ${middlewarePath}`);
     } else {
       log.warn(`${middlewarePath} does not export a default function`);
@@ -34,10 +34,14 @@ async function loadMiddleware() {
 }
 async function runMiddleware(req, res) {
   if (middlewares.length === 0) return false;
-  for (const middleware of middlewares) {
-    await middleware(req, res);
+  for (const { fn, src } of middlewares) {
+    await fn(req, res);
     if (res.writableEnded || res.headersSent) {
-      log.verbose("Middleware handled request, skipping further processing");
+      const method = (req.method ?? "GET").toUpperCase();
+      const url = req.url ?? "/";
+      const status = res.statusCode;
+      const srcName = path.basename(src);
+      log.verbose(`middleware  ${method} ${url}  ${status}  (${srcName})`);
       return true;
     }
   }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "nukejs",
-  "version": "0.0.15",
+  "version": "0.0.16",
   "description": "A minimal, opinionated full-stack React framework on Node.js that server-renders everything and hydrates only interactive parts.",
   "main": "./dist/index.js",
   "types": "./dist/index.d.ts",