@ark-ui/solid 0.7.2-beta.3 → 0.7.2-beta.5

package/CHANGELOG.md

@@ -6,6 +6,18 @@ description: All notable changes to this project will be documented in this file
 
 ## [Unreleased]
 
+## [0.7.2-beta.5] - 2023-07-05
+
+### Added
+
+- solid({ solid: { generate: 'ssr', hydratable: true } })
+
+## [0.7.2-beta.4] - 2023-07-05
+
+### Added
+
+- Generate `ssr`
+
 ## [0.7.2-beta.3] - 2023-07-05
 
 ### Added
@@ -115,7 +127,7 @@ description: All notable changes to this project will be documented in this file
 - Add `Toast`
 - Add `Tooltip`
 
-[unreleased]: https://github.com/chakra-ui/ark/compare/@ark-ui/solid@0.7.2-beta.3...HEAD
+[unreleased]: https://github.com/chakra-ui/ark/compare/@ark-ui/solid@0.7.2-beta.5...HEAD
 [0.1.0]: https://github.com/chakra-ui/ark/releases/tag/@ark-ui/solid@0.1.0
 [0.2.0]: https://github.com/chakra-ui/ark/releases/tag/@ark-ui/solid@0.2.0
 [0.3.0]: https://github.com/chakra-ui/ark/releases/tag/@ark-ui/solid@0.3.0
@@ -127,5 +139,7 @@ description: All notable changes to this project will be documented in this file
 [0.7.2-beta.0]: https://github.com/chakra-ui/ark/releases/tag/@ark-ui/solid@0.7.2-beta.0
 [0.7.2-beta.1]: https://github.com/chakra-ui/ark/releases/tag/@ark-ui/solid@0.7.2-beta.1
 [0.7.2-beta.2]: https://github.com/chakra-ui/ark/releases/tag/@ark-ui/solid@0.7.2-beta.2
-
 [0.7.2-beta.3]: https://github.com/chakra-ui/ark/releases/tag/@ark-ui/solid@0.7.2-beta.3
+[0.7.2-beta.4]: https://github.com/chakra-ui/ark/releases/tag/@ark-ui/solid@0.7.2-beta.4
+
+[0.7.2-beta.5]: https://github.com/chakra-ui/ark/releases/tag/@ark-ui/solid@0.7.2-beta.5

package/date-picker/date-picker-month-select.cjs

@@ -8,7 +8,7 @@ const solidJs = require('solid-js');
 const factory = require('../factory.cjs');
 const datePickerContext = require('./date-picker-context.cjs');
 
-const _tmpl$ = /*#__PURE__*/web.template(`<option>`);
+const _tmpl$ = ["<option", ">", "</option>"];
 const DatePickerMonthSelect = props => {
   const datePicker = datePickerContext.useDatePickerContext();
   const mergedProps = solid.mergeProps(() => datePicker().monthSelectProps, props);
@@ -18,12 +18,7 @@ const DatePickerMonthSelect = props => {
         get each() {
           return datePicker().getMonths();
         },
-        children: month => (() => {
-          const _el$ = web.getNextElement(_tmpl$);
-          web.insert(_el$, () => month.label);
-          web.effect(() => _el$.value = month.value);
-          return _el$;
-        })()
+        children: month => web.ssr(_tmpl$, web.ssrHydrationKey() + web.ssrAttribute("value", web.escape(month.value, true), false), web.escape(month.label))
       });
     }
   }));

package/date-picker/date-picker-month-select.mjs

@@ -1,10 +1,10 @@
-import { createComponent, mergeProps as mergeProps$1, getNextElement, insert, effect, template } from 'solid-js/web';
+import { createComponent, mergeProps as mergeProps$1, ssr, ssrHydrationKey, ssrAttribute, escape } from 'solid-js/web';
 import { mergeProps } from '@zag-js/solid';
 import { For } from 'solid-js';
 import { ark } from '../factory.mjs';
 import { useDatePickerContext } from './date-picker-context.mjs';
 
-const _tmpl$ = /*#__PURE__*/template(`<option>`);
+const _tmpl$ = ["<option", ">", "</option>"];
 const DatePickerMonthSelect = props => {
   const datePicker = useDatePickerContext();
   const mergedProps = mergeProps(() => datePicker().monthSelectProps, props);
@@ -14,12 +14,7 @@ const DatePickerMonthSelect = props => {
         get each() {
           return datePicker().getMonths();
         },
-        children: month => (() => {
-          const _el$ = getNextElement(_tmpl$);
-          insert(_el$, () => month.label);
-          effect(() => _el$.value = month.value);
-          return _el$;
-        })()
+        children: month => ssr(_tmpl$, ssrHydrationKey() + ssrAttribute("value", escape(month.value, true), false), escape(month.label))
       });
     }
   }));

package/date-picker/date-picker-year-select.cjs

@@ -8,7 +8,7 @@ const solidJs = require('solid-js');
 const factory = require('../factory.cjs');
 const datePickerContext = require('./date-picker-context.cjs');
 
-const _tmpl$ = /*#__PURE__*/web.template(`<option>`);
+const _tmpl$ = ["<option", ">", "</option>"];
 const DatePickerYearSelect = props => {
   const datePicker = datePickerContext.useDatePickerContext();
   const mergedProps = solid.mergeProps(() => datePicker().yearSelectProps, props);
@@ -21,12 +21,7 @@ const DatePickerYearSelect = props => {
             to: 4_000
           });
         },
-        children: year => (() => {
-          const _el$ = web.getNextElement(_tmpl$);
-          _el$.value = year;
-          web.insert(_el$, year);
-          return _el$;
-        })()
+        children: year => web.ssr(_tmpl$, web.ssrHydrationKey() + web.ssrAttribute("value", web.escape(year, true), false), web.escape(year))
       });
     }
   }));

package/date-picker/date-picker-year-select.mjs

@@ -1,10 +1,10 @@
-import { createComponent, mergeProps as mergeProps$1, getNextElement, insert, template } from 'solid-js/web';
+import { createComponent, mergeProps as mergeProps$1, ssr, ssrHydrationKey, ssrAttribute, escape } from 'solid-js/web';
 import { mergeProps } from '@zag-js/solid';
 import { For } from 'solid-js';
 import { ark } from '../factory.mjs';
 import { useDatePickerContext } from './date-picker-context.mjs';
 
-const _tmpl$ = /*#__PURE__*/template(`<option>`);
+const _tmpl$ = ["<option", ">", "</option>"];
 const DatePickerYearSelect = props => {
   const datePicker = useDatePickerContext();
   const mergedProps = mergeProps(() => datePicker().yearSelectProps, props);
@@ -17,12 +17,7 @@ const DatePickerYearSelect = props => {
             to: 4_000
           });
         },
-        children: year => (() => {
-          const _el$ = getNextElement(_tmpl$);
-          _el$.value = year;
-          insert(_el$, year);
-          return _el$;
-        })()
+        children: year => ssr(_tmpl$, ssrHydrationKey() + ssrAttribute("value", escape(year, true), false), escape(year))
       });
     }
   }));

package/environment/environment.cjs

@@ -6,7 +6,7 @@ const web = require('solid-js/web');
 const solidJs = require('solid-js');
 const environmentContext = require('./environment-context.cjs');
 
-const _tmpl$ = /*#__PURE__*/web.template(`<span hidden>`);
+const _tmpl$ = ["<span", " hidden></span>"];
 const Environment = props => {
   // eslint-disable-next-line prefer-const
   let spanRef = undefined;
@@ -16,12 +16,7 @@ const Environment = props => {
       return currentEnv();
     },
     get children() {
-      return [web.memo(() => props.children), web.memo(() => web.memo(() => !!!props.value)() && (() => {
-        const _el$ = web.getNextElement(_tmpl$);
-        const _ref$ = spanRef;
-        typeof _ref$ === "function" ? web.use(_ref$, _el$) : spanRef = _el$;
-        return _el$;
-      })())];
+      return [props.children, !props.value && web.ssr(_tmpl$, web.ssrHydrationKey())];
     }
   });
 };

package/environment/environment.mjs

@@ -1,8 +1,8 @@
-import { createComponent, memo, getNextElement, use, template } from 'solid-js/web';
+import { createComponent, ssr, ssrHydrationKey } from 'solid-js/web';
 import { createMemo } from 'solid-js';
 import { EnvironmentProvider } from './environment-context.mjs';
 
-const _tmpl$ = /*#__PURE__*/template(`<span hidden>`);
+const _tmpl$ = ["<span", " hidden></span>"];
 const Environment = props => {
   // eslint-disable-next-line prefer-const
   let spanRef = undefined;
@@ -12,12 +12,7 @@ const Environment = props => {
       return currentEnv();
     },
     get children() {
-      return [memo(() => props.children), memo(() => memo(() => !!!props.value)() && (() => {
-        const _el$ = getNextElement(_tmpl$);
-        const _ref$ = spanRef;
-        typeof _ref$ === "function" ? use(_ref$, _el$) : spanRef = _el$;
-        return _el$;
-      })())];
+      return [props.children, !props.value && ssr(_tmpl$, ssrHydrationKey())];
     }
   });
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ark-ui/solid",
-  "version": "0.7.2-beta.3",
+  "version": "0.7.2-beta.5",
   "description": "A collection of unstyled, accessible UI components for Solid, utilizing state machines for seamless interaction.",
   "keywords": [
     "accordion",
@@ -33,7 +33,6 @@
     "toast",
     "tooltip"
   ],
-  "type": "module",
   "homepage": "https://ark-ui.com",
   "license": "MIT",
   "sideEffects": false,

package/pin-input/pin-input-control.cjs

@@ -8,19 +8,13 @@ const solidJs = require('solid-js');
 const factory = require('../factory.cjs');
 const pinInputContext = require('./pin-input-context.cjs');
 
-const _tmpl$ = /*#__PURE__*/web.template(`<input>`);
 const PinInputControl = props => {
   const api = pinInputContext.usePinInputContext();
   const [childrenProps, restProps] = solidJs.splitProps(props, ['children']);
   const controlProps = solid.mergeProps(() => api().controlProps, restProps);
   return web.createComponent(factory.ark.div, web.mergeProps(controlProps, {
     get children() {
-      return [web.memo(() => childrenProps.children), (() => {
-        const _el$ = web.getNextElement(_tmpl$);
-        web.spread(_el$, web.mergeProps(() => api().hiddenInputProps), false, false);
-        web.runHydrationEvents();
-        return _el$;
-      })()];
+      return [childrenProps.children, web.ssrElement("input", api().hiddenInputProps, undefined, true)];
     }
   }));
 };

package/pin-input/pin-input-control.mjs

@@ -1,22 +1,16 @@
-import { createComponent, mergeProps as mergeProps$1, memo, getNextElement, spread, runHydrationEvents, template } from 'solid-js/web';
+import { createComponent, mergeProps as mergeProps$1, ssrElement } from 'solid-js/web';
 import { mergeProps } from '@zag-js/solid';
 import { splitProps } from 'solid-js';
 import { ark } from '../factory.mjs';
 import { usePinInputContext } from './pin-input-context.mjs';
 
-const _tmpl$ = /*#__PURE__*/template(`<input>`);
 const PinInputControl = props => {
   const api = usePinInputContext();
   const [childrenProps, restProps] = splitProps(props, ['children']);
   const controlProps = mergeProps(() => api().controlProps, restProps);
   return createComponent(ark.div, mergeProps$1(controlProps, {
     get children() {
-      return [memo(() => childrenProps.children), (() => {
-        const _el$ = getNextElement(_tmpl$);
-        spread(_el$, mergeProps$1(() => api().hiddenInputProps), false, false);
-        runHydrationEvents();
-        return _el$;
-      })()];
+      return [childrenProps.children, ssrElement("input", api().hiddenInputProps, undefined, true)];
     }
   }));
 };

package/rating-group/rating-group.cjs

@@ -18,7 +18,7 @@ const RatingGroup = props => {
     get children() {
       return web.createComponent(factory.ark.div, web.mergeProps(rootProps, {
         get children() {
-          return [web.memo(() => restProps.children), web.createComponent(factory.ark.input, web.mergeProps(() => api().hiddenInputProps))];
+          return [restProps.children, web.createComponent(factory.ark.input, web.mergeProps(() => api().hiddenInputProps))];
         }
       }));
     }

package/rating-group/rating-group.mjs

@@ -1,4 +1,4 @@
-import { createComponent, mergeProps as mergeProps$1, memo } from 'solid-js/web';
+import { createComponent, mergeProps as mergeProps$1 } from 'solid-js/web';
 import { mergeProps } from '@zag-js/solid';
 import { createSplitProps } from '../create-split-props.mjs';
 import { ark } from '../factory.mjs';
@@ -14,7 +14,7 @@ const RatingGroup = props => {
     get children() {
       return createComponent(ark.div, mergeProps$1(rootProps, {
         get children() {
-          return [memo(() => restProps.children), createComponent(ark.input, mergeProps$1(() => api().hiddenInputProps))];
+          return [restProps.children, createComponent(ark.input, mergeProps$1(() => api().hiddenInputProps))];
         }
       }));
     }

package/slider/slider-thumb.cjs

@@ -12,7 +12,7 @@ const SliderThumb = props => {
   const thumbProps = solid.mergeProps(() => api().thumbProps, props);
   return web.createComponent(factory.ark.div, web.mergeProps(thumbProps, {
     get children() {
-      return [web.createComponent(factory.ark.input, web.mergeProps(() => api().hiddenInputProps)), web.memo(() => props.children)];
+      return [web.createComponent(factory.ark.input, web.mergeProps(() => api().hiddenInputProps)), props.children];
     }
   }));
 };

package/slider/slider-thumb.mjs

@@ -1,4 +1,4 @@
-import { createComponent, mergeProps as mergeProps$1, memo } from 'solid-js/web';
+import { createComponent, mergeProps as mergeProps$1 } from 'solid-js/web';
 import { mergeProps } from '@zag-js/solid';
 import { ark } from '../factory.mjs';
 import { useSliderContext } from './slider-context.mjs';
@@ -8,7 +8,7 @@ const SliderThumb = props => {
   const thumbProps = mergeProps(() => api().thumbProps, props);
   return createComponent(ark.div, mergeProps$1(thumbProps, {
     get children() {
-      return [createComponent(ark.input, mergeProps$1(() => api().hiddenInputProps)), memo(() => props.children)];
+      return [createComponent(ark.input, mergeProps$1(() => api().hiddenInputProps)), props.children];
     }
   }));
 };

package/toast/toast-placements.cjs

@@ -2,7 +2,6 @@
 
 Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 
-const web = require('solid-js/web');
 const solidJs = require('solid-js');
 const runIfFn = require('../run-if-fn.cjs');
 const toastProvider = require('./toast-provider.cjs');
@@ -11,7 +10,7 @@ const ToastPlacements = props => {
   const toast = toastProvider.useToast();
   const placements = solidJs.createMemo(() => Object.keys(toast().toastsByPlacement));
   const getChildren = () => runIfFn.runIfFn(props.children, placements);
-  return web.memo(getChildren);
+  return getChildren();
 };
 
 exports.ToastPlacements = ToastPlacements;

package/toast/toast-placements.mjs

@@ -1,4 +1,3 @@
-import { memo } from 'solid-js/web';
 import { createMemo } from 'solid-js';
 import { runIfFn } from '../run-if-fn.mjs';
 import { useToast } from './toast-provider.mjs';
@@ -7,7 +6,7 @@ const ToastPlacements = props => {
   const toast = useToast();
   const placements = createMemo(() => Object.keys(toast().toastsByPlacement));
   const getChildren = () => runIfFn(props.children, placements);
-  return memo(getChildren);
+  return getChildren();
 };
 
 export { ToastPlacements };