antd-solid 0.0.16 → 0.0.18

package/es/Transformer/index.js

@@ -1,4 +1,4 @@
-import { delegateEvents, createComponent, insert, memo, Portal, effect, setAttribute, spread, mergeProps, template } from 'solid-js/web';
+import { createComponent, ssr, ssrHydrationKey, ssrAttribute, escape, Portal, ssrElement, mergeProps } from 'solid-js/web';
 import { createMemo, createSignal, Show } from 'solid-js';
 import { inRange } from 'lodash-es';
 import NP from 'number-precision';
@@ -13,17 +13,12 @@ import { setRef } from '../utils/solid.js';
 import { setupGlobalDrag } from '../utils/setupGlobalDrag.js';
 import { subDOMPoint } from '../utils/domPoint.js';
 
-var _tmpl$ = /*#__PURE__*/template(`<svg><foreignObject class=overflow-visible></svg>`, false, true),
-  _tmpl$2 = /*#__PURE__*/template(`<svg><path class=pointer-events-initial opacity=0>`),
-  _tmpl$3 = /*#__PURE__*/template(`<svg><path stroke=var(--ant-color-primary) stroke-width=1></svg>`, false, true),
-  _tmpl$4 = /*#__PURE__*/template(`<svg><path class="pointer-events-initial cursor-none"opacity=0 stroke=var(--ant-color-primary) stroke-width=3></svg>`, false, true),
-  _tmpl$5 = /*#__PURE__*/template(`<svg><path class="pointer-events-initial cursor-none"opacity=0 fill=red></svg>`, false, true),
-  _tmpl$6 = /*#__PURE__*/template(`<svg><path class="pointer-events-initial cursor-none"fill=var(--ant-color-white) stroke=var(--ant-color-primary)></svg>`, false, true),
-  _tmpl$7 = /*#__PURE__*/template(`<svg><path class="pointer-events-initial cursor-none"opacity=0 fill=blue></svg>`, false, true);
+var _tmpl$ = ["<foreignObject", " class=\"overflow-visible\">", "</foreignObject>"],
+  _tmpl$2 = ["<svg", "><path class=\"pointer-events-initial\"", " opacity=\"0\"></path><!--$-->", "<!--/--><!--$-->", "<!--/--><!--$-->", "<!--/--><!--$-->", "<!--/--><!--$-->", "<!--/--><!--$-->", "<!--/--><!--$-->", "<!--/--><!--$-->", "<!--/--><!--$-->", "<!--/--><!--$-->", "<!--/--><!--$-->", "<!--/--><!--$-->", "<!--/--><!--$-->", "<!--/--><!--$-->", "<!--/--><!--$-->", "<!--/--><!--$-->", "<!--/--><!--$-->", "<!--/--></svg>"],
+  _tmpl$3 = ["<path", " d=\"", "\" stroke=\"var(--ant-color-primary)\" stroke-width=\"1\"></path>"];
 // 判断是否鼠标左键触发
 const isMainButton = e => e.button === 0;
 const Transformer = props => {
-  let ref;
   const adsorbGap = createMemo(() => props.adsorb ? props.adsorb.gap ?? 5 : 0);
   const getTransform = (value, transformOrigin) => new DOMMatrix().translate(value.x, value.y).translate(transformOrigin.x, transformOrigin.y).rotate(value.rotate).translate(-transformOrigin.x, -transformOrigin.y);
   const [_value, setValue] = createControllableValue(props);
@@ -50,10 +45,6 @@ const Transformer = props => {
     return point.matrixTransform(getTransform(transformValue, transformOrigin));
   };
   const worldToParent = point => {
-    if (ref) {
-      const rect = ref.getBoundingClientRect();
-      point = new DOMPoint(point.x - rect.x, point.y - rect.y);
-    }
     if (props.worldToParentPoint) return props.worldToParentPoint(point);
     return point;
   };
@@ -390,16 +381,9 @@ const Transformer = props => {
     return [x, y, width, height].join(' ');
   });
   return createComponent(Element, {
-    ref(r$) {
-      var _ref$ = ref;
-      typeof _ref$ === "function" ? _ref$(r$) : ref = r$;
-    },
     "class": "relative",
     get children() {
-      var _el$ = _tmpl$2(),
-        _el$2 = _el$.firstChild;
-      _el$2.$$mousedown = onMoveMouseDown;
-      insert(_el$, createComponent(Edge, {
+      return ssr(_tmpl$2, ssrHydrationKey() + ssrAttribute("class", escape(cs('absolute pointer-events-none', !props.viewBox && 'overflow-visible w-1px h-1px'), true), false) + ssrAttribute("viewBox", escape(viewBoxStr(), true), false), ssrAttribute("d", escape(pathD(), true), false), escape(createComponent(Edge, {
         direction: "top",
         get layout() {
           return layoutInWorld();
@@ -408,8 +392,7 @@ const Transformer = props => {
           return layoutInWorld().yCenterLine;
         },
         getResizeHandlerProps: getResizeHandlerProps
-      }), null);
-      insert(_el$, createComponent(Edge, {
+      })), escape(createComponent(Edge, {
         direction: "bottom",
         get layout() {
           return layoutInWorld();
@@ -418,8 +401,7 @@ const Transformer = props => {
           return layoutInWorld().yCenterLine;
         },
         getResizeHandlerProps: getResizeHandlerProps
-      }), null);
-      insert(_el$, createComponent(Edge, {
+      })), escape(createComponent(Edge, {
         direction: "left",
         get layout() {
           return layoutInWorld();
@@ -428,8 +410,7 @@ const Transformer = props => {
           return layoutInWorld().xCenterLine;
         },
         getResizeHandlerProps: getResizeHandlerProps
-      }), null);
-      insert(_el$, createComponent(Edge, {
+      })), escape(createComponent(Edge, {
         direction: "right",
         get layout() {
           return layoutInWorld();
@@ -438,8 +419,7 @@ const Transformer = props => {
           return layoutInWorld().xCenterLine;
         },
         getResizeHandlerProps: getResizeHandlerProps
-      }), null);
-      insert(_el$, createComponent(Show, {
+      })), escape(createComponent(Show, {
         get when() {
           return layoutInWorld().topLeftPoint instanceof DOMPoint;
         },
@@ -453,8 +433,7 @@ const Transformer = props => {
             getRotateHandlerProps: getRotateHandlerProps
           });
         }
-      }), null);
-      insert(_el$, createComponent(Show, {
+      })), escape(createComponent(Show, {
         get when() {
           return layoutInWorld().topRightPoint instanceof DOMPoint;
         },
@@ -468,8 +447,7 @@ const Transformer = props => {
             getRotateHandlerProps: getRotateHandlerProps
           });
         }
-      }), null);
-      insert(_el$, createComponent(Show, {
+      })), escape(createComponent(Show, {
         get when() {
           return layoutInWorld().bottomLeftPoint instanceof DOMPoint;
         },
@@ -483,8 +461,7 @@ const Transformer = props => {
             getRotateHandlerProps: getRotateHandlerProps
           });
         }
-      }), null);
-      insert(_el$, createComponent(Show, {
+      })), escape(createComponent(Show, {
         get when() {
           return layoutInWorld().bottomRightPoint instanceof DOMPoint;
         },
@@ -498,8 +475,7 @@ const Transformer = props => {
             getRotateHandlerProps: getRotateHandlerProps
           });
         }
-      }), null);
-      insert(_el$, createComponent(Show, {
+      })), escape(createComponent(Show, {
         get when() {
           return adsorbLine()?.top;
         },
@@ -511,8 +487,7 @@ const Transformer = props => {
             }
           });
         }
-      }), null);
-      insert(_el$, createComponent(Show, {
+      })), escape(createComponent(Show, {
         get when() {
           return adsorbLine()?.bottom;
         },
@@ -524,8 +499,7 @@ const Transformer = props => {
             }
           });
         }
-      }), null);
-      insert(_el$, createComponent(Show, {
+      })), escape(createComponent(Show, {
         get when() {
           return adsorbLine()?.left;
         },
@@ -537,8 +511,7 @@ const Transformer = props => {
             }
           });
         }
-      }), null);
-      insert(_el$, createComponent(Show, {
+      })), escape(createComponent(Show, {
         get when() {
           return adsorbLine()?.right;
         },
@@ -550,8 +523,7 @@ const Transformer = props => {
             }
           });
         }
-      }), null);
-      insert(_el$, createComponent(Show, {
+      })), escape(createComponent(Show, {
         get when() {
           return adsorbLine()?.centerX;
         },
@@ -562,8 +534,7 @@ const Transformer = props => {
             }
           });
         }
-      }), null);
-      insert(_el$, createComponent(Show, {
+      })), escape(createComponent(Show, {
         get when() {
           return adsorbLine()?.centerY;
         },
@@ -574,14 +545,12 @@ const Transformer = props => {
             }
           });
         }
-      }), null);
-      insert(_el$, createComponent(Show, {
+      })), escape(createComponent(Show, {
         get when() {
-          return memo(() => !!props.transformOriginIcon)() && transformOrigin();
+          return props.transformOriginIcon && transformOrigin();
         },
         get children() {
-          var _el$3 = _tmpl$();
-          insert(_el$3, createComponent(CrosshairSvg, {
+          return ssr(_tmpl$, ssrHydrationKey(), escape(createComponent(CrosshairSvg, {
             "class": "absolute [font-size:var(--size)] text-black pointer-events-none",
             get style() {
               return {
@@ -592,13 +561,11 @@ const Transformer = props => {
             },
             innerColor: "white",
             outerColor: "black"
-          }));
-          return _el$3;
+          })));
         }
-      }), null);
-      insert(_el$, createComponent(Show, {
+      })), escape(createComponent(Show, {
         get when() {
-          return memo(() => !!!resizeDirection())() && rotateDirection();
+          return !resizeDirection() && rotateDirection();
         },
         get children() {
           return createComponent(Portal, {
@@ -616,8 +583,7 @@ const Transformer = props => {
             }
           });
         }
-      }), null);
-      insert(_el$, createComponent(Show, {
+      })), escape(createComponent(Show, {
         get when() {
           return resizeDirection();
         },
@@ -637,21 +603,7 @@ const Transformer = props => {
             }
           });
         }
-      }), null);
-      effect(_p$ => {
-        var _v$ = cs('absolute pointer-events-none', !props.viewBox && 'overflow-visible w-1px h-1px'),
-          _v$2 = viewBoxStr(),
-          _v$3 = pathD();
-        _v$ !== _p$.e && setAttribute(_el$, "class", _p$.e = _v$);
-        _v$2 !== _p$.t && setAttribute(_el$, "viewBox", _p$.t = _v$2);
-        _v$3 !== _p$.a && setAttribute(_el$2, "d", _p$.a = _v$3);
-        return _p$;
-      }, {
-        e: undefined,
-        t: undefined,
-        a: undefined
-      });
-      return _el$;
+      })));
     }
   });
 };
@@ -692,19 +644,15 @@ const Edge = props => {
     }
     return getAngleOfDOMPoint(subDOMPoint(endPoint(), startPoint()));
   };
-  return [(() => {
-    var _el$4 = _tmpl$3();
-    effect(() => setAttribute(_el$4, "d", `M ${startPoint().x},${startPoint().y} L ${endPoint().x},${endPoint().y}`));
-    return _el$4;
-  })(), (() => {
-    var _el$5 = _tmpl$4();
-    spread(_el$5, mergeProps({
-      get d() {
-        return `M ${startPoint().x},${startPoint().y} L ${endPoint().x},${endPoint().y}`;
-      }
-    }, () => props.getResizeHandlerProps(props.direction, getMouseRotate)), true, false);
-    return _el$5;
-  })()];
+  return [ssr(_tmpl$3, ssrHydrationKey(), `M ${escape(startPoint().x, true)},${escape(startPoint().y, true)} L ${escape(endPoint().x, true)},${escape(endPoint().y, true)}`), ssrElement("path", mergeProps({
+    "class": "pointer-events-initial cursor-none",
+    get d() {
+      return `M ${startPoint().x},${startPoint().y} L ${endPoint().x},${endPoint().y}`;
+    },
+    opacity: 0,
+    stroke: "var(--ant-color-primary)",
+    "stroke-width": 3
+  }, () => props.getResizeHandlerProps(props.direction, getMouseRotate)), undefined, true)];
 };
 const Vertex = props => {
   const prevPoint = createMemo(() => {
@@ -817,31 +765,28 @@ const Vertex = props => {
     }
     return centerAngle() + Math.PI / 2;
   };
-  return [(() => {
-    var _el$6 = _tmpl$5();
-    spread(_el$6, mergeProps({
-      get d() {
-        return layoutToPathD(rotateLayout());
-      }
-    }, () => props.getRotateHandlerProps(props.direction, getMouseRotate)), true, false);
-    return _el$6;
-  })(), (() => {
-    var _el$7 = _tmpl$6();
-    spread(_el$7, mergeProps({
-      get d() {
-        return layoutToPathD(displayLayout());
-      }
-    }, () => props.getResizeHandlerProps(props.direction, getMouseRotate)), true, false);
-    return _el$7;
-  })(), (() => {
-    var _el$8 = _tmpl$7();
-    spread(_el$8, mergeProps({
-      get d() {
-        return layoutToPathD(reseizLayout());
-      }
-    }, () => props.getResizeHandlerProps(props.direction, getMouseRotate)), true, false);
-    return _el$8;
-  })()];
+  return [ssrElement("path", mergeProps({
+    "class": "pointer-events-initial cursor-none",
+    get d() {
+      return layoutToPathD(rotateLayout());
+    },
+    opacity: 0,
+    fill: "red"
+  }, () => props.getRotateHandlerProps(props.direction, getMouseRotate)), undefined, true), ssrElement("path", mergeProps({
+    "class": "pointer-events-initial cursor-none",
+    get d() {
+      return layoutToPathD(displayLayout());
+    },
+    fill: "var(--ant-color-white)",
+    stroke: "var(--ant-color-primary)"
+  }, () => props.getResizeHandlerProps(props.direction, getMouseRotate)), undefined, true), ssrElement("path", mergeProps({
+    "class": "pointer-events-initial cursor-none",
+    get d() {
+      return layoutToPathD(reseizLayout());
+    },
+    opacity: 0,
+    fill: "blue"
+  }, () => props.getResizeHandlerProps(props.direction, getMouseRotate)), undefined, true)];
 };
 const ParentEdge = props => {
   const startPoint = createMemo(() => {
@@ -864,19 +809,10 @@ const ParentEdge = props => {
     }[props.direction];
     return (Array.isArray(p) ? p[0] : p) ?? new DOMPoint();
   });
-  return (() => {
-    var _el$9 = _tmpl$3();
-    effect(() => setAttribute(_el$9, "d", `M ${startPoint().x},${startPoint().y} L ${endPoint().x},${endPoint().y}`));
-    return _el$9;
-  })();
+  return ssr(_tmpl$3, ssrHydrationKey(), `M ${escape(startPoint().x, true)},${escape(startPoint().y, true)} L ${escape(endPoint().x, true)},${escape(endPoint().y, true)}`);
 };
 const ParentCenterLine = props => {
-  return memo(() => memo(() => !!props.line)() ? (() => {
-    var _el$10 = _tmpl$3();
-    effect(() => setAttribute(_el$10, "d", `M ${props.line[0].x},${props.line[0].y} L ${props.line[1].x},${props.line[1].y}`));
-    return _el$10;
-  })() : null);
+  return props.line ? ssr(_tmpl$3, ssrHydrationKey(), `M ${escape(props.line[0].x, true)},${escape(props.line[0].y, true)} L ${escape(props.line[1].x, true)},${escape(props.line[1].y, true)}`) : null;
 };
-delegateEvents(["mousedown"]);
 
 export { Transformer as default };

package/es/Tree/SingleLevelTree.js

@@ -1,12 +1,12 @@
-import { delegateEvents, createComponent, insert, effect, className, setAttribute, memo, mergeProps, template, use } from 'solid-js/web';
+import { createComponent, ssr, ssrHydrationKey, ssrAttribute, escape, mergeProps } from 'solid-js/web';
 import { isEmpty, last, uniq } from 'lodash-es';
 import { For, createMemo, createSignal, untrack, Show } from 'solid-js';
 import cs from 'classnames';
 import Checkbox from '../Checkbox/index.js';
 
-var _tmpl$ = /*#__PURE__*/template(`<span class=i-ant-design:caret-down-outlined>`),
-  _tmpl$2 = /*#__PURE__*/template(`<div><div><div class=flex-shrink-0 aria-label=indent></div><div></div><div>`),
-  _tmpl$3 = /*#__PURE__*/template(`<span class=i-ant-design:caret-right-outlined>`);
+var _tmpl$ = ["<span", " class=\"i-ant-design:caret-down-outlined\"></span>"],
+  _tmpl$2 = ["<div", " style=\"", "\"", "><div", "><div class=\"flex-shrink-0\" aria-label=\"indent\" style=\"", "\"></div><div", ">", "</div><!--$-->", "<!--/--><div", ">", "</div></div></div>"],
+  _tmpl$3 = ["<span", " class=\"i-ant-design:caret-right-outlined\"></span>"];
 const SingleLevelTree = props => {
   return createComponent(For, {
     get each() {
@@ -84,198 +84,38 @@ const SingleLevelTree = props => {
           props.setCheckedKeys(keys => keys.filter(k => !deleteChildDict.has(k)));
         }
       };
-      let dragEnterClientX = 0;
       const [targetIndexes, setTargetIndexes] = createSignal(untrack(indexes));
       const [isTarget, setIsTarget] = createSignal(false);
       const [targetPosition, setTargetPosition] = createSignal('before');
-      const setTargetPositionAndLevelOffset = e => {
-        const middleY = e.target.getBoundingClientRect().top + e.target.clientHeight / 2;
-        const position = e.clientY < middleY ? 'before' : 'after';
-        setTargetPosition(position);
-        if (position === 'after') {
-          if (isExpanded()) {
-            setTargetIndexes([...indexes(), 0]);
-            return;
-          }
-          let isLastNode = props.treeData?.length === i() + 1;
-          if (isLastNode && e.clientX < dragEnterClientX) {
-            const levelOffset = Math.ceil((e.clientX - dragEnterClientX) / props.indentSize);
-            if (levelOffset < 0) {
-              setTargetIndexes(() => {
-                const _indexes = [...indexes()];
-                for (let _i = 0; _i < -levelOffset; _i++) {
-                  if (_i > 0) {
-                    if (_indexes.length < 2) break;
-                    const grandfatherNode = props.getNodeByIndexes(_indexes.slice(0, -1));
-                    isLastNode = grandfatherNode ? props.getChildren(grandfatherNode)?.length === last(_indexes) + 1 : false;
-                    if (!isLastNode) break;
-                  }
-                  _indexes.pop();
-                }
-                _indexes[_indexes.length - 1] = _indexes[_indexes.length - 1] + 1;
-                return _indexes;
-              });
-              return;
-            }
-          }
-          if (isEndNode() && e.clientX > dragEnterClientX) {
-            const levelOffset = (e.clientX - dragEnterClientX) / props.indentSize;
-            if (levelOffset >= 1) {
-              setTargetIndexes([...indexes(), 0]);
-              return;
-            }
-          }
-        } else {
-          // 上一个兄弟节点
-          let prevNode = i() > 0 ? props.treeData?.[i() - 1] : undefined;
-          let isPrevNodeExpanded = prevNode ? !isEmpty(props.getChildren(prevNode)) && props.expandedKeys().includes(props.getKey(prevNode)) : false;
-          if (isPrevNodeExpanded && e.clientX > dragEnterClientX) {
-            const levelOffset = Math.floor((e.clientX - dragEnterClientX) / props.indentSize);
-            if (levelOffset > 0) {
-              setTargetIndexes(() => {
-                const _indexes = [...indexes().slice(0, -1), i() - 1];
-                for (let _i = 0; _i < levelOffset; _i++) {
-                  if (_i > 0) {
-                    prevNode = props.getNodeByIndexes(_indexes);
-                    isPrevNodeExpanded = prevNode ? !isEmpty(props.getChildren(prevNode)) && props.expandedKeys().includes(props.getKey(prevNode)) : false;
-                    if (!isPrevNodeExpanded) break;
-                  }
-                  _indexes.push(props.getChildren(prevNode).length);
-                }
-                return _indexes;
-              });
-              return;
-            }
-          }
+      return [ssr(_tmpl$2, ssrHydrationKey() + ssrAttribute("class", escape(cs('p-[var(--ant-tree-node-wrapper-padding)] relative', props.draggableNode() && 'child[]:pointer-events-none', isTarget() && ['before:content-empty before:inline-block before:w-8px before:h-8px before:absolute before:left-[var(--ant-tree-target-node-left)] before:-translate-x-full before:rounded-1/2 before:[border:2px_solid_var(--ant-color-primary)]', 'after:content-empty after:inline-block after:h-2px after:absolute after:left-[var(--ant-tree-target-node-left)] after:right-0 after:bg-[var(--ant-color-primary)]', targetPosition() === 'before' ? 'before:top-0 before:translate-y--1/2 after:top--1px' : 'before:bottom-0 before:translate-y-1/2 after:bottom--1px']), true), false), "--ant-tree-target-node-left:" + `calc(${escape(contentRef?.offsetLeft, true) ?? 0}px + ${"0px"} + ${(escape(targetIndexes().length, true) - escape(indexes().length, true)) * escape(props.indentSize, true)}px)`, ssrAttribute("draggable", escape(props.draggable, true), false), ssrAttribute("class", escape(cs('flex items-center relative', props.isDraggable(item) && 'after:content-empty after:absolute after:inset--1px after:[border:1px_solid_var(--ant-color-primary)]'), true), false), "width:" + `${escape(props.indent, true) * escape(props.indentSize, true)}px`, ssrAttribute("class", escape(cs('flex-shrink-0 w-[var(--ant-tree-expand-icon-width)] flex items-center justify-center cursor-pointer', isEndNode() && 'opacity-0'), true), false), escape(createComponent(Show, {
+        get when() {
+          return isExpanded();
+        },
+        get fallback() {
+          return ssr(_tmpl$3, ssrHydrationKey());
+        },
+        get children() {
+          return ssr(_tmpl$, ssrHydrationKey());
         }
-        setTargetIndexes(position === 'before' ? indexes() : [...indexes().slice(0, -1), last(indexes()) + 1]);
-      };
-      return [(() => {
-        var _el$ = _tmpl$2(),
-          _el$2 = _el$.firstChild,
-          _el$3 = _el$2.firstChild,
-          _el$4 = _el$3.nextSibling,
-          _el$6 = _el$4.nextSibling;
-        _el$.addEventListener("drop", () => {
-          setIsTarget(false);
-          props.onDrop?.({
-            dragNode: props.draggableNode(),
-            dragIndexes: props.draggableIndexes(),
-            targetIndexes: targetIndexes()
+      })), escape(createComponent(Show, {
+        get when() {
+          return props.checkable;
+        },
+        get children() {
+          return createComponent(Checkbox, {
+            "class": "mr-8px mt-2px",
+            get checked() {
+              return props.checkedMap().get(props.getKey(item))?.checked;
+            },
+            get indeterminate() {
+              return props.checkedMap().get(props.getKey(item))?.indeterminate;
+            },
+            onChange: onCheck
           });
-        });
-        _el$.addEventListener("dragleave", () => {
-          setIsTarget(false);
-        });
-        _el$.addEventListener("dragenter", e => {
-          dragEnterClientX = e.clientX;
-          setIsTarget(true);
-          setTargetPositionAndLevelOffset(e);
-        });
-        _el$.addEventListener("dragover", e => {
-          e.preventDefault();
-          setTargetPositionAndLevelOffset(e);
-        });
-        _el$.addEventListener("dragend", () => {
-          props.setDraggableNode(null);
-          props.setDraggableIndexes(null);
-        });
-        _el$.addEventListener("dragstart", () => {
-          props.setDraggableNode(item);
-          props.setDraggableIndexes(indexes());
-        });
-        insert(_el$4, createComponent(Show, {
-          get when() {
-            return isExpanded();
-          },
-          get fallback() {
-            return (() => {
-              var _el$7 = _tmpl$3();
-              _el$7.$$click = () => {
-                const key = props.getKey(item);
-                props.setExpandedKeys(l => [...l, key]);
-              };
-              return _el$7;
-            })();
-          },
-          get children() {
-            var _el$5 = _tmpl$();
-            _el$5.$$click = () => {
-              const key = props.getKey(item);
-              props.setExpandedKeys(l => l.filter(k => k !== key));
-            };
-            return _el$5;
-          }
-        }));
-        insert(_el$2, createComponent(Show, {
-          get when() {
-            return props.checkable;
-          },
-          get children() {
-            return createComponent(Checkbox, {
-              "class": "mr-8px mt-2px",
-              get checked() {
-                return props.checkedMap().get(props.getKey(item))?.checked;
-              },
-              get indeterminate() {
-                return props.checkedMap().get(props.getKey(item))?.indeterminate;
-              },
-              onChange: onCheck
-            });
-          }
-        }), _el$6);
-        _el$6.$$click = () => {
-          const key = props.getKey(item);
-          if (!props.selectable) return;
-          if (props.multiple) {
-            props.setSelectedKeys(keys => {
-              keys = keys ?? [];
-              if (keys.includes(key)) {
-                return keys.filter(n => n !== key);
-              }
-              return [...keys, key];
-            });
-          } else {
-            props.setSelectedKeys(keys => {
-              return keys?.includes(key) ? [] : [key];
-            });
-          }
-          if (props.checkOnClick) {
-            onCheck();
-          }
-        };
-        var _ref$ = contentRef;
-        typeof _ref$ === "function" ? use(_ref$, _el$6) : contentRef = _el$6;
-        insert(_el$6, () => props.getTitle(item));
-        effect(_p$ => {
-          var _v$ = cs('p-[var(--ant-tree-node-wrapper-padding)] relative', props.draggableNode() && 'child[]:pointer-events-none', isTarget() && ['before:content-empty before:inline-block before:w-8px before:h-8px before:absolute before:left-[var(--ant-tree-target-node-left)] before:-translate-x-full before:rounded-1/2 before:[border:2px_solid_var(--ant-color-primary)]', 'after:content-empty after:inline-block after:h-2px after:absolute after:left-[var(--ant-tree-target-node-left)] after:right-0 after:bg-[var(--ant-color-primary)]', targetPosition() === 'before' ? 'before:top-0 before:translate-y--1/2 after:top--1px' : 'before:bottom-0 before:translate-y-1/2 after:bottom--1px']),
-            _v$2 = `calc(${contentRef?.offsetLeft ?? 0}px + ${contentRef && window.getComputedStyle(contentRef).paddingLeft || '0px'} + ${(targetIndexes().length - indexes().length) * props.indentSize}px)`,
-            _v$3 = props.draggable,
-            _v$4 = cs('flex items-center relative', props.isDraggable(item) && 'after:content-empty after:absolute after:inset--1px after:[border:1px_solid_var(--ant-color-primary)]'),
-            _v$5 = `${props.indent * props.indentSize}px`,
-            _v$6 = cs('flex-shrink-0 w-[var(--ant-tree-expand-icon-width)] flex items-center justify-center cursor-pointer', isEndNode() && 'opacity-0'),
-            _v$7 = cs('rounded-[var(--ant-border-radius-sm)] px-[var(--ant-padding-xxs)] cursor-pointer relative min-w-0', props.blockNode && 'w-full', props.isDraggable(item) || props.selectedKeys()?.includes(props.getKey(item)) ? 'bg-[var(--ant-tree-node-selected-bg)]' : 'hover:bg-[var(--ant-tree-node-hover-bg)]');
-          _v$ !== _p$.e && className(_el$, _p$.e = _v$);
-          _v$2 !== _p$.t && ((_p$.t = _v$2) != null ? _el$.style.setProperty("--ant-tree-target-node-left", _v$2) : _el$.style.removeProperty("--ant-tree-target-node-left"));
-          _v$3 !== _p$.a && setAttribute(_el$, "draggable", _p$.a = _v$3);
-          _v$4 !== _p$.o && className(_el$2, _p$.o = _v$4);
-          _v$5 !== _p$.i && ((_p$.i = _v$5) != null ? _el$3.style.setProperty("width", _v$5) : _el$3.style.removeProperty("width"));
-          _v$6 !== _p$.n && className(_el$4, _p$.n = _v$6);
-          _v$7 !== _p$.s && className(_el$6, _p$.s = _v$7);
-          return _p$;
-        }, {
-          e: undefined,
-          t: undefined,
-          a: undefined,
-          o: undefined,
-          i: undefined,
-          n: undefined,
-          s: undefined
-        });
-        return _el$;
-      })(), createComponent(Show, {
+        }
+      })), ssrAttribute("class", escape(cs('rounded-[var(--ant-border-radius-sm)] px-[var(--ant-padding-xxs)] cursor-pointer relative min-w-0', props.blockNode && 'w-full', props.isDraggable(item) || props.selectedKeys()?.includes(props.getKey(item)) ? 'bg-[var(--ant-tree-node-selected-bg)]' : 'hover:bg-[var(--ant-tree-node-hover-bg)]'), true), false), escape(props.getTitle(item))), createComponent(Show, {
         get when() {
-          return memo(() => !!isExpanded())() && !isEndNode();
+          return isExpanded() && !isEndNode();
         },
         get children() {
           return createComponent(SingleLevelTree, mergeProps(props, {
@@ -294,6 +134,5 @@ const SingleLevelTree = props => {
     }
   });
 };
-delegateEvents(["click"]);
 
 export { SingleLevelTree as default };

package/es/TreeFor/index.js

@@ -1,4 +1,4 @@
-import { createComponent, memo } from 'solid-js/web';
+import { createComponent } from 'solid-js/web';
 import { isEmpty, remove } from 'lodash-es';
 import { For, createMemo, createSignal, untrack, Show } from 'solid-js';
 
@@ -42,9 +42,9 @@ function TreeFor(props) {
         onChildChange: props.onChildChange
       };
       const isExpanded = createMemo(() => props.expanded ? props.expanded(item, options) : true);
-      return [memo(() => props.children(item, options)), createComponent(Show, {
+      return [props.children(item, options), createComponent(Show, {
         get when() {
-          return memo(() => !!isParent())() && isExpanded();
+          return isParent() && isExpanded();
         },
         get children() {
           return createComponent(TreeFor, {

package/es/TreeSelect/index.js

@@ -1,4 +1,4 @@
-import { createComponent, mergeProps, insert, template } from 'solid-js/web';
+import { createComponent, mergeProps, ssr, ssrHydrationKey, escape } from 'solid-js/web';
 import { splitProps, untrack, createMemo, Show } from 'solid-js';
 import { isNil, isEmpty, get } from 'lodash-es';
 import createControllableValue from '../hooks/createControllableValue.js';
@@ -7,7 +7,7 @@ import SelectInput from '../SelectInput/index.js';
 import { unwrapStringOrJSXElement } from '../utils/solid.js';
 import Empty from '../Empty/index.js';
 
-var _tmpl$ = /*#__PURE__*/template(`<div class="px-4px py-8px">`);
+var _tmpl$ = ["<div", " class=\"px-4px py-8px\">", "</div>"];
 const TreeSelect = props => {
   const [selectInputProps] = splitProps(props, ['multiple', 'allowClear', 'class', 'disabled', 'placeholder', 'status', 'size']);
   const [treeProps] = splitProps(props, ['treeData', 'checkable', 'checkStrategy']);
@@ -62,8 +62,7 @@ const TreeSelect = props => {
         return createComponent(Empty.PRESENTED_IMAGE_SIMPLE, {});
       },
       get children() {
-        var _el$ = _tmpl$();
-        insert(_el$, createComponent(Tree, mergeProps({
+        return ssr(_tmpl$, ssrHydrationKey(), escape(createComponent(Tree, mergeProps({
           get multiple() {
             return props.multiple;
           },
@@ -88,8 +87,7 @@ const TreeSelect = props => {
             setValueArr(selectedKeys);
             if (!props.multiple) close();
           }
-        }, treeProps)));
-        return _el$;
+        }, treeProps))));
       }
     })
   }));