@bolttech/form-engine 3.0.2-beta.7 → 3.1.0-beta.1

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 } from 'react';
+import { createContext, useContext, useRef, useMemo, useState, useEffect, useCallback, Suspense, Children, Fragment as Fragment$1 } from 'react';
 
 var commonjsGlobal = typeof globalThis !== 'undefined' ? globalThis : typeof window !== 'undefined' ? window : typeof global !== 'undefined' ? global : typeof self !== 'undefined' ? self : {};
 
@@ -1468,6 +1468,73 @@ if (DESCRIPTORS$1 && values.name !== 'values') try {
   defineProperty$1(values, 'name', { value: 'values' });
 } catch (error) { /* empty */ }
 
+var DESCRIPTORS = descriptors;
+var uncurryThis$5 = functionUncurryThis;
+var call$2 = functionCall;
+var fails$6 = fails$h;
+var objectKeys = objectKeys$2;
+var getOwnPropertySymbolsModule = objectGetOwnPropertySymbols;
+var propertyIsEnumerableModule = objectPropertyIsEnumerable;
+var toObject$1 = toObject$4;
+var IndexedObject = indexedObject;
+
+// eslint-disable-next-line es/no-object-assign -- safe
+var $assign = Object.assign;
+// eslint-disable-next-line es/no-object-defineproperty -- required for testing
+var defineProperty = Object.defineProperty;
+var concat = uncurryThis$5([].concat);
+
+// `Object.assign` method
+// https://tc39.es/ecma262/#sec-object.assign
+var objectAssign = !$assign || fails$6(function () {
+  // should have correct order of operations (Edge bug)
+  if (DESCRIPTORS && $assign({ b: 1 }, $assign(defineProperty({}, 'a', {
+    enumerable: true,
+    get: function () {
+      defineProperty(this, 'b', {
+        value: 3,
+        enumerable: false
+      });
+    }
+  }), { b: 2 })).b !== 1) return true;
+  // should work with symbols and should have deterministic property order (V8 bug)
+  var A = {};
+  var B = {};
+  // eslint-disable-next-line es/no-symbol -- safe
+  var symbol = Symbol('assign detection');
+  var alphabet = 'abcdefghijklmnopqrst';
+  A[symbol] = 7;
+  alphabet.split('').forEach(function (chr) { B[chr] = chr; });
+  return $assign({}, A)[symbol] !== 7 || objectKeys($assign({}, B)).join('') !== alphabet;
+}) ? function assign(target, source) { // eslint-disable-line no-unused-vars -- required for `.length`
+  var T = toObject$1(target);
+  var argumentsLength = arguments.length;
+  var index = 1;
+  var getOwnPropertySymbols = getOwnPropertySymbolsModule.f;
+  var propertyIsEnumerable = propertyIsEnumerableModule.f;
+  while (argumentsLength > index) {
+    var S = IndexedObject(arguments[index++]);
+    var keys = getOwnPropertySymbols ? concat(objectKeys(S), getOwnPropertySymbols(S)) : objectKeys(S);
+    var length = keys.length;
+    var j = 0;
+    var key;
+    while (length > j) {
+      key = keys[j++];
+      if (!DESCRIPTORS || call$2(propertyIsEnumerable, S, key)) T[key] = S[key];
+    }
+  } return T;
+} : $assign;
+
+var $$3 = _export;
+var assign = objectAssign;
+
+// `Object.assign` method
+// https://tc39.es/ecma262/#sec-object.assign
+// eslint-disable-next-line es/no-object-assign -- required for testing
+$$3({ target: 'Object', stat: true, arity: 2, forced: Object.assign !== assign }, {
+  assign: assign
+});
+
 // iterable DOM collections
 // flag - `iterable` interface - 'entries', 'keys', 'values', 'forEach' methods
 var domIterables = {
@@ -1605,9 +1672,9 @@ var toString$3 = function (argument) {
   return $String(argument);
 };
 
-var uncurryThis$5 = functionUncurryThis;
+var uncurryThis$4 = functionUncurryThis;
 
-var arraySlice$1 = uncurryThis$5([].slice);
+var arraySlice$1 = uncurryThis$4([].slice);
 
 var arraySlice = arraySlice$1;
 
@@ -1651,11 +1718,11 @@ var sort = function (array, comparefn) {
 
 var arraySort = sort;
 
-var fails$6 = fails$h;
+var fails$5 = fails$h;
 
 var arrayMethodIsStrict$1 = function (METHOD_NAME, argument) {
   var method = [][METHOD_NAME];
-  return !!method && fails$6(function () {
+  return !!method && fails$5(function () {
     // eslint-disable-next-line no-useless-call -- required for testing
     method.call(null, argument || function () { return 1; }, 1);
   });
@@ -1677,14 +1744,14 @@ var webkit = userAgent.match(/AppleWebKit\/(\d+)\./);
 
 var engineWebkitVersion = !!webkit && +webkit[1];
 
-var $$3 = _export;
-var uncurryThis$4 = functionUncurryThis;
+var $$2 = _export;
+var uncurryThis$3 = functionUncurryThis;
 var aCallable = aCallable$3;
-var toObject$1 = toObject$4;
+var toObject = toObject$4;
 var lengthOfArrayLike = lengthOfArrayLike$2;
 var deletePropertyOrThrow = deletePropertyOrThrow$1;
 var toString$2 = toString$3;
-var fails$5 = fails$h;
+var fails$4 = fails$h;
 var internalSort = arraySort;
 var arrayMethodIsStrict = arrayMethodIsStrict$1;
 var FF = engineFfVersion;
@@ -1693,21 +1760,21 @@ var V8 = engineV8Version;
 var WEBKIT = engineWebkitVersion;
 
 var test = [];
-var nativeSort = uncurryThis$4(test.sort);
-var push = uncurryThis$4(test.push);
+var nativeSort = uncurryThis$3(test.sort);
+var push = uncurryThis$3(test.push);
 
 // IE8-
-var FAILS_ON_UNDEFINED = fails$5(function () {
+var FAILS_ON_UNDEFINED = fails$4(function () {
   test.sort(undefined);
 });
 // V8 bug
-var FAILS_ON_NULL = fails$5(function () {
+var FAILS_ON_NULL = fails$4(function () {
   test.sort(null);
 });
 // Old WebKit
 var STRICT_METHOD = arrayMethodIsStrict('sort');
 
-var STABLE_SORT = !fails$5(function () {
+var STABLE_SORT = !fails$4(function () {
   // feature detection can be too slow, so check engines versions
   if (V8) return V8 < 70;
   if (FF && FF > 3) return;
@@ -1755,11 +1822,11 @@ var getSortCompare = function (comparefn) {
 
 // `Array.prototype.sort` method
 // https://tc39.es/ecma262/#sec-array.prototype.sort
-$$3({ target: 'Array', proto: true, forced: FORCED }, {
+$$2({ target: 'Array', proto: true, forced: FORCED }, {
   sort: function sort(comparefn) {
     if (comparefn !== undefined) aCallable(comparefn);
 
-    var array = toObject$1(this);
+    var array = toObject(this);
 
     if (STABLE_SORT) return comparefn === undefined ? nativeSort(array) : nativeSort(array, comparefn);
 
@@ -1783,73 +1850,6 @@ $$3({ target: 'Array', proto: true, forced: FORCED }, {
   }
 });
 
-var DESCRIPTORS = descriptors;
-var uncurryThis$3 = functionUncurryThis;
-var call$2 = functionCall;
-var fails$4 = fails$h;
-var objectKeys = objectKeys$2;
-var getOwnPropertySymbolsModule = objectGetOwnPropertySymbols;
-var propertyIsEnumerableModule = objectPropertyIsEnumerable;
-var toObject = toObject$4;
-var IndexedObject = indexedObject;
-
-// eslint-disable-next-line es/no-object-assign -- safe
-var $assign = Object.assign;
-// eslint-disable-next-line es/no-object-defineproperty -- required for testing
-var defineProperty = Object.defineProperty;
-var concat = uncurryThis$3([].concat);
-
-// `Object.assign` method
-// https://tc39.es/ecma262/#sec-object.assign
-var objectAssign = !$assign || fails$4(function () {
-  // should have correct order of operations (Edge bug)
-  if (DESCRIPTORS && $assign({ b: 1 }, $assign(defineProperty({}, 'a', {
-    enumerable: true,
-    get: function () {
-      defineProperty(this, 'b', {
-        value: 3,
-        enumerable: false
-      });
-    }
-  }), { b: 2 })).b !== 1) return true;
-  // should work with symbols and should have deterministic property order (V8 bug)
-  var A = {};
-  var B = {};
-  // eslint-disable-next-line es/no-symbol -- safe
-  var symbol = Symbol('assign detection');
-  var alphabet = 'abcdefghijklmnopqrst';
-  A[symbol] = 7;
-  alphabet.split('').forEach(function (chr) { B[chr] = chr; });
-  return $assign({}, A)[symbol] !== 7 || objectKeys($assign({}, B)).join('') !== alphabet;
-}) ? function assign(target, source) { // eslint-disable-line no-unused-vars -- required for `.length`
-  var T = toObject(target);
-  var argumentsLength = arguments.length;
-  var index = 1;
-  var getOwnPropertySymbols = getOwnPropertySymbolsModule.f;
-  var propertyIsEnumerable = propertyIsEnumerableModule.f;
-  while (argumentsLength > index) {
-    var S = IndexedObject(arguments[index++]);
-    var keys = getOwnPropertySymbols ? concat(objectKeys(S), getOwnPropertySymbols(S)) : objectKeys(S);
-    var length = keys.length;
-    var j = 0;
-    var key;
-    while (length > j) {
-      key = keys[j++];
-      if (!DESCRIPTORS || call$2(propertyIsEnumerable, S, key)) T[key] = S[key];
-    }
-  } return T;
-} : $assign;
-
-var $$2 = _export;
-var assign = objectAssign;
-
-// `Object.assign` method
-// https://tc39.es/ecma262/#sec-object.assign
-// eslint-disable-next-line es/no-object-assign -- required for testing
-$$2({ target: 'Object', stat: true, arity: 2, forced: Object.assign !== assign }, {
-  assign: assign
-});
-
 var anObject$1 = anObject$6;
 
 // `RegExp.prototype.flags` getter implementation
@@ -2523,69 +2523,52 @@ function Form({
     debugMode,
     formGroupInstance
   } = useFormGroupContext({});
-  const [tree, setTree] = useState();
-  const schemaIndex = useMemo(() => index || (schema === null || schema === void 0 ? void 0 : schema.index) || 'defaultChange', [index, schema]);
-  /**
-   * logic to initialize the form instance and it's removal
-   */
-  useEffect(() => {
-    if (schemaIndex === 'defaultChange') {
-      console.warn('please, add an unique id to the form, otherwise multiple forms will break');
-    }
-    const formInstance = 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: schemaIndex,
-      mappers,
-      config: config || formGroupInstance.config
-    });
-    addForm({
-      key: schemaIndex,
-      formInstance
-    });
-    let subMounted;
-    if (onFormMount) {
-      subMounted = formInstance.subscribeOnMount(onFormMount);
-    }
-    formInstance === null || formInstance === void 0 ? void 0 : formInstance.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: schemaIndex
-      });
-    };
-  }, []);
+  const [schemaIndex, setSchemaIndex] = useState(`${index || (schema === null || schema === void 0 ? void 0 : schema.index) || 'defaultChange'}-ssr`);
+  const [formInstance, setFormInstance] = useState(new FormCore({
+    schema: Object.assign(Object.assign({}, schema), {
+      index: schemaIndex
+    }),
+    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: schemaIndex,
+    mappers,
+    config: config || formGroupInstance.config
+  }));
+  if (schemaIndex === 'defaultChange' || schemaIndex === 'defaultChange-ssr') {
+    console.warn('please, add an unique id to the form, otherwise multiple forms will break');
+  }
+  if (!formGroupInstance.forms.has(schemaIndex)) addForm({
+    key: schemaIndex,
+    formInstance
+  });
   /**
    * logic to transform AsFormFields onto JSON schema
    * and JSON schema onto FieldWrappers, refreshes when
    * the react tree changes it's children
    */
-  useEffect(() => {
-    var _a;
-    const schema = BuildAsFormFieldTree({
+  const tree = useMemo(() => {
+    var _a, _b;
+    const parsedSchema = BuildAsFormFieldTree({
       children
     });
-    schema && getForm({
-      key: index
-    }).refreshFields(schema);
-    const fields = (_a = getForm({
-      key: index
-    })) === null || _a === void 0 ? void 0 : _a.fields;
+    parsedSchema && ((_a = getForm({
+      key: schemaIndex
+    })) === null || _a === void 0 ? void 0 : _a.refreshFields(parsedSchema));
+    const fields = (_b = getForm({
+      key: schemaIndex
+    })) === null || _b === void 0 ? void 0 : _b.fields;
     if (fields) {
       const buildTree = BuildTree({
         fields,
-        formIndex: index
+        formIndex: schemaIndex
       });
-      setTree(buildTree);
+      return jsx(Fragment$1, {
+        children: buildTree
+      }, schemaIndex);
     }
-  }, [children]);
+  }, [children, schemaIndex, getForm]);
   /**
    * iVars change tracker to update iVars onto form instance
    */
@@ -2602,6 +2585,46 @@ function Form({
       key: schemaIndex
     }).setInitialValues(initialValues);
   }, [initialValues]);
+  /**
+   * 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
+    });
+    let subMounted;
+    if (onFormMount) {
+      subMounted = newInstance.subscribeOnMount(onFormMount);
+    }
+    newInstance.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`
+      });
+    };
+  }, []);
   /**
    * hook usage to keep event bindings updated on callback functions passed as props
    */
@@ -2872,11 +2895,29 @@ $({ target: 'RegExp', proto: true, forced: /./.exec !== exec }, {
  * @returns {ReactElement}
  */
 const AsFormFieldBuilder = props => {
+  var _a;
   const context = useFormGroupContext({});
-  /**
-   * state to track the field instance creation process
-   */
-  const [mounted, setMounted] = useState(false);
+  const [fieldName, setFieldName] = useState(`${props.name}-ssr`);
+  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))) {
+    const fieldSchema = Object.assign(Object.assign(Object.assign({}, props), {
+      name: fieldName
+    }), {
+      component: props.mapper.componentName,
+      children: undefined
+    });
+    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: fieldName
+    });
+    if (typeof (props === null || props === void 0 ? void 0 : props.visibility) !== 'undefined' && field) {
+      field.visibility = props.visibility;
+    }
+  }
   /**
    * initializer to create or add a form instance to the formGroup by it's formId
    * and add the field to the form instance
@@ -2884,6 +2925,7 @@ const AsFormFieldBuilder = props => {
    */
   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);
     }
@@ -2902,19 +2944,22 @@ const AsFormFieldBuilder = props => {
     if (typeof (props === null || props === void 0 ? void 0 : props.visibility) !== 'undefined' && field) {
       field.visibility = props.visibility;
     }
-    setMounted(true);
-    return () => formInstance === null || formInstance === void 0 ? void 0 : formInstance.removeField({
-      key: props.name
-    });
-  }, []);
+    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`
+      });
+    };
+  }, [fieldName]);
   /**
    * expensive function to allow both external props and templating work
    * evaluate if templating will be done onto form-engine or not
    */
   useEffect(() => {
     var _a;
-    if (!mounted) return;
-    const field = (_a = context.formGroupInstance.forms.get(props.formIndex)) === null || _a === void 0 ? void 0 : _a.fields.get(props.name);
+    const field = (_a = context.formGroupInstance.forms.get(props.formIndex)) === null || _a === void 0 ? void 0 : _a.fields.get(fieldName);
     const fieldProps = field === null || field === void 0 ? void 0 : field.props;
     if (props.props) {
       Object.keys(props.props).forEach(propKey => {
@@ -2929,7 +2974,7 @@ const AsFormFieldBuilder = props => {
       });
     }
     field === null || field === void 0 ? void 0 : field.propsSubject$.next(Object.assign(Object.assign({}, fieldProps), props.props));
-  }, [props.props]);
+  }, [props.props, fieldName]);
   /**
    * allows to control field selected value on each event
    */
@@ -2946,13 +2991,13 @@ const AsFormFieldBuilder = props => {
     });
     return () => sub === null || sub === void 0 ? void 0 : sub.unsubscribe();
   }, [props.onSelected]);
-  return mounted ? jsx(FieldWrapper, {
+  return jsx(FieldWrapper, {
     formIndex: props.formIndex,
-    name: props.name,
+    name: fieldName,
     props: props.props,
     context: !context.active ? context : null,
     children: props.children && props.children
-  }) : jsx(Fragment, {});
+  }, fieldName);
 };
 
 function useFormGroup({

package/package.json

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