typescript(monadic): feat: rewrote everything I think

Signed-off-by: prescientmoon <git@moonythm.dev>

typescript/monadic/src/Component.ts

@@ -0,0 +1,143 @@
+import { mapRecord } from './Record';
+import { values } from './helpers';
+
+/**
+ * Helper type for dispatcher functions
+ */
+export type Dispatcher<A> = (action: A) => void;
+
+export type ComponentConfig<
+  T,
+  S,
+  A,
+  N extends string,
+  C extends ChildrenConfigs<N>
+> = {
+  render: (
+    state: S,
+    dispatch: Dispatcher<A>,
+    child: <K extends N>(key: K, name: string, input: C[K]['input']) => T
+  ) => T;
+  handleAction: (action: A, state: S) => S;
+  children: ChildrenTemplates<T, S, N, C>;
+};
+
+type GenericLens<T, U> = {
+  get: (v: T) => U;
+  set: (v: T, n: U) => T;
+};
+
+type Child<I = unknown, S = unknown> = {
+  input: I;
+  state: S;
+};
+
+type ChildrenConfigs<N extends string> = Record<N, Child>;
+
+type ChildrenTemplates<T, S, N extends string, C extends ChildrenConfigs<N>> = {
+  [K in N]: {
+    lens: (input: C[K]['input']) => GenericLens<S, C[K]['state']>;
+    component: ComponentConfig<T, C[K]['state'], unknown, string, {}>;
+  };
+};
+
+type Children<T, S, N extends string, C extends ChildrenConfigs<N>> = {
+  [K in N]: Record<
+    string,
+    {
+      component: Component<T, C[K]['state'], unknown, string, {}>;
+      lens: GenericLens<S, C[K]['state']>;
+    }
+  >;
+};
+
+export class Component<
+  T,
+  S,
+  A,
+  N extends string,
+  C extends ChildrenConfigs<N>
+> {
+  private childrenMap: Children<T, S, N, C>;
+  public constructor(
+    protected state: S,
+    private config: ComponentConfig<T, S, A, N, C>,
+    private pushDownwards: (state: S) => void
+  ) {
+    this.childrenMap = mapRecord(this.config.children, () => ({}));
+  }
+
+  protected pushStateUpwards(state: S) {
+    this.state = state;
+
+    for (const { component, lens } of this.children()) {
+      component.pushStateUpwards(lens.set(state, component.state));
+    }
+  }
+
+  public getTemplate(): T {
+    return this.config.render(
+      this.state,
+      value => this.dispatch(value),
+      (key, name, input) => {
+        const hasName = Reflect.has(this.childrenMap[key], name);
+
+        if (!hasName) {
+          const lens = this.config.children[key].lens(input);
+          const child = this.childrenMap[key] as Record<string, any>;
+
+          child[name] = {
+            lens,
+            component: new Component(
+              lens.get(this.state),
+              this.config.children[key].component,
+              state => this.pushDownwards(lens.set(this.state, state))
+            ),
+          };
+        }
+
+        return this.childrenMap[key][name].component.getTemplate();
+      }
+    );
+  }
+
+  public dispatch(action: A) {
+    const newState = this.config.handleAction(action, this.state);
+
+    this.pushStateUpwards(newState);
+    this.pushDownwards(newState);
+  }
+
+  /**
+   * Get a list of all the children of the component
+   */
+  private children() {
+    return values(this.childrenMap).flatMap(record =>
+      values(record)
+    ) as Children<T, S, N, C>[N][string][];
+  }
+}
+
+/**
+ * Create a component
+ *
+ * @param render The render function of the component
+ * @param handleAction Function used to handle actions related to the component.
+ * @param children Child slots for the component
+ */
+export const makeComponent = <
+  T,
+  S,
+  A,
+  N extends string,
+  C extends ChildrenConfigs<N>
+>(
+  render: ComponentConfig<T, S, A, N, C>['render'],
+  handleAction: ComponentConfig<T, S, A, N, C>['handleAction'],
+  children: ComponentConfig<T, S, A, N, C>['children']
+) => ({ render, handleAction, children });
+
+export const mkChild = <T, PS, I, S>(
+  lens: (input: I) => GenericLens<PS, S>,
+  component: ComponentConfig<T, S, unknown, string, {}>
+) => ({ lens, component });

typescript/monadic/src/Record.ts

@@ -0,0 +1,11 @@
+export const mapRecord = <K extends string | number, V, W>(
+  record: Record<K, V>,
+  mapper: (v: V, k: K) => W
+): Record<K, W> => {
+  return Object.fromEntries(
+    Object.entries(record).map(([key, value]) => [
+      key,
+      mapper(value as V, key as K),
+    ])
+  ) as any;
+};

typescript/monadic/src/component.ts

@@ -1,25 +0,0 @@
-import { IterableEmitter } from './iterableEmitter';
-
-export type Component<T, S, A> = {
-  render: (state: S, dispatch: (a: A) => () => void) => T;
-  handleActions: (action: A, state: S) => S;
-};
-
-export async function* runComponent<T, S, A>(
-  component: Component<T, S, A>,
-  initialState: S
-): AsyncGenerator<T> {
-  const emitter = new IterableEmitter(initialState);
-
-  const dispatch = (state: S) => (action: A) => {
-    const newState = component.handleActions(action, state);
-
-    return () => {
-      emitter.next(newState);
-    };
-  };
-
-  for await (const state of emitter) {
-    yield component.render(state, dispatch(state));
-  }
-}

typescript/monadic/src/environment.ts

@@ -1,18 +1,20 @@
-import { Component, runComponent } from './component';
+import { ComponentConfig, Component } from './Component';
 
 export type EnvConfig<T, S, A> = {
   render: (template: T, parent: HTMLElement) => void;
   parent: HTMLElement;
-  component: Component<T, S, A>;
+  component: ComponentConfig<T, S, A, string, {}>;
   initialState: S;
 };
 
-export const runUi = async <T, S, A>(
-  config: EnvConfig<T, S, A>
-): Promise<void> => {
-  const component = runComponent(config.component, config.initialState);
+export const runUi = <T, S, A>(config: EnvConfig<T, S, A>) => {
+  const reRender = () => config.render(component.getTemplate(), config.parent);
 
-  for await (const template of component) {
-    config.render(template, config.parent);
-  }
+  const component = new Component(config.initialState, config.component, _ => {
+    reRender();
+  });
+
+  reRender();
+
+  return component;
 };

typescript/monadic/src/helpers.ts

@@ -0,0 +1,6 @@
+/**
+ * Typesafe version of Object.values
+ */
+export const values = Object.values as <T extends keyof object, U>(
+  object: Record<T, U>
+) => U[];

typescript/monadic/src/index.ts

@@ -1 +1,7 @@
-export * from './environment';
+export { runUi, EnvConfig } from './environment';
+export {
+  ComponentConfig,
+  Dispatcher,
+  makeComponent,
+  mkChild,
+} from './Component';

typescript/monadic/src/iterableEmitter.ts

@@ -10,6 +10,10 @@ export class IterableEmitter<T> {
 
   public constructor(private state: T) {}
 
+  public alter(mapper: (f: T) => T) {
+    this.next(mapper(this.state));
+  }
+
   async *[Symbol.asyncIterator](): AsyncGenerator<T> {
     const createPromise = () =>
       new Promise<T>(resolve => {