feat: json schema to describe the formData json

package.json

@@ -67,6 +67,7 @@
     "build:lib": "vite build --config vite.config.lib.mjs",
     "build": "npm-run-all -p build:icons build:demo",
     "prebuild": "npm run build:lib",
+    "postbuild": "npm run generate:jsonSchema",
     "build:demo": "vite build --mode demo",
     "build:demo:watch": "vite build --mode demo --watch",
     "build:icons": "node ./tools/generate-sprite",
@@ -81,7 +82,8 @@
     "travis-deploy-once": "travis-deploy-once --pro",
     "prepush": "npm test",
     "prepare": "lefthook install",
-    "postmerge": "lefthook install"
+    "postmerge": "lefthook install",
+    "generate:jsonSchema": "node --experimental-strip-types --no-warnings ./tools/generate-json-schema.ts"
   },
   "devDependencies": {
     "@biomejs/biome": "^1.9.3",
@@ -92,15 +94,17 @@
     "@semantic-release/npm": "^12.0.1",
     "jsdom": "^25.0.1",
     "lefthook": "^1.7.18",
-    "npm-run-all": "^4.1.5",
+    "npm-run-all": "^2.1.0",
     "sass-embedded": "^1.80.1",
     "semantic-release": "^24.1.2",
     "svg-sprite": "^2.0.4",
     "vite": "^5.4.8",
     "vite-plugin-banner": "^0.8.0",
     "vite-plugin-compression": "^0.5.1",
     "vite-plugin-html": "^3.2.2",
-    "vite-plugin-static-copy": "^2.0.0"
+    "vite-plugin-static-copy": "^2.0.0",
+    "zod": "^3.23.8",
+    "zod-to-json-schema": "^3.23.5"
   },
   "dependencies": {
     "@draggable/formeo-languages": "^3.1.3",

src/demo/js/actionButtons.js

@@ -7,7 +7,7 @@ const editorActions = (editor, renderer) => ({
     renderFormWrap.style.display = 'block'
     renderer.render(editor.formData)
   },
-  logJSON: () => console.log(editor.json),
+  logJSON: () => console.log(JSON.stringify(JSON.parse(editor.json), null, 2)),
   viewData: () => {
     for (const [key, val] of Object.entries(editor.formData)) {
       console.log(key, val)

src/lib/js/components/columns/column.js

@@ -41,7 +41,7 @@ export default class Column extends Component {
   constructor(columnData) {
     super('column', { ...DEFAULT_DATA(), ...columnData })
 
-    const children = this.createChildWrap()
+    const childWrap = this.createChildWrap()
 
     this.dom = dom.create({
       tag: 'li',
@@ -55,11 +55,11 @@ export default class Column extends Component {
         this.getActionButtons(),
         DOM_CONFIGS.editWindow(),
         DOM_CONFIGS.resizeHandle(new ResizeColumn()),
-        children,
+        childWrap,
       ],
     })
 
-    this.processConfig(this.dom)
+    this.processConfig()
 
     events.columnResized = new window.CustomEvent('columnResized', {
       detail: {
@@ -68,7 +68,7 @@ export default class Column extends Component {
       },
     })
 
-    Sortable.create(children, {
+    Sortable.create(childWrap, {
       animation: 150,
       fallbackClass: 'field-moving',
       forceFallback: true,
@@ -98,11 +98,10 @@ export default class Column extends Component {
    * Process column configuration data
    * @param  {Object} column
    */
-  processConfig(column) {
+  processConfig() {
     const columnWidth = h.get(this.data, 'config.width')
     if (columnWidth) {
-      column.dataset.colWidth = columnWidth
-      column.style.width = columnWidth
+      this.setDomWidth(columnWidth)
     }
   }
 
@@ -113,13 +112,22 @@ export default class Column extends Component {
     }
   }
 
+  /**
+   * Sets the width data and style for the column
+   * @param {string} width - The width value to be set for the column
+   * @returns {void}
+   */
+  setDomWidth = width => {
+    this.dom.dataset.colWidth = width
+    this.dom.style.width = width
+  }
+
   /**
    * Sets a columns width
    * @param {String} width percent or pixel
    */
   setWidth = width => {
-    this.dom.dataset.colWidth = width
-    this.dom.style.width = width
+    this.setDomWidth(width)
     return this.set('config.width', width)
   }
 }

src/lib/js/components/controls/form/button.js

@@ -20,7 +20,7 @@ class ButtonControl extends Control {
       options: [
         {
           label: i18n.get('button'),
-          type: ['button', 'submit', 'reset'].map((buttonType, index) => ({
+          type: ['button', 'submit', 'reset'].map((buttonType) => ({
             label: buttonType,
             type: buttonType,
           })),

src/lib/js/components/fields/edit-panel.js

@@ -4,7 +4,6 @@ import actions from '../../common/actions.js'
 import EditPanelItem from './edit-panel-item.mjs'
 import { capitalize } from '../../common/helpers.mjs'
 import { slugify, toTitleCase } from '../../common/utils/string.mjs'
-import { cleanObj } from '../../common/utils/object.mjs'
 
 /**
  * Element/Field class.
@@ -176,8 +175,7 @@ export default class EditPanel {
       field: this.field,
       index: this.props.children.length,
     })
-
-    // debugger
+
     this.editPanelItems.push(newOption)
     this.props.appendChild(newOption.dom)
     this.field.set(itemKey, itemData)

src/lib/js/components/fields/index.js

@@ -40,6 +40,26 @@ export class Fields extends ComponentData {
     }
     return found
   }
+
+  getData = () => {
+    return Object.entries(this.data).reduce((acc, [key, val]) => {
+      const { conditions, ...data } = val?.getData() || val
+
+      if (conditions?.length) {
+        let hasConditions = true
+        if (conditions.length === 1) {
+          const [firstCondition] = conditions
+          hasConditions = Boolean(firstCondition.if[0].source && firstCondition.then[0].target)
+        }
+        if (hasConditions) {
+          data.conditions = conditions
+        }
+      }
+
+      acc[key] = data
+      return acc
+    }, {})
+  }
 }
 
 const fields = new Fields()

src/lib/js/components/index.js

@@ -7,7 +7,7 @@ import RowsData from './rows/index.js'
 import ColumnsData from './columns/index.js'
 import FieldsData from './fields/index.js'
 import ExternalsData from './externals.js'
-import { SESSION_FORMDATA_KEY } from '../constants.js'
+import { SESSION_FORMDATA_KEY, version } from '../constants.js'
 
 export const Stages = StagesData
 export const Rows = RowsData
@@ -78,7 +78,10 @@ export class Components extends Data {
   }
 
   get json() {
-    return window.JSON.stringify(this.formData)
+    return window.JSON.stringify({
+      $schema: `https://cdn.jsdelivr.net/npm/formeo@${version}/dist/formData_schema.json`,
+      ...this.formData,
+    })
   }
 
   get formData() {

src/lib/js/constants.js

@@ -3,7 +3,7 @@ import pkg from '../../../package.json' with { type: 'json' }
 const isProd = import.meta.env?.PROD
 
 const name = pkg.name
-const version = pkg.version
+export const version = pkg.version
 export const PACKAGE_NAME = name
 export const formeoSpriteId = 'formeo-sprite'
 

tools/generate-json-schema.ts

@@ -0,0 +1,164 @@
+import { join } from 'node:path'
+import { writeFileSync } from 'node:fs'
+import { z } from 'zod'
+import { zodToJsonSchema } from 'zod-to-json-schema'
+
+const __dirname = join(new URL('.', import.meta.url).pathname)
+
+const htmlAttributesSchema = z.record(
+  z.string(),
+  z.union([
+    z.string(),
+    z.number(),
+    z.boolean(),
+    z.function(),
+    z.record(z.string(), z.string()), // for style objects
+    z.array(
+      z.object({
+        label: z.string(),
+        value: z.string(),
+        selected: z.boolean().optional(),
+      }),
+    ), // for configurable html elements like h1, h2 etc
+  ]),
+)
+
+const formDataSchema = z
+  .object({
+    $schema: z.string().regex(/\.json$/),
+    id: z.string().uuid(),
+    stages: z.record(
+      z.string().uuid(),
+      z.object({
+        id: z.string().uuid(),
+        children: z.array(z.string().uuid()),
+      }),
+    ),
+    rows: z.record(
+      z.string().uuid(),
+      z.object({
+        id: z.string().uuid(),
+        children: z.array(z.string().uuid()),
+        className: z.union([z.string(), z.array(z.string())]).optional(),
+        config: z
+          .object({
+            fieldset: z.boolean().optional(),
+            legend: z.string().optional(),
+            inputGroup: z.boolean().optional(),
+          })
+          .optional(),
+      }),
+    ),
+    columns: z.record(
+      z.string().uuid(),
+      z.object({
+        id: z.string().uuid(),
+        children: z.array(z.string().uuid()),
+        className: z.union([z.string(), z.array(z.string())]).optional(),
+        config: z
+          .object({
+            width: z.string().optional(),
+          })
+          .optional(),
+      }),
+    ),
+    fields: z.record(
+      z.string().uuid(),
+      z.object({
+        id: z.string().uuid(),
+        tag: z.string(),
+        attrs: htmlAttributesSchema.optional(),
+        config: z
+          .object({
+            label: z.string().optional(),
+            hideLabel: z.boolean().optional(),
+            editableContent: z.boolean().optional(),
+          })
+          .catchall(z.any())
+          .optional(),
+        meta: z
+          .object({
+            group: z.string().optional(),
+            icon: z.string().optional(),
+            id: z.string().optional(),
+          })
+          .optional(),
+        content: z.any().optional(),
+        action: z.object({}).optional(),
+        options: z
+          .array(
+            z
+              .object({
+                label: z.string(),
+                value: z.string().optional(),
+                selected: z.boolean().optional(),
+                checked: z.boolean().optional(),
+                type: z
+                  .array(
+                    z.object({
+                      type: z.string(),
+                      label: z.string(),
+                      // value: z.string().optional(),
+                      selected: z.boolean().optional(),
+                    }),
+                  )
+                  .optional(),
+              })
+              .catchall(z.any()),
+          )
+          .optional(),
+        conditions: z
+          .array(
+            z.object({
+              if: z
+                .array(
+                  z.object({
+                    source: z.string().optional(),
+                    sourceProperty: z.string().optional(),
+                    comparison: z.string().optional(),
+                    target: z.string().optional(),
+                    targetProperty: z.string().optional(),
+                  }),
+                )
+                .optional(),
+              // "then" is not a keyword when used as a key in
+              // an object and required for the schema
+              // biome-ignore lint/suspicious/noThenProperty:
+              then: z
+                .array(
+                  z.object({
+                    target: z.string().optional(),
+                    targetProperty: z.string().optional(),
+                    assignment: z.string().optional(),
+                    value: z.string().optional(),
+                  }),
+                )
+                .optional(),
+            }),
+          )
+          .optional(),
+      }),
+    ),
+  })
+  .describe('Schema definition for formData')
+
+const reorderSchema = (schema: object) => {
+  const topProperties = ['$schema', 'title', 'description']
+  return {
+    ...topProperties.reduce(
+      (acc, key) => {
+        if (key in schema) {
+          acc[key] = schema[key as keyof typeof schema]
+        }
+        return acc
+      },
+      {} as Record<string, unknown>,
+    ),
+    ...schema,
+  }
+}
+
+const jsonSchema = zodToJsonSchema(formDataSchema, { name: 'formData', nameStrategy: 'title' })
+const orderedJsonSchema = reorderSchema(jsonSchema)
+const distDir = join(__dirname, '../dist')
+writeFileSync(join(distDir, 'formData_schema.json'), JSON.stringify(orderedJsonSchema, null, 2))