refactor: rename

Author: airjp73

apps/test-app/app/components/Fieldset.tsx

@@ -1,10 +1,10 @@
 import { FC, PropsWithChildren } from "react";
-import { Rvf, useField } from "@rvf/remix";
+import { FormScope, useField } from "@rvf/remix";
 
 type FieldsetProps = PropsWithChildren<{
   label: string;
   name: string;
-  rvf?: Rvf<any>;
+  rvf?: FormScope<any>;
 }>;
 
 export const Fieldset: FC<FieldsetProps> = ({ children, label, name, rvf }) => {

apps/test-app/app/components/Input.tsx

@@ -1,8 +1,8 @@
 import React, { forwardRef } from "react";
-import { useField, Rvf } from "@rvf/remix";
+import { useField, FormScope } from "@rvf/remix";
 
 type InputProps = {
-  name: string | Rvf<string | boolean | string[]>;
+  name: string | FormScope<string | boolean | string[]>;
   label: string;
   type?: string;
   value?: string;

apps/test-app/app/components/SubmitButton.tsx

@@ -1,5 +1,5 @@
 import {
-  Rvf,
+  FormScope,
   useIsSubmitting,
   useIsValid,
   useFormScopeOrContext,
@@ -9,7 +9,7 @@ type Props = {
   label?: string;
   submittingLabel?: string;
   disableWhenInvalid?: boolean;
-  form?: Rvf<any>;
+  form?: FormScope<any>;
   name?: string;
   value?: string;
   "data-testid"?: string;

apps/test-app/app/routes/context-hooks.tsx

@@ -2,7 +2,7 @@ import { DataFunctionArgs, json } from "@remix-run/node";
 import { useActionData } from "@remix-run/react";
 import { withYup } from "@rvf/yup";
 import {
-  Rvf,
+  FormScope,
   FormProvider,
   useRemixFormResponse,
   useForm,
@@ -23,7 +23,7 @@ const DisplayContext = ({
   form,
 }: {
   testid: string;
-  form?: Rvf<any>;
+  form?: FormScope<any>;
 }) => {
   const context = useFormScopeOrContext(form);
 

packages/core/src/dom/dom.ts

@@ -1,4 +1,4 @@
-import { Rvf, RvfStore } from "../form";
+import { FormScope, FormStore } from "../form";
 import { getFieldValue } from "../getters";
 import { MultiValueMap } from "../native-form-data/MultiValueMap";
 import * as R from "remeda";
@@ -140,7 +140,7 @@ export const getElementsWithNames = (
   ) as HTMLElement[];
 };
 
-export const registerFormElementEvents = (store: RvfStore) => {
+export const registerFormElementEvents = (store: FormStore) => {
   const transientState = () => store.store.getState();
 
   const onChange = (event: Event) => {

packages/core/src/form.ts

@@ -48,17 +48,17 @@ type FormInit<FormInputData extends FieldValues, FormOutputData> = {
   flags: StoreFlags;
 } & SubmitTypes<FormOutputData>;
 
-export interface Rvf<FormInputData> {
+export interface FormScope<FormInputData> {
   __brand__: "rvf";
   __type__FormInputData: FormInputData;
   __field_prefix__: string;
-  __store__: RvfStore;
+  __store__: FormStore;
   scope<Path extends ValidStringPaths<FormInputData>>(
     field: Path,
-  ): Rvf<ValueAtPath<FormInputData, StringToPathTuple<Path>>>;
+  ): FormScope<ValueAtPath<FormInputData, StringToPathTuple<Path>>>;
 }
 
-export interface RvfStore {
+export interface FormStore {
   transientFieldRefs: RefStore;
   controlledFieldRefs: RefStore;
   fieldSerializerRefs: RefStore<FieldSerializer>;
@@ -70,7 +70,10 @@ export interface RvfStore {
   subformCache: Map<string, any>;
 }
 
-export const createRvf = <FormInputData extends FieldValues, FormOutputData>({
+export const createFormScope = <
+  FormInputData extends FieldValues,
+  FormOutputData,
+>({
   defaultValues,
   serverValidationErrors,
   validator,
@@ -81,7 +84,7 @@ export const createRvf = <FormInputData extends FieldValues, FormOutputData>({
   submitSource,
   formProps,
   flags,
-}: FormInit<FormInputData, FormOutputData>): Rvf<FormInputData> => {
+}: FormInit<FormInputData, FormOutputData>): FormScope<FormInputData> => {
   const transientFieldRefs = createRefStore<HTMLElement>();
   const controlledFieldRefs = createRefStore<HTMLElement>();
   const fieldSerializerRefs = createRefStore<FieldSerializer>();
@@ -109,7 +112,7 @@ export const createRvf = <FormInputData extends FieldValues, FormOutputData>({
   });
   const subformCache = new Map<string, any>();
 
-  const rvfStore: RvfStore = {
+  const rvfStore: FormStore = {
     transientFieldRefs,
     controlledFieldRefs,
     fieldSerializerRefs,
@@ -121,13 +124,13 @@ export const createRvf = <FormInputData extends FieldValues, FormOutputData>({
     useStoreState: createTrackedSelector(store),
   };
 
-  return instantiateRvf<FormInputData>(rvfStore, "");
+  return instantiateFormScope<FormInputData>(rvfStore, "");
 };
 
-const instantiateRvf = <FormInputData extends FieldValues>(
-  store: RvfStore,
+const instantiateFormScope = <FormInputData extends FieldValues>(
+  store: FormStore,
   prefix: string,
-): Rvf<FormInputData> => ({
+): FormScope<FormInputData> => ({
   __brand__: "rvf",
   __type__FormInputData: {} as any,
   __field_prefix__: prefix,
@@ -137,15 +140,15 @@ const instantiateRvf = <FormInputData extends FieldValues>(
     if (store.subformCache.has(newPrefix))
       return store.subformCache.get(newPrefix);
 
-    const scoped = instantiateRvf(store, newPrefix);
+    const scoped = instantiateFormScope(store, newPrefix);
     store.subformCache.set(newPrefix, scoped);
     return scoped;
   },
 });
 
-export const scopeRvf = (
-  parentForm: Rvf<unknown>,
+export const scopeFormScope = (
+  parentForm: FormScope<unknown>,
   prefix: string,
-): Rvf<unknown> => {
+): FormScope<unknown> => {
   return parentForm.scope(prefix as never);
 };

packages/react/src/ValidatedForm.tsx

@@ -1,6 +1,6 @@
 import { FieldValues, AllProps } from "@rvf/core";
 import { FormOpts, useForm } from "./useForm";
-import { RvfReact } from "./base";
+import { ReactFormApi } from "./base";
 import { FormProvider } from "./context";
 
 export type ValidatedFormProps<
@@ -17,7 +17,7 @@ export type ValidatedFormProps<
 
     children:
       | React.ReactNode
-      | ((form: RvfReact<FormInputData>) => React.ReactNode);
+      | ((form: ReactFormApi<FormInputData>) => React.ReactNode);
   };
 
 export const ValidatedForm = <

packages/react/src/array.tsx

@@ -1,15 +1,15 @@
 import { ReactNode, useMemo } from "react";
 import {
   FormStoreValue,
-  Rvf,
+  FormScope,
   getFieldError,
   getFieldValue,
-  scopeRvf,
+  scopeFormScope,
   getArrayUpdateKey,
   FieldArrayValidationBehaviorConfig,
 } from "@rvf/core";
 import { makeImplFactory } from "./implFactory";
-import { RvfReact, makeBaseRvfReact } from "./base";
+import { ReactFormApi, makeBaseReactFormApi } from "./base";
 import { ValidationBehaviorConfig } from "@rvf/core";
 import { useFormScopeOrContextInternal } from "./context";
 
@@ -38,7 +38,7 @@ export interface FieldArrayApi<FormInputData extends Array<any>> {
   map: (
     callback: (
       key: string,
-      form: RvfReact<FormInputData[number]>,
+      form: ReactFormApi<FormInputData[number]>,
       index: number,
     ) => ReactNode,
   ) => ReactNode;
@@ -94,7 +94,7 @@ export interface FieldArrayApi<FormInputData extends Array<any>> {
 }
 
 export type FieldArrayParams<FormInputData> = {
-  form: Rvf<FormInputData>;
+  form: FormScope<FormInputData>;
   arrayFieldName: string;
   trackedState: FormStoreValue;
   validationBehavior?: FieldArrayValidationBehaviorConfig;
@@ -107,8 +107,10 @@ export const makeFieldArrayImpl = <FormInputData extends Array<any>>({
   validationBehavior,
 }: FieldArrayParams<FormInputData>): FieldArrayApi<FormInputData> => {
   const itemImpl = makeImplFactory(arrayFieldName, (itemFieldName) =>
-    makeBaseRvfReact({
-      form: scopeRvf(form, itemFieldName) as Rvf<FormInputData[number]>,
+    makeBaseReactFormApi({
+      form: scopeFormScope(form, itemFieldName) as FormScope<
+        FormInputData[number]
+      >,
       prefix: itemFieldName,
       trackedState,
     }),
@@ -135,8 +137,8 @@ export const makeFieldArrayImpl = <FormInputData extends Array<any>>({
       return trackedState
         .getFieldArrayKeys(arrayFieldName)
         .map((key, index) => {
-          const itemRvf = itemImpl(String(index));
-          return callback(key, itemRvf, index);
+          const itemFormScope = itemImpl(String(index));
+          return callback(key, itemFormScope, index);
         });
     },
     push: (value) =>
@@ -182,15 +184,15 @@ export type UseFieldArrayOpts = {
   validationBehavior?: FieldArrayValidationBehaviorConfig;
 };
 export function useFieldArray<FormInputData extends any[]>(
-  form: Rvf<FormInputData>,
+  form: FormScope<FormInputData>,
   { validationBehavior }?: UseFieldArrayOpts,
 ): FieldArrayApi<FormInputData>;
 export function useFieldArray<FormInputData extends any[] = unknown[]>(
   name: string,
   opts?: UseFieldArrayOpts,
 ): FieldArrayApi<FormInputData>;
 export function useFieldArray<FormInputData extends any[]>(
-  formOrName: Rvf<FormInputData> | string,
+  formOrName: FormScope<FormInputData> | string,
   { validationBehavior }: UseFieldArrayOpts = {},
 ) {
   const scope = useFormScopeOrContextInternal(formOrName);
@@ -217,7 +219,7 @@ export function useFieldArray<FormInputData extends any[]>(
 }
 
 export type FieldArrayPropsWithScope<FormInputData extends any[]> = {
-  scope: Rvf<FormInputData>;
+  scope: FormScope<FormInputData>;
   children: (field: FieldArrayApi<FormInputData>) => React.ReactNode;
 };
 

packages/react/src/base.tsx

@@ -1,8 +1,8 @@
 import { useEffect, useMemo } from "react";
 import * as R from "remeda";
 import {
-  Rvf,
-  scopeRvf,
+  FormScope,
+  scopeFormScope,
   SubmitStatus,
   FormStoreValue,
   getFieldValue,
@@ -44,12 +44,12 @@ import {
   ValidInputPropsValues,
 } from "./inputs/getInputProps";
 
-type MinimalRvf<FieldPaths extends string> = {
+type MinimalFormScope<FieldPaths extends string> = {
   resetField: (fieldName: FieldPaths, nextValue?: any) => void;
 };
 
 export type FormFields<Form> =
-  Form extends MinimalRvf<infer FieldPaths> ? FieldPaths : never;
+  Form extends MinimalFormScope<infer FieldPaths> ? FieldPaths : never;
 
 interface FormProps {
   onSubmit: (event: React.FormEvent<HTMLFormElement>) => void;
@@ -64,7 +64,7 @@ export type ManualSubmitOption = SubmitterOptions & {
   value?: string;
 };
 
-export interface RvfReact<FormInputData> {
+export interface ReactFormApi<FormInputData> {
   /**
    * Gets whether the field has been touched.
    * @willRerender
@@ -234,14 +234,14 @@ export interface RvfReact<FormInputData> {
   ) => void;
 
   /**
-   * Creates an `Rvf` scoped to the specified field.
+   * Creates an `FormScope` scoped to the specified field.
    * This is useful for creating subforms.
    * In order to use this, you can pass it to `useForm`.
    *
    * @example
    * ```tsx
    * type PersonFormProps = {
-   *   rvf: Rvf<{ name: string }>;
+   *   rvf: FormScope<{ name: string }>;
    * }
    *
    * const PersonForm = ({ rvf }: PersonFormProps) => {
@@ -272,12 +272,12 @@ export interface RvfReact<FormInputData> {
    */
   scope<Field extends ValidStringPaths<FormInputData>>(
     fieldName: Field,
-  ): Rvf<ValueAtPath<FormInputData, StringToPathTuple<Field>>>;
+  ): FormScope<ValueAtPath<FormInputData, StringToPathTuple<Field>>>;
 
   /**
-   * Returns an `Rvf` without scoping any further.
+   * Returns an `FormScope` without scoping any further.
    */
-  scope(): Rvf<FormInputData>;
+  scope(): FormScope<FormInputData>;
 
   getFormProps: (props?: Partial<FormProps>) => FormProps;
 
@@ -369,17 +369,17 @@ export interface RvfReact<FormInputData> {
   submit: (option?: ManualSubmitOption) => void;
 }
 
-export type BaseRvfReactParams<FormInputData> = {
-  form: Rvf<FormInputData>;
+export type BaseReactFormParams<FormInputData> = {
+  form: FormScope<FormInputData>;
   prefix: string;
   trackedState: FormStoreValue;
 };
 
-export const makeBaseRvfReact = <FormInputData,>({
+export const makeBaseReactFormApi = <FormInputData,>({
   trackedState,
   prefix,
   form,
-}: BaseRvfReactParams<FormInputData>): RvfReact<FormInputData> => {
+}: BaseReactFormParams<FormInputData>): ReactFormApi<FormInputData> => {
   const f = (fieldName?: string) =>
     pathArrayToString([prefix, fieldName].filter(R.isNonNullish));
   const transientState = () => form.__store__.store.getState();
@@ -392,7 +392,7 @@ export const makeBaseRvfReact = <FormInputData,>({
     makeFieldArrayImpl({
       trackedState,
       arrayFieldName,
-      form: scopeRvf(form, arrayFieldName) as Rvf<any[]>,
+      form: scopeFormScope(form, arrayFieldName) as FormScope<any[]>,
     }),
   );
 
@@ -505,7 +505,7 @@ export const makeBaseRvfReact = <FormInputData,>({
       form.__store__.store.getState().resetField(f(fieldName), nextValue),
 
     scope: (fieldName?: string) =>
-      fieldName == null ? form : (scopeRvf(form, fieldName) as any),
+      fieldName == null ? form : (scopeFormScope(form, fieldName) as any),
 
     name: (fieldName?: string) => f(fieldName),
 
@@ -594,7 +594,9 @@ export const makeBaseRvfReact = <FormInputData,>({
   };
 };
 
-export const useFormInternal = <FormInputData,>(form: Rvf<FormInputData>) => {
+export const useFormInternal = <FormInputData,>(
+  form: FormScope<FormInputData>,
+) => {
   const prefix = form.__field_prefix__;
   const { useStoreState, resolvers } = form.__store__;
   const trackedState = useStoreState();
@@ -610,7 +612,7 @@ export const useFormInternal = <FormInputData,>(form: Rvf<FormInputData>) => {
 
   const base = useMemo(
     () =>
-      makeBaseRvfReact({
+      makeBaseReactFormApi({
         form,
         prefix,
         trackedState,