weifuwu 0.55.3 → 0.56.0

package/dist/components/index.js

@@ -1,4 +1,8 @@
 // src/client/vnode.ts
+var ASYNC_MARK = "__wfAsyncComponent";
+function isAsyncComponent(type) {
+  return typeof type === "function" && type?.[ASYNC_MARK] === true;
+}
 var Fragment = /* @__PURE__ */ Symbol("Fragment");
 var Portal = /* @__PURE__ */ Symbol("Portal");
 function h(type, props, ...children) {
@@ -467,10 +471,11 @@ function renderValue(v, ctx) {
   }
   if (vnode.type === Fragment) {
     const frag = document.createDocumentFragment();
-    forEach(vnode.props?.children, (child) => {
+    const children = vnode.props?.children == null ? [] : Array.isArray(vnode.props.children) ? vnode.props.children : [vnode.props.children];
+    for (const child of children) {
       const node = renderValue(child, ctx);
       if (node != null) frag.appendChild(node);
-    });
+    }
     return frag;
   }
   if (typeof vnode.type === "function") {
@@ -513,6 +518,54 @@ function renderValue(v, ctx) {
   if (typeof vnode.props?.ref === "function") vnode.props.ref(el);
   return el;
 }
+var asyncFactoryCache = /* @__PURE__ */ new WeakMap();
+function startAsyncFactory(Comp, ctx) {
+  const existing = asyncFactoryCache.get(Comp);
+  if (existing) return existing;
+  const entry = { promise: null };
+  entry.promise = Promise.resolve().then(() => Comp(ctx)).then((def) => {
+    if (typeof def !== "function") {
+      throw new Error(
+        `asyncComponent factory <${Comp.name || "anonymous"}> must return a Component (initProps, ctx) => (props) => VNode.`
+      );
+    }
+    entry.resolved = def;
+    return def;
+  });
+  asyncFactoryCache.set(Comp, entry);
+  return entry;
+}
+function resolveAsyncFactorySync(Comp) {
+  return asyncFactoryCache.get(Comp)?.resolved;
+}
+function scheduleFullReRender(ctx) {
+  const ui = ctx.ui;
+  if (ui && typeof ui.render === "function") ui.render(["_wf_root"]);
+}
+function mountComponent(Comp, props, vnode, ctx) {
+  let def;
+  if (isAsyncComponent(Comp)) {
+    def = resolveAsyncFactorySync(Comp);
+    if (!def) {
+      void startAsyncFactory(Comp, ctx).promise.then(
+        () => scheduleFullReRender(ctx),
+        () => {
+        }
+      );
+      return null;
+    }
+  } else {
+    def = Comp;
+  }
+  let childVNode = def(props, ctx);
+  if (typeof childVNode !== "function") {
+    throw new Error(
+      `Component ${Comp.name || "anonymous"} must return a render function. Use (init_props, ctx) => (props) => VNode pattern.`
+    );
+  }
+  vnode._render = childVNode;
+  return childVNode(props);
+}
 function renderComponent(Comp, props, vnode, ctx) {
   ;
   ctx.ui = ctx.ui ?? {};
@@ -527,14 +580,7 @@ function renderComponent(Comp, props, vnode, ctx) {
   vnode._ctxVersion = childCtx.ui._ctxVersion ?? 0;
   let childVNode;
   try {
-    childVNode = Comp(props, childCtx);
-    if (typeof childVNode !== "function") {
-      throw new Error(
-        `Component ${Comp.name || "anonymous"} must return a render function. Use (init_props, ctx) => (props) => VNode pattern.`
-      );
-    }
-    vnode._render = childVNode;
-    childVNode = childVNode(props);
+    childVNode = mountComponent(Comp, props, vnode, childCtx);
   } catch (e) {
     const errHandler = ctx.ui?._errorHandler;
     if (errHandler) {
@@ -591,14 +637,6 @@ function renderPortal(vnode, ctx) {
     if (node != null) sub.appendChild(node);
   }
 }
-function forEach(children, fn) {
-  if (children == null) return;
-  if (Array.isArray(children)) {
-    children.forEach(fn);
-    return;
-  }
-  fn(children);
-}
 function flattenChildren(children) {
   if (children == null) return [];
   if (!Array.isArray(children)) return [children];

package/dist/dev/index.js

@@ -0,0 +1,23 @@
+// src/dev/index.ts
+import { registerHooks } from "node:module";
+import { readFileSync } from "node:fs";
+import { fileURLToPath } from "node:url";
+import { transformSync } from "esbuild";
+registerHooks({
+  load(url, context, next) {
+    if (url.startsWith("file:") && (url.endsWith(".ts") || url.endsWith(".tsx"))) {
+      const file = fileURLToPath(url);
+      const code = readFileSync(file, "utf-8");
+      const result = transformSync(code, {
+        loader: url.endsWith(".tsx") ? "tsx" : "ts",
+        jsx: "automatic",
+        jsxImportSource: "weifuwu/client",
+        format: "esm",
+        sourcemap: "inline",
+        target: "node22"
+      });
+      return { format: "module", source: result.code, shortCircuit: true };
+    }
+    return next(url, context);
+  }
+});

package/dist/index.d.ts

@@ -12,6 +12,8 @@ export type { CORSOptions } from './middleware/cors.ts';
 export { serveStatic } from './middleware/static.ts';
 export type { ServeStaticOptions } from './middleware/static.ts';
 export { ui } from './ui/index.ts';
+export { uiSsr } from './ui/ssr-page.ts';
+export type { UiSsrOptions } from './ui/ssr-page.ts';
 export type { GraphQLOptions, GraphQLHandler } from './graphql.ts';
 export { postgres, MIGRATIONS_TABLE } from './postgres/index.ts';
 export type { PostgresOptions, PostgresClient, PostgresInjected } from './postgres/types.ts';

package/dist/index.js

@@ -1083,23 +1083,219 @@ import { build } from "esbuild";
 import { readFile, stat } from "node:fs/promises";
 import { resolve as resolve2 } from "node:path";
 import { fileURLToPath } from "node:url";
+
+// src/ui/html-safe.ts
 var HtmlSafe = class {
+  value;
   constructor(value) {
     this.value = value;
   }
-  value;
   toString() {
     return this.value;
   }
 };
+
+// src/client/vnode.ts
+var ASYNC_MARK = "__wfAsyncComponent";
+function isAsyncComponent(type) {
+  return typeof type === "function" && type?.[ASYNC_MARK] === true;
+}
+var Fragment = /* @__PURE__ */ Symbol("Fragment");
+var Portal = /* @__PURE__ */ Symbol("Portal");
+
+// src/client/reactive.ts
+function createReactiveState(dirty) {
+  const proxyCache = /* @__PURE__ */ new WeakMap();
+  const reactive = (target) => {
+    if (target === null || typeof target !== "object") return target;
+    if (proxyCache.has(target)) return proxyCache.get(target);
+    const proxy = new Proxy(target, {
+      set(target2, key, value) {
+        const old = Reflect.get(target2, key);
+        if (old === value) return true;
+        Reflect.set(target2, key, value);
+        dirty();
+        return true;
+      },
+      get(target2, key) {
+        const value = Reflect.get(target2, key);
+        if (typeof value === "object" && value !== null) return reactive(value);
+        return value;
+      },
+      deleteProperty(target2, key) {
+        if (Reflect.has(target2, key)) {
+          Reflect.deleteProperty(target2, key);
+          dirty();
+        }
+        return true;
+      }
+    });
+    proxyCache.set(target, proxy);
+    return proxy;
+  };
+  return reactive({});
+}
+
+// src/ui/ssr.ts
 function escape(s) {
   return s.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;").replace(/"/g, "&quot;");
 }
+var VOID_TAGS = /* @__PURE__ */ new Set([
+  "area",
+  "base",
+  "br",
+  "col",
+  "embed",
+  "hr",
+  "img",
+  "input",
+  "link",
+  "meta",
+  "param",
+  "source",
+  "track",
+  "wbr"
+]);
+function classToString(v) {
+  if (typeof v === "string") return v;
+  if (Array.isArray(v)) return v.filter(Boolean).join(" ");
+  if (v && typeof v === "object") {
+    return Object.entries(v).filter(([, b]) => b).map(([k]) => k).join(" ");
+  }
+  return "";
+}
+function styleToString(v) {
+  if (typeof v === "string") return v;
+  if (v && typeof v === "object") {
+    return Object.entries(v).filter(([, x]) => x != null).map(([k, x]) => `${k}:${typeof x === "number" ? x + "px" : String(x)}`).join(";");
+  }
+  return "";
+}
+function createSsrContext(serverCtx, dataStore) {
+  const usedIds = /* @__PURE__ */ new Set();
+  const ui2 = {
+    $: () => createReactiveState(() => {
+    }),
+    dirty: () => {
+    },
+    render: () => {
+    },
+    selfId: (name) => {
+      if (usedIds.has(name)) throw new Error(`[weifuwu] Duplicate component ID: "${name}"`);
+      usedIds.add(name);
+    },
+    useMedia: () => {
+    },
+    useBreakpoint: () => {
+    },
+    usePopupPosition: () => ({ top: 0, left: 0, refresh: () => {
+    } })
+  };
+  const ctx = Object.create(serverCtx ?? {});
+  ctx.ui = ui2;
+  ctx.data = {
+    async get(key, fetcher) {
+      if (dataStore.has(key)) return dataStore.get(key);
+      if (!fetcher) return void 0;
+      const val = await fetcher();
+      dataStore.set(key, val);
+      return val;
+    },
+    set(key, val) {
+      dataStore.set(key, val);
+    },
+    has(key) {
+      return dataStore.has(key);
+    }
+  };
+  return ctx;
+}
+async function renderSsr(input, ctx) {
+  if (input == null || typeof input === "boolean") return "";
+  if (typeof input === "string" || typeof input === "number") return escape(String(input));
+  if (Array.isArray(input)) {
+    let s = "";
+    for (const c of input) s += await renderSsr(c, ctx);
+    return s;
+  }
+  const vnode = input;
+  if (vnode.type === Portal) return renderSsr(vnode.props?.children, ctx);
+  if (vnode.type === Fragment) return renderSsr(vnode.props?.children, ctx);
+  if (typeof vnode.type === "function") {
+    let def;
+    if (isAsyncComponent(vnode.type)) {
+      def = await vnode.type(ctx);
+      if (typeof def !== "function") {
+        throw new Error(
+          `asyncComponent factory <${vnode.type.name || "anonymous"}> must return a Component (initProps, ctx) => (props) => VNode.`
+        );
+      }
+    } else {
+      def = vnode.type;
+    }
+    const childCtx = Object.create(ctx);
+    const renderFn = def(vnode.props ?? {}, childCtx);
+    if (typeof renderFn !== "function") {
+      throw new Error(
+        `Component ${vnode.type.name || "anonymous"} must return a render function. Use (init_props, ctx) => (props) => VNode pattern.`
+      );
+    }
+    return renderSsr(renderFn(vnode.props ?? {}), childCtx);
+  }
+  const tag = vnode.type;
+  const props = vnode.props ?? {};
+  const attrs = [];
+  let innerHTML;
+  for (const [key, value] of Object.entries(props)) {
+    if (key === "children" || key === "key") continue;
+    if (key === "ref") continue;
+    if (key.startsWith("on") && typeof value === "function") continue;
+    if (key === "innerHTML") {
+      innerHTML = String(value ?? "");
+      continue;
+    }
+    if (key === "class" || key === "className") {
+      const cls = classToString(value);
+      if (cls) attrs.push(` class="${escape(cls)}"`);
+      continue;
+    }
+    if (key === "style" && value && typeof value === "object") {
+      attrs.push(` style="${escape(styleToString(value))}"`);
+      continue;
+    }
+    if (value === true) {
+      attrs.push(` ${key}`);
+      continue;
+    }
+    if (value === false || value == null) continue;
+    attrs.push(` ${key}="${escape(String(value))}"`);
+  }
+  const attrStr = attrs.join("");
+  if (VOID_TAGS.has(tag)) return `<${tag}${attrStr}>`;
+  if (innerHTML !== void 0) return `<${tag}${attrStr}>${innerHTML}</${tag}>`;
+  const children = await renderSsr(props.children, ctx);
+  return `<${tag}${attrStr}>${children}</${tag}>`;
+}
+async function ssrToString(Comp, props, serverCtx, opts = {}) {
+  const dataStore = opts.data ?? /* @__PURE__ */ new Map();
+  const ctx = createSsrContext(serverCtx, dataStore);
+  const html = await renderSsr({ type: Comp, props: props ?? {}, key: void 0 }, ctx);
+  return new HtmlSafe(html);
+}
+function serializeData(data) {
+  const json = JSON.stringify(Object.fromEntries(data)).replace(/</g, "\\u003c");
+  return `<script>window.__DATA__=${json};</script>`;
+}
+
+// src/ui/index.ts
+function escape2(s) {
+  return s.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;").replace(/"/g, "&quot;");
+}
 function stringify(v) {
   if (v == null || v === false || v === true) return "";
   if (Array.isArray(v)) return v.map(stringify).join("");
   if (v instanceof HtmlSafe) return v.value;
-  return escape(String(v));
+  return escape2(String(v));
 }
 function unsafe(s) {
   return new HtmlSafe(s);
@@ -1153,6 +1349,15 @@ function ui() {
     }
     ctx.ui = {
       html: Object.assign(htmlTag, { unsafe }),
+      /** SSR 渲染组件 → HTML 片段（HtmlSafe：内联进 ctx.ui.html 不二次转义） */
+      async ssr(Comp, props, opts) {
+        const safe = await ssrToString(Comp, props ?? {}, ctx, opts);
+        return safe;
+      },
+      /** 序列化 SSR 数据存储 → window.__DATA__ 脚本（HtmlSafe） */
+      ssrData(data) {
+        return new HtmlSafe(serializeData(data));
+      },
       async js(entryPath) {
         const absPath = resolveEntry(entryPath);
         const cached = jsCache.get(absPath);
@@ -1217,6 +1422,98 @@ function ui() {
   };
 }
 
+// src/client/route-match.ts
+function joinPaths(a, b) {
+  if (!b || b === "/") return a || "/";
+  const left = a.endsWith("/") ? a.slice(0, -1) : a;
+  const right = b.startsWith("/") ? b : "/" + b;
+  return left + right;
+}
+function compilePath(path) {
+  const keys = [];
+  const reStr = path.replace(/:(\w+)/g, (_, key) => {
+    keys.push(key);
+    return "([^/]+)";
+  }).replace(/\*/g, ".*");
+  return { re: new RegExp(`^${reStr}$`), keys };
+}
+function flattenRoutes(routes, basePath = "", chain = []) {
+  const result = [];
+  for (const route of routes) {
+    const fullPath = joinPaths(basePath, route.path);
+    const { re, keys } = compilePath(fullPath);
+    const fullChain = [...chain, route];
+    result.push({ re, keys, def: route, chain: fullChain });
+    if (route.children) {
+      result.push(...flattenRoutes(route.children, fullPath, fullChain));
+    }
+  }
+  return result;
+}
+function matchRoute(path, routes) {
+  let best = null;
+  for (const fr of routes) {
+    if (path.match(fr.re)) {
+      if (!best || fr.chain.length > best.chain.length) best = fr;
+    }
+  }
+  return best;
+}
+function extractParams(path, match) {
+  const params = {};
+  const m = path.match(match.re);
+  if (m) {
+    for (let i = 0; i < match.keys.length; i++) {
+      params[match.keys[i]] = decodeURIComponent(m[i + 1]);
+    }
+  }
+  return params;
+}
+
+// src/ui/ssr-page.ts
+var DEFAULT_TEMPLATE = (p) => `<!DOCTYPE html>
+<html lang="zh-CN">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>${escapeHtml(p.title)}</title>
+  ${(p.styles ?? []).map((s) => `<link rel="stylesheet" href="${escapeHtml(s)}">`).join("\n  ")}
+</head>
+<body>
+  <div id="root">${p.html}</div>
+  ${p.dataScript}
+  ${p.bundle ? `<script src="${escapeHtml(p.bundle)}"></script>` : ""}
+</body>
+</html>`;
+function escapeHtml(s) {
+  return s.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;").replace(/"/g, "&quot;");
+}
+function uiSsr(opts) {
+  const flatRoutes = flattenRoutes(opts.routes);
+  const template = opts.template ?? DEFAULT_TEMPLATE;
+  return async (req, ctx, next) => {
+    if (req.method !== "GET") return next(req, ctx);
+    const url = new URL(req.url);
+    const match = matchRoute(url.pathname, flatRoutes);
+    if (!match) return next(req, ctx);
+    const params = extractParams(url.pathname, match);
+    const def = match.chain[match.chain.length - 1] ?? match.def;
+    const pageCtx = Object.assign(Object.create(ctx), {
+      params,
+      route: { path: url.pathname, params, query: Object.fromEntries(url.searchParams) }
+    });
+    if (!def.component) return next(req, ctx);
+    const data = /* @__PURE__ */ new Map();
+    const html = await ssrToString(def.component, {}, pageCtx, { data });
+    const title = opts.title ? opts.title({ params, def }) : def.title || "weifuwu";
+    const dataScript = new HtmlSafe(serializeData(data)).toString();
+    const body = template({ html: html.toString(), dataScript, title, bundle: opts.bundle, styles: opts.styles });
+    return new Response(body, {
+      headers: { "Content-Type": "text/html; charset=utf-8" }
+    });
+  };
+}
+
 // src/db/postgres/connection.ts
 import net from "node:net";
 import crypto2 from "node:crypto";
@@ -2962,6 +3259,7 @@ export {
   serverError,
   tooManyRequests,
   ui,
+  uiSsr,
   unauthorized,
   unprocessable
 };

package/dist/ui/html-safe.d.ts

@@ -0,0 +1,11 @@
+/**
+ * HtmlSafe — 标记"已是安全 HTML"的字符串（SSR 输出/unsafe 用户输入）。
+ *
+ * ctx.ui.html 的 stringify 对插值默认转义；instanceof HtmlSafe 的值原样内联。
+ * 与 ctx.ui.ssr 的产物共用同一类，保证模板内联不二次转义。
+ */
+export declare class HtmlSafe {
+    value: string;
+    constructor(value: string);
+    toString(): string;
+}

package/dist/ui/index.d.ts

@@ -26,6 +26,7 @@
  * ```
  */
 import type { Middleware } from '../types.ts';
+import type { Component, AsyncComponent } from '../client/vnode.ts';
 declare module '../types.ts' {
     interface Context {
         ui: {
@@ -35,6 +36,16 @@ declare module '../types.ts' {
             js: (entryPath: string) => Promise<Response>;
             /** 读取 CSS → CSS Response（支持包名 weifuwu/layout、weifuwu/components/style.css 或文件路径） */
             css: (entryPath: string) => Promise<Response>;
+            /**
+             * SSR 渲染组件 → HTML 片段（HtmlSafe，可直接内联进 ctx.ui.html 模板）
+             * 支持 async 工厂组件：await 工厂 → 数据进 HTML。
+             * opts.data（Map）收集 ctx.data 预取结果，用 ctx.ui.ssrData(data) 序列化进 __DATA__。
+             */
+            ssr: (Comp: Component | AsyncComponent, props?: Record<string, any>, opts?: {
+                data?: Map<string, unknown>;
+            }) => Promise<string>;
+            /** 序列化 SSR 数据存储 → <script>window.__DATA__=...</script>（HtmlSafe） */
+            ssrData: (data: Map<string, unknown>) => string;
         };
     }
 }

package/dist/ui/ssr-page.d.ts

@@ -0,0 +1,41 @@
+/**
+ * uiSsr — 路由级 SSR 中间件：前端路由表驱动的自动服务端渲染
+ *
+ * 开发者只声明路由（path + component），GET 匹配即自动 SSR：
+ *   匹配 → 注入 params → ctx.ui.ssr 渲染组件（async 工厂 await）→ 页面模板 + __DATA__
+ *   未匹配 → next()（交给后续 API/静态/404）
+ *
+ * 与客户端 router() 共用同一份路由定义（route-match.ts），SPA/SSR 一个声明。
+ */
+import type { Middleware } from '../types.ts';
+import type { RouteDef } from '../client/types.ts';
+export interface UiSsrOptions {
+    /** 前端路由定义（与 router() 共享同一份） */
+    routes: RouteDef[];
+    /** 客户端 bundle 路径（自动注入 <script src>，如 '/static/app.js'） */
+    bundle?: string;
+    /** CSS 路径数组（自动注入 <link rel="stylesheet">，如 ['/static/style.css']） */
+    styles?: string[];
+    /** 自定义 title（默认取路由定义 title 或 'weifuwu'） */
+    title?: (ctx: {
+        params: Record<string, string>;
+        def: RouteDef;
+    }) => string;
+    /** 自定义页面模板：返回完整 HTML（默认内置，含 head/root/__DATA__/styles/bundle） */
+    template?: (parts: {
+        html: string;
+        dataScript: string;
+        title: string;
+        bundle?: string;
+        styles?: string[];
+    }) => string;
+}
+/**
+ * 路由级 SSR 中间件：
+ *
+ * ```ts
+ * const app = new Router()
+ * app.use(uiSsr({ routes, bundle: '/static/app.js' }))
+ * ```
+ */
+export declare function uiSsr(opts: UiSsrOptions): Middleware;

package/dist/ui/ssr.d.ts

@@ -0,0 +1,35 @@
+/**
+ * 服务端 SSR 字符串遍历器 — async 工厂组件（形态 C）的 HTML 序列化
+ *
+ * 支持：
+ *   - 同步组件（mount → render → VNode → HTML）
+ *   - async 工厂组件（await 工厂 → 数据进 HTML；服务端不缓存定义，数据 per-request）
+ *   - Fragment / Portal（内联子节点）
+ *   - innerHTML prop（原样输出）、class/style 对象序列化
+ *   - 事件处理器 / ref 剥离、文本自动转义（XSS）
+ *   - 服务端 ctx shim（$ no-op dirty、ctx.data 预取、selfId 隔离）
+ *
+ * 产物为 HtmlSafe 标记的安全 HTML 片段，可直接内联进 ctx.ui.html 模板。
+ */
+import type { Component, AsyncComponent } from '../client/vnode.ts';
+import { HtmlSafe } from './html-safe.ts';
+export { HtmlSafe } from './html-safe.ts';
+export interface SsrOptions {
+    /** 服务端数据存储：ctx.data 预取结果写入此处，调用方序列化进 __DATA__ */
+    data?: Map<string, unknown>;
+}
+/**
+ * SSR 渲染组件 → HTML 片段（HtmlSafe 标记，可直接内联进 ctx.ui.html 模板，不二次转义）。
+ *
+ * ```ts
+ * const data = new Map()
+ * const html = await ctx.ui.ssr(BlogPage, { slug }, { data })
+ * return ctx.ui.html`
+ *   <div id="root">${html}</div>
+ *   ${ctx.ui.ssrData(data)}
+ * `
+ * ```
+ */
+export declare function ssrToString(Comp: Component | AsyncComponent, props: Record<string, any>, serverCtx: any, opts?: SsrOptions): Promise<HtmlSafe>;
+/** 序列化数据存储 → window.__DATA__ 脚本（防 XSS：转义 <） */
+export declare function serializeData(data: Map<string, unknown>): string;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "weifuwu",
   "type": "module",
-  "version": "0.55.3",
+  "version": "0.56.0",
   "description": "AI SaaS framework — (req, ctx) => Response",
   "exports": {
     ".": {
@@ -22,7 +22,8 @@
       "types": "./dist/components/index.d.ts",
       "default": "./dist/components/index.js"
     },
-    "./components/style.css": "./dist/components/style.css"
+    "./components/style.css": "./dist/components/style.css",
+    "./dev": "./dist/dev/index.js"
   },
   "files": [
     "dist/",
@@ -35,7 +36,9 @@
     "pretest": "docker compose up -d --wait postgres redis 2>/dev/null; sleep 1",
     "test": "node --env-file=.env --test 'src/test/**/*.test.ts' 'src/components/**/*.test.ts' 'src/db/**/*.test.ts'",
     "release": "node scripts/release.mjs",
-    "release:dry": "node scripts/release.mjs --dry-run"
+    "release:dry": "node scripts/release.mjs --dry-run",
+    "demo": "node --import weifuwu/dev --env-file=.env apps/demo/server.ts",
+    "demo:build": "node apps/demo/scripts/build.mjs"
   },
   "dependencies": {
     "esbuild": "^0.28.1",