@bolttech/form-engine 3.1.0-beta.1 → 3.1.0-beta.3

package/README.md

@@ -2,6 +2,20 @@
 
 This is an adapter to be used with the bolttech form engine. Compatible with Next.js 13 and 14 and react 18.
 
+## SSR compatibility
+
+Leaving behind the slowness that the old version gave us to render the form on the screen, this new version increases the speed of your project a million times, 
+adding to Form-Engine a 🚀 Blazing Fast 🚀 React feature that we can render the Form on the Server, so that it is instantly displayed to the user!
+
+| Without SSR (Form engine v2)                   | With SSR (Form engine v3)              |
+|------------------------------------------------|----------------------------------------|
+| \<Form> Component                              | \<Form> Component                      |
+| ![image](./assets/form-engine-without-ssr.gif) | ![image](./assets/form-engine-ssr.gif) |
+| \<AsFormField> Component                       | \<AsFormField> Component               |
+| ![image](./assets/asformfield-current.gif)     | ![image](./assets/asformfield-ssr.gif) |
+
+## Summary
+
 1. [Sample](#sample)
 2. [mappers](#mappers)
 3. [Form Group Context](#form-group-context)

package/index.esm.js

@@ -1,6 +1,6 @@
 import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
 import { FormGroup, FormCore } from '@bolttech/form-engine-core';
-import { createContext, useContext, useRef, useMemo, useState, useEffect, useCallback, Suspense, Children, Fragment as Fragment$1 } from 'react';
+import { createContext, useContext, useRef, useMemo, useState, useEffect, useCallback, Suspense, Children } from 'react';
 
 var commonjsGlobal = typeof globalThis !== 'undefined' ? globalThis : typeof window !== 'undefined' ? window : typeof global !== 'undefined' ? global : typeof self !== 'undefined' ? self : {};
 
@@ -2523,8 +2523,9 @@ function Form({
     debugMode,
     formGroupInstance
   } = useFormGroupContext({});
-  const [schemaIndex, setSchemaIndex] = useState(`${index || (schema === null || schema === void 0 ? void 0 : schema.index) || 'defaultChange'}-ssr`);
-  const [formInstance, setFormInstance] = useState(new FormCore({
+  const schemaIndex = useMemo(() => index || (schema === null || schema === void 0 ? void 0 : schema.index) || 'defaultChange', [index, schema === null || schema === void 0 ? void 0 : schema.index]);
+  const [render, setRender] = useState(false);
+  const formInstance = useRef(new FormCore({
     schema: Object.assign(Object.assign({}, schema), {
       index: schemaIndex
     }),
@@ -2541,7 +2542,7 @@ function Form({
   }
   if (!formGroupInstance.forms.has(schemaIndex)) addForm({
     key: schemaIndex,
-    formInstance
+    formInstance: formInstance.current
   });
   /**
    * logic to transform AsFormFields onto JSON schema
@@ -2564,11 +2565,9 @@ function Form({
         fields,
         formIndex: schemaIndex
       });
-      return jsx(Fragment$1, {
-        children: buildTree
-      }, schemaIndex);
+      return buildTree;
     }
-  }, [children, schemaIndex, getForm]);
+  }, [children, getForm]);
   /**
    * iVars change tracker to update iVars onto form instance
    */
@@ -2589,40 +2588,23 @@ function Form({
    * logic to mount and manage form removal
    */
   useEffect(() => {
-    const newIndex = index || (schema === null || schema === void 0 ? void 0 : schema.index) || 'defaultChange';
-    const newInstance = new FormCore({
-      schema,
-      initialValues: initialValues || (schema === null || schema === void 0 ? void 0 : schema.initialValues),
-      iVars: iVars || (schema === null || schema === void 0 ? void 0 : schema.iVars),
-      action: action || (schema === null || schema === void 0 ? void 0 : schema.action),
-      method: method || (schema === null || schema === void 0 ? void 0 : schema.method),
-      index: newIndex,
-      mappers,
-      config: config || formGroupInstance.config
-    });
-    setSchemaIndex(newIndex);
-    setFormInstance(newInstance);
-    addForm({
-      key: newIndex,
-      formInstance: newInstance
-    });
+    setRender(true);
     let subMounted;
     if (onFormMount) {
-      subMounted = newInstance.subscribeOnMount(onFormMount);
+      subMounted = formInstance.current.subscribeOnMount(onFormMount);
     }
-    newInstance.mounted();
+    formInstance.current.mounted();
     /*
       @TODO check if form instance is killed each time it is unmounted
       the management of multiple forms needs to be planned
     */
     return () => {
       subMounted === null || subMounted === void 0 ? void 0 : subMounted.unsubscribe();
-      removeForm({
-        key: newIndex
-      });
-      if (formGroupInstance.forms.has(`${newIndex}-ssr`)) removeForm({
-        key: `${newIndex}-ssr`
-      });
+      if (render) {
+        removeForm({
+          key: schemaIndex
+        });
+      }
     };
   }, []);
   /**
@@ -2642,7 +2624,7 @@ function Form({
     onFormMount,
     onData,
     onValid
-  });
+  }, [formInstance]);
   /*
     @TODO move this logic inside form-core, add action and method onto form element,
     might need a ref of the form to collect all the form parameters when there is a
@@ -2897,7 +2879,8 @@ $({ target: 'RegExp', proto: true, forced: /./.exec !== exec }, {
 const AsFormFieldBuilder = props => {
   var _a;
   const context = useFormGroupContext({});
-  const [fieldName, setFieldName] = useState(`${props.name}-ssr`);
+  const [render, setRender] = useState(false);
+  const fieldName = props.name;
   if (!((_a = context.formGroupInstance) === null || _a === void 0 ? void 0 : _a.forms.has(props.formIndex))) context.addFormWithIndex(props.formIndex);
   const formInstance = context.formGroupInstance.forms.get(props.formIndex);
   if (!(formInstance === null || formInstance === void 0 ? void 0 : formInstance.fields.has(fieldName))) {
@@ -2924,35 +2907,13 @@ const AsFormFieldBuilder = props => {
    * Also has the logic to remove it once this element is removed
    */
   useEffect(() => {
-    var _a;
-    setFieldName(props.name);
-    if (!((_a = context.formGroupInstance) === null || _a === void 0 ? void 0 : _a.forms.has(props.formIndex))) {
-      context.addFormWithIndex(props.formIndex);
-    }
-    const fieldSchema = Object.assign(Object.assign({}, props), {
-      component: props.mapper.componentName,
-      children: undefined
-    });
-    const formInstance = context.formGroupInstance.forms.get(props.formIndex);
-    formInstance === null || formInstance === void 0 ? void 0 : formInstance.addField({
-      fieldSchema,
-      mapperElement: props.mapper
-    });
-    const field = formInstance === null || formInstance === void 0 ? void 0 : formInstance.getField({
-      key: props.name
-    });
-    if (typeof (props === null || props === void 0 ? void 0 : props.visibility) !== 'undefined' && field) {
-      field.visibility = props.visibility;
-    }
+    setRender(true);
     return () => {
-      formInstance === null || formInstance === void 0 ? void 0 : formInstance.removeField({
-        key: props.name
-      });
-      if (formInstance === null || formInstance === void 0 ? void 0 : formInstance.fields.has(`${props.name}-ssr`)) formInstance === null || formInstance === void 0 ? void 0 : formInstance.removeField({
-        key: `${props.name}-ssr`
+      if (render) formInstance === null || formInstance === void 0 ? void 0 : formInstance.removeField({
+        key: fieldName
       });
     };
-  }, [fieldName]);
+  }, []);
   /**
    * expensive function to allow both external props and templating work
    * evaluate if templating will be done onto form-engine or not
@@ -2997,7 +2958,7 @@ const AsFormFieldBuilder = props => {
     props: props.props,
     context: !context.active ? context : null,
     children: props.children && props.children
-  }, fieldName);
+  });
 };
 
 function useFormGroup({

package/package.json

@@ -1,12 +1,12 @@
 {
   "name": "@bolttech/form-engine",
-  "version": "3.1.0-beta.1",
+  "version": "3.1.0-beta.3",
   "description": "A react adapter for bolttech form engine",
   "module": "./index.esm.js",
   "type": "module",
   "main": "./index.esm.js",
   "dependencies": {
-    "@bolttech/form-engine-core": "1.0.0-beta.1",
+    "@bolttech/form-engine-core": "1.0.0-beta.3",
     "react": "18.2.0",
     "rxjs": "7.8.1"
   },