@epoch32/visage 1.1.3 → 1.1.4

package/dist/index-grhdtcb5.js

@@ -0,0 +1,234 @@
+import {
+  computed2,
+  onCleanup2,
+  createContext2,
+  useContext2,
+  signal2
+} from "./index-6kfe1nr4.js";
+import {
+  Show2
+} from "./index-5s255b3w.js";
+import {
+  jsx2
+} from "./index-9fvarkrx.js";
+// src/router/router.tsx
+var RouterContext = createContext2(null);
+function compilePath(path) {
+  const paramNames = [];
+  const normalized = path.replace(/\/+$/, "") || "/";
+  const regexStr = normalized.replace(/:([a-zA-Z0-9_]+)/g, (_, name) => {
+    paramNames.push(name);
+    return "([^/]+)";
+  }).replace(/\*/g, "(.*)");
+  const matcher = new RegExp(`^${regexStr}(?:/)?$`);
+  return { matcher, paramNames };
+}
+function matchRoute(routes, pathname, base = "") {
+  const cleanPath = base && pathname.startsWith(base) ? pathname.slice(base.length) || "/" : pathname;
+  for (const route of routes) {
+    const match = cleanPath.match(route.matcher);
+    if (match) {
+      const params = {};
+      const captures = match.slice(1);
+      route.paramNames.forEach((name, i) => {
+        params[name] = decodeURIComponent(captures[i] ?? "");
+      });
+      return {
+        path: route.path,
+        params,
+        component: route.component,
+        children: route.children
+      };
+    }
+  }
+  return null;
+}
+function Router2(props) {
+  const base = props.base ?? "";
+  const mode = props.mode ?? "history";
+  const getPathname = () => {
+    if (typeof window === "undefined" || !window.location)
+      return "/";
+    if (mode === "hash") {
+      const hash = window.location.hash.slice(1) || "/";
+      return hash.split("?")[0] || "/";
+    }
+    return window.location.pathname || "/";
+  };
+  const getSearch = () => {
+    if (typeof window === "undefined" || !window.location)
+      return "";
+    if (mode === "hash") {
+      const hash = window.location.hash.slice(1);
+      const queryIdx = hash.indexOf("?");
+      return queryIdx !== -1 ? hash.slice(queryIdx) : "";
+    }
+    return window.location.search || "";
+  };
+  const getHash = () => {
+    if (typeof window === "undefined" || !window.location)
+      return "";
+    return window.location.hash || "";
+  };
+  const pathname = signal2(getPathname());
+  const search = signal2(getSearch());
+  const hash = signal2(getHash());
+  const routes = [];
+  const registeredRoutes = signal2([]);
+  const registerRoute = (route) => {
+    routes.push(route);
+    registeredRoutes.set([...routes]);
+  };
+  const syncLocation = () => {
+    pathname.set(getPathname());
+    search.set(getSearch());
+    hash.set(getHash());
+  };
+  if (typeof window !== "undefined") {
+    const eventName = mode === "hash" ? "hashchange" : "popstate";
+    window.addEventListener(eventName, syncLocation);
+    onCleanup2(() => window.removeEventListener(eventName, syncLocation));
+  }
+  const navigate = (to, options) => {
+    if (typeof window === "undefined" || !window.history) {
+      pathname.set(to);
+      return;
+    }
+    const target = base ? `${base.replace(/\/$/, "")}/${to.replace(/^\//, "")}` : to;
+    if (mode === "hash") {
+      if (options?.replace) {
+        window.location.replace(`#${to}`);
+      } else {
+        window.location.hash = `#${to}`;
+      }
+    } else {
+      if (options?.replace) {
+        window.history.replaceState(null, "", target);
+      } else {
+        window.history.pushState(null, "", target);
+      }
+    }
+    syncLocation();
+  };
+  const matchedRoute = computed2(() => {
+    const currentPath = pathname();
+    const routeList = registeredRoutes();
+    return matchRoute(routeList, currentPath, base);
+  });
+  const params = computed2(() => matchedRoute()?.params ?? {});
+  const routerValue = {
+    location: { pathname, search, hash },
+    navigate,
+    params,
+    base,
+    matchedRoute,
+    routes,
+    registerRoute
+  };
+  return RouterContext.Provider({
+    value: routerValue,
+    children: props.children
+  });
+}
+function Route2(props) {
+  const router = useContext2(RouterContext);
+  if (!router) {
+    throw new Error("<Route> must be rendered inside a <Router>");
+  }
+  const { matcher, paramNames } = compilePath(props.path);
+  router.registerRoute({
+    path: props.path,
+    component: props.component,
+    children: props.children,
+    matcher,
+    paramNames
+  });
+  return null;
+}
+function Routes2(props) {
+  const router = useContext2(RouterContext);
+  if (!router) {
+    throw new Error("<Routes> must be rendered inside a <Router>");
+  }
+  const _ = typeof props.children === "function" ? props.children() : props.children;
+  return Show2({
+    when: () => router.matchedRoute() !== null,
+    fallback: props.fallback ?? (() => document.createTextNode("404 Not Found")),
+    children: () => {
+      const match = router.matchedRoute();
+      if (!match)
+        return null;
+      if (match.component) {
+        return match.component({ params: match.params });
+      }
+      return match.children ?? null;
+    }
+  });
+}
+function Link2(props) {
+  const router = useContext2(RouterContext);
+  const { href, class: className, activeClass = "active", replace, children, ...rest } = props;
+  const handleClick = (e) => {
+    if (e.ctrlKey || e.metaKey || e.altKey || e.shiftKey || e.button !== 0) {
+      return;
+    }
+    e.preventDefault();
+    if (router) {
+      router.navigate(href, { replace });
+    } else if (typeof window !== "undefined") {
+      window.location.href = href;
+    }
+  };
+  const isActive = computed2(() => {
+    if (!router)
+      return false;
+    const current = router.location.pathname();
+    return current === href || href !== "/" && current.startsWith(href);
+  });
+  const computedClass = computed2(() => {
+    const baseCls = typeof className === "function" ? className() : className ?? "";
+    if (activeClass && isActive()) {
+      return baseCls ? `${baseCls} ${activeClass}` : activeClass;
+    }
+    return baseCls;
+  });
+  return /* @__PURE__ */ jsx2("a", {
+    href,
+    class: computedClass,
+    onClick: handleClick,
+    ...rest,
+    children
+  });
+}
+function useLocation2() {
+  const router = useContext2(RouterContext);
+  if (!router)
+    throw new Error("useLocation must be used within a <Router>");
+  return router.location;
+}
+function useNavigate2() {
+  const router = useContext2(RouterContext);
+  if (!router)
+    throw new Error("useNavigate must be used within a <Router>");
+  return router.navigate;
+}
+function useParams2() {
+  const router = useContext2(RouterContext);
+  if (!router)
+    throw new Error("useParams must be used within a <Router>");
+  return () => router.params();
+}
+function useSearchParams2() {
+  const router = useContext2(RouterContext);
+  if (!router)
+    throw new Error("useSearchParams must be used within a <Router>");
+  const params = computed2(() => new URLSearchParams(router.location.search()));
+  const setSearchParams = (next) => {
+    const sp = next instanceof URLSearchParams ? next : new URLSearchParams(next);
+    const queryString = sp.toString();
+    const newUrl = `${router.location.pathname()}${queryString ? `?${queryString}` : ""}${router.location.hash()}`;
+    router.navigate(newUrl);
+  };
+  return [params, setSearchParams];
+}
+export { Router2, Route2, Routes2, Link2, useLocation2, useNavigate2, useParams2, useSearchParams2 };

package/dist/index-h6tjqk6e.js

@@ -0,0 +1,158 @@
+import {
+  batch2,
+  computed2,
+  signal2
+} from "./index-6kfe1nr4.js";
+import {
+  validateWithSchema2
+} from "./index-2zz0g2n2.js";
+
+// src/form/form.ts
+function createForm2(options) {
+  const initialValues = { ...options.initialValues };
+  const validateMode = options.validateOn ?? "change";
+  const fields = {};
+  const isSubmitting = signal2(false);
+  const submitCount = signal2(0);
+  const customErrors = signal2({});
+  for (const key in initialValues) {
+    const initVal = initialValues[key];
+    const valSignal = signal2(initVal);
+    const touchedSignal = signal2(false);
+    const isDirty = computed2(() => !Object.is(valSignal(), initialValues[key]));
+    fields[key] = {
+      value: valSignal,
+      touched: touchedSignal,
+      isDirty,
+      error: computed2(() => {
+        const custom = customErrors()[key];
+        if (custom)
+          return custom;
+        if (validateMode === "blur" && !touchedSignal() && submitCount() === 0) {
+          return null;
+        }
+        if (!options.schema)
+          return null;
+        const currentValues = getValues();
+        const res = validateWithSchema2(options.schema, currentValues);
+        if (!res.success && res.issues) {
+          const match = res.issues.find((i) => i.path === key || i.path === `${key}`);
+          return match ? match.message : null;
+        }
+        return null;
+      })
+    };
+  }
+  const getValues = () => {
+    const res = {};
+    for (const key in fields) {
+      res[key] = fields[key].value();
+    }
+    return res;
+  };
+  const errors = computed2(() => {
+    const errMap = {};
+    for (const key in fields) {
+      const err = fields[key].error();
+      if (err) {
+        errMap[key] = err;
+      }
+    }
+    return errMap;
+  });
+  const isValid = computed2(() => {
+    const errs = errors();
+    return Object.keys(errs).length === 0;
+  });
+  const isDirty = computed2(() => {
+    for (const key in fields) {
+      if (fields[key].isDirty())
+        return true;
+    }
+    return false;
+  });
+  const validate = () => {
+    if (!options.schema)
+      return true;
+    const res = validateWithSchema2(options.schema, getValues());
+    return res.success;
+  };
+  const handleSubmit = async (e) => {
+    if (e?.preventDefault) {
+      e.preventDefault();
+    }
+    submitCount.update((c) => c + 1);
+    batch2(() => {
+      for (const key in fields) {
+        fields[key].touched.set(true);
+      }
+    });
+    const valid = validate();
+    if (!valid) {
+      return false;
+    }
+    if (options.onSubmit) {
+      isSubmitting.set(true);
+      try {
+        await options.onSubmit(getValues());
+      } finally {
+        isSubmitting.set(false);
+      }
+    }
+    return true;
+  };
+  const bind = (name) => {
+    const field = fields[name];
+    if (!field) {
+      throw new Error(`Field '${String(name)}' not found in form`);
+    }
+    return {
+      name: String(name),
+      value: field.value,
+      onInput: (e) => {
+        const val = e?.target?.type === "checkbox" ? e.target.checked : e?.target?.value !== undefined ? e.target.value : e;
+        field.value.set(val);
+      },
+      onBlur: () => {
+        field.touched.set(true);
+      }
+    };
+  };
+  const reset = (newValues) => {
+    const resetTarget = { ...initialValues, ...newValues };
+    batch2(() => {
+      for (const key in fields) {
+        fields[key].value.set(resetTarget[key]);
+        fields[key].touched.set(false);
+      }
+      customErrors.set({});
+      submitCount.set(0);
+      isSubmitting.set(false);
+    });
+  };
+  const setFieldValue = (name, value) => {
+    fields[name]?.value.set(value);
+  };
+  const setFieldError = (name, error) => {
+    customErrors.update((prev) => ({
+      ...prev,
+      [name]: error ?? undefined
+    }));
+  };
+  return {
+    fields,
+    values: getValues,
+    errors,
+    isValid,
+    isDirty,
+    isSubmitting,
+    submitCount,
+    bind,
+    handleSubmit,
+    reset,
+    setFieldValue,
+    setFieldError,
+    validate
+  };
+}
+export { createForm2 };

package/dist/index-js199er4.js

@@ -0,0 +1,101 @@
+import {
+  setAttribute2,
+  insertChild2
+} from "./index-6kfe1nr4.js";
+
+// src/template/template.ts
+var templateCache = new Map;
+function template2(htmlString) {
+  let templateEl = templateCache.get(htmlString);
+  if (!templateEl && typeof document !== "undefined") {
+    templateEl = document.createElement("template");
+    templateEl.innerHTML = htmlString.trim();
+    templateCache.set(htmlString, templateEl);
+  }
+  return () => {
+    if (!templateEl) {
+      const wrapper = document.createElement("div");
+      wrapper.innerHTML = htmlString.trim();
+      return wrapper.firstElementChild;
+    }
+    return templateEl.content.firstElementChild.cloneNode(true);
+  };
+}
+function html2(strings, ...values) {
+  const MARKER_PREFIX = "visage-bind-";
+  let htmlString = "";
+  const bindings = [];
+  for (let i = 0;i < strings.length; i++) {
+    htmlString += strings[i];
+    if (i < values.length) {
+      const val = values[i];
+      const markerId = `${MARKER_PREFIX}${i}`;
+      const lastOpeningTag = htmlString.lastIndexOf("<");
+      const lastClosingTag = htmlString.lastIndexOf(">");
+      if (lastOpeningTag > lastClosingTag) {
+        const match = htmlString.match(/([a-zA-Z0-9_-]+)=["']?$/);
+        if (match?.[1]) {
+          const attrName = match[1];
+          bindings.push({ id: markerId, value: val, isAttr: true, attrName });
+          htmlString += `${markerId}`;
+        } else {
+          bindings.push({ id: markerId, value: val, isAttr: true });
+          htmlString += `data-visage-prop-${i}="${markerId}"`;
+        }
+      } else {
+        bindings.push({ id: markerId, value: val, isAttr: false });
+        htmlString += `<!--${markerId}-->`;
+      }
+    }
+  }
+  const clone = template2(htmlString);
+  const root = clone();
+  for (const bind of bindings) {
+    if (bind.isAttr && bind.attrName) {
+      const targetEl = findElementWithAttributeValue(root, bind.attrName, bind.id);
+      if (targetEl) {
+        targetEl.removeAttribute(bind.attrName);
+        setAttribute2(targetEl, bind.attrName, bind.value);
+      }
+    } else if (!bind.isAttr) {
+      const commentNode = findCommentNode(root, bind.id);
+      if (commentNode?.parentNode) {
+        insertChild2(commentNode.parentNode, bind.value, commentNode);
+        commentNode.parentNode.removeChild(commentNode);
+      }
+    }
+  }
+  return root;
+}
+function findElementWithAttributeValue(root, attrName, value) {
+  if (root.getAttribute(attrName) === value) {
+    return root;
+  }
+  return root.querySelector(`[${attrName}="${value}"]`);
+}
+function findCommentNode(root, text) {
+  const iterator = typeof document !== "undefined" && document.createNodeIterator ? document.createNodeIterator(root, 128) : null;
+  if (iterator) {
+    let node = iterator.nextNode();
+    while (node) {
+      if (node.nodeValue === text) {
+        return node;
+      }
+      node = iterator.nextNode();
+    }
+    return null;
+  }
+  const traverse = (node) => {
+    for (const child of node.childNodes || []) {
+      if (child.nodeType === 8 && child.data === text) {
+        return child;
+      }
+      const res = traverse(child);
+      if (res)
+        return res;
+    }
+    return null;
+  };
+  return traverse(root);
+}
+export { template2, html2 };

package/dist/index-x2rs3vab.js

@@ -0,0 +1,124 @@
+import {
+  insertChild2,
+  onCleanup2,
+  createRoot2
+} from "./index-6kfe1nr4.js";
+
+// src/server/hydrate.ts
+function hydrate2(fn, container) {
+  return createRoot2((dispose) => {
+    container.textContent = "";
+    const node = insertChild2(container, fn());
+    onCleanup2(() => {
+      if (node && node instanceof Node && node.parentNode === container) {
+        container.removeChild(node);
+      }
+    });
+    return dispose;
+  });
+}
+// src/server/render-to-string.ts
+var VOID_ELEMENTS = new Set([
+  "area",
+  "base",
+  "br",
+  "col",
+  "embed",
+  "hr",
+  "img",
+  "input",
+  "link",
+  "meta",
+  "param",
+  "source",
+  "track",
+  "wbr"
+]);
+function escapeHtml(str) {
+  return str.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;").replace(/"/g, "&quot;").replace(/'/g, "&#39;");
+}
+function renderChildToString2(child) {
+  if (child === null || child === undefined || child === false || child === true) {
+    return "";
+  }
+  if (typeof child === "function") {
+    return renderChildToString2(child());
+  }
+  if (Array.isArray(child)) {
+    return child.map((c) => renderChildToString2(c)).join("");
+  }
+  if (typeof child === "object" && "nodeType" in child) {
+    if (child.nodeType === 11 && child.childNodes) {
+      return child.childNodes.map((c) => renderChildToString2(c)).join("");
+    }
+    return child.outerHTML || child.textContent || "";
+  }
+  return escapeHtml(String(child));
+}
+function renderToString2(fn) {
+  return createRoot2(() => {
+    const result = fn();
+    return renderNodeToString(result);
+  });
+}
+function renderNodeToString(node) {
+  if (node === null || node === undefined || node === false || node === true) {
+    return "";
+  }
+  if (typeof node === "function") {
+    return renderNodeToString(node());
+  }
+  if (Array.isArray(node)) {
+    return node.map((n) => renderNodeToString(n)).join("");
+  }
+  if (typeof node === "object" && node !== null) {
+    if (node.nodeType === 11) {
+      return (node.childNodes || []).map((c) => renderNodeToString(c)).join("");
+    }
+    if ("tagName" in node) {
+      const tag = String(node.tagName).toLowerCase();
+      const isVoid = VOID_ELEMENTS.has(tag);
+      let attrStr = "";
+      if (node.attributes instanceof Map) {
+        for (const [k, v] of node.attributes) {
+          attrStr += ` ${k}="${escapeHtml(String(v))}"`;
+        }
+      }
+      if (node.style && typeof node.style === "object" && !(node.attributes instanceof Map && node.attributes.has("style"))) {
+        const styleEntries = Object.entries(node.style).filter(([_, v]) => typeof v === "string" && v.length > 0);
+        if (styleEntries.length > 0) {
+          const styleStr = styleEntries.map(([k, v]) => `${k.startsWith("--") ? k : k.replace(/([A-Z])/g, "-$1").toLowerCase()}: ${v}`).join("; ");
+          attrStr += ` style="${escapeHtml(styleStr)}"`;
+        }
+      }
+      if (isVoid) {
+        return `<${tag}${attrStr} />`;
+      }
+      const inner = (node.childNodes || []).map((c) => renderNodeToString(c)).join("");
+      return `<${tag}${attrStr}>${inner}</${tag}>`;
+    }
+    if ("textContent" in node) {
+      return escapeHtml(node.textContent || "");
+    }
+  }
+  return escapeHtml(String(node));
+}
+
+// src/server/render-to-stream.ts
+function renderToStream2(fn, options) {
+  const encoder = new TextEncoder;
+  return new ReadableStream({
+    start(controller) {
+      try {
+        const initialHtml = renderToString2(fn);
+        options?.onChunk?.(initialHtml);
+        controller.enqueue(encoder.encode(initialHtml));
+        controller.close();
+      } catch (err) {
+        options?.onError?.(err);
+        controller.error(err);
+      }
+    }
+  });
+}
+export { hydrate2, renderChildToString2, renderToString2, renderToStream2 };