silentium-components 0.0.5 → 0.0.7

package/src/behaviors/Path.test.ts

@@ -1,12 +1,12 @@
-import { sourceOf, SourceSync } from "silentium";
-import { Path } from "../behaviors/Path";
+import { sourceSync } from "silentium";
 import { expect, test } from "vitest";
+import { path } from "../behaviors/Path";
 
 test("Path.test", () => {
-  const record = sourceOf({
+  const record = {
     name: "Peter",
     surname: "Parker",
-  });
-  const name = new SourceSync(new Path(record, sourceOf("name")));
+  };
+  const name = sourceSync(path(record, "name"));
   expect(name.syncValue()).toBe("Peter");
 });

package/src/behaviors/Path.ts

@@ -1,38 +1,34 @@
 import {
   give,
-  GuestCast,
-  GuestType,
-  SourceAll,
-  SourceObjectType,
+  patron,
+  sourceAll,
+  sourceOf,
   SourceType,
+  subSourceMany,
   value,
 } from "silentium";
 
-export class Path<T extends Record<string, unknown>, K extends string>
-  implements SourceObjectType<T[K]>
-{
-  public constructor(
-    private baseSource: SourceType<T>,
-    private keyType: SourceType<K>,
-  ) {}
+export const path = <T extends Record<string, unknown>, K extends string>(
+  baseSrc: SourceType<T>,
+  keySrc: SourceType<K>,
+) => {
+  const pathSrc = sourceOf<T[K]>();
+  subSourceMany(pathSrc, [baseSrc, keySrc]);
 
-  public value(guest: GuestType<T[K]>) {
-    const all = new SourceAll<{ base: T; key: K }>(["base", "key"]);
-    value(this.baseSource, new GuestCast(guest, all.guestKey("base")));
-    value(this.keyType, new GuestCast(guest, all.guestKey("key")));
-    all.value(
-      new GuestCast(guest, ({ base, key }) => {
-        const keyChunks = key.split(".");
-        let value: unknown = base;
-        keyChunks.forEach((keyChunk) => {
-          value = (value as T)[keyChunk];
-        });
+  value(
+    sourceAll([baseSrc, keySrc]),
+    patron(([base, key]) => {
+      const keyChunks = key.split(".");
+      let value: unknown = base;
+      keyChunks.forEach((keyChunk) => {
+        value = (value as T)[keyChunk];
+      });
 
-        if (value !== undefined && value !== base) {
-          give(value as T[K], guest);
-        }
-      }),
-    );
-    return this;
-  }
-}
+      if (value !== undefined && value !== base) {
+        give(value as T[K], pathSrc);
+      }
+    }),
+  );
+
+  return pathSrc.value;
+};

package/src/behaviors/index.ts

@@ -1,4 +1,4 @@
 export * from "./Dirty";
 export * from "./Loading";
-export * from "./Touched";
 export * from "./Path";
+export * from "./Deadline";

package/src/controls/GroupActiveClass.test.ts

@@ -1,26 +1,29 @@
-import { GuestSync } from "silentium";
-import { JSDomQuerySelector } from "../jsdom/JSDomQuerySelector";
+import { sourceOf, sourceSync, value } from "silentium";
+import { jsdomDocument } from "silentium-jsdom";
+import { element } from "silentium-web-api";
 import { expect, test } from "vitest";
-import { JSDomDocument } from "../jsdom/JSDomDocument";
-import { GroupActiveClass } from "./GroupActiveClass";
+import { path } from "../behaviors";
+import { groupActiveClass } from "./GroupActiveClass";
 
 test("GroupActiveClass.test", () => {
-  const document = new JSDomDocument(`<div class="menu">
+  const document = sourceSync(
+    jsdomDocument(`<div class="menu">
     <div id="prev-active" class="menu-link active">One</div>
     <div class="menu-link">Two</div>
     <div id="next-active" class="menu-link">Three</div>
-  </div>`);
-  const element = new JSDomQuerySelector(document, "#next-active");
-  const classActive = new GroupActiveClass("active", ".menu-link", document);
-  const g = new GuestSync<Document>(null as unknown as Document);
+  </div>`),
+  ).syncValue();
+  const groupElements = path(<any>element(".menu", document), "childNodes");
+  const activeElement = sourceOf<HTMLElement>();
+  sourceSync(groupActiveClass("active", activeElement, groupElements));
 
-  element.value(classActive);
-  document.value(g);
+  value(element("#next-active", document), activeElement);
 
-  expect(g.value().body.innerHTML).toContain(
+  expect(document.body.outerHTML).toContain(
     'id="next-active" class="menu-link active"',
   );
-  expect(g.value().body.innerHTML).toContain(
+
+  expect(document.body.innerHTML).toContain(
     'id="prev-active" class="menu-link"',
   );
 });

package/src/controls/GroupActiveClass.ts

@@ -1,29 +1,26 @@
-import { GuestObjectType, PatronOnce, SourceType, value } from "silentium";
+import { patron, sourceAll, SourceType, value } from "silentium";
 
 /**
  * Sets activeClass to one element of group
  * and resets activeClass on other group elements
  * suitable for menu active class
- *
- * @deprecated heavily related to web api needs refactoring
  */
-export class GroupActiveClass implements GuestObjectType<HTMLElement> {
-  public constructor(
-    private activeClass: string,
-    private groupSelector: string,
-    private document: SourceType<Document>,
-  ) {}
+export const groupActiveClass = (
+  activeClassSrc: SourceType<string>,
+  activeElementSrc: SourceType<HTMLElement>,
+  groupElementsSrc: SourceType<HTMLElement[]>,
+) => {
+  value(
+    sourceAll([activeClassSrc, activeElementSrc, groupElementsSrc]),
+    patron(([activeClass, activeElement, groupElements]) => {
+      groupElements.forEach((el) => {
+        if (el.classList) {
+          el.classList.remove(activeClass);
+        }
+      });
+      activeElement.classList.add(activeClass);
+    }),
+  );
 
-  public give(element: HTMLElement): this {
-    value(
-      this.document,
-      new PatronOnce((document) => {
-        document.querySelectorAll(this.groupSelector).forEach((el) => {
-          el.classList.remove(this.activeClass);
-        });
-        element.classList.add(this.activeClass);
-      }),
-    );
-    return this;
-  }
-}
+  return groupElementsSrc;
+};

package/src/controls/index.ts

@@ -1,6 +1 @@
-export * from "./Input";
-export * from "./Visible";
-export * from "./Text";
-export * from "./Link";
-export * from "./ComputedElement";
 export * from "./GroupActiveClass";

package/src/index.ts

@@ -1,5 +1,3 @@
-export * from "./navigation";
 export * from "./controls";
-export * from "./page";
 export * from "./behaviors";
 export * from "./structures";

package/src/navigation/Router.test.ts

@@ -0,0 +1,47 @@
+import { source, sourceApplied, sourceOf, sourceSync } from "silentium";
+import { expect, test } from "vitest";
+import { router } from "../navigation/Router";
+
+const drop = (dropPart: string) => (value: string) => {
+  return value.replace(dropPart, "");
+};
+
+test("Router.test", () => {
+  const urlSrc = sourceOf<string>("http://domain.com/some/url/");
+  const urlClearedSrc = sourceApplied(urlSrc, drop("http://domain.com"));
+
+  const template = sourceSync(
+    router(
+      urlClearedSrc,
+      [
+        {
+          pattern: "^/$",
+          template: source("page/home.html"),
+        },
+        {
+          pattern: "/some/url",
+          template: "page/home.html",
+        },
+        {
+          pattern: "/some/contacts",
+          template: "page/contacts.html",
+        },
+      ],
+      source("page/404.html"),
+    ),
+  );
+
+  expect(template.syncValue()).toBe("page/home.html");
+
+  urlSrc.give("http://domain.com/some/contacts/");
+
+  expect(template.syncValue()).toBe("page/contacts.html");
+
+  urlSrc.give("http://domain.com/some/unknown/");
+
+  expect(template.syncValue()).toBe("page/404.html");
+
+  urlSrc.give("http://domain.com/");
+
+  expect(template.syncValue()).toBe("page/home.html");
+});

package/src/navigation/Router.ts

@@ -1,118 +1,50 @@
 import {
-  Source,
-  SourceAll,
-  GuestCast,
-  Patron,
-  PrivateClass,
-  SourceChangeable,
-  give,
+  patron,
+  sourceAny,
+  sourceChain,
+  sourceFiltered,
   sourceOf,
+  SourceType,
+  value,
 } from "silentium";
-import { HistoryNewPage, HistoryPoppedPage } from "silentium-web-api";
-import { ComputedElement, GroupActiveClass, Link, Visible } from "../controls";
-import { CurrentPage } from "../navigation/CurrentPage";
-import { Navigation } from "../navigation/Navigation";
-import { PageFetchTransport } from "../navigation/PageFetchTransport";
-import { RouteDisplay } from "../navigation/RouteDisplay";
+import { regexpMatched } from "../system/RegexpMatched";
 
-type Route = {
-  url: string;
-  template: string;
-  aliases: string[];
-  page: any;
-};
-
-export class Router {
-  public constructor(
-    private loaderSelector: string,
-    private navigationResultSelector: string,
-    private menuSelector: string,
-  ) {}
-
-  public routes(
-    routes: Route[],
-    currentPage: any,
-    basePathSource: any,
-    afterPageLoaded?: () => void,
-  ) {
-    if (!currentPage) {
-      currentPage = new CurrentPage();
-    }
-    currentPage.value(new Patron(new HistoryNewPage()));
-
-    const [basePath] = location.href.replace(location.origin, "").split("#");
-    if (!basePathSource) {
-      basePathSource = new SourceChangeable(
-        `${basePath}#`.replace("index.html", "").replace("//", "/"),
-      );
-    }
-
-    const pageLoading = new SourceChangeable(false);
-    pageLoading.value(new Patron(new Visible(this.loaderSelector)));
-
-    const historyPoppedPage = new HistoryPoppedPage(currentPage);
-    historyPoppedPage.watchPop();
-
-    const navigation = new Navigation(
-      pageLoading,
-      basePathSource,
-      currentPage,
-      new RouteDisplay(this.navigationResultSelector),
-      new PrivateClass(PageFetchTransport),
-    );
-    navigation.routes(routes);
-
-    const link = new Link(currentPage, basePathSource);
-    link.watchClick(this.menuSelector);
+export interface Route<T> {
+  pattern: string;
+  patternFlags?: string;
+  template: T | SourceType<T>;
+}
 
-    const urlChain = new SourceAll<any>();
-    basePathSource.value(new Patron(urlChain.guestKey("basePath")));
-    currentPage.value(new Patron(urlChain.guestKey("page")));
-    const url = new Source((guest) => {
-      urlChain.value(
-        new GuestCast(guest, ({ basePath, page }) => {
-          give(page.replace(basePath, ""), guest);
-        }),
+/**
+ * Router component what will return template if url matches pattern
+ */
+export const router = <T = "string">(
+  urlSrc: SourceType<string>,
+  routesSrc: SourceType<Route<T>[]>,
+  defaultSrc: SourceType<T>,
+) => {
+  const resultSrc = sourceOf<T>();
+
+  value(
+    routesSrc,
+    patron((routes) => {
+      value(
+        sourceAny([
+          sourceChain(urlSrc, defaultSrc as T),
+          ...routes.map((r) =>
+            sourceChain(
+              sourceFiltered(
+                regexpMatched(r.pattern, urlSrc, r.patternFlags),
+                Boolean,
+              ),
+              r.template,
+            ),
+          ),
+        ]),
+        patron(resultSrc),
       );
-    });
-
-    const activeLink = new ComputedElement(
-      [{ source: url, placeholder: "{url}" }],
-      `${this.menuSelector} a[href="{url}"]`,
-    );
-    activeLink.element(
-      new Patron(
-        new GroupActiveClass(
-          "active",
-          `${this.menuSelector} a`,
-          sourceOf(document),
-        ),
-      ),
-    );
-
-    pageLoading.value(
-      new Patron((isInLoading) => {
-        if (isInLoading) {
-          return;
-        }
+    }),
+  );
 
-        if (afterPageLoaded) {
-          afterPageLoaded();
-        }
-
-        const divDestination = document.querySelector(
-          this.navigationResultSelector,
-        );
-        if (divDestination) {
-          // Оживляем script тэги
-          divDestination.querySelectorAll("script").forEach((x) => {
-            const sc = document.createElement("script");
-            sc.setAttribute("type", "module");
-            sc.appendChild(document.createTextNode(x.innerText));
-            divDestination.appendChild(sc);
-          });
-        }
-      }),
-    );
-  }
-}
+  return resultSrc.value;
+};

package/src/navigation/index.ts

@@ -1,7 +1 @@
-export * from "./PageFetchTransport";
-export * from "./Navigation";
-export * from "./RouteDisplay";
-export * from "./RoutePageType";
-export * from "./PageFetchTransport";
-export * from "./CurrentPage";
 export * from "./Router";

package/src/strings/Concatenated.test.ts

@@ -0,0 +1,11 @@
+import { sourceSync } from "silentium";
+import { concatenated } from "../strings/Concatenated";
+import { expect, test } from "vitest";
+
+test("Concatenated.test", () => {
+  const concatenatedSrc = sourceSync(
+    concatenated(["one", "two", "three"], "-"),
+  );
+
+  expect(concatenatedSrc.syncValue()).toBe("one-two-three");
+});

package/src/strings/Concatenated.ts

@@ -0,0 +1,18 @@
+import { give, GuestType, sourceCombined, SourceType } from "silentium";
+
+/**
+ * Join sources of strings to one source
+ */
+export const concatenated = (
+  sources: SourceType<string>[],
+  joinPartSrc: SourceType<string> = "",
+): SourceType<string> => {
+  const result = sourceCombined(
+    joinPartSrc,
+    ...sources,
+  )((g: GuestType<string>, joinPart, ...strings) => {
+    give(strings.join(joinPart), g);
+  });
+
+  return result;
+};

package/src/structures/HashTable.test.ts

@@ -1,14 +1,14 @@
-import { SourceSync, SourceChangeable } from "silentium";
-import { HashTable } from "../structures/HashTable";
+import { sourceOf, sourceSync } from "silentium";
 import { expect, test } from "vitest";
+import { hashTable } from "../structures/HashTable";
 
 test("HashTable.test", () => {
-  const entrySource = new SourceChangeable<[string, string]>();
-  const hashTable = new SourceSync(new HashTable(entrySource));
+  const entrySource = sourceOf<[string, string]>();
+  const hashTableSrc = sourceSync(hashTable(entrySource));
   entrySource.give(["key-one", "value-one"]);
   entrySource.give(["key-two", "value-two"]);
 
-  expect(hashTable.syncValue()).toStrictEqual({
+  expect(hashTableSrc.syncValue()).toStrictEqual({
     "key-one": "value-one",
     "key-two": "value-two",
   });

package/src/structures/HashTable.ts

@@ -1,31 +1,20 @@
-import {
-  GuestType,
-  Patron,
-  SourceObjectType,
-  SourceType,
-  SourceChangeable,
-  value,
-} from "silentium";
+import { patron, sourceOf, SourceType, subSource, value } from "silentium";
 
 /**
  * https://silentium-lab.github.io/silentium-components/#/structures/hash-table
  */
-export class HashTable implements SourceObjectType<Record<string, unknown>> {
-  private source = new SourceChangeable<Record<string, unknown>>({});
+export const hashTable = (baseSource: SourceType<[string, unknown]>) => {
+  const result = sourceOf<Record<string, unknown>>({});
+  subSource(result, baseSource);
 
-  public constructor(baseSource: SourceType<[string, unknown]>) {
-    value(
-      baseSource,
-      new Patron(([key, value]) => {
-        this.source.value((lastRecord) => {
-          lastRecord[key] = value;
-        });
-      }),
-    );
-  }
+  value(
+    baseSource,
+    patron(([key, value]) => {
+      result.value((lastRecord) => {
+        lastRecord[key] = value;
+      });
+    }),
+  );
 
-  public value(guest: GuestType<Record<string, unknown>>) {
-    value(this.source, guest);
-    return this;
-  }
-}
+  return result.value;
+};

package/src/system/RegexpMatched.test.ts

@@ -0,0 +1,14 @@
+import { sourceOf, sourceSync } from "silentium";
+import { regexpMatched } from "../system/RegexpMatched";
+import { expect, test } from "vitest";
+
+test("RegexpMatched.test", () => {
+  const urlSrc = sourceOf<string>("http://domain.com/some/url/");
+  const matchedSrc = sourceSync(regexpMatched("/some/url", urlSrc));
+
+  expect(matchedSrc.syncValue()).toBe(true);
+
+  urlSrc.give("http://domain.com/changed");
+
+  expect(matchedSrc.syncValue()).toBe(false);
+});

package/src/system/RegexpMatched.ts

@@ -0,0 +1,17 @@
+import { give, GuestType, sourceCombined, SourceType } from "silentium";
+
+/**
+ * Boolean source what checks what string matches pattern
+ */
+export const regexpMatched = (
+  patternSrc: SourceType<string>,
+  valueSrc: SourceType<string>,
+  flagsSrc: SourceType<string> = "",
+): SourceType<boolean> =>
+  sourceCombined(
+    patternSrc,
+    valueSrc,
+    flagsSrc,
+  )((g: GuestType<boolean>, pattern, value, flags) => {
+    give(new RegExp(pattern, flags).test(value), g);
+  });

package/src/system/index.ts

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

package/src/behaviors/Touched.ts

@@ -1 +0,0 @@
-export class Touched {}

package/src/controls/ComputedElement.ts

@@ -1,51 +0,0 @@
-import {
-  give,
-  SourceAll,
-  SourceObjectType,
-  GuestCast,
-  GuestType,
-} from "silentium";
-
-type SourceDetailType = {
-  source: SourceObjectType<any>;
-  placeholder: string;
-};
-
-/**
- * @deprecated use https://kosukhin.github.io/patron-web-api/#/dom/element
- */
-export class ComputedElement {
-  public constructor(
-    private sources: SourceDetailType[],
-    private selectorTemplate: string,
-  ) {}
-
-  public element(guest: GuestType<HTMLElement>) {
-    const chain = new SourceAll();
-    this.sources.forEach((source) => {
-      source.source.value(
-        new GuestCast(guest as GuestType, chain.guestKey(source.placeholder)),
-      );
-    });
-
-    chain.value(
-      new GuestCast(
-        guest as GuestType,
-        (placeholders: Record<string, string>) => {
-          let selectorTemplate = this.selectorTemplate;
-
-          Object.entries(placeholders).map((entry) => {
-            selectorTemplate = selectorTemplate.replaceAll(entry[0], entry[1]);
-          });
-
-          const element = document.querySelector(
-            selectorTemplate,
-          ) as HTMLElement;
-          if (element) {
-            give(element, guest);
-          }
-        },
-      ),
-    );
-  }
-}

package/src/controls/Input.ts

@@ -1,45 +0,0 @@
-import {
-  GuestType,
-  Patron,
-  SourceChangeable,
-  SourceChangeableType,
-} from "silentium";
-
-type InputValue = number | string;
-
-/**
- * @deprecated move to web api
- */
-export class Input implements SourceChangeableType<InputValue> {
-  public constructor(
-    private source: SourceChangeable<InputValue>,
-    selector: string,
-  ) {
-    const el = document.querySelector(selector) as HTMLInputElement;
-    this.source.value(
-      new Patron((value) => {
-        el.value = String(value);
-      }),
-    );
-    el.addEventListener("keyup", () => {
-      this.give(el.value);
-    });
-    el.addEventListener("change", () => {
-      this.give(el.value);
-    });
-  }
-
-  public value(guest: GuestType<InputValue>) {
-    this.source.value(guest);
-    return this;
-  }
-
-  public give(value: InputValue) {
-    this.source.give(value);
-    return this;
-  }
-
-  public pool() {
-    return this.source.pool();
-  }
-}