antd-solid 0.0.16 → 0.0.18

package/es/ColorPicker/ColorPickerSlider.js

@@ -1,4 +1,4 @@
-import { delegateEvents, insert, createComponent, memo, effect, className, template } from 'solid-js/web';
+import { ssr, ssrHydrationKey, escape, createComponent, ssrAttribute } from 'solid-js/web';
 import { useContext, createMemo, Show } from 'solid-js';
 import cs from 'classnames';
 import ColorPickerContext from './context.js';
@@ -6,110 +6,77 @@ import Slider from '../Slider/index.js';
 import Color from './color.js';
 import ColorPickUpSvg from '../assets/svg/ColorPickUp.js';
 
-var _tmpl$ = /*#__PURE__*/template(`<div class="flex gap-[--ant-margin-sm] items-center"><div class="flex flex-col gap-[--ant-margin-sm] w-full"></div><div class="shrink-0 w-28px h-28px rounded-[--ant-border-radius-sm]"><div class="w-full h-full rounded-inherit">`),
-  _tmpl$2 = /*#__PURE__*/template(`<span class="shrink-0 text-18px cursor-pointer">`),
-  _tmpl$3 = /*#__PURE__*/template(`<div tabindex=0>`);
+var _tmpl$ = ["<div", " class=\"flex gap-[--ant-margin-sm] items-center\"><div class=\"flex flex-col gap-[--ant-margin-sm] w-full\"><!--$-->", "<!--/--><!--$-->", "<!--/--></div><div class=\"shrink-0 w-28px h-28px rounded-[--ant-border-radius-sm]\" style=\"", "\"><div class=\"w-full h-full rounded-inherit\" style=\"", "\"></div></div><!--$-->", "<!--/--></div>"],
+  _tmpl$2 = ["<span", " class=\"shrink-0 text-18px cursor-pointer\">", "</span>"],
+  _tmpl$3 = ["<div", " style=\"", "\" tabindex=\"0\"></div>"];
 const ColorPickerSlider = () => {
   const context = useContext(ColorPickerContext);
   const color = createMemo(() => context?.color() ?? new Color());
-  return (() => {
-    var _el$ = _tmpl$(),
-      _el$2 = _el$.firstChild,
-      _el$3 = _el$2.nextSibling,
-      _el$4 = _el$3.firstChild;
-    insert(_el$2, createComponent(Slider, {
-      get value() {
-        return color().toHsv().h / 3.55;
-      },
-      onChange: v => {
-        const hsv = color().toHsv();
-        hsv.h = Math.round(v * 3.55);
-        context?.setColor(new Color(hsv));
-      },
-      onChangeComplete: () => {
-        context?.setColor(color(), true);
-      },
-      tooltip: false,
-      handle: () => getSliderHandle(color().toHueRgbString()),
-      style: {
-        '--ant-slider-rail-size': '8px',
-        '--ant-slider-handle-size': '10px',
-        '--ant-slider-rail-bg': 'linear-gradient(90deg, rgb(255, 0, 0) 0%, rgb(255, 255, 0) 17%, rgb(0, 255, 0) 33%, rgb(0, 255, 255) 50%, rgb(0, 0, 255) 67%, rgb(255, 0, 255) 83%, rgb(255, 0, 0) 100%)',
-        '--ant-slider-rail-hover-bg': 'var(--ant-slider-rail-bg)',
-        '--ant-slider-track-bg': 'transparent',
-        '--ant-slider-track-hover-bg': 'transparent'
-      },
-      railBgStyle: {
-        'box-shadow': 'inset 0 0 1px 0 var(--ant-color-text-quaternary)'
-      }
-    }), null);
-    insert(_el$2, createComponent(Show, {
-      get when() {
-        return !context?.disabledAlpha();
-      },
-      get children() {
-        return createComponent(Slider, {
-          get value() {
-            return color().a * 100;
-          },
-          onChange: v => {
-            context?.setColor(color().clone().setAlpha(v / 100));
-          },
-          onChangeComplete: () => {
-            context?.setColor(color(), true);
-          },
-          min: 0,
-          step: 1,
-          tooltip: false,
-          handle: () => getSliderHandle(color().toRgbString()),
-          get style() {
-            return {
-              '--ant-slider-rail-size': '8px',
-              '--ant-slider-handle-size': '10px',
-              '--ant-slider-rail-bg': `linear-gradient(90deg, ${color().clone().setAlpha(0).toRgbString()} 0%, ${color().toHexString()} 100%)`,
-              '--ant-slider-rail-hover-bg': 'var(--ant-slider-rail-bg)',
-              '--ant-slider-track-bg': 'transparent',
-              '--ant-slider-track-hover-bg': 'transparent',
-              'background-image': 'conic-gradient(var(--ant-color-fill-secondary) 0 25%, transparent 0 50%, var(--ant-color-fill-secondary) 0 75%, transparent 0)',
-              'background-size': '8px 8px'
-            };
-          },
-          railBgStyle: {
-            'box-shadow': 'inset 0 0 1px 0 var(--ant-color-text-quaternary)'
-          }
-        });
-      }
-    }), null);
-    _el$3.style.setProperty("background-image", "conic-gradient(var(--ant-color-fill-secondary) 0 25%, transparent 0 50%, var(--ant-color-fill-secondary) 0 75%, transparent 0)");
-    _el$3.style.setProperty("background-size", "50% 50%");
-    _el$3.style.setProperty("box-shadow", "inset 0 0 1px 0 var(--ant-color-text-quaternary)");
-    insert(_el$, (() => {
-      var _c$ = memo(() => !!window.EyeDropper);
-      return () => _c$() && (() => {
-        var _el$5 = _tmpl$2();
-        _el$5.$$click = () => {
-          if (!window.EyeDropper) return;
-          const eyeDropper = new window.EyeDropper();
-          eyeDropper.open().then(result => {
-            context?.setColor(new Color(result.sRGBHex), true);
-          }).catch(console.error);
-        };
-        insert(_el$5, createComponent(ColorPickUpSvg, {}));
-        return _el$5;
-      })();
-    })(), null);
-    effect(() => color().toRgbString() != null ? _el$4.style.setProperty("background-color", color().toRgbString()) : _el$4.style.removeProperty("background-color"));
-    return _el$;
-  })();
+  return ssr(_tmpl$, ssrHydrationKey(), escape(createComponent(Slider, {
+    get value() {
+      return color().toHsv().h / 3.55;
+    },
+    onChange: v => {
+      const hsv = color().toHsv();
+      hsv.h = Math.round(v * 3.55);
+      context?.setColor(new Color(hsv));
+    },
+    onChangeComplete: () => {
+      context?.setColor(color(), true);
+    },
+    tooltip: false,
+    handle: () => getSliderHandle(color().toHueRgbString()),
+    style: {
+      '--ant-slider-rail-size': '8px',
+      '--ant-slider-handle-size': '10px',
+      '--ant-slider-rail-bg': 'linear-gradient(90deg, rgb(255, 0, 0) 0%, rgb(255, 255, 0) 17%, rgb(0, 255, 0) 33%, rgb(0, 255, 255) 50%, rgb(0, 0, 255) 67%, rgb(255, 0, 255) 83%, rgb(255, 0, 0) 100%)',
+      '--ant-slider-rail-hover-bg': 'var(--ant-slider-rail-bg)',
+      '--ant-slider-track-bg': 'transparent',
+      '--ant-slider-track-hover-bg': 'transparent'
+    },
+    railBgStyle: {
+      'box-shadow': 'inset 0 0 1px 0 var(--ant-color-text-quaternary)'
+    }
+  })), escape(createComponent(Show, {
+    get when() {
+      return !context?.disabledAlpha();
+    },
+    get children() {
+      return createComponent(Slider, {
+        get value() {
+          return color().a * 100;
+        },
+        onChange: v => {
+          context?.setColor(color().clone().setAlpha(v / 100));
+        },
+        onChangeComplete: () => {
+          context?.setColor(color(), true);
+        },
+        min: 0,
+        step: 1,
+        tooltip: false,
+        handle: () => getSliderHandle(color().toRgbString()),
+        get style() {
+          return {
+            '--ant-slider-rail-size': '8px',
+            '--ant-slider-handle-size': '10px',
+            '--ant-slider-rail-bg': `linear-gradient(90deg, ${color().clone().setAlpha(0).toRgbString()} 0%, ${color().toHexString()} 100%)`,
+            '--ant-slider-rail-hover-bg': 'var(--ant-slider-rail-bg)',
+            '--ant-slider-track-bg': 'transparent',
+            '--ant-slider-track-hover-bg': 'transparent',
+            'background-image': 'conic-gradient(var(--ant-color-fill-secondary) 0 25%, transparent 0 50%, var(--ant-color-fill-secondary) 0 75%, transparent 0)',
+            'background-size': '8px 8px'
+          };
+        },
+        railBgStyle: {
+          'box-shadow': 'inset 0 0 1px 0 var(--ant-color-text-quaternary)'
+        }
+      });
+    }
+  })), "background-image:" + "conic-gradient(var(--ant-color-fill-secondary) 0 25%, transparent 0 50%, var(--ant-color-fill-secondary) 0 75%, transparent 0)" + (";background-size:" + "50% 50%") + (";box-shadow:" + "inset 0 0 1px 0 var(--ant-color-text-quaternary)"), "background-color:" + escape(color().toRgbString(), true), window.EyeDropper && ssr(_tmpl$2, ssrHydrationKey(), escape(createComponent(ColorPickUpSvg, {}))));
 };
 const getSliderHandle = bgColor => {
-  return (() => {
-    var _el$6 = _tmpl$3();
-    bgColor != null ? _el$6.style.setProperty("background", bgColor) : _el$6.style.removeProperty("background");
-    effect(() => className(_el$6, cs('box-border w-[--ant-slider-handle-size] h-[--ant-slider-handle-size] rounded-1/2 border-solid border-2px border-[--ant-color-bg-container-secondary] cursor-pointer', '[box-shadow:inset_0_0_1px_0_var(--ant-color-text-quaternary),0_0_0_1px_var(--ant-color-fill-secondary)]', 'focus:[box-shadow:inset_0_0_1px_0_var(--ant-color-text-quaternary),0_0_0_1px_var(--ant-color-primary-active)]')));
-    return _el$6;
-  })();
+  return ssr(_tmpl$3, ssrHydrationKey() + ssrAttribute("class", escape(cs('box-border w-[--ant-slider-handle-size] h-[--ant-slider-handle-size] rounded-1/2 border-solid border-2px border-[--ant-color-bg-container-secondary] cursor-pointer', '[box-shadow:inset_0_0_1px_0_var(--ant-color-text-quaternary),0_0_0_1px_var(--ant-color-fill-secondary)]', 'focus:[box-shadow:inset_0_0_1px_0_var(--ant-color-text-quaternary),0_0_0_1px_var(--ant-color-primary-active)]'), true), false), "background:" + escape(bgColor, true));
 };
-delegateEvents(["click"]);
 
 export { ColorPickerSlider as default };

package/es/ColorPicker/index.js

@@ -1,4 +1,4 @@
-import { delegateEvents, createComponent, insert, effect, className, template } from 'solid-js/web';
+import { createComponent, ssr, ssrHydrationKey, ssrAttribute, escape } from 'solid-js/web';
 import cs from 'classnames';
 import { createSignal, untrack, createRenderEffect, createMemo, Show } from 'solid-js';
 import Color from './color.js';
@@ -10,11 +10,11 @@ import ColorPickerSlider from './ColorPickerSlider.js';
 import ColorPickerInput from './ColorPickerInput.js';
 import useComponentSize from '../hooks/useComponentSize.js';
 
-var _tmpl$ = /*#__PURE__*/template(`<div class="flex justify-end mb-[--ant-margin-xs]"><div class="w-24px h-24px rounded-[--ant-border-radius-sm] relative overflow-hidden border-1px border-solid border-[--ant-color-split] cursor-pointer hover:border-[--ant-color-border]"><div class="absolute top-1/2 left-1/2 -translate-1/2 w-200% h-2px bg-[--ant-color-error] rotate-135deg">`),
-  _tmpl$2 = /*#__PURE__*/template(`<div class="w-234px flex flex-col gap-[--ant-margin-sm]">`),
-  _tmpl$3 = /*#__PURE__*/template(`<div><div class="w-full h-full">`),
-  _tmpl$4 = /*#__PURE__*/template(`<div>`),
-  _tmpl$5 = /*#__PURE__*/template(`<div><div class="absolute top-1/2 left-1/2 -translate-1/2 w-200% h-2px bg-[--ant-color-error] rotate-135deg">`);
+var _tmpl$ = ["<div", " class=\"flex justify-end mb-[--ant-margin-xs]\"><div class=\"w-24px h-24px rounded-[--ant-border-radius-sm] relative overflow-hidden border-1px border-solid border-[--ant-color-split] cursor-pointer hover:border-[--ant-color-border]\"><div class=\"absolute top-1/2 left-1/2 -translate-1/2 w-200% h-2px bg-[--ant-color-error] rotate-135deg\"></div></div></div>"],
+  _tmpl$2 = ["<div", " class=\"w-234px flex flex-col gap-[--ant-margin-sm]\"><!--$-->", "<!--/--><!--$-->", "<!--/--><!--$-->", "<!--/--></div>"],
+  _tmpl$3 = ["<div", " style=\"", "\"><div class=\"w-full h-full\" style=\"", "\"></div></div>"],
+  _tmpl$4 = ["<div", " style=\"", "\">", "</div>"],
+  _tmpl$5 = ["<div", "><div class=\"absolute top-1/2 left-1/2 -translate-1/2 w-200% h-2px bg-[--ant-color-error] rotate-135deg\"></div></div>"];
 // TODO 超出范围
 const ColorPicker = props => {
   const isControlled = () => Object.keys(props).includes('value');
@@ -46,21 +46,9 @@ const ColorPicker = props => {
           return props.allowClear;
         },
         get children() {
-          var _el$ = _tmpl$(),
-            _el$2 = _el$.firstChild;
-          _el$2.$$click = () => {
-            setColor(new Color());
-            close();
-          };
-          return _el$;
+          return ssr(_tmpl$, ssrHydrationKey());
         }
-      }), (() => {
-        var _el$3 = _tmpl$2();
-        insert(_el$3, createComponent(ColorPickerSelect, {}), null);
-        insert(_el$3, createComponent(ColorPickerSlider, {}), null);
-        insert(_el$3, createComponent(ColorPickerInput, {}), null);
-        return _el$3;
-      })()];
+      }), ssr(_tmpl$2, ssrHydrationKey(), escape(createComponent(ColorPickerSelect, {})), escape(createComponent(ColorPickerSlider, {})), escape(createComponent(ColorPickerInput, {})))];
     }
   });
   return createComponent(Popover, {
@@ -81,59 +69,25 @@ const ColorPicker = props => {
           return cs('inline-block', props.disabled && 'cursor-not-allowed');
         },
         get children() {
-          var _el$4 = _tmpl$4();
-          _el$4.style.setProperty("--border-width", "1px");
-          insert(_el$4, createComponent(Show, {
+          return ssr(_tmpl$4, ssrHydrationKey() + ssrAttribute("class", escape(cs('p-[calc(var(--ant-padding-xxs)-var(--border-width))] border-width-[--border-width] border-[--ant-color-border] border-solid rounded-[--ant-border-radius] cursor-pointer hover:border-[--ant-color-primary-hover]', open() && '!border-[--ant-color-primary-active]', props.disabled ? 'pointer-events-none bg-[--ant-color-bg-container-disabled]' : 'bg-[--ant-color-bg-elevated]'), true), false), "--border-width:" + "1px" + (";--inner-size:" + escape({
+            small: '16px',
+            middle: '24px',
+            large: '32px'
+          }[size()], true)), escape(createComponent(Show, {
             get when() {
               return color().isValid;
             },
             get fallback() {
-              return (() => {
-                var _el$7 = _tmpl$5();
-                effect(() => className(_el$7, cs('w-[--inner-size] h-[--inner-size] rounded-[--ant-border-radius-sm] relative overflow-hidden border-1px border-solid border-[--ant-color-split]')));
-                return _el$7;
-              })();
+              return ssr(_tmpl$5, ssrHydrationKey() + ssrAttribute("class", escape(cs('w-[--inner-size] h-[--inner-size] rounded-[--ant-border-radius-sm] relative overflow-hidden border-1px border-solid border-[--ant-color-split]'), true), false));
             },
             get children() {
-              var _el$5 = _tmpl$3(),
-                _el$6 = _el$5.firstChild;
-              _el$5.style.setProperty("box-shadow", "inset 0 0 1px 0 var(--ant-color-text-quaternary)");
-              _el$5.style.setProperty("background-image", "conic-gradient(var(--ant-color-fill-secondary) 0 25%, transparent 0 50%, var(--ant-color-fill-secondary) 0 75%, transparent 0)");
-              _el$5.style.setProperty("background-size", "50% 50%");
-              _el$6.style.setProperty("box-shadow", "inset 0 0 0 var(--ant-line-width) var(--ant-color-fill-secondary)");
-              effect(_p$ => {
-                var _v$ = cs('w-[--inner-size] h-[--inner-size] rounded-[--ant-border-radius-sm] overflow-hidden'),
-                  _v$2 = color().toRgbString();
-                _v$ !== _p$.e && className(_el$5, _p$.e = _v$);
-                _v$2 !== _p$.t && ((_p$.t = _v$2) != null ? _el$6.style.setProperty("background-color", _v$2) : _el$6.style.removeProperty("background-color"));
-                return _p$;
-              }, {
-                e: undefined,
-                t: undefined
-              });
-              return _el$5;
+              return ssr(_tmpl$3, ssrHydrationKey() + ssrAttribute("class", escape(cs('w-[--inner-size] h-[--inner-size] rounded-[--ant-border-radius-sm] overflow-hidden'), true), false), "box-shadow:" + "inset 0 0 1px 0 var(--ant-color-text-quaternary)" + (";background-image:" + "conic-gradient(var(--ant-color-fill-secondary) 0 25%, transparent 0 50%, var(--ant-color-fill-secondary) 0 75%, transparent 0)") + (";background-size:" + "50% 50%"), "box-shadow:" + "inset 0 0 0 var(--ant-line-width) var(--ant-color-fill-secondary)" + (";background-color:" + escape(color().toRgbString(), true)));
             }
-          }));
-          effect(_p$ => {
-            var _v$3 = cs('p-[calc(var(--ant-padding-xxs)-var(--border-width))] border-width-[--border-width] border-[--ant-color-border] border-solid rounded-[--ant-border-radius] cursor-pointer hover:border-[--ant-color-primary-hover]', open() && '!border-[--ant-color-primary-active]', props.disabled ? 'pointer-events-none bg-[--ant-color-bg-container-disabled]' : 'bg-[--ant-color-bg-elevated]'),
-              _v$4 = {
-                small: '16px',
-                middle: '24px',
-                large: '32px'
-              }[size()];
-            _v$3 !== _p$.e && className(_el$4, _p$.e = _v$3);
-            _v$4 !== _p$.t && ((_p$.t = _v$4) != null ? _el$4.style.setProperty("--inner-size", _v$4) : _el$4.style.removeProperty("--inner-size"));
-            return _p$;
-          }, {
-            e: undefined,
-            t: undefined
-          });
-          return _el$4;
+          })));
         }
       });
     }
   });
 };
-delegateEvents(["click"]);
 
 export { ColorPicker as default };

package/es/Command/createCommand.d.ts

@@ -11,7 +11,7 @@ export interface BaseCommandIntance<P extends {} | undefined = undefined, R = vo
  * @param contextHolder 如果为 true，则会返回 getContextHolder
  */
 declare function createCommand<P extends {} | undefined = undefined, R = void>(component: Component<P extends {} ? P : {}>): BaseCommandIntance<P, R>;
-declare function createCommand<P extends {} = {}, R = void>(component: Component<P>, contextHolder: true): BaseCommandIntance<P, R> & {
+declare function createCommand<P extends {} | undefined = undefined, R = void>(component: Component<P extends {} ? P : {}>, contextHolder: true): BaseCommandIntance<P, R> & {
     getContextHolder: () => JSXElement;
 };
 export default createCommand;

package/es/ContextMenu/index.js

@@ -11,7 +11,7 @@ const ContextMenuCommand = Command.createCommand(props => {
   const [, menuProps] = splitProps(props, ['x', 'y']);
   const [reverse, setReverse] = createSignal(false);
   createEffect(() => {
-    setReverse(props.y + (ref?.clientHeight ?? 0) + offsetY > window.innerHeight);
+    setReverse(props.y + (0) + offsetY > window.innerHeight);
   });
   const {
     dispose
@@ -35,10 +35,6 @@ const ContextMenuCommand = Command.createCommand(props => {
     abortController.abort();
   });
   return createComponent(Element, {
-    ref(r$) {
-      var _ref$ = ref;
-      typeof _ref$ === "function" ? _ref$(r$) : ref = r$;
-    },
     "class": "z-1000 fixed left-0 top-0 [font-size:var(--ant-font-size)] text-[var(--ant-color-text)] leading-[var(--ant-line-height)] bg-[--ant-color-bg-container-tertiary] rounded-[var(--ant-border-radius)]",
     get style() {
       return {

package/es/Cursor/index.js

@@ -1,7 +1,7 @@
-import { createComponent, Portal, insert, effect, template } from 'solid-js/web';
+import { createComponent, Portal, ssr, ssrHydrationKey, escape } from 'solid-js/web';
 import { children, createSignal, createEffect, onCleanup, Show } from 'solid-js';
 
-var _tmpl$ = /*#__PURE__*/template(`<span class="absolute pointer-events-none z-2000">`);
+var _tmpl$ = ["<span", " class=\"absolute pointer-events-none z-2000\" style=\"", "\">", "</span>"];
 const Cursor = props => {
   const resolvedChildren = children(() => props.children);
   const [hover, setHover] = createSignal(false);
@@ -49,19 +49,7 @@ const Cursor = props => {
     get children() {
       return createComponent(Portal, {
         get children() {
-          var _el$ = _tmpl$();
-          insert(_el$, () => props.cursor);
-          effect(_p$ => {
-            var _v$ = `${cursorPosition().y}px`,
-              _v$2 = `${cursorPosition().x}px`;
-            _v$ !== _p$.e && ((_p$.e = _v$) != null ? _el$.style.setProperty("top", _v$) : _el$.style.removeProperty("top"));
-            _v$2 !== _p$.t && ((_p$.t = _v$2) != null ? _el$.style.setProperty("left", _v$2) : _el$.style.removeProperty("left"));
-            return _p$;
-          }, {
-            e: undefined,
-            t: undefined
-          });
-          return _el$;
+          return ssr(_tmpl$, ssrHydrationKey(), "top:" + `${escape(cursorPosition().y, true)}px` + (";left:" + `${escape(cursorPosition().x, true)}px`), escape(props.cursor));
         }
       });
     }

package/es/Divider/index.js

@@ -1,11 +1,11 @@
-import { createComponent, use, insert, effect, template } from 'solid-js/web';
+import { createComponent, ssr, ssrHydrationKey, escape } from 'solid-js/web';
 import { mergeProps, createMemo, children, Show } from 'solid-js';
 import cs from 'classnames';
 import 'lodash-es';
 import useSize from '../hooks/useSize.js';
 import Element from '../Element/index.js';
 
-var _tmpl$ = /*#__PURE__*/template(`<span class="inline-block px-[var(--ant-divider-text-padding-inline)]">`);
+var _tmpl$ = ["<span", " class=\"inline-block px-[var(--ant-divider-text-padding-inline)]\" style=\"", "\">", "</span>"];
 const Divider = _props => {
   const props = mergeProps({
     orientation: 'center',
@@ -40,10 +40,6 @@ const Divider = _props => {
     },
     get children() {
       return createComponent(Element, {
-        ref(r$) {
-          var _ref$ = container;
-          typeof _ref$ === "function" ? _ref$(r$) : container = r$;
-        },
         get ["class"]() {
           return cs(props.class, 'my-[var(--ant-margin)] flex items-center relative', ['before:content-empty before:block before:absolute before:left-0 before:w-[var(--ant-divider-children-start)] before:border-width-[1px_0_0] before:border-[var(--ant-color-split)]', props.dashed ? 'before:border-dashed' : 'before:border-solid'], ['after:content-empty after:block after:absolute after:left-[var(--ant-divider-children-end)] after:right-0 after:border-width-[1px_0_0] after:border-[var(--ant-color-split)]', props.dashed ? 'after:border-dashed' : 'after:border-solid']);
         },
@@ -56,12 +52,7 @@ const Divider = _props => {
           };
         },
         get children() {
-          var _el$ = _tmpl$();
-          var _ref$2 = childrenRef;
-          typeof _ref$2 === "function" ? use(_ref$2, _el$) : childrenRef = _el$;
-          insert(_el$, resolvedChildren);
-          effect(() => `translateX(${childrenStart()}px)` != null ? _el$.style.setProperty("transform", `translateX(${childrenStart()}px)`) : _el$.style.removeProperty("transform"));
-          return _el$;
+          return ssr(_tmpl$, ssrHydrationKey(), "transform:" + `translateX(${escape(childrenStart(), true)}px)`, escape(resolvedChildren()));
         }
       });
     }

package/es/Drawer/index.js

@@ -1,4 +1,4 @@
-import { delegateEvents, createComponent, Dynamic, effect, className, insert, Portal, template } from 'solid-js/web';
+import { createComponent, Dynamic, ssr, ssrHydrationKey, ssrAttribute, escape, Portal } from 'solid-js/web';
 import { mergeProps, createEffect, onCleanup, createMemo, Show } from 'solid-js';
 import cs from 'classnames';
 import { Transition } from 'solid-transition-group';
@@ -10,11 +10,11 @@ import DelayShow from '../DelayShow/index.js';
 import createControllableValue from '../hooks/createControllableValue.js';
 import { unwrapStringOrJSXElement } from '../utils/solid.js';
 
-var _tmpl$ = /*#__PURE__*/template(`<div aria-label=mask>`),
-  _tmpl$2 = /*#__PURE__*/template(`<span class=i-ant-design:close-outlined>`),
-  _tmpl$3 = /*#__PURE__*/template(`<div class="w-full text-[var(--ant-color-text)] text-size-[var(--ant-font-size-lg)] [font-weight:var(--ant-font-weight-strong)] leading-[var(--ant-line-height-lg)]">`),
-  _tmpl$4 = /*#__PURE__*/template(`<div class=shrink-0>`),
-  _tmpl$5 = /*#__PURE__*/template(`<div><div class="px-[var(--ant-padding-lg)] py-[var(--ant-padding)] flex items-center [border-bottom:var(--ant-line-width)_solid_var(--ant-color-split)] empty:hidden"></div><div class="p-[--ant-drawer-body-padding] overflow-auto">`);
+var _tmpl$ = ["<div", " aria-label=\"mask\"></div>"],
+  _tmpl$2 = ["<span", " class=\"i-ant-design:close-outlined\"></span>"],
+  _tmpl$3 = ["<div", " class=\"w-full text-[var(--ant-color-text)] text-size-[var(--ant-font-size-lg)] [font-weight:var(--ant-font-weight-strong)] leading-[var(--ant-line-height-lg)]\">", "</div>"],
+  _tmpl$4 = ["<div", " class=\"shrink-0\">", "</div>"],
+  _tmpl$5 = ["<div", " style=\"", "\"><div class=\"px-[var(--ant-padding-lg)] py-[var(--ant-padding)] flex items-center [border-bottom:var(--ant-line-width)_solid_var(--ant-color-split)] empty:hidden\"><!--$-->", "<!--/--><!--$-->", "<!--/--><!--$-->", "<!--/--></div><div class=\"p-[--ant-drawer-body-padding] overflow-auto\">", "</div></div>"];
 const Drawer = _props => {
   const props = mergeProps({
     size: '378px',
@@ -86,10 +86,6 @@ const Drawer = _props => {
         },
         get children() {
           return createComponent(Element, {
-            ref(r$) {
-              var _ref$ = drawerRef;
-              typeof _ref$ === "function" ? _ref$(r$) : drawerRef = r$;
-            },
             get ["class"]() {
               return cs(props.class, '[font-size:var(--ant-font-size)] text-[var(--ant-color-text)] leading-[var(--ant-line-height)]', 'inset-0 z-1000', isBody() ? 'fixed' : 'absolute');
             },
@@ -105,81 +101,45 @@ const Drawer = _props => {
                   return props.mask;
                 },
                 get children() {
-                  var _el$ = _tmpl$();
-                  _el$.$$click = () => {
-                    if (props.maskClosable) {
+                  return ssr(_tmpl$, ssrHydrationKey() + ssrAttribute("class", escape(cs('ant-drawer-mask', 'absolute inset-0 bg-[--ant-color-bg-mask]'), true), false));
+                }
+              }), ssr(_tmpl$5, ssrHydrationKey() + ssrAttribute("class", escape(cs('ant-drawer-content', {
+                left: 'ant-drawer-content-left',
+                right: 'ant-drawer-content-right',
+                top: 'ant-drawer-content-top',
+                bottom: 'ant-drawer-content-bottom'
+              }[props.placement], 'absolute bg-[--ant-color-bg-container-secondary] grid [grid-template-rows:auto_1fr]'), true), false), "width:" + (direction() === 'horizontal' ? escape(props.size, true) : escape(undefined, true)) + (";height:" + (direction() === 'vertical' ? escape(props.size, true) : escape(undefined, true))), escape(createComponent(Show, {
+                get when() {
+                  return props.closeIcon;
+                },
+                get children() {
+                  return createComponent(Button, {
+                    type: "text",
+                    size: "small",
+                    "class": "shrink-0 mr-[var(--ant-margin-sm)] text-size-[var(--ant-font-size-lg)] h-[var(--ant-font-size-lg)] leading-[var(--ant-font-size-lg)] hover:!bg-transparent !text-[var(--ant-color-icon)] hover:!text-[var(--ant-color-icon-hover)] !p-0",
+                    onClick: () => {
                       props.onClose?.();
+                    },
+                    get children() {
+                      return ssr(_tmpl$2, ssrHydrationKey());
                     }
-                  };
-                  effect(() => className(_el$, cs('ant-drawer-mask', 'absolute inset-0 bg-[--ant-color-bg-mask]')));
-                  return _el$;
+                  });
+                }
+              })), escape(createComponent(Show, {
+                get when() {
+                  return title();
+                },
+                get children() {
+                  return ssr(_tmpl$3, ssrHydrationKey(), escape(title()));
+                }
+              })), escape(createComponent(Show, {
+                get when() {
+                  return extra();
+                },
+                get children() {
+                  return ssr(_tmpl$4, ssrHydrationKey(), escape(extra()));
                 }
-              }), (() => {
-                var _el$2 = _tmpl$5(),
-                  _el$3 = _el$2.firstChild,
-                  _el$7 = _el$3.nextSibling;
-                _el$2.$$click = e => {
-                  e.stopPropagation();
-                };
-                insert(_el$3, createComponent(Show, {
-                  get when() {
-                    return props.closeIcon;
-                  },
-                  get children() {
-                    return createComponent(Button, {
-                      type: "text",
-                      size: "small",
-                      "class": "shrink-0 mr-[var(--ant-margin-sm)] text-size-[var(--ant-font-size-lg)] h-[var(--ant-font-size-lg)] leading-[var(--ant-font-size-lg)] hover:!bg-transparent !text-[var(--ant-color-icon)] hover:!text-[var(--ant-color-icon-hover)] !p-0",
-                      onClick: () => {
-                        props.onClose?.();
-                      },
-                      get children() {
-                        return _tmpl$2();
-                      }
-                    });
-                  }
-                }), null);
-                insert(_el$3, createComponent(Show, {
-                  get when() {
-                    return title();
-                  },
-                  get children() {
-                    var _el$5 = _tmpl$3();
-                    insert(_el$5, title);
-                    return _el$5;
-                  }
-                }), null);
-                insert(_el$3, createComponent(Show, {
-                  get when() {
-                    return extra();
-                  },
-                  get children() {
-                    var _el$6 = _tmpl$4();
-                    insert(_el$6, extra);
-                    return _el$6;
-                  }
-                }), null);
-                insert(_el$7, () => props.children);
-                effect(_p$ => {
-                  var _v$ = cs('ant-drawer-content', {
-                      left: 'ant-drawer-content-left',
-                      right: 'ant-drawer-content-right',
-                      top: 'ant-drawer-content-top',
-                      bottom: 'ant-drawer-content-bottom'
-                    }[props.placement], 'absolute bg-[--ant-color-bg-container-secondary] grid [grid-template-rows:auto_1fr]'),
-                    _v$2 = direction() === 'horizontal' ? props.size : undefined,
-                    _v$3 = direction() === 'vertical' ? props.size : undefined;
-                  _v$ !== _p$.e && className(_el$2, _p$.e = _v$);
-                  _v$2 !== _p$.t && ((_p$.t = _v$2) != null ? _el$2.style.setProperty("width", _v$2) : _el$2.style.removeProperty("width"));
-                  _v$3 !== _p$.a && ((_p$.a = _v$3) != null ? _el$2.style.setProperty("height", _v$3) : _el$2.style.removeProperty("height"));
-                  return _p$;
-                }, {
-                  e: undefined,
-                  t: undefined,
-                  a: undefined
-                });
-                return _el$2;
-              })()];
+              })), escape(props.children))];
             }
           });
         }
@@ -208,6 +168,5 @@ const Drawer = _props => {
     }
   });
 };
-delegateEvents(["click"]);
 
 export { Drawer as default };

package/es/Element/index.js

@@ -1,5 +1,5 @@
 import { createComponent, Dynamic, mergeProps as mergeProps$1 } from 'solid-js/web';
-import { mergeProps, useContext, onMount } from 'solid-js';
+import { mergeProps, useContext, createSignal, onMount } from 'solid-js';
 import cs from 'classnames';
 import ConfigProviderContext from '../ConfigProvider/context.js';
 
@@ -12,8 +12,10 @@ function Element(_props) {
     cssVariablesClass,
     cssVariables
   } = useContext(ConfigProviderContext);
+  const [_cssVariablesClass, setCssVariablesClass] = createSignal('');
   onMount(() => {
     let styleTag = document.head.querySelector(`[data-token-hash=${cssVariablesClass}]`);
+    setCssVariablesClass(cssVariablesClass);
     if (styleTag) return;
     styleTag = document.createElement('style');
     styleTag.setAttribute('type', 'text/css');
@@ -34,7 +36,9 @@ function Element(_props) {
     }
   }, props, {
     get ["class"]() {
-      return cs(cssVariablesClass, props.class);
+      return cs(_cssVariablesClass(),
+      // ssr 水合时，如果直接使用 cssVariablesClass，不会自动更新，导致在浏览器端使用的还是服务器端的 cssVariablesClass 值
+      props.class);
     }
   }));
 }

package/es/Empty/PRESENTED_IMAGE_SIMPLE.js

@@ -1,10 +1,10 @@
-import { createComponent, insert, template } from 'solid-js/web';
+import { createComponent, ssr, ssrHydrationKey, escape } from 'solid-js/web';
 import cs from 'classnames';
 import EmptySvg from './assets/SimpleEmptySvg.js';
 import Element from '../Element/index.js';
 
-var _tmpl$ = /*#__PURE__*/template(`<div class="mb-[var(--ant-margin-xs)] flex justify-center">`),
-  _tmpl$2 = /*#__PURE__*/template(`<div class="text-[var(--ant-color-text-description)] text-center">`);
+var _tmpl$ = ["<div", " class=\"mb-[var(--ant-margin-xs)] flex justify-center\">", "</div>"],
+  _tmpl$2 = ["<div", " class=\"text-[var(--ant-color-text-description)] text-center\">", "</div>"];
 const PRESENTED_IMAGE_SIMPLE = props => {
   return createComponent(Element, {
     get ["class"]() {
@@ -14,15 +14,7 @@ const PRESENTED_IMAGE_SIMPLE = props => {
       return props.style;
     },
     get children() {
-      return [(() => {
-        var _el$ = _tmpl$();
-        insert(_el$, createComponent(EmptySvg, {}));
-        return _el$;
-      })(), (() => {
-        var _el$2 = _tmpl$2();
-        insert(_el$2, () => props.description ?? '暂无数据');
-        return _el$2;
-      })()];
+      return [ssr(_tmpl$, ssrHydrationKey(), escape(createComponent(EmptySvg, {}))), ssr(_tmpl$2, ssrHydrationKey(), escape(props.description) ?? '暂无数据')];
     }
   });
 };