weifuwu 0.33.1 → 0.33.3

package/dist/client/index.js

@@ -0,0 +1,694 @@
+// src/client/signal.ts
+var currentEffect = null;
+var Signal = class {
+  #value;
+  #listeners = /* @__PURE__ */ new Set();
+  constructor(value) {
+    this.#value = value;
+  }
+  get value() {
+    if (currentEffect) this.#listeners.add(currentEffect);
+    return this.#value;
+  }
+  set value(v) {
+    if (v !== this.#value) {
+      this.#value = v;
+      const fns = [...this.#listeners];
+      for (const fn of fns) fn();
+    }
+  }
+};
+function signal(initial) {
+  return new Signal(initial);
+}
+function isSignal(value) {
+  return value instanceof Signal;
+}
+function effect(fn) {
+  const wrapper = () => {
+    const prev = currentEffect;
+    currentEffect = wrapper;
+    try {
+      fn();
+    } finally {
+      currentEffect = prev;
+    }
+  };
+  wrapper();
+  return () => {
+  };
+}
+function computed(fn) {
+  const s = new Signal(void 0);
+  effect(() => {
+    s.value = fn();
+  });
+  return s;
+}
+
+// src/client/jsx-runtime.ts
+var currentCtx = null;
+function setCtx(ctx) {
+  currentCtx = ctx;
+}
+function setProp(el, key, value) {
+  if (key === "class" || key === "className") {
+    if (isSignal(value)) {
+      effect(() => {
+        el.className = String(value.value);
+      });
+    } else {
+      el.className = String(value ?? "");
+    }
+  } else if (key === "style" && typeof value === "object" && value !== null) {
+    Object.assign(el.style, value);
+  } else if (key.startsWith("on") && typeof value === "function") {
+    el.addEventListener(key.slice(2).toLowerCase(), value);
+  } else if (key === "ref" && typeof value === "function") {
+    value(el);
+  } else if (isSignal(value)) {
+    effect(() => {
+      const v = value.value;
+      if (v == null || v === false) el.removeAttribute(key);
+      else if (v === true) el.setAttribute(key, "");
+      else el.setAttribute(key, String(v));
+    });
+  } else if (value != null && value !== false) {
+    if (value === true) el.setAttribute(key, "");
+    else el.setAttribute(key, String(value));
+  }
+}
+function appendChild(parent, child) {
+  if (child == null || child === false || child === true) return;
+  if (Array.isArray(child)) {
+    child.forEach((c) => appendChild(parent, c));
+    return;
+  }
+  if (child instanceof Node) {
+    parent.appendChild(child);
+    return;
+  }
+  if (isSignal(child)) {
+    const text = document.createTextNode("");
+    effect(() => {
+      text.textContent = String(child.value);
+    });
+    parent.appendChild(text);
+    return;
+  }
+  parent.appendChild(document.createTextNode(String(child)));
+}
+function jsx(type, props, ...children) {
+  if (typeof type === "function") {
+    const merged = children.length > 0 ? { ...props, children } : props;
+    return type(merged, currentCtx) ?? document.createDocumentFragment();
+  }
+  const el = document.createElement(type);
+  if (props) {
+    for (const [k, v] of Object.entries(props)) {
+      if (k !== "children") setProp(el, k, v);
+    }
+  }
+  const childList = children.length > 0 ? children : props?.children != null ? [props.children] : [];
+  for (const child of childList) appendChild(el, child);
+  return el;
+}
+function jsxs(type, props, ...children) {
+  return jsx(type, props, ...children);
+}
+function jsxDEV(type, props, _key, _isStatic, _source, _self) {
+  return jsx(type, props, ...props?.children ? [props.children] : []);
+}
+function Fragment(props, ...children) {
+  const frag = document.createDocumentFragment();
+  for (const child of children) appendChild(frag, child);
+  return frag;
+}
+function domMount(root, app) {
+  const container = typeof root === "string" ? document.querySelector(root) : root;
+  if (!container) throw new Error(`mount target not found: ${root}`);
+  container.innerHTML = "";
+  container.appendChild(app);
+}
+function toNode(v) {
+  if (v instanceof Node) return v;
+  if (typeof v === "function") return toNode(v());
+  return document.createTextNode(String(v ?? ""));
+}
+function Show({ when, children, fallback }) {
+  const el = document.createElement("div");
+  function render(show) {
+    el.textContent = "";
+    if (show && children != null) {
+      el.appendChild(toNode(children));
+    } else if (!show && fallback != null) {
+      el.appendChild(toNode(fallback));
+    }
+  }
+  if (isSignal(when)) {
+    effect(() => render(Boolean(when.value)));
+  } else {
+    render(Boolean(when));
+  }
+  return el;
+}
+function For({ each, children }) {
+  const el = document.createElement("div");
+  function render(list) {
+    el.textContent = "";
+    for (let i = 0; i < list.length; i++) {
+      el.appendChild(children(list[i], i));
+    }
+  }
+  if (isSignal(each)) {
+    effect(() => render(each.value));
+  } else {
+    render(each);
+  }
+  return el;
+}
+
+// src/client/app.ts
+function createApp() {
+  const middlewares = [];
+  const provides = /* @__PURE__ */ new Map();
+  let ctx = {
+    route: {
+      path: window.location.pathname,
+      params: {},
+      query: Object.fromEntries(new URLSearchParams(window.location.search)),
+      hash: window.location.hash,
+      component: null
+    },
+    app: {
+      navigate(path) {
+        window.history.pushState({}, "", path);
+        ctx.route.path = path;
+        ctx.route.query = Object.fromEntries(new URLSearchParams(window.location.search));
+        ctx.route.hash = window.location.hash;
+        window.dispatchEvent(new CustomEvent("wefu:navigate", { detail: { path } }));
+      }
+    },
+    user: null,
+    token: null,
+    isAuthenticated: false,
+    login: async () => {
+    },
+    logout: () => {
+    },
+    register: async () => {
+    },
+    api: null,
+    ws: null,
+    provide(key, value) {
+      provides.set(key, value);
+    },
+    inject(key) {
+      return provides.get(key) ?? null;
+    }
+  };
+  return {
+    get ctx() {
+      return ctx;
+    },
+    use(mw) {
+      middlewares.push(mw);
+      return this;
+    },
+    async mount(rootSelector, RootComponent) {
+      for (const mw of middlewares) {
+        ctx = await mw(ctx);
+      }
+      setCtx(ctx);
+      const app = jsx(RootComponent, {});
+      domMount(rootSelector, app);
+      setCtx(null);
+    }
+  };
+}
+
+// src/client/router.ts
+function router(opts) {
+  const mode = opts.mode ?? "hash";
+  const matchers = opts.routes.map((route) => {
+    const parts = route.path.split("/").filter(Boolean);
+    const keys = [];
+    const reStr = "^/" + parts.map((p) => {
+      if (p.startsWith(":")) {
+        keys.push(p.slice(1));
+        return "([^/]+)";
+      }
+      return p;
+    }).join("/") + "$";
+    return { re: new RegExp(reStr), keys, route };
+  });
+  function matchPath(path) {
+    for (const { re, keys, route } of matchers) {
+      const m = path.match(re);
+      if (m) {
+        const params = {};
+        keys.forEach((k, i) => {
+          params[k] = decodeURIComponent(m[i + 1]);
+        });
+        return { component: route.component, params, title: route.title, auth: route.auth };
+      }
+    }
+    return null;
+  }
+  return (ctx) => {
+    function handleRoute() {
+      const raw = mode === "hash" ? window.location.hash.slice(1) || "/" : window.location.pathname + window.location.search;
+      const [path, qs] = raw.split("?");
+      ctx.route.query = Object.fromEntries(new URLSearchParams(qs ?? ""));
+      const matched = matchPath(path);
+      if (matched) {
+        ctx.route.path = path;
+        ctx.route.params = matched.params;
+        ctx.route.component = matched.component;
+        ctx.route.title = matched.title;
+        ctx.route.auth = matched.auth;
+        if (matched.title) document.title = matched.title;
+        if (matched.auth && !ctx.user) {
+          setTimeout(() => ctx.app.navigate("/login"), 0);
+          return;
+        }
+      } else {
+        ctx.route.component = opts.notFound ?? null;
+      }
+      window.dispatchEvent(new CustomEvent("wefu:route", { detail: { path } }));
+    }
+    const origNavigate = ctx.app.navigate;
+    ctx.app.navigate = (path) => {
+      if (mode === "hash") {
+        window.location.hash = "#" + path;
+      } else {
+        window.history.pushState({}, "", path);
+        handleRoute();
+      }
+    };
+    if (mode === "hash") {
+      window.addEventListener("hashchange", handleRoute);
+    } else {
+      window.addEventListener("popstate", handleRoute);
+    }
+    handleRoute();
+    return ctx;
+  };
+}
+function RouteView(_props, ctx) {
+  const el = document.createElement("div");
+  function render() {
+    const Component = ctx.route.component;
+    if (!Component) {
+      el.textContent = "";
+      return;
+    }
+    el.textContent = "";
+    setCtx(ctx);
+    const page = jsx(Component, {});
+    el.appendChild(page);
+    setCtx(null);
+  }
+  render();
+  window.addEventListener("wefu:route", render);
+  return el;
+}
+
+// src/client/middleware/api.ts
+var _getToken = () => null;
+function setTokenGetter(fn) {
+  _getToken = fn;
+}
+function getToken() {
+  return _getToken();
+}
+var ApiError = class extends Error {
+  status;
+  constructor(status, message) {
+    super(`[${status}] ${message}`);
+    this.name = "ApiError";
+    this.status = status;
+  }
+};
+var ApiClient = class {
+  #baseUrl;
+  constructor(baseUrl = "/api") {
+    this.#baseUrl = baseUrl;
+  }
+  async request(method, path, body) {
+    const headers = {};
+    const token = getToken();
+    if (token) headers["Authorization"] = `Bearer ${token}`;
+    if (body != null) headers["Content-Type"] = "application/json";
+    const res = await fetch(`${this.#baseUrl}${path}`, {
+      method,
+      headers,
+      body: body != null ? JSON.stringify(body) : void 0
+    });
+    if (!res.ok) {
+      throw new ApiError(res.status, await res.text().catch(() => res.statusText));
+    }
+    if (res.status === 204) return void 0;
+    return res.json();
+  }
+  get(path) {
+    return this.request("GET", path);
+  }
+  post(path, body) {
+    return this.request("POST", path, body);
+  }
+  put(path, body) {
+    return this.request("PUT", path, body);
+  }
+  patch(path, body) {
+    return this.request("PATCH", path, body);
+  }
+  delete(path) {
+    return this.request("DELETE", path);
+  }
+};
+function api(opts = {}) {
+  return (ctx) => {
+    ctx.api = new ApiClient(opts.baseUrl ?? "/api");
+    return ctx;
+  };
+}
+
+// src/client/middleware/auth.ts
+function auth(opts = {}) {
+  const storageKey = opts.storageKey ?? "wefu:auth";
+  const loginPath = opts.loginPath ?? "/api/login";
+  const registerPath = opts.registerPath ?? "/api/register";
+  const mePath = opts.mePath ?? "/api/me";
+  return async (ctx) => {
+    const userSignal = signal(null);
+    const tokenSignal = signal(null);
+    setTokenGetter(() => tokenSignal.value);
+    function persist(user, token) {
+      userSignal.value = user;
+      tokenSignal.value = token;
+      if (token && user) {
+        localStorage.setItem(storageKey, JSON.stringify({ user, token }));
+      } else {
+        localStorage.removeItem(storageKey);
+      }
+    }
+    try {
+      const saved = localStorage.getItem(storageKey);
+      if (saved) {
+        const { user, token } = JSON.parse(saved);
+        userSignal.value = user;
+        tokenSignal.value = token;
+        setTokenGetter(() => token);
+      }
+    } catch {
+    }
+    if (tokenSignal.value) {
+      try {
+        const api2 = new ApiClient();
+        const user = await api2.get(mePath);
+        persist(user, tokenSignal.value);
+      } catch {
+        persist(null, null);
+      }
+    }
+    return {
+      ...ctx,
+      get user() {
+        return userSignal.value;
+      },
+      get token() {
+        return tokenSignal.value;
+      },
+      get isAuthenticated() {
+        return !!tokenSignal.value && !!userSignal.value;
+      },
+      async login(email, password) {
+        const api2 = new ApiClient();
+        const res = await api2.post(loginPath, { email, password });
+        persist(res.user, res.token);
+      },
+      logout() {
+        persist(null, null);
+      },
+      async register(input) {
+        const api2 = new ApiClient();
+        const res = await api2.post(registerPath, input);
+        persist(res.user, res.token);
+      }
+    };
+  };
+}
+
+// src/client/middleware/ws.ts
+function ws(opts = {}) {
+  const wsUrl = opts.url ?? "/ws";
+  const reconnectInterval = opts.reconnectInterval ?? 3e3;
+  const maxReconnect = opts.maxReconnect ?? 10;
+  return (ctx) => {
+    const isConnected = signal(false);
+    const messageHandlers = /* @__PURE__ */ new Set();
+    let socket = null;
+    let reconnectCount = 0;
+    let reconnectTimer = null;
+    function connect() {
+      if (socket?.readyState === WebSocket.OPEN || socket?.readyState === WebSocket.CONNECTING) return;
+      const token = getToken();
+      const url = token ? `${wsUrl}?token=${token}` : wsUrl;
+      try {
+        socket = new WebSocket(url);
+      } catch {
+        scheduleReconnect();
+        return;
+      }
+      socket.onopen = () => {
+        isConnected.value = true;
+        reconnectCount = 0;
+      };
+      socket.onmessage = (event) => {
+        try {
+          const data = JSON.parse(event.data);
+          for (const h3 of messageHandlers) h3(data);
+        } catch {
+          for (const h3 of messageHandlers) h3(event.data);
+        }
+      };
+      socket.onclose = () => {
+        isConnected.value = false;
+        socket = null;
+        scheduleReconnect();
+      };
+      socket.onerror = () => {
+        socket?.close();
+      };
+    }
+    function scheduleReconnect() {
+      if (reconnectCount >= maxReconnect) return;
+      reconnectCount++;
+      reconnectTimer = setTimeout(connect, reconnectInterval * reconnectCount);
+    }
+    function send(data) {
+      if (socket?.readyState === WebSocket.OPEN) {
+        socket.send(typeof data === "string" ? data : JSON.stringify(data));
+      }
+    }
+    function join(room) {
+      send({ type: "join", room });
+    }
+    function leave(room) {
+      send({ type: "leave", room });
+    }
+    connect();
+    return {
+      ...ctx,
+      ws: {
+        send,
+        onMessage: (handler) => {
+          messageHandlers.add(handler);
+          return () => messageHandlers.delete(handler);
+        },
+        join,
+        leave,
+        get isConnected() {
+          return isConnected;
+        }
+      }
+    };
+  };
+}
+
+// src/client/components/LoginForm.ts
+var h = (tag, props, ...children) => jsx(tag, props ?? {}, ...children);
+function LoginForm(_props, ctx) {
+  const mode = signal("login");
+  const email = signal("");
+  const name = signal("");
+  const password = signal("");
+  const error = signal(null);
+  const loading = signal(false);
+  const isRegister = computed(() => mode.value === "register");
+  const hasError = computed(() => error.value != null);
+  const submit = async () => {
+    error.value = null;
+    loading.value = true;
+    try {
+      if (mode.value === "login") {
+        await ctx.login(email.value, password.value);
+      } else {
+        await ctx.register({ email: email.value, name: name.value, password: password.value });
+      }
+    } catch (e) {
+      error.value = e.message ?? "\u64CD\u4F5C\u5931\u8D25";
+    } finally {
+      loading.value = false;
+    }
+  };
+  return h(
+    "div",
+    { class: "wefu-login" },
+    h(
+      "div",
+      { class: "wefu-login-card" },
+      h("h2", null, mode.value === "login" ? "\u767B\u5F55" : "\u6CE8\u518C"),
+      h(
+        "div",
+        { class: "wefu-login-tabs" },
+        h("button", { class: mode.value === "login" ? "active" : "", onClick: () => mode.value = "login" }, "\u767B\u5F55"),
+        h("button", { class: mode.value === "register" ? "active" : "", onClick: () => mode.value = "register" }, "\u6CE8\u518C")
+      ),
+      h(
+        "form",
+        { onSubmit: (e) => {
+          e.preventDefault();
+          submit();
+        } },
+        Show({
+          when: isRegister,
+          children: h(
+            "div",
+            { class: "wefu-field" },
+            h("label", null, "\u6635\u79F0"),
+            h("input", { value: name, onInput: (e) => name.value = e.target.value, placeholder: "\u4F60\u7684\u6635\u79F0" })
+          )
+        }),
+        h(
+          "div",
+          { class: "wefu-field" },
+          h("label", null, "\u90AE\u7BB1"),
+          h("input", { type: "email", value: email, onInput: (e) => email.value = e.target.value, placeholder: "\u90AE\u7BB1" })
+        ),
+        h(
+          "div",
+          { class: "wefu-field" },
+          h("label", null, "\u5BC6\u7801"),
+          h("input", { type: "password", value: password, onInput: (e) => password.value = e.target.value, placeholder: "\u5BC6\u7801" })
+        ),
+        Show({
+          when: hasError,
+          children: h("div", { class: "wefu-error" }, error)
+        }),
+        h(
+          "button",
+          { type: "submit", class: "wefu-btn wefu-btn-primary", disabled: loading },
+          loading ? "\u5904\u7406\u4E2D..." : mode.value === "login" ? "\u767B\u5F55" : "\u6CE8\u518C"
+        )
+      )
+    )
+  );
+}
+
+// src/client/components/Chat.ts
+var h2 = (tag, props, ...children) => jsx(tag, props ?? {}, ...children);
+function Chat({ conversationId }, ctx) {
+  const messages = signal([]);
+  const input = signal("");
+  const loading = signal(true);
+  const isEmpty = signal(false);
+  ctx.api.get(`/api/conversations/${conversationId}/messages`).then((msgs) => {
+    messages.value = Array.isArray(msgs) ? msgs.reverse() : [];
+    loading.value = false;
+    isEmpty.value = messages.value.length === 0;
+  }).catch(() => {
+    loading.value = false;
+    isEmpty.value = true;
+  });
+  const unsub = ctx.ws.onMessage((data) => {
+    if (data.conversation_id === conversationId) {
+      messages.value = [...messages.value, data];
+      isEmpty.value = false;
+    }
+  });
+  const send = () => {
+    const text = input.value.trim();
+    if (!text) return;
+    input.value = "";
+    ctx.api.post("/api/messages", { conversationId, body: text }).catch(() => {
+    });
+  };
+  return h2(
+    "div",
+    { class: "wefu-chat" },
+    // 消息列表
+    h2(
+      "div",
+      { class: "wefu-chat-messages" },
+      Show({ when: loading, children: h2("div", { class: "wefu-chat-loading" }, "\u52A0\u8F7D\u4E2D...") }),
+      Show({ when: isEmpty, children: h2("div", { class: "wefu-chat-empty" }, "\u6682\u65E0\u6D88\u606F") }),
+      h2(
+        "div",
+        { class: "wefu-chat-list" },
+        For({
+          each: messages.value,
+          children: (msg) => h2(
+            "div",
+            { class: `wefu-chat-msg ${msg.sender_id === ctx.user?.id ? "mine" : ""}` },
+            h2(
+              "div",
+              { class: "wefu-chat-msg-header" },
+              h2("span", { class: "wefu-chat-msg-sender" }, msg.sender_name ?? ""),
+              h2("span", { class: "wefu-chat-msg-time" }, new Date(msg.created_at).toLocaleTimeString())
+            ),
+            h2("div", { class: "wefu-chat-msg-body" }, msg.body)
+          )
+        })
+      )
+    ),
+    // 输入区
+    h2(
+      "div",
+      { class: "wefu-chat-input" },
+      h2("input", {
+        value: input,
+        onInput: (e) => input.value = e.target.value,
+        onKeyDown: (e) => {
+          if (e.key === "Enter") send();
+        },
+        placeholder: "\u8F93\u5165\u6D88\u606F..."
+      }),
+      h2("button", { class: "wefu-btn", onClick: send }, "\u53D1\u9001")
+    )
+  );
+}
+export {
+  ApiClient,
+  ApiError,
+  Chat,
+  For,
+  Fragment,
+  LoginForm,
+  RouteView,
+  Show,
+  api,
+  auth,
+  computed,
+  createApp,
+  domMount,
+  effect,
+  isSignal,
+  jsx,
+  jsxDEV,
+  jsxs,
+  router,
+  signal,
+  ws
+};