lark-docs-variables 1.0.0

package/vite/plugin.ts

@@ -0,0 +1,131 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
+import opapi$1 from '@lark-opdev/cli/libs/api'
+import { readFileSync } from 'fs'
+import open from 'open'
+import { basename } from 'path'
+import colors from 'picocolors'
+import qs from 'query-string'
+import { Plugin } from 'vite'
+
+const opapi = (opapi$1 as any).default as typeof opapi$1
+
+export interface AppMeta {
+  appID: string
+  blockTypeID: string
+  appName: Record<string, string>
+  name: Record<string, string>
+  icon: string
+  filledIcon: string
+  outlinedIcon: string
+}
+
+export interface AppConfig {
+  manifestVersion: 1
+  appID: string
+  appType: 'docs-addon'
+  blockTypeID: string
+  projectName: string
+  url: string
+  contributes?: {
+    addPanel?: { initialHeight: number; view: string }
+    modal?: { initialHeight: number; view: string }
+    popup?: { initialHeight: number; view: string }
+  }
+  meta: Partial<AppMeta>
+}
+
+const getAppConfig = (): AppConfig => JSON.parse(readFileSync('app.json', 'utf-8'))
+
+const getProjectConfig = (config: AppConfig) => {
+  const blocks: string[] = []
+  if (config.contributes?.addPanel) { blocks.push(basename(config.contributes.addPanel.view, '.html')) }
+  if (config.contributes?.modal) { blocks.push(basename(config.contributes.modal.view, '.html')) }
+  if (config.contributes?.popup) { blocks.push(basename(config.contributes.popup.view, '.html')) }
+  return { appid: config.appID, projectname: config.projectName, blocks }
+}
+
+const getBlockConfig = (config: AppConfig) => ({
+  blockTypeID: config.blockTypeID,
+  blockRenderType: 'offlineWeb' as const,
+  offlineWebConfig: {
+    initialHeight: config.contributes?.addPanel?.initialHeight,
+    contributes: config.contributes
+  }
+})
+
+const getBlockConfigMap = (config: AppConfig) => ({
+  [config.blockTypeID]: getBlockConfig(config)
+})
+
+const getMiddlewareConfig = (config: AppConfig, devServerHost: string) => ({
+  projectConfig: getProjectConfig(config),
+  blockConfigMap: getBlockConfigMap(config),
+  devServerHost,
+  basePath: '/'
+})
+
+function docVerseVitePlugin(options: { open?: boolean; url?: string } = {}): Plugin {
+  const config = getAppConfig()
+  const shouldOpen = typeof options.open !== 'undefined' ? Boolean(options.open) : true
+  const url = options.url ?? config.url
+  return {
+    name: 'docverse-debug-url',
+    async configureServer(server) {
+      const port = server.config.server.port ?? 8080
+      if (process.env.NODE_ENV === 'development') {
+        const api = await opapi.init()
+        const devServerHost = `http://localhost:${port}`
+        const middleware = await api.dev.getBlockitDevMiddleware(getMiddlewareConfig(config, devServerHost))
+        server.middlewares.use((req, res, next) => {
+          res.setHeader('Access-Control-Allow-Origin', new URL(url).origin)
+          res.setHeader('Access-Control-Allow-Methods', '*')
+          res.setHeader('Access-Control-Allow-Headers', 'x-request-id')
+          res.setHeader('Access-Control-Allow-Credentials', 'true')
+          if (!req.url) { return next() }
+          const uri = new URL(req.url, devServerHost)
+          if (uri.pathname.startsWith('/api')) {
+            middleware({ url: req.url }, {
+              send: (content: any) => {
+                if (!content) { return next() }
+                if (uri.pathname === '/api/block' && config.meta) {
+                  Object.assign(content.data.blocks[0], config.meta)
+                }
+
+                if (uri.pathname === '/api/meta' && config.meta) {
+                  Object.assign(content.data.app_metas[0].app_base_info, { filledIcon: config.meta.icon })
+                }
+                res.setHeader('Content-Type', 'application/json')
+                res.end(Buffer.from(JSON.stringify(content, null, 2)))
+              }
+            }, next)
+          } else {
+            return next()
+          }
+        })
+        server.httpServer?.once('listening', () => {
+          setTimeout(() => {
+            const documentUrl = qs.stringifyUrl({ url, query: { blockitdebug: true, debugport: port } })
+            console.info(`  ${colors.green('➜')}  ${colors.bold('DocVerse')}: ${documentUrl}`)
+            if (shouldOpen) { open(documentUrl) }
+          }, 0)
+        })
+      }
+    },
+    async generateBundle(this: any) {
+      if (process.env.NODE_ENV === 'production') {
+        this.emitFile({
+          type: 'asset',
+          fileName: 'project.config.json',
+          source: JSON.stringify(getProjectConfig(config), null, 2)
+        })
+        this.emitFile({
+          type: 'asset',
+          fileName: 'index.json',
+          source: JSON.stringify(getBlockConfig(config), null, 2)
+        })
+      }
+    }
+  }
+}
+
+export { docVerseVitePlugin }

package/vite.config.ts

@@ -0,0 +1,55 @@
+
+import tailwindcss from '@tailwindcss/vite'
+import react from '@vitejs/plugin-react'
+import path, { basename } from "path"
+import { defineConfig } from 'vite'
+import { docVerseVitePlugin } from './vite/plugin'
+
+export default defineConfig({
+  root: 'src',
+  base: '',
+  server: { cors: false },
+  plugins: [
+    react(),
+    tailwindcss(),
+    docVerseVitePlugin({
+      url: 'https://atomicbi.sg.larksuite.com/wiki/Bi6Uw0I7jiWPt1kQU3ZlxivwgGg',
+      open: true
+    })
+  ],
+  build: {
+    outDir: 'dist',
+    emptyOutDir: true,
+    assetsDir: '.',
+    cssCodeSplit: false,
+    rollupOptions: {
+      input: {
+        panel: 'src/panel.html',
+        settings: 'src/settings.html'
+      },
+      output: {
+        dir: 'dist',
+        entryFileNames: '[name].js',
+        assetFileNames: '[name].[ext]',
+        chunkFileNames: '[name].js',
+        manualChunks(id, meta) {
+          const name = id.split('/').at(-1)?.replace(/\?.*$/, '')
+          if (!name) { return null }
+          const info = meta.getModuleInfo(id)
+          if (info?.isEntry) {
+            return basename(name, '.html')
+          } else if (['panel.tsx', 'settings.tsx'].includes(name)) {
+            return basename(name, '.tsx')
+          }
+          return 'bundle'
+        },
+        sanitizeFileName: (name) => name === 'style.css' ? 'bundle.css' : name
+      }
+    }
+  },
+  resolve: {
+    alias: {
+      "@": path.resolve(__dirname, "./src")
+    }
+  }
+})