sinwan 1.1.0 → 1.1.2

package/dist/esm/renderer/index.development.js

@@ -316,7 +316,6 @@ function signal(initial) {
 function isSignal(value) {
   return value != null && typeof value === "object" && SIGNAL_BRAND in value;
 }
-
 // src/reactivity/computed.ts
 var COMPUTED_BRAND = Symbol("Sinwan:computed");
 
@@ -368,10 +367,35 @@ function computed(getter) {
 function isComputed(value) {
   return value != null && typeof value === "object" && COMPUTED_BRAND in value;
 }
-
+// src/reactivity/batch.ts
+var batchDepth = 0;
+function batch(fn) {
+  batchDepth++;
+  try {
+    fn();
+  } finally {
+    batchDepth--;
+    if (batchDepth === 0) {
+      flushSync();
+    }
+  }
+}
+// src/reactivity/normalization.ts
+function isReactive(value) {
+  return isSignal(value) || isComputed(value) || typeof value === "function";
+}
+function resolve(value) {
+  if (isSignal(value) || isComputed(value)) {
+    return value.value;
+  }
+  if (typeof value === "function") {
+    return value();
+  }
+  return value;
+}
 // src/renderer/events.ts
 function isEventProp(key) {
-  return key.length > 2 && key[0] === "o" && key[1] === "n" && key[2] >= "A" && key[2] <= "Z";
+  return key.length > 2 && key.startsWith("on");
 }
 function toEventName(key) {
   return key.slice(2).toLowerCase();
@@ -448,19 +472,28 @@ function fireMountedHooks(instance) {
   }
 }
 function fireUnmountedHooks(instance) {
-  for (const child of instance.children) {
+  const children = [...instance.children];
+  for (const child of children) {
     fireUnmountedHooks(child);
   }
-  if (instance.isMounted && !instance.isUnmounted) {
+  if (!instance.isUnmounted) {
     instance.isUnmounted = true;
-    instance.isMounted = false;
-    for (const hook of instance._unmountedHooks) {
-      hook();
+    if (instance.isMounted) {
+      instance.isMounted = false;
+      for (const hook of instance._unmountedHooks) {
+        hook();
+      }
     }
     for (const dispose of instance.effects) {
       dispose();
     }
     instance.effects.length = 0;
+    if (instance.parent) {
+      const idx = instance.parent.children.indexOf(instance);
+      if (idx !== -1) {
+        instance.parent.children.splice(idx, 1);
+      }
+    }
   }
 }
 function fireUpdatedHooks(instance) {
@@ -510,11 +543,13 @@ function applyAttributes(el, props) {
   for (const [key, value] of Object.entries(props)) {
     if (SKIP_PROPS.has(key) || isEventProp(key))
       continue;
-    if (isSignal(value) || isComputed(value)) {
+    const attrName = resolveAttributeName(key);
+    const isComplex = attrName === "class" || attrName === "style";
+    if (isReactive(value) || isComplex && containsReactive(value)) {
       const state = { previousStyleProps: new Set };
       let initialized = false;
       const dispose = effect(() => {
-        setSingleAttribute(el, key, value.value, state);
+        setSingleAttribute(el, key, resolve(value), state);
         if (initialized) {
           queueUpdatedHooks(owner);
         }
@@ -572,19 +607,17 @@ function setSingleAttribute(el, key, value, state) {
 function resolveAttributeName(key) {
   return PROP_ALIASES[key] ?? key;
 }
-function applyStyle(el, styles, state) {
+function applyStyle(el, value, state) {
+  const styleObj = normalizeStyle(value);
   const nextProps = new Set;
-  for (const [prop, val] of Object.entries(styles)) {
+  for (const [prop, val] of Object.entries(styleObj)) {
     nextProps.add(prop);
     if (val == null) {
       removeStyleProperty(el, prop);
       continue;
     }
-    if (prop.includes("-")) {
-      el.style.setProperty(prop, String(val));
-    } else {
-      el.style[prop] = val;
-    }
+    const kebabProp = prop.startsWith("--") ? prop : camelToKebab(prop);
+    el.style.setProperty(kebabProp, String(val));
   }
   if (!state) {
     return;
@@ -596,37 +629,77 @@ function applyStyle(el, styles, state) {
   }
   state.previousStyleProps = nextProps;
 }
+function normalizeStyle(value) {
+  const resolved = resolve(value);
+  if (!resolved)
+    return {};
+  if (typeof resolved === "string") {
+    return parseStyleString(resolved);
+  }
+  if (Array.isArray(resolved)) {
+    return resolved.reduce((acc, item) => {
+      const normalized = normalizeStyle(item);
+      return Object.assign(acc, normalized);
+    }, {});
+  }
+  if (typeof resolved === "object") {
+    const result = {};
+    for (const [k, v] of Object.entries(resolved)) {
+      result[k] = resolve(v);
+    }
+    return result;
+  }
+  return {};
+}
+function parseStyleString(style) {
+  const result = {};
+  style.split(";").forEach((rule) => {
+    const i = rule.indexOf(":");
+    if (i > 0) {
+      const prop = rule.slice(0, i).trim();
+      const val = rule.slice(i + 1).trim();
+      if (prop && val) {
+        result[prop] = val;
+      }
+    }
+  });
+  return result;
+}
 function removeStyleProperty(el, prop) {
-  if (prop.includes("-")) {
-    el.style.removeProperty(prop);
-  } else {
-    el.style[prop] = "";
-  }
+  const kebabProp = prop.startsWith("--") ? prop : camelToKebab(prop);
+  el.style.removeProperty(kebabProp);
 }
 function applyClass(el, value) {
-  let classStr;
-  if (Array.isArray(value)) {
-    classStr = value.filter(Boolean).join(" ");
-  } else if (typeof value === "object" && value !== null) {
-    classStr = Object.entries(value).filter(([, v]) => Boolean(v)).map(([k]) => k).join(" ");
-  } else {
-    classStr = String(value);
+  domOps.setAttribute(el, "class", normalizeClass(value));
+}
+function normalizeClass(value) {
+  const resolved = resolve(value);
+  if (!resolved)
+    return "";
+  if (typeof resolved === "string")
+    return resolved;
+  if (Array.isArray(resolved)) {
+    return resolved.map(normalizeClass).filter(Boolean).join(" ");
+  }
+  if (typeof resolved === "object") {
+    return Object.entries(resolved).filter(([, v]) => Boolean(resolve(v))).map(([k]) => k).join(" ");
   }
-  domOps.setAttribute(el, "class", classStr);
+  return String(resolved);
 }
-// src/reactivity/batch.ts
-var batchDepth = 0;
-function batch(fn) {
-  batchDepth++;
-  try {
-    fn();
-  } finally {
-    batchDepth--;
-    if (batchDepth === 0) {
-      flushSync();
-    }
+function containsReactive(value) {
+  if (isReactive(value))
+    return true;
+  if (Array.isArray(value))
+    return value.some(containsReactive);
+  if (typeof value === "object" && value !== null) {
+    return Object.values(value).some(containsReactive);
   }
+  return false;
+}
+function camelToKebab(str) {
+  return str.replace(/[A-Z]/g, (m) => `-${m.toLowerCase()}`);
 }
+
 // src/component/control-flow.ts
 var SHOW_TYPE = Symbol.for("Sinwan.Show");
 var FOR_TYPE = Symbol.for("Sinwan.For");
@@ -720,6 +793,9 @@ function Portal(props) {
     children: []
   };
 }
+function isElementLike(value) {
+  return value != null && typeof value === "object" && "tag" in value;
+}
 function isShowElement(element) {
   return element.tag === SHOW_TYPE;
 }
@@ -744,6 +820,107 @@ function isDynamicElement(element) {
 function isPortalElement(element) {
   return element.tag === PORTAL_TYPE;
 }
+function resolveSwitchContent(element) {
+  const props = element.props;
+  const children = normalizeContent(props.children ?? element.children);
+  const match = findTruthyMatch(children);
+  return match !== undefined ? match : props.fallback;
+}
+function findTruthyMatch(nodes) {
+  for (const node of nodes) {
+    if (node == null || typeof node === "boolean")
+      continue;
+    if (Array.isArray(node)) {
+      const match = findTruthyMatch(node);
+      if (match !== undefined)
+        return match;
+      continue;
+    }
+    if (isElementLike(node)) {
+      let element = node;
+      if (typeof element.tag === "function") {
+        const tag = element.tag;
+        if (tag === Match || tag === Show || tag === For || tag === Index || tag === Key || tag === Switch) {
+          element = tag(element.props);
+        }
+      }
+      if (isMatchElement(element)) {
+        const when = readReactive(element.props.when);
+        if (when) {
+          return resolveMatchChildren(element, when);
+        }
+      } else if (isShowElement(element)) {
+        const when = readReactive(element.props.when);
+        if (when) {
+          const content = resolveShowChildren(element, when);
+          const match = findTruthyMatch(normalizeContent(content));
+          if (match !== undefined)
+            return match;
+        } else if (element.props.fallback) {
+          const match = findTruthyMatch(normalizeContent(element.props.fallback));
+          if (match !== undefined)
+            return match;
+        }
+      } else if (isForElement(element)) {
+        const props = element.props;
+        const items = readReactive(props.each);
+        if (Array.isArray(items)) {
+          for (let i = 0;i < items.length; i++) {
+            const child = props.children(items[i], () => i);
+            const match = findTruthyMatch(normalizeContent(child));
+            if (match !== undefined)
+              return match;
+          }
+        }
+      } else if (isIndexElement(element)) {
+        const props = element.props;
+        const items = readReactive(props.each);
+        if (Array.isArray(items)) {
+          for (let i = 0;i < items.length; i++) {
+            const child = props.children(() => items[i], i);
+            const match = findTruthyMatch(normalizeContent(child));
+            if (match !== undefined)
+              return match;
+          }
+        }
+      } else if (isKeyElement(element)) {
+        const key = readReactive(element.props.when);
+        const child = resolveKeyChildren(element, key);
+        const match = findTruthyMatch(normalizeContent(child));
+        if (match !== undefined)
+          return match;
+      }
+    }
+  }
+  return;
+}
+function resolveMatchChildren(element, value) {
+  const children = element.props.children ?? element.children;
+  if (typeof children === "function") {
+    return children(value);
+  }
+  return children;
+}
+function resolveShowChildren(element, value) {
+  const children = element.props.children ?? element.children;
+  if (typeof children === "function") {
+    return children(value);
+  }
+  return children;
+}
+function resolveKeyChildren(element, value) {
+  const children = element.props.children ?? element.children;
+  if (typeof children === "function") {
+    return children(value);
+  }
+  return children;
+}
+function normalizeContent(content) {
+  if (content == null || typeof content === "boolean") {
+    return [];
+  }
+  return Array.isArray(content) ? content : [content];
+}
 function normalizeChildren2(children) {
   if (children == null || typeof children === "boolean") {
     return [];
@@ -751,7 +928,7 @@ function normalizeChildren2(children) {
   return Array.isArray(children) ? children : [children];
 }
 function readReactive(value) {
-  return isSignal(value) || isComputed(value) ? value.value : value;
+  return resolve(value);
 }
 function appendHiddenDisplay(style) {
   const trimmed = style.trim();
@@ -883,8 +1060,10 @@ function renderShowBlock(element, block, parent, namespace, owner) {
   return effect(() => {
     clearChildren(block);
     const when = readReactive2(element.props.when);
-    const content = withOptionalInstance(owner, () => when ? resolveShowChildren(element, when) : element.props.fallback);
-    block.children = renderBlockContent(content, parent, block.endAnchor, namespace, owner);
+    block.children = withOptionalInstance(owner, () => {
+      const content = when ? resolveShowChildren(element, when) : element.props.fallback;
+      return renderBlockContent(content, parent, block.endAnchor, namespace, owner);
+    });
     if (initialized) {
       fireMountedAndQueueUpdated(owner);
     }
@@ -1071,18 +1250,31 @@ function renderPortal(element, parent, anchor, namespace) {
   insertNode(parent, placeholder, anchor);
   const owner = getCurrentInstance();
   let disposeEffect = () => {};
+  const targetAnchor = domOps.createComment("Sinwan-pa");
+  let lastTarget = null;
   const portal = {
     type: "portal",
     anchor: placeholder,
     children: [],
-    dispose: () => disposeEffect()
+    dispose: () => disposeEffect(),
+    targetAnchor
   };
   let initialized = false;
   disposeEffect = effect(() => {
-    clearPortalChildren(portal);
     const target = resolvePortalTarget(element.props.mount);
+    if (target !== lastTarget) {
+      if (lastTarget) {
+        domOps.remove(targetAnchor);
+      }
+      if (target) {
+        domOps.appendChild(target, targetAnchor);
+      }
+      lastTarget = target;
+      portal.target = target;
+    }
+    clearPortalChildren(portal);
     if (target) {
-      portal.children = renderBlockContent(element.props.children ?? element.children, target, null, namespace, owner);
+      portal.children = renderBlockContent(element.props.children ?? element.children, target, targetAnchor, namespace, owner);
     }
     if (initialized) {
       fireMountedAndQueueUpdated(owner);
@@ -1091,48 +1283,12 @@ function renderPortal(element, parent, anchor, namespace) {
   });
   return portal;
 }
-function resolveShowChildren(element, value) {
-  const children = element.props.children ?? element.children;
-  if (typeof children === "function") {
-    return children(value);
-  }
-  return children;
-}
-function resolveSwitchContent(element) {
-  const props = element.props;
-  const children = normalizeContent(props.children ?? element.children);
-  for (const child of children) {
-    const match = getMatchElement(child);
-    if (!match) {
-      continue;
-    }
-    const when = readReactive2(match.props.when);
-    if (when) {
-      return resolveMatchChildren(match, when);
-    }
-  }
-  return props.fallback;
-}
-function resolveMatchChildren(element, value) {
-  const children = element.props.children ?? element.children;
-  if (typeof children === "function") {
-    return children(value);
-  }
-  return children;
-}
-function resolveKeyChildren(element, value) {
-  const children = element.props.children ?? element.children;
-  if (typeof children === "function") {
-    return children(value);
-  }
-  return children;
-}
 function createDynamicElement(element, tag) {
   if (typeof tag !== "string" && typeof tag !== "function") {
     return null;
   }
   const { component, ...props } = element.props;
-  const children = normalizeContent(props.children ?? element.children);
+  const children = normalizeContent2(props.children ?? element.children);
   return {
     tag,
     props,
@@ -1140,11 +1296,14 @@ function createDynamicElement(element, tag) {
   };
 }
 function renderBlockContent(content, parent, anchor, namespace, owner) {
-  if (content == null || typeof content === "boolean") {
+  if (content == null || typeof content === "boolean")
     return [];
-  }
-  const nodes = Array.isArray(content) ? content : [content];
-  return nodes.map((node) => withOptionalInstance(owner, () => renderNodeToDOM(node, parent, anchor, namespace)));
+  return withOptionalInstance(owner, () => {
+    if (Array.isArray(content)) {
+      return content.map((child) => renderNodeToDOM(child, parent, anchor, namespace));
+    }
+    return [renderNodeToDOM(content, parent, anchor, namespace)];
+  });
 }
 function clearChildren(block) {
   for (const child of block.children) {
@@ -1162,6 +1321,23 @@ function moveBeforeEnd(parent, mounted, endAnchor) {
   for (const node of getMountedDomNodes(mounted)) {
     domOps.insertBefore(parent, node, endAnchor);
   }
+  syncPortalOrder(mounted);
+}
+function syncPortalOrder(mounted) {
+  if (mounted.type === "portal") {
+    if (mounted.target && mounted.targetAnchor) {
+      for (const child of mounted.children) {
+        for (const node of getMountedDomNodes(child)) {
+          domOps.appendChild(mounted.target, node);
+        }
+      }
+      domOps.appendChild(mounted.target, mounted.targetAnchor);
+    }
+  } else if ("children" in mounted && Array.isArray(mounted.children)) {
+    for (const child of mounted.children) {
+      syncPortalOrder(child);
+    }
+  }
 }
 function fireMountedAndQueueUpdated(owner) {
   if (owner) {
@@ -1173,26 +1349,14 @@ function withOptionalInstance(owner, fn) {
   return owner ? withInstance(owner, fn) : fn();
 }
 function readReactive2(value) {
-  return isSignal(value) || isComputed(value) ? value.value : value;
+  return resolve(value);
 }
-function normalizeContent(content) {
+function normalizeContent2(content) {
   if (content == null || typeof content === "boolean") {
     return [];
   }
   return Array.isArray(content) ? content : [content];
 }
-function isElementLike(value) {
-  return value != null && typeof value === "object" && "tag" in value;
-}
-function getMatchElement(value) {
-  if (!isElementLike(value)) {
-    return null;
-  }
-  if (isMatchElement(value)) {
-    return value;
-  }
-  return value.tag === Match ? Match(value.props) : null;
-}
 function resolvePortalTarget(value) {
   const target = readReactive2(value);
   if (target == null) {
@@ -1394,19 +1558,8 @@ function renderNodeToDOM(node, parent, anchor = null, namespace = null) {
     insertNode2(parent, text2, anchor);
     return { type: "text", node: text2 };
   }
-  if (isSignal(node) || isComputed(node)) {
-    const text2 = domOps.createTextNode(String(node.value));
-    insertNode2(parent, text2, anchor);
-    const owner = getCurrentInstance();
-    let initialized = false;
-    const dispose = effect(() => {
-      domOps.setTextContent(text2, String(node.value));
-      if (initialized) {
-        queueUpdatedHooks(owner);
-      }
-      initialized = true;
-    });
-    return { type: "reactive-text", node: text2, dispose };
+  if (isReactive(node)) {
+    return renderReactiveNodeToDOM(node, parent, anchor, namespace);
   }
   if (Array.isArray(node)) {
     return renderArrayToDOM(node, parent, anchor, namespace);
@@ -1443,6 +1596,37 @@ function renderChildrenToDOM(children, parent, namespace = null) {
   }
   return mounted;
 }
+function renderReactiveNodeToDOM(reactive, parent, anchor, namespace) {
+  const startAnchor = domOps.createComment("Sinwan-r");
+  const endAnchor = domOps.createComment("/Sinwan-r");
+  insertNode2(parent, startAnchor, anchor);
+  insertNode2(parent, endAnchor, anchor);
+  const owner = getCurrentInstance();
+  let mountedContent = null;
+  let initialized = false;
+  const block = {
+    type: "reactive-block",
+    startAnchor,
+    endAnchor,
+    children: [],
+    dispose: () => {}
+  };
+  block.dispose = effect(() => {
+    if (mountedContent) {
+      removeMountedNode(mountedContent);
+    }
+    const value = resolve(reactive);
+    mountedContent = renderNodeToDOM(value, parent, endAnchor, namespace);
+    block.children = [mountedContent];
+    if (initialized) {
+      if (owner)
+        fireMountedHooks(owner);
+      queueUpdatedHooks(owner);
+    }
+    initialized = true;
+  });
+  return block;
+}
 function insertNode2(parent, child, anchor) {
   if (anchor) {
     domOps.insertBefore(parent, child, anchor);
@@ -1526,5 +1710,5 @@ export {
   applyAttributes
 };
 
-//# debugId=5F0DDB77CC3157EE64756E2164756E21
+//# debugId=EBE55516E78B698564756E2164756E21
 //# sourceMappingURL=index.development.js.map