fix: react hook form update fix

repetere · Apr 27, 2021 · 45676c8 · 45676c8
1 parent d034624
commit 45676c8
Show file tree

Hide file tree

Showing 29 changed files with 293 additions and 167 deletions.
diff --git a/build/children.d.ts b/build/children.d.ts
@@ -63,7 +63,7 @@ export declare function getChildrenProps(this: defs.Context, options?: {
     props?: any;
 }): defs.jsonx | undefined;
 export declare function fetchJSONSync(path: string, options?: any): string;
-export declare function getChildrenTemplate(template: string | any): any;
+export declare function getChildrenTemplate(template: string | any, type?: 'fetch' | 'file'): any;
 export declare function clearTemplateCache(): void;
 /**
  * returns React Child Elements via JSONX

diff --git a/build/children.js b/build/children.js
@@ -138,21 +138,20 @@ export function fetchJSONSync(path, options) {
         throw e;
     }
 }
-export function getChildrenTemplate(template) {
-    console.log('template', template);
+export function getChildrenTemplate(template, type) {
     const cachedTemplate = templateCache.get(template);
     if (cachedTemplate) {
         return cachedTemplate;
     }
     else if (typeof window !== "undefined" &&
         typeof window.XMLHttpRequest === "function" &&
-        !fs.readFileSync) {
+        (!fs.readFileSync || type === 'fetch')) {
         const jsFile = fetchJSONSync(template);
         const jsonxModule = scopedEval(`(${jsFile})`);
         templateCache.set(template, jsonxModule);
         return jsonxModule;
     }
-    else if (typeof template === "string") {
+    else if (typeof template === "string" || type === 'file') {
         const jsFile = fs.readFileSync(path.resolve(template)).toString();
         const jsonxModule = scopedEval(`(${jsFile})`);
         templateCache.set(template, jsonxModule);

diff --git a/build/components.d.ts b/build/components.d.ts
@@ -18,23 +18,8 @@ declare global {
     }
 }
 export declare const ReactHookForm: {
-    ErrorMessage: <TFieldErrors extends import("react-hook-form").DeepMap<Record<string, any>, import("react-hook-form").FieldError>, TAs extends "symbol" | "object" | "body" | "a" | "abbr" | "address" | "area" | "article" | "aside" | "audio" | "b" | "base" | "bdi" | "bdo" | "big" | "blockquote" | "br" | "button" | "canvas" | "caption" | "cite" | "code" | "col" | "colgroup" | "data" | "datalist" | "dd" | "del" | "details" | "dfn" | "dialog" | "div" | "dl" | "dt" | "em" | "embed" | "fieldset" | "figcaption" | "figure" | "footer" | "form" | "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "head" | "header" | "hgroup" | "hr" | "html" | "i" | "iframe" | "img" | "input" | "ins" | "kbd" | "keygen" | "label" | "legend" | "li" | "link" | "main" | "map" | "mark" | "menu" | "menuitem" | "meta" | "meter" | "nav" | "noindex" | "noscript" | "ol" | "optgroup" | "option" | "output" | "p" | "param" | "picture" | "pre" | "progress" | "q" | "rp" | "rt" | "ruby" | "s" | "samp" | "slot" | "script" | "section" | "select" | "small" | "source" | "span" | "strong" | "style" | "sub" | "summary" | "sup" | "table" | "template" | "tbody" | "td" | "textarea" | "tfoot" | "th" | "thead" | "time" | "title" | "tr" | "track" | "u" | "ul" | "var" | "video" | "wbr" | "webview" | "svg" | "animate" | "animateMotion" | "animateTransform" | "circle" | "clipPath" | "defs" | "desc" | "ellipse" | "feBlend" | "feColorMatrix" | "feComponentTransfer" | "feComposite" | "feConvolveMatrix" | "feDiffuseLighting" | "feDisplacementMap" | "feDistantLight" | "feDropShadow" | "feFlood" | "feFuncA" | "feFuncB" | "feFuncG" | "feFuncR" | "feGaussianBlur" | "feImage" | "feMerge" | "feMergeNode" | "feMorphology" | "feOffset" | "fePointLight" | "feSpecularLighting" | "feSpotLight" | "feTile" | "feTurbulence" | "filter" | "foreignObject" | "g" | "image" | "line" | "linearGradient" | "marker" | "mask" | "metadata" | "mpath" | "path" | "pattern" | "polygon" | "polyline" | "radialGradient" | "rect" | "stop" | "switch" | "text" | "textPath" | "tspan" | "use" | "view" | React.FunctionComponent<any> | React.ComponentClass<any, any> | React.ReactElement<any, string | ((props: any) => React.ReactElement<any, any> | null) | (new (props: any) => React.Component<any, any, any>)> | undefined = undefined>({ as, errors, name, message, render, ...rest }: import("react-hook-form").Assign<{
-        as?: TAs | undefined;
-        errors?: TFieldErrors | undefined;
-        name: import("react-hook-form").FieldName<import("@hookform/error-message").FieldValuesFromFieldErrors<TFieldErrors>>;
-        message?: string | undefined;
-        render?: ((data: {
-            message: string;
-            messages?: import("react-hook-form").MultipleFieldErrors | undefined;
-        }) => React.ReactNode) | undefined;
-    }, TAs extends undefined ? {} : TAs extends React.ReactElement<any, string | ((props: any) => React.ReactElement<any, any> | null) | (new (props: any) => React.Component<any, any, any>)> ? Record<string, any> : TAs extends React.ComponentType<infer P> ? P : TAs extends "symbol" | "object" | "body" | "a" | "abbr" | "address" | "area" | "article" | "aside" | "audio" | "b" | "base" | "bdi" | "bdo" | "big" | "blockquote" | "br" | "button" | "canvas" | "caption" | "cite" | "code" | "col" | "colgroup" | "data" | "datalist" | "dd" | "del" | "details" | "dfn" | "dialog" | "div" | "dl" | "dt" | "em" | "embed" | "fieldset" | "figcaption" | "figure" | "footer" | "form" | "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "head" | "header" | "hgroup" | "hr" | "html" | "i" | "iframe" | "img" | "input" | "ins" | "kbd" | "keygen" | "label" | "legend" | "li" | "link" | "main" | "map" | "mark" | "menu" | "menuitem" | "meta" | "meter" | "nav" | "noindex" | "noscript" | "ol" | "optgroup" | "option" | "output" | "p" | "param" | "picture" | "pre" | "progress" | "q" | "rp" | "rt" | "ruby" | "s" | "samp" | "slot" | "script" | "section" | "select" | "small" | "source" | "span" | "strong" | "style" | "sub" | "summary" | "sup" | "table" | "template" | "tbody" | "td" | "textarea" | "tfoot" | "th" | "thead" | "time" | "title" | "tr" | "track" | "u" | "ul" | "var" | "video" | "wbr" | "webview" | "svg" | "animate" | "animateMotion" | "animateTransform" | "circle" | "clipPath" | "defs" | "desc" | "ellipse" | "feBlend" | "feColorMatrix" | "feComponentTransfer" | "feComposite" | "feConvolveMatrix" | "feDiffuseLighting" | "feDisplacementMap" | "feDistantLight" | "feDropShadow" | "feFlood" | "feFuncA" | "feFuncB" | "feFuncG" | "feFuncR" | "feGaussianBlur" | "feImage" | "feMerge" | "feMergeNode" | "feMorphology" | "feOffset" | "fePointLight" | "feSpecularLighting" | "feSpotLight" | "feTile" | "feTurbulence" | "filter" | "foreignObject" | "g" | "image" | "line" | "linearGradient" | "marker" | "mask" | "metadata" | "mpath" | "path" | "pattern" | "polygon" | "polyline" | "radialGradient" | "rect" | "stop" | "switch" | "text" | "textPath" | "tspan" | "use" | "view" ? JSX.IntrinsicElements[TAs] : never>) => React.ReactElement<any, string | ((props: any) => React.ReactElement<any, any> | null) | (new (props: any) => React.Component<any, any, any>)> | null;
-    Controller: <TAs_1 extends "input" | "select" | "textarea" | React.FunctionComponent<any> | React.ComponentClass<any, any> | React.ReactElement<any, string | ((props: any) => React.ReactElement<any, any> | null) | (new (props: any) => React.Component<any, any, any>)>, TFieldValues extends Record<string, any> = Record<string, any>>(props: import("react-hook-form").Assign<({
-        as: TAs_1;
-        render?: undefined;
-    } & import("react-hook-form").UseControllerOptions<Record<string, any>>) | ({
-        as?: undefined;
-        render: (field: import("react-hook-form").ControllerRenderProps<TFieldValues>, state: import("react-hook-form").InputState) => React.ReactElement<any, string | ((props: any) => React.ReactElement<any, any> | null) | (new (props: any) => React.Component<any, any, any>)>;
-    } & import("react-hook-form").UseControllerOptions<Record<string, any>>), TAs_1 extends undefined ? {} : TAs_1 extends React.ReactElement<any, string | ((props: any) => React.ReactElement<any, any> | null) | (new (props: any) => React.Component<any, any, any>)> ? Record<string, any> : TAs_1 extends React.ComponentType<infer P_1> ? P_1 : TAs_1 extends "symbol" | "object" | "body" | "a" | "abbr" | "address" | "area" | "article" | "aside" | "audio" | "b" | "base" | "bdi" | "bdo" | "big" | "blockquote" | "br" | "button" | "canvas" | "caption" | "cite" | "code" | "col" | "colgroup" | "data" | "datalist" | "dd" | "del" | "details" | "dfn" | "dialog" | "div" | "dl" | "dt" | "em" | "embed" | "fieldset" | "figcaption" | "figure" | "footer" | "form" | "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "head" | "header" | "hgroup" | "hr" | "html" | "i" | "iframe" | "img" | "input" | "ins" | "kbd" | "keygen" | "label" | "legend" | "li" | "link" | "main" | "map" | "mark" | "menu" | "menuitem" | "meta" | "meter" | "nav" | "noindex" | "noscript" | "ol" | "optgroup" | "option" | "output" | "p" | "param" | "picture" | "pre" | "progress" | "q" | "rp" | "rt" | "ruby" | "s" | "samp" | "slot" | "script" | "section" | "select" | "small" | "source" | "span" | "strong" | "style" | "sub" | "summary" | "sup" | "table" | "template" | "tbody" | "td" | "textarea" | "tfoot" | "th" | "thead" | "time" | "title" | "tr" | "track" | "u" | "ul" | "var" | "video" | "wbr" | "webview" | "svg" | "animate" | "animateMotion" | "animateTransform" | "circle" | "clipPath" | "defs" | "desc" | "ellipse" | "feBlend" | "feColorMatrix" | "feComponentTransfer" | "feComposite" | "feConvolveMatrix" | "feDiffuseLighting" | "feDisplacementMap" | "feDistantLight" | "feDropShadow" | "feFlood" | "feFuncA" | "feFuncB" | "feFuncG" | "feFuncR" | "feGaussianBlur" | "feImage" | "feMerge" | "feMergeNode" | "feMorphology" | "feOffset" | "fePointLight" | "feSpecularLighting" | "feSpotLight" | "feTile" | "feTurbulence" | "filter" | "foreignObject" | "g" | "image" | "line" | "linearGradient" | "marker" | "mask" | "metadata" | "mpath" | "path" | "pattern" | "polygon" | "polyline" | "radialGradient" | "rect" | "stop" | "switch" | "text" | "textPath" | "tspan" | "use" | "view" ? JSX.IntrinsicElements[TAs_1] : never>) => React.ReactElement<any, string | ((props: any) => React.ReactElement<any, any> | null) | (new (props: any) => React.Component<any, any, any>)> | null;
+    ErrorMessage: <TFieldErrors extends import("react-hook-form").DeepMap<import("react-hook-form").FieldValues, import("react-hook-form").FieldError>, TAs extends React.ReactElement<any, string | React.JSXElementConstructor<any>> | keyof JSX.IntrinsicElements | React.ComponentType<any> | undefined = undefined>({ as, errors, name, message, render, ...rest }: import("@hookform/error-message").Props<TFieldErrors, TAs>) => React.ReactElement<any, string | React.JSXElementConstructor<any>> | null;
+    Controller: <TFieldValues extends import("react-hook-form").FieldValues = import("react-hook-form").FieldValues, TName extends import("react-hook-form").Path<TFieldValues> = import("react-hook-form").Path<TFieldValues>>(props: import("react-hook-form").ControllerProps<TFieldValues, TName>) => React.ReactElement<any, string | React.JSXElementConstructor<any>>;
 };
 /**
  
@@ -126,7 +111,7 @@ export declare function getReactClassComponent(this: defs.Context, reactComponen
  * @param this
  * @param props
  */
-export declare function FormComponent(this: defs.Context, props?: defs.formComponentProps): (componentProps: any) => string | defs.JSONReactElement | ReactElementLike | null | undefined;
+export declare function FormComponent(this: defs.Context, props?: defs.formComponentProps): (componentProps: any) => string | defs.JSONReactElement | ReactElementLike | null;
 /**
  * A helper component that allows you to create components that load data and render asynchronously.
  * @param this

diff --git a/build/components.js b/build/components.js
@@ -207,7 +207,6 @@ export function getReactClassComponent(reactComponent = {}, options = {}) {
         ...reactComponent
     };
     const rjcKeys = Object.keys(rjc);
-    console.log({ rjcKeys });
     if (rjcKeys.includes("render") === false) {
         throw new ReferenceError("React components require a render method");
     }
@@ -315,7 +314,7 @@ export function FormComponent(props = {}) {
         const renderJSONX = useMemo(() => getReactElementFromJSONX.bind(context), [
             context
         ]);
-        return renderJSONX(formWrapperJXM);
+        return renderJSONX(formWrapperJXM) || null;
     }
     if (props.name) {
         Object.defineProperty(FormComponentFunction, "name", {

diff --git a/build/props.d.ts b/build/props.d.ts
@@ -113,6 +113,28 @@ export declare function getChildrenComponents(this: defs.Context, options?: {
     _children: any;
     children?: undefined;
 };
+/**
+ * registers an input to a reactHookForm register function
+ * @param {*} options
+ * @returns {object} - returns name, ref, onBlur, onChange
+ */
+export declare function useFormRegisterHandler(this: {
+    reactHookForm: {
+        register: (ref: string) => {
+            name: string;
+            ref: HTMLElement;
+            onBlur: () => void;
+            onChange: () => void;
+        };
+    };
+}, options?: {
+    jsonx?: defs.jsonx;
+}): {
+    name: string;
+    ref: HTMLElement;
+    onBlur: () => void;
+    onChange: () => void;
+};
 /**
  * returns a reducer function that returns values ot bind to an eval function. This function is used when values need to be passed from a hook function to a prop that is a function
  * @param {object} this
@@ -177,6 +199,7 @@ export declare function getReactComponentProps(this: defs.Context, options?: {
  * @returns {Function} returns a function from this.props or window functions
  * @example
  * getFunctionFromProps({ propFunc='func:this.props.onClick', }) // => this.props.onClick
+ * @deprecated
  */
 export declare function getFunctionFromProps(this: defs.Context, options?: {
     propFunc?: string;

diff --git a/build/props.js b/build/props.js
@@ -136,6 +136,14 @@ export function getChildrenComponents(options = {}) {
         };
     }
 }
+/**
+ * registers an input to a reactHookForm register function
+ * @param {*} options
+ * @returns {object} - returns name, ref, onBlur, onChange
+ */
+export function useFormRegisterHandler(options = {}) {
+    return this.reactHookForm.register(options?.jsonx?.props?.name);
+}
 /**
  * returns a reducer function that returns values ot bind to an eval function. This function is used when values need to be passed from a hook function to a prop that is a function
  * @param {object} this
@@ -407,6 +415,7 @@ export function getReactComponentProps(options = { jsonx: {} }) {
  * @returns {Function} returns a function from this.props or window functions
  * @example
  * getFunctionFromProps({ propFunc='func:this.props.onClick', }) // => this.props.onClick
+ * @deprecated
  */
 export function getFunctionFromProps(options = { jsonx: {}, propBody: "" }) {
     const { propFunc = "func:", propBody, jsonx, functionProperty = "" } = options;
@@ -624,12 +633,6 @@ export function getComputedProps(options = {}) {
                     : {}
                 : {})
             : undefined;
-        if (jsonx.useformregister) {
-            jsonx.thiscontext = {
-                ref: ['reactHookForm', 'register'],
-                ...jsonx.thiscontext,
-            };
-        }
         const windowTraverse = typeof window !== "undefined" ? window : {};
         const asyncprops = jsonx.asyncprops
             ? getJSONXProps({
@@ -666,13 +669,26 @@ export function getComputedProps(options = {}) {
                 traverseObject: this.state
             })
             : {};
-        const thiscontext = jsonx.thiscontext
+        let thiscontext = jsonx.thiscontext
             ? getJSONXProps({
                 jsonx,
                 propName: "thiscontext",
                 traverseObject: this || {}
             })
             : {};
+        if (jsonx.useformregister) {
+            const evalJSONX = {
+                ...jsonx,
+                __dangerouslyEvalAllProps: useFormRegisterHandler
+            };
+            const contextProps = getEvalProps.call(this, {
+                jsonx: evalJSONX
+            });
+            thiscontext = {
+                ...thiscontext,
+                ...contextProps
+            };
+        }
         //allowing javascript injections
         const evalProps = jsonx.__dangerouslyEvalProps || jsonx.__dangerouslyBindEvalProps
             ? getEvalProps.call(this, { jsonx })

diff --git a/build/utils.js b/build/utils.js
@@ -550,3 +550,13 @@ export async function fetchJSON(path = "", options = {}) {
         throw e;
     }
 }
+// export function Deprecated(): MethodDecorator {
+//   return (target: Object, key: string | symbol, descriptor: PropertyDescriptor) => {
+//       const original = descriptor.value;
+//       descriptor.value = (...args: any) => {
+//           console.warn(`Warning: ${String(key)} is deprecated`);
+//           original(...args);
+//       }
+//       return descriptor;
+//   }
+// }
diff --git a/dist/index.cjs.js b/dist/index.cjs.js
diff --git a/dist/index.cjs.js.map b/dist/index.cjs.js.map
diff --git a/dist/index.cjs.server.js b/dist/index.cjs.server.js
@@ -1502,11 +1502,13 @@ function useForm({ mode = VALIDATION_MODE.onSubmit, reValidateMode = VALIDATION_
                 name,
                 onChange: handleChange,
                 onBlur: handleChange,
-                ref: (ref) => ref
-                    ? registerFieldRef(name, ref, options)
-                    : (shouldUnregister || (options && options.shouldUnregister)) &&
-                        isWeb &&
-                        unregisterFieldsNamesRef.current.add(name),
+                ref: (ref) => {
+                    ref
+                        ? registerFieldRef(name, ref, options)
+                        : (shouldUnregister || (options && options.shouldUnregister)) &&
+                            isWeb &&
+                            unregisterFieldsNamesRef.current.add(name);
+                },
             };
     }, [defaultValuesRef.current]);
     const handleSubmit = React__namespace.useCallback((onValid, onInvalid) => async (e) => {
@@ -1644,11 +1646,14 @@ function useForm({ mode = VALIDATION_MODE.onSubmit, reValidateMode = VALIDATION_
         };
     }, []);
     React__namespace.useEffect(() => {
+        const isLiveInDom = (ref) => !isHTMLElement(ref) || !document.contains(ref);
         isMountedRef.current = true;
         unregisterFieldsNamesRef.current.forEach((name) => {
             const field = get(fieldsRef.current, name);
             field &&
-                (!isHTMLElement(field._f.ref) || !document.contains(field._f.ref)) &&
+                (field._f.refs
+                    ? field._f.refs.every(isLiveInDom)
+                    : isLiveInDom(field._f.ref)) &&
                 unregisterInternal(name);
         });
         unregisterFieldsNamesRef.current = new Set();