simple json

Author: francyfox

src/components/fn-schema.vue

@@ -0,0 +1,25 @@
+<script setup lang="ts">
+import naiveUISchemaParser, { NaiveUISchema } from "../module/schema/schema.parser.ts";
+import {defineAsyncComponent, h} from 'vue'
+
+const props = defineProps<{
+  schema: NaiveUISchema
+}>()
+
+
+const node = naiveUISchemaParser(props.schema)
+
+</script>
+
+<template>
+  <div class="schema">
+      <h1>Test</h1>
+      <template v-for="i of node">
+          <component :is="i"/>
+      </template>
+  </div>
+</template>
+
+<style scoped>
+
+</style>

src/components/test.vue

@@ -1,10 +1,19 @@
 <script setup lang="ts">
+import FnSchema from "./fn-schema.vue";
+import { NaiveUISchema } from "../module/schema/schema.parser.ts";
+
+const json = [
+    {
+        $type: 'input',
+        value: 'test'
+    }
+] as NaiveUISchema
 
 </script>
 
 <template>
     <n-config-provider>
-
+        <fn-schema :schema="json"/>
     </n-config-provider>
 </template>
 

src/helper/helper.path.ts

@@ -0,0 +1,5 @@
+export const toPascalCase = (str: string) => {
+    return str.replace(/\w+/g, function(w){
+        return w[0].toUpperCase() + w.slice(1).toLowerCase()
+    })
+}

src/main.ts

@@ -1,10 +1,8 @@
 import { createApp } from 'vue'
-import { plugin, defaultConfig } from '@formkit/vue'
 import './style.css'
 import App from './App.vue'
 import naive from 'naive-ui'
 
 createApp(App)
     .use(naive)
-    .use(plugin, defaultConfig)
     .mount('#app')

src/module/schema/schema.d.ts

@@ -1,15 +1,32 @@
-import { NaiveUISchema, NaiveUITypes } from "./schema";
-import { defineAsyncComponent } from 'vue'
+// @ts-ignore
+import NaiveUISchema = FNScheme.NaiveUISchema;
+import {toPascalCase} from "../../helper/helper.path.ts";
+import {defineAsyncComponent, h} from "vue";
+export enum NaiveUITypes {
+  Form = 'form',
+  Input = 'input',
+}
+
+export type NaiveUISchema = NaiveUISchemaEl[]
+export declare interface NaiveUISchemaEl {
+  $type: NaiveUITypes
+  $children: any[]
+}
 
+export const fnComponentPath = (name: string) => `/node_modules/naive-ui/es/${name}/src/${toPascalCase(name)}.js`
 export default function naiveUISchemaParser(json: NaiveUISchema) {
-  for (const _el of json) {
-    switch (_el.$type) {
-      case NaiveUITypes.Form:
+  return json.map((_el: any) => {
+    const index = Object.values(NaiveUITypes).indexOf(_el.$type as unknown as NaiveUITypes)
 
-      default:
-        throw new Error('Element property $type not defined')
+    if (index === -1) {
+      throw new Error(
+          `Type ${_el.$type} is not support. Supported types: \n ${JSON.stringify(NaiveUITypes, null, 4)}`
+      )
     }
-  }
-}
-//
-export const fnComponent = (name: string) => defineAsyncComponent(() => import(`naive-ui/lib/${name}`))
+
+    const { $type, ...schemeEl } = _el
+    const { $children, ...props} = schemeEl
+
+    return h(defineAsyncComponent(() => import(fnComponentPath(_el.$type))), props)
+  })
+}

src/module/schema/schema.parser.ts

@@ -1,5 +1,6 @@
 {
   "compilerOptions": {
+    "typeRoots": ["./src/types"],
     "target": "ES2020",
     "useDefineForClassFields": true,
     "module": "ESNext",