sinwan 1.0.0 → 1.1.1

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,7 +367,32 @@ 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";
@@ -510,10 +534,11 @@ 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)) {
+    if (isReactive(value)) {
+      const state = { previousStyleProps: new Set };
       let initialized = false;
       const dispose = effect(() => {
-        setSingleAttribute(el, key, value.value);
+        setSingleAttribute(el, key, resolve(value), state);
         if (initialized) {
           queueUpdatedHooks(owner);
         }
@@ -526,10 +551,10 @@ function applyAttributes(el, props) {
   }
   return disposers;
 }
-function setSingleAttribute(el, key, value) {
-  const attrName = PROP_ALIASES[key] ?? key;
+function setSingleAttribute(el, key, value, state) {
+  const attrName = resolveAttributeName(key);
   if (attrName === "style" && typeof value === "object" && value !== null) {
-    applyStyle(el, value);
+    applyStyle(el, value, state);
     return;
   }
   if (attrName === "class" && typeof value === "object" && value !== null) {
@@ -538,6 +563,9 @@ function setSingleAttribute(el, key, value) {
   }
   if (value == null || value === false) {
     domOps.removeAttribute(el, attrName);
+    if (attrName === "style" && state) {
+      state.previousStyleProps.clear();
+    }
     if (DOM_PROPERTIES.has(attrName)) {
       domOps.setProperty(el, attrName, attrName === "value" ? "" : false);
     }
@@ -545,25 +573,59 @@ function setSingleAttribute(el, key, value) {
   }
   if (value === true) {
     domOps.setAttribute(el, attrName, "");
+    if (attrName === "style" && state) {
+      state.previousStyleProps.clear();
+    }
     if (DOM_PROPERTIES.has(attrName)) {
       domOps.setProperty(el, attrName, true);
     }
     return;
   }
   if (DOM_PROPERTIES.has(attrName)) {
+    if (attrName === "style" && state) {
+      state.previousStyleProps.clear();
+    }
     domOps.setProperty(el, attrName, value);
     return;
   }
+  if (attrName === "style" && state) {
+    state.previousStyleProps.clear();
+  }
   domOps.setAttribute(el, attrName, String(value));
 }
-function applyStyle(el, styles) {
+function resolveAttributeName(key) {
+  return PROP_ALIASES[key] ?? key;
+}
+function applyStyle(el, styles, state) {
+  const nextProps = new Set;
   for (const [prop, val] of Object.entries(styles)) {
+    nextProps.add(prop);
+    if (val == null) {
+      removeStyleProperty(el, prop);
+      continue;
+    }
     if (prop.includes("-")) {
-      el.style.setProperty(prop, val);
+      el.style.setProperty(prop, String(val));
     } else {
       el.style[prop] = val;
     }
   }
+  if (!state) {
+    return;
+  }
+  for (const previousProp of state.previousStyleProps) {
+    if (!nextProps.has(previousProp)) {
+      removeStyleProperty(el, previousProp);
+    }
+  }
+  state.previousStyleProps = nextProps;
+}
+function removeStyleProperty(el, prop) {
+  if (prop.includes("-")) {
+    el.style.removeProperty(prop);
+  } else {
+    el.style[prop] = "";
+  }
 }
 function applyClass(el, value) {
   let classStr;
@@ -580,6 +642,12 @@ function applyClass(el, value) {
 // src/component/control-flow.ts
 var SHOW_TYPE = Symbol.for("Sinwan.Show");
 var FOR_TYPE = Symbol.for("Sinwan.For");
+var SWITCH_TYPE = Symbol.for("Sinwan.Switch");
+var MATCH_TYPE = Symbol.for("Sinwan.Match");
+var INDEX_TYPE = Symbol.for("Sinwan.Index");
+var KEY_TYPE = Symbol.for("Sinwan.Key");
+var DYNAMIC_TYPE = Symbol.for("Sinwan.Dynamic");
+var PORTAL_TYPE = Symbol.for("Sinwan.Portal");
 function Show(props) {
   return {
     tag: SHOW_TYPE,
@@ -594,12 +662,114 @@ function For(props) {
     children: []
   };
 }
+function Switch(props) {
+  return {
+    tag: SWITCH_TYPE,
+    props,
+    children: []
+  };
+}
+function Match(props) {
+  return {
+    tag: MATCH_TYPE,
+    props,
+    children: []
+  };
+}
+function Index(props) {
+  return {
+    tag: INDEX_TYPE,
+    props,
+    children: []
+  };
+}
+function Key(props) {
+  return {
+    tag: KEY_TYPE,
+    props,
+    children: []
+  };
+}
+function Dynamic(props) {
+  return {
+    tag: DYNAMIC_TYPE,
+    props,
+    children: []
+  };
+}
+function Visible(props) {
+  const {
+    when,
+    as = "span",
+    style,
+    children,
+    ...rest
+  } = props;
+  const visibleStyle = computed(() => {
+    const base = readReactive(style);
+    const visible = Boolean(readReactive(when));
+    if (typeof base === "string") {
+      return visible ? base : appendHiddenDisplay(base);
+    }
+    const styleObject = base && typeof base === "object" ? { ...base } : {};
+    styleObject.display = visible ? styleObject.display : "none";
+    return styleObject;
+  });
+  return {
+    tag: as,
+    props: {
+      ...rest,
+      style: visibleStyle,
+      children
+    },
+    children: normalizeChildren2(children)
+  };
+}
+function Portal(props) {
+  return {
+    tag: PORTAL_TYPE,
+    props,
+    children: []
+  };
+}
 function isShowElement(element) {
   return element.tag === SHOW_TYPE;
 }
 function isForElement(element) {
   return element.tag === FOR_TYPE;
 }
+function isSwitchElement(element) {
+  return element.tag === SWITCH_TYPE;
+}
+function isMatchElement(element) {
+  return element.tag === MATCH_TYPE;
+}
+function isIndexElement(element) {
+  return element.tag === INDEX_TYPE;
+}
+function isKeyElement(element) {
+  return element.tag === KEY_TYPE;
+}
+function isDynamicElement(element) {
+  return element.tag === DYNAMIC_TYPE;
+}
+function isPortalElement(element) {
+  return element.tag === PORTAL_TYPE;
+}
+function normalizeChildren2(children) {
+  if (children == null || typeof children === "boolean") {
+    return [];
+  }
+  return Array.isArray(children) ? children : [children];
+}
+function readReactive(value) {
+  return resolve(value);
+}
+function appendHiddenDisplay(style) {
+  const trimmed = style.trim();
+  const separator = trimmed.length > 0 && !trimmed.endsWith(";") ? ";" : "";
+  return `${trimmed}${separator}display:none`;
+}
 
 // src/renderer/unmount.ts
 function getMountedDomNodes(node) {
@@ -622,6 +792,8 @@ function getMountedDomNodes(node) {
       ];
     case "component":
       return node.children.flatMap((child) => getMountedDomNodes(child));
+    case "portal":
+      return [node.anchor];
   }
 }
 function unmountNode(node) {
@@ -666,6 +838,13 @@ function unmountNode(node) {
         unmountNode(child);
       }
       break;
+    case "portal":
+      node.dispose();
+      for (const child of node.children) {
+        removeMountedNode(child);
+      }
+      node.children = [];
+      break;
   }
 }
 function removeMountedNode(node) {
@@ -680,6 +859,9 @@ function removeMountedNode(node) {
 
 // src/renderer/render-control-flow.ts
 function renderControlFlowToDOM(element, parent, anchor, namespace) {
+  if (isPortalElement(element)) {
+    return renderPortal(element, parent, anchor, namespace);
+  }
   const startAnchor = domOps.createComment("Sinwan-b");
   const endAnchor = domOps.createComment("/Sinwan-b");
   insertNode(parent, startAnchor, anchor);
@@ -697,6 +879,14 @@ function renderControlFlowToDOM(element, parent, anchor, namespace) {
     disposeEffect = renderShowBlock(element, block, parent, namespace, owner);
   } else if (isForElement(element)) {
     disposeEffect = renderForBlock(element, block, parent, namespace, owner);
+  } else if (isSwitchElement(element)) {
+    disposeEffect = renderSwitchBlock(element, block, parent, namespace, owner);
+  } else if (isIndexElement(element)) {
+    disposeEffect = renderIndexBlock(element, block, parent, namespace, owner);
+  } else if (isKeyElement(element)) {
+    disposeEffect = renderKeyBlock(element, block, parent, namespace, owner);
+  } else if (isDynamicElement(element)) {
+    disposeEffect = renderDynamicBlock(element, block, parent, namespace, owner);
   }
   return block;
 }
@@ -704,7 +894,7 @@ function renderShowBlock(element, block, parent, namespace, owner) {
   let initialized = false;
   return effect(() => {
     clearChildren(block);
-    const when = readReactive(element.props.when);
+    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);
     if (initialized) {
@@ -718,7 +908,7 @@ function renderForBlock(element, block, parent, namespace, owner) {
   let records = [];
   return effect(() => {
     const props = element.props;
-    const items = readReactive(props.each);
+    const items = readReactive2(props.each);
     const list = Array.isArray(items) ? items : [];
     const renderChild = props.children;
     if (typeof renderChild !== "function") {
@@ -730,6 +920,19 @@ function renderForBlock(element, block, parent, namespace, owner) {
       initialized = true;
       return;
     }
+    if (list.length === 0) {
+      clearChildren(block);
+      records = [];
+      block.children = renderBlockContent(props.fallback, parent, block.endAnchor, namespace, owner);
+      if (initialized) {
+        fireMountedAndQueueUpdated(owner);
+      }
+      initialized = true;
+      return;
+    }
+    if (records.length === 0 && block.children.length > 0) {
+      clearChildren(block);
+    }
     const oldByKey = new Map;
     for (const record of records) {
       oldByKey.set(record.key, record);
@@ -769,6 +972,137 @@ function renderForBlock(element, block, parent, namespace, owner) {
     initialized = true;
   });
 }
+function renderSwitchBlock(element, block, parent, namespace, owner) {
+  let initialized = false;
+  return effect(() => {
+    clearChildren(block);
+    const content = withOptionalInstance(owner, () => resolveSwitchContent(element));
+    block.children = renderBlockContent(content, parent, block.endAnchor, namespace, owner);
+    if (initialized) {
+      fireMountedAndQueueUpdated(owner);
+    }
+    initialized = true;
+  });
+}
+function renderIndexBlock(element, block, parent, namespace, owner) {
+  let initialized = false;
+  let records = [];
+  return effect(() => {
+    const props = element.props;
+    const items = readReactive2(props.each);
+    const list = Array.isArray(items) ? items : [];
+    const renderChild = props.children;
+    if (typeof renderChild !== "function") {
+      clearChildren(block);
+      records = [];
+      if (initialized) {
+        queueUpdatedHooks(owner);
+      }
+      initialized = true;
+      return;
+    }
+    if (list.length === 0) {
+      clearChildren(block);
+      records = [];
+      block.children = renderBlockContent(props.fallback, parent, block.endAnchor, namespace, owner);
+      if (initialized) {
+        fireMountedAndQueueUpdated(owner);
+      }
+      initialized = true;
+      return;
+    }
+    if (records.length === 0 && block.children.length > 0) {
+      clearChildren(block);
+    }
+    for (let index = 0;index < list.length; index++) {
+      const existing = records[index];
+      if (existing) {
+        existing.item.value = list[index];
+        continue;
+      }
+      const itemSignal = signal(list[index]);
+      const record = {
+        item: itemSignal,
+        mounted: withOptionalInstance(owner, () => renderNodeToDOM(renderChild(() => itemSignal.value, index), parent, block.endAnchor, namespace))
+      };
+      records.push(record);
+    }
+    while (records.length > list.length) {
+      const removed = records.pop();
+      removeMountedNode(removed.mounted);
+    }
+    block.children = records.map((record) => record.mounted);
+    if (initialized) {
+      fireMountedAndQueueUpdated(owner);
+    }
+    initialized = true;
+  });
+}
+function renderKeyBlock(element, block, parent, namespace, owner) {
+  let initialized = false;
+  let hasKey = false;
+  let currentKey;
+  return effect(() => {
+    const key = readReactive2(element.props.when);
+    if (hasKey && Object.is(currentKey, key)) {
+      return;
+    }
+    currentKey = key;
+    hasKey = true;
+    clearChildren(block);
+    const content = withOptionalInstance(owner, () => resolveKeyChildren(element, key));
+    block.children = renderBlockContent(content, parent, block.endAnchor, namespace, owner);
+    if (initialized) {
+      fireMountedAndQueueUpdated(owner);
+    }
+    initialized = true;
+  });
+}
+function renderDynamicBlock(element, block, parent, namespace, owner) {
+  let initialized = false;
+  let hasTag = false;
+  let currentTag;
+  return effect(() => {
+    const tag = readReactive2(element.props.component);
+    if (hasTag && Object.is(currentTag, tag)) {
+      return;
+    }
+    currentTag = tag;
+    hasTag = true;
+    clearChildren(block);
+    const content = tag ? createDynamicElement(element, tag) : null;
+    block.children = renderBlockContent(content, parent, block.endAnchor, namespace, owner);
+    if (initialized) {
+      fireMountedAndQueueUpdated(owner);
+    }
+    initialized = true;
+  });
+}
+function renderPortal(element, parent, anchor, namespace) {
+  const placeholder = domOps.createComment("Sinwan-p");
+  insertNode(parent, placeholder, anchor);
+  const owner = getCurrentInstance();
+  let disposeEffect = () => {};
+  const portal = {
+    type: "portal",
+    anchor: placeholder,
+    children: [],
+    dispose: () => disposeEffect()
+  };
+  let initialized = false;
+  disposeEffect = effect(() => {
+    clearPortalChildren(portal);
+    const target = resolvePortalTarget(element.props.mount);
+    if (target) {
+      portal.children = renderBlockContent(element.props.children ?? element.children, target, null, namespace, owner);
+    }
+    if (initialized) {
+      fireMountedAndQueueUpdated(owner);
+    }
+    initialized = true;
+  });
+  return portal;
+}
 function resolveShowChildren(element, value) {
   const children = element.props.children ?? element.children;
   if (typeof children === "function") {
@@ -776,6 +1110,47 @@ function resolveShowChildren(element, 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);
+  return {
+    tag,
+    props,
+    children
+  };
+}
 function renderBlockContent(content, parent, anchor, namespace, owner) {
   if (content == null || typeof content === "boolean") {
     return [];
@@ -789,6 +1164,12 @@ function clearChildren(block) {
   }
   block.children = [];
 }
+function clearPortalChildren(portal) {
+  for (const child of portal.children) {
+    removeMountedNode(child);
+  }
+  portal.children = [];
+}
 function moveBeforeEnd(parent, mounted, endAnchor) {
   for (const node of getMountedDomNodes(mounted)) {
     domOps.insertBefore(parent, node, endAnchor);
@@ -803,8 +1184,42 @@ function fireMountedAndQueueUpdated(owner) {
 function withOptionalInstance(owner, fn) {
   return owner ? withInstance(owner, fn) : fn();
 }
-function readReactive(value) {
-  return isSignal(value) || isComputed(value) ? value.value : value;
+function readReactive2(value) {
+  return resolve(value);
+}
+function normalizeContent(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) {
+    return typeof document === "undefined" ? null : document.body;
+  }
+  if (typeof target === "string") {
+    return document.querySelector(target);
+  }
+  if (typeof target === "function") {
+    return target();
+  }
+  if (typeof target === "object" && "nodeType" in target) {
+    return target;
+  }
+  return null;
 }
 function insertNode(parent, child, anchor) {
   if (anchor) {
@@ -838,10 +1253,13 @@ function renderElementToDOM(element, parent, anchor = null, namespace = null) {
   if (tag === "" || tag === Fragment) {
     return renderFragmentToDOM(children, parent, anchor, namespace);
   }
-  if (tag === Show || tag === For) {
+  if (tag === Show || tag === For || tag === Switch || tag === Index || tag === Key || tag === Dynamic || tag === Portal) {
     return renderElementToDOM(tag(props), parent, anchor, namespace);
   }
-  if (isShowElement(element) || isForElement(element)) {
+  if (tag === Visible) {
+    return renderElementToDOM(tag(props), parent, anchor, namespace);
+  }
+  if (isShowElement(element) || isForElement(element) || isSwitchElement(element) || isIndexElement(element) || isKeyElement(element) || isDynamicElement(element) || isPortalElement(element)) {
     return renderControlFlowToDOM(element, parent, anchor, namespace);
   }
   if (typeof tag === "function") {
@@ -988,19 +1406,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);
@@ -1037,6 +1444,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);
@@ -1120,5 +1558,5 @@ export {
   applyAttributes
 };
 
-//# debugId=9C1A39184F093FF264756E2164756E21
+//# debugId=ECCB38F4A76AE39C64756E2164756E21
 //# sourceMappingURL=index.development.js.map