@cascateer/core 2.0.0

package/src/jsx-runtime.ts

@@ -0,0 +1,192 @@
+import { bind, camelCase, isFunction, isObject } from "lodash";
+import React, { CSSProperties } from "react";
+import {
+  combineLatest,
+  fromEvent,
+  map,
+  ObservableInputTuple,
+  Observer,
+  UnaryFunction,
+} from "rxjs";
+import { ObservableFragment, Primitive } from "./fragment";
+import { asArray, asObservable, keys } from "./lib";
+import { sequence } from "./operators";
+import {
+  MaybeArray,
+  MaybeObservable,
+  MaybeObservableInputTuple,
+} from "./types";
+
+type DocumentEventListener<EventName extends keyof DocumentEventMap> =
+  | Partial<Observer<DocumentEventMap[EventName]>>
+  | UnaryFunction<DocumentEventMap[EventName], void>;
+
+declare global {
+  namespace JSX {
+    type Element = MaybeObservable<Node | Primitive>;
+
+    export type CSSCustomPropertyDefinition = Omit<PropertyDefinition, "name">;
+
+    export type CSSCustomIntegerPropertyDefinition =
+      CSSCustomPropertyDefinition & { syntax: "<integer>" };
+
+    export interface CSSCustomPropertyDefinitions extends Record<
+      keyof {},
+      CSSCustomPropertyDefinition
+    > {}
+
+    type CSSCustomProperties = Record<
+      keyof CSSCustomPropertyDefinitions & `--${string}`,
+      string | number
+    >;
+
+    type Children = MaybeObservable<MaybeArray<Element>>;
+
+    interface IntrinsicAttributes {
+      children?: Children;
+    }
+
+    type IntrinsicElements = {
+      [TagName in keyof HTMLElementTagNameMap]: IntrinsicAttributes & {
+        [AttributeName in keyof Omit<
+          React.JSX.IntrinsicElements[TagName],
+          "children" | "dangerouslySetInnerHTML" | "ref"
+        >]: AttributeName extends `on${infer ReactEventName}`
+          ? Lowercase<ReactEventName> extends keyof DocumentEventMap
+            ? DocumentEventListener<Lowercase<ReactEventName>>
+            : never
+          : MaybeObservable<
+              AttributeName extends "className"
+                ? MaybeArray<string>
+                : AttributeName extends "style"
+                  ? MaybeObservableInputTuple<
+                      CSSProperties | CSSCustomProperties
+                    >
+                  : React.JSX.IntrinsicElements[TagName][AttributeName]
+            >;
+      };
+    };
+
+    type Props = Record<string, unknown>;
+
+    interface Component<P extends Props = Props> {
+      (props: IntrinsicAttributes & P): Element;
+    }
+  }
+}
+
+export const createElement = (
+  component: JSX.Component | string,
+  attributes: JSX.IntrinsicAttributes | null,
+  ...tagContent: JSX.Children[]
+): JSX.Element => {
+  const { children: rawChildren = tagContent, ...propsWithoutChildren } =
+      attributes ?? {},
+    children = asArray(rawChildren).map((children) =>
+      asObservable(children).pipe(
+        map((children) => createFragment({ children })),
+      ),
+    );
+
+  switch (typeof component) {
+    case "function":
+      return component({ ...propsWithoutChildren, children });
+    case "string": {
+      const element = document.createElement(component);
+
+      for (const [name, value] of Object.entries(propsWithoutChildren)) {
+        const eventName = name.match(/^on(.*)$/)?.[1]?.toLowerCase();
+
+        if (eventName != null) {
+          fromEvent(element, eventName).subscribe(
+            ...(isFunction(value)
+              ? [value]
+              : isObject(value)
+                ? [
+                    [...keys(value)].reduce<Partial<Observer<unknown>>>(
+                      (observer, key) => {
+                        const observerKey = [
+                          "next" as const,
+                          "error" as const,
+                          "complete" as const,
+                        ].find((observerKey) => observerKey === key);
+
+                        const observerValue = value[key];
+
+                        if (observerKey != null && isFunction(observerValue)) {
+                          observer[observerKey] = bind(observerValue, value);
+                        }
+
+                        return observer;
+                      },
+                      {},
+                    ),
+                  ]
+                : []),
+          );
+        } else {
+          asObservable(value).subscribe({
+            next: (propertyValue) => {
+              if (name === "className") {
+                element.setAttribute(
+                  "class",
+                  String(propertyValue).replaceAll(",", " "),
+                );
+              } else if (name === "style") {
+                if (isObject(propertyValue)) {
+                  combineLatest(
+                    Object.entries(propertyValue).reduce<
+                      ObservableInputTuple<Record<string, unknown>>
+                    >(
+                      (style, [key, value]) => (
+                        (style[key] = asObservable(value)),
+                        style
+                      ),
+                      {},
+                    ),
+                  )
+                    .pipe(
+                      sequence(([style], [previousStyle]) => {
+                        if (previousStyle != null) {
+                          for (const name in previousStyle) {
+                            element.style.removeProperty(name);
+                          }
+                        }
+
+                        for (const [name, value] of Object.entries(style)) {
+                          element.style.setProperty(name, String(value));
+                        }
+
+                        return style;
+                      }),
+                    )
+                    .subscribe();
+                }
+              } else if (name.startsWith("data-")) {
+                const camelCaseName = camelCase(name.replace(/^data/, ""));
+
+                if (propertyValue == null) {
+                  delete element.dataset[camelCaseName];
+                } else {
+                  element.dataset[camelCase(name.replace(/^data/, ""))] =
+                    String(propertyValue);
+                }
+              } else if (name === "disabled" && !propertyValue) {
+                element.removeAttribute(name);
+              } else {
+                element.setAttribute(name, String(propertyValue));
+              }
+            },
+          });
+        }
+      }
+
+      element.append(createFragment({ children }));
+
+      return element;
+    }
+  }
+};
+
+export const createFragment = ({ children }: JSX.IntrinsicAttributes) =>
+  new ObservableFragment(children);

package/src/lib/Enumerable.ts

@@ -0,0 +1,23 @@
+export class Enumerable<T> extends Array<
+  T extends readonly (infer Index)[] ? Index : never
+> {
+  constructor(value: T) {
+    super();
+
+    this.push(...(Array.isArray(value) ? value : []));
+  }
+}
+
+export type EnumerableItem<
+  T,
+  Index extends number = number,
+> = Enumerable<T>[Index];
+
+export interface Enumerator<T> {
+  <Index extends number>(
+    item: EnumerableItem<T, Index>,
+    index: Index,
+  ): PropertyKey;
+}
+
+export const asEnumerable = <T>(value: T) => new Enumerable<T>(value);

package/src/lib/ExtendableDictionary.ts

@@ -0,0 +1,54 @@
+import { Dictionary } from "lodash";
+import { UnaryFunction } from "rxjs";
+import { Future } from "../observable";
+import { keys } from "./keys";
+
+export type Extend<T, U> = Omit<T, keyof U> & U;
+
+export class ExtendableDictionary<T, U extends Dictionary<T>> {
+  constructor(
+    public currentValue: U,
+    private value = new Future<Dictionary<T>>(),
+  ) {}
+
+  complete(): U {
+    return this.value.completeWith(this.currentValue);
+  }
+
+  extend<V extends Dictionary<T>>(
+    value: (
+      currentValue: U,
+    ) => ({
+      property,
+    }: {
+      property: (constructor: UnaryFunction<Promise<string>, T>) => T;
+    }) => V,
+  ) {
+    return new ExtendableDictionary<T, Extend<U, V>>(
+      {
+        ...this.currentValue,
+        ...value(this.currentValue)({
+          property: (constructor) => {
+            const property = constructor(
+              this.value.once(
+                (value) =>
+                  new Promise<string>((resolve, reject) => {
+                    for (const key of keys(value)) {
+                      if (value[key] === property) {
+                        return resolve(key);
+                      }
+                    }
+
+                    reject();
+                  }),
+              ),
+            );
+
+            return property;
+          },
+        }),
+      },
+      this.value,
+    );
+  }
+}

package/src/lib/chunkWith.ts

@@ -0,0 +1,26 @@
+import { Comparator, uniqWith } from "lodash";
+
+export const chunkWith = <T>(
+  actions: T[],
+  comparator?: Comparator<T>,
+): T[][] => [
+  ...{
+    *[Symbol.iterator]() {
+      const prevActions = new Array<T>();
+
+      if (actions.length == 0) {
+        return;
+      }
+
+      for (const action of actions) {
+        if (uniqWith([...prevActions, action], comparator).length === 1) {
+          prevActions.push(action);
+        } else {
+          yield prevActions.splice(0, prevActions.length, action);
+        }
+      }
+
+      yield prevActions;
+    },
+  },
+];

package/src/lib/index.ts

@@ -0,0 +1,29 @@
+import { Observable, of } from "rxjs";
+import { isObservable } from "rxjs/internal/util/isObservable";
+import { MaybeArray, MaybeObservable } from "../types";
+
+export { chunkWith } from "./chunkWith";
+export {
+  asEnumerable,
+  type Enumerable,
+  type EnumerableItem,
+  type Enumerator,
+} from "./Enumerable";
+export { ExtendableDictionary } from "./ExtendableDictionary";
+export { keys } from "./keys";
+export { nthArg } from "./nthArg";
+export { property } from "./property";
+
+export const asArray = <T>(array: MaybeArray<T>): Array<T> =>
+  Array.isArray(array) ? array : [array];
+
+export const asObservable = <T>(value: MaybeObservable<T>): Observable<T> =>
+  isObservable(value) ? value : of(value);
+
+export const nonNullable = <T>(value: T): NonNullable<T> => {
+  if (value == null) {
+    throw new Error(`${value} is nil`);
+  }
+
+  return value;
+};

package/src/lib/keys.ts

@@ -0,0 +1,7 @@
+export const keys = <T>(value: T) => [
+  ...{
+    *[Symbol.iterator]() {
+      for (const key in value) yield key;
+    },
+  },
+];

package/src/lib/nthArg.ts

@@ -0,0 +1,6 @@
+export function nthArg<T>(n: 0): (arg0: T) => T;
+export function nthArg<T>(n: 1): (arg0: any, arg1: T) => T;
+export function nthArg<T>(n: 2): (arg0: any, arg1: any, arg2: T) => T;
+export function nthArg<T>(n: number): (...args: any[]) => T {
+  return (...args) => args[n];
+}

package/src/lib/property.ts

@@ -0,0 +1,4 @@
+export const property =
+  <T, K extends keyof T = keyof T>(key: K) =>
+  (value: T): T[K] =>
+    value[key];

package/src/multicast.ts

@@ -0,0 +1,79 @@
+import { memoize, thru } from "lodash";
+import { mergeAll, Observable, startWith, tap } from "rxjs";
+import { v4 } from "uuid";
+import { nonNullable, property } from "./lib";
+import { Future } from "./observable";
+import {
+  exchangeWith,
+  flatMap,
+  MulticastActionMessage,
+  MulticastClientMessage,
+  MulticastConnectMessageData,
+  sequence,
+  transform,
+} from "./operators";
+
+declare var self: ServiceWorkerGlobalScope;
+
+declare global {
+  interface ServiceWorkerGlobalScopeEventMap {
+    connect: MessageEvent;
+  }
+}
+
+const sliceActionsSequence = memoize(
+  <Seed>({ seed }: MulticastConnectMessageData<Seed>) =>
+    transform<MulticastActionMessage<any>>((actions) =>
+      actions.pipe(
+        startWith({
+          id: v4(),
+          type: "seedAction" as const,
+          data: {
+            seed,
+          },
+        }),
+      ),
+    ),
+  property("key"),
+);
+
+self.addEventListener("connect", ({ ports }) => {
+  for (const port of ports) {
+    thru(
+      new Future<Observable<MulticastActionMessage<any>>>(),
+      (sliceActions) =>
+        transform<MulticastActionMessage<any>, MulticastClientMessage>(
+          (actions) =>
+            sliceActions.pipe(
+              mergeAll(),
+              flatMap(({ origin, ...message }) =>
+                !message.sameOrigin || origin === port ? message : [],
+              ),
+              sequence(([action, previousAction]) =>
+                action.type === "seedAction"
+                  ? action
+                  : {
+                      ...action,
+                      previousId: nonNullable(previousAction).id,
+                    },
+              ),
+              exchangeWith<MulticastClientMessage, MulticastActionMessage<any>>(
+                port,
+              ),
+              flatMap((event) => {
+                if (event.type === "connect") {
+                  actions.subscribe(
+                    sliceActions.completeWith(sliceActionsSequence(event.data)),
+                  );
+
+                  return [];
+                }
+
+                return { ...event, origin: port };
+              }),
+              tap(actions),
+            ),
+        ),
+    ).subscribe();
+  }
+});

package/src/observable/Future.ts

@@ -0,0 +1,17 @@
+import { once } from "lodash";
+import { AsyncSubject, lastValueFrom, UnaryFunction } from "rxjs";
+
+export class Future<T> extends AsyncSubject<T> {
+  completeWith = once(<U extends T>(value: U): U => {
+    this.next(value);
+    this.complete();
+
+    return value;
+  });
+
+  once<U>(predicate: UnaryFunction<T, U | PromiseLike<U>>): Promise<U> {
+    return lastValueFrom(this).then(predicate);
+  }
+
+  then = this.once;
+}

package/src/observable/Signal.ts

@@ -0,0 +1,181 @@
+import { clone, isEqual, memoize } from "lodash";
+import { distinctUntilChanged, map, Observable, of, UnaryFunction } from "rxjs";
+import { TapObservable } from ".";
+import {
+  asEnumerable,
+  EnumerableItem,
+  Enumerator,
+  nonNullable,
+  nthArg,
+  property,
+} from "../lib";
+import { Transform } from "../types";
+
+class SignalEnumerator<T> {
+  constructor(private predicate: Enumerator<T> = nthArg(1)) {}
+
+  findIndex = (key: PropertyKey) => (value: T) =>
+    asEnumerable(value).map(this.predicate).indexOf(key);
+
+  enumerate = (value: T) => asEnumerable(value).map(this.predicate);
+}
+
+class SignalReflector<T> {
+  constructor(
+    private predicate: (
+      transform: Transform<T>,
+      callback: UnaryFunction<Transform<any>, void>,
+    ) => void = (transform, callback) => callback(transform),
+  ) {}
+
+  reflect = (transform: Transform<T>) =>
+    new Promise<Transform<unknown>>((callback) =>
+      this.predicate(transform, callback),
+    );
+
+  lift = <U>(
+    lift: UnaryFunction<Transform<U>, Transform<T>>,
+  ): SignalReflector<U> =>
+    new SignalReflector((transform, callback) =>
+      this.predicate(lift(transform), callback),
+    );
+}
+
+export class Signal<T> extends Observable<T> implements TapObservable<T> {
+  loading = of(false);
+
+  capture(): Signal<T> {
+    return this;
+  }
+
+  get value(): Observable<T> {
+    return this;
+  }
+
+  enumerator: SignalEnumerator<T>;
+  reflector: SignalReflector<T>;
+
+  constructor({
+    value,
+    enumerator = new SignalEnumerator(),
+    reflector = new SignalReflector(),
+  }: {
+    value: Observable<T>;
+    enumerator?: SignalEnumerator<T>;
+    reflector?: SignalReflector<T>;
+  }) {
+    super((subscriber) => value.subscribe(subscriber));
+
+    this.enumerator = enumerator;
+    this.reflector = reflector;
+  }
+
+  private project<U>(
+    project: UnaryFunction<T, U>,
+    lift: UnaryFunction<Transform<U>, Transform<T>>,
+    enumerate?: Enumerator<U>,
+  ): Signal<U> {
+    return new Signal({
+      value: this.pipe(map(project), distinctUntilChanged()),
+      enumerator: new SignalEnumerator(enumerate),
+      reflector: this.reflector.lift(lift),
+    });
+  }
+
+  protected property<K extends keyof T>(
+    key: K,
+    enumerate?: Enumerator<T[K]>,
+  ): Signal<T[K]> {
+    const findProperty: UnaryFunction<T, T[K]> = property(key);
+
+    return this.project(
+      findProperty,
+      (transform) => (value) => {
+        value = clone(value);
+
+        value[key] = transform(findProperty(value));
+
+        return value;
+      },
+      enumerate,
+    );
+  }
+
+  protected item(
+    key: PropertyKey,
+    enumerate?: Enumerator<EnumerableItem<T>>,
+  ): Signal<EnumerableItem<T>> {
+    const findIndex = this.enumerator.findIndex(key);
+    const findItem: UnaryFunction<T, EnumerableItem<T>> = (value) =>
+      nonNullable(asEnumerable(value)[findIndex(value)]);
+
+    return this.project(
+      findItem,
+      (transform) => (value) => {
+        if (Array.isArray((value = clone(value)))) {
+          value[findIndex(value)] = transform(findItem(value));
+        }
+
+        return value;
+      },
+      enumerate,
+    );
+  }
+
+  protected collection<K extends keyof EnumerableItem<T>>(
+    key: K,
+  ): Signal<EnumerableItem<T>[K][]> {
+    return this.project(
+      (value) => asEnumerable(value).map(property(key)),
+      (transform) => (value) => {
+        if (Array.isArray((value = clone(value)))) {
+          value.reduce(
+            (property, item, index) => (
+              (item[key] = property[index]),
+              property
+            ),
+            transform(value.map(property(key))),
+          );
+        }
+
+        return value;
+      },
+    );
+  }
+
+  list<U>(
+    iteratee: UnaryFunction<Signal<EnumerableItem<T>>, U>,
+  ): Observable<U[]> {
+    const memoizedIteratee = memoize<UnaryFunction<PropertyKey, U>>((key) =>
+      iteratee(this.item(key)),
+    );
+
+    return this.pipe(
+      map(this.enumerator.enumerate),
+      distinctUntilChanged((previous, current) => isEqual(previous, current)),
+      map((keys) => keys.map(memoizedIteratee)),
+    );
+  }
+}
+
+export class ComputedSignal<T> extends Signal<T> {
+  property<K extends keyof T>(
+    key: K,
+    enumerate?: Enumerator<T[K]>,
+  ): ComputedSignal<T[K]> {
+    return new ComputedSignal(super.property(key, enumerate));
+  }
+
+  item(
+    key: PropertyKey,
+    enumerate?: Enumerator<EnumerableItem<T>>,
+  ): ComputedSignal<EnumerableItem<T>> {
+    return new ComputedSignal(super.item(key, enumerate));
+  }
+
+  collection<K extends keyof EnumerableItem<T>>(
+    key: K,
+  ): ComputedSignal<EnumerableItem<T>[K][]> {
+    return new ComputedSignal(super.collection(key));
+  }
+}

package/src/observable/TapObservable.ts

@@ -0,0 +1,30 @@
+import { once } from "lodash";
+import {
+  BehaviorSubject,
+  combineLatest,
+  map,
+  MonoTypeOperatorFunction,
+  Observable,
+  share,
+} from "rxjs";
+import { tapSubscription } from "../operators";
+
+export interface TapObservable<T> extends Observable<T> {
+  loading: Observable<boolean>;
+}
+
+export class TapObservable<T> extends Observable<T> {
+  constructor(source: Observable<T>, loading: Observable<boolean>) {
+    const subscribed = new BehaviorSubject(false);
+
+    const intercept: MonoTypeOperatorFunction<T> = once((source) =>
+      source.pipe(tapSubscription(subscribed), share()),
+    );
+
+    super((subscriber) => source.pipe(intercept).subscribe(subscriber));
+
+    this.loading = combineLatest([loading, subscribed]).pipe(
+      map((values) => values.every(Boolean)),
+    );
+  }
+}

package/src/observable/TransformSubject.ts

@@ -0,0 +1,39 @@
+import { once } from "lodash";
+import {
+  Observable,
+  Observer,
+  ReplaySubject,
+  Subject,
+  UnaryFunction,
+  Unsubscribable,
+} from "rxjs";
+
+export class TransformSubject<T, U = T>
+  extends Observable<U>
+  implements Observer<T>, Unsubscribable
+{
+  next(value: T): void {
+    this.target.next(value);
+  }
+
+  error(err: any): void {
+    this.target.error(err);
+  }
+
+  complete(): void {
+    this.target.complete();
+  }
+
+  unsubscribe(): void {
+    this.target.unsubscribe();
+  }
+
+  constructor(
+    project: UnaryFunction<Subject<T>, Observable<U>>,
+    private target: Subject<T> = new ReplaySubject(),
+  ) {
+    project = once(project);
+
+    super((subscriber) => project(target).subscribe(subscriber));
+  }
+}