antd-solid 0.0.16 → 0.0.18

package/es/Menu/InternalMenu.js

@@ -1,4 +1,4 @@
-import { delegateEvents, createComponent, insert, mergeProps, effect, className, style, template } from 'solid-js/web';
+import { createComponent, ssr, ssrHydrationKey, ssrAttribute, escape, ssrStyle, mergeProps } from 'solid-js/web';
 import { For, createMemo, Show, Switch, Match } from 'solid-js';
 import { isEmpty } from 'lodash-es';
 import cs from 'classnames';
@@ -6,12 +6,13 @@ import Popover from '../Popover/index.js';
 import { unwrapStringOrJSXElement } from '../utils/solid.js';
 import DelayShow from '../DelayShow/index.js';
 
-var _tmpl$ = /*#__PURE__*/template(`<div class="h-1px bg-[var(--ant-color-split)] my-[var(--ant-margin-xxs)]">`),
-  _tmpl$2 = /*#__PURE__*/template(`<div><div>`),
-  _tmpl$3 = /*#__PURE__*/template(`<div>`),
-  _tmpl$4 = /*#__PURE__*/template(`<span class="i-ant-design:right-outlined w-0.7em absolute top-1/2 right-[var(--ant-padding)] translate-y--1/2">`),
-  _tmpl$5 = /*#__PURE__*/template(`<span class="i-ant-design:up-outlined w-0.7em absolute top-1/2 right-[var(--ant-padding)] translate-y--1/2">`),
-  _tmpl$6 = /*#__PURE__*/template(`<span class="i-ant-design:down-outlined w-0.7em absolute top-1/2 right-[var(--ant-padding)] translate-y--1/2">`);
+var _tmpl$ = ["<div", " class=\"h-1px bg-[var(--ant-color-split)] my-[var(--ant-margin-xxs)]\"></div>"],
+  _tmpl$2 = ["<div", "><div", " style=\"", "\"><!--$-->", "<!--/--><!--$-->", "<!--/--></div></div>"],
+  _tmpl$3 = ["<div", " style=\"", "\">", "</div>"],
+  _tmpl$4 = ["<div", "><!--$-->", "<!--/--><!--$-->", "<!--/--></div>"],
+  _tmpl$5 = ["<span", " class=\"i-ant-design:right-outlined w-0.7em absolute top-1/2 right-[var(--ant-padding)] translate-y--1/2\"></span>"],
+  _tmpl$6 = ["<span", " class=\"i-ant-design:up-outlined w-0.7em absolute top-1/2 right-[var(--ant-padding)] translate-y--1/2\"></span>"],
+  _tmpl$7 = ["<span", " class=\"i-ant-design:down-outlined w-0.7em absolute top-1/2 right-[var(--ant-padding)] translate-y--1/2\"></span>"];
 function isMenuDividerType(value) {
   return value.type === 'divider';
 }
@@ -21,54 +22,18 @@ function InternalMenu(props) {
       return props.items;
     },
     children: item => {
-      if (isMenuDividerType(item)) return _tmpl$();
+      if (isMenuDividerType(item)) return ssr(_tmpl$, ssrHydrationKey());
       const keyPath = createMemo(() => [...(props.parentKeys ?? []), item.key]);
       const expanded = createMemo(() => props.expandedKeys?.includes(item.key));
       const hasChildren = createMemo(() => !isEmpty(item.children));
-      const getLabel = options => (() => {
-        var _el$2 = _tmpl$2(),
-          _el$3 = _el$2.firstChild;
-        _el$3.$$click = () => {
-          options?.onClick?.();
-          if (!hasChildren()) {
-            const info = {
-              key: item.key,
-              keyPath: keyPath()
-            };
-            item.onClick?.(info);
-            props.onClick?.(info);
-            if (props.selectable) {
-              props.onSelect?.({
-                ...info,
-                selectedKeys: [item.key]
-              });
-            }
-          }
-        };
-        insert(_el$3, () => unwrapStringOrJSXElement(item.label), null);
-        insert(_el$3, createComponent(Show, {
-          get when() {
-            return hasChildren();
-          },
-          get children() {
-            return options?.expandIcon;
-          }
-        }), null);
-        effect(_p$ => {
-          var _v$ = cs(item.disabled && 'cursor-not-allowed'),
-            _v$2 = cs('relative rounded-[var(--ant-border-radius-lg)] cursor-pointer flex items-center m-[--ant-menu-item-margin] min-h-[--ant-menu-item-height]', item.disabled ? 'text-[--ant-color-text-disabled]' : props.selectedKeys.includes(item.key) ? 'bg-[--ant-control-item-bg-active] text-[--ant-color-primary]' : 'text-[--ant-color-text] hover:bg-[var(--ant-color-bg-text-hover)]', !hasChildren() ? ['px-[--ant-padding-sm]', props.selectable && 'active:bg-[var(--ant-control-item-bg-active)]'] : 'pl-[var(--ant-padding)] pr-[calc(var(--ant-padding)+0.7em+var(--ant-margin-xs))]', item.disabled && 'pointer-events-none'),
-            _v$3 = props.mode === 'inline' ? `calc(${keyPath().length} * var(--ant-padding))` : undefined;
-          _v$ !== _p$.e && className(_el$2, _p$.e = _v$);
-          _v$2 !== _p$.t && className(_el$3, _p$.t = _v$2);
-          _v$3 !== _p$.a && ((_p$.a = _v$3) != null ? _el$3.style.setProperty("padding-left", _v$3) : _el$3.style.removeProperty("padding-left"));
-          return _p$;
-        }, {
-          e: undefined,
-          t: undefined,
-          a: undefined
-        });
-        return _el$2;
-      })();
+      const getLabel = options => ssr(_tmpl$2, ssrHydrationKey() + ssrAttribute("class", escape(cs(item.disabled && 'cursor-not-allowed'), true), false), ssrAttribute("class", escape(cs('relative rounded-[var(--ant-border-radius-lg)] cursor-pointer flex items-center m-[--ant-menu-item-margin] min-h-[--ant-menu-item-height]', item.disabled ? 'text-[--ant-color-text-disabled]' : props.selectedKeys.includes(item.key) ? 'bg-[--ant-control-item-bg-active] text-[--ant-color-primary]' : 'text-[--ant-color-text] hover:bg-[var(--ant-color-bg-text-hover)]', !hasChildren() ? ['px-[--ant-padding-sm]', props.selectable && 'active:bg-[var(--ant-control-item-bg-active)]'] : 'pl-[var(--ant-padding)] pr-[calc(var(--ant-padding)+0.7em+var(--ant-margin-xs))]', item.disabled && 'pointer-events-none'), true), false), "padding-left:" + (props.mode === 'inline' ? `calc(${escape(keyPath().length, true)} * var(--ant-padding))` : escape(undefined, true)), escape(unwrapStringOrJSXElement(item.label)), escape(createComponent(Show, {
+        get when() {
+          return hasChildren();
+        },
+        get children() {
+          return options?.expandIcon;
+        }
+      })));
       return createComponent(Show, {
         get when() {
           return hasChildren();
@@ -99,38 +64,24 @@ function InternalMenu(props) {
                     },
                     placement: "rightTop",
                     arrow: false,
-                    content: () => (() => {
-                      var _el$6 = _tmpl$3();
-                      insert(_el$6, createComponent(InternalMenu, mergeProps(props, {
-                        get items() {
-                          return item.children;
-                        },
-                        get parentKeys() {
-                          return keyPath();
-                        },
-                        onClick: info => {
-                          props.onExpandedKeysChange([]);
-                          props.onClick?.(info);
-                        }
-                      })));
-                      effect(_p$ => {
-                        var _v$4 = props.class,
-                          _v$5 = props.style;
-                        _v$4 !== _p$.e && className(_el$6, _p$.e = _v$4);
-                        _p$.t = style(_el$6, _v$5, _p$.t);
-                        return _p$;
-                      }, {
-                        e: undefined,
-                        t: undefined
-                      });
-                      return _el$6;
-                    })(),
+                    content: () => ssr(_tmpl$3, ssrHydrationKey() + ssrAttribute("class", escape(props.class, true), false), ssrStyle(props.style), escape(createComponent(InternalMenu, mergeProps(props, {
+                      get items() {
+                        return item.children;
+                      },
+                      get parentKeys() {
+                        return keyPath();
+                      },
+                      onClick: info => {
+                        props.onExpandedKeysChange([]);
+                        props.onClick?.(info);
+                      }
+                    })))),
                     contentStyle: {
                       padding: 0
                     },
                     get children() {
                       return getLabel({
-                        expandIcon: _tmpl$4()
+                        expandIcon: ssr(_tmpl$5, ssrHydrationKey())
                       });
                     }
                   });
@@ -140,8 +91,7 @@ function InternalMenu(props) {
                   return props.mode === 'inline';
                 },
                 get children() {
-                  var _el$4 = _tmpl$3();
-                  insert(_el$4, () => getLabel({
+                  return ssr(_tmpl$4, ssrHydrationKey(), escape(getLabel({
                     onClick() {
                       if (hasChildren()) {
                         if (expanded()) {
@@ -156,32 +106,27 @@ function InternalMenu(props) {
                         return expanded();
                       },
                       get fallback() {
-                        return _tmpl$6();
+                        return ssr(_tmpl$7, ssrHydrationKey());
                       },
                       get children() {
-                        return _tmpl$5();
+                        return ssr(_tmpl$6, ssrHydrationKey());
                       }
                     })
-                  }), null);
-                  insert(_el$4, createComponent(DelayShow, {
+                  })), escape(createComponent(DelayShow, {
                     get when() {
                       return expanded();
                     },
                     get children() {
-                      var _el$5 = _tmpl$3();
-                      insert(_el$5, createComponent(InternalMenu, mergeProps(props, {
+                      return ssr(_tmpl$3, ssrHydrationKey(), "display:" + (expanded() ? "block" : "none"), escape(createComponent(InternalMenu, mergeProps(props, {
                         get items() {
                           return item.children;
                         },
                         get parentKeys() {
                           return keyPath();
                         }
-                      })));
-                      effect(() => (expanded() ? 'block' : 'none') != null ? _el$5.style.setProperty("display", expanded() ? 'block' : 'none') : _el$5.style.removeProperty("display"));
-                      return _el$5;
+                      }))));
                     }
-                  }), null);
-                  return _el$4;
+                  })));
                 }
               })];
             }
@@ -191,6 +136,5 @@ function InternalMenu(props) {
     }
   });
 }
-delegateEvents(["click"]);
 
 export { InternalMenu as default };

package/es/Message/Message.js

@@ -1,12 +1,12 @@
-import { createComponent, memo, insert, template } from 'solid-js/web';
+import { createComponent, ssr, ssrHydrationKey, escape } from 'solid-js/web';
 import { onMount } from 'solid-js';
 import Element from '../Element/index.js';
 
-var _tmpl$ = /*#__PURE__*/template(`<div>`),
-  _tmpl$2 = /*#__PURE__*/template(`<span class="i-ant-design:info-circle-filled text-[--ant-color-primary] text-18px">`),
-  _tmpl$3 = /*#__PURE__*/template(`<span class="i-ant-design:check-circle-filled text-[--ant-color-success] text-18px">`),
-  _tmpl$4 = /*#__PURE__*/template(`<span class="i-ant-design:close-circle-filled text-[--ant-color-error] text-18px">`),
-  _tmpl$5 = /*#__PURE__*/template(`<span class="i-ant-design:exclamation-circle-filled text-[--ant-color-warning] text-18px">`);
+var _tmpl$ = ["<div", ">", "</div>"],
+  _tmpl$2 = ["<span", " class=\"i-ant-design:info-circle-filled text-[--ant-color-primary] text-18px\"></span>"],
+  _tmpl$3 = ["<span", " class=\"i-ant-design:check-circle-filled text-[--ant-color-success] text-18px\"></span>"],
+  _tmpl$4 = ["<span", " class=\"i-ant-design:close-circle-filled text-[--ant-color-error] text-18px\"></span>"],
+  _tmpl$5 = ["<span", " class=\"i-ant-design:exclamation-circle-filled text-[--ant-color-warning] text-18px\"></span>"];
 const Message = props => {
   onMount(() => {
     const duration = props.duration ?? 3;
@@ -22,11 +22,7 @@ const Message = props => {
       '--ant-message-content-padding': '9px 12px'
     },
     get children() {
-      return [memo(() => memo(() => props.type === 'info')() && _tmpl$2()), memo(() => memo(() => props.type === 'success')() && _tmpl$3()), memo(() => memo(() => props.type === 'error')() && _tmpl$4()), memo(() => memo(() => props.type === 'warning')() && _tmpl$5()), (() => {
-        var _el$ = _tmpl$();
-        insert(_el$, () => props.content);
-        return _el$;
-      })()];
+      return [props.type === 'info' && ssr(_tmpl$2, ssrHydrationKey()), props.type === 'success' && ssr(_tmpl$3, ssrHydrationKey()), props.type === 'error' && ssr(_tmpl$4, ssrHydrationKey()), props.type === 'warning' && ssr(_tmpl$5, ssrHydrationKey()), ssr(_tmpl$, ssrHydrationKey(), escape(props.content))];
     }
   });
 };

package/es/Modal/index.js

@@ -1,4 +1,4 @@
-import { delegateEvents, createComponent, Portal, Dynamic, effect, className, insert, memo, mergeProps as mergeProps$1, template } from 'solid-js/web';
+import { createComponent, Portal, Dynamic, ssr, ssrHydrationKey, ssrAttribute, escape, mergeProps as mergeProps$1 } from 'solid-js/web';
 import { mergeProps, createEffect, onCleanup, createSignal, createRenderEffect, on, Show } from 'solid-js';
 import cs from 'classnames';
 import { Transition } from 'solid-transition-group';
@@ -12,11 +12,11 @@ import useModal from './useModal.js';
 import warning from './warning.js';
 import useLocale from '../hooks/useLocale.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="inline-flex gap-8px">`),
-  _tmpl$4 = /*#__PURE__*/template(`<div class="mt-12px text-right">`),
-  _tmpl$5 = /*#__PURE__*/template(`<div class="ant-modal-wrap z-1000 fixed inset-0 overflow-auto pointer-events-none"><div><div class="text-[var(--ant-modal-title-color)] text-16px font-600 mb-8px"></div><div class=grow>`);
+var _tmpl$ = ["<div", " aria-label=\"mask\"></div>"],
+  _tmpl$2 = ["<span", " class=\"i-ant-design:close-outlined\"></span>"],
+  _tmpl$3 = ["<div", " class=\"inline-flex gap-8px\"><!--$-->", "<!--/--><!--$-->", "<!--/--></div>"],
+  _tmpl$4 = ["<div", " class=\"mt-12px text-right\">", "</div>"],
+  _tmpl$5 = ["<div", " class=\"ant-modal-wrap z-1000 fixed inset-0 overflow-auto pointer-events-none\"><div", " style=\"", "\"><!--$-->", "<!--/--><div class=\"text-[var(--ant-modal-title-color)] text-16px font-600 mb-8px\">", "</div><div class=\"grow\">", "</div><!--$-->", "<!--/--></div></div>"];
 // 单位 s
 const transitionDuration = 0.3;
 const Modal = _props => {
@@ -106,10 +106,6 @@ const Modal = _props => {
                 },
                 get children() {
                   return createComponent(Element, {
-                    ref(r$) {
-                      var _ref$ = modalRootRef;
-                      typeof _ref$ === "function" ? _ref$(r$) : modalRootRef = r$;
-                    },
                     "class": "[font-size:var(--ant-font-size)] text-[var(--ant-color-text)] leading-[var(--ant-line-height)]",
                     style: {
                       '--transition-duration': `${transitionDuration}s`
@@ -120,105 +116,58 @@ const Modal = _props => {
                           return props.mask;
                         },
                         get children() {
-                          var _el$ = _tmpl$();
-                          _el$.$$click = () => {
-                            if (props.maskClosable) {
+                          return ssr(_tmpl$, ssrHydrationKey() + ssrAttribute("class", escape(cs('ant-modal-mask', 'fixed inset-0 bg-[var(--ant-color-bg-mask)] z-1000'), true), false));
+                        }
+                      }), ssr(_tmpl$5, ssrHydrationKey(), ssrAttribute("class", escape(cs('ant-modal', 'px-24px py-20px rounded-8px overflow-hidden bg-[--ant-color-bg-container-secondary] flex flex-col max-w-[calc(100vw-calc(var(--ant-margin)*2))] transform-origin-center pointer-events-initial'), true), false), "--translate-y:" + (props.centered ? "max(calc(50vh - 50%), 0px)" : "100px") + (";--active-element-center-x:" + `${escape(activeElementCenter().x, true)}px`) + (";--active-element-center-y:" + `${escape(activeElementCenter().y, true)}px`) + (";width:" + escape(props.width, true)) + (";height:" + escape(props.height, true)), escape(createComponent(Show, {
+                        get when() {
+                          return props.closeIcon;
+                        },
+                        get children() {
+                          return createComponent(Button, {
+                            type: "text",
+                            get ["class"]() {
+                              return cs('!w-22px !h-22px !flex !justify-center !items-center text-center text-18px !absolute !top-16px !right-16px z-1000 !text-[var(--ant-color-icon)] hover:!text-[var(--ant-color-icon-hover)]');
+                            },
+                            onClick: () => {
                               props.onCancel?.();
+                            },
+                            get children() {
+                              return ssr(_tmpl$2, ssrHydrationKey());
+                            }
+                          });
+                        }
+                      })), escape(props.title), escape(props.children), escape(createComponent(Show, {
+                        get when() {
+                          return props.footer;
+                        },
+                        get children() {
+                          return ssr(_tmpl$4, ssrHydrationKey(), escape(createComponent(Show, {
+                            get when() {
+                              return typeof props.footer !== 'function';
+                            },
+                            get fallback() {
+                              return typeof props.footer === 'function' && props.footer();
+                            },
+                            get children() {
+                              return ssr(_tmpl$3, ssrHydrationKey(), escape(createComponent(Button, mergeProps$1({
+                                onClick: () => {
+                                  props.onCancel?.();
+                                },
+                                get children() {
+                                  return locale().Modal?.cancelText;
+                                }
+                              }, () => props.cancelButtonProps))), escape(createComponent(Button, mergeProps$1({
+                                type: "primary",
+                                loading: "auto",
+                                onClick: async () => await props.onOk?.(),
+                                get children() {
+                                  return locale().Modal?.okText;
+                                }
+                              }, () => props.okButtonProps))));
                             }
-                          };
-                          effect(() => className(_el$, cs('ant-modal-mask', 'fixed inset-0 bg-[var(--ant-color-bg-mask)] z-1000')));
-                          return _el$;
+                          })));
                         }
-                      }), (() => {
-                        var _el$2 = _tmpl$5(),
-                          _el$3 = _el$2.firstChild,
-                          _el$5 = _el$3.firstChild,
-                          _el$6 = _el$5.nextSibling;
-                        _el$3.$$click = e => {
-                          e.stopPropagation();
-                        };
-                        insert(_el$3, createComponent(Show, {
-                          get when() {
-                            return props.closeIcon;
-                          },
-                          get children() {
-                            return createComponent(Button, {
-                              type: "text",
-                              get ["class"]() {
-                                return cs('!w-22px !h-22px !flex !justify-center !items-center text-center text-18px !absolute !top-16px !right-16px z-1000 !text-[var(--ant-color-icon)] hover:!text-[var(--ant-color-icon-hover)]');
-                              },
-                              onClick: () => {
-                                props.onCancel?.();
-                              },
-                              get children() {
-                                return _tmpl$2();
-                              }
-                            });
-                          }
-                        }), _el$5);
-                        insert(_el$5, () => props.title);
-                        insert(_el$6, () => props.children);
-                        insert(_el$3, createComponent(Show, {
-                          get when() {
-                            return props.footer;
-                          },
-                          get children() {
-                            var _el$7 = _tmpl$4();
-                            insert(_el$7, createComponent(Show, {
-                              get when() {
-                                return typeof props.footer !== 'function';
-                              },
-                              get fallback() {
-                                return memo(() => typeof props.footer === 'function')() && props.footer();
-                              },
-                              get children() {
-                                var _el$8 = _tmpl$3();
-                                insert(_el$8, createComponent(Button, mergeProps$1({
-                                  onClick: () => {
-                                    props.onCancel?.();
-                                  },
-                                  get children() {
-                                    return locale().Modal?.cancelText;
-                                  }
-                                }, () => props.cancelButtonProps)), null);
-                                insert(_el$8, createComponent(Button, mergeProps$1({
-                                  type: "primary",
-                                  loading: "auto",
-                                  onClick: async () => await props.onOk?.(),
-                                  get children() {
-                                    return locale().Modal?.okText;
-                                  }
-                                }, () => props.okButtonProps)), null);
-                                return _el$8;
-                              }
-                            }));
-                            return _el$7;
-                          }
-                        }), null);
-                        effect(_p$ => {
-                          var _v$ = cs('ant-modal', 'px-24px py-20px rounded-8px overflow-hidden bg-[--ant-color-bg-container-secondary] flex flex-col max-w-[calc(100vw-calc(var(--ant-margin)*2))] transform-origin-center pointer-events-initial'),
-                            _v$2 = props.centered ? 'max(calc(50vh - 50%), 0px)' : '100px',
-                            _v$3 = `${activeElementCenter().x}px`,
-                            _v$4 = `${activeElementCenter().y}px`,
-                            _v$5 = props.width,
-                            _v$6 = props.height;
-                          _v$ !== _p$.e && className(_el$3, _p$.e = _v$);
-                          _v$2 !== _p$.t && ((_p$.t = _v$2) != null ? _el$3.style.setProperty("--translate-y", _v$2) : _el$3.style.removeProperty("--translate-y"));
-                          _v$3 !== _p$.a && ((_p$.a = _v$3) != null ? _el$3.style.setProperty("--active-element-center-x", _v$3) : _el$3.style.removeProperty("--active-element-center-x"));
-                          _v$4 !== _p$.o && ((_p$.o = _v$4) != null ? _el$3.style.setProperty("--active-element-center-y", _v$4) : _el$3.style.removeProperty("--active-element-center-y"));
-                          _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 && ((_p$.n = _v$6) != null ? _el$3.style.setProperty("height", _v$6) : _el$3.style.removeProperty("height"));
-                          return _p$;
-                        }, {
-                          e: undefined,
-                          t: undefined,
-                          a: undefined,
-                          o: undefined,
-                          i: undefined,
-                          n: undefined
-                        });
-                        return _el$2;
-                      })()];
+                      })))];
                     }
                   });
                 }
@@ -232,6 +181,5 @@ const Modal = _props => {
 };
 Modal.warning = warning;
 Modal.useModal = useModal;
-delegateEvents(["click"]);
 
 export { Modal as default };

package/es/Modal/useModal.js

@@ -1,9 +1,9 @@
-import { createComponent, mergeProps, insert, template } from 'solid-js/web';
+import { createComponent, mergeProps, ssr, ssrHydrationKey, escape } from 'solid-js/web';
 import { createSignal } from 'solid-js';
 import Modal from './index.js';
 
-var _tmpl$ = /*#__PURE__*/template(`<div class="flex items-center gap-12px"><span class="i-ant-design:exclamation-circle text-22px text-[var(--ant-color-warning)]">`),
-  _tmpl$2 = /*#__PURE__*/template(`<div class=ml-34px>`);
+var _tmpl$ = ["<div", " class=\"flex items-center gap-12px\"><span class=\"i-ant-design:exclamation-circle text-22px text-[var(--ant-color-warning)]\"></span><!--$-->", "<!--/--></div>"],
+  _tmpl$2 = ["<div", " class=\"ml-34px\">", "</div>"];
 function useModal() {
   const [open, setOpen] = createSignal(false);
   const [modalProps, setModalProps] = createSignal({});
@@ -19,19 +19,10 @@ function useModal() {
     closeIcon: false
   }, modalProps, {
     get title() {
-      return (() => {
-        var _el$ = _tmpl$();
-          _el$.firstChild;
-        insert(_el$, () => modalProps().title, null);
-        return _el$;
-      })();
+      return ssr(_tmpl$, ssrHydrationKey(), escape(modalProps().title));
     },
     get children() {
-      return (() => {
-        var _el$3 = _tmpl$2();
-        insert(_el$3, () => modalProps().children);
-        return _el$3;
-      })();
+      return ssr(_tmpl$2, ssrHydrationKey(), escape(modalProps().children));
     },
     get open() {
       return open();

package/es/Modal/warning.js

@@ -1,8 +1,8 @@
-import { render, createComponent, mergeProps, insert, template } from 'solid-js/web';
+import { render, createComponent, mergeProps, ssr, ssrHydrationKey, escape } from 'solid-js/web';
 import Modal from './index.js';
 
-var _tmpl$ = /*#__PURE__*/template(`<div class="flex items-center gap-12px"><span class="i-ant-design:exclamation-circle text-22px text-[var(--ant-color-warning)]">`),
-  _tmpl$2 = /*#__PURE__*/template(`<div class=ml-34px>`);
+var _tmpl$ = ["<div", " class=\"flex items-center gap-12px\"><span class=\"i-ant-design:exclamation-circle text-22px text-[var(--ant-color-warning)]\"></span><!--$-->", "<!--/--></div>"],
+  _tmpl$2 = ["<div", " class=\"ml-34px\">", "</div>"];
 function warning(props) {
   const div = document.createElement('div');
   document.body.appendChild(div);
@@ -12,19 +12,10 @@ function warning(props) {
     closeIcon: false
   }, props, {
     get title() {
-      return (() => {
-        var _el$ = _tmpl$();
-          _el$.firstChild;
-        insert(_el$, () => props.title, null);
-        return _el$;
-      })();
+      return ssr(_tmpl$, ssrHydrationKey(), escape(props.title));
     },
     get children() {
-      return (() => {
-        var _el$3 = _tmpl$2();
-        insert(_el$3, () => props.children);
-        return _el$3;
-      })();
+      return ssr(_tmpl$2, ssrHydrationKey(), escape(props.children));
     },
     defaultOpen: true,
     onOk: () => {

package/es/Popconfirm/index.js

@@ -1,9 +1,9 @@
-import { createComponent, mergeProps as mergeProps$1, insert, template } from 'solid-js/web';
+import { createComponent, mergeProps as mergeProps$1, ssr, ssrHydrationKey, escape } from 'solid-js/web';
 import { mergeProps, splitProps, createSignal, untrack } from 'solid-js';
 import Button from '../Button/index.js';
 import Tooltip from '../Tooltip/index.js';
 
-var _tmpl$ = /*#__PURE__*/template(`<div><div class="mb-8px flex items-center"><span class="i-ant-design:exclamation-circle-fill text-#faad14"></span><span class="ml-8px font-600"></span></div><div class="ml-22px mb-8px"></div><div class=text-right>`);
+var _tmpl$ = ["<div", "><div class=\"mb-8px flex items-center\"><span class=\"i-ant-design:exclamation-circle-fill text-#faad14\"></span><span class=\"ml-8px font-600\">", "</span></div><div class=\"ml-22px mb-8px\">", "</div><div class=\"text-right\"><!--$-->", "<!--/--><!--$-->", "<!--/--></div></div>"];
 const Popconfirm = props => {
   const mergedProps = mergeProps({
     okText: '确定',
@@ -18,40 +18,28 @@ const Popconfirm = props => {
       return open();
     },
     onOpenChange: setOpen,
-    content: () => (() => {
-      var _el$ = _tmpl$(),
-        _el$2 = _el$.firstChild,
-        _el$3 = _el$2.firstChild,
-        _el$4 = _el$3.nextSibling,
-        _el$5 = _el$2.nextSibling,
-        _el$6 = _el$5.nextSibling;
-      insert(_el$4, () => mergedProps.title);
-      insert(_el$5, () => mergedProps.content);
-      insert(_el$6, createComponent(Button, {
-        "class": "ml-8px",
-        size: "small",
-        onClick: () => {
-          setOpen(false);
-          untrack(() => mergedProps.onCancel?.());
-        },
-        get children() {
-          return mergedProps.cancelText;
-        }
-      }), null);
-      insert(_el$6, createComponent(Button, {
-        "class": "ml-8px",
-        type: "primary",
-        size: "small",
-        onClick: () => {
-          setOpen(false);
-          untrack(() => mergedProps.onConfirm?.());
-        },
-        get children() {
-          return mergedProps.okText;
-        }
-      }), null);
-      return _el$;
-    })()
+    content: () => ssr(_tmpl$, ssrHydrationKey(), escape(mergedProps.title), escape(mergedProps.content), escape(createComponent(Button, {
+      "class": "ml-8px",
+      size: "small",
+      onClick: () => {
+        setOpen(false);
+        untrack(() => mergedProps.onCancel?.());
+      },
+      get children() {
+        return mergedProps.cancelText;
+      }
+    })), escape(createComponent(Button, {
+      "class": "ml-8px",
+      type: "primary",
+      size: "small",
+      onClick: () => {
+        setOpen(false);
+        untrack(() => mergedProps.onConfirm?.());
+      },
+      get children() {
+        return mergedProps.okText;
+      }
+    })))
   }, tooltipProps, {
     get children() {
       return mergedProps.children;

package/es/Popover/index.js

@@ -1,30 +1,21 @@
-import { createComponent, mergeProps, insert, template } from 'solid-js/web';
+import { createComponent, mergeProps, ssr, ssrHydrationKey, escape } from 'solid-js/web';
 import { Show } from 'solid-js';
 import Tooltip, { unwrapContent } from '../Tooltip/index.js';
 
-var _tmpl$ = /*#__PURE__*/template(`<div class="mb-8px flex items-center"><span class=font-600>`),
-  _tmpl$2 = /*#__PURE__*/template(`<div><div>`);
+var _tmpl$ = ["<div", " class=\"mb-8px flex items-center\"><span class=\"font-600\">", "</span></div>"],
+  _tmpl$2 = ["<div", "><!--$-->", "<!--/--><div>", "</div></div>"];
 const Popover = props => {
   return createComponent(Tooltip, mergeProps({
     plain: true
   }, props, {
-    content: close => (() => {
-      var _el$ = _tmpl$2(),
-        _el$4 = _el$.firstChild;
-      insert(_el$, createComponent(Show, {
-        get when() {
-          return props.title;
-        },
-        get children() {
-          var _el$2 = _tmpl$(),
-            _el$3 = _el$2.firstChild;
-          insert(_el$3, () => props.title);
-          return _el$2;
-        }
-      }), _el$4);
-      insert(_el$4, () => unwrapContent(props.content, close));
-      return _el$;
-    })()
+    content: close => ssr(_tmpl$2, ssrHydrationKey(), escape(createComponent(Show, {
+      get when() {
+        return props.title;
+      },
+      get children() {
+        return ssr(_tmpl$, ssrHydrationKey(), escape(props.title));
+      }
+    })), escape(unwrapContent(props.content, close)))
   }));
 };