@formvuelate/plugin-vee-validate - npm Package Compare versions

Comparing version 1.0.5 to 1.0.6

dist/formvuelate-plugin-vee-validate.cjs.js

 /**
- * @formvuelate/plugin-vee-validate v1.0.5
+ * @formvuelate/plugin-vee-validate v1.0.6
  * (c) 2021 Abdelrahman Awad <[e-mail]>
@@ -68,10 +68,13 @@ * @license MIT
 
-        return Object.assign({}, el, {
-          schema: schemaArray.map(function (nestedField) { return mapField(nestedField, path); })
-        })
+        return Object.assign({}, el,
+          {schema: schemaArray.map(function (nestedField) { return mapField(nestedField, path); })})
       }
 
-      return Object.assign({}, el, {
-        component: vue.markRaw(withField(el, mapProps, path))
-      })
+      return Object.assign({}, el,
+        // namespaced prop to avoid clash with users' props
+        {_veeValidateConfig: {
+          mapProps: mapProps,
+          path: path
+        },
+        component: withField(el)})
     }
@@ -99,8 +102,14 @@
 
-function withField (el, mapProps, path) {
-  if ( path === void 0 ) path = '';
+// Used to track if a component was already marked
+// very important to avoid re-creating components when re-rendering
+var COMPONENT_LOOKUP = new Map();
 
+function withField (el) {
   var Comp = el.component;
 
-  return {
+  if (COMPONENT_LOOKUP.has(Comp)) {
+    return COMPONENT_LOOKUP.get(Comp)
+  }
+
+  var wrappedComponent = vue.markRaw({
     name: 'withFieldWrapper',
@@ -115,10 +124,17 @@ props: {
         default: undefined
+      },
+      _veeValidateConfig: {
+        type: Object,
+        required: true
       }
     },
-    setup: function setup (props, ref) {
+    setup: function setup(props, ref) {
       var attrs = ref.attrs;
 
-      var ref$1 = vue.toRefs(props);
-      var validations = ref$1.validations;
-      var modelValue = ref$1.modelValue;
+      var ref$1 = props._veeValidateConfig;
+      var path = ref$1.path;
+      var mapProps = ref$1.mapProps;
+      var ref$2 = vue.toRefs(props);
+      var validations = ref$2.validations;
+      var modelValue = ref$2.modelValue;
       var initialValue = modelValue ? modelValue.value : undefined;
@@ -128,11 +144,11 @@ // Build a fully qualified field name using dot notation for nested fields
       var name = path ? (path + "." + (attrs.model)) : attrs.model;
-      var ref$2 = veeValidate.useField(name, validations, {
+      var ref$3 = veeValidate.useField(name, validations, {
         initialValue: initialValue
       });
-      var value = ref$2.value;
-      var errorMessage = ref$2.errorMessage;
-      var meta = ref$2.meta;
-      var setDirty = ref$2.setDirty;
-      var setTouched = ref$2.setTouched;
-      var errors = ref$2.errors;
+      var value = ref$3.value;
+      var errorMessage = ref$3.errorMessage;
+      var meta = ref$3.meta;
+      var setDirty = ref$3.setDirty;
+      var setTouched = ref$3.setTouched;
+      var errors = ref$3.errors;
 
@@ -145,4 +161,6 @@ if (modelValue) {
 
-      return function renderWithField () {
-        return vue.h(vue.resolveDynamicComponent(Comp), Object.assign({}, props,
+      var resolvedComponent = vue.resolveDynamicComponent(Comp);
+
+      return function renderWithField() {
+        return vue.h(resolvedComponent, Object.assign({}, props,
           attrs,
@@ -158,3 +176,8 @@ mapProps({
     }
-  }
+  });
+
+  // Assign it to the cache to avoid re-creating it
+  COMPONENT_LOOKUP.set(Comp, wrappedComponent);
+
+  return wrappedComponent
 }
@@ -161,0 +184,0 @@

dist/formvuelate-plugin-vee-validate.es.js

 /**
- * @formvuelate/plugin-vee-validate v1.0.5
+ * @formvuelate/plugin-vee-validate v1.0.6
  * (c) 2021 Abdelrahman Awad <[e-mail]>
@@ -64,10 +64,13 @@ * @license MIT
 
-        return Object.assign({}, el, {
-          schema: schemaArray.map(function (nestedField) { return mapField(nestedField, path); })
-        })
+        return Object.assign({}, el,
+          {schema: schemaArray.map(function (nestedField) { return mapField(nestedField, path); })})
       }
 
-      return Object.assign({}, el, {
-        component: markRaw(withField(el, mapProps, path))
-      })
+      return Object.assign({}, el,
+        // namespaced prop to avoid clash with users' props
+        {_veeValidateConfig: {
+          mapProps: mapProps,
+          path: path
+        },
+        component: withField(el)})
     }
@@ -95,8 +98,14 @@
 
-function withField (el, mapProps, path) {
-  if ( path === void 0 ) path = '';
+// Used to track if a component was already marked
+// very important to avoid re-creating components when re-rendering
+var COMPONENT_LOOKUP = new Map();
 
+function withField (el) {
   var Comp = el.component;
 
-  return {
+  if (COMPONENT_LOOKUP.has(Comp)) {
+    return COMPONENT_LOOKUP.get(Comp)
+  }
+
+  var wrappedComponent = markRaw({
     name: 'withFieldWrapper',
@@ -111,10 +120,17 @@ props: {
         default: undefined
+      },
+      _veeValidateConfig: {
+        type: Object,
+        required: true
       }
     },
-    setup: function setup (props, ref) {
+    setup: function setup(props, ref) {
       var attrs = ref.attrs;
 
-      var ref$1 = toRefs(props);
-      var validations = ref$1.validations;
-      var modelValue = ref$1.modelValue;
+      var ref$1 = props._veeValidateConfig;
+      var path = ref$1.path;
+      var mapProps = ref$1.mapProps;
+      var ref$2 = toRefs(props);
+      var validations = ref$2.validations;
+      var modelValue = ref$2.modelValue;
       var initialValue = modelValue ? modelValue.value : undefined;
@@ -124,11 +140,11 @@ // Build a fully qualified field name using dot notation for nested fields
       var name = path ? (path + "." + (attrs.model)) : attrs.model;
-      var ref$2 = useField(name, validations, {
+      var ref$3 = useField(name, validations, {
         initialValue: initialValue
       });
-      var value = ref$2.value;
-      var errorMessage = ref$2.errorMessage;
-      var meta = ref$2.meta;
-      var setDirty = ref$2.setDirty;
-      var setTouched = ref$2.setTouched;
-      var errors = ref$2.errors;
+      var value = ref$3.value;
+      var errorMessage = ref$3.errorMessage;
+      var meta = ref$3.meta;
+      var setDirty = ref$3.setDirty;
+      var setTouched = ref$3.setTouched;
+      var errors = ref$3.errors;
 
@@ -141,4 +157,6 @@ if (modelValue) {
 
-      return function renderWithField () {
-        return h(resolveDynamicComponent(Comp), Object.assign({}, props,
+      var resolvedComponent = resolveDynamicComponent(Comp);
+
+      return function renderWithField() {
+        return h(resolvedComponent, Object.assign({}, props,
           attrs,
@@ -154,3 +172,8 @@ mapProps({
     }
-  }
+  });
+
+  // Assign it to the cache to avoid re-creating it
+  COMPONENT_LOOKUP.set(Comp, wrappedComponent);
+
+  return wrappedComponent
 }
@@ -157,0 +180,0 @@

dist/formvuelate-plugin-vee-validate.js

 /**
- * @formvuelate/plugin-vee-validate v1.0.5
+ * @formvuelate/plugin-vee-validate v1.0.6
  * (c) 2021 Abdelrahman Awad <[e-mail]>
@@ -67,10 +67,13 @@ * @license MIT
 
-        return Object.assign({}, el, {
-          schema: schemaArray.map(function (nestedField) { return mapField(nestedField, path); })
-        })
+        return Object.assign({}, el,
+          {schema: schemaArray.map(function (nestedField) { return mapField(nestedField, path); })})
       }
 
-      return Object.assign({}, el, {
-        component: vue.markRaw(withField(el, mapProps, path))
-      })
+      return Object.assign({}, el,
+        // namespaced prop to avoid clash with users' props
+        {_veeValidateConfig: {
+          mapProps: mapProps,
+          path: path
+        },
+        component: withField(el)})
     }
@@ -98,8 +101,14 @@
 
-function withField (el, mapProps, path) {
-  if ( path === void 0 ) path = '';
+// Used to track if a component was already marked
+// very important to avoid re-creating components when re-rendering
+var COMPONENT_LOOKUP = new Map();
 
+function withField (el) {
   var Comp = el.component;
 
-  return {
+  if (COMPONENT_LOOKUP.has(Comp)) {
+    return COMPONENT_LOOKUP.get(Comp)
+  }
+
+  var wrappedComponent = vue.markRaw({
     name: 'withFieldWrapper',
@@ -114,10 +123,17 @@ props: {
         default: undefined
+      },
+      _veeValidateConfig: {
+        type: Object,
+        required: true
       }
     },
-    setup: function setup (props, ref) {
+    setup: function setup(props, ref) {
       var attrs = ref.attrs;
 
-      var ref$1 = vue.toRefs(props);
-      var validations = ref$1.validations;
-      var modelValue = ref$1.modelValue;
+      var ref$1 = props._veeValidateConfig;
+      var path = ref$1.path;
+      var mapProps = ref$1.mapProps;
+      var ref$2 = vue.toRefs(props);
+      var validations = ref$2.validations;
+      var modelValue = ref$2.modelValue;
       var initialValue = modelValue ? modelValue.value : undefined;
@@ -127,11 +143,11 @@ // Build a fully qualified field name using dot notation for nested fields
       var name = path ? (path + "." + (attrs.model)) : attrs.model;
-      var ref$2 = veeValidate.useField(name, validations, {
+      var ref$3 = veeValidate.useField(name, validations, {
         initialValue: initialValue
       });
-      var value = ref$2.value;
-      var errorMessage = ref$2.errorMessage;
-      var meta = ref$2.meta;
-      var setDirty = ref$2.setDirty;
-      var setTouched = ref$2.setTouched;
-      var errors = ref$2.errors;
+      var value = ref$3.value;
+      var errorMessage = ref$3.errorMessage;
+      var meta = ref$3.meta;
+      var setDirty = ref$3.setDirty;
+      var setTouched = ref$3.setTouched;
+      var errors = ref$3.errors;
 
@@ -144,4 +160,6 @@ if (modelValue) {
 
-      return function renderWithField () {
-        return vue.h(vue.resolveDynamicComponent(Comp), Object.assign({}, props,
+      var resolvedComponent = vue.resolveDynamicComponent(Comp);
+
+      return function renderWithField() {
+        return vue.h(resolvedComponent, Object.assign({}, props,
           attrs,
@@ -157,3 +175,8 @@ mapProps({
     }
-  }
+  });
+
+  // Assign it to the cache to avoid re-creating it
+  COMPONENT_LOOKUP.set(Comp, wrappedComponent);
+
+  return wrappedComponent
 }
@@ -160,0 +183,0 @@

dist/formvuelate-plugin-vee-validate.min.js

 /**
- * @formvuelate/plugin-vee-validate v1.0.5
+ * @formvuelate/plugin-vee-validate v1.0.6
  * (c) 2021 Abdelrahman Awad <[e-mail]>
@@ -7,2 +7,2 @@ * @license MIT
 
-!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?t(exports,require("vue"),require("vee-validate")):"function"==typeof define&&define.amd?define(["exports","vue","vee-validate"],t):t(e["@formvuelate/pluginVeeValidate"]={},e.Vue,e.VeeValidate)}(this,function(e,g,j){"use strict";var d=function(e,t){return e.map(function(e){return e.map(function(e){return t(e)})})};function t(e){return{validation:e}}function l(p,h,y){void 0===y&&(y="");var b=p.component;return{name:"withFieldWrapper",props:{modelValue:{type:[String,Number],default:void 0},validations:{type:[String,Object,Function],default:void 0}},setup:function(e,t){var i=t.attrs,n=g.toRefs(e),r=n.validations,a=n.modelValue,o=a?a.value:void 0,u=y?y+"."+i.model:i.model,s=j.useField(u,r,{initialValue:o}),c=s.value,d=s.errorMessage,l=s.meta,m=s.setDirty,f=s.setTouched,v=s.errors;return a&&g.watch(a,function(e){c.value=e}),function(){return g.h(g.resolveDynamicComponent(b),Object.assign({},e,i,h({errorMessage:g.unref(d),errors:g.unref(v),meta:l,setDirty:m,setTouched:f},p)))}}}}e.mapElementsInSchema=d,e.default=function(e){var c=e&&e.mapProps||t;return function(e){var t=e.parsedSchema,i=e.formBinds,n=g.getCurrentInstance().attrs,r=j.useForm({validationSchema:n["validation-schema"]||n.validationSchema,initialErrors:n["initial-errors"]||n.initialErrors,initialDirty:n["initial-dirty"]||n.initialDirty,initialTouched:n["initial-touched"]||n.initialTouched}).handleSubmit;function a(t,i){if(void 0===i&&(i=""),t.schema){i=i?i+"."+t.model:t.model;var e=Array.isArray(t.schema)?t.schema:Object.keys(t.schema).map(function(e){return Object.assign({},{model:e},t.schema[e])});return Object.assign({},t,{schema:e.map(function(e){return a(e,i)})})}return Object.assign({},t,{component:g.markRaw(l(t,c,i))})}var o=g.computed(function(){return d(t.value,a)}),u=i.value.onSubmit,s=r(function(e,t){var i=t.evt;u(i)});return Object.assign({},e,{formBinds:g.computed(function(){return Object.assign({},e.formBinds.value,{onSubmit:s})}),parsedSchema:o})}},e.withField=l,Object.defineProperty(e,"__esModule",{value:!0})});
+!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?t(exports,require("vue"),require("vee-validate")):"function"==typeof define&&define.amd?define(["exports","vue","vee-validate"],t):t(e["@formvuelate/pluginVeeValidate"]={},e.Vue,e.VeeValidate)}(this,function(e,V,O){"use strict";var d=function(e,t){return e.map(function(e){return e.map(function(e){return t(e)})})};function t(e){return{validation:e}}var i=new Map;function l(b){var j=b.component;if(i.has(j))return i.get(j);var e=V.markRaw({name:"withFieldWrapper",props:{modelValue:{type:[String,Number],default:void 0},validations:{type:[String,Object,Function],default:void 0},_veeValidateConfig:{type:Object,required:!0}},setup:function(e,t){var i=t.attrs,n=e._veeValidateConfig,a=n.path,r=n.mapProps,o=V.toRefs(e),u=o.validations,s=o.modelValue,c=s?s.value:void 0,d=a?a+"."+i.model:i.model,l=O.useField(d,u,{initialValue:c}),m=l.value,f=l.errorMessage,v=l.meta,p=l.setDirty,h=l.setTouched,g=l.errors;s&&V.watch(s,function(e){m.value=e});var y=V.resolveDynamicComponent(j);return function(){return V.h(y,Object.assign({},e,i,r({errorMessage:V.unref(f),errors:V.unref(g),meta:v,setDirty:p,setTouched:h},b)))}}});return i.set(j,e),e}e.mapElementsInSchema=d,e.default=function(e){var c=e&&e.mapProps||t;return function(e){var t=e.parsedSchema,i=e.formBinds,n=V.getCurrentInstance().attrs,a=O.useForm({validationSchema:n["validation-schema"]||n.validationSchema,initialErrors:n["initial-errors"]||n.initialErrors,initialDirty:n["initial-dirty"]||n.initialDirty,initialTouched:n["initial-touched"]||n.initialTouched}).handleSubmit;function r(t,i){if(void 0===i&&(i=""),t.schema){i=i?i+"."+t.model:t.model;var e=Array.isArray(t.schema)?t.schema:Object.keys(t.schema).map(function(e){return Object.assign({},{model:e},t.schema[e])});return Object.assign({},t,{schema:e.map(function(e){return r(e,i)})})}return Object.assign({},t,{_veeValidateConfig:{mapProps:c,path:i},component:l(t)})}var o=V.computed(function(){return d(t.value,r)}),u=i.value.onSubmit,s=a(function(e,t){var i=t.evt;u(i)});return Object.assign({},e,{formBinds:V.computed(function(){return Object.assign({},e.formBinds.value,{onSubmit:s})}),parsedSchema:o})}},e.withField=l,Object.defineProperty(e,"__esModule",{value:!0})});

package.json

 {
   "name": "@formvuelate/plugin-vee-validate",
-  "version": "1.0.5",
+  "version": "1.0.6",
   "description": "FormVueLate Vee-validate plugin",
@@ -5,0 +5,0 @@ "main": "dist/formvuelate-plugin-vee-validate.cjs.js",

src/index.js

@@ -55,10 +55,17 @@ import { toRefs, h, computed, markRaw, watch, getCurrentInstance, unref, resolveDynamicComponent } from 'vue'
 
-        return Object.assign({}, el, {
+        return {
+          ...el,
           schema: schemaArray.map(nestedField => mapField(nestedField, path))
-        })
+        }
       }
 
-      return Object.assign({}, el, {
-        component: markRaw(withField(el, mapProps, path))
-      })
+      return {
+        ...el,
+        // namespaced prop to avoid clash with users' props
+        _veeValidateConfig: {
+          mapProps,
+          path
+        },
+        component: withField(el)
+      }
     }
@@ -88,6 +95,14 @@
 
-export function withField (el, mapProps, path = '') {
+// Used to track if a component was already marked
+// very important to avoid re-creating components when re-rendering
+const COMPONENT_LOOKUP = new Map()
+
+export function withField (el) {
   const Comp = el.component
 
-  return {
+  if (COMPONENT_LOOKUP.has(Comp)) {
+    return COMPONENT_LOOKUP.get(Comp)
+  }
+
+  const wrappedComponent = markRaw({
     name: 'withFieldWrapper',
@@ -102,5 +117,10 @@ props: {
         default: undefined
+      },
+      _veeValidateConfig: {
+        type: Object,
+        required: true
       }
     },
-    setup (props, { attrs }) {
+    setup(props, { attrs }) {
+      const { path, mapProps } = props._veeValidateConfig
       const { validations, modelValue } = toRefs(props)
@@ -121,4 +141,6 @@ const initialValue = modelValue ? modelValue.value : undefined
 
-      return function renderWithField () {
-        return h(resolveDynamicComponent(Comp), {
+      const resolvedComponent = resolveDynamicComponent(Comp)
+
+      return function renderWithField() {
+        return h(resolvedComponent, {
           ...props,
@@ -136,3 +158,8 @@ ...attrs,
     }
-  }
+  })
+
+  // Assign it to the cache to avoid re-creating it
+  COMPONENT_LOOKUP.set(Comp, wrappedComponent)
+
+  return wrappedComponent
 }

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

26669

increased by12.08%

Lines of code

603

increased by15.08%

No dependency changes