sibujs 1.3.0 → 1.5.0

package/dist/chunk-SFKNRVCU.js

@@ -0,0 +1,292 @@
+import {
+  bindAttribute,
+  registerDisposer
+} from "./chunk-5ZYQ6KDD.js";
+import {
+  isUrlAttribute,
+  sanitizeCSSValue,
+  sanitizeUrl
+} from "./chunk-CMBFNA7L.js";
+import {
+  track
+} from "./chunk-K4G4ZQNR.js";
+import {
+  devWarn,
+  isDev
+} from "./chunk-5X6PP2UK.js";
+
+// src/reactivity/bindChildNode.ts
+var _isDev = isDev();
+function bindChildNode(placeholder, getter) {
+  let lastNodes = [];
+  function commit() {
+    let result;
+    try {
+      result = getter();
+    } catch (err) {
+      if (_isDev) devWarn(`bindChildNode: getter threw: ${err instanceof Error ? err.message : String(err)}`);
+      return;
+    }
+    if (result == null || typeof result === "boolean") {
+      for (let i = 0; i < lastNodes.length; i++) {
+        const node = lastNodes[i];
+        if (node.parentNode) node.parentNode.removeChild(node);
+      }
+      lastNodes.length = 0;
+      return;
+    }
+    const parent = placeholder.parentNode;
+    if (!parent) {
+      lastNodes.length = 0;
+      return;
+    }
+    let newNodes;
+    if (Array.isArray(result)) {
+      newNodes = [];
+      for (let i = 0; i < result.length; i++) {
+        const item = result[i];
+        if (item == null || typeof item === "boolean") continue;
+        newNodes.push(item instanceof Node ? item : document.createTextNode(String(item)));
+      }
+    } else {
+      const node = result instanceof Node ? result : document.createTextNode(String(result));
+      newNodes = [node];
+    }
+    const reused = lastNodes.length > 0 && newNodes.length > 0 ? /* @__PURE__ */ new Set() : void 0;
+    if (reused) {
+      for (let i = 0; i < newNodes.length; i++) {
+        for (let j = 0; j < lastNodes.length; j++) {
+          if (newNodes[i] === lastNodes[j]) {
+            reused.add(newNodes[i]);
+            break;
+          }
+        }
+      }
+    }
+    for (let i = 0; i < lastNodes.length; i++) {
+      const node = lastNodes[i];
+      if (reused?.has(node)) continue;
+      if (node.parentNode) node.parentNode.removeChild(node);
+    }
+    const anchor = placeholder.nextSibling;
+    for (let i = 0; i < newNodes.length; i++) {
+      const node = newNodes[i];
+      if (reused?.has(node) && node.parentNode === parent) {
+        if (node.nextSibling !== anchor) {
+          parent.insertBefore(node, anchor);
+        }
+      } else {
+        parent.insertBefore(node, anchor);
+      }
+    }
+    lastNodes = newNodes;
+  }
+  return track(commit);
+}
+
+// src/core/rendering/tagFactory.ts
+var SVG_NS = "http://www.w3.org/2000/svg";
+var kebabCache = /* @__PURE__ */ new Map();
+function toKebab(prop) {
+  let cached = kebabCache.get(prop);
+  if (cached !== void 0) return cached;
+  cached = prop.replace(/[A-Z]/g, (m) => `-${m.toLowerCase()}`);
+  kebabCache.set(prop, cached);
+  return cached;
+}
+function applyStyle(el, style) {
+  if (typeof style === "function") {
+    const teardown = track(() => {
+      el.setAttribute("style", style());
+    });
+    registerDisposer(el, teardown);
+    return;
+  }
+  if (typeof style === "string") {
+    el.setAttribute("style", style);
+    return;
+  }
+  const htmlEl = el;
+  for (const prop in style) {
+    const val = style[prop];
+    const name = toKebab(prop);
+    if (typeof val === "function") {
+      const getter = val;
+      const teardown = track(() => {
+        htmlEl.style.setProperty(name, sanitizeCSSValue(String(getter())));
+      });
+      registerDisposer(el, teardown);
+    } else {
+      htmlEl.style.setProperty(name, sanitizeCSSValue(String(val)));
+    }
+  }
+}
+function applyClass(el, cls) {
+  if (typeof cls === "string") {
+    el.setAttribute("class", cls);
+    return;
+  }
+  if (typeof cls === "function") {
+    const teardown = track(() => {
+      el.setAttribute("class", cls());
+    });
+    registerDisposer(el, teardown);
+    return;
+  }
+  const obj = cls;
+  let hasReactive = false;
+  let result = "";
+  for (const name in obj) {
+    const val = obj[name];
+    if (typeof val === "function") {
+      hasReactive = true;
+      break;
+    }
+    if (val) result = result ? `${result} ${name}` : name;
+  }
+  if (hasReactive) {
+    const update = () => {
+      let r = "";
+      for (const name in obj) {
+        const val = obj[name];
+        const active = typeof val === "function" ? val() : val;
+        if (active) r = r ? `${r} ${name}` : name;
+      }
+      el.setAttribute("class", r);
+    };
+    const teardown = track(update);
+    registerDisposer(el, teardown);
+  } else {
+    el.setAttribute("class", result);
+  }
+}
+function appendChildren(el, nodes) {
+  if (typeof nodes === "string") {
+    el.textContent = nodes;
+    return;
+  }
+  if (typeof nodes === "number") {
+    el.textContent = String(nodes);
+    return;
+  }
+  if (typeof nodes === "boolean" || nodes == null) {
+    return;
+  }
+  if (typeof nodes === "function") {
+    const ph = document.createComment("");
+    el.appendChild(ph);
+    registerDisposer(el, bindChildNode(ph, nodes));
+    return;
+  }
+  if (nodes instanceof Node) {
+    el.appendChild(nodes);
+    return;
+  }
+  if (Array.isArray(nodes)) {
+    for (let i = 0; i < nodes.length; i++) {
+      const c = nodes[i];
+      if (typeof c === "function") {
+        const ph = document.createComment("");
+        el.appendChild(ph);
+        registerDisposer(el, bindChildNode(ph, c));
+      } else if (c instanceof Node) {
+        el.appendChild(c);
+      } else if (Array.isArray(c)) {
+        for (let j = 0; j < c.length; j++) {
+          const inner = c[j];
+          if (typeof inner === "function") {
+            const ph = document.createComment("");
+            el.appendChild(ph);
+            registerDisposer(el, bindChildNode(ph, inner));
+          } else if (inner instanceof Node) {
+            el.appendChild(inner);
+          } else if (inner != null && typeof inner !== "boolean") {
+            el.appendChild(document.createTextNode(String(inner)));
+          }
+        }
+      } else if (c != null && typeof c !== "boolean") {
+        el.appendChild(document.createTextNode(String(c)));
+      }
+    }
+  }
+}
+var tagFactory = (tag, ns) => (first, second) => {
+  const el = ns ? document.createElementNS(ns, tag) : document.createElement(tag);
+  if (first === void 0) return el;
+  if (typeof first === "string") {
+    if (second !== void 0) {
+      el.setAttribute("class", first);
+      appendChildren(el, second);
+      return el;
+    }
+    el.textContent = first;
+    return el;
+  }
+  if (typeof first === "number") {
+    el.textContent = String(first);
+    return el;
+  }
+  if (Array.isArray(first) || first instanceof Node || typeof first === "function") {
+    appendChildren(el, first);
+    return el;
+  }
+  const props = first;
+  const pClass = props.class;
+  if (pClass != null) applyClass(el, pClass);
+  const pId = props.id;
+  if (pId != null) el.id = pId;
+  const pNodes = second !== void 0 ? second : props.nodes;
+  if (pNodes != null) appendChildren(el, pNodes);
+  const pOn = props.on;
+  if (pOn) {
+    for (const ev in pOn) {
+      el.addEventListener(ev, pOn[ev]);
+    }
+  }
+  const pStyle = props.style;
+  if (pStyle != null) applyStyle(el, pStyle);
+  const pRef = props.ref;
+  if (pRef) pRef.current = el;
+  for (const key in props) {
+    switch (key) {
+      case "class":
+      case "id":
+      case "nodes":
+      case "on":
+      case "style":
+      case "ref":
+      case "onElement":
+        continue;
+      // already handled above / below
+      default: {
+        const value = props[key];
+        if (value == null) continue;
+        if (key[0] === "o" && key[1] === "n") continue;
+        if (typeof value === "function") {
+          registerDisposer(el, bindAttribute(el, key, value));
+        } else if (typeof value === "boolean") {
+          if (key in el && (key === "checked" || key === "disabled" || key === "selected")) {
+            el[key] = value;
+          } else if (value) {
+            el.setAttribute(key, "");
+          } else {
+            el.removeAttribute(key);
+          }
+        } else {
+          const str = String(value);
+          el.setAttribute(key, isUrlAttribute(key) ? sanitizeUrl(str) : str);
+        }
+      }
+    }
+  }
+  if (props.onElement && typeof props.onElement === "function") {
+    props.onElement(el);
+  }
+  return el;
+};
+
+export {
+  bindChildNode,
+  SVG_NS,
+  tagFactory
+};

package/dist/chunk-TDGZL5CU.js

@@ -0,0 +1,365 @@
+import {
+  createPlugin
+} from "./chunk-K5ZUMYVS.js";
+import {
+  tagFactory
+} from "./chunk-SFKNRVCU.js";
+import {
+  derived
+} from "./chunk-XHK6BDAJ.js";
+import {
+  effect
+} from "./chunk-VQNQZCWJ.js";
+import {
+  batch,
+  signal
+} from "./chunk-NZIIMDWI.js";
+
+// src/ecosystem/adapters/mobx.ts
+function mobXAdapter(options) {
+  return createPlugin("sibu-mobx", (ctx) => {
+    const { autorun } = options;
+    const disposers = [];
+    function fromMobX(expression) {
+      const [getValue, setValue] = signal(expression());
+      const disposer = autorun(() => {
+        const newValue = expression();
+        batch(() => {
+          setValue(newValue);
+        });
+      });
+      disposers.push(disposer);
+      return getValue;
+    }
+    function toMobX(sibuGetter, callback) {
+      return effect(() => {
+        callback(sibuGetter());
+      });
+    }
+    function destroy() {
+      for (const disposer of disposers) {
+        disposer();
+      }
+      disposers.length = 0;
+    }
+    const api = { fromMobX, toMobX, destroy };
+    ctx.provide("mobx", api);
+  });
+}
+
+// src/ecosystem/adapters/redux.ts
+function reduxAdapter(options) {
+  return createPlugin("sibu-redux", (ctx) => {
+    const { store } = options;
+    const [getState, setState] = signal(store.getState());
+    const unsubscribe = store.subscribe(() => {
+      batch(() => {
+        setState(store.getState());
+      });
+    });
+    function useSelector(selector) {
+      return derived(() => selector(getState()));
+    }
+    const api = {
+      getState,
+      useSelector,
+      dispatch: store.dispatch.bind(store),
+      destroy: unsubscribe
+    };
+    ctx.provide("redux", api);
+  });
+}
+
+// src/ecosystem/adapters/zustand.ts
+function zustandAdapter(options) {
+  return createPlugin("sibu-zustand", (ctx) => {
+    const { store } = options;
+    const [getState, setSibuState] = signal(store.getState());
+    const unsubscribe = store.subscribe((state) => {
+      batch(() => {
+        setSibuState(state);
+      });
+    });
+    function useSelector(selector) {
+      return derived(() => selector(getState()));
+    }
+    const api = {
+      getState,
+      useSelector,
+      setState: store.setState.bind(store),
+      destroy() {
+        unsubscribe();
+        store.destroy();
+      }
+    };
+    ctx.provide("zustand", api);
+  });
+}
+
+// src/ecosystem/ui/componentAdapter.ts
+function createTheme(initial) {
+  const [getConfig, setConfig] = signal(initial);
+  function resolveClass(component, variant) {
+    const config = getConfig();
+    const overrideKey = variant ? `${component}-${variant}` : component;
+    if (config.classOverrides?.[overrideKey]) {
+      return config.classOverrides[overrideKey];
+    }
+    const base = `${config.prefix}-${component}`;
+    return variant ? `${base} ${config.prefix}-${component}--${variant}` : base;
+  }
+  function setTheme(partial) {
+    setConfig((prev) => ({ ...prev, ...partial }));
+  }
+  return { config: getConfig, setTheme, resolveClass };
+}
+function componentAdapter(config) {
+  const theme = createTheme({ prefix: config.prefix });
+  const components = {};
+  for (const [name, mapping] of Object.entries(config.components)) {
+    const factory = tagFactory(mapping.tag || "div");
+    components[name] = (props = {}) => {
+      const { variant, size, class: userClass, ...rest } = props;
+      const classes = [mapping.baseClass];
+      if (variant && mapping.variants?.[variant]) {
+        classes.push(mapping.variants[variant]);
+      }
+      if (size && mapping.sizes?.[size]) {
+        classes.push(mapping.sizes[size]);
+      }
+      let finalClass;
+      if (typeof userClass === "function") {
+        finalClass = () => {
+          const extra = userClass();
+          return extra ? `${classes.join(" ")} ${extra}` : classes.join(" ");
+        };
+      } else if (typeof userClass === "string" && userClass) {
+        finalClass = `${classes.join(" ")} ${userClass}`;
+      } else {
+        finalClass = classes.join(" ");
+      }
+      const mergedProps = {
+        ...mapping.defaultProps,
+        ...rest,
+        class: finalClass
+      };
+      return factory(mergedProps);
+    };
+  }
+  return { name: config.name, components, theme };
+}
+
+// src/ecosystem/ui/antd.ts
+var antdConfig = {
+  name: "antd",
+  prefix: "ant",
+  components: {
+    Button: {
+      tag: "button",
+      baseClass: "ant-btn",
+      variants: {
+        primary: "ant-btn-primary",
+        dashed: "ant-btn-dashed",
+        text: "ant-btn-text",
+        link: "ant-btn-link",
+        default: "ant-btn-default",
+        danger: "ant-btn-dangerous"
+      },
+      sizes: {
+        sm: "ant-btn-sm",
+        lg: "ant-btn-lg"
+      },
+      defaultProps: { type: "button" }
+    },
+    Input: {
+      tag: "input",
+      baseClass: "ant-input",
+      sizes: {
+        sm: "ant-input-sm",
+        lg: "ant-input-lg"
+      }
+    },
+    Card: {
+      tag: "div",
+      baseClass: "ant-card",
+      variants: {
+        bordered: "ant-card-bordered"
+      }
+    },
+    Modal: {
+      tag: "div",
+      baseClass: "ant-modal"
+    },
+    Tag: {
+      tag: "span",
+      baseClass: "ant-tag",
+      variants: {
+        success: "ant-tag-success",
+        error: "ant-tag-error",
+        warning: "ant-tag-warning",
+        processing: "ant-tag-processing"
+      }
+    },
+    Badge: {
+      tag: "span",
+      baseClass: "ant-badge"
+    },
+    Avatar: {
+      tag: "span",
+      baseClass: "ant-avatar",
+      sizes: {
+        sm: "ant-avatar-sm",
+        lg: "ant-avatar-lg"
+      }
+    }
+  }
+};
+var antdAdapter = componentAdapter(antdConfig);
+
+// src/ecosystem/ui/chakra.ts
+var chakraConfig = {
+  name: "chakra",
+  prefix: "chakra",
+  components: {
+    Button: {
+      tag: "button",
+      baseClass: "chakra-button",
+      variants: {
+        solid: "chakra-button--solid",
+        outline: "chakra-button--outline",
+        ghost: "chakra-button--ghost",
+        link: "chakra-button--link"
+      },
+      sizes: {
+        xs: "chakra-button--xs",
+        sm: "chakra-button--sm",
+        md: "chakra-button--md",
+        lg: "chakra-button--lg"
+      },
+      defaultProps: { type: "button" }
+    },
+    Input: {
+      tag: "input",
+      baseClass: "chakra-input",
+      variants: {
+        outline: "chakra-input--outline",
+        filled: "chakra-input--filled",
+        flushed: "chakra-input--flushed",
+        unstyled: "chakra-input--unstyled"
+      },
+      sizes: {
+        xs: "chakra-input--xs",
+        sm: "chakra-input--sm",
+        md: "chakra-input--md",
+        lg: "chakra-input--lg"
+      }
+    },
+    Card: {
+      tag: "div",
+      baseClass: "chakra-card",
+      variants: {
+        elevated: "chakra-card--elevated",
+        outline: "chakra-card--outline",
+        filled: "chakra-card--filled",
+        unstyled: "chakra-card--unstyled"
+      }
+    },
+    Modal: {
+      tag: "div",
+      baseClass: "chakra-modal__content"
+    },
+    Badge: {
+      tag: "span",
+      baseClass: "chakra-badge",
+      variants: {
+        solid: "chakra-badge--solid",
+        subtle: "chakra-badge--subtle",
+        outline: "chakra-badge--outline"
+      }
+    },
+    Stack: {
+      tag: "div",
+      baseClass: "chakra-stack",
+      variants: {
+        horizontal: "chakra-stack--horizontal",
+        vertical: "chakra-stack--vertical"
+      }
+    }
+  }
+};
+var chakraAdapter = componentAdapter(chakraConfig);
+
+// src/ecosystem/ui/material.ts
+var materialConfig = {
+  name: "material",
+  prefix: "mdc",
+  components: {
+    Button: {
+      tag: "button",
+      baseClass: "mdc-button",
+      variants: {
+        raised: "mdc-button--raised",
+        outlined: "mdc-button--outlined",
+        text: "mdc-button--text",
+        unelevated: "mdc-button--unelevated"
+      },
+      sizes: {
+        sm: "mdc-button--dense"
+      },
+      defaultProps: { type: "button" }
+    },
+    Input: {
+      tag: "div",
+      baseClass: "mdc-text-field",
+      variants: {
+        outlined: "mdc-text-field--outlined",
+        filled: "mdc-text-field--filled"
+      }
+    },
+    Card: {
+      tag: "div",
+      baseClass: "mdc-card",
+      variants: {
+        outlined: "mdc-card--outlined",
+        elevated: "mdc-card--elevated"
+      }
+    },
+    Modal: {
+      tag: "div",
+      baseClass: "mdc-dialog",
+      variants: {
+        fullscreen: "mdc-dialog--fullscreen"
+      }
+    },
+    Chip: {
+      tag: "span",
+      baseClass: "mdc-chip",
+      variants: {
+        outlined: "mdc-chip--outlined"
+      }
+    },
+    List: {
+      tag: "ul",
+      baseClass: "mdc-list",
+      variants: {
+        dense: "mdc-list--dense"
+      }
+    },
+    ListItem: {
+      tag: "li",
+      baseClass: "mdc-list-item"
+    }
+  }
+};
+var materialAdapter = componentAdapter(materialConfig);
+
+export {
+  mobXAdapter,
+  reduxAdapter,
+  zustandAdapter,
+  createTheme,
+  componentAdapter,
+  antdAdapter,
+  chakraAdapter,
+  materialAdapter
+};