v1.0

.changeset/config.json

@@ -21,11 +21,9 @@
     "nuxt-ts",
     "solid-ts",
     "nuxt-ts",
-    "react-19",
     "preact-ts",
     "svelte-ts",
     "vanilla-ts",
-    "lit-ts",
     "website"
   ]
 }

.changeset/poor-tips-compete.md

@@ -0,0 +1,7 @@
+---
+"@zag-js/core": major
+---
+
+Rewrite machines for increased performance and initial mount time.
+
+This is done by relying on native framework primitives and a reducer rather than an external store.

.xstate/clipboard.js

@@ -10,9 +10,43 @@ const {
   choose
 } = actions;
 const fetchMachine = createMachine({
-  id: "clipboard",
-  initial: "idle",
-  context: {},
+  props({
+    props
+  }) {
+    return {
+      timeout: 3000,
+      defaultValue: "",
+      ...props
+    };
+  },
+  initialState() {
+    return "idle";
+  },
+  context({
+    prop,
+    bindable
+  }) {
+    return {
+      value: bindable(() => ({
+        defaultValue: prop("defaultValue"),
+        value: prop("value"),
+        onChange(value) {
+          prop("onValueChange")?.({
+            value
+          });
+        }
+      }))
+    };
+  },
+  watch({
+    track,
+    context: {},
+    action
+  }) {
+    track([() => context.get("value")], () => {
+      action(["syncInputElement"]);
+    });
+  },
   on: {
     "VALUE.SET": {
       actions: ["setValue"]
@@ -37,10 +71,11 @@ const fetchMachine = createMachine({
       }
     },
     copied: {
-      after: {
-        COPY_TIMEOUT: "idle"
-      },
+      effects: ["waitForTimeout"],
       on: {
+        "COPY.DONE": {
+          target: "idle"
+        },
         COPY: {
           target: "copied",
           actions: ["copyToClipboard", "invokeOnCopy"]
@@ -50,6 +85,49 @@ const fetchMachine = createMachine({
         }
       }
     }
+  },
+  implementations: {
+    effects: {
+      waitForTimeout({
+        prop,
+        send
+      }) {
+        return setRafTimeout(() => {
+          send({
+            type: "COPY.DONE"
+          });
+        }, prop("timeout"));
+      }
+    },
+    actions: {
+      setValue({
+        context,
+        event
+      }) {
+        context.set("value", event.value);
+      },
+      copyToClipboard({
+        context,
+        scope
+      }) {
+        dom.writeToClipboard(scope, context.get("value"));
+      },
+      invokeOnCopy({
+        prop
+      }) {
+        prop("onStatusChange")?.({
+          copied: true
+        });
+      },
+      syncInputElement({
+        context,
+        scope
+      }) {
+        const inputEl = dom.getInputEl(scope);
+        if (!inputEl) return;
+        setElementValue(inputEl, context.get("value"));
+      }
+    }
   }
 }, {
   actions: {

.xstate/editable.js

@@ -10,18 +10,53 @@ const {
   choose
 } = actions;
 const fetchMachine = createMachine({
-  id: "editable",
-  initial: ctx.edit ? "edit" : "preview",
-  entry: ctx.edit ? ["focusInput"] : undefined,
+  props({
+    props
+  }) {
+    return {
+      activationMode: "focus",
+      submitMode: "both",
+      defaultValue: "",
+      selectOnFocus: true,
+      ...props,
+      translations: {
+        input: "editable input",
+        edit: "edit",
+        submit: "submit",
+        cancel: "cancel",
+        ...props.translations
+      }
+    };
+  },
+  initialState({
+    prop
+  }) {
+    const edit = prop("edit") || prop("defaultEdit");
+    return edit ? "edit" : "preview";
+  },
+  entry: ["focusInputIfNeeded"],
   context: {
     "isEditControlled": false,
     "isSubmitEvent": false,
     "isEditControlled": false,
     "isEditControlled": false
   },
+  watch({
+    track,
+    action,
+    context,
+    prop
+  }) {
+    track([() => context.get("value")], () => {
+      action(["syncInputValue"]);
+    });
+    track([() => prop("edit")], () => {
+      action(["toggleEditing"]);
+    });
+  },
   on: {
     "VALUE.SET": {
-      actions: "setValue"
+      actions: ["setValue"]
     }
   },
   on: {
@@ -31,7 +66,6 @@ const fetchMachine = createMachine({
   },
   states: {
     preview: {
-      // https://bugzilla.mozilla.org/show_bug.cgi?id=559561
       entry: ["blurInputIfNeeded"],
       on: {
         "CONTROLLED.EDIT": {
@@ -48,7 +82,7 @@ const fetchMachine = createMachine({
       }
     },
     edit: {
-      activities: ["trackInteractOutside"],
+      effects: ["trackInteractOutside"],
       on: {
         "CONTROLLED.PREVIEW": [{
           cond: "isSubmitEvent",
@@ -74,6 +108,166 @@ const fetchMachine = createMachine({
         }]
       }
     }
+  },
+  implementations: {
+    guards: {
+      isEditControlled: ({
+        prop
+      }) => prop("edit") != undefined,
+      isSubmitEvent: ({
+        event
+      }) => event.previousEvent?.type === "SUBMIT"
+    },
+    effects: {
+      trackInteractOutside({
+        send,
+        scope,
+        prop
+      }) {
+        return trackInteractOutside(dom.getInputEl(scope), {
+          exclude(target) {
+            const ignore = [dom.getCancelTriggerEl(scope), dom.getSubmitTriggerEl(scope)];
+            return ignore.some(el => contains(el, target));
+          },
+          onFocusOutside: prop("onFocusOutside"),
+          onPointerDownOutside: prop("onPointerDownOutside"),
+          onInteractOutside(event) {
+            prop("onInteractOutside")?.(event);
+            if (event.defaultPrevented) return;
+            const {
+              focusable
+            } = event.detail;
+            send({
+              type: computed("submitOnBlur") ? "SUBMIT" : "CANCEL",
+              src: "interact-outside",
+              focusable
+            });
+          }
+        });
+      }
+    },
+    actions: {
+      restoreFocus({
+        event,
+        scope,
+        prop
+      }) {
+        if (event.focusable) return;
+        raf(() => {
+          const finalEl = prop("finalFocusEl")?.() ?? dom.getEditTriggerEl(scope);
+          finalEl?.focus({
+            preventScroll: true
+          });
+        });
+      },
+      clearValue({
+        context
+      }) {
+        context.set("value", "");
+      },
+      focusInputIfNeeded({
+        action,
+        prop
+      }) {
+        const edit = prop("edit") || prop("defaultEdit");
+        if (!edit) return;
+        action(["focusInput"]);
+      },
+      focusInput({
+        scope,
+        prop
+      }) {
+        raf(() => {
+          const inputEl = dom.getInputEl(scope);
+          if (!inputEl) return;
+          if (prop("selectOnFocus")) {
+            inputEl.select();
+          } else {
+            inputEl.focus({
+              preventScroll: true
+            });
+          }
+        });
+      },
+      invokeOnCancel({
+        prop,
+        context
+      }) {
+        const prev = context.get("previousValue");
+        prop("onValueRevert")?.({
+          value: prev
+        });
+      },
+      invokeOnSubmit({
+        prop,
+        context
+      }) {
+        const value = context.get("value");
+        prop("onValueCommit")?.({
+          value
+        });
+      },
+      invokeOnEdit({
+        prop
+      }) {
+        prop("onEditChange")?.({
+          edit: true
+        });
+      },
+      invokeOnPreview({
+        prop
+      }) {
+        prop("onEditChange")?.({
+          edit: false
+        });
+      },
+      toggleEditing({
+        prop,
+        send,
+        event
+      }) {
+        send({
+          type: prop("edit") ? "CONTROLLED.EDIT" : "CONTROLLED.PREVIEW",
+          previousEvent: event
+        });
+      },
+      syncInputValue({
+        context,
+        scope
+      }) {
+        const inputEl = dom.getInputEl(scope);
+        if (!inputEl) return;
+        setElementValue(inputEl, context.get("value"));
+      },
+      setValue({
+        context,
+        prop,
+        event
+      }) {
+        const max = prop("maxLength");
+        const current = event.value;
+        const value = max != null ? current.slice(0, max) : current;
+        context.set("value", value);
+      },
+      setPreviousValue({
+        context
+      }) {
+        const value = context.get("value");
+        context.set("previousValue", value);
+      },
+      revertValue({
+        context
+      }) {
+        const value = context.get("previousValue");
+        if (!value) return;
+        context.set("value", value);
+      },
+      blurInputIfNeeded({
+        scope
+      }) {
+        dom.getInputEl(scope)?.blur();
+      }
+    }
   }
 }, {
   actions: {