@modular-component/core 0.1.2 → 0.1.4

package/dist/types/stage.d.ts

@@ -0,0 +1,41 @@
+/**
+ * Helper for manipulating stages and stage tuples
+ */
+import { At, Before, Reduce, After, OneLess } from './utils';
+export interface ModularStages<Args = any, Value = any> {
+}
+declare type StageRecord = {
+    stage: keyof ModularStages;
+    value: unknown;
+};
+export declare type StageTuple = StageRecord[];
+export declare type AddStage<List extends StageTuple, Stage extends StageRecord> = [
+    ...List,
+    Stage
+];
+export declare type ReplaceStageAt<List extends StageTuple, Stage extends StageRecord, At extends number | string> = {
+    [Index in keyof List]: Index extends At ? List[Index]['stage'] extends Stage['stage'] ? Stage : List[Index] : List[Index];
+};
+declare type ReplaceStage<List extends StageTuple, Stage extends StageRecord, At extends number | string = never> = [At] extends [never] ? {
+    [Index in keyof List]: List[Index]['stage'] extends Stage['stage'] ? Stage : List[Index];
+} : ReplaceStageAt<List, Stage, At>;
+export declare type ExtractStage<List extends StageTuple, Stage extends symbol, Union = List[number]> = Union extends {
+    stage: Stage;
+    value: infer U;
+} ? {
+    stage: Stage;
+    value: U;
+} : never;
+export declare type UpsertStage<List extends StageTuple, Stage extends StageRecord, At extends number = never> = [ExtractStage<List, Stage['stage']>] extends [never] ? AddStage<List, Stage> : ReplaceStage<List, Stage, At>;
+declare type IsolateStage<Tuple extends StageTuple, Stage extends symbol> = {
+    [key in keyof Tuple]: Tuple[key]['stage'] extends Stage ? key : never;
+};
+export declare type StageIndices<Tuple extends StageTuple, Stage extends symbol> = Reduce<IsolateStage<Tuple, Stage>>;
+export declare type AtStage<Tuple extends StageTuple, Index extends number | string> = At<Tuple, Index> extends StageTuple ? At<Tuple, Index> : [];
+export declare type BeforeStage<Tuple extends StageTuple, Index extends number | string> = Before<Tuple, Index> extends StageTuple ? Before<Tuple, Index> : [];
+declare type AfterStage<Tuple extends StageTuple, Index extends number | string> = After<Tuple, Index> extends StageTuple ? After<Tuple, Index> : [];
+export declare type CleanUpStages<Tuple extends StageTuple> = {
+    [key in keyof Tuple]: StageIndices<OneLess<AfterStage<Tuple, key>>, Tuple[key]['stage']>['length'] extends 0 ? Tuple[key] : never;
+};
+export {};
+//# sourceMappingURL=stage.d.ts.map

package/dist/types/stage.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"stage.d.ts","sourceRoot":"","sources":["../../src/types/stage.ts"],"names":[],"mappings":"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"}

package/dist/types/stage.js

@@ -0,0 +1,5 @@
+/**
+ * Helper for manipulating stages and stage tuples
+ */
+export {};
+//# sourceMappingURL=stage.js.map

package/dist/types/stage.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"stage.js","sourceRoot":"","sources":["../../src/types/stage.ts"],"names":[],"mappings":"AAAA;;GAEG"}

package/dist/types/utils.d.ts

@@ -0,0 +1,24 @@
+/**
+ * Generic type helpers (tuple, union, object...)
+ */
+export declare type OneLess<Tuple extends unknown[]> = Tuple extends [
+    unknown,
+    ...infer Rest
+] ? Rest : Tuple;
+export declare type Before<Tuple extends unknown[], Index extends string | number> = `${Tuple['length']}` extends `${Index}` ? Tuple : Tuple extends [...infer Keep, infer Drop] ? Before<Keep, Index> : never;
+export declare type After<Tuple extends unknown[], Index extends string | number, Rest extends unknown[] = []> = `${Rest['length']}` extends `${Index}` ? Tuple : Tuple extends [infer Drop, ...infer Keep] ? After<Keep, Index, [...Rest, Drop]> : never;
+export declare type At<Tuple extends unknown[], Index extends string | number> = `${OneLess<Tuple>['length']}` extends `${Index}` ? Tuple : Tuple extends [...infer Keep, infer Drop] ? At<Keep, Index> : never;
+export declare type Reduce<T extends unknown[]> = T extends [...infer R, infer L] ? [L] extends [never] ? [...Reduce<R>] : [...Reduce<R>, L] : T;
+export declare type ToIndices<T extends unknown[]> = {
+    [key in keyof T]: key;
+}[number];
+export declare type Last<T extends unknown[]> = T extends [...infer R, infer L] ? L : never;
+export declare type UnionToIntersection<U> = [U] extends [never] ? never : (U extends infer V ? (k: U) => void : never) extends (k: infer I) => void ? I : never;
+declare type NonNeverKeys<Obj extends {}> = {
+    [key in keyof Obj]: Obj[key] extends never ? never : key;
+}[keyof Obj];
+export declare type FilterNever<Obj extends {}> = {
+    [key in NonNeverKeys<Obj>]: Obj[key];
+};
+export {};
+//# sourceMappingURL=utils.d.ts.map

package/dist/types/utils.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"utils.d.ts","sourceRoot":"","sources":["../../src/types/utils.ts"],"names":[],"mappings":"AAAA;;GAEG;AAGH,oBAAY,OAAO,CAAC,KAAK,SAAS,OAAO,EAAE,IAAI,KAAK,SAAS;IAC3D,OAAO;IACP,GAAG,MAAM,IAAI;CACd,GACG,IAAI,GACJ,KAAK,CAAA;AACT,oBAAY,MAAM,CAChB,KAAK,SAAS,OAAO,EAAE,EACvB,KAAK,SAAS,MAAM,GAAG,MAAM,IAC3B,GAAG,KAAK,CAAC,QAAQ,CAAC,EAAE,SAAS,GAAG,KAAK,EAAE,GACvC,KAAK,GACL,KAAK,SAAS,CAAC,GAAG,MAAM,IAAI,EAAE,MAAM,IAAI,CAAC,GACzC,MAAM,CAAC,IAAI,EAAE,KAAK,CAAC,GACnB,KAAK,CAAA;AACT,oBAAY,KAAK,CACf,KAAK,SAAS,OAAO,EAAE,EACvB,KAAK,SAAS,MAAM,GAAG,MAAM,EAC7B,IAAI,SAAS,OAAO,EAAE,GAAG,EAAE,IACzB,GAAG,IAAI,CAAC,QAAQ,CAAC,EAAE,SAAS,GAAG,KAAK,EAAE,GACtC,KAAK,GACL,KAAK,SAAS,CAAC,MAAM,IAAI,EAAE,GAAG,MAAM,IAAI,CAAC,GACzC,KAAK,CAAC,IAAI,EAAE,KAAK,EAAE,CAAC,GAAG,IAAI,EAAE,IAAI,CAAC,CAAC,GACnC,KAAK,CAAA;AACT,oBAAY,EAAE,CACZ,KAAK,SAAS,OAAO,EAAE,EACvB,KAAK,SAAS,MAAM,GAAG,MAAM,IAC3B,GAAG,OAAO,CAAC,KAAK,CAAC,CAAC,QAAQ,CAAC,EAAE,SAAS,GAAG,KAAK,EAAE,GAChD,KAAK,GACL,KAAK,SAAS,CAAC,GAAG,MAAM,IAAI,EAAE,MAAM,IAAI,CAAC,GACzC,EAAE,CAAC,IAAI,EAAE,KAAK,CAAC,GACf,KAAK,CAAA;AACT,oBAAY,MAAM,CAAC,CAAC,SAAS,OAAO,EAAE,IAAI,CAAC,SAAS,CAAC,GAAG,MAAM,CAAC,EAAE,MAAM,CAAC,CAAC,GACrE,CAAC,CAAC,CAAC,SAAS,CAAC,KAAK,CAAC,GACjB,CAAC,GAAG,MAAM,CAAC,CAAC,CAAC,CAAC,GACd,CAAC,GAAG,MAAM,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,GACnB,CAAC,CAAA;AACL,oBAAY,SAAS,CAAC,CAAC,SAAS,OAAO,EAAE,IAAI;KAAG,GAAG,IAAI,MAAM,CAAC,GAAG,GAAG;CAAE,CAAC,MAAM,CAAC,CAAA;AAC9E,oBAAY,IAAI,CAAC,CAAC,SAAS,OAAO,EAAE,IAAI,CAAC,SAAS,CAAC,GAAG,MAAM,CAAC,EAAE,MAAM,CAAC,CAAC,GACnE,CAAC,GACD,KAAK,CAAA;AAKT,oBAAY,mBAAmB,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,SAAS,CAAC,KAAK,CAAC,GACpD,KAAK,GACL,CAAC,CAAC,SAAS,MAAM,CAAC,GAAG,CAAC,CAAC,EAAE,CAAC,KAAK,IAAI,GAAG,KAAK,CAAC,SAAS,CAAC,CAAC,EAAE,MAAM,CAAC,KAAK,IAAI,GACzE,CAAC,GACD,KAAK,CAAA;AAGT,aAAK,YAAY,CAAC,GAAG,SAAS,EAAE,IAAI;KACjC,GAAG,IAAI,MAAM,GAAG,GAAG,GAAG,CAAC,GAAG,CAAC,SAAS,KAAK,GAAG,KAAK,GAAG,GAAG;CACzD,CAAC,MAAM,GAAG,CAAC,CAAA;AAEZ,oBAAY,WAAW,CAAC,GAAG,SAAS,EAAE,IAAI;KACvC,GAAG,IAAI,YAAY,CAAC,GAAG,CAAC,GAAG,GAAG,CAAC,GAAG,CAAC;CACrC,CAAA"}

package/dist/types/utils.js

@@ -0,0 +1,5 @@
+/**
+ * Generic type helpers (tuple, union, object...)
+ */
+export {};
+//# sourceMappingURL=utils.js.map

package/dist/types/utils.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"utils.js","sourceRoot":"","sources":["../../src/types/utils.ts"],"names":[],"mappings":"AAAA;;GAEG"}

package/dist/types/validation.d.ts

@@ -0,0 +1,4 @@
+import { ModularStages } from './stage';
+export declare type ValidateIndex<Index extends number | undefined, Candidates extends string | number> = `${Index}` extends Candidates ? true : false;
+export declare type RestrictValue<Arguments extends {}, Stage extends keyof ModularStages> = ModularStages<Arguments>[Stage]['restrict'] extends never ? unknown : ModularStages<Arguments>[Stage]['restrict'];
+//# sourceMappingURL=validation.d.ts.map

package/dist/types/validation.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"validation.d.ts","sourceRoot":"","sources":["../../src/types/validation.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,MAAM,SAAS,CAAA;AAEvC,oBAAY,aAAa,CACvB,KAAK,SAAS,MAAM,GAAG,SAAS,EAChC,UAAU,SAAS,MAAM,GAAG,MAAM,IAChC,GAAG,KAAK,EAAE,SAAS,UAAU,GAAG,IAAI,GAAG,KAAK,CAAA;AAEhD,oBAAY,aAAa,CACvB,SAAS,SAAS,EAAE,EACpB,KAAK,SAAS,MAAM,aAAa,IAC/B,aAAa,CAAC,SAAS,CAAC,CAAC,KAAK,CAAC,CAAC,UAAU,CAAC,SAAS,KAAK,GACzD,OAAO,GACP,aAAa,CAAC,SAAS,CAAC,CAAC,KAAK,CAAC,CAAC,UAAU,CAAC,CAAA"}

package/dist/types/validation.js

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=validation.js.map

package/dist/types/validation.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"validation.js","sourceRoot":"","sources":["../../src/types/validation.ts"],"names":[],"mappings":""}

package/package.json

@@ -7,7 +7,7 @@
     "Factory",
     "Test"
   ],
-  "version": "0.1.2",
+  "version": "0.1.4",
   "type": "module",
   "license": "MIT",
   "publishConfig": {

package/src/index.ts

@@ -1,122 +1,208 @@
-import { MethodName, MethodRecord, Modular, StageEntry } from './types'
-import { FunctionComponent } from 'react'
+import { ForwardedRef, FunctionComponent, forwardRef, memo } from 'react'
 
-export type { Modular, ModularStageTransform, MethodRecord } from './types'
+import { ModularComponent } from './types/modular-component'
+import { MethodRecord } from './types/methods'
+import { StageTuple } from './types/stage'
 
-function ModularFactory<Methods extends MethodRecord>(methods: Methods) {
+export type { ModularStages } from './types/stage'
+
+function ModularFactory<Methods extends Record<string, MethodRecord>>(
+  methods: Methods,
+) {
   type CleanMethods = Methods extends infer U
     ? { [key in keyof U]: U[key] }
     : never
 
   return {
-    build: <Stages extends StageEntry[] = []>(
-      stages: Omit<StageEntry, 'stages'>[] = [],
-    ) => {
-      return <Props = {}>(displayName?: string) => {
+    build: <Stages extends StageTuple = []>(stages: StageTuple = []) => {
+      const factory = <Props extends {} = {}, Ref = FunctionComponent<Props>>(
+        displayName?: string,
+        options?: { memo: boolean },
+      ) => {
+        const generateAsHook =
+          (ref?: ForwardedRef<Ref>, field?: string) =>
+          () =>
+          (props: Props = {} as Props) => {
+            // Prepare the shared arguments object, prefilling it with the props
+            // and an empty render result
+            let args = {
+              props,
+              children: (props as { children?: unknown })?.children,
+              render: null,
+              ref,
+            }
+
+            const methodsArray = Object.values(methods)
+
+            // Run each stage in order, replacing the arguments by the response
+            // from the last stage
+            for (const stage of stages) {
+              const method = methodsArray.find(
+                (method) => method.symbol === stage.stage,
+              )
+
+              let useTransform =
+                // Never transform mocked stages
+                ((stage as any).mocked ? undefined : method?.transform) ??
+                (() => stage.value)
+
+              args = {
+                ...args,
+                [method?.field as keyof typeof args]: useTransform(
+                  args,
+                  stage.value,
+                ),
+              }
+            }
+
+            // Finally, return the args
+            return field ? args[field as keyof typeof args] : args
+          }
+
         // Create the actual Component. This is a simple React Functional Component
         // that will call the hooks for each registered stages in order.
-        const Component = ((props) => {
+        const Component = forwardRef<Ref, Props>((props, ref) => {
           // Prepare the shared arguments object, prefilling it with the props
           // and an empty render result
-          const useComponent = Component.asHook()
+          const useComponent = generateAsHook(ref)()
           const args = useComponent(props)
 
           return (args as unknown as { render: null }).render ?? null
-        }) as Modular<Props, CleanMethods, Stages>
+        }) as unknown as ModularComponent<Props, Ref, CleanMethods, Stages>
 
         // Set the debug display name if provided
         Component.displayName = displayName
 
         // Add an asHook system to get the components args as a reusable hook
-        Component.asHook = ((field: string) => (props: Props) => {
-          // Prepare the shared arguments object, prefilling it with the props
-          // and an empty render result
-          let args = { props, render: null }
-
-          // Run each stage in order, replacing the arguments by the response
-          // from the last stage
-          for (const stage of stages) {
-            const method = methods[stage.key as MethodName]
-            const useStage = stage.value
-            const useTransform =
-              method.transform ??
-              (() =>
-                typeof useStage === 'function'
-                  ? useStage({ ...args })
-                  : useStage)
-
-            args = {
-              ...args,
-              [method.field as keyof typeof args]: useTransform(args, useStage),
-            }
-          }
-
-          // Finally, return the args
-          return field ? args[field as keyof typeof args] : args
-        }) as unknown as Modular<Props, CleanMethods, Stages>['asHook']
-
-        // Add a function for rewinding the component up to a certain stage
-        Component.atStage = ((stage: MethodName) => {
-          // Find the needed stage
-          const stageIndex = (stages
+        Component.asHook = generateAsHook() as ModularComponent<
+          Props,
+          Ref,
+          CleanMethods,
+          Stages
+        >['asHook']
+
+        // Add each configured stage methods to the component
+        Object.keys(methods).forEach((method) => {
+          // Check if a stage of the same key already exists
+          const stageIndices = stages
             // Map all stages to an [index, stage] tuple
             .map((record, index) => [index, record] as const)
             // Remove all tuples not matching our stage
-            .filter(([, record]) => record.key === stage)
-            // Get the index of the very last one, or -1 if none are remaining
-            .pop() || [-1])[0]
-
-          // If the stage cannot be found, create a brand new, empty component
-          if (stageIndex === -1) {
-            return ModularFactory<Methods>(methods).build()<Props>(displayName)
-          }
-
-          // Otherwise, keep all stages up to and including the found stage
-          return ModularFactory<Methods>(methods).build(
-            stages.slice(0, stageIndex + 1),
-          )<Props>(displayName)
-        }) as unknown as Modular<Props, CleanMethods, Stages>['atStage']
-
-        // Add each configured stage method to the component
-        Object.keys(methods).forEach((method) => {
-          Component[method as keyof CleanMethods] = ((value: unknown) => {
+            .filter(([, record]) => record.stage === methods[method].symbol)
+            // Get the index
+            .map(([index]) => index)
+          const lastIndex = [...stageIndices].pop() as number
+
+          // @ts-ignore
+          Component[`with${method}`] = (
+            value: unknown,
+            forceIndex?: number,
+          ) => {
             // Prepare the new stage
-            const stage = { key: method as MethodName, value }
-
-            // For stages in "multiple" mode, simply append the stage
-            if (methods[method as MethodName].multiple) {
-              return ModularFactory(methods).build([...stages, stage])<Props>(
-                displayName,
-              )
-            }
+            const stage = { stage: methods[method].symbol, value } as const
 
-            // For other stages, check if a stage of the same key already exists
-            const index = stages.findIndex((st) => st.key === method)
+            // Check if a stage of the same key already exists
+            const stageIndex =
+              (forceIndex !== undefined
+                ? stageIndices[forceIndex]
+                : lastIndex) ?? -1
 
             // If so, copy the stages and replace the previous record
-            if (index > -1) {
+            if (stageIndex > -1) {
               const nextStages = [...stages]
-              nextStages[index] = stage
+              nextStages[stageIndex] = stage
               return ModularFactory(methods).build(nextStages)<Props>(
                 displayName,
               )
             }
 
-            // Otherwise, append the stage as in multiple mode
+            // Otherwise, append the stage
             return ModularFactory(methods).build([...stages, stage])<Props>(
               displayName,
             )
-          }) as unknown as Modular<
-            Props,
-            CleanMethods,
-            Stages
-          >[keyof CleanMethods]
+          }
+
+          // @ts-ignore
+          Component[`add${method}`] =
+            stageIndices.length < 1
+              ? undefined
+              : (value: unknown) => {
+                  // Prepare the new stage
+                  const stage = {
+                    stage: methods[method].symbol,
+                    value,
+                  } as const
+
+                  // Append the stage as in multiple mode
+                  return ModularFactory(methods).build([
+                    ...stages,
+                    stage,
+                  ])<Props>(displayName)
+                }
+
+          // @ts-ignore
+          Component[`at${method}`] =
+            stageIndices.length < 1
+              ? undefined
+              : (forceIndex?: number) => {
+                  // Find the needed stage
+                  const stageIndex =
+                    (forceIndex !== undefined
+                      ? stageIndices[forceIndex]
+                      : lastIndex) ?? lastIndex
+
+                  // Otherwise, keep all stages up to and including the found stage
+                  return ModularFactory<Methods>(methods).build(
+                    stages.slice(0, stageIndex + 1),
+                  )<Props>(displayName)
+                }
+
+          // @ts-ignore
+          Component[`mock${method}`] =
+            stageIndices.length < 1
+              ? undefined
+              : (value: unknown, forceIndex?: number) => {
+                  // Prepare the mocked stage
+                  const stage = {
+                    stage: methods[method].symbol,
+                    value,
+                    mocked: true,
+                  } as const
+
+                  // Find the needed stage
+                  const stageIndex =
+                    (forceIndex !== undefined
+                      ? stageIndices[forceIndex]
+                      : lastIndex) ?? lastIndex
+
+                  // Replace the stage with its mock
+                  const nextStages = [...stages]
+                  nextStages[stageIndex] = stage
+                  return ModularFactory(methods).build(nextStages)<Props>(
+                    displayName,
+                  )
+                }
+
+          const capitalize = (str: string) =>
+            str[0].toUpperCase() + str.slice(1)
+
+          // @ts-ignore
+          Component[`asUse${capitalize(methods[method].field)}`] =
+            generateAsHook(undefined, methods[method].field)
         })
 
-        return Component
+        return (options?.memo ? memo(Component) : Component) as typeof Component
       }
+
+      factory.memo = <Props extends {} = {}, Ref = FunctionComponent<Props>>(
+        displayName?: string,
+      ) => factory<Props, Ref>(displayName, { memo: true })
+
+      return factory
     },
-    extend: <_Methods extends MethodRecord>(_methods: _Methods) => {
+    extend: <_Methods extends Record<string, MethodRecord>>(
+      _methods: _Methods,
+    ) => {
       return ModularFactory<Methods & _Methods>({
         ...methods,
         ..._methods,
@@ -125,13 +211,29 @@ function ModularFactory<Methods extends MethodRecord>(methods: Methods) {
   }
 }
 
+const withRender = Symbol()
+
+declare module './types/stage' {
+  export interface ModularStages<Args, Value> {
+    [withRender]: {
+      restrict: FunctionComponent<Args>
+      transform: ReturnType<
+        Value extends FunctionComponent<Args> ? Value : never
+      >
+    }
+  }
+}
+
 export const modularFactory = ModularFactory({
-  withRender: {
+  Render: {
+    symbol: withRender,
     field: 'render',
-    restrict: {} as ReturnType<FunctionComponent>,
+    transform: (args, useStage) => useStage(args),
   },
 } as const)
 
-export function createMethodRecord<R extends MethodRecord>(record: R): R {
+export function createMethodRecord<R extends Record<string, MethodRecord>>(
+  record: R,
+): R {
   return record
 }

package/src/types/arguments.ts

@@ -0,0 +1,55 @@
+/**
+ * Helpers for computing the arguments map generated by a given
+ * set of stages
+ */
+
+import { PropsWithChildren } from 'react'
+import { StageTuple, ModularStages, BeforeStage, CleanUpStages } from './stage'
+import { UnionToIntersection } from './utils'
+
+export type ComputeArguments<
+  Props extends {},
+  Ref,
+  Methods extends Record<
+    string,
+    { symbol: keyof ModularStages; field: string }
+  >,
+  Stages extends StageTuple,
+  CleanedStages extends StageTuple = CleanUpStages<Stages>,
+  MethodList = Methods[keyof Methods],
+> = {
+  props: Props extends { children: unknown } ? Props : PropsWithChildren<Props>
+  ref: Ref
+  children: Props extends { children: infer C } ? C : PropsWithChildren['children']
+} & (Stages['length'] extends 0
+  ? {}
+  : UnionToIntersection<
+      {
+        [key in keyof CleanedStages]: MethodList extends {
+          symbol: CleanedStages[key]['stage']
+          field: infer F
+        }
+          ? {
+              [k in F extends string ? F : never]: ModularStages<
+                ComputeArguments<
+                  Props,
+                  Ref,
+                  Methods,
+                  BeforeStage<CleanedStages, key>
+                >,
+                CleanedStages[key]['value']
+              >[CleanedStages[key]['stage']] extends { transform: infer T }
+                ? T
+                : CleanedStages[key]['value']
+            }
+          : never
+      }[number]
+    >) extends infer U
+  ? {
+      [key in keyof U]: U[key] extends Record<string, unknown>
+        ? U[key] extends infer V
+          ? { [key in keyof V]: V[key] }
+          : never
+        : U[key]
+    }
+  : never

package/src/types/methods/add.ts

@@ -0,0 +1,50 @@
+/**
+ * Methods for adding a new entry for a previous stage, rather
+ * than reusing the previous one.
+ * One two entries for the same stage have been added, `with`, `at` and
+ * `mock` methods can take an optional index to select the entry to target
+ */
+
+import { ModularComponent } from '../modular-component'
+import { AddStage, ModularStages, StageIndices, StageTuple } from '../stage'
+import { ComputeArguments } from '../arguments'
+import { RestrictValue } from '../validation'
+import { MethodRecord } from '../methods'
+import { FilterNever } from '../utils'
+
+interface ModularAddMethod<
+  Props extends {},
+  Ref,
+  Methods extends Record<string, MethodRecord>,
+  Stages extends StageTuple,
+  Method extends keyof Methods,
+  Symbol extends keyof ModularStages = Methods[Method]['symbol'],
+> {
+  <
+    Value extends RestrictValue<Arguments, Symbol>,
+    Arguments extends ComputeArguments<Props, Ref, Methods, Stages>,
+  >(
+    value: Value,
+  ): ModularComponent<
+    Props,
+    Ref,
+    Methods,
+    AddStage<Stages, { stage: Symbol; value: Value }>
+  >
+}
+
+export type ModularAddMethods<
+  Props extends {},
+  Ref,
+  Methods extends Record<string, MethodRecord>,
+  Stages extends StageTuple,
+> = FilterNever<{
+  [Method in keyof Methods as `add${Method extends string
+    ? Method
+    : never}`]: StageIndices<
+    Stages,
+    Methods[Method]['symbol']
+  >['length'] extends 0
+    ? never
+    : ModularAddMethod<Props, Ref, Methods, Stages, Method>
+}>

package/src/types/methods/at.ts

@@ -0,0 +1,64 @@
+/**
+ * Methods for rewinding a modular component up to a given stage.
+ * If multiple entries of the same stage were previously added,
+ * it's possible to pass the index for the entry to rewind to.
+ */
+
+import { ModularComponent } from '../modular-component'
+import { AtStage, StageIndices, StageTuple } from '../stage'
+import { FilterNever, Last, ToIndices } from '../utils'
+import { ValidateIndex } from '../validation'
+import { MethodRecord } from '../methods'
+
+interface ModularAtMethodIndices<
+  Props extends {},
+  Ref,
+  Methods extends Record<string, MethodRecord>,
+  Stages extends StageTuple,
+  Method extends keyof Methods,
+  Indices extends number[],
+> {
+  <
+    // Validate index
+    StageIndex extends Index extends number ? Indices[Index] : Last<Indices>,
+    ValidIndex extends ValidateIndex<Index, ToIndices<Indices>>,
+    Index extends number,
+  >(
+    index: ValidIndex extends true ? Index : ToIndices<Indices>,
+  ): ModularComponent<Props, Ref, Methods, AtStage<Stages, StageIndex>>
+}
+
+interface ModularAtMethodLast<
+  Props extends {},
+  Ref,
+  Methods extends Record<string, MethodRecord>,
+  Stages extends StageTuple,
+  Method extends keyof Methods,
+  Index extends number,
+> {
+  (): ModularComponent<Props, Ref, Methods, AtStage<Stages, Index>>
+}
+
+type ModularAtMethod<
+  Props extends {},
+  Ref,
+  Methods extends Record<string, MethodRecord>,
+  Stages extends StageTuple,
+  Method extends keyof Methods,
+  Symbol extends symbol = Methods[Method]['symbol'],
+  Indices extends StageIndices<Stages, Symbol> = StageIndices<Stages, Symbol>,
+> = Indices['length'] extends 0
+  ? never
+  : ModularAtMethodIndices<Props, Ref, Methods, Stages, Method, Indices> &
+      ModularAtMethodLast<Props, Ref, Methods, Stages, Method, Last<Indices>>
+
+export type ModularAtMethods<
+  Props extends {},
+  Ref,
+  Methods extends Record<string, MethodRecord>,
+  Stages extends StageTuple,
+> = FilterNever<{
+  [Method in keyof Methods as `at${Method extends string
+    ? Method
+    : never}`]: ModularAtMethod<Props, Ref, Methods, Stages, Method>
+}>

package/src/types/methods/hook.ts

@@ -0,0 +1,27 @@
+/**
+ * Methods for converting a modular component to hooks, either
+ * a generic hook returning all the arguments, or a specific hook
+ * returning one given argument.
+ */
+
+import { StageTuple } from '../stage'
+import { MethodRecord } from '../methods'
+import { ComputeArguments } from '../arguments'
+
+export type ModularHookMethods<
+  Props extends {},
+  Ref,
+  Methods extends Record<string, MethodRecord>,
+  Stages extends StageTuple,
+  Arguments extends {} = ComputeArguments<Props, Ref, Methods, Stages>,
+> = {
+  asHook(): keyof Props extends never
+    ? () => Arguments
+    : (props: Props) => Arguments
+} & {
+  [Arg in keyof Arguments as `asUse${Capitalize<
+    Arg extends string ? Arg : never
+  >}`]: keyof Props extends never
+    ? () => () => Arguments[Arg]
+    : () => (props: Props) => Arguments[Arg]
+}