switch update

.changeset/small-rivers-refuse.md

@@ -0,0 +1,5 @@
+---
+"@preact-signals/utils": minor
+---
+
+Removed caching from Switch component. Added `Switch.Match` as alias for separete Match component

packages/utils/package.json

@@ -195,6 +195,7 @@
     "rollup-plugin-node-externals": "^6.1.2",
     "typedoc": "^0.25.8",
     "typedoc-plugin-markdown": "4.0.0-next.53",
+    "vite-plugin-babel": "^1.1.3",
     "zx": "^7.2.3"
   },
   "keywords": [

packages/utils/src/__tests__/hoc.test.tsx

@@ -111,6 +111,9 @@ describe("reactifyLite()", () => {
     async ({ expect, act, root, reactRoot }) => {
       const sig = signal(10);
 
+      /**
+       * @useSignals
+       */
       const aRender = vi.fn((props: ReactiveProps<{ value: number }>) => (
         <div>{props.value}</div>
       ));
@@ -155,6 +158,9 @@ describe("reactifyLite()", () => {
     async ({ act, reactRoot, expect }) => {
       const sig = signal(10);
 
+      /**
+       * @useSignals
+       */
       const aRender = vi.fn(
         (props: ReactiveProps<{ value: number }>) => props.value
       );

packages/utils/src/__tests__/utils.ts

@@ -66,7 +66,15 @@ export const withRenderer =
       });
     });
 
-export const itRenderer = (
-  name: string,
-  callback: (props: WithRendererProps) => unknown
-) => it(name, withRenderer(callback));
+export const itRenderer = Object.assign(
+  function isRenderer(
+    name: string,
+    callback: (props: WithRendererProps) => unknown
+  ) {
+    return it(name, withRenderer(callback));
+  },
+  {
+    only: (name: string, callback: (props: WithRendererProps) => unknown) =>
+      it.only(name, withRenderer(callback)),
+  }
+);

packages/utils/src/lib/components/__tests__/Switch.test.tsx

@@ -1,6 +1,6 @@
 import { signal } from "@preact-signals/unified-signals";
-import React from "react";
-import { describe, vi } from "vitest";
+import React, { useMemo } from "react";
+import { describe, Mock, vi } from "vitest";
 import { itRenderer } from "../../../__tests__/utils";
 import { Match, Switch } from "../components";
 
@@ -171,4 +171,41 @@ describe.concurrent("Switch()", () => {
       }
     }
   );
+  itRenderer(
+    "must reexecute child even if nothing changed",
+    async ({ act, expect, reactRoot, root }) => {
+      const sig = signal(0);
+      const matchWhen = vi.fn(() => 10);
+      const renderWhen = vi.fn(() => 220);
+
+      const Component = vi.fn(() => {
+        console.log("render");
+        sig.value;
+
+        return (
+          <Switch fallback={"fallback"}>
+            <Switch.Match when={matchWhen}>{renderWhen}</Switch.Match>
+          </Switch>
+        );
+      });
+
+      await reactRoot().render(<Component />);
+
+      const firstChild = root.firstChild;
+      expect(firstChild).is.instanceOf(Text);
+      expect(firstChild).has.property("data", "220");
+
+      expect(Component).toHaveBeenCalledTimes(1);
+      expect(matchWhen).toHaveBeenCalledTimes(1);
+      expect(renderWhen).toHaveBeenCalledTimes(1);
+
+      await act(() => {
+        sig.value++;
+      });
+
+      expect(Component).toHaveBeenCalledTimes(2);
+      expect(matchWhen).toHaveBeenCalledTimes(2);
+      expect(renderWhen).toHaveBeenCalledTimes(2);
+    }
+  );
 });

packages/utils/src/lib/components/components/Computed.tsx

@@ -1,4 +1,3 @@
-import { useComputedOnce } from "../../hooks";
 import { Accessor } from "../../utils";
 import { RenderResult } from "../type";
 

packages/utils/src/lib/components/components/Switch.tsx

@@ -1,5 +1,4 @@
-import { Children, isValidElement } from "react";
-import { useComputedOnce, useSignalOfState } from "../../hooks";
+import React, { Children, isValidElement } from "react";
 import {
   Accessor,
   AnyReactive,
@@ -22,13 +21,15 @@ export type MatchProps<T extends AnyReactive> = {
 };
 
 const matchSymbol = Symbol("match");
-export const Match = Object.assign(
+const Match = Object.assign(
   <const T extends AnyReactive>(_props: MatchProps<T>) => null,
   {
     [matchSymbol]: true,
   }
 );
 
+export { Match };
+
 export type SwitchProps = {
   /**
    * shouldn't change during the lifecycle of the component
@@ -43,23 +44,8 @@ export type SwitchProps = {
 /**
  *
  * @useSignals
- * @example
- * // when prop can be callback or signal
- * <Switch>
- *  <Match when={() => isLoading.value}>
- *    <Loader />
- *  </Match>
- *  <Match when={() => isError.value}>
- *    There are an error
- *  </Match>
- *  <Match when={() => data.value}>
- *    {(contentAccessor) => (
- *      contentAccessor().id === 10 ? 1 : 2
- *    )}
- *  </Match>
- * </Switch>
  */
-export const Switch = (props: SwitchProps): JSX.Element => {
+const Switch_ = (props: SwitchProps): JSX.Element => {
   if (
     __DEV__ &&
     !Children.toArray(props.children).every(
@@ -76,25 +62,65 @@ export const Switch = (props: SwitchProps): JSX.Element => {
       "every child of switch should be Match and have when and children props"
     );
   }
-  const matches = useSignalOfState(
-    Children.toArray(props.children) as {
-      props: MatchProps<Reactive<unknown>>;
-    }[]
+  const childrenArray = Children.toArray(props.children) as {
+    props: MatchProps<Reactive<unknown>>;
+  }[];
+
+  const fallback = props.fallback ?? null;
+
+  if (__DEV__ && childrenArray.length === 0) {
+    console.warn("Switch component has no children");
+  }
+
+  const itemIndex = childrenArray.findIndex(
+    ({ props: item }) => !isExplicitFalsy(unwrapReactive(item.when))
   );
-  const fallback = useSignalOfState<RenderResult>(props.fallback ?? null);
 
-  return useComputedOnce(() => {
-    if (matches.value.length === 0) {
-      return fallback.value ?? null;
-    }
-    const item = matches.value.find(
-      (item) => !isExplicitFalsy(unwrapReactive(item.props.when))
-    );
-    if (!item) {
-      return fallback.value ?? null;
-    }
-    return typeof item.props.children === "function"
-      ? item.props.children(accessorOfReactive(item.props.when))
-      : item.props.children;
-  }).value as JSX.Element;
+  if (itemIndex === -1) {
+    return fallback as JSX.Element;
+  }
+  const item = childrenArray[itemIndex]?.props;
+  if (!item) {
+    throw new Error("item is not found");
+  }
+  const children = item.children;
+
+  return (
+    typeof children === "function"
+      ? children(accessorOfReactive(item.when))
+      : children
+  ) as JSX.Element;
 };
+
+/**
+ *
+ * @example
+ * // when prop can be callback or signal
+ * <Switch>
+ *  <Switch.Match when={() => isLoading.value}>
+ *    <Loader />
+ *  </Switch.Match>
+ *  <Switch.Match when={() => isError.value}>
+ *    There are an error
+ *  </Switch.Match>
+ *  <Switch.Match when={() => data.value}>
+ *    {(contentAccessor) => (
+ *      contentAccessor().id === 10 ? 1 : 2
+ *    )}
+ *  </Switch.Match>
+ * </Switch>
+ *
+ * @description only static `Match` components are allowed. Here how you **cannot** use it:
+ * @example
+ * <Switch>
+ *  {a > 10 ? <Switch.Match when={() => isLoading.value}>
+ *    <Loader />
+ *  </Switch.Match>
+ *  : <Switch.Match when={() => isError.value}>
+ *    There are an error
+ *  </Switch.Match>}
+ * </Switch>
+ */
+export const Switch = Object.assign(Switch_, {
+  Match,
+});

packages/utils/vitest.config.ts

@@ -1,4 +1,5 @@
 import { defineConfig } from "vitest/config";
+import babel from "vite-plugin-babel";
 
 export default defineConfig({
   test: {
@@ -8,4 +9,21 @@ export default defineConfig({
   define: {
     __DEV__: true,
   },
+  resolve: {
+    alias: {
+      "@preact/signals-react": "@preact-signals/safe-react",
+    },
+  },
+  plugins: [
+    // @ts-expect-error
+    babel({
+      filter: /\.(j|t)sx$/,
+      babelConfig: {
+        plugins: ["module:@preact-signals/safe-react/babel"],
+        parserOpts: {
+          plugins: ["jsx", 'typescript'],
+        },
+      },
+    }),
+  ],
 });