antd-solid 0.0.17 → 0.0.18

package/es/Table/index.js

@@ -1,14 +1,14 @@
-import { createComponent, insert, effect, className, template } from 'solid-js/web';
+import { createComponent, ssr, ssrHydrationKey, escape, ssrAttribute } from 'solid-js/web';
 import { For, Show } from 'solid-js';
 import cs from 'classnames';
 import Empty from '../Empty/index.js';
 import Element from '../Element/index.js';
 import useComponentSize from '../hooks/useComponentSize.js';
 
-var _tmpl$ = /*#__PURE__*/template(`<table class=w-full><thead><tr></tr></thead><tbody>`),
-  _tmpl$2 = /*#__PURE__*/template(`<th>`),
-  _tmpl$3 = /*#__PURE__*/template(`<tr class=hover:bg-[var(--ant-table-row-hover-bg)]>`),
-  _tmpl$4 = /*#__PURE__*/template(`<td>`);
+var _tmpl$ = ["<table", " class=\"w-full\"><thead><tr>", "</tr></thead><tbody>", "</tbody></table>"],
+  _tmpl$2 = ["<th", ">", "</th>"],
+  _tmpl$3 = ["<tr", " class=\"hover:bg-[var(--ant-table-row-hover-bg)]\">", "</tr>"],
+  _tmpl$4 = ["<td", ">", "</td>"];
 const sizeClassDict = {
   large: 'p-16px leading-22px',
   middle: 'px-8px py-12px leading-22px',
@@ -19,44 +19,22 @@ const Table = props => {
   return createComponent(Element, {
     "class": "[font-size:var(--ant-font-size)] text-[var(--ant-color-text)] leading-[var(--ant-line-height)]",
     get children() {
-      return [(() => {
-        var _el$ = _tmpl$(),
-          _el$2 = _el$.firstChild,
-          _el$3 = _el$2.firstChild,
-          _el$4 = _el$2.nextSibling;
-        insert(_el$3, createComponent(For, {
+      return [ssr(_tmpl$, ssrHydrationKey(), escape(createComponent(For, {
+        get each() {
+          return props.columns;
+        },
+        children: item => ssr(_tmpl$2, ssrHydrationKey() + ssrAttribute("class", escape(cs(sizeClassDict[size()], 'bg-[var(--ant-table-header-bg)] font-bold [border-bottom:1px_solid_var(--ant-table-border-color)] text-left'), true), false), escape(item.title))
+      })), escape(createComponent(For, {
+        get each() {
+          return props.dataSource;
+        },
+        children: (row, i) => ssr(_tmpl$3, ssrHydrationKey(), escape(createComponent(For, {
           get each() {
             return props.columns;
           },
-          children: item => (() => {
-            var _el$5 = _tmpl$2();
-            insert(_el$5, () => item.title);
-            effect(() => className(_el$5, cs(sizeClassDict[size()], 'bg-[var(--ant-table-header-bg)] font-bold [border-bottom:1px_solid_var(--ant-table-border-color)] text-left')));
-            return _el$5;
-          })()
-        }));
-        insert(_el$4, createComponent(For, {
-          get each() {
-            return props.dataSource;
-          },
-          children: (row, i) => (() => {
-            var _el$6 = _tmpl$3();
-            insert(_el$6, createComponent(For, {
-              get each() {
-                return props.columns;
-              },
-              children: item => (() => {
-                var _el$7 = _tmpl$4();
-                insert(_el$7, () => item.render(row, i));
-                effect(() => className(_el$7, cs(sizeClassDict[size()], '[border-bottom:1px_solid_var(--ant-table-border-color)]')));
-                return _el$7;
-              })()
-            }));
-            return _el$6;
-          })()
-        }));
-        return _el$;
-      })(), createComponent(Show, {
+          children: item => ssr(_tmpl$4, ssrHydrationKey() + ssrAttribute("class", escape(cs(sizeClassDict[size()], '[border-bottom:1px_solid_var(--ant-table-border-color)]'), true), false), escape(item.render(row, i)))
+        })))
+      }))), createComponent(Show, {
         get when() {
           return !props.dataSource.length;
         },

package/es/Tabs/index.js

@@ -1,5 +1,5 @@
-import { delegateEvents, createComponent, insert, effect, className, setAttribute, style, Dynamic, template, use } from 'solid-js/web';
-import { mergeProps, untrack, createSelector, createSignal, createEffect, on, children, Show, Switch, Match, For, onCleanup } from 'solid-js';
+import { createComponent, ssr, ssrHydrationKey, ssrAttribute, escape, ssrStyle, Dynamic } from 'solid-js/web';
+import { mergeProps, untrack, createSelector, createSignal, createEffect, on, children, Show, Switch, Match, For } from 'solid-js';
 import cs from 'classnames';
 import Segmented from '../Segmented/index.js';
 import { unwrapStringOrJSXElement } from '../utils/solid.js';
@@ -8,8 +8,10 @@ import Element from '../Element/index.js';
 import createControllableValue from '../hooks/createControllableValue.js';
 import useComponentSize from '../hooks/useComponentSize.js';
 
-var _tmpl$ = /*#__PURE__*/template(`<div>`),
-  _tmpl$2 = /*#__PURE__*/template(`<div><div aria-label=selected-bar>`);
+var _tmpl$ = ["<div", ">", "</div>"],
+  _tmpl$2 = ["<div", "><!--$-->", "<!--/--><div aria-label=\"selected-bar\"", " style=\"", "\"></div></div>"],
+  _tmpl$3 = ["<div", " style=\"", "\"><!--$-->", "<!--/--><!--$-->", "<!--/--><!--$-->", "<!--/--></div>"],
+  _tmpl$4 = ["<div", " style=\"", "\">", "</div>"];
 const Tabs = _props => {
   const props = mergeProps({
     type: 'line',
@@ -28,33 +30,8 @@ const Tabs = _props => {
     left: '0px',
     width: '0px'
   });
-  let lineNav;
-  const updateSelectedBarStyle = () => {
-    if (!lineNav) return;
-    const el = lineNav.querySelector(':scope > [aria-label="selected"]');
-    if (!el) return;
-    if (props.placement === 'top' || props.placement === 'bottom') {
-      setSelectedBarStyle({
-        left: `${el.offsetLeft}px`,
-        width: `${el.clientWidth}px`
-      });
-    } else {
-      setSelectedBarStyle({
-        top: `${el.offsetTop}px`,
-        height: `${el.clientHeight}px`
-      });
-    }
-  };
   createEffect(on([() => props.type, () => props.placement], () => {
-    if (!lineNav) return;
-    updateSelectedBarStyle();
-    const resizeObserver = new ResizeObserver(() => {
-      updateSelectedBarStyle();
-    });
-    resizeObserver.observe(lineNav);
-    onCleanup(() => {
-      resizeObserver.disconnect();
-    });
+    return;
   }));
   const resolvedAddonBefore = children(() => props.addonBefore);
   const resolvedAddonAfter = children(() => props.addonAfter);
@@ -70,157 +47,89 @@ const Tabs = _props => {
       };
     },
     get children() {
-      return [(() => {
-        var _el$ = _tmpl$();
-        insert(_el$, createComponent(Show, {
-          get when() {
-            return resolvedAddonBefore();
-          },
-          get children() {
-            var _el$2 = _tmpl$();
-            insert(_el$2, resolvedAddonBefore);
-            return _el$2;
-          }
-        }), null);
-        insert(_el$, createComponent(Switch, {
-          get children() {
-            return [createComponent(Match, {
-              get when() {
-                return props.type === 'line';
-              },
-              get children() {
-                var _el$3 = _tmpl$2(),
-                  _el$4 = _el$3.firstChild;
-                var _ref$ = lineNav;
-                typeof _ref$ === "function" ? use(_ref$, _el$3) : lineNav = _el$3;
-                insert(_el$3, createComponent(For, {
-                  get each() {
-                    return props.items;
-                  },
-                  children: item => (() => {
-                    var _el$7 = _tmpl$();
-                    _el$7.$$click = () => {
-                      setActiveKey(item.key);
-                      updateSelectedBarStyle();
-                    };
-                    insert(_el$7, () => unwrapStringOrJSXElement(item.label));
-                    effect(_p$ => {
-                      var _v$6 = cs('cursor-pointer', 'hover:text-[var(--ant-color-primary)]', props.navItemClass, isSelectedItem(item.key) && 'text-[var(--ant-color-primary)]', (props.placement === 'top' || props.placement === 'bottom') && {
-                          small: 'py-[--ant-padding-xs]',
-                          middle: 'py-[--ant-padding-sm]',
-                          large: 'py-[--ant-padding]'
-                        }[size()], (props.placement === 'left' || props.placement === 'right') && 'px-24px py-8px'),
-                        _v$7 = isSelectedItem(item.key) ? 'selected' : undefined;
-                      _v$6 !== _p$.e && className(_el$7, _p$.e = _v$6);
-                      _v$7 !== _p$.t && setAttribute(_el$7, "aria-label", _p$.t = _v$7);
-                      return _p$;
-                    }, {
-                      e: undefined,
-                      t: undefined
-                    });
-                    return _el$7;
-                  })()
-                }), _el$4);
-                effect(_p$ => {
-                  var _v$ = cs('grow flex relative', (props.placement === 'top' || props.placement === 'bottom') && 'gap-32px', (props.placement === 'left' || props.placement === 'right') && 'flex-col gap-16px'),
-                    _v$2 = cs('absolute bg-[var(--ant-color-primary)] transition-left,top', props.placement === 'top' && '-bottom-1px', props.placement === 'bottom' && '-top-1px', props.placement === 'left' && '-right-1px', props.placement === 'right' && '-left-1px', (props.placement === 'top' || props.placement === 'bottom') && 'h-2px', (props.placement === 'left' || props.placement === 'right') && 'w-2px'),
-                    _v$3 = selectedBarStyle();
-                  _v$ !== _p$.e && className(_el$3, _p$.e = _v$);
-                  _v$2 !== _p$.t && className(_el$4, _p$.t = _v$2);
-                  _p$.a = style(_el$4, _v$3, _p$.a);
-                  return _p$;
-                }, {
-                  e: undefined,
-                  t: undefined,
-                  a: undefined
-                });
-                return _el$3;
-              }
-            }), createComponent(Match, {
-              get when() {
-                return props.type === 'segment';
-              },
-              get children() {
-                return createComponent(Segmented, {
-                  "class": "grow",
-                  block: true,
-                  get size() {
-                    return size();
-                  },
-                  get disabled() {
-                    return props.disabled;
-                  },
-                  get value() {
-                    return activeKey();
-                  },
-                  onChange: key => {
-                    setActiveKey(key);
-                  },
-                  get options() {
-                    return props.items.map(item => ({
-                      label: item.label,
-                      value: item.key
-                    }));
-                  }
-                });
-              }
-            }), createComponent(Match, {
-              get when() {
-                return props.type === 'card';
-              },
-              get children() {
-                var _el$5 = _tmpl$();
-                insert(_el$5, createComponent(For, {
-                  get each() {
-                    return props.items;
-                  },
-                  children: item => (() => {
-                    var _el$8 = _tmpl$();
-                    _el$8.$$click = () => {
-                      setActiveKey(item.key);
-                      updateSelectedBarStyle();
-                    };
-                    insert(_el$8, () => unwrapStringOrJSXElement(item.label));
-                    effect(() => className(_el$8, cs({
-                      small: 'py-6px',
-                      middle: 'py-8px',
-                      large: 'py-8px'
-                    }[size()], 'px-16px cursor-pointer border-solid border-[var(--ant-color-border-secondary)] border-1px relative', 'hover:text-[var(--ant-color-primary)]', props.placement === 'top' && 'rounded-t-[var(--ant-border-radius-lg)] !border-b-0px', props.placement === 'bottom' && 'rounded-b-[var(--ant-border-radius-lg)] !border-t-0px', props.placement === 'left' && 'rounded-l-[var(--ant-border-radius-lg)] !border-r-0px', props.placement === 'right' && 'rounded-r-[var(--ant-border-radius-lg)] !border-l-0px', props.navItemClass, isSelectedItem(item.key) ? ['text-[var(--ant-color-primary)] bg-[var(--ant-color-bg-container)]', ['after:content-empty after:block after:absolute after:bg-inherit', props.placement === 'top' && 'after:bottom--1px', props.placement === 'bottom' && 'after:top--1px', props.placement === 'left' && 'after:right--1px', props.placement === 'right' && 'after:left--1px', (props.placement === 'top' || props.placement === 'bottom') && 'after:left-0 after:right-0 after:h-1px', (props.placement === 'left' || props.placement === 'right') && 'after:top-0 after:bottom-0 after:w-1px']] : 'bg-[var(--ant-tabs-card-bg)]')));
-                    return _el$8;
-                  })()
-                }));
-                effect(() => className(_el$5, cs('grow flex gap-2px relative', (props.placement === 'left' || props.placement === 'right') && 'flex-col')));
-                return _el$5;
-              }
-            })];
-          }
-        }), null);
-        insert(_el$, createComponent(Show, {
-          get when() {
-            return resolvedAddonAfter();
-          },
-          get children() {
-            var _el$6 = _tmpl$();
-            insert(_el$6, resolvedAddonAfter);
-            return _el$6;
-          }
-        }), null);
-        effect(_p$ => {
-          var _v$4 = cs('shrink-0 flex items-center gap-16px', props.navClass, props.type === 'segment' ? 'mb-[--ant-tabs-gap]' : ['border-solid border-[var(--ant-color-border-secondary)] border-0', props.placement === 'top' && '!border-b-1px mb-[--ant-tabs-gap]', props.placement === 'bottom' && '!border-t-1px mt-[--ant-tabs-gap]', props.placement === 'left' && '!border-r-1px mr-[--ant-tabs-gap]', props.placement === 'right' && '!border-l-1px ml-[--ant-tabs-gap]', (props.placement === 'left' || props.placement === 'right') && 'flex-col'], {
-              small: '[font-size:var(--ant-font-size)]',
-              middle: '[font-size:var(--ant-font-size)]',
-              large: '[font-size:var(--ant-font-size-lg)]'
-            }[size()]),
-            _v$5 = props.tabBarStyle;
-          _v$4 !== _p$.e && className(_el$, _p$.e = _v$4);
-          _p$.t = style(_el$, _v$5, _p$.t);
-          return _p$;
-        }, {
-          e: undefined,
-          t: undefined
-        });
-        return _el$;
-      })(), createComponent(For, {
+      return [ssr(_tmpl$3, ssrHydrationKey() + ssrAttribute("class", escape(cs('shrink-0 flex items-center gap-16px', props.navClass, props.type === 'segment' ? 'mb-[--ant-tabs-gap]' : ['border-solid border-[var(--ant-color-border-secondary)] border-0', props.placement === 'top' && '!border-b-1px mb-[--ant-tabs-gap]', props.placement === 'bottom' && '!border-t-1px mt-[--ant-tabs-gap]', props.placement === 'left' && '!border-r-1px mr-[--ant-tabs-gap]', props.placement === 'right' && '!border-l-1px ml-[--ant-tabs-gap]', (props.placement === 'left' || props.placement === 'right') && 'flex-col'], {
+        small: '[font-size:var(--ant-font-size)]',
+        middle: '[font-size:var(--ant-font-size)]',
+        large: '[font-size:var(--ant-font-size-lg)]'
+      }[size()]), true), false), ssrStyle(props.tabBarStyle), escape(createComponent(Show, {
+        get when() {
+          return resolvedAddonBefore();
+        },
+        get children() {
+          return ssr(_tmpl$, ssrHydrationKey(), escape(resolvedAddonBefore()));
+        }
+      })), escape(createComponent(Switch, {
+        get children() {
+          return [createComponent(Match, {
+            get when() {
+              return props.type === 'line';
+            },
+            get children() {
+              return ssr(_tmpl$2, ssrHydrationKey() + ssrAttribute("class", escape(cs('grow flex relative', (props.placement === 'top' || props.placement === 'bottom') && 'gap-32px', (props.placement === 'left' || props.placement === 'right') && 'flex-col gap-16px'), true), false), escape(createComponent(For, {
+                get each() {
+                  return props.items;
+                },
+                children: item => ssr(_tmpl$, ssrHydrationKey() + ssrAttribute("class", escape(cs('cursor-pointer', 'hover:text-[var(--ant-color-primary)]', props.navItemClass, isSelectedItem(item.key) && 'text-[var(--ant-color-primary)]', (props.placement === 'top' || props.placement === 'bottom') && {
+                  small: 'py-[--ant-padding-xs]',
+                  middle: 'py-[--ant-padding-sm]',
+                  large: 'py-[--ant-padding]'
+                }[size()], (props.placement === 'left' || props.placement === 'right') && 'px-24px py-8px'), true), false) + ssrAttribute("aria-label", isSelectedItem(item.key) ? 'selected' : escape(undefined, true), false), escape(unwrapStringOrJSXElement(item.label)))
+              })), ssrAttribute("class", escape(cs('absolute bg-[var(--ant-color-primary)] transition-left,top', props.placement === 'top' && '-bottom-1px', props.placement === 'bottom' && '-top-1px', props.placement === 'left' && '-right-1px', props.placement === 'right' && '-left-1px', (props.placement === 'top' || props.placement === 'bottom') && 'h-2px', (props.placement === 'left' || props.placement === 'right') && 'w-2px'), true), false), ssrStyle(selectedBarStyle()));
+            }
+          }), createComponent(Match, {
+            get when() {
+              return props.type === 'segment';
+            },
+            get children() {
+              return createComponent(Segmented, {
+                "class": "grow",
+                block: true,
+                get size() {
+                  return size();
+                },
+                get disabled() {
+                  return props.disabled;
+                },
+                get value() {
+                  return activeKey();
+                },
+                onChange: key => {
+                  setActiveKey(key);
+                },
+                get options() {
+                  return props.items.map(item => ({
+                    label: item.label,
+                    value: item.key
+                  }));
+                }
+              });
+            }
+          }), createComponent(Match, {
+            get when() {
+              return props.type === 'card';
+            },
+            get children() {
+              return ssr(_tmpl$, ssrHydrationKey() + ssrAttribute("class", escape(cs('grow flex gap-2px relative', (props.placement === 'left' || props.placement === 'right') && 'flex-col'), true), false), escape(createComponent(For, {
+                get each() {
+                  return props.items;
+                },
+                children: item => ssr(_tmpl$, ssrHydrationKey() + ssrAttribute("class", escape(cs({
+                  small: 'py-6px',
+                  middle: 'py-8px',
+                  large: 'py-8px'
+                }[size()], 'px-16px cursor-pointer border-solid border-[var(--ant-color-border-secondary)] border-1px relative', 'hover:text-[var(--ant-color-primary)]', props.placement === 'top' && 'rounded-t-[var(--ant-border-radius-lg)] !border-b-0px', props.placement === 'bottom' && 'rounded-b-[var(--ant-border-radius-lg)] !border-t-0px', props.placement === 'left' && 'rounded-l-[var(--ant-border-radius-lg)] !border-r-0px', props.placement === 'right' && 'rounded-r-[var(--ant-border-radius-lg)] !border-l-0px', props.navItemClass, isSelectedItem(item.key) ? ['text-[var(--ant-color-primary)] bg-[var(--ant-color-bg-container)]', ['after:content-empty after:block after:absolute after:bg-inherit', props.placement === 'top' && 'after:bottom--1px', props.placement === 'bottom' && 'after:top--1px', props.placement === 'left' && 'after:right--1px', props.placement === 'right' && 'after:left--1px', (props.placement === 'top' || props.placement === 'bottom') && 'after:left-0 after:right-0 after:h-1px', (props.placement === 'left' || props.placement === 'right') && 'after:top-0 after:bottom-0 after:w-1px']] : 'bg-[var(--ant-tabs-card-bg)]'), true), false), escape(unwrapStringOrJSXElement(item.label)))
+              })));
+            }
+          })];
+        }
+      })), escape(createComponent(Show, {
+        get when() {
+          return resolvedAddonAfter();
+        },
+        get children() {
+          return ssr(_tmpl$, ssrHydrationKey(), escape(resolvedAddonAfter()));
+        }
+      }))), createComponent(For, {
         get each() {
           return props.items;
         },
@@ -232,25 +141,12 @@ const Tabs = _props => {
             return isSelectedItem(item.key);
           },
           get children() {
-            var _el$9 = _tmpl$();
-            insert(_el$9, () => unwrapStringOrJSXElement(item.children));
-            effect(_p$ => {
-              var _v$8 = cs(props.contentClass, 'grow'),
-                _v$9 = isSelectedItem(item.key) ? 'block' : 'none';
-              _v$8 !== _p$.e && className(_el$9, _p$.e = _v$8);
-              _v$9 !== _p$.t && ((_p$.t = _v$9) != null ? _el$9.style.setProperty("display", _v$9) : _el$9.style.removeProperty("display"));
-              return _p$;
-            }, {
-              e: undefined,
-              t: undefined
-            });
-            return _el$9;
+            return ssr(_tmpl$4, ssrHydrationKey() + ssrAttribute("class", escape(cs(props.contentClass, 'grow'), true), false), "display:" + (isSelectedItem(item.key) ? "block" : "none"), escape(unwrapStringOrJSXElement(item.children)));
           }
         })
       })];
     }
   });
 };
-delegateEvents(["click"]);
 
 export { Tabs as default };

package/es/Timeline/index.js

@@ -1,9 +1,9 @@
-import { createComponent, insert, memo, template } from 'solid-js/web';
+import { createComponent, ssr, ssrHydrationKey, escape } from 'solid-js/web';
 import { For } from 'solid-js';
 import Element from '../Element/index.js';
 
-var _tmpl$ = /*#__PURE__*/template(`<div class="flex relative"><div class="w-[10px] h-[10px] border-solid border-width-[3px] border-[var(--ant-color-primary)] bg-white rounded-[50%] mt-[8px]"></div><div class=ml-[8px]>`),
-  _tmpl$2 = /*#__PURE__*/template(`<div class="absolute top-[8px] bottom-[-24px] left-[4px] w-[2px] bg-[rgba(5,5,5,.06)]">`);
+var _tmpl$ = ["<div", " class=\"flex relative\"><!--$-->", "<!--/--><div class=\"w-[10px] h-[10px] border-solid border-width-[3px] border-[var(--ant-color-primary)] bg-white rounded-[50%] mt-[8px]\"></div><div class=\"ml-[8px]\">", "</div></div>"],
+  _tmpl$2 = ["<div", " class=\"absolute top-[8px] bottom-[-24px] left-[4px] w-[2px] bg-[rgba(5,5,5,.06)]\"></div>"];
 const Timeline = props => {
   return createComponent(Element, {
     "class": "flex flex-col gap-[16px]",
@@ -12,17 +12,7 @@ const Timeline = props => {
         get each() {
           return props.items;
         },
-        children: (item, i) => (() => {
-          var _el$ = _tmpl$(),
-            _el$2 = _el$.firstChild,
-            _el$3 = _el$2.nextSibling;
-          insert(_el$, (() => {
-            var _c$ = memo(() => i() !== props.items.length - 1);
-            return () => _c$() && _tmpl$2();
-          })(), _el$2);
-          insert(_el$3, () => item.children?.());
-          return _el$;
-        })()
+        children: (item, i) => ssr(_tmpl$, ssrHydrationKey(), i() !== props.items.length - 1 && _tmpl$2[0] + ssrHydrationKey() + _tmpl$2[1], escape(item.children?.()))
       });
     }
   });

package/es/Tooltip/index.js

@@ -1,4 +1,4 @@
-import { createComponent, memo, Dynamic, Portal, insert, effect, className, style, template } from 'solid-js/web';
+import { createComponent, Dynamic, Portal, ssr, ssrHydrationKey, ssrAttribute, escape, ssrStyle } from 'solid-js/web';
 import { isEqual, compact } from 'lodash-es';
 import { mergeProps, createSignal, useContext, children, createMemo, createEffect, onCleanup, createRenderEffect, on, Show } from 'solid-js';
 import cs from 'classnames';
@@ -10,8 +10,10 @@ import DelayShow from '../DelayShow/index.js';
 import useHover from '../hooks/useHover.js';
 import Element$1 from '../Element/index.js';
 import TooltipContext from './context.js';
+import { DOMRect } from '../utils/DOMRect.js';
 
-var _tmpl$ = /*#__PURE__*/template(`<div>`);
+var _tmpl$ = ["<div", " style=\"", "\">", "</div>"],
+  _tmpl$2 = ["<div", " style=\"", "\"></div>"];
 const unwrapContent = (content, close) => {
   return typeof content === 'function' ? content(close) : content;
 };
@@ -164,7 +166,7 @@ const Tooltip = _props => {
     }
   };
   // =========================== Tooltip ============================
-  const id = nanoid();
+  nanoid();
   const resolvedChildren = children(() => createComponent(TooltipContext.Provider, {
     value: context,
     get children() {
@@ -172,10 +174,6 @@ const Tooltip = _props => {
     }
   }));
   const [contentRef, setContentRef] = createSignal();
-  const setPopupRef = node => {
-    setContentRef(node);
-    parentContext?.registerSubPopup(id, node);
-  };
   const [_open, setOpen] = createControllableValue(_props, {
     defaultValue: false,
     defaultValuePropName: 'defaultOpen',
@@ -418,7 +416,7 @@ const Tooltip = _props => {
       _contentRef.style.setProperty('--inner-translate-y', `${innerTranslateY}px`);
     }
   });
-  return [memo(resolvedChildren), createComponent(Dynamic, {
+  return [resolvedChildren(), createComponent(Dynamic, {
     get component() {
       return props.destroyOnClose ? Show : DelayShow;
     },
@@ -432,7 +430,6 @@ const Tooltip = _props => {
         },
         get children() {
           return createComponent(Element$1, {
-            ref: setPopupRef,
             get ["class"]() {
               return cs('z-1000 fixed left-0 top-0 [font-size:var(--ant-font-size)] text-[var(--ant-color-text)] leading-[var(--ant-line-height)]', open() ? 'block' : 'hidden');
             },
@@ -443,49 +440,24 @@ const Tooltip = _props => {
               e.stopPropagation();
             },
             get children() {
-              return [(() => {
-                var _el$ = _tmpl$();
-                insert(_el$, createComponent(TooltipContext.Provider, {
-                  value: context,
-                  get children() {
-                    return unwrapContent(props.content, () => setOpen(false));
-                  }
-                }));
-                effect(_p$ => {
-                  var _v$ = cs('px-8px py-6px [box-shadow:var(--ant-box-shadow)] rounded-[var(--ant-border-radius-lg)] overflow-auto', props.plain ? 'text-[var(--ant-color-text)] bg-[var(--ant-color-bg-container-tertiary)]' : 'text-[var(--ant-color-text-light-solid)] bg-[var(--ant-color-bg-spotlight)]'),
-                    _v$2 = {
-                      transform: 'translate(var(--inner-translate-x), var(--inner-translate-y))',
-                      ...props.contentStyle
-                    };
-                  _v$ !== _p$.e && className(_el$, _p$.e = _v$);
-                  _p$.t = style(_el$, _v$2, _p$.t);
-                  return _p$;
-                }, {
-                  e: undefined,
-                  t: undefined
-                });
-                return _el$;
-              })(), createComponent(Show, {
+              return [ssr(_tmpl$, ssrHydrationKey() + ssrAttribute("class", escape(cs('px-8px py-6px [box-shadow:var(--ant-box-shadow)] rounded-[var(--ant-border-radius-lg)] overflow-auto', props.plain ? 'text-[var(--ant-color-text)] bg-[var(--ant-color-bg-container-tertiary)]' : 'text-[var(--ant-color-text-light-solid)] bg-[var(--ant-color-bg-spotlight)]'), true), false), ssrStyle({
+                transform: 'translate(var(--inner-translate-x), var(--inner-translate-y))',
+                ...props.contentStyle
+              }), escape(createComponent(TooltipContext.Provider, {
+                value: context,
+                get children() {
+                  return unwrapContent(props.content, () => setOpen(false));
+                }
+              }))), createComponent(Show, {
                 get when() {
                   return props.arrow;
                 },
                 get children() {
-                  var _el$2 = _tmpl$();
-                  effect(_p$ => {
-                    var _v$3 = cs('w-8px h-8px absolute border-transparent [box-shadow:var(--ant-box-shadow)]'),
-                      _v$4 = {
-                        'clip-path': 'polygon(-100% -100%, 200% -100%, 200% 200%)',
-                        'background-color': props.plain ? 'var(--ant-color-bg-container-tertiary)' : 'var(--ant-color-bg-spotlight)',
-                        ...ARROW_STYLE_DICT[mergePlacement(reversedMainPlacement(), reversedMinorPlacement())]
-                      };
-                    _v$3 !== _p$.e && className(_el$2, _p$.e = _v$3);
-                    _p$.t = style(_el$2, _v$4, _p$.t);
-                    return _p$;
-                  }, {
-                    e: undefined,
-                    t: undefined
-                  });
-                  return _el$2;
+                  return ssr(_tmpl$2, ssrHydrationKey() + ssrAttribute("class", escape(cs('w-8px h-8px absolute border-transparent [box-shadow:var(--ant-box-shadow)]'), true), false), ssrStyle({
+                    'clip-path': 'polygon(-100% -100%, 200% -100%, 200% 200%)',
+                    'background-color': props.plain ? 'var(--ant-color-bg-container-tertiary)' : 'var(--ant-color-bg-spotlight)',
+                    ...ARROW_STYLE_DICT[mergePlacement(reversedMainPlacement(), reversedMinorPlacement())]
+                  }));
                 }
               })];
             }