weifuwu 0.27.11 → 0.27.13

package/dist/index.js

@@ -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

@@ -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

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

package/dist/template/AGENTS.md

@@ -0,0 +1,30 @@
+# weifuwu Project
+
+## SSR UI Development
+
+This project uses weifuwu-ui.js — a zero-dependency frontend runtime (~5KB).
+
+Read the full reference at `node_modules/weifuwu/dist/docs/ssr/ui.md` or online:
+
+- **weifuwu-ui.js**: AJAX loading, state binding (`wu-data`, `wu-text`, `wu-show`),
+  event handling (`wu-on`), SSE streaming, WebSocket, theme/i18n/flash, UI components
+- **weifuwu-ui.css**: Button, form, card, modal, collapse, tabs, dropdown, toast styles
+  with CSS variable theming (light/dark mode via `data-theme` on `<html>`)
+
+### Key attributes
+
+| Attribute                                              | Purpose                       |
+| ------------------------------------------------------ | ----------------------------- |
+| `wu-data`                                              | Local reactive state          |
+| `wu-text`                                              | Bind state → textContent      |
+| `wu-show` / `wu-hide`                                  | Visibility toggle             |
+| `wu-class`                                             | Conditional CSS class         |
+| `wu-model`                                             | Two-way input binding         |
+| `wu-on`                                                | Event handler (`click: expr`) |
+| `wu-get` / `wu-post` / `wu-put` / `wu-delete`          | AJAX requests                 |
+| `wu-target` / `wu-swap`                                | Content replacement           |
+| `wu-theme`                                             | Theme switching               |
+| `wu-lang` / `wu-text-key`                              | i18n switching                |
+| `wu-flash`                                             | Flash messages                |
+| `wu-modal` / `wu-collapse` / `wu-tabs` / `wu-dropdown` | UI components                 |
+| `wu.toast()`                                           | Toast notifications           |

package/dist/template/app.ts

@@ -1,20 +1,17 @@
-import { Router, layout, view, theme, i18n, cssContext, cssRouter, assetRouter } from 'weifuwu'
+import { Router, layout, view, theme, i18n, flash, wfuwAssets } from 'weifuwu'
 
 export const app = new Router()
 
-// Middleware
+// Core middleware
 app.use(theme())
 app.use(i18n({ dir: './locales' }))
-app.use(cssContext('./ui'))
+app.use(flash())
 
-// Layout — wraps all pages
-app.use(layout('./ui/app/layout.ts'))
-
-// Static assets (HTMX, Alpine)
-app.use('/', assetRouter())
+// weifuwu-ui static assets
+app.use('/', wfuwAssets())
 
-// CSS serving
-app.use('/', cssRouter('./ui'))
+// Layout
+app.use(layout('./ui/app/layout.ts'))
 
 // Pages
 app.get('/', view('./ui/app/page.ts'))

package/dist/template/locales/en.json

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

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

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

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

@@ -1,8 +1,2 @@
-@import "tailwindcss";
-@custom-variant dark (&:is([data-theme="dark"] *));
-
-/* Fallback for browsers without CSS Nesting support */
-[data-theme="dark"] body {
-  background-color: var(--color-gray-950);
-  color: var(--color-gray-100);
-}
+/* Custom styles for your weifuwu app */
+/* weifuwu-ui.css provides base UI component styles */

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

@@ -1,44 +1,39 @@
-import { html, raw, assetScripts } from 'weifuwu'
+import { html, raw } from 'weifuwu'
 
-export default function(body: string, ctx: any) {
-  // Theme: resolve at server from cookie, override 'system' on client
+// 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'
 
-  const themeScript = raw(`<script>
-!function(){
-var t=(document.cookie.match(/(?:^|;\s*)theme=([^;]+)/)||[])[1]||'system';
-if(t==='system')t=window.matchMedia('(prefers-color-scheme:dark)').matches?'dark':'light';
-document.documentElement.setAttribute('data-theme',t);
-}()
-</script>`)
-
-  // i18n: set lang attribute
-  const lang = ctx.i18n?.locale || 'en'
-
-  // CSS: include compiled stylesheet
-  const cssLink = ctx.css?.url
-    ? raw(`<link rel="stylesheet" href="${ctx.css.url}">`)
-    : ''
+  // i18n
+  const locale = ctx.i18n?.locale || 'en'
+  const messages = ctx.i18n?.messages || {}
 
   return html`<!DOCTYPE html>
-<html lang="${lang}" data-theme="${resolvedTheme}">
-<head>
-  <meta charset="utf-8" />
-  <meta name="viewport" content="width=device-width, initial-scale=1" />
-  ${themeScript}
-  <style>
-    /* Force dark mode when data-theme is set */
-    [data-theme="dark"] body {
-      background-color: #030712 !important;
-      color: #f3f4f6 !important;
-    }
-  </style>
-  ${assetScripts()}
-  ${cssLink}
-</head>
-<body class="min-h-screen bg-white text-gray-900 dark:bg-gray-950 dark:text-gray-100">
-  ${raw(body)}
-</body>
-</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

@@ -1,55 +1,39 @@
 import { html } from 'weifuwu'
 
-export default function(ctx: any) {
+// 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 x-data="{ open: false }" class="min-h-screen">
+  return html`<div wu-data="{ open: false }">
     <!-- Navbar -->
-    <nav class="border-b border-gray-200 dark:border-gray-800">
-      <div class="max-w-5xl mx-auto flex items-center justify-between h-14 px-4">
-        <span class="font-bold text-lg">weifuwu</span>
-        <div class="flex items-center gap-3 text-sm">
-          <!-- Locale toggle -->
-          <a href="/__lang/${locale === 'en' ? 'zh-CN' : 'en'}"
-             class="px-2 py-1 rounded border border-gray-300 dark:border-gray-600
-                    hover:bg-gray-100 dark:hover:bg-gray-800 transition">
-            ${locale === 'en' ? '中文' : 'EN'}
-          </a>
-          <!-- Theme toggle -->
-          <a href="/__theme/${theme === 'dark' ? 'light' : 'dark'}"
-             class="px-2 py-1 rounded border border-gray-300 dark:border-gray-600
-                    hover:bg-gray-100 dark:hover:bg-gray-800 transition">
-            ${theme === 'dark' ? '☀️' : '🌙'}
-          </a>
-        </div>
+    <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="max-w-3xl mx-auto px-4 py-16 text-center">
-      <h1 class="text-4xl font-bold tracking-tight mb-3">${t('title')}</h1>
-      <p class="text-gray-500 dark:text-gray-400 text-lg mb-8">
+    <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="flex justify-center gap-3">
-        <button @click="open = !open"
-                class="rounded-md bg-gray-900 px-4 py-2 text-sm font-medium text-white
-                       hover:bg-gray-700 dark:bg-gray-100 dark:text-gray-900 dark:hover:bg-gray-300">
-          ${t('cta')}
-        </button>
-        <a href="/docs"
-           class="rounded-md border border-gray-300 px-4 py-2 text-sm font-medium
-                  hover:bg-gray-100 dark:border-gray-600 dark:hover:bg-gray-800">
-          ${t('docs')}
-        </a>
+      <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>
 
-      <!-- Alpine demo: click to reveal -->
-      <div x-show="open" x-cloak
-           class="mt-6 p-4 bg-gray-100 dark:bg-gray-800 rounded-lg text-sm text-left">
+      <!-- Demo: toggled content -->
+      <div wu-show="open" class="wu-card" style="margin-top: 24px; text-align: left;">
         ${t('demo')}
       </div>
     </section>