silentium-components 0.0.77 → 0.0.78

package/src/navigation/Router._firstMatch.test.ts

@@ -0,0 +1,54 @@
+import {
+  Applied,
+  Late,
+  Of,
+  Shared,
+  Transport,
+  TransportEvent,
+} from "silentium";
+import { Router } from "../navigation/Router";
+import { expect, test, vi } from "vitest";
+
+const drop = (dropPart: string) => (value: string) => {
+  return value.replace(dropPart, "");
+};
+
+test("Router first matching route responds, not subsequent matches", () => {
+  const $url = Late<string>("http://domain.com/page/general");
+  const $urlPath = Shared(Applied($url, drop("http://domain.com")));
+  const g = vi.fn();
+  $urlPath.event(Transport(g));
+
+  const firstRouteMock = vi.fn(() => Of("first-route-response"));
+  const secondRouteMock = vi.fn(() => Of("second-route-response"));
+
+  const $router = Router(
+    $urlPath,
+    Of([
+      {
+        pattern: "^/page/.*", // This matches /page/anything
+        event: TransportEvent(firstRouteMock),
+      },
+      {
+        pattern: "^/page/specific$", // This also matches /page/specific
+        event: TransportEvent(secondRouteMock),
+      },
+    ]),
+    TransportEvent(() => Of<string>("page/404.html")),
+  );
+  const g2 = vi.fn();
+  $router.event(Transport(g2));
+
+  // Initial URL should match first route
+  expect(g2).toHaveBeenLastCalledWith("first-route-response");
+  expect(firstRouteMock).toHaveBeenCalledTimes(1);
+  expect(secondRouteMock).toHaveBeenCalledTimes(0);
+
+  // Change URL to /page/specific, which matches both patterns
+  // But only the first matching route should respond
+  $url.use("http://domain.com/page/specific");
+
+  expect(g2).toHaveBeenLastCalledWith("first-route-response");
+  expect(firstRouteMock).toHaveBeenCalledTimes(2); // Called again
+  expect(secondRouteMock).toHaveBeenCalledTimes(0); // Never called
+});

package/src/navigation/Router.ts

@@ -1,26 +1,21 @@
 import {
   All,
-  Applied,
   DestroyableType,
   Event,
   EventType,
+  isDestroyable,
   Of,
   Transport,
-  TransportDestroyable,
-  TransportEvent,
   TransportType,
 } from "silentium";
-import { BranchLazy } from "../behaviors";
 import { RegexpMatched } from "../system";
 
 export interface Route<T> {
   pattern: string;
   patternFlags?: string;
-  event: TransportType<[], EventType<T>>;
+  event: TransportType<void, EventType<T>>;
 }
 
-const $empty = TransportEvent(() => Of(false));
-
 /**
  * Router component what will return template if url matches pattern
  * https://silentium-lab.github.io/silentium-components/#/navigation/router
@@ -31,41 +26,45 @@ export function Router<T = "string">(
   $default: TransportType<void, EventType<T>>,
 ): EventType<T> & DestroyableType {
   return Event<T>((transport) => {
-    const destructors: DestroyableType[] = [];
+    const destroyableList: DestroyableType[] = [];
+    const checkDestroyable = (instance: unknown) => {
+      if (isDestroyable(instance)) {
+        destroyableList.push(instance);
+      }
+    };
     const destructor = () => {
-      destructors.forEach((d) => d.destroy());
-      destructors.length = 0;
+      destroyableList.forEach((d) => d.destroy());
+      destroyableList.length = 0;
     };
     All($routes, $url).event(
       Transport(([routes, url]) => {
         destructor();
-        const instance = All(
-          $default.use(),
-          All(
-            ...routes.map((r) => {
-              const $template = TransportDestroyable(r.event);
-              destructors.push($template);
-              return BranchLazy(
-                RegexpMatched(
-                  Of(r.pattern),
-                  Of(url),
-                  r.patternFlags ? Of(r.patternFlags) : undefined,
-                ),
-                $template,
-                $empty,
-              );
-            }),
+        const $matches = All(
+          ...routes.map((r) =>
+            RegexpMatched(
+              Of(r.pattern),
+              Of(url),
+              r.patternFlags ? Of(r.patternFlags) : undefined,
+            ),
           ),
         );
+        $matches.event(
+          Transport((matches) => {
+            const index = matches.findIndex((v) => v === true);
 
-        // Return first not false or default
-        Applied(instance, (r) => {
-          const first = r[1].find((r: unknown) => r !== false);
-          if (first) {
-            return first as T;
-          }
-          return r[0];
-        }).event(transport);
+            if (index === -1) {
+              const instance = $default.use();
+              checkDestroyable(instance);
+              instance.event(transport);
+            }
+
+            if (index > -1) {
+              const instance = routes[index].event.use();
+              checkDestroyable(instance);
+              instance.event(transport);
+            }
+          }),
+        );
       }),
     );