npm - weifuwu - Versions diffs - 0.27.10 → 0.27.12 - Mend

weifuwu 0.27.10 → 0.27.12

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (16) hide show

package/README.md +44 -60
package/dist/index.d.ts +1 -0
package/dist/index.js +40 -29
package/dist/ssr/assets.d.ts +3 -18
package/dist/ssr/ui/assets.d.ts +2 -0
package/dist/template/app.ts +20 -0
package/dist/template/index.ts +6 -0
package/dist/template/locales/en.json +6 -0
package/dist/template/locales/zh-CN.json +6 -0
package/dist/template/package.json +11 -0
package/dist/template/tsconfig.json +15 -0
package/dist/template/ui/app/globals.css +2 -0
package/dist/template/ui/app/layout.ts +39 -0
package/dist/template/ui/app/page.ts +41 -0
package/dist/template/ui/lib/utils.ts +7 -0
package/package.json +3 -1

package/README.md CHANGED Viewed

@@ -66,36 +66,27 @@ app.use(rateLimit({ window: 60 }))
 ## Full-stack SSR
 Server-rendered HTML with zero frontend build tools. Uses `html()` tagged templates
-for safe HTML rendering, HTMX for dynamic interactions, and Alpine.js for client-side state.
+for safe HTML rendering, and `weifuwu-ui.js` for client-side interactions.
 ```ts
-import { Router, serve, html, raw, layout, view, cssContext, cssRouter, assetRouter } from 'weifuwu'
+import { Router, serve, html, raw, layout, view, wfuwAssets, theme, i18n, flash } from 'weifuwu'
 const app = new Router()
 // Middleware
 app.use(theme())
 app.use(i18n({ dir: './locales' }))
-app.use(cssContext('./ui')) // compile globals.css → ctx.css
+app.use(flash())
+// weifuwu-ui frontend runtime
+app.use('/', wfuwAssets())
 // Layout (wraps all pages)
 app.use(layout('./ui/app/layout.ts'))
-// Static assets (HTMX, Alpine — served locally, no CDN)
-app.use(assetRouter())
-// CSS serving
-app.use('/', cssRouter('./ui'))
 // Page
 app.get('/', view('./ui/app/page.ts'))
-// HTMX fragment handler
-app.get('/users/table', async (req, ctx) => {
-  const users = await ctx.sql`SELECT * FROM users`
-  return html`${users.map((u) => html`<div>${u.name}</div>`)}`
-})
 // API
 app.get('/api/ping', () => Response.json({ pong: true }))
@@ -139,15 +130,17 @@ import { html, raw } from 'weifuwu'
 // ui/app/layout.ts
 export default function (body: string, ctx: any) {
   return html`<!DOCTYPE html>
-    <html>
+    <html data-theme="${ctx.theme?.value || 'light'}">
       <head>
         <meta charset="utf-8" />
-        <script src="/__wfw/js/htmx.min.js"></script>
-        <script defer src="/__wfw/js/alpine.min.js"></script>
+        <link rel="stylesheet" href="/__wfw/css/weifuwu-ui.css" />
+        <script src="/__wfw/js/weifuwu-ui.js"></script>
+        <script id="__wfw-i18n" type="application/json">
+          ${raw(JSON.stringify(ctx.i18n?.messages || {}))}
+        </script>
       </head>
-      <body class="min-h-screen bg-white dark:bg-gray-950">
+      <body data-locale="${ctx.i18n?.locale || 'en'}">
         ${raw(body)}
-        <!-- ← use raw() for page content -->
       </body>
     </html>`
 }
@@ -167,29 +160,23 @@ export default function (ctx: any) {
 }
 ```
-### CSS pipeline (Tailwind v4)
+### UI frontend runtime (weifuwu-ui)
-Compiles `globals.css` via `@tailwindcss/postcss`. Cached and served with content hash.
-```css
-/* ui/app/globals.css */
-@import 'tailwindcss';
-@custom-variant dark (&:is(.dark *));
-```
+weifuwu-ui is a zero-dependency frontend runtime (~5KB) that ships with weifuwu.
+One `<script>` + `<link>` covers AJAX loading, state binding, SSE streaming,
+WebSocket, theme/i18n/flash integration, and UI components.
 ```ts
-app.use(cssContext('./ui')) // compile → ctx.css.url
-app.use(cssRouter('./ui')) // serve /__wfw/style/:hash.css
-```
+import { wfuwAssets } from 'weifuwu'
-### Local assets (no CDN)
+app.use(wfuwAssets()) // serve /__wfw/js/weifuwu-ui.js + /__wfw/css/weifuwu-ui.css
+```
-HTMX and Alpine.js are npm dependencies, served from the weifuwu server.
-No external network requests.
+In your layout:
-```ts
-app.use(assetRouter()) // serve /__wfw/js/htmx.min.js, alpine.min.js
-// In layout: ${assetScripts()}
+```html
+<script src="/__wfw/js/weifuwu-ui.js"></script>
+<link rel="stylesheet" href="/__wfw/css/weifuwu-ui.css" />
 ```
 ---
@@ -567,24 +554,20 @@ import { view } from 'weifuwu'
 app.get('/', view('./ui/app/page.ts'))
 ```
-#### cssContext() / cssRouter()
+#### wfuwAssets()
-Tailwind v4 CSS compilation and serving.
+Serve weifuwu-ui.js and weifuwu-ui.css — zero-dependency frontend runtime (~5KB total).
+Covers: AJAX loading, state binding, SSE streaming, WebSocket, theme/i18n/flash,
+modal/collapse/tabs/dropdown/toast components.
 ```ts
-import { cssContext, cssRouter } from 'weifuwu'
-app.use(cssContext('./ui')) // compile → ctx.css
-app.use(cssRouter('./ui')) // serve /__wfw/style/:hash.css
+import { wfuwAssets } from 'weifuwu'
+app.use(wfuwAssets())
 ```
-#### assetRouter() / assetScripts()
-Serve HTMX and Alpine.js from node_modules (no CDN).
-```ts
-import { assetRouter, assetScripts } from 'weifuwu'
-app.use(assetRouter())
-// In layout: ${assetScripts()}
+```html
+<script src="/__wfw/js/weifuwu-ui.js"></script>
+<link rel="stylesheet" href="/__wfw/css/weifuwu-ui.css" />
 ```
 ### Standalone utilities
@@ -666,15 +649,15 @@ throw new HttpError('Not found', 404) // caught by serve(), returns 404
 ## CLI
 ```bash
-npx weifuwu init my-app              # Full-stack project (SSR + Tailwind + HTMX + Alpine)
+npx weifuwu init my-app              # Full-stack project (SSR + weifuwu-ui)
 npx weifuwu init my-app --minimal    # Minimal API-only project
 npx weifuwu version                   # Print version
 ```
 ### Full-stack template (`init`)
-Generates a complete project with SSR, Tailwind CSS compilation, HTMX + Alpine served
-locally, theme switching, internationalization, and a demo home page.
+Generates a complete project with SSR via `html()` tagged templates, weifuwu-ui frontend
+runtime (zero external deps, ~5KB), theme switching, i18n, and flash messages.
 ```
 my-app/
@@ -682,9 +665,9 @@ my-app/
   app.ts                — Router setup
   ui/
     app/
-      globals.css       — Tailwind v4
-      layout.ts         — root layout (HTMX + Alpine + theme script)
-      page.ts           — home page (theme/i18n demo)
+      globals.css       — custom styles
+      layout.ts         — root layout (weifuwu-ui + theme/i18n/flash)
+      page.ts           — home page (wu-data/wu-theme/wu-lang demo)
   locales/
     en.json
     zh-CN.json
@@ -709,10 +692,11 @@ Creates a minimal API project with `app.ts`, `index.ts`, and TypeScript config.
 - `ws` — WebSocket
 - `zod` — Schema validation
-### Frontend (served locally, no CDN)
+### Frontend
+- weifuwu-ui.js (~5KB) — built-in, zero external dependencies
-- `tailwindcss`, `@tailwindcss/postcss`, `postcss` — Tailwind v4 CSS compilation
-- `htmx.org` — HTML-over-the-wire dynamic interactions
-- `alpinejs` — Lightweight client interactivity
+Covers: AJAX loading, state binding, SSE streaming, WebSocket, theme/i18n/flash,
+modal/collapse/tabs/dropdown/toast components.
 Zero build tools. Zero frontend framework compilation.

package/dist/index.d.ts CHANGED Viewed

@@ -66,3 +66,4 @@ export { loadModule, clearModuleCache } from './ssr/compile.ts';
 export { cssContext, cssRouter, clearCSSCache } from './ssr/css.ts';
 export type { CssAsset } from './ssr/css.ts';
 export { assetRouter, assetScripts } from './ssr/assets.ts';
+export { wfuwAssets } from './ssr/ui/assets.ts';

package/dist/index.js CHANGED Viewed

@@ -3594,6 +3594,7 @@ import { createHash } from "node:crypto";
 import { existsSync, readFileSync as readFileSync2 } from "node:fs";
 import { join as join3, resolve as resolve6, sep as sep2 } from "node:path";
 import tailwindPlugin from "@tailwindcss/postcss";
+import postcssNesting from "postcss-nesting";
 import postcss from "postcss";
 var cssCache = /* @__PURE__ */ new Map();
 function findTailwindDir() {
@@ -3625,7 +3626,7 @@ async function compileCSS(cssPath, sourceDir) {
   }
   const src = `@source "${sourceDir}";
 ${raw2}`;
-  const result = await postcss([tailwindPlugin()]).process(src, { from: cssPath });
+  const result = await postcss([tailwindPlugin(), postcssNesting()]).process(src, { from: cssPath });
   const hash = createHash("md5").update(result.css).digest("hex").slice(0, 8);
   const asset = { css: result.css, hash, url: `/__wfw/style/${hash}.css` };
   cssCache.set(cssPath, asset);
@@ -3658,51 +3659,60 @@ function clearCSSCache() {
   cssCache.clear();
 }
-// ssr/assets.ts
+// ssr/ui/assets.ts
 import { readFileSync as readFileSync3 } from "node:fs";
-import { resolve as resolve7 } from "node:path";
-function resolvePackage(name, file) {
-  return resolve7(process.cwd(), "node_modules", name, file);
-}
-var HTMX_PATH = resolvePackage("htmx.org", "dist/htmx.min.js");
-var ALPINE_PATH = resolvePackage("alpinejs", "dist/cdn.min.js");
-var htmxContent = null;
-var alpineContent = null;
-function loadAsset(path) {
-  try {
-    return readFileSync3(path, "utf-8");
-  } catch {
-    return null;
-  }
-}
-function assetRouter() {
+import { resolve as resolve7, dirname } from "node:path";
+import { fileURLToPath } from "node:url";
+var __dirname = dirname(fileURLToPath(import.meta.url));
+function wfuwAssets() {
   const router = new Router();
-  router.get("/__wfw/js/htmx.min.js", () => {
-    if (!htmxContent) htmxContent = loadAsset(HTMX_PATH);
-    if (!htmxContent) return new Response("HTMX not found", { status: 404 });
-    return new Response(htmxContent, {
+  const jsPath = resolve7(__dirname, "weifuwu-ui.js");
+  const cssPath = resolve7(__dirname, "weifuwu-ui.css");
+  let jsContent = null;
+  let cssContent = null;
+  router.get("/__wfw/js/weifuwu-ui.js", () => {
+    if (!jsContent) {
+      try {
+        jsContent = readFileSync3(jsPath, "utf-8");
+      } catch {
+        return new Response("weifuwu-ui.js not found", { status: 404 });
+      }
+    }
+    return new Response(jsContent, {
       headers: {
         "content-type": "application/javascript; charset=utf-8",
         "cache-control": "public, max-age=31536000, immutable"
       }
     });
   });
-  router.get("/__wfw/js/alpine.min.js", () => {
-    if (!alpineContent) alpineContent = loadAsset(ALPINE_PATH);
-    if (!alpineContent) return new Response("Alpine not found", { status: 404 });
-    return new Response(alpineContent, {
+  router.get("/__wfw/css/weifuwu-ui.css", () => {
+    if (!cssContent) {
+      try {
+        cssContent = readFileSync3(cssPath, "utf-8");
+      } catch {
+        return new Response("weifuwu-ui.css not found", { status: 404 });
+      }
+    }
+    return new Response(cssContent, {
       headers: {
-        "content-type": "application/javascript; charset=utf-8",
+        "content-type": "text/css; charset=utf-8",
         "cache-control": "public, max-age=31536000, immutable"
       }
     });
   });
   return router;
 }
+// ssr/assets.ts
+function assetRouter() {
+  console.warn("[weifuwu] assetRouter() is deprecated. Use wfuwAssets() instead.");
+  return wfuwAssets();
+}
 function assetScripts() {
+  console.warn("[weifuwu] assetScripts() is deprecated. Use weifuwu-ui.js directly.");
   return raw(`
-<script src="/__wfw/js/htmx.min.js"></script>
-<script defer src="/__wfw/js/alpine.min.js"></script>
+<script src="/__wfw/js/weifuwu-ui.js"></script>
+<link rel="stylesheet" href="/__wfw/css/weifuwu-ui.css">
 `);
 }
 export {
@@ -3775,5 +3785,6 @@ export {
   upload,
   validate,
   view,
+  wfuwAssets,
   withTestDb
 };

package/dist/ssr/assets.d.ts CHANGED Viewed

@@ -1,20 +1,5 @@
-import { Router } from '../core/router.ts';
 import { type RawString } from './html.ts';
-/**
- * Create a Router that serves HTMX and Alpine.js at `/__wfw/js/`.
- *
- * ```ts
- * app.use('/', assetRouter())
- * ```
- */
-export declare function assetRouter(): Router;
-/**
- * Generate `<script>` tags for HTMX and Alpine, pointing to local paths.
- *
- * ```ts
- * <head>
- *   ${assetScripts()}
- * </head>
- * ```
- */
+/** @deprecated Use {@link wfuwAssets} instead. */
+export declare function assetRouter(): import("../index.ts").Router<import("../types.ts").Context>;
+/** @deprecated Use `<script src="/__wfw/js/weifuwu-ui.js">` instead. */
 export declare function assetScripts(): RawString;

package/dist/ssr/ui/assets.d.ts ADDED Viewed

	@@ -0,0 +1,2 @@
1	+ import { Router } from '../../core/router.ts';
2	+ export declare function wfuwAssets(): Router;

package/dist/template/app.ts ADDED Viewed

@@ -0,0 +1,20 @@
+import { Router, layout, view, theme, i18n, flash, wfuwAssets } from 'weifuwu'
+export const app = new Router()
+// Core middleware
+app.use(theme())
+app.use(i18n({ dir: './locales' }))
+app.use(flash())
+// weifuwu-ui static assets
+app.use('/', wfuwAssets())
+// Layout
+app.use(layout('./ui/app/layout.ts'))
+// Pages
+app.get('/', view('./ui/app/page.ts'))
+// API route
+app.get('/api/ping', () => Response.json({ pong: true, time: new Date().toISOString() }))

package/dist/template/index.ts ADDED Viewed

@@ -0,0 +1,6 @@
+import { loadEnv, serve } from 'weifuwu'
+import { app } from './app.ts'
+loadEnv()
+const port = Number(process.env.PORT) || 3000
+serve(app.handler(), { port })

package/dist/template/locales/en.json ADDED Viewed

@@ -0,0 +1,6 @@
+{
+  "title": "Build APIs & UI, Zero Build Step",
+  "cta": "Try Me",
+  "docs": "Documentation",
+  "demo": "Click toggled content — zero JavaScript written, powered by weifuwu-ui."
+}

package/dist/template/locales/zh-CN.json ADDED Viewed

@@ -0,0 +1,6 @@
+{
+  "title": "零编译构建 API 和 UI",
+  "cta": "体验一下",
+  "docs": "文档",
+  "demo": "点击切换内容——不需要写 JavaScript，由 weifuwu-ui 驱动。"
+}

package/dist/template/package.json ADDED Viewed

@@ -0,0 +1,11 @@
+{
+  "name": "__PROJECT_NAME__",
+  "type": "module",
+  "scripts": {
+    "dev": "node --watch index.ts",
+    "start": "node index.ts"
+  },
+  "dependencies": {
+    "weifuwu": "^__VERSION__"
+  }
+}

package/dist/template/tsconfig.json ADDED Viewed

@@ -0,0 +1,15 @@
+{
+  "compilerOptions": {
+    "target": "ESNext",
+    "module": "NodeNext",
+    "moduleResolution": "NodeNext",
+    "strict": true,
+    "skipLibCheck": true,
+    "noEmit": true,
+    "allowImportingTsExtensions": true,
+    "paths": {
+      "@/*": ["./ui/*"]
+    }
+  },
+  "include": ["*.ts", "ui/**/*.ts"]
+}

package/dist/template/ui/app/globals.css ADDED Viewed

	@@ -0,0 +1,2 @@
1	+ /* Custom styles for your weifuwu app */
2	+ /* weifuwu-ui.css provides base UI component styles */

package/dist/template/ui/app/layout.ts ADDED Viewed

@@ -0,0 +1,39 @@
+import { html, raw } from 'weifuwu'
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+export default function (body: string, ctx: any) {
+  // Theme
+  const themeVal = ctx.theme?.value || 'system'
+  const resolvedTheme = themeVal === 'dark' ? 'dark' : 'light'
+  // i18n
+  const locale = ctx.i18n?.locale || 'en'
+  const messages = ctx.i18n?.messages || {}
+  return html`<!DOCTYPE html>
+    <html lang="${locale}" data-theme="${resolvedTheme}">
+      <head>
+        <meta charset="utf-8" />
+        <meta name="viewport" content="width=device-width, initial-scale=1" />
+        <title>weifuwu</title>
+        <link rel="stylesheet" href="/__wfw/css/weifuwu-ui.css" />
+        <script src="/__wfw/js/weifuwu-ui.js"></script>
+        <script id="__wfw-i18n" type="application/json">
+          ${raw(JSON.stringify(messages))}
+        </script>
+        ${ctx.flash?.value
+          ? raw(
+              `<script id="__wfw-flash" type="application/json">${JSON.stringify(ctx.flash.value)}</script>`,
+            )
+          : ''}
+        <style>
+          body {
+            margin: 0;
+          }
+        </style>
+      </head>
+      <body data-locale="${locale}">
+        ${raw(body)}
+      </body>
+    </html>`
+}

package/dist/template/ui/app/page.ts ADDED Viewed

@@ -0,0 +1,41 @@
+import { html } from 'weifuwu'
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+export default function (ctx: any) {
+  const t = ctx.i18n?.t || ((k: string) => k)
+  const theme = ctx.theme?.value || 'system'
+  const locale = ctx.i18n?.locale || 'en'
+  return html`<div wu-data="{ open: false }">
+    <!-- Navbar -->
+    <nav class="wu-flex wu-items-center wu-justify-between wu-p-4 wu-border-bottom">
+      <strong class="wu-text-lg">weifuwu</strong>
+      <div class="wu-flex wu-gap-sm wu-items-center">
+        <button wu-theme="${theme === 'dark' ? 'light' : 'dark'}" class="wu-btn wu-btn-sm">
+          ${theme === 'dark' ? '☀️' : '🌙'}
+        </button>
+        <button wu-lang="${locale === 'en' ? 'zh-CN' : 'en'}" class="wu-btn wu-btn-sm">
+          ${locale === 'en' ? '中文' : 'EN'}
+        </button>
+      </div>
+    </nav>
+    <!-- Hero -->
+    <section class="wu-p-4" style="max-width: 640px; margin: 80px auto; text-align: center;">
+      <h1 class="wu-text-2xl" style="margin-bottom: 8px;">${t('title')}</h1>
+      <p class="wu-text-secondary wu-text-md" style="margin-bottom: 32px;">
+        Pure Node.js, no build step
+      </p>
+      <div class="wu-flex wu-justify-center wu-gap-md">
+        <button class="wu-btn wu-btn-primary" wu-on="click: open = !open">${t('cta')}</button>
+        <a href="https://weifuwu.dev" class="wu-btn" target="_blank"> ${t('docs')} </a>
+      </div>
+      <!-- Demo: toggled content -->
+      <div wu-show="open" class="wu-card" style="margin-top: 24px; text-align: left;">
+        ${t('demo')}
+      </div>
+    </section>
+  </div>`
+}

package/dist/template/ui/lib/utils.ts ADDED Viewed

@@ -0,0 +1,7 @@
+/**
+ * cn() — Merge class names, handling conditional and array inputs.
+ * Lightweight alternative to clsx + tailwind-merge.
+ */
+export function cn(...classes: (string | false | null | undefined)[]): string {
+  return classes.filter(Boolean).join(' ')
+}

package/package.json CHANGED Viewed

@@ -1,7 +1,7 @@
 {
   "name": "weifuwu",
   "type": "module",
-  "version": "0.27.10",
+  "version": "0.27.12",
   "description": "Web-standard HTTP microframework for Node.js — (req, ctx) => Response",
   "exports": {
     ".": "./dist/index.js"
@@ -35,6 +35,7 @@
     "htmx.org": "^2",
     "ioredis": "^5.11.0",
     "postcss": "^8",
+    "postcss-nesting": "^14.0.0",
     "postgres": "^3.4.9",
     "tailwindcss": "^4",
     "ws": "^8",
@@ -57,6 +58,7 @@
     "eslint": "^10.5.0",
     "globals": "^17.6.0",
     "husky": "^9.1.7",
+    "jsdom": "^29.1.1",
     "lint-staged": "^17.0.7",
     "prettier": "^3.8.4",
     "typescript-eslint": "^8.61.0"