@use-funnel 개발기 #2: 기존 라이브러리를 어떻게 뜯어 고칠 것인가?

// @use-funnel/core
export function createUseFunnel(useRouter) {
	return function useFunnel(options) {
		const router = useRouter(options);
		// ... 퍼널 관련 코드들
	}
}

import { createUseFunnel } from '@use-funnel/core';
import { useMemo, useState } from 'react';

export const useFunnel = createUseFunnel(({ id, initialState }) => {
  const [history, setHistory] = useState([initialState]);
  const [currentIndex, setCurrentIndex] = useState(0);
  return useMemo(
    () => ({
      history,
      currentIndex,
      currentState: history[currentIndex],
      push(state) {
        setHistory((prev) => [...prev.slice(0, currentIndex + 1), state]);
        setCurrentIndex((prev) => prev + 1);
      },
      replace(state) {
        setHistory((prev) => {
          const newHistory = prev.slice(0, currentIndex + 1);
          newHistory[currentIndex] = state;
          return newHistory;
        });
      },
      go: (index) => setCurrentIndex((prev) => prev + index),
    }),
    [history, currentIndex],
  );
});

// 기존의 useFunnel()
const [Funnel, setFunnel] = useFunnel(['AStep', 'BStep', 'CStep'] as const);

// 새로운 useFunnel()
const funnel = useFunnel<{
  AStep: { foo?: string; bar?: string };
  BStep: { foo: string; bar?: string };
  CStep: { foo: string; bar: string };
}>({
  initial: {
    step: 'AStep',
    context: {}
  }
});

// 기존 렌더링
<Funnel>
  <Funnel.Step name="AStep"><AStep /></Funnel.Step>
  <Funnel.Step name="BStep"><BStep /></Funnel.Step>
  <Funnel.Step name="CStep"><CStep /></Funnel.Step>
</Funnel>

// 새로운 방식
switch (funnel.step) {
  case 'AStep': return <AStep />;
  case 'BStep': return <BStep foo={funnel.context.foo} />;
  case 'CStep': return <CStep foo={funnel.context.foo} bar={funnel.context.bar} />;
}

switch (funnel.step) {
  case 'AStep': {
	  return (
		  <AStep
			  // BStep으로 이동하기 위해서는 `foo` 가 반드시 필요!
			  onNext={foo => funnel.history.push('BStep', { foo })}
		  />
	  );
  }
  case 'BStep': {
	  return (
		  <BStep
			  foo={funnel.context.foo}
			  onNext={bar => funnel.history.push('CStep', { bar })}
			  // AStep으로 이동하기 위해서는 아무런 조건이 없어도 되므로 상태를 안 넘겨줘도 됨.
			  onReplace={() => funnel.history.replace('AStep')}
		  />
	  );
  }
  case 'CStep': return <CStep foo={funnel.context.foo} bar={funnel.context.bar} />;
}

type CurrentStep = { foo: string; bar?: string };
type TargetStep = { foo: string; bar: string };

// { foo?: string; bar: string }
// CurrentStep에서 이미 foo가 존재하기 때문에 foo를 optional하게 요구합니다.
type Input = CompareMergeContext<CurrentStep, TargetStep>;

import { z } from 'zod';

const AStepZod = z.object({ foo: z.string().optional(), bar: z.string().optional() });
const BStepZod = AStepZod.required({ foo: true });
const CStepZod = BStepZod.required({ bar: true });

const funnel = useFunnel({
  steps: {
    AStep: { parse: AStepZod.parse },
    BStep: { parse: BStepZod.parse },
    CStep: { parse: CStepZod.parse },
  },
  initial: {
    step: 'AStep',
    context: {},
  }
});

const funnel = useFunnel(...);

<funnel.Render
	AStep={({ history }) => (
		<AStep
		  // BStep으로 이동하기 위해서는 `foo` 가 반드시 필요!
		  onNext={foo => history.push('BStep', { foo })}
	  />
  )}
  BStep={({ context, history }) => (
	  <BStep
		  foo={context.foo}
		  onNext={bar => history.push('CStep', { bar })}
		  // AStep으로 이동하기 위해서는 아무런 조건이 없어도 되므로 상태를 안 넘겨줘도 됨.
		  onReplace={() => history.replace('AStep')}
	  />
  )}
  CStep={({ context }) => <CStep foo={context.foo} bar={context.bar} />}
/>

<funnel.Render
	AStep={({ history }) => (
		<AStep
		  // BStep으로 이동하기 위해서는 `foo` 가 반드시 필요!
		  onNext={foo => history.push('BStep', { foo })}
	  />
  )}
  BStep={funnel.Render.overlay(({ context, history }) => (
	  <BStep
		  foo={context.foo}
		  onNext={bar => history.push('CStep', { bar })}
		  // AStep으로 이동하기 위해서는 아무런 조건이 없어도 되므로 상태를 안 넘겨줘도 됨.
		  onReplace={() => history.replace('AStep')}
	  />
	)}
  CStep={({ context }) => (
	  <CStep foo={context.foo} bar={context.bar} />
  )}
/>

const renderEntires: Array<{ step: string; element: React.ReactNode }> = [];

// Overlay를 렌더링할 때, renderBeforeOverlay에 먼저 렌더링할 단계의 컴포넌트들을 배열(renderEntires)에 추가합니다.
if (render.type === 'overlay') {
  declare const renderBeforeOverlay: Array<{ step: string; element: React.ReactNode }>;
  renderEntries.push(...renderBeforeOverlay);
}

renderEntires.push(render(funnelRenderStep));

return (
  <Fragment>
    {renderEntires.map((entry) => (
      <Fragment key={entry.step}>{entry.element}</Fragment>
    ))}
  </Fragment>
);

<funnel.Render
	AStep={funnel.Render.with({
	  events: {
	    GoBStepWithFoo(foo: string, { history }) {
	      history.push('BStep', { foo })
	    },
	    GoBStepWithBar(bar: number, { history }) {
	      history.push('BStep', { bar })
	    },
	    GoCStep(_, { history }) {
	      history.push('CStep')
	    }
	  },
	  render({ dispatch }) {
		  return (
			  <AStep
			    onFoo={foo => dispatch('GoBStepWithFoo', foo)}
			    onBar={bar => dispatch('GoBStepWithBar', bar)}
			    onC={() => dispatch('GoCStep')}
			  />
		  );
	  }
	})}
/>