feat: improve support for svelte

.changeset/six-humans-agree.md

@@ -0,0 +1,6 @@
+---
+"@zag-js/svelte": patch
+"@zag-js/types": patch
+---
+
+Fix handlers and attributes types for `normalizeProps`

examples/svelte-kit/.eslintignore

@@ -0,0 +1,13 @@
+.DS_Store
+node_modules
+/build
+/.svelte-kit
+/package
+.env
+.env.*
+!.env.example
+
+# Ignore files for PNPM, NPM and YARN
+pnpm-lock.yaml
+package-lock.json
+yarn.lock

examples/svelte-kit/.eslintrc.cjs

@@ -0,0 +1,20 @@
+module.exports = {
+  root: true,
+  parser: "@typescript-eslint/parser",
+  extends: ["eslint:recommended", "plugin:@typescript-eslint/recommended", "prettier"],
+  plugins: ["svelte3", "@typescript-eslint"],
+  ignorePatterns: ["*.cjs"],
+  overrides: [{ files: ["*.svelte"], processor: "svelte3/svelte3" }],
+  settings: {
+    "svelte3/typescript": () => require("typescript"),
+  },
+  parserOptions: {
+    sourceType: "module",
+    ecmaVersion: 2020,
+  },
+  env: {
+    browser: true,
+    es2017: true,
+    node: true,
+  },
+}

examples/svelte-kit/.gitignore

@@ -0,0 +1,11 @@
+.DS_Store
+node_modules
+/build
+/dist
+/.svelte-kit
+/package
+.env
+.env.*
+!.env.example
+vite.config.js.timestamp-*
+vite.config.ts.timestamp-*

examples/svelte-kit/README.md

@@ -0,0 +1,47 @@
+# TypeScript Svelte example
+
+## Developing
+
+Once you've created a project and installed dependencies with `npm install` (or `pnpm install` or `yarn`), start a
+development server:
+
+```bash
+npm run dev
+
+# or start the server and open the app in a new browser tab
+npm run dev -- --open
+```
+
+Everything inside `src/lib` is part of your library, everything inside `src/routes` can be used as a showcase or preview
+app.
+
+## Building
+
+To build your library:
+
+```bash
+npm run package
+```
+
+To create a production version of your showcase app:
+
+```bash
+npm run build
+```
+
+You can preview the production build with `npm run preview`.
+
+> To deploy your app, you may need to install an [adapter](https://kit.svelte.dev/docs/adapters) for your target
+> environment.
+
+## Publishing
+
+Go into the `package.json` and give your package the desired name through the `"name"` option. Also consider adding a
+`"license"` field and point it to a `LICENSE` file which you can create from a template (one popular option is the
+[MIT license](https://opensource.org/license/mit/)).
+
+To publish your library to [npm](https://www.npmjs.com):
+
+```bash
+npm publish
+```

examples/svelte-kit/package.json

@@ -0,0 +1,106 @@
+{
+  "name": "svelte-kit",
+  "version": "0.0.1",
+  "private": true,
+  "scripts": {
+    "dev": "vite dev --port 3000",
+    "build": "vite build && npm run package",
+    "preview": "vite preview",
+    "package": "svelte-kit sync && svelte-package && publint",
+    "prepublishOnly": "npm run package",
+    "check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json",
+    "check:watch": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch",
+    "lint": "prettier --plugin-search-dir . --check . && eslint .",
+    "format": "prettier --plugin-search-dir . --write ."
+  },
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "svelte": "./dist/index.js"
+    }
+  },
+  "files": [
+    "dist"
+  ],
+  "peerDependencies": {
+    "svelte": "^3.54.0"
+  },
+  "dependencies": {
+    "@zag-js/accordion": "workspace:*",
+    "@zag-js/anatomy": "workspace:*",
+    "@zag-js/aria-hidden": "workspace:*",
+    "@zag-js/auto-resize": "workspace:*",
+    "@zag-js/carousel": "workspace:*",
+    "@zag-js/checkbox": "workspace:*",
+    "@zag-js/combobox": "workspace:*",
+    "@zag-js/core": "workspace:*",
+    "@zag-js/date-picker": "workspace:*",
+    "@zag-js/date-utils": "workspace:*",
+    "@zag-js/dialog": "workspace:*",
+    "@zag-js/dismissable": "workspace:*",
+    "@zag-js/dom-event": "workspace:*",
+    "@zag-js/dom-query": "workspace:*",
+    "@zag-js/editable": "workspace:*",
+    "@zag-js/element-rect": "workspace:*",
+    "@zag-js/element-size": "workspace:*",
+    "@zag-js/focus-scope": "workspace:*",
+    "@zag-js/focus-visible": "workspace:*",
+    "@zag-js/form-utils": "workspace:*",
+    "@zag-js/hover-card": "workspace:*",
+    "@zag-js/interact-outside": "workspace:*",
+    "@zag-js/live-region": "workspace:*",
+    "@zag-js/menu": "workspace:*",
+    "@zag-js/mutation-observer": "workspace:*",
+    "@zag-js/number-input": "workspace:*",
+    "@zag-js/number-utils": "workspace:*",
+    "@zag-js/numeric-range": "workspace:*",
+    "@zag-js/pagination": "workspace:*",
+    "@zag-js/pin-input": "workspace:*",
+    "@zag-js/popover": "workspace:*",
+    "@zag-js/popper": "workspace:*",
+    "@zag-js/pressable": "workspace:*",
+    "@zag-js/radio-group": "workspace:*",
+    "@zag-js/range-slider": "workspace:*",
+    "@zag-js/rating-group": "workspace:*",
+    "@zag-js/svelte": "workspace:*",
+    "@zag-js/rect-utils": "workspace:*",
+    "@zag-js/remove-scroll": "workspace:*",
+    "@zag-js/select": "workspace:*",
+    "@zag-js/shared": "workspace:*",
+    "@zag-js/slider": "workspace:*",
+    "@zag-js/splitter": "workspace:*",
+    "@zag-js/store": "workspace:*",
+    "@zag-js/tabbable": "workspace:*",
+    "@zag-js/tabs": "workspace:*",
+    "@zag-js/tags-input": "workspace:*",
+    "@zag-js/text-selection": "workspace:*",
+    "@zag-js/toast": "workspace:*",
+    "@zag-js/toggle": "workspace:*",
+    "@zag-js/tooltip": "workspace:*",
+    "@zag-js/transition": "workspace:*",
+    "@zag-js/types": "workspace:*",
+    "@zag-js/utils": "workspace:*",
+    "@zag-js/visually-hidden": "workspace:*"
+  },
+  "devDependencies": {
+    "@sveltejs/adapter-auto": "^2.0.0",
+    "@sveltejs/kit": "^1.5.0",
+    "@sveltejs/package": "^2.0.0",
+    "@typescript-eslint/eslint-plugin": "^5.45.0",
+    "@typescript-eslint/parser": "^5.45.0",
+    "eslint": "^8.28.0",
+    "eslint-config-prettier": "^8.5.0",
+    "eslint-plugin-svelte3": "^4.0.0",
+    "prettier": "^2.8.0",
+    "prettier-plugin-svelte": "^2.8.1",
+    "publint": "^0.1.9",
+    "svelte": "^3.54.0",
+    "svelte-check": "^3.0.1",
+    "tslib": "^2.4.1",
+    "typescript": "^4.9.3",
+    "vite": "^4.0.0"
+  },
+  "svelte": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "type": "module"
+}

examples/svelte-kit/src/app.d.ts

@@ -0,0 +1,12 @@
+// See https://kit.svelte.dev/docs/types#app
+// for information about these interfaces
+declare global {
+  namespace App {
+    // interface Error {}
+    // interface Locals {}
+    // interface PageData {}
+    // interface Platform {}
+  }
+}
+
+export {}

examples/svelte-kit/src/app.html

@@ -0,0 +1,12 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <link rel="icon" href="%sveltekit.assets%/favicon.png" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    %sveltekit.head%
+  </head>
+  <body>
+    <div>%sveltekit.body%</div>
+  </body>
+</html>

examples/svelte-kit/src/components/state-visualizer.svelte

@@ -0,0 +1,16 @@
+<script lang="ts">
+  import { stringifyState } from "../../../../shared/src/stringify-state"
+
+  export let label = "Visualizer"
+  export let omit: string[] = []
+  export let state: Record<string, any>
+</script>
+
+<div class="viz">
+  <pre dir="ltr">
+      <details open>
+        <summary> {label || "Visualizer"} </summary>
+        <div>{@html stringifyState(state, omit)}</div>
+      </details>
+    </pre>
+</div>

examples/svelte-kit/src/components/toolbar.svelte

@@ -0,0 +1,14 @@
+<script>
+  import { dataAttr } from "@zag-js/dom-query"
+</script>
+
+<div class="toolbar">
+  <nav>
+    <button> Visualizer </button>
+  </nav>
+  <div>
+    <div data-content data-active={dataAttr(true)}>
+      <slot />
+    </div>
+  </div>
+</div>

examples/svelte-kit/src/lib/index.js

@@ -0,0 +1 @@
+// Reexport your entry components here

examples/svelte-kit/src/routes/+layout.svelte

@@ -0,0 +1,26 @@
+<script>
+	import { page } from '$app/stores';
+	// The country-list package used in shared prevents us from using the zag-shared package, because it uses require, and sveltekit has issues with that
+	import '../../../../shared/src/style.css';
+	import { routesData } from '../../../../shared/src/routes';
+	import { dataAttr } from '@zag-js/dom-query';
+
+	const routes = routesData.sort((a, b) => a.label.localeCompare(b.label));
+</script>
+
+<svelte:head>
+	<title>Svelte Machines</title>
+</svelte:head>
+
+<div class="page">
+	<aside class="nav">
+		<header>Zagjs</header>
+
+		{#each routes as route}
+			<a data-active={dataAttr($page.url.pathname === route.path)} href={route.path}>
+				{route.label}
+			</a>
+		{/each}
+	</aside>
+	<slot />
+</div>

examples/svelte-kit/src/routes/+page.svelte

@@ -0,0 +1,16 @@
+<script>
+	import { routesData } from '../../../../shared/src/routes';
+
+	const routes = routesData.sort((a, b) => a.label.localeCompare(b.label));
+</script>
+
+<div class="index-nav">
+	<h2>Zag.js + React</h2>
+	<ul>
+		{#each routes as route}
+			<li>
+				<a href={route.path}>{route.label}</a>
+			</li>
+		{/each}
+	</ul>
+</div>

examples/svelte-kit/src/routes/accordion/+page.svelte

@@ -0,0 +1,49 @@
+<script>
+  import * as accordion from "@zag-js/accordion"
+  import { events, normalizeProps, useMachine } from "@zag-js/svelte"
+  import StateVisualizer from "../../components/state-visualizer.svelte"
+  import Toolbar from "../../components/toolbar.svelte"
+
+  const accordionData = [
+    { id: "home", label: "Home" },
+    { id: "about", label: "About" },
+    { id: "contact", label: "Contact" },
+  ]
+
+  const [state, send] = useMachine(accordion.machine({ id: "accordion" }))
+
+  $: api = accordion.connect($state, send, normalizeProps)
+</script>
+
+<main class="accordion">
+  <div use:events={api.rootProps.handlers} {...api.rootProps.attributes}>
+    {#each accordionData as item}
+      <div
+        use:events={api.getItemProps({ value: item.id }).handlers}
+        {...api.getItemProps({ value: item.id }).attributes}
+      >
+        <h3>
+          <button
+            data-testid={`${item.id}:trigger`}
+            use:events={api.getTriggerProps({ value: item.id }).handlers}
+            {...api.getTriggerProps({ value: item.id }).attributes}
+          >
+            {item.label}
+          </button>
+        </h3>
+        <div
+          data-testid={`${item.id}:content`}
+          use:events={api.getContentProps({ value: item.id }).handlers}
+          {...api.getContentProps({ value: item.id }).attributes}
+        >
+          Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore
+          magna aliqua.
+        </div>
+      </div>
+    {/each}
+  </div>
+</main>
+
+<Toolbar>
+  <StateVisualizer state={$state} />
+</Toolbar>