feat: lookup plugin replace SchemaForm with plugin version in sub sch…

…emas closes #224 (#229)

* chore: move e2es to their own folder and extract comps

* feat:  allow asking SchemaForm to replace nested SchemaForms with plugin enhanced version

* chore: remove unused import and console log

* chore: attempt to fix CI

* docs: lookupSubSchemas

Co-authored-by: Abdelrahman Awad <[email protected]>

.github/workflows/tests.js.yml

@@ -27,6 +27,10 @@ jobs:
       run: yarn
     - name: Lint
       run: yarn ci:lint
+    - name: Build
+      run: yarn build
+    - name: Link cross dependencies
+      run: yarn lerna bootstrap
     - name: Test units
       run: yarn test:unit
     - name: Codecov

cypress.json

@@ -2,7 +2,7 @@
   "pluginsFile": "packages/formvuelate/tests/e2e/plugins/index.js",
   "supportFile": "packages/formvuelate/tests/e2e/support/index.js",
   "component": {
-    "componentFolder": "packages/formvuelate/src",
+    "componentFolder": "packages/formvuelate/tests/e2e/specs",
     "testFiles": "**/*.e2e.js"
   }
 }

docs/3.x/src/guide/lookup.md

@@ -309,6 +309,7 @@ The schema will now include both the mapped `component` property, plus the origi
 
 ## Nested Schema Caveats
 
+### lookupSubSchemas <Badge text="3.6.0" type="warning" vertical="middle" />
 When dealing with schemas that have sub-schemas like the following:
 
 ```json
@@ -321,15 +322,15 @@ When dealing with schemas that have sub-schemas like the following:
     "component": "SchemaForm",
     "schema": {
       "address": {
-        "type": "FormText",
+        "type": "string",
         "label": "Work address"
       },
       "details": {
         "component": "SchemaForm",
         "schema": {
           "position": {
-            "type": "FormText",
-            "label": "Work position"
+            "type": "string",
+            "label": "Work email"
           }
         }
       }
@@ -338,16 +339,39 @@ When dealing with schemas that have sub-schemas like the following:
 }
 ```
 
-Make sure that you use `mapComponents` to change `SchemaForm` for whatever you named the output of your `SchemaFormFactory` function call.
+We have to do a little extra work to allow the lookup plugin to remap the sub-schema `SchemaForm` components.
+
+First, import the `lookupSubSchemas` composition function from the `plugin-lookup` package.
 
 ```js
-// Note "SchemaFormWithPlugin" getting remapped
+import LookupPlugin, { lookupSubSchemas } from '@formvuelate/plugin-lookup'
+```
 
-const SchemaFormWithPlugin = SchemaFormFactory([
+Next, create your schema form with plugins as you normally would.
+
+```js
+const SchemaFormWithPlugins = SchemaFormFactory([
   LookupPlugin({
-      SchemaForm: 'SchemaFormWithPlugin',
-      [...]
+    mapComponents: {
+      Text: BaseInput
     }
   })
 ])
 ```
+
+Finally, in your setup function and _before_ the `useSchemaForm` call, call the `lookupSubSchemas` function that we just imported and pass in as a parameter the plugin-enhanced `SchemaForm` component returned by `SchemaFormFactory`.
+
+```js
+setup () {
+  const model = ref({})
+
+  lookupSubSchemas(SchemaFormWithPlugins)
+  useSchemaForm(model)
+
+  const schema = shallowRef(MY_SCHEMA)
+
+  return {
+    schema
+  }
+}
+```

package.json

@@ -16,7 +16,7 @@
     "test:e2e:ci": "cypress run-ct",
     "lint": "eslint . '**/*.{js,jsx,ts,tsx}' --fix",
     "ci:lint": "yarn lint --no-fix",
-    "test": "yarn lint && yarn test:unit",
+    "test": "yarn lint && yarn test:unit && yarn test:e2e:ci",
     "test:unit:watch": "yarn test:unit --watch",
     "docs:dev": "cd docs/3.x && yarn dev && cd -",
     "docs:build": "cd docs/3.x && yarn build && cd -",
@@ -91,4 +91,4 @@
   "engines": {
     "node": ">=12.17.0"
   }
-}
+}

packages/formvuelate/src/features/ParsedSchema.js

@@ -1,4 +1,5 @@
-import { computed, unref } from 'vue'
+import { computed, inject, unref } from 'vue'
+import { LOOKUP_PARSE_SUB_SCHEMA_FORMS } from '../utils/constants'
 import useUniqueID from './UniqueID'
 
 /**
@@ -89,11 +90,27 @@ export default function useParsedSchema (refSchema, model) {
       }
     }
 
+    const injectedLookupSchemaForm = inject(LOOKUP_PARSE_SUB_SCHEMA_FORMS, null)
+
     return normalizedSchema.map(fieldGroup => {
-      return fieldGroup.map(field => ({
-        ...field,
-        uuid: getID(field.model)
-      }))
+      return fieldGroup.map(field => {
+        const fieldCopy = { ...field }
+
+        /**
+         * If LookupPlugin has injected a plugin-enhanced version of SchemaForm
+         * through `lookupSubSchemas` function, replace the regular `SchemaForm` with it
+         */
+        if (injectedLookupSchemaForm &&
+          (field.component.name === 'SchemaForm' || field.component === 'SchemaForm')
+        ) {
+          fieldCopy.component = injectedLookupSchemaForm
+        }
+
+        return {
+          ...fieldCopy,
+          uuid: getID(field.model)
+        }
+      })
     })
   })
 

packages/formvuelate/src/utils/constants.js

@@ -15,3 +15,5 @@ export const FIND_NESTED_FORM_MODEL_PROP = `${KEY}findNestedFormModelProp`
 export const UPDATE_FORM_MODEL = `${KEY}updateFormModel`
 
 export const DELETE_FORM_MODEL_PROP = `${KEY}deleteFormModelProp`
+
+export const LOOKUP_PARSE_SUB_SCHEMA_FORMS = `${KEY}parseSubSchemaForms`

packages/formvuelate/src/SchemaForm.e2e.js → packages/formvuelate/tests/e2e/specs/SchemaForm.e2e.js

@@ -1,8 +1,9 @@
 import { mount } from '@cypress/vue'
-import SchemaForm from './SchemaForm.vue'
+import SchemaForm from '../../../src/SchemaForm.vue'
 
-import useSchemaForm from './features/useSchemaForm'
+import useSchemaForm from '../../../src/features/useSchemaForm'
 import { shallowRef, ref, h, computed } from 'vue'
+import { BaseInput } from '../../utils/components'
 
 const SchemaFormWrapper = (schema) => ({
   components: [SchemaForm],
@@ -24,20 +25,6 @@ const SchemaFormWrapper = (schema) => ({
   }
 })
 
-const BaseInput = {
-  props: ['label', 'modelValue'],
-  render () {
-    return [
-      h('label', this.label),
-      h('input', {
-        ...this.$attrs,
-        value: this.modelValue,
-        onInput: ($event) => this.$emit('update:modelValue', $event.target.value)
-      })
-    ]
-  }
-}
-
 describe('SchemaForm', () => {
   it('renders elements', () => {
     const schema = {

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

@@ -0,0 +1,73 @@
+import { mount } from '@cypress/vue'
+
+import { h, ref, shallowRef } from 'vue'
+import { SchemaFormFactory, useSchemaForm } from '../../../src/index'
+import LookupPlugin, { lookupSubSchemas } from '../../../../plugin-lookup/src/index'
+import { BaseInput } from '../../utils/components'
+
+describe('SchemaFormFactory', () => {
+  describe('with lookup plugin', () => {
+    it('parses subschema SchemaForm elements', () => {
+      const SCHEMA = [
+        {
+          model: 'firstName',
+          component: 'Text',
+          label: 'First Name'
+        },
+        {
+          model: 'nested',
+          component: 'SchemaForm',
+          schema: [
+            {
+              model: 'nestedfirstName',
+              component: 'Text',
+              label: 'First Name nested'
+            },
+            {
+              model: 'nestedLastName',
+              component: BaseInput,
+              label: 'Last name nested'
+            },
+            {
+              model: 'doubleNested',
+              component: 'SchemaForm',
+              schema: [
+                {
+                  model: 'doubleNestedName',
+                  component: 'Text',
+                  label: 'Double nested text'
+                }
+              ]
+            }
+          ]
+        }
+      ]
+
+      const SchemaFormWithPlugins = SchemaFormFactory([
+        LookupPlugin({
+          mapComponents: {
+            Text: BaseInput
+          }
+        })
+      ])
+
+      mount({
+        components: { SchemaFormWithPlugins },
+        setup () {
+          const model = ref({})
+          lookupSubSchemas(SchemaFormWithPlugins)
+          useSchemaForm(model)
+
+          const schemaRef = shallowRef(SCHEMA)
+
+          return () => h(SchemaFormWithPlugins, {
+            schema: schemaRef
+          })
+        }
+      })
+
+      cy.get('input').should('have.length', 4)
+      cy.get('label').eq(3).should('have.text', 'Double nested text')
+    })
+  })
+})

packages/formvuelate/tests/utils/components.js

@@ -0,0 +1,15 @@
+import { h } from 'vue'
+
+export const BaseInput = {
+  props: ['label', 'modelValue'],
+  render () {
+    return [
+      h('label', this.label),
+      h('input', {
+        ...this.$attrs,
+        value: this.modelValue,
+        onInput: ($event) => this.$emit('update:modelValue', $event.target.value)
+      })
+    ]
+  }
+}

packages/plugin-lookup/src/index.js

@@ -1,4 +1,14 @@
-import { computed } from 'vue'
+import { computed, provide } from 'vue'
+import { constants } from 'formvuelate'
+
+/**
+ * Signal ParsedSchema to replace all instances of subschema `SchemaForm` components
+ * with the SchemaFormWithPlugins component
+ * @param {Object} SchemaFormWithPlugins
+ */
+export const lookupSubSchemas = (SchemaFormWithPlugins) => {
+  provide(constants.LOOKUP_PARSE_SUB_SCHEMA_FORMS, SchemaFormWithPlugins)
+}
 
 /**
  * LookupPlugin
@@ -50,6 +60,7 @@ const mapComps = (schema, mapComponents) => {
   return mapElementsInSchema(schema, el => {
     const newKey = mapComponents[el.component]
 
+    if (el.schema) return { ...el }
     if (!newKey) return { ...el }
 
     return {