@window-splitter/solid 0.8.0

package/src/SolidWindowSplitter.test.tsx

@@ -0,0 +1,333 @@
+import { test, expect, describe, vi, afterEach } from "vitest";
+import { cleanup, fireEvent, render, waitFor } from "@solidjs/testing-library";
+import * as Cookies from "tiny-cookie";
+
+import { PanelGroupHandle, PanelHandle } from "@window-splitter/interface";
+import {
+  Autosave,
+  AutosaveCollapsible,
+  Collapsible,
+  ConditionalPanel,
+  Simple,
+  VerticalLayout,
+  DynamicConstraints,
+  AutosaveCookie,
+} from "./SolidWindowSplitter.stories.jsx";
+import { createTestUtils, dragHandle } from "@window-splitter/interface/test";
+
+const { expectTemplate, waitForMeasurement, waitForCondition } =
+  createTestUtils({ waitFor });
+
+afterEach(() => {
+  cleanup();
+});
+
+test("horizontal layout", async () => {
+  let handle: PanelGroupHandle | null = null!;
+
+  const { getByText } = render(() => (
+    <div style={{ width: "500px" }}>
+      <Simple handle={(v) => (handle = v)} />
+    </div>
+  ));
+
+  await waitForMeasurement(handle);
+
+  expect(getByText("Panel 1")).toBeInTheDocument();
+  expect(getByText("Panel 2")).toBeInTheDocument();
+
+  await expectTemplate(handle, "244px 10px 244px");
+
+  // Should respect the min
+  await dragHandle({ delta: 300 });
+  await expectTemplate(handle, "388px 10px 100px");
+});
+
+test("vertical layout", async () => {
+  let handle: PanelGroupHandle | null = null!;
+
+  const { getByText } = render(() => (
+    <div style={{ width: "500px" }}>
+      <VerticalLayout handle={(v) => (handle = v)} />
+    </div>
+  ));
+
+  await waitForMeasurement(handle);
+
+  expect(getByText("top")).toBeInTheDocument();
+  expect(getByText("middle")).toBeInTheDocument();
+  expect(getByText("bottom")).toBeInTheDocument();
+
+  await expectTemplate(handle, "96px 10px 108px 10px 96px");
+
+  // Should respect the min
+  await dragHandle({ delta: 100, orientation: "vertical" });
+  await expectTemplate(handle, "172px 10px 64px 10px 64px");
+});
+
+test("Conditional Panels", async () => {
+  let handle: PanelGroupHandle | null = null!;
+
+  const { getByText } = render(() => (
+    <div style={{ width: "500px" }}>
+      <ConditionalPanel handle={(v) => (handle = v)} />
+    </div>
+  ));
+
+  await waitForMeasurement(handle);
+  await expectTemplate(handle, "244px 10px 244px");
+
+  getByText("Expand").click();
+  await expectTemplate(handle, "244px 10px 134px 10px 100px");
+
+  getByText("Close").click();
+  await expectTemplate(handle, "244px 10px 244px");
+});
+
+test("Dynamic constraints", async () => {
+  let handle: PanelGroupHandle | null = null!;
+
+  const { getByText } = render(() => (
+    <div style={{ width: "1000px" }}>
+      <DynamicConstraints handle={(v) => (handle = v)} />
+    </div>
+  ));
+
+  await waitForMeasurement(handle);
+  await expectTemplate(handle, "100px 10px 178px 10px 700px");
+
+  getByText("Toggle Custom").click();
+  await expectTemplate(handle, "500px 10px 178px 10px 300px");
+
+  getByText("Toggle Custom").click();
+  await expectTemplate(handle, "400px 10px 178px 10px 400px");
+});
+
+describe("Autosave", () => {
+  test("localStorage", async () => {
+    localStorage.clear();
+
+    let handle: PanelGroupHandle | null = null!;
+
+    render(() => (
+      <div style={{ width: "500px" }}>
+        <Autosave handle={(v) => (handle = v)} />
+      </div>
+    ));
+
+    await waitForMeasurement(handle);
+    await expectTemplate(handle, "244px 10px 244px");
+
+    await dragHandle({ delta: 100 });
+    await expectTemplate(handle, "342px 10px 146px");
+
+    await waitForCondition(() =>
+      Boolean(localStorage.getItem("autosave-example-solid"))
+    );
+    const obj = JSON.parse(
+      localStorage.getItem("autosave-example-solid") || "{}"
+    );
+    expect(obj.items).toMatchSnapshot();
+  });
+
+  test("callback", async () => {
+    localStorage.clear();
+
+    let handle: PanelGroupHandle | null = null!;
+
+    const spy = vi.fn();
+
+    render(() => (
+      <div style={{ width: "500px" }}>
+        <AutosaveCollapsible
+          handle={(v) => (handle = v)}
+          onCollapseChange={spy}
+        />
+      </div>
+    ));
+
+    await dragHandle({ delta: -200 });
+    await expectTemplate(handle, "100px 10px 388px");
+    expect(spy).toHaveBeenCalledWith(true);
+
+    cleanup();
+
+    render(() => (
+      <div style={{ width: "500px" }}>
+        <AutosaveCollapsible
+          handle={(v) => (handle = v)}
+          onCollapseChange={spy}
+        />
+      </div>
+    ));
+
+    await expectTemplate(handle, "100px 10px 388px");
+    await dragHandle({ delta: 200 });
+    expect(spy).toHaveBeenCalledWith(false);
+  });
+
+  test("cookie", async () => {
+    // clear cookies
+    document.cookie = "test=; expires=Thu, 01 Jan 1970 00:00:00 GMT";
+
+    let handle: PanelGroupHandle | null = null!;
+
+    render(() => (
+      <div style={{ width: "502px" }}>
+        <AutosaveCookie handle={(v) => (handle = v)} />
+      </div>
+    ));
+
+    await waitForMeasurement(handle);
+    await expectTemplate(handle, "245px 10px 245px");
+
+    await dragHandle({ delta: 100 });
+    await expectTemplate(handle, "343px 10px 147px");
+
+    await waitForCondition(() =>
+      document.cookie.includes("autosave-cookie-solid")
+    );
+
+    expect(document.cookie).toMatchSnapshot();
+
+    const snapshot = Cookies.get("autosave-cookie-solid");
+
+    cleanup();
+
+    render(() => (
+      <div style={{ width: "500px" }}>
+        <AutosaveCookie
+          handle={(v) => (handle = v)}
+          snapshot={snapshot ? JSON.parse(snapshot) : undefined}
+        />
+      </div>
+    ));
+
+    await expectTemplate(handle, "341.609375px 10px 146.390625px");
+  });
+});
+
+test("Keyboard interactions with collapsed panels", async () => {
+  let handle: PanelGroupHandle | null = null!;
+
+  render(() => (
+    <div style={{ width: "500px" }}>
+      <Collapsible handle={(v) => (handle = v)} />
+    </div>
+  ));
+
+  await waitForMeasurement(handle);
+  await expectTemplate(handle, "209px 10px 209px 10px 60px");
+
+  const resizer2 = document.getElementById("resizer-2")!;
+  fireEvent.keyDown(resizer2, { key: "Enter" });
+  await expectTemplate(handle, "209px 10px 169px 10px 100px");
+
+  fireEvent.keyDown(resizer2, { key: "ArrowLeft" });
+  fireEvent.keyDown(resizer2, { key: "ArrowLeft" });
+  fireEvent.keyDown(resizer2, { key: "ArrowLeft" });
+  fireEvent.keyDown(resizer2, { key: "ArrowLeft" });
+  await expectTemplate(handle, "209px 10px 165px 10px 104px");
+
+  fireEvent.keyDown(resizer2, { key: "ArrowLeft", shiftKey: true });
+  await expectTemplate(
+    handle,
+    "209.03125px 10px 149.984375px 10px 118.984375px"
+  );
+
+  fireEvent.keyDown(resizer2, { key: "Enter" });
+  await expectTemplate(handle, "209.03125px 10px 208.96875px 10px 60px");
+
+  fireEvent.keyDown(resizer2, { key: "Enter" });
+  await expectTemplate(handle, "209.0625px 10px 149.96875px 10px 118.96875px");
+});
+
+describe("imperative panel API", async () => {
+  test("panel group", async () => {
+    let handle: PanelGroupHandle;
+
+    render(() => (
+      <div style={{ width: "500px" }}>
+        <Collapsible handle={(v) => (handle = v)} />
+      </div>
+    ));
+
+    await waitForMeasurement(handle!);
+
+    expect(handle!.getPercentageSizes()).toMatchInlineSnapshot(`
+      [
+        0.5,
+        0.020080321285140562,
+        0.5,
+        0.020080321285140562,
+        0.12048192771084337,
+      ]
+    `);
+
+    expect(handle!.getPixelSizes()).toMatchInlineSnapshot(`
+      [
+        209,
+        10,
+        209,
+        10,
+        60,
+      ]
+    `);
+
+    await expectTemplate(handle!, "209px 10px 209px 10px 60px");
+  });
+
+  test("panel", async () => {
+    let handle: PanelGroupHandle;
+    let rightHandle: PanelHandle;
+    let leftHandle: PanelHandle;
+
+    render(() => (
+      <div style={{ width: "500px" }}>
+        <Collapsible
+          handle={(v) => (handle = v)}
+          rightPanelHandle={(v) => (rightHandle = v)}
+          leftPanelHandle={(v) => (leftHandle = v)}
+        />
+      </div>
+    ));
+
+    await waitForMeasurement(handle!);
+
+    expect(rightHandle!.isCollapsed()).toBe(true);
+    expect(rightHandle!.isExpanded()).toBe(false);
+
+    rightHandle!.expand();
+    await new Promise((resolve) => setTimeout(resolve, 2000));
+
+    expect(rightHandle!.isCollapsed()).toBe(false);
+    expect(rightHandle!.isExpanded()).toBe(true);
+
+    rightHandle!.collapse();
+    await new Promise((resolve) => setTimeout(resolve, 2000));
+
+    expect(rightHandle!.isCollapsed()).toBe(true);
+    expect(rightHandle!.isExpanded()).toBe(false);
+
+    // Test the non controlled version
+
+    expect(leftHandle!.isCollapsed()).toBe(false);
+    expect(leftHandle!.isExpanded()).toBe(true);
+
+    leftHandle!.collapse();
+    await new Promise((resolve) => setTimeout(resolve, 2000));
+
+    expect(leftHandle!.isCollapsed()).toBe(true);
+    expect(leftHandle!.isExpanded()).toBe(false);
+    expect(rightHandle!.getPercentageSize()).toBe(
+      leftHandle!.getPercentageSize()
+    );
+    expect(rightHandle!.getPixelSize()).toBe(leftHandle!.getPixelSize());
+
+    leftHandle!.expand();
+    await new Promise((resolve) => setTimeout(resolve, 5000));
+
+    expect(leftHandle!.isCollapsed()).toBe(false);
+    expect(leftHandle!.isExpanded()).toBe(true);
+  });
+});

package/src/__snapshots__/SolidWindowSplitter.test.tsx.snap

@@ -0,0 +1,56 @@
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+
+exports[`Autosave > cookie 1`] = `"autosave-cookie-solid=%7B%22size%22%3A%7B%22x%22%3A0%2C%22y%22%3A0%2C%22width%22%3A500%2C%22height%22%3A198%2C%22top%22%3A0%2C%22right%22%3A500%2C%22bottom%22%3A198%2C%22left%22%3A0%7D%2C%22items%22%3A%5B%7B%22type%22%3A%22panel%22%2C%22currentValue%22%3A%7B%22type%22%3A%22percent%22%2C%22value%22%3A%220.7%22%7D%2C%22min%22%3A%7B%22type%22%3A%22pixel%22%2C%22value%22%3A%220%22%7D%2C%22max%22%3A%221fr%22%2C%22collapsedSize%22%3A%7B%22type%22%3A%22pixel%22%2C%22value%22%3A%220%22%7D%2C%22onCollapseChange%22%3A%7B%7D%2C%22onResize%22%3A%7B%7D%2C%22collapseIsControlled%22%3Afalse%2C%22id%22%3A%221%22%7D%2C%7B%22type%22%3A%22handle%22%2C%22size%22%3A%7B%22type%22%3A%22pixel%22%2C%22value%22%3A%2210%22%7D%2C%22id%22%3A%22resizer1%22%7D%2C%7B%22type%22%3A%22panel%22%2C%22currentValue%22%3A%7B%22type%22%3A%22percent%22%2C%22value%22%3A%220.3%22%7D%2C%22min%22%3A%7B%22type%22%3A%22pixel%22%2C%22value%22%3A%220%22%7D%2C%22max%22%3A%221fr%22%2C%22collapsedSize%22%3A%7B%22type%22%3A%22pixel%22%2C%22value%22%3A%220%22%7D%2C%22onCollapseChange%22%3A%7B%7D%2C%22onResize%22%3A%7B%7D%2C%22collapseIsControlled%22%3Afalse%2C%22id%22%3A%222%22%7D%5D%2C%22orientation%22%3A%22horizontal%22%2C%22dragOvershoot%22%3A%220%22%2C%22groupId%22%3A%22autosave-cookie-solid%22%2C%22autosaveStrategy%22%3A%22cookie%22%7D"`;
+
+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/context.tsx

@@ -0,0 +1,58 @@
+import { createContext, useContext, Accessor, JSXElement } from "solid-js";
+import { GroupMachineContextValue, SendFn } from "@window-splitter/state";
+
+export const InitialPrerenderContext = createContext<Accessor<boolean>>(
+  () => false
+);
+export const MachineActorContext = createContext<SendFn | undefined>();
+export const GroupIdContext = createContext<string | undefined>();
+export const MachineStateContext = createContext<
+  Accessor<GroupMachineContextValue | undefined> | undefined
+>();
+
+export function useInitialPrerenderContext() {
+  const context = useContext(InitialPrerenderContext);
+  return context;
+}
+
+export function useMachineActor() {
+  const context = useContext(MachineActorContext);
+  return context;
+}
+
+export function useGroupId() {
+  const context = useContext(GroupIdContext);
+  return context;
+}
+
+export function useMachineState() {
+  const context = useContext(MachineStateContext);
+  return context;
+}
+
+// Create a provider component that bundles all the contexts together
+export function GroupMachineProvider(props: {
+  children: JSXElement;
+  groupId: string;
+  send: SendFn;
+  state: Accessor<GroupMachineContextValue | undefined>;
+  initialPrerender?: Accessor<boolean>;
+}) {
+  return (
+    <InitialPrerenderContext.Provider
+      value={props.initialPrerender ?? (() => false)}
+    >
+      {/* The rule is wrong. the docs even suggust this pattern */}
+      {/* eslint-disable-next-line solid/reactivity */}
+      <GroupIdContext.Provider value={props.groupId}>
+        {/* eslint-disable-next-line solid/reactivity */}
+        <MachineActorContext.Provider value={props.send}>
+          {/* eslint-disable-next-line solid/reactivity */}
+          <MachineStateContext.Provider value={props.state}>
+            {props.children}
+          </MachineStateContext.Provider>
+        </MachineActorContext.Provider>
+      </GroupIdContext.Provider>
+    </InitialPrerenderContext.Provider>
+  );
+}

package/src/index.ts

@@ -0,0 +1 @@
+export * from "./SolidWIndowSplitter.js";

package/src/mergeSolidAttributes.ts

@@ -0,0 +1,61 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
+import { mergeAttributes as mergeAttributesBase } from "@window-splitter/interface";
+
+export type MaybeAccessor<T> = T | (() => T);
+
+export function mergeSolidAttributes<T>(source: MaybeAccessor<T>): T;
+export function mergeSolidAttributes<T, U>(
+  source: MaybeAccessor<T>,
+  source1: MaybeAccessor<U>
+): T & U;
+export function mergeSolidAttributes<T, U, V>(
+  source: MaybeAccessor<T>,
+  source1: MaybeAccessor<U>,
+  source2: MaybeAccessor<V>
+): T & U & V;
+export function mergeSolidAttributes<T, U, V, W>(
+  source: MaybeAccessor<T>,
+  source1: MaybeAccessor<U>,
+  source2: MaybeAccessor<V>,
+  source3: MaybeAccessor<W>
+): T & U & V & W;
+export function mergeSolidAttributes(...sources: any[]) {
+  const target = {};
+  for (let i = 0; i < sources.length; i++) {
+    let source = sources[i];
+    if (typeof source === "function") source = source();
+    if (source) {
+      const descriptors = Object.getOwnPropertyDescriptors(source);
+      for (const key in descriptors) {
+        if (key in target) continue;
+        Object.defineProperty(target, key, {
+          enumerable: true,
+          get() {
+            let e = {};
+            if (
+              key === "style" ||
+              key === "class" ||
+              key === "className" ||
+              key.startsWith("on")
+            ) {
+              for (let j = 0; j < sources.length; j++) {
+                let s = sources[j];
+                if (typeof s === "function") s = s();
+                e = mergeAttributesBase(e, { [key]: (s || {})[key] });
+              }
+
+              return (e as any)[key];
+            }
+            for (let j = sources.length - 1; j >= 0; j--) {
+              let s = sources[j];
+              if (typeof s === "function") s = s();
+              const v = (s || {})[key];
+              if (v !== undefined) return v;
+            }
+          },
+        });
+      }
+    }
+  }
+  return target;
+}

package/tsconfig.json

@@ -0,0 +1,8 @@
+{
+  "extends": "../../tsconfig.json",
+  "compilerOptions": {
+    "jsx": "preserve",
+    "jsxImportSource": "solid-js",
+    "types": ["@testing-library/jest-dom"]
+  }
+}

package/vite.config.js

@@ -0,0 +1,6 @@
+import { defineConfig } from "vite";
+import solidPlugin from "vite-plugin-solid";
+
+export default defineConfig({
+  plugins: [solidPlugin()],
+});

package/vitest.config.ts

@@ -0,0 +1,22 @@
+import { defineConfig } from "vitest/config";
+import solidPlugin from "vite-plugin-solid";
+
+export default defineConfig({
+  plugins: [solidPlugin()],
+  build: {
+    target: "esnext",
+  },
+  test: {
+    coverage: {
+      provider: "istanbul",
+      include: ["**/*.tsx", "!**/*.stories.tsx", "!**/*.test.tsx"],
+      reporter: ["text", "html", "json-summary", "json"],
+      reportOnFailure: true,
+    },
+    browser: {
+      enabled: true,
+      provider: "playwright",
+      instances: [{ browser: "chromium" }],
+    },
+  },
+});