Svelte menu + styles fix for Svelte

examples/svelte-ts/src/pages/Accordion.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
   import * as accordion from "@zag-js/accordion"
-  import { useMachine, normalizeProps, zag } from "@zag-js/svelte"
+  import { useMachine, normalizeProps, spreadRest } from "@zag-js/svelte"
   import StateVisualizer from "../components/state-visualizer.svelte"
   import Toolbar from "../components/toolbar.svelte"
 
@@ -16,21 +16,21 @@
 </script>
 
 <main class="accordion">
-  <div use:zag={api.rootProps.handlers} {...api.rootProps.attributes}>
+  <div use:spreadRest={api.rootProps} {...api.rootProps.attributes}>
     {#each accordionData as item}
-      <div use:zag={api.getItemProps({ value: item.id }).handlers} {...api.getItemProps({ value: item.id }).attributes}>
+      <div use:spreadRest={api.getItemProps({ value: item.id })} {...api.getItemProps({ value: item.id }).attributes}>
         <h3>
           <button
             data-testid={`${item.id}:trigger`}
-            use:zag={api.getTriggerProps({ value: item.id }).handlers}
+            use:spreadRest={api.getTriggerProps({ value: item.id })}
             {...api.getTriggerProps({ value: item.id }).attributes}
           >
             {item.label}
           </button>
         </h3>
         <div
           data-testid={`${item.id}:content`}
-          use:zag={api.getContentProps({ value: item.id }).handlers}
+          use:spreadRest={api.getContentProps({ value: item.id })}
           {...api.getContentProps({ value: item.id }).attributes}
         >
           Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore

examples/svelte-ts/src/pages/Menu.svelte

@@ -0,0 +1,48 @@
+<script lang="ts">
+  import * as menu from "@zag-js/menu"
+  import { normalizeProps, useMachine, spreadRest } from "@zag-js/svelte"
+  import { writable } from "svelte/store"
+
+  import StateVisualizer from "../components/state-visualizer.svelte"
+  import Toolbar from "../components/toolbar.svelte"
+
+  const [state, send] = useMachine(menu.machine({ id: "accordion" }))
+
+  const api = writable(menu.connect($state, send, normalizeProps))
+
+  state.subscribe((next) => {
+    // console.log(api.positionerProps.attributes)
+    api.set(menu.connect(next, send, normalizeProps))
+  })
+</script>
+
+<main>
+  <div>
+    <button {...$api.triggerProps.attributes} use:spreadRest={$api.triggerProps}>
+      Actions <span aria-hidden>▾</span>
+    </button>
+
+    <div {...$api.positionerProps.attributes} use:spreadRest={$api.positionerProps}>
+      <ul {...$api.contentProps.attributes} use:spreadRest={$api.contentProps}>
+        <li {...$api.getItemProps({ id: "edit" }).attributes} use:spreadRest={$api.getItemProps({ id: "edit" })}>
+          Edit
+        </li>
+        <li
+          {...$api.getItemProps({ id: "duplicate" }).attributes}
+          use:spreadRest={$api.getItemProps({ id: "duplicate" })}
+        >
+          Duplicate
+        </li>
+        <li {...$api.getItemProps({ id: "delete" }).attributes} use:spreadRest={$api.getItemProps({ id: "delete" })}>
+          Delete
+        </li>
+        <li {...$api.getItemProps({ id: "export" }).attributes} use:spreadRest={$api.getItemProps({ id: "export" })}>
+          Export...
+        </li>
+      </ul>
+    </div>
+  </div>
+</main>
+<Toolbar>
+  <StateVisualizer state={$state} />
+</Toolbar>

examples/svelte-ts/src/pages/Select.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
   import * as select from "@zag-js/select"
-  import { zag, useMachine, normalizeProps } from "@zag-js/svelte"
+  import { spreadRest, useMachine, normalizeProps } from "@zag-js/svelte"
   import StateVisualizer from "../components/state-visualizer.svelte"
   import Toolbar from "../components/toolbar.svelte"
 
@@ -22,20 +22,20 @@
 <div style="min-width: 50%;">
   <div>
     <!-- svelte-ignore a11y-label-has-associated-control -->
-    <label use:zag={api.labelProps.handlers} {...api.labelProps.attributes}>Label</label>
-    <button use:zag={api.triggerProps.handlers} {...api.triggerProps.attributes}>
+    <label use:spreadRest={api.labelProps} {...api.labelProps.attributes}>Label</label>
+    <button use:spreadRest={api.triggerProps} {...api.triggerProps.attributes}>
       {#if !api.selectedOption}
         <span>Select option</span>
       {:else}
         {api.selectedOption.label}
       {/if}
     </button>
   </div>
-  <div use:zag={api.positionerProps.handlers} {...api.positionerProps.attributes}>
-    <ul use:zag={api.contentProps.handlers} {...api.contentProps.attributes}>
+  <div use:spreadRest={api.positionerProps} {...api.positionerProps.attributes}>
+    <ul use:spreadRest={api.contentProps} {...api.contentProps.attributes}>
       {#each selectData as { label, value }}
         <li
-          use:zag={api.getOptionProps({ label, value }).handlers}
+          use:spreadRest={api.getOptionProps({ label, value })}
           {...api.getOptionProps({ label, value }).attributes}
         >
           <span>{label}</span>

examples/svelte-ts/src/router/routes.ts

@@ -1,6 +1,7 @@
 import Select from "../pages/Select.svelte"
 import Accordion from "../pages/Accordion.svelte"
 import Main from "../pages/Main.svelte"
+import Menu from "../pages/Menu.svelte"
 
 export default [
   {
@@ -18,4 +19,9 @@ export default [
     label: "Select",
     component: Select,
   },
+  {
+    path: "menu",
+    label: "Menu",
+    component: Menu,
+  },
 ]

packages/frameworks/svelte/src/get-attributes-and-handlers.ts

@@ -3,15 +3,18 @@ import type { Dict } from "@zag-js/core/src/types"
 export function getAttributesAndHandlers(props: Dict) {
   const handlers: Dict = {}
   const attributes: Dict = {}
+  let styles: Dict = {}
 
   Object.keys(props).forEach((key) => {
     // this is probably not a safe way to distiguish handlers
-    if (key.startsWith("on")) {
+    if (key === "style") {
+      styles = props[key]
+    } else if (key.startsWith("on")) {
       handlers[key] = props[key]
     } else {
       attributes[key] = props[key]
     }
   })
 
-  return { handlers, attributes }
+  return { handlers, attributes, styles }
 }

packages/frameworks/svelte/src/index.ts

@@ -2,4 +2,4 @@ export { mergeProps, deepMerge } from "@zag-js/core"
 export type { ContextFrom, EventFrom, StateFrom } from "@zag-js/core"
 export * from "./use-machine"
 export * from "./normalize-props"
-export * from "./zag"
+export * from "./spread-rest"

packages/frameworks/svelte/src/normalize-attributes.ts

@@ -1,25 +1,10 @@
 import type { Dict } from "@zag-js/core/src/types"
 
-function camelCaseToDash(str: string) {
-  return str.replace(/([a-z0-9]|(?=[A-Z]))([A-Z])/g, "$1-$2").toLowerCase()
-}
-
-function styleObjectToString(styleObject: Dict) {
-  return Object.entries(styleObject)
-    .filter(([_, value]) => value !== undefined)
-    .map(([key, value]) => `${camelCaseToDash(key)}: ${value}${typeof value === "number" ? "px" : ""}`)
-    .join("; ")
-}
-
 export function normalizeAttributes(attributes: Dict) {
   const normalizedAttributes: Dict = {}
 
   for (const [key, value] of Object.entries(attributes)) {
-    if (key === "style") {
-      normalizedAttributes[key] = styleObjectToString(value)
-      // filter out falsy values as html attributes like undefined are still applied
-      // even if their value is falsy
-    } else if (value !== undefined && value !== null && value !== false) {
+    if (value !== undefined && value !== null && value !== false) {
       normalizedAttributes[key] = value
     }
   }

packages/frameworks/svelte/src/normalize-props.ts

@@ -5,13 +5,26 @@ import { getAttributesAndHandlers } from "./get-attributes-and-handlers"
 import { normalizeAttributes } from "./normalize-attributes"
 import { normalizeHandlers } from "./normalize-handlers"
 
+function camelCaseToDash(str: string) {
+  return str.replace(/([a-z0-9]|(?=[A-Z]))([A-Z])/g, "$1-$2").toLowerCase()
+}
+
+function styleObjectToString(styleObject: Dict) {
+  const transformed = Object.entries(styleObject)
+    .filter(([_, value]) => value !== undefined)
+    .map(([key, value]) => `${camelCaseToDash(key)}: ${value}${typeof value === "number" ? "px" : ""}`)
+    .join("; ")
+  return transformed
+}
+
 export const normalizeProps = createNormalizer<PropTypes<SplitArgs<Dict>>>((v: Dict) => {
-  const { handlers, attributes } = getAttributesAndHandlers(v)
+  const { handlers, attributes, styles } = getAttributesAndHandlers(v)
   const normalizedAttributes = normalizeAttributes(attributes) as SplitArgs["attributes"]
   const normalizedHandlers = normalizeHandlers(handlers) as SplitArgs["handlers"]
 
   return {
     handlers: normalizedHandlers,
     attributes: normalizedAttributes,
+    styles: styleObjectToString(styles),
   }
 })

packages/frameworks/svelte/src/spread-rest.ts

@@ -0,0 +1,23 @@
+export function spreadRest(node: HTMLElement, unspreadables: Record<string, any>) {
+  const { handlers, styles } = unspreadables
+  Object.entries(handlers).forEach(([key, value]) => {
+    node.addEventListener(key, value as EventListener)
+  })
+
+  return {
+    update() {
+      const splitStyles = styles.split(";")
+
+      splitStyles.forEach((singleProperty: string) => {
+        const [key, value] = singleProperty.split(":")
+
+        node.style.setProperty(key, value)
+      })
+    },
+    destroy() {
+      Object.entries(handlers).forEach(([key, value]) => {
+        node.removeEventListener(key, value as EventListener)
+      })
+    },
+  }
+}

packages/frameworks/svelte/src/types.ts

@@ -1,4 +1,5 @@
 export type SplitArgs<T = any> = {
   attributes: T
+  styles: T
   handlers: Record<string, EventListener>
 }