@pzerelles/headlessui-svelte 2.1.2-next.3 → 2.1.2-next.5

package/dist/utils/ElementOrComponent.svelte

@@ -1,26 +1,47 @@
-<script lang="ts" generics="TFeature extends RenderFeatures, TTag extends ElementType, TSlot, TValue">import { mergePropsAdvanced, RenderFeatures, RenderStrategy } from "./render.js";
-import Generic from "./Generic.svelte";
-let {
-  ourProps,
-  theirProps,
-  slots,
-  slot = slots,
-  defaultTag,
-  features,
-  visible = true,
-  name,
-  ref = $bindable(),
-  value = $bindable(),
-  checked = $bindable()
-} = $props();
-const featureFlags = $derived(features ?? RenderFeatures.None);
-const { static: isStatic = false, unmount = true, ...rest } = $derived(mergePropsAdvanced(theirProps, ourProps ?? {}));
-const render = $derived(
-  visible || featureFlags & RenderFeatures.Static && isStatic || featureFlags & RenderFeatures.RenderStrategy && !unmount
-);
-const hiddenProps = $derived(
-  !visible && !(featureFlags & RenderFeatures.Static) && featureFlags & RenderFeatures.RenderStrategy && !unmount ? { hidden: true, style: "display: none;" } : {}
-);
+<script lang="ts" generics="TFeature extends RenderFeatures, TTag extends ElementType, TSlot, TValue">
+  import type { ElementType, Props } from "./types.js"
+  import { mergePropsAdvanced, RenderFeatures, RenderStrategy, type PropsForFeatures } from "./render.js"
+  import Generic from "./Generic.svelte"
+  import type { ComponentProps } from "svelte"
+
+  let {
+    ourProps,
+    theirProps,
+    slots,
+    slot = slots,
+    defaultTag,
+    features,
+    visible = true,
+    name,
+    ref = $bindable(),
+    value = $bindable(),
+    checked = $bindable(),
+  }: {
+    ourProps?: Expand<Props<any, TSlot> & PropsForFeatures<TFeature>>
+    theirProps: Expand<{ as?: TTag } & Props<any, TSlot, any>>
+    slot?: TSlot
+    slots?: TSlot
+    defaultTag: ElementType
+    features?: TFeature
+    visible?: boolean
+    name: string
+    ref?: HTMLElement
+    value?: TValue
+    checked?: boolean
+  } = $props()
+
+  const featureFlags = $derived(features ?? RenderFeatures.None)
+  const { static: isStatic = false, unmount = true, ...rest } = $derived(mergePropsAdvanced(theirProps, ourProps ?? {}))
+  const render = $derived(
+    visible ||
+      (featureFlags & RenderFeatures.Static && isStatic) ||
+      (featureFlags & RenderFeatures.RenderStrategy && !unmount)
+  )
+  const hiddenProps = $derived(
+    !visible && !(featureFlags & RenderFeatures.Static) && featureFlags & RenderFeatures.RenderStrategy && !unmount
+      ? { hidden: true, style: "display: none;" }
+      : {}
+  )
 </script>
 
 {#if render}<Generic {...rest} {...hiddenProps} {slot} tag={defaultTag} {name} bind:ref bind:value bind:checked />{/if}

package/dist/utils/Generic.svelte

@@ -1,20 +1,32 @@
-<script lang="ts" generics="TTag extends keyof SvelteHTMLProps, TSlot, TValue">import { stateFromSlot } from "./state.js";
-let {
-  slot = {},
-  tag,
-  name,
-  ref = $bindable(),
-  value = $bindable(),
-  checked = $bindable(),
-  children,
-  as = tag,
-  unmount,
-  static: isStatic,
-  ...props
-} = $props();
-const resolvedClass = $derived(
-  typeof props.class === "function" ? props.class(slot) : props.class
-);
+<script lang="ts" generics="TTag extends keyof SvelteHTMLProps, TSlot, TValue">
+  import { stateFromSlot } from "./state.js"
+  import type { ElementType, Props, SvelteHTMLProps } from "./types.js"
+
+  let {
+    slot = {} as TSlot,
+    tag,
+    name,
+    ref = $bindable(),
+    value = $bindable(),
+    checked = $bindable(),
+    children,
+    as = tag as TTag,
+    unmount,
+    static: isStatic,
+    ...props
+  }: {
+    as?: TTag
+    slot: TSlot
+    tag: ElementType
+    name: string
+    ref?: HTMLElement
+    value?: TValue
+    checked?: boolean
+  } & Props<TTag, TSlot> = $props()
+
+  const resolvedClass = $derived(
+    typeof props.class === "function" ? props.class(slot) : (props.class as string | undefined)
+  )
 </script>
 
 {#if as === "svelte:fragment"}

package/dist/utils/StableCollection.svelte

@@ -1,43 +1,61 @@
-<script lang="ts" module>import { useId } from "../hooks/use-id.js";
-import { getContext, setContext } from "svelte";
-function createCollection() {
-  return {
-    /** @type {Map<string, Map<string, number>>} */
-    groups: /* @__PURE__ */ new Map(),
-    get(group, key) {
-      let list = this.groups.get(group);
-      if (!list) {
-        list = /* @__PURE__ */ new Map();
-        this.groups.set(group, list);
-      }
-      let renders = list.get(key) ?? 0;
-      list.set(key, renders + 1);
-      let index = Array.from(list.keys()).indexOf(key);
-      function release() {
-        let renders2 = list.get(key);
-        if (renders2 > 1) {
-          list.set(key, renders2 - 1);
-        } else {
-          list.delete(key);
+<script lang="ts" module>
+  import { useId } from "../hooks/use-id.js"
+  import { getContext, setContext, type Snippet } from "svelte"
+
+  type CollectionKey = string | symbol
+  type CollectionItem = [number, () => void]
+  type Collection = ReturnType<typeof createCollection>
+
+  function createCollection() {
+    return {
+      /** @type {Map<string, Map<string, number>>} */
+      groups: new Map(),
+
+      get(group: string, key: CollectionKey): CollectionItem {
+        let list = this.groups.get(group)
+        if (!list) {
+          list = new Map()
+          this.groups.set(group, list)
+        }
+
+        let renders = list.get(key) ?? 0
+        // FIXME: This is a side-effect during render. `release` is only called in
+        // an effect cleanup so we may never release if we had to render multiple
+        // times before commit e.g. when a sibling suspends.
+        list.set(key, renders + 1)
+
+        let index = Array.from(list.keys()).indexOf(key)
+        function release() {
+          let renders = list.get(key)
+          if (renders > 1) {
+            list.set(key, renders - 1)
+          } else {
+            list.delete(key)
+          }
         }
-      }
-      return [index, release];
+
+        return [index, release]
+      },
     }
-  };
-}
-export function useStableCollectionIndex(group) {
-  let collection = getContext("StableCollection");
-  if (!collection) throw new Error("You must wrap your component in a <StableCollection>");
-  let key = useId();
-  let [idx, cleanupIdx] = collection.get(group, key);
-  $effect(() => cleanupIdx);
-  return idx;
-}
+  }
+
+  export function useStableCollectionIndex(group: string) {
+    let collection = getContext<Collection>("StableCollection")
+    if (!collection) throw new Error("You must wrap your component in a <StableCollection>")
+
+    let key = useId()
+    let [idx, cleanupIdx] = collection.get(group, key)
+
+    $effect(() => cleanupIdx)
+    return idx
+  }
 </script>
 
-<script lang="ts">const collection = createCollection();
-setContext("StableCollection", collection);
-let { children } = $props();
+<script lang="ts">
+  const collection = createCollection()
+  setContext<Collection>("StableCollection", collection)
+
+  let { children }: { children: Snippet } = $props()
 </script>
 
 {#if children}{@render children()}{/if}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pzerelles/headlessui-svelte",
-  "version": "2.1.2-next.3",
+  "version": "2.1.2-next.5",
   "exports": {
     ".": {
       "types": "./dist/index.d.ts",
@@ -13,7 +13,7 @@
     "!dist/**/*.spec.*"
   ],
   "peerDependencies": {
-    "svelte": "^5.0.0-next.1"
+    "svelte": "^5.0.0-next.242"
   },
   "devDependencies": {
     "@changesets/cli": "^2.27.7",
@@ -21,15 +21,14 @@
     "@playwright/test": "^1.46.1",
     "@pzerelles/heroicons-svelte": "^2.1.5",
     "@sveltejs/adapter-auto": "^3.2.4",
-    "@sveltejs/kit": "^2.5.24",
+    "@sveltejs/kit": "^2.5.25",
     "@sveltejs/package": "^2.3.4",
-    "@sveltejs/vite-plugin-svelte": "^3.1.2",
+    "@sveltejs/vite-plugin-svelte": "4.0.0-next.6",
     "@testing-library/jest-dom": "^6.5.0",
     "@testing-library/svelte": "^5.2.1",
-    "@types/eslint": "^8.56.12",
+    "@types/eslint": "^9.6.1",
     "@types/node": "^20.16.1",
     "autoprefixer": "^10.4.20",
-    "clsx": "^2.1.1",
     "eslint": "^9.9.1",
     "eslint-config-prettier": "^9.1.0",
     "eslint-plugin-svelte": "^2.43.0",
@@ -39,20 +38,21 @@
     "postcss": "^8.4.41",
     "prettier": "^3.3.3",
     "prettier-plugin-svelte": "^3.2.6",
-    "prettier-plugin-tailwindcss": "^0.5.14",
-    "publint": "^0.1.16",
-    "svelte": "5.0.0-next.238",
+    "prettier-plugin-tailwindcss": "^0.6.6",
+    "publint": "^0.2.10",
+    "svelte": "^5.0.0-next.242",
     "svelte-check": "^3.8.6",
     "tailwindcss": "^3.4.10",
     "tslib": "^2.7.0",
     "typescript": "^5.5.4",
-    "typescript-eslint": "8.0.0-alpha.28",
+    "typescript-eslint": "^8.3.0",
     "vite": "^5.4.2",
     "vitest": "^2.0.5"
   },
   "dependencies": {
     "@floating-ui/core": "^1.6.7",
     "@floating-ui/dom": "^1.6.10",
+    "clsx": "^2.1.1",
     "esm-env": "^1.0.0",
     "nanoid": "^5.0.7"
   },