@window-splitter/svelte 0.8.4

package/src/__snapshots__/SvelteWindowSplitter.test.ts.snap

@@ -0,0 +1,54 @@
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+
+exports[`Autosave > localStorage 1`] = `
+[
+  {
+    "collapseIsControlled": false,
+    "collapsedSize": {
+      "type": "pixel",
+      "value": "0",
+    },
+    "currentValue": {
+      "type": "percent",
+      "value": "0.70081967213114754098",
+    },
+    "id": "1",
+    "max": "1fr",
+    "min": {
+      "type": "pixel",
+      "value": "0",
+    },
+    "onCollapseChange": {},
+    "onResize": {},
+    "type": "panel",
+  },
+  {
+    "id": "resizer",
+    "size": {
+      "type": "pixel",
+      "value": "10",
+    },
+    "type": "handle",
+  },
+  {
+    "collapseIsControlled": false,
+    "collapsedSize": {
+      "type": "pixel",
+      "value": "0",
+    },
+    "currentValue": {
+      "type": "percent",
+      "value": "0.29918032786885245902",
+    },
+    "id": "2",
+    "max": "1fr",
+    "min": {
+      "type": "pixel",
+      "value": "0",
+    },
+    "onCollapseChange": {},
+    "onResize": {},
+    "type": "panel",
+  },
+]
+`;

package/src/lib/Panel.svelte

@@ -0,0 +1,178 @@
+<script lang="ts">
+  import type { SharedPanelProps } from "@window-splitter/interface";
+  import { getContext } from "svelte";
+  import {
+    initializePanel,
+    isPanelData,
+    haveConstraintsChangedForPanel,
+    getPanelPercentageSize,
+    getPanelPixelSize,
+  } from "@window-splitter/state";
+  import type {
+    PanelData,
+    GroupMachineContextValue,
+    SendFn,
+    Unit,
+  } from "@window-splitter/state";
+  import { getPanelDomAttributes } from "@window-splitter/interface";
+  import type { HTMLAttributes } from "svelte/elements";
+
+  export { PanelHandle } from "@window-splitter/interface";
+
+  interface Props
+    extends SharedPanelProps<boolean>,
+      HTMLAttributes<HTMLDivElement> {}
+
+  let {
+    children,
+    min,
+    max,
+    id: _id,
+    collapsible,
+    collapsed,
+    collapsedSize,
+    onCollapseChange,
+    collapseAnimation,
+    onResize,
+    defaultCollapsed,
+    default: defaultSize,
+    isStaticAtRest,
+    ...attrs
+  }: Props = $props();
+
+  const defaultId = $props.id();
+  const id = _id || defaultId;
+  const send = getContext<SendFn>("send");
+  const state = getContext<GroupMachineContextValue>("state");
+
+  const initPanel = (): PanelData =>
+    initializePanel({
+      id,
+      min,
+      max,
+      collapsible,
+      collapsed,
+      collapsedSize,
+      onCollapseChange: { current: onCollapseChange },
+      collapseAnimation,
+      onResize: { current: onResize },
+      defaultCollapsed,
+      default: defaultSize,
+      isStaticAtRest,
+    });
+
+  const isPrerender = getContext<{ current: boolean }>("isPrerender");
+  const panelData = () => {
+    const item = state?.items.find((i) => i.id === id);
+    if (!item || !isPanelData(item)) return undefined;
+    return item;
+  };
+
+  let dynamicPanelIsMounting = false;
+
+  if (panelData()) {
+    send({
+      type: "rebindPanelCallbacks",
+      data: {
+        id,
+        onCollapseChange: { current: onCollapseChange },
+        onResize: { current: onResize },
+      },
+    });
+  } else {
+    if (isPrerender.current) {
+      send({ type: "registerPanel", data: initPanel() });
+    } else {
+      dynamicPanelIsMounting = true;
+    }
+  }
+
+  const contraintChanged = $derived(
+    !dynamicPanelIsMounting &&
+      haveConstraintsChangedForPanel(initPanel(), panelData())
+  );
+
+  $effect(() => {
+    if (!contraintChanged) return;
+    send({ type: "updateConstraints", data: initPanel() });
+  });
+
+  const dynamicPanelData = initPanel();
+
+  $effect(() => {
+    if (!dynamicPanelIsMounting) return;
+
+    const groupElement = document.getElementById(state.groupId);
+    if (!groupElement) return;
+
+    const panelElement = document.getElementById(id);
+    if (!panelElement) return;
+
+    const order = Array.from(groupElement.children).indexOf(panelElement);
+    if (typeof order !== "number") return;
+
+    send({
+      type: "registerDynamicPanel",
+      data: { ...dynamicPanelData, order },
+    });
+    dynamicPanelIsMounting = false;
+  });
+
+  $effect(() => () => {
+    requestAnimationFrame(() => {
+      send({ type: "unregisterPanel", id });
+    });
+  });
+
+  const isControlledCollapse = $derived(panelData()?.collapseIsControlled);
+
+  $effect(() => {
+    if (!isControlledCollapse) return;
+
+    if (collapsed) {
+      send?.({ type: "collapsePanel", panelId: id, controlled: true });
+    } else {
+      send?.({ type: "expandPanel", panelId: id, controlled: true });
+    }
+  });
+
+  const domAttributes = () => {
+    const currentPanel = panelData();
+
+    return getPanelDomAttributes({
+      groupId: state.groupId,
+      id,
+      collapsible: currentPanel?.collapsible,
+      collapsed: currentPanel?.collapsed,
+    });
+  };
+
+  export const getId = () => id;
+  export const collapse = () => {
+    if (!panelData()?.collapsible) return;
+    send({ type: "collapsePanel", panelId: id, controlled: true });
+  };
+  export const isCollapsed = () =>
+    Boolean(panelData()?.collapsible && panelData()?.collapsed);
+  export const expand = () => {
+    if (!panelData()?.collapsible) return;
+    send({ type: "expandPanel", panelId: id, controlled: true });
+  };
+  export const isExpanded = () =>
+    Boolean(panelData()?.collapsible && !panelData()?.collapsed);
+  export const getPixelSize = () => getPanelPixelSize(state, id);
+  export const setSize = (size: Unit) => {
+    send({ type: "setPanelPixelSize", panelId: id, size });
+  };
+  export const getPercentageSize = () => getPanelPercentageSize(state, id);
+</script>
+
+<div
+  {...attrs}
+  {...domAttributes()}
+  style:min-width={0}
+  style:min-height={0}
+  style:overflow="hidden"
+>
+  {@render children?.()}
+</div>

package/src/lib/PanelGroup.svelte

@@ -0,0 +1,159 @@
+<script lang="ts">
+  import type { SharedPanelGroupProps } from "@window-splitter/interface";
+  import { measureGroupChildren } from "@window-splitter/interface";
+  import {
+    buildTemplate,
+    groupMachine,
+    prepareSnapshot,
+    prepareItems,
+    getPanelGroupPixelSizes,
+    getPanelGroupPercentageSizes,
+    isPanelData,
+  } from "@window-splitter/state";
+  import type { GroupMachineContextValue, Unit } from "@window-splitter/state";
+  import { setContext } from "svelte";
+  import type { HTMLAttributes } from "svelte/elements";
+
+  export { PanelGroupHandle } from "@window-splitter/interface";
+
+  interface Props
+    extends SharedPanelGroupProps,
+      HTMLAttributes<HTMLDivElement> {
+    id: string;
+  }
+
+  let {
+    children,
+    orientation = "horizontal",
+    autosaveStrategy = "localStorage",
+    autosaveId,
+    snapshot,
+    ...attrs
+  }: Props = $props();
+
+  if (
+    !snapshot &&
+    typeof window !== "undefined" &&
+    autosaveId &&
+    autosaveStrategy === "localStorage"
+  ) {
+    const localSnapshot = localStorage.getItem(autosaveId);
+
+    if (localSnapshot) {
+      snapshot = JSON.parse(localSnapshot) as GroupMachineContextValue;
+    }
+  }
+
+  const defaultId = $props.id();
+  const id = autosaveId || defaultId;
+
+  const [initialState, send, machineState] = groupMachine(
+    {
+      orientation,
+      groupId: id,
+      autosaveStrategy,
+      ...(snapshot ? prepareSnapshot(snapshot) : undefined),
+    },
+    (s) => {
+      if (!context) return;
+      updateContext(s);
+    }
+  );
+
+  const context = $state<GroupMachineContextValue>(initialState);
+  function updateContext(s: GroupMachineContextValue) {
+    for (const key in s) {
+      // eslint-disable-next-line @typescript-eslint/no-explicit-any
+      (context as any)[key] = (s as any)[key];
+    }
+  }
+
+  setContext("send", send);
+  setContext("state", context);
+  setContext("id", machineState);
+
+  const isPrerender = $state({ current: true });
+  setContext("isPrerender", isPrerender);
+  $effect(() => {
+    isPrerender.current = false;
+  });
+
+  let elementRef = $state<HTMLDivElement>();
+
+  $effect(() => {
+    const observer = new ResizeObserver(([entry]) => {
+      if (!entry) return;
+      if (entry.contentRect.width > 0 && entry.contentRect.height > 0) {
+        send({ type: "setSize", size: entry.contentRect });
+      }
+    });
+
+    if (elementRef) {
+      observer.observe(elementRef);
+    }
+
+    return () => observer.disconnect();
+  });
+
+  let childIds = $derived(context.items.map((i) => i.id).join(","));
+
+  $effect(() => {
+    // re-render when the childIds change
+    // eslint-disable-next-line @typescript-eslint/no-unused-expressions
+    childIds;
+    measureGroupChildren(id, (childrenSizes) => {
+      send({ type: "setActualItemsSize", childrenSizes });
+    });
+  });
+
+  let template = $derived(buildTemplate(context));
+
+  $effect(() => {
+    send({ type: "unlockGroup" });
+    return () => send({ type: "lockGroup" });
+  });
+
+  export const getId = () => id;
+  export const getPixelSizes = () => getPanelGroupPixelSizes(context);
+  export const getPercentageSizes = () => getPanelGroupPercentageSizes(context);
+  export const getTemplate = () =>
+    buildTemplate({ ...context, items: prepareItems(context) });
+  export const getState = () =>
+    machineState.current === "idle" ? "idle" : "dragging";
+  export const setSizes = (updates: Array<Unit>) => {
+    for (let index = 0; index < updates.length; index++) {
+      const item = context.items[index];
+      const update = updates[index];
+
+      if (item && isPanelData(item) && update) {
+        send({
+          type: "setPanelPixelSize",
+          panelId: item.id,
+          size: update,
+        });
+      }
+    }
+  };
+</script>
+
+<div
+  {...attrs}
+  data-panel-group-wrapper
+  bind:this={elementRef}
+  style:display="grid"
+  style:grid-template-columns={context.orientation === "horizontal"
+    ? template
+    : undefined}
+  style:grid-template-rows={context.orientation === "vertical"
+    ? template
+    : undefined}
+  {id}
+>
+  {@render children?.()}
+</div>
+
+<style>
+  :where([data-panel-group-wrapper]) {
+    height: 100%;
+  }
+</style>

package/src/lib/PanelResizer.svelte

@@ -0,0 +1,171 @@
+<script lang="ts">
+  import { getContext } from "svelte";
+  import {
+    getCursor,
+    getGroupSize,
+    initializePanelHandleData,
+    isPanelData,
+    isPanelHandle,
+    getCollapsiblePanelForHandleId,
+    haveConstraintsChangedForPanelHandle,
+  } from "@window-splitter/state";
+  import type {
+    SendFn,
+    GroupMachineContextValue,
+  } from "@window-splitter/state";
+  import type { SharedPanelResizerProps } from "@window-splitter/interface";
+  import {
+    getPanelResizerDomAttributes,
+    move,
+  } from "@window-splitter/interface";
+  import type { HTMLAttributes } from "svelte/elements";
+
+  interface Props
+    extends SharedPanelResizerProps,
+      HTMLAttributes<HTMLDivElement> {}
+
+  let {
+    size = "0px",
+    id: _id,
+    onDragStart,
+    onDrag,
+    onDragEnd,
+    disabled,
+    ...attrs
+  }: Props = $props();
+
+  const defaultId = $props.id();
+  const id = _id || defaultId;
+  const send = getContext<SendFn>("send");
+  const state = getContext<GroupMachineContextValue>("state");
+  const isPrerender = getContext<{ current: boolean }>("isPrerender");
+  const initHandle = () => initializePanelHandleData({ size, id });
+  const handleData = () => {
+    const item = state?.items.find((i) => i.id === id);
+    if (!item || !isPanelHandle(item)) return undefined;
+    return item;
+  };
+
+  let dynamicPanelHandleIsMounting = false;
+
+  if (!handleData()) {
+    if (isPrerender.current) {
+      send({ type: "registerPanelHandle", data: initHandle() });
+    } else {
+      dynamicPanelHandleIsMounting = true;
+    }
+  }
+
+  $effect(() => {
+    if (!dynamicPanelHandleIsMounting) return;
+
+    const groupElement = document.getElementById(state.groupId);
+    if (!groupElement) return;
+
+    const handleEl = document.getElementById(id);
+    if (!handleEl) return;
+
+    const order = Array.from(groupElement.children).indexOf(handleEl);
+    if (typeof order !== "number") return;
+
+    send({
+      type: "registerPanelHandle",
+      data: { ...initHandle(), order },
+    });
+    dynamicPanelHandleIsMounting = false;
+  });
+
+  const contraintChanged = $derived(
+    !dynamicPanelHandleIsMounting &&
+      haveConstraintsChangedForPanelHandle(initHandle(), handleData())
+  );
+
+  const dynamicPanelHandleData = initHandle();
+  $effect(() => {
+    if (!contraintChanged) return;
+    send({ type: "updateConstraints", data: dynamicPanelHandleData });
+  });
+
+  $effect(() => () => {
+    requestAnimationFrame(() => {
+      send({ type: "unregisterPanelHandle", id });
+    });
+  });
+
+  const { moveProps } = move({
+    onMoveStart: () => {
+      send({ type: "dragHandleStart", handleId: id });
+      onDragStart?.();
+      document.body.style.cursor = getCursor(state) || "auto";
+    },
+    onMove: (e) => {
+      send({ type: "dragHandle", handleId: id, value: e });
+      onDrag?.();
+    },
+    onMoveEnd: () => {
+      send({ type: "dragHandleEnd", handleId: id });
+      onDragEnd?.();
+      document.body.style.cursor = "auto";
+    },
+  });
+
+  const itemIndex = 1;
+  const panelAttributes = () => {
+    const panelBeforeHandle = state?.items[itemIndex - 1];
+
+    if (!panelBeforeHandle || !isPanelData(panelBeforeHandle)) return { id };
+
+    return getPanelResizerDomAttributes({
+      groupId: state.groupId,
+      id,
+      orientation: state.orientation,
+      isDragging: state.activeDragHandleId === id,
+      activeDragHandleId: state.activeDragHandleId,
+      disabled: disabled,
+      controlsId: panelBeforeHandle.id,
+      min: panelBeforeHandle.min,
+      max: panelBeforeHandle.max,
+      currentValue: panelBeforeHandle.currentValue,
+      groupSize: getGroupSize(state),
+    });
+  };
+  const getDimensions = () => {
+    const handle = state.items.find((item) => item.id === id);
+    if (!handle || !isPanelHandle(handle)) return {};
+    return state.orientation === "horizontal"
+      ? { width: `${handle.size.value.toNumber()}px`, height: "100%" }
+      : { height: `${handle.size.value.toNumber()}px`, width: "100%" };
+  };
+  const onKeyDown = (e: KeyboardEvent) => {
+    try {
+      const collapsiblePanel = getCollapsiblePanelForHandleId(state, id);
+
+      if (e.key === "Enter" && collapsiblePanel) {
+        if (collapsiblePanel.collapsed) {
+          send({ type: "expandPanel", panelId: collapsiblePanel.id });
+        } else {
+          send({ type: "collapsePanel", panelId: collapsiblePanel.id });
+        }
+      }
+    } catch {
+      //
+    }
+  };
+</script>
+
+<!-- svelte-ignore a11y_no_noninteractive_tabindex -->
+<div
+  {...attrs}
+  {...panelAttributes()}
+  onpointerdown={disabled ? undefined : moveProps.onPointerDown}
+  onkeydown={disabled
+    ? undefined
+    : (e) => {
+        moveProps.onKeyDown(e);
+        onKeyDown(e);
+      }}
+  tabindex={disabled ? -1 : 0}
+  style:cursor={getCursor(state)}
+  style:width={getDimensions().width}
+  style:height={getDimensions().height}
+></div>

package/src/lib/index.ts

@@ -0,0 +1,3 @@
+export * from "./Panel.svelte";
+export * from "./PanelGroup.svelte";
+export * from "./PanelResizer.svelte";

package/src/stories/Autosave.svelte

@@ -0,0 +1,52 @@
+<script module>
+  import PanelGroup from "../lib/PanelGroup.svelte";
+  import Panel from "../lib/Panel.svelte";
+  import PanelResizer from "../lib/PanelResizer.svelte";
+
+  let panelGroup;
+
+  /** @type {import("@window-splitter/interface").PanelGroupHandle} */
+  export const handle = {
+    getId: () => "panel-group",
+    getTemplate: () => panelGroup.getTemplate(),
+    getState: () => panelGroup.getState(),
+    getPixelSizes: () => panelGroup.getPixelSizes(),
+    getPercentageSizes: () => panelGroup.getPercentageSizes(),
+    setSizes: (sizes) => panelGroup.setSizes(sizes),
+  };
+</script>
+
+<PanelGroup
+  bind:this={panelGroup}
+  class="panel-group"
+  autosaveId="autosave-example-svelte"
+>
+  <Panel id="1" class="panel">1</Panel>
+  <PanelResizer id="resizer" class="panel-resizer" size="10px" />
+  <Panel id="2" class="panel">2</Panel>
+</PanelGroup>
+
+<style>
+  :global(.panel-group) {
+    border: 1px solid rgba(0, 0, 0, 0.3);
+    background: rgba(0, 0, 0, 0.1);
+    border-radius: 12px;
+    box-sizing: border-box;
+    width: 500px;
+  }
+
+  :global(.panel) {
+    height: 100%;
+    width: 100%;
+    padding: 20px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    overflow: hidden;
+    box-sizing: border-box;
+  }
+
+  :global(.panel-resizer) {
+    background: red;
+  }
+</style>

package/src/stories/AutosaveCollapsible.svelte

@@ -0,0 +1,65 @@
+<script>
+  import PanelGroup from "../lib/PanelGroup.svelte";
+  import Panel from "../lib/Panel.svelte";
+  import PanelResizer from "../lib/PanelResizer.svelte";
+
+  const { onCollapseChange, handle: handleProp } = $props();
+
+  let panelGroup;
+
+  if (handleProp) {
+    /** @type {import("@window-splitter/interface").PanelGroupHandle} */
+    handleProp.current = {
+      getId: () => "panel-group",
+      getTemplate: () => panelGroup.getTemplate(),
+      getState: () => panelGroup.getState(),
+      getPixelSizes: () => panelGroup.getPixelSizes(),
+      getPercentageSizes: () => panelGroup.getPercentageSizes(),
+      setSizes: (sizes) => panelGroup.setSizes(sizes),
+    };
+  }
+</script>
+
+<PanelGroup
+  bind:this={panelGroup}
+  class="panel-group"
+  autosaveId="autosave-collapsible-svelte"
+>
+  <Panel
+    id="1"
+    collapsible
+    collapsedSize="100px"
+    {onCollapseChange}
+    min="140px"
+    class="panel"
+  >
+    Collapsible
+  </Panel>
+  <PanelResizer id="resizer" class="panel-resizer" size="10px" />
+  <Panel id="2" class="panel">Panel 2</Panel>
+</PanelGroup>
+
+<style>
+  :global(.panel-group) {
+    border: 1px solid rgba(0, 0, 0, 0.3);
+    background: rgba(0, 0, 0, 0.1);
+    border-radius: 12px;
+    box-sizing: border-box;
+    width: 500px;
+  }
+
+  :global(.panel) {
+    height: 100%;
+    width: 100%;
+    padding: 20px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    overflow: hidden;
+    box-sizing: border-box;
+  }
+
+  :global(.panel-resizer) {
+    background: red;
+  }
+</style>