typescript(monadic): feat: component builders

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

typescript/monadic/.vscode/settings.json

@@ -4,6 +4,7 @@
         "adriel",
         "esnext",
         "matei",
+        "pipeable",
         "todos",
         "tslib"
     ]

typescript/monadic/demos/basic/main.ts

@@ -1,5 +1,20 @@
-import { runUi, makeComponent, Dispatcher, mkChild } from '../../src';
+import {
+  runUi,
+  makeComponent,
+  Dispatcher,
+  ComponentSpec,
+  withAction,
+  mkChild,
+  buildSpec,
+  withState,
+  emptySpec,
+  withTemplate,
+  withChild,
+} from '../../src';
 import { render, html, TemplateResult } from 'lit-html';
+import { pipe } from 'fp-ts/lib/pipeable';
+
+const baseSpec = pipe(emptySpec, withTemplate<TemplateResult>());
 
 type TodoState = {
   name: string;
@@ -8,8 +23,12 @@ type TodoState = {
 
 type TodoAction = 'complete';
 
-const todo = makeComponent(
-  ({ name, done }: TodoState, { dispatch }) => {
+const todo = pipe(
+  baseSpec,
+  withAction<TodoAction>(),
+  withState<TodoState>(),
+  buildSpec(
+    ({ name, done }, { dispatch }) => {
       return html`
         <div>
           Name: ${name} Completed: ${done}
@@ -28,6 +47,7 @@ const todo = makeComponent(
       return state;
     },
     {}
+  )
 );
 
 type TodoListState = {
@@ -42,8 +62,13 @@ type TodoListAction =
     }
   | 'create';
 
-const todoList = makeComponent(
-  (state: TodoListState, dispatch: Dispatcher<TodoListAction>, child) => {
+const todoList = pipe(
+  emptySpec,
+  withAction<TodoListAction>(),
+  withState<TodoListState>(),
+  withChild<'todo', number, TodoState, null>(),
+  buildSpec(
+    (state, { dispatch, child }) => {
       return html`
         <div>
           <input
@@ -52,7 +77,9 @@ const todoList = makeComponent(
           />
           <button @click=${() => dispatch('create')}>Add todo</button>
           <div>
-          ${state.todos.map((_, index) => child('todo', String(index), index))}
+            ${state.todos.map((_, index) =>
+              child('todo', String(index), index)
+            )}
           </div>
         </div>
       `;
@@ -92,6 +119,7 @@ const todoList = makeComponent(
         todo
       ),
     }
+  )
 );
 
 runUi({

typescript/monadic/src/Builder.ts

@@ -0,0 +1,123 @@
+import {
+  ComponentConfig,
+  ChildrenConfigs,
+  ChildTemplate,
+  RenderFunction,
+  Child,
+} from './Component';
+import { GenericLens } from './helpers';
+import { constant, identity } from 'fp-ts/es6/function';
+import * as O from 'fp-ts/es6/Option';
+
+type ComponentBuilder = <
+  T,
+  S,
+  A,
+  O,
+  N extends string,
+  C extends ChildrenConfigs<N>
+>(
+  render: ComponentConfig<T, S, A, O, N, C>['render'],
+  handleAction: ComponentConfig<T, S, A, O, N, C>['handleAction'],
+  children: ComponentConfig<T, S, A, O, N, C>['children']
+) => ComponentConfig<T, S, A, O, N, C>;
+
+/**
+ * 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: ComponentBuilder = (
+  render,
+  handleAction,
+  children
+) => ({ render, handleAction, children });
+
+type ChildBuilder = <T, PS, PA, S, I, O>(
+  lens: (input: I) => GenericLens<PS, S>,
+  component: ComponentConfig<T, S, unknown, O, string, {}>,
+  handleOutput?: (input: I, output: O) => O.Option<PA>
+) => ChildTemplate<T, PS, PA, S, I, O>;
+
+export const mkChild: ChildBuilder = (
+  lens,
+  component,
+  handleOutput = constant(O.none)
+) => ({ lens, component, handleOutput });
+
+export type ComponentSpec<
+  T,
+  S,
+  A,
+  O,
+  N extends string,
+  C extends ChildrenConfigs<N>
+> = [T, S, A, O, N, C];
+
+export const withChild = constant(identity) as <
+  N1 extends keyof any,
+  I,
+  S,
+  O
+>() => <T, PS, A, PO, N0 extends string, 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>() => <
+  T,
+  S,
+  A0,
+  O,
+  N extends string,
+  C extends ChildrenConfigs<N>
+>(
+  spec: ComponentSpec<T, S, A0, O, N, C>
+) => ComponentSpec<T, S, A1, O, N, C>;
+
+export const withState = constant(identity) as <S1>() => <
+  T,
+  S0,
+  A,
+  O,
+  N extends string,
+  C extends ChildrenConfigs<N>
+>(
+  spec: ComponentSpec<T, S0, A, O, N, C>
+) => ComponentSpec<T, S1, A, O, N, C>;
+
+export const withTemplate = constant(identity) as <T1>() => <
+  T0,
+  S,
+  A,
+  O,
+  N extends string,
+  C extends ChildrenConfigs<N>
+>(
+  spec: ComponentSpec<T0, S, A, O, N, C>
+) => ComponentSpec<T1, S, A, O, N, C>;
+
+export const buildSpec = (constant(makeComponent) as any) as <
+  T,
+  S,
+  A,
+  O,
+  N extends string,
+  C extends ChildrenConfigs<N>
+>(
+  render: RenderFunction<T, S, A, O, N, C>,
+  handleAction: ComponentConfig<T, S, A, O, N, C>['handleAction'],
+  children: ComponentConfig<T, S, A, O, N, C>['children']
+) => (
+  spec: ComponentSpec<T, S, A, O, N, C>
+) => ComponentConfig<T, S, A, O, N, C>;
+
+export const emptySpec = (null as any) as ComponentSpec<
+  unknown,
+  unknown,
+  unknown,
+  null,
+  string,
+  {}
+>;

typescript/monadic/src/Component.ts

@@ -1,5 +1,5 @@
 import { mapRecord } from './Record';
-import { values } from './helpers';
+import { values, GenericLens } from './helpers';
 import O from 'fp-ts/es6/Option';
 import { constant } from 'fp-ts/es6/function';
 
@@ -20,6 +20,15 @@ export type Communicate<
   raise: (event: O) => void;
 };
 
+export type RenderFunction<
+  T,
+  S,
+  A,
+  O,
+  N extends string,
+  C extends ChildrenConfigs<N>
+> = (state: S, communicate: Communicate<T, A, O, N, C>) => T;
+
 export type ComponentConfig<
   T,
   S,
@@ -28,37 +37,40 @@ export type ComponentConfig<
   N extends string,
   C extends ChildrenConfigs<N>
 > = {
-  render: (state: S, communicate: Communicate<T, A, O, N, C>) => T;
+  render: RenderFunction<T, S, A, O, N, C>;
   handleAction: (action: A, state: S) => S;
-  children: ChildrenTemplates<T, S, A, O, N, C>;
+  children: ChildrenTemplates<T, S, A, N, C>;
 };
 
-type GenericLens<T, U> = {
-  get: (v: T) => U;
-  set: (v: T, n: U) => T;
-};
-
-type Child<I = unknown, S = unknown, O = unknown> = {
+export type Child<I = unknown, S = unknown, O = unknown> = {
   input: I;
   state: S;
   output: O;
 };
 
-type ChildrenConfigs<N extends string> = Record<N, Child>;
+export type ChildrenConfigs<N extends string> = Record<N, Child>;
+
+export type ChildTemplate<T, PS, PA, S, I, O> = {
+  lens: (input: I) => GenericLens<PS, S>;
+  component: ComponentConfig<T, S, unknown, O, string, {}>;
+  handleOutput: (input: I, output: O) => O.Option<PA>;
+};
 
 type ChildrenTemplates<
   T,
   S,
   A,
-  O,
   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'], O, unknown, string, {}>;
-    handleOutput: (input: C[K]['input'], output: C[K]['output']) => O.Option<A>;
-  };
+  [K in N]: ChildTemplate<
+    T,
+    S,
+    A,
+    C[K]['state'],
+    C[K]['input'],
+    C[K]['output']
+  >;
 };
 
 type Children<T, S, N extends string, C extends ChildrenConfigs<N>> = {
@@ -143,29 +155,3 @@ export class Component<
     return values(this.childrenMap).flatMap(record => values(record)) as any;
   }
 }
-
-/**
- * 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,
-  O,
-  N extends string,
-  C extends ChildrenConfigs<N>
->(
-  render: ComponentConfig<T, S, A, O, N, C>['render'],
-  handleAction: ComponentConfig<T, S, O, A, N, C>['handleAction'],
-  children: ComponentConfig<T, S, A, O, N, C>['children']
-) => ({ render, handleAction, children });
-
-export const mkChild = <T, PS, A, I, S, O>(
-  lens: (input: I) => GenericLens<PS, S>,
-  component: ComponentConfig<T, S, A, O, string, {}>,
-  handleOutput: (input: I, output: O) => O.Option<A> = constant(O.none)
-) => ({ lens, component, handleOutput });

typescript/monadic/src/helpers.ts

@@ -4,3 +4,11 @@
 export const values = Object.values as <T extends keyof object, U>(
   object: Record<T, U>
 ) => U[];
+
+/**
+ * Library agnostic way of expressing a lens
+ */
+export type GenericLens<T, U> = {
+  get: (v: T) => U;
+  set: (v: T, n: U) => T;
+};

typescript/monadic/src/index.ts

@@ -1,7 +1,14 @@
 export { runUi, EnvConfig } from './environment';
+export { ComponentConfig, Dispatcher } from './Component';
+
 export {
-  ComponentConfig,
-  Dispatcher,
   makeComponent,
   mkChild,
-} from './Component';
+  ComponentSpec,
+  withAction,
+  emptySpec,
+  withState,
+  buildSpec,
+  withTemplate,
+  withChild,
+} from './Builder';