feat: add extension setup and custom slots support in the application

Author: tacxou

extensions/.gitignore

@@ -0,0 +1,2 @@
+*
+!.gitignore

nuxt.config.ts

@@ -5,6 +5,7 @@ import openapiTS from 'openapi-typescript'
 import { defineNuxtConfig } from 'nuxt/config'
 import { parse } from 'yaml'
 import * as consola from 'consola'
+import setupApp from './src/server/extension.setup'
 
 const SESAME_APP_API_URL = process.env.SESAME_APP_API_URL || 'http://localhost:4002'
 const SESAME_ALLOWED_HOSTS = process.env.SESAME_ALLOWED_HOSTS ? process.env.SESAME_ALLOWED_HOSTS.split(',') : []
@@ -65,6 +66,7 @@ export default defineNuxtConfig({
   appConfig: {
     baseUrl: SESAME_APP_API_URL,
     appManagerVersion: process.env.npm_package_version,
+    customSlots: {},
   },
   modules: [
     '@nuxt-alt/auth',
@@ -76,6 +78,7 @@ export default defineNuxtConfig({
     'dayjs-nuxt',
     '@nuxt/devtools',
     'nuxt-monaco-editor',
+    ...setupApp(),
   ],
   auth: {
     globalMiddleware: true,

src/components/hook.vue

@@ -0,0 +1,46 @@
+<template lang="pug">
+div(:id='"tk-hook:" + name')
+  template(v-for="(customSlot, key) in customSlots")
+    pre.bg-red.text-white(v-if='debug' v-html="JSON.stringify({name, customSlot, data}, null, 2)")
+    component(
+      v-if='customSlot.componentName'
+      :key='key'
+      :is="customSlot.componentName"
+      v-bind="{...customSlot.data, ...data}"
+    )
+</template>
+
+<script lang="ts" setup>
+import { useAppConfig } from '#imports'
+import { sort } from 'radash'
+
+//TODO: Convert to a sdk repository and publish it on npm for 3rd-party extensions
+interface CustomSlotInterface {
+  componentName: string
+  priority?: number
+  data?: Record<string, any>
+}
+
+const props = defineProps({
+  name: {
+    type: String,
+    required: true,
+  },
+  data: {
+    type: Object,
+    default: () => ({}),
+  },
+  debug: {
+    type: Boolean,
+    default: false,
+  },
+})
+
+const config = useAppConfig()
+const customSlots = computed(() => {
+  if (config.customSlots.hasOwnProperty(props.name)) {
+    const configCustomSlots = config.customSlots as Record<string, CustomSlotInterface[]>
+    return sort(configCustomSlots[props.name], (list: CustomSlotInterface) => list.priority || 0, true)
+  }
+})
+</script>

src/server/extension.setup.ts

@@ -0,0 +1,47 @@
+import { existsSync, readFileSync } from 'fs'
+import { dirname, join } from 'path'
+import { parse } from 'yaml'
+import * as consola from 'consola'
+
+const appList: string[] = []
+
+export const EXTENSION_FILE_INFO = 'extension.yml'
+export const EXTENSIONS_FILE_PATH = join(dirname(__dirname), '/../extensions/list.yml')
+
+export function parseExtensionsList(): any[] {
+  const data = readFileSync(EXTENSIONS_FILE_PATH, 'utf8')
+  const yml = parse(data)
+  return yml.list
+}
+
+export function extensionParseFile(path: string): any {
+  consola.info(`[Extension] Parsing extension file: ${path}/${EXTENSION_FILE_INFO}`)
+  const data = readFileSync(`${path}/${EXTENSION_FILE_INFO}`, 'utf8')
+  return parse(data)
+}
+
+// noinspection JSUnusedGlobalSymbols
+export default function (): string[] {
+  consola.info(`[Extension] Setting up extensions in <${EXTENSIONS_FILE_PATH}>...`)
+  try {
+    if (existsSync(EXTENSIONS_FILE_PATH)) {
+      const list = parseExtensionsList()
+      for (const extension of list) {
+        consola.info(`[Extension] Found extension: ${extension.name} (enabled: ${extension.enabled})`)
+
+        if (extension.enabled) {
+          const extensionPath = `${dirname(dirname(__dirname))}/extensions/${extension.path}`
+          const extensionFile = extensionParseFile(extensionPath)
+          if (extensionFile.settings.app.target) {
+            const extensionAppTarget = `${extensionPath}/${extensionFile.settings.app.target}`
+            appList.push(process.env.NODE_ENV === 'development' ? `${extensionAppTarget}/src/module` : `${extensionAppTarget}/dist/module.cjs`) // TODO: target dev and prod parameters
+          }
+        }
+      }
+    }
+    return appList
+  } catch (err) {
+    console.error(err) //TODO: universal logger
+    process.exit(1)
+  }
+}