typescript(monadic): feat: working event raising

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

typescript/monadic/src/Builder.ts

@@ -6,9 +6,12 @@ import {
   Child,
 } from './Component';
 import { GenericLens } from './helpers';
-import { constant, identity } from 'fp-ts/es6/function';
+import { constant, identity, flow } from 'fp-ts/es6/function';
 import * as O from 'fp-ts/es6/Option';
 
+// This is here since all the builders are pretty much this
+const alwaysIdentity = constant(identity);
+
 type ComponentBuilder = <
   T,
   S,
@@ -47,6 +50,9 @@ export const mkChild: ChildBuilder = (
   handleOutput = constant(O.none)
 ) => ({ lens, component, handleOutput });
 
+/**
+ * Structure which keeps track of the different types needed to build a component.
+ */
 export type ComponentSpec<
   T,
   S,
@@ -56,16 +62,29 @@ export type ComponentSpec<
   C extends ChildrenConfigs<N>
 > = [T, S, A, O, N, C];
 
-export const withChild = constant(identity) as <
+/**
+ * Add a child to a spec (type only, the implementation is given when building the spec)
+ */
+export const withChild = alwaysIdentity as <
   N1 extends keyof any,
   I,
   S,
   O
->() => <T, PS, A, PO, N0 extends string, C extends ChildrenConfigs<N0>>(
+>() => <
+  T,
+  PS,
+  A,
+  PO,
+  N0 extends Exclude<string, N1>,
+  C extends ChildrenConfigs<N0>
+>(
   spec: ComponentSpec<T, PS, A, PO, N0, C>
 ) => ComponentSpec<T, PS, A, PO, N1 & N0, C & Record<N1, Child<I, S, O>>>;
 
-export const withAction = constant(identity) as <A1>() => <
+/**
+ * Specify the action type of a spec
+ */
+export const withAction = alwaysIdentity as <A1>() => <
   T,
   S,
   A0,
@@ -76,7 +95,24 @@ export const withAction = constant(identity) as <A1>() => <
   spec: ComponentSpec<T, S, A0, O, N, C>
 ) => ComponentSpec<T, S, A1, O, N, C>;
 
-export const withState = constant(identity) as <S1>() => <
+/**
+ * Specify the output type of a spec
+ */
+export const withOutput = alwaysIdentity as <O1>() => <
+  T,
+  S,
+  A,
+  O0,
+  N extends string,
+  C extends ChildrenConfigs<N>
+>(
+  spec: ComponentSpec<T, S, A, O0, N, C>
+) => ComponentSpec<T, S, A, O1, N, C>;
+
+/**
+ * Specify the type of state in a spec
+ */
+export const withState = alwaysIdentity as <S1>() => <
   T,
   S0,
   A,
@@ -87,7 +123,10 @@ export const withState = constant(identity) as <S1>() => <
   spec: ComponentSpec<T, S0, A, O, N, C>
 ) => ComponentSpec<T, S1, A, O, N, C>;
 
-export const withTemplate = constant(identity) as <T1>() => <
+/**
+ * Specify what a component renders to
+ */
+export const withTemplate = alwaysIdentity as <T1>() => <
   T0,
   S,
   A,
@@ -98,7 +137,10 @@ export const withTemplate = constant(identity) as <T1>() => <
   spec: ComponentSpec<T0, S, A, O, N, C>
 ) => ComponentSpec<T1, S, A, O, N, C>;
 
-export const buildSpec = (constant(makeComponent) as any) as <
+/**
+ * Takes implementations of the components watching the spec and creates the component
+ */
+export const buildSpec = flow(makeComponent, constant) as <
   T,
   S,
   A,

typescript/monadic/src/Component.ts

@@ -1,25 +1,25 @@
 import { mapRecord } from './Record';
-import { values, GenericLens } from './helpers';
-import O from 'fp-ts/es6/Option';
-import { constant } from 'fp-ts/es6/function';
+import { values, GenericLens, areEqual } from './helpers';
+import * as O from 'fp-ts/es6/Option';
+import { constant, flow } from 'fp-ts/es6/function';
 
 /**
  * Helper type for dispatcher functions
  */
 export type Dispatcher<A> = (action: A) => void;
 
-export type Communicate<
-  T,
-  A,
-  O,
-  N extends string,
-  C extends ChildrenConfigs<N>
-> = {
+export type Communicate<A, O> = {
   dispatch: Dispatcher<A>;
-  child: <K extends N>(key: K, name: string, input: C[K]['input']) => T;
   raise: (event: O) => void;
 };
 
+export type CanAddChildren<
+  T,
+  N extends string,
+  C extends ChildrenConfigs<N>
+> = {
+  child: <K extends N>(key: K, name: string, input: C[K]['input']) => T;
+};
 export type RenderFunction<
   T,
   S,
@@ -27,7 +27,7 @@ export type RenderFunction<
   O,
   N extends string,
   C extends ChildrenConfigs<N>
-> = (state: S, communicate: Communicate<T, A, O, N, C>) => T;
+> = (state: S, communicate: Communicate<A, O> & CanAddChildren<T, N, C>) => T;
 
 export type ComponentConfig<
   T,
@@ -38,7 +38,7 @@ export type ComponentConfig<
   C extends ChildrenConfigs<N>
 > = {
   render: RenderFunction<T, S, A, O, N, C>;
-  handleAction: (action: A, state: S) => S;
+  handleAction: (action: A, state: S, communication: Communicate<A, O>) => S;
   children: ChildrenTemplates<T, S, A, N, C>;
 };
 
@@ -102,51 +102,98 @@ export class Component<
   public constructor(
     protected state: S,
     private config: ComponentConfig<T, S, A, O, N, C>,
+    private raise: Communicate<A, O>['raise'],
     private pushDownwards: (state: S) => void
   ) {
     this.childrenMap = mapRecord(this.config.children, constant({}));
   }
 
-  protected pushStateUpwards(state: S) {
+  /**
+   * Do something only if the state changed.
+   *
+   * @param state The new state.
+   * @param then The thing you want to do with the state
+   */
+  private setStateAndThen = (then: (state: S) => unknown) => (state: S) => {
+    if (areEqual(state, this.state)) {
+      return;
+    }
+
     this.state = state;
 
+    then(state);
+  };
+
+  /**
+   * Propagate a new state upstream the tree
+   *
+   * @param state The new state
+   */
+  protected pushStateUpwards = this.setStateAndThen(state => {
     for (const { component, lens } of this.children()) {
-      component.pushStateUpwards(lens.set(state, component.state));
+      component.pushStateUpwards(lens.get(state));
     }
+  });
+
+  /**
+   * Function to get a child or create it if it doesn't exist
+   */
+  private getChild: CanAddChildren<T, N, C> = {
+    child: (key, name, input) => {
+      const hasName = Reflect.has(this.childrenMap[key], name);
+
+      if (!hasName) {
+        const config = this.config.children[key];
+        const lens = config.lens(input);
+        const raise = flow(config.handleOutput, O.map(this.dispatch));
+        const child = this.childrenMap[key] as Record<string, any>;
+
+        child[name] = {
+          lens,
+          component: new Component(
+            lens.get(this.state),
+            this.config.children[key].component,
+            event => raise(input, event),
+            childState => {
+              const newState = lens.set(this.state, childState);
+
+              this.setStateAndThen(this.pushDownwards)(newState);
+            }
+          ),
+        };
+      }
+
+      return this.childrenMap[key][name].component.getTemplate();
+    },
+  };
+
+  private getCommunication(): Communicate<A, O> {
+    return {
+      dispatch: value => this.dispatch(value),
+      raise: this.raise,
+    };
   }
 
   public getTemplate(): T {
     return this.config.render(this.state, {
-      dispatch: value => this.dispatch(value),
-      raise: _ => undefined,
-      child: (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();
-      },
+      ...this.getCommunication(),
+      ...this.getChild,
     });
   }
 
-  public dispatch(action: A) {
-    const newState = this.config.handleAction(action, this.state);
+  /**
+   * Dispatch an arbitrary action on the component.
+   */
+  public dispatch = (action: A) => {
+    const newState = this.config.handleAction(
+      action,
+      this.state,
+      this.getCommunication()
+    );
 
     this.pushStateUpwards(newState);
     this.pushDownwards(newState);
-  }
+  };
 
   /**
    * Get a list of all the children of the component

typescript/monadic/src/environment.ts

@@ -1,4 +1,5 @@
 import { ComponentConfig, Component } from './Component';
+import { IterableEmitter } from './iterableEmitter';
 
 export type EnvConfig<T, S, A, O> = {
   render: (template: T, parent: HTMLElement) => void;
@@ -7,14 +8,29 @@ export type EnvConfig<T, S, A, O> = {
   initialState: S;
 };
 
-export const runUi = <T, S, A, O>(config: EnvConfig<T, S, A, O>) => {
+// Not an arrow function cause it's a generator
+/**
+ * Run a component and render it to the dom
+ */
+export async function* runUi<T, S, A, O>(config: EnvConfig<T, S, A, O>) {
   const reRender = () => config.render(component.getTemplate(), config.parent);
 
-  const component = new Component(config.initialState, config.component, _ => {
-    reRender();
-  });
+  const outputEmitter = new IterableEmitter<null | O>(null);
+
+  const component = new Component(
+    config.initialState,
+    config.component,
+    outputEmitter.next,
+    _ => {
+      reRender();
+    }
+  );
 
   reRender();
 
-  return component;
-};
+  for await (const event of outputEmitter) {
+    if (event) {
+      yield event;
+    }
+  }
+}

typescript/monadic/src/helpers.ts

@@ -12,3 +12,9 @@ export type GenericLens<T, U> = {
   get: (v: T) => U;
   set: (v: T, n: U) => T;
 };
+
+/**
+ * Some basic equality to not re-render with the same state
+ */
+export const areEqual = <T>(a: T, b: T) =>
+  a === b || JSON.stringify(a) === JSON.stringify(b);

typescript/monadic/src/index.ts

@@ -11,4 +11,5 @@ export {
   buildSpec,
   withTemplate,
   withChild,
+  withOutput,
 } from './Builder';