feat(script): add schema features

apps/desktop/electron.vite.config.ts

@@ -8,6 +8,7 @@ import Icons from 'unplugin-icons/vite'
 import { ElementPlusResolver } from 'unplugin-vue-components/resolvers'
 import Components from 'unplugin-vue-components/vite'
 import VueRouter from 'unplugin-vue-router/vite'
+import { nodePolyfills } from 'vite-plugin-node-polyfills'
 
 import { version } from './package.json'
 
@@ -100,6 +101,10 @@ export default defineConfig({
           return code
         },
       },
+      nodePolyfills({
+        // WORKAROUND: https://github.com/davidmyersdev/vite-plugin-node-polyfills/issues/90
+        exclude: ['crypto'],
+      }),
     ],
     css: {
       preprocessorOptions: {

apps/desktop/package.json

@@ -74,6 +74,7 @@
     "unplugin-vue-components": "^0.27.4",
     "unplugin-vue-router": "^0.10.8",
     "vite": "^5.4.10",
+    "vite-plugin-node-polyfills": "^0.22.0",
     "vitest": "^2.1.4",
     "vue": "^3.5.12",
     "vue-tsc": "^2.1.10"

apps/desktop/src/database/db.main.ts

@@ -5,6 +5,7 @@ import { drizzle } from 'drizzle-orm/better-sqlite3'
 import { migrate } from 'drizzle-orm/better-sqlite3/migrator'
 import { app } from 'electron'
 import { scriptFunction } from './schemas/scriptFunction'
+import { scriptSchema } from './schemas/scriptSchema'
 import { settings } from './schemas/settings'
 
 const dbPath = import.meta.env.DEV ? 'sqlite.db' : path.join(app.getPath('userData'), 'data.db')
@@ -20,7 +21,7 @@ const sqlite = new Database(
   dbPath,
 )
 
-export const db = drizzle(sqlite, { schema: { scriptFunction, settings } })
+export const db = drizzle(sqlite, { schema: { scriptFunction, scriptSchema, settings } })
 
 function toDrizzleResult(row: Record<string, any>)
 function toDrizzleResult(rows: Record<string, any> | Array<Record<string, any>>) {

apps/desktop/src/database/db.renderer.ts

@@ -1,5 +1,6 @@
 import { drizzle } from 'drizzle-orm/sqlite-proxy'
 import { scriptFunction } from './schemas/scriptFunction'
+import { scriptSchema } from './schemas/scriptSchema'
 import { settings } from './schemas/settings'
 
 export const db = drizzle(async (...args) => {
@@ -11,5 +12,5 @@ export const db = drizzle(async (...args) => {
     return { rows: [] }
   }
 }, {
-  schema: { scriptFunction, settings },
+  schema: { scriptFunction, scriptSchema, settings },
 })

apps/desktop/src/database/schemas/scriptSchema.ts

@@ -0,0 +1,12 @@
+import type { ScriptSchema } from 'mqttx'
+import { sqliteTable, text } from 'drizzle-orm/sqlite-core'
+
+export const scriptSchema = sqliteTable('scriptSchema', {
+  id: text().primaryKey(),
+  codec: text().$type<ScriptSchema['codec']>().notNull(),
+  name: text().notNull(),
+  content: text().notNull(),
+})
+
+export type SelectScriptSchema = typeof scriptSchema.$inferSelect
+export type InsertScriptSchema = typeof scriptSchema.$inferInsert

apps/desktop/src/database/services/ScriptSchemaService.ts

@@ -0,0 +1,52 @@
+import type { InsertScriptSchema, SelectScriptSchema } from '../schemas/scriptSchema'
+import { useScriptSchemaStore } from '@mqttx/ui/stores'
+import { eq } from 'drizzle-orm'
+import { db } from '../db.renderer'
+import { scriptSchema } from '../schemas/scriptSchema'
+
+export default function useScriptSchemaService() {
+  const store = useScriptSchemaStore()
+  const { scriptSchemas } = storeToRefs(store)
+  const { updateScriptSchemas } = store
+
+  async function getAll(): Promise<SelectScriptSchema[]> {
+    const result = await db.query.scriptSchema.findMany()
+    updateScriptSchemas(result)
+    return result
+  }
+  async function upsert(data: InsertScriptSchema): Promise<SelectScriptSchema> {
+    if (!data.id) {
+      data.id = `${Date.now()}-${Math.random().toString(36).substring(2, 8)}`
+    }
+    const [inserted] = await db
+      .insert(scriptSchema)
+      .values(data)
+      .onConflictDoUpdate({
+        target: scriptSchema.id,
+        set: data,
+      })
+      .returning()
+    await getAll()
+    return inserted
+  }
+  async function remove(id: string): Promise<SelectScriptSchema> {
+    const [removed] = await db
+      .delete(scriptSchema)
+      .where(eq(scriptSchema.id, id))
+      .returning()
+    await getAll()
+    return removed
+  }
+  async function init() {
+    await getAll()
+  }
+
+  return {
+    scriptSchemas,
+    updateScriptSchemas,
+    getAll,
+    upsert,
+    remove,
+    init,
+  }
+}

apps/desktop/src/database/services/index.ts

@@ -1,4 +1,5 @@
 import useScriptFunctionService from './ScriptFunctionService'
+import useScriptSchemaService from './ScriptSchemaService'
 import useSettingsService from './SettingsService'
 
 /**
@@ -7,12 +8,14 @@ import useSettingsService from './SettingsService'
 async function initTables() {
   await Promise.all([
     useScriptFunctionService().init(),
+    useScriptSchemaService().init(),
     useSettingsService().init(),
   ])
 }
 
 export {
   initTables,
   useScriptFunctionService,
+  useScriptSchemaService,
   useSettingsService,
 }

apps/desktop/src/renderer/components.d.ts

@@ -62,6 +62,8 @@ declare module 'vue' {
     ScriptFunctionTest: typeof import('./../../../../packages/ui/src/components/script/function/Test.vue')['default']
     ScriptFunctionView: typeof import('./../../../../packages/ui/src/components/script/function/View.vue')['default']
     ScriptSaveDialog: typeof import('./../../../../packages/ui/src/components/script/SaveDialog.vue')['default']
+    ScriptSchemaEditor: typeof import('./../../../../packages/ui/src/components/script/schema/Editor.vue')['default']
+    ScriptSchemaTest: typeof import('./../../../../packages/ui/src/components/script/schema/Test.vue')['default']
     ScriptSchemaView: typeof import('./../../../../packages/ui/src/components/script/schema/View.vue')['default']
     ScriptView: typeof import('./../../../../packages/ui/src/components/script/View.vue')['default']
     SettingsCliDownloadProgress: typeof import('./src/components/settings/cli/DownloadProgress.vue')['default']

apps/desktop/src/renderer/src/pages/script.vue

@@ -1,10 +1,15 @@
 <script setup lang="ts">
-import useScriptFunctionService from '@database/services/ScriptFunctionService'
+import { useScriptFunctionService, useScriptSchemaService } from '@database/services'
 
-const { upsert, remove } = useScriptFunctionService()
+const { upsert: functionUpsert, remove: functionRemove } = useScriptFunctionService()
 
-provide('scriptFunctionUpsert', upsert)
-provide('scriptFunctionRemove', remove)
+provide('scriptFunctionUpsert', functionUpsert)
+provide('scriptFunctionRemove', functionRemove)
+
+const { upsert: schemaUpsert, remove: schemaRemove } = useScriptSchemaService()
+
+provide('scriptSchemaUpsert', schemaUpsert)
+provide('scriptSchemaRemove', schemaRemove)
 </script>
 
 <template>

apps/web/auto-imports.d.ts

@@ -101,6 +101,8 @@ declare module 'vue' {
   interface GlobalComponents {}
   interface ComponentCustomProperties {
     readonly EffectScope: UnwrapRef<typeof import('vue')['EffectScope']>
+    readonly ElMessage: UnwrapRef<typeof import('element-plus/es')['ElMessage']>
+    readonly ElMessageBox: UnwrapRef<typeof import('element-plus/es')['ElMessageBox']>
     readonly acceptHMRUpdate: UnwrapRef<typeof import('pinia')['acceptHMRUpdate']>
     readonly computed: UnwrapRef<typeof import('vue')['computed']>
     readonly createApp: UnwrapRef<typeof import('vue')['createApp']>

apps/web/components.d.ts

@@ -61,6 +61,8 @@ declare module 'vue' {
     ScriptFunctionTest: typeof import('./../../packages/ui/src/components/script/function/Test.vue')['default']
     ScriptFunctionView: typeof import('./../../packages/ui/src/components/script/function/View.vue')['default']
     ScriptSaveDialog: typeof import('./../../packages/ui/src/components/script/SaveDialog.vue')['default']
+    ScriptSchemaEditor: typeof import('./../../packages/ui/src/components/script/schema/Editor.vue')['default']
+    ScriptSchemaTest: typeof import('./../../packages/ui/src/components/script/schema/Test.vue')['default']
     ScriptSchemaView: typeof import('./../../packages/ui/src/components/script/schema/View.vue')['default']
     ScriptView: typeof import('./../../packages/ui/src/components/script/View.vue')['default']
     SettingsView: typeof import('./../../packages/ui/src/components/SettingsView.vue')['default']

apps/web/package.json

@@ -55,6 +55,7 @@
     "unplugin-vue-components": "^0.27.4",
     "unplugin-vue-router": "^0.10.8",
     "vite": "^5.4.10",
+    "vite-plugin-node-polyfills": "^0.22.0",
     "vitest": "^2.1.4",
     "vue-tsc": "^2.1.10"
   }

apps/web/src/database/index.ts

@@ -6,6 +6,7 @@ import { getRxStorageDexie } from 'rxdb/plugins/storage-dexie'
 import type { RxMqttxCollections, RxMqttxDatabase } from './schemas/RxDB'
 
 import scriptFunctionSchema from './schemas/ScriptFunction.schema'
+import scriptSchemaSchema from './schemas/ScriptSchema.schema'
 import settingsSchema from './schemas/Settings.schema'
 
 // import modules
@@ -58,6 +59,9 @@ export async function createDatabase(): Promise<Plugin> {
     'script-function': {
       schema: scriptFunctionSchema,
     },
+    'script-schema': {
+      schema: scriptSchemaSchema,
+    },
     'settings': {
       schema: settingsSchema,
     },

apps/web/src/database/schemas/RxDB.d.ts

@@ -1,9 +1,11 @@
 import type { RxDatabase } from 'rxdb'
 import type { RxScriptFunctionCollection } from './ScriptFunction.schema'
+import type { RxScriptSchemaCollection } from './ScriptSchema.schema'
 import type { RxSettingsCollection } from './Settings.schema'
 
 export interface RxMqttxCollections {
   'script-function': RxScriptFunctionCollection
+  'script-schema': RxScriptSchemaCollection
   'settings': RxSettingsCollection
 }
 

apps/web/src/database/schemas/ScriptSchema.schema.ts

@@ -0,0 +1,41 @@
+import type { ScriptSchema } from 'mqttx'
+import type { RxCollection, RxDocument, RxJsonSchema } from 'rxdb'
+
+export type RxScriptSchemaDocumentType = ScriptSchema
+
+// ORM methods
+interface RxScriptSchemaDocMethods {
+  // hpPercent: () => number
+}
+
+export type RxScriptSchemaDocument = RxDocument<RxScriptSchemaDocumentType, RxScriptSchemaDocMethods>
+
+export type RxScriptSchemaCollection = RxCollection<RxScriptSchemaDocumentType, RxScriptSchemaDocMethods>
+
+const scriptSchemaSchema: RxJsonSchema<RxScriptSchemaDocumentType> = {
+  title: 'script schema schema',
+  description: 'describes the script schema',
+  version: 0,
+  keyCompression: false,
+  primaryKey: 'id',
+  type: 'object',
+  properties: {
+    id: {
+      type: 'string',
+      maxLength: 100, // <- the primary key must have set maxLength
+    },
+    codec: {
+      type: 'string',
+      enum: ['protobuf', 'avro'],
+    },
+    name: {
+      type: 'string',
+    },
+    content: {
+      type: 'string',
+    },
+  },
+  required: ['id', 'codec', 'name', 'content'],
+}
+
+export default scriptSchemaSchema

apps/web/src/database/services/ScriptSchemaService.ts

@@ -0,0 +1,59 @@
+import type { RxScriptSchemaDocumentType } from '@/database/schemas/ScriptSchema.schema'
+
+import type { ScriptSchema } from 'mqttx'
+import type { DeepReadonlyObject } from 'rxdb'
+import { useDatabase } from '@/database'
+import { useScriptSchemaStore } from '@mqttx/ui/stores'
+
+let watchRegistered = false
+
+export default function useScriptSchemaService() {
+  const db = useDatabase()
+  const store = useScriptSchemaStore()
+  const { scriptSchemas, protobufSchemas, avroSchemas } = storeToRefs(store)
+  const { updateScriptSchemas } = store
+
+  async function getAll(data?: Partial<RxScriptSchemaDocumentType>): Promise<DeepReadonlyObject<ScriptSchema>[]> {
+    let query = db['script-schema'].find()
+    if (data) {
+      for (const [key, value] of Object.entries(data)) {
+        if (value !== undefined) {
+          query = query.where(key).eq(value)
+        }
+      }
+    }
+    const result = await query.exec()
+    const formattedData = result.map(item => item.toJSON())
+    updateScriptSchemas(formattedData)
+    return formattedData
+  }
+  async function upsert(data: Omit<RxScriptSchemaDocumentType, 'id'> & { id?: string }): Promise<DeepReadonlyObject<ScriptSchema>> {
+    // Generate a unique id starting with a timestamp followed by a random string to ensure default query order and uniqueness
+    const id = `${Date.now()}-${Math.random().toString(36).substring(2, 8)}`
+    const result = await db['script-schema'].upsert({ id, ...data })
+    return result.toJSON()
+  }
+  async function remove(id: string): Promise<DeepReadonlyObject<ScriptSchema> | null> {
+    const result = await db['script-schema'].findOne(id).remove()
+    return result?.toJSON() ?? null
+  }
+  async function init() {
+    if (watchRegistered) return
+    await getAll()
+    db['script-schema'].$.subscribe(async () => {
+      await getAll()
+    })
+    watchRegistered = true
+  }
+
+  return {
+    scriptSchemas,
+    protobufSchemas,
+    avroSchemas,
+    updateScriptSchemas,
+    getAll,
+    upsert,
+    remove,
+    init,
+  }
+}

apps/web/src/database/services/index.ts

@@ -1,4 +1,5 @@
 import useScriptFunctionService from './ScriptFunctionService'
+import useScriptSchemaService from './ScriptSchemaService'
 import useSettingsService from './SettingsService'
 
 /**
@@ -7,12 +8,14 @@ import useSettingsService from './SettingsService'
 async function initTables() {
   await Promise.all([
     useScriptFunctionService().init(),
+    useScriptSchemaService().init(),
     useSettingsService().init(),
   ])
 }
 
 export {
   initTables,
   useScriptFunctionService,
+  useScriptSchemaService,
   useSettingsService,
 }

apps/web/src/pages/script.vue

@@ -1,10 +1,15 @@
 <script setup lang="ts">
-import { useScriptFunctionService } from '@/database/services'
+import { useScriptFunctionService, useScriptSchemaService } from '@/database/services'
 
-const { upsert, remove } = useScriptFunctionService()
+const { upsert: functionUpsert, remove: functionRemove } = useScriptFunctionService()
 
-provide('scriptFunctionUpsert', upsert)
-provide('scriptFunctionRemove', remove)
+provide('scriptFunctionUpsert', functionUpsert)
+provide('scriptFunctionRemove', functionRemove)
+
+const { upsert: schemaUpsert, remove: schemaRemove } = useScriptSchemaService()
+
+provide('scriptSchemaUpsert', schemaUpsert)
+provide('scriptSchemaRemove', schemaRemove)
 </script>
 
 <template>

apps/web/vite.config.ts

@@ -10,6 +10,7 @@ import { ElementPlusResolver } from 'unplugin-vue-components/resolvers'
 import Components from 'unplugin-vue-components/vite'
 import VueRouter from 'unplugin-vue-router/vite'
 import { defineConfig } from 'vite'
+import { nodePolyfills } from 'vite-plugin-node-polyfills'
 
 import { version } from './package.json'
 
@@ -75,6 +76,10 @@ export default defineConfig({
         custom: FileSystemIconLoader('../../packages/ui/src/assets/icons'),
       },
     }),
+    nodePolyfills({
+      // WORKAROUND: https://github.com/davidmyersdev/vite-plugin-node-polyfills/issues/90
+      exclude: ['crypto'],
+    }),
     {
       name: 'element-plus-night-theme',
       transform(code, id) {