wizard.ts

import { TemplateResult } from "lit-html";

type Render = (tpl: TemplateResult) => void;

type Step<In, Out> = {
    template: (args: {
      next: (arg: Out) => void;
      state: In;
      back?: () => void;
    }) => TemplateResult;
  };

type Wizz<Out> = (
    cont: (out: Out, back: () => void | undefined) => void,
    render: Render
  ) => void;

const init = <Out>(step: Step<{}, Out>): Wizz<Out> =>
    (cont, render) => {
      const state = {};
      const back = undefined;
      const tpl = step.template({
        state,
        back,
        next: (state1) => cont({ ...state1, ...{} }, () => render(tpl)),
      });

      render(tpl);
    };

const push = <In1, Out extends In1, Out1>(
    wizz: Wizz<Out>,
    step: Step<In1, Out1>
  ): Wizz<Out & Out1> => {
    return (cont, render) => {
      wizz((state, back) => {
        const tpl = step.template({
          state,
          back,
          next: (state1) => cont({ ...state1, ...state }, () => render(tpl)),
        });
        render(tpl);
      }, render);
    };
  };

  class Wizard<Out> {
    constructor(
      public run: (arg: { cont: Cont<Out>; render: Render }) => void
    ) {}

    static init<Out>(step: Step<{}, Out>): Wizard<Out> {
      return new Wizard(({ cont, render }) => {
        const state = {};
        const back = undefined;
        const tpl = step.template({
          state,
          back,
          next: (state1) =>
            cont({ state: { ...state1, ...{} }, back: () => render(tpl) }),
        });
        render(tpl);
      });
    }

    /*
    push<In1, Out1>(
      step: Step<In1, Out1>
    ): Wizard<Ouut & Out1> {
        const wizz: Wizard<Out> = this;
        const run: (arg: { cont: Cont<Out>; render: Render}) => void = wizz.run;
      return new Wizard<Out & Out1>(({ cont, render }) =>
        run({
          cont: ({ state, back }: { state: Out; back?: () => void }) => {
            const tpl = step.template({
              state,
              back,
              next: (state1) =>
                cont({
                  state: { ...state1, ...state },
                  back: () => render(tpl),
                }),
            });
            render(tpl);
          },
          render,
        })
      );
    }
    */
  }