fix: local component injection refactor fixes #238 (#239)

packages/formvuelate/src/SchemaField.vue

@@ -2,7 +2,7 @@
   <component
     v-if="schemaCondition"
     v-bind="binds"
-    :is="field.component"
+    :is="component"
     :modelValue="fieldValue"
     @update:modelValue="update"
     class="schema-col"
@@ -11,7 +11,7 @@
 
 <script>
 import { inject, computed, watch } from 'vue'
-import { FIND_NESTED_FORM_MODEL_PROP, SCHEMA_MODEL_PATH, FORM_MODEL, UPDATE_FORM_MODEL, DELETE_FORM_MODEL_PROP } from './utils/constants'
+import { FIND_NESTED_FORM_MODEL_PROP, SCHEMA_MODEL_PATH, FORM_MODEL, UPDATE_FORM_MODEL, DELETE_FORM_MODEL_PROP, INJECTED_LOCAL_COMPONENTS } from './utils/constants'
 
 export default {
   name: 'SchemaField',
@@ -66,6 +66,13 @@ export default {
       return condition(formModel.value)
     })
 
+    const component = computed(() => {
+      // Possible local components injected by user from SchemaFormFactory
+      const locals = inject(INJECTED_LOCAL_COMPONENTS, {})
+
+      return locals[props.field.component] || props.field.component
+    })
+
     watch(schemaCondition, shouldDisplay => {
       if (shouldDisplay) return
       if (props.preventModelCleanupOnSchemaChange) return
@@ -77,7 +84,8 @@ export default {
       binds,
       fieldValue,
       update,
-      schemaCondition
+      schemaCondition,
+      component
     }
   }
 }

packages/formvuelate/src/SchemaFormFactory.js

@@ -1,6 +1,7 @@
+import { provide, inject } from 'vue'
 import SchemaForm from './SchemaForm.vue'
-import SchemaField from './SchemaField.vue'
 import { isObject } from './utils/assertions'
+import { INJECTED_LOCAL_COMPONENTS } from './utils/constants'
 
 export default function SchemaFormFactory (plugins = [], components = null) {
   // Copy the original SchemaForm setup
@@ -29,10 +30,18 @@ export default function SchemaFormFactory (plugins = [], components = null) {
     // Call the original setup and preserve its results
     const baseSchemaFormReturns = originalSetup(props, context)
 
+    if (components) {
+      // If user defined local components to be used inside the SchemaForm
+      // injected them so that SchemaField can use them if declared
+      if (!inject(INJECTED_LOCAL_COMPONENTS)) {
+        provide(INJECTED_LOCAL_COMPONENTS, components)
+      }
+    }
+
     if (!plugins.length) return baseSchemaFormReturns
     else {
       // Apply plugins on the data returned
-      // by the original Schemaform
+      // by the original SchemaForm
       return plugins.reduce(
         (schemaFormReturns, plugin) => {
           return plugin(schemaFormReturns, props, context)
@@ -42,21 +51,12 @@ export default function SchemaFormFactory (plugins = [], components = null) {
     }
   }
 
-  const SchemaFieldWithComponents = {
-    ...SchemaField,
-    components: {
-      ...components,
-      ...SchemaField.components
-    }
-  }
-
   return {
     ...SchemaForm,
     props: schemaFormProps,
     components: {
       ...components,
-      ...SchemaForm.components,
-      SchemaField: SchemaFieldWithComponents
+      ...SchemaForm.components
     },
     // Return a customized setup function with plugins
     // as the new SchemaForm setup

packages/formvuelate/src/utils/constants.js

@@ -17,3 +17,5 @@ export const UPDATE_FORM_MODEL = `${KEY}updateFormModel`
 export const DELETE_FORM_MODEL_PROP = `${KEY}deleteFormModelProp`
 
 export const LOOKUP_PARSE_SUB_SCHEMA_FORMS = `${KEY}parseSubSchemaForms`
+
+export const INJECTED_LOCAL_COMPONENTS = `${KEY}injectedLocalComponents`

packages/formvuelate/tests/e2e/specs/SchemaFormFactory.e2e.js

@@ -7,6 +7,52 @@ import VeeValidatePlugin from '../../../../plugin-vee-validate/src/index'
 import { BaseInput } from '../../utils/components'
 
 describe('SchemaFormFactory', () => {
+  it('works with a blank plugin configuration and locally defined components', () => {
+    const SchemaFormWithPlugins = SchemaFormFactory([], { BaseInput })
+
+    mount({
+      components: { SchemaFormWithPlugins },
+      setup () {
+        const model = ref({
+          name: '',
+          pet: 'something',
+          nested: {
+
+          }
+        })
+
+        lookupSubSchemas(SchemaFormWithPlugins)
+        useSchemaForm(model)
+
+        const schemaRef = shallowRef({
+          name: {
+            component: 'BaseInput',
+            label: 'Your name'
+          },
+          pet: {
+            component: 'BaseInput',
+            label: 'Your pet'
+          },
+          nested: {
+            component: 'SchemaForm',
+            schema: {
+              game: {
+                component: 'BaseInput',
+                label: 'Videogame'
+              }
+            }
+          }
+        })
+
+        return () => h(SchemaFormWithPlugins, {
+          schema: schemaRef
+        })
+      }
+    })
+
+    cy.get('input').should('have.length', 3)
+  })
+
   describe('with lookup plugin', () => {
     it('parses subschema SchemaForm elements', () => {
       const SCHEMA = [

packages/formvuelate/tests/unit/SchemaField.spec.js

@@ -1,6 +1,6 @@
 import useSchemaForm from '../../src/features/useSchemaForm'
 import SchemaField from '../../src/SchemaField.vue'
-import { UPDATE_FORM_MODEL, SCHEMA_MODEL_PATH } from '../../src/utils/constants'
+import { UPDATE_FORM_MODEL, SCHEMA_MODEL_PATH, INJECTED_LOCAL_COMPONENTS } from '../../src/utils/constants'
 
 import { mount } from '@vue/test-utils'
 import { ref, provide } from 'vue'
@@ -16,7 +16,11 @@ const updateFormModel = jest.fn()
 const SchemaFieldWrapper = (
   binds,
   formModel = null,
-  { mockUpdate = false, path = '' } = {}
+  {
+    mockUpdate = false,
+    path = '',
+    injectedLocalComponents = null
+  } = {}
 ) => {
   return {
     components: { SchemaField },
@@ -38,6 +42,11 @@ const SchemaFieldWrapper = (
         provide(SCHEMA_MODEL_PATH, path)
       }
 
+      if (injectedLocalComponents) {
+        // Usually provided by SchemaFormFactory
+        provide(INJECTED_LOCAL_COMPONENTS, injectedLocalComponents)
+      }
+
       return {
         binds
       }
@@ -86,6 +95,24 @@ describe('SchemaField', () => {
     )
   })
 
+  it('uses the injected local components if available', () => {
+    const FormText = { name: 'LocalFormText' }
+
+    const wrapper = mount(
+      SchemaFieldWrapper(
+        {
+          field: {
+            model: 'firstName',
+            component: 'FormText'
+          }
+        }, null,
+        { injectedLocalComponents: { FormText } }
+      )
+    )
+
+    expect(wrapper.findComponent({ name: 'LocalFormText' }).exists()).toBe(true)
+  })
+
   describe('binding v-model', () => {
     it('binds the correct value from the provided form model', () => {
       const model = ref({

packages/formvuelate/tests/unit/SchemaFormFactory.spec.js

@@ -1,5 +1,8 @@
+import { inject, h } from 'vue'
 import SchemaFormFactory from '../../src/SchemaFormFactory'
 import SchemaForm from '../../src/SchemaForm.vue'
+import { INJECTED_LOCAL_COMPONENTS } from '../../src/utils/constants'
+import { mount } from '@vue/test-utils'
 
 const props = {
   schema: {}
@@ -81,4 +84,34 @@ describe('SchemaFormFactory', () => {
       expect.objectContaining({ FormText, FormSelect })
     )
   })
+
+  it('provides the local components to sub FVL components', () => {
+    const factory = SchemaFormFactory([], {
+      FormText, FormSelect
+    })
+
+    const injecting = {
+      setup () {
+        const locals = inject(INJECTED_LOCAL_COMPONENTS)
+
+        return {
+          locals
+        }
+      }
+    }
+
+    const wrapper = mount({
+      components: { injecting },
+      setup () {
+        factory.setup(props, context)
+
+        return () => h(injecting)
+      }
+    })
+
+    expect(wrapper.findComponent(injecting).vm.locals).toEqual({
+      FormText,
+      FormSelect
+    })
+  })
 })