feat: vue3渲染适配器

packages/renderer-adapter/vue3/package.json

@@ -0,0 +1,39 @@
+{
+  "name": "@sy/vue3-renderer-adapter",
+  "version": "1.0.0-alpha.1",
+  "description": "vue3 renderer adapter",
+  "private": true,
+  "type": "module",
+  "scripts": {
+    "build": "vite build"
+  },
+  "alias": {
+    "#": "./src"
+  },
+  "files": [
+    "dist"
+  ],
+  "main": "./dist/index.cjs",
+  "module": "./dist/index.js",
+  "unpkg": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/types/index.d.ts",
+      "import": "./dist/index.mjs",
+      "require": "./dist/index.cjs",
+      "default": "./dist/index.mjs"
+    }
+  },
+  "dependencies": {
+    "postmate": "catalog:",
+    "vue": "catalog:"
+  },
+  "devDependencies": {
+    "@farmfe/cli": "catalog:",
+    "@farmfe/core": "catalog:",
+    "@types/postmate": "catalog:",
+    "@vitejs/plugin-vue": "catalog:",
+    "vite-plugin-dts": "catalog:"
+  }
+}

packages/renderer-adapter/vue3/src/adapter.vue

@@ -0,0 +1,55 @@
+<script setup lang="ts">
+import { onMounted } from 'vue';
+
+import Postmate from 'postmate';
+
+const props = defineProps<{
+  accessToken?: string;
+  applicationId: string;
+  fileId: string;
+  name: string;
+  projectId: string;
+  url: string;
+}>();
+
+Console.log('props', props);
+
+const initPostmate = async () => {
+  const container = document.querySelector('#low-code-adapter');
+  if (!container) {
+    console.error('容器元素未找到');
+    return;
+  }
+
+  const connection = new Postmate({
+    container,
+    model: {
+      accessToken: props.accessToken,
+      applicationId: props.applicationId,
+      fileId: props.fileId,
+      name: props.name,
+      projectId: props.projectId,
+      url: props.url,
+    },
+    name: 'y-code-renderer',
+    url: props.url,
+  });
+
+  connection.then((child) => {
+    child.frame.style.height = '100%';
+    child.frame.style.width = '100%';
+    console.log(`${props.name} 连接成功`, child);
+    child.call('child-connected', {
+      name: props.name,
+    });
+  });
+};
+
+onMounted(() => {
+  initPostmate();
+});
+</script>
+
+<template>
+  <div id="low-code-adapter" style="width: 100%; height: 100%"></div>
+</template>

packages/renderer-adapter/vue3/src/index.ts

@@ -0,0 +1 @@
+export { default } from './adapter.vue';

packages/renderer-adapter/vue3/tsconfig.json

@@ -0,0 +1,29 @@
+{
+  "compilerOptions": {
+    "target": "ESNext",
+    "jsx": "preserve",
+    "jsxFactory": "h",
+    "jsxFragmentFactory": "Fragment",
+    "lib": ["ESNext", "DOM", "DOM.Iterable"],
+    "baseUrl": ".",
+    "module": "ESNext",
+    "moduleResolution": "Node",
+    "paths": {
+      "@/*": ["src/*"]
+    },
+    "resolveJsonModule": true,
+    "types": ["vite/client"],
+    "strict": true,
+    "useUnknownInCatchVariables": false,
+    "declaration": true,
+    "declarationDir": "dist/types",
+    "outDir": "dist",
+    "sourceMap": true,
+    "allowSyntheticDefaultImports": true,
+    "esModuleInterop": true,
+    "forceConsistentCasingInFileNames": true,
+    "skipLibCheck": true
+  },
+  "include": ["src/**/*.ts", "src/**/*.d.ts", "src/**/*.tsx", "src/**/*.vue"],
+  "exclude": ["node_modules", "dist"]
+}

packages/renderer-adapter/vue3/vite.config.ts

@@ -0,0 +1,68 @@
+import path from 'node:path';
+import { fileURLToPath } from 'node:url';
+
+import vue from '@vitejs/plugin-vue';
+import { defineConfig } from 'vite';
+import dts from 'vite-plugin-dts';
+
+const __dirname = path.dirname(fileURLToPath(import.meta.url));
+
+export default defineConfig({
+  build: {
+    cssCodeSplit: true,
+    lib: {
+      entry: path.resolve(__dirname, 'src/index.ts'),
+      fileName: (format) => {
+        switch (format) {
+          case 'cjs': {
+            return 'index.cjs';
+          }
+          case 'es': {
+            return 'index.mjs';
+          }
+          case 'umd': {
+            return 'index.js';
+          }
+          default: {
+            return `index.${format}.js`;
+          }
+        }
+      },
+      formats: ['es', 'cjs', 'umd'],
+      name: 'RendererAdapter',
+    },
+    outDir: 'dist',
+    rollupOptions: {
+      external: ['vue'],
+      output: {
+        assetFileNames: (assetInfo) => {
+          if (assetInfo.name === 'style.css') return 'assets/[name][extname]';
+          return 'assets/[name]-[hash][extname]';
+        },
+        globals: {
+          vue: 'Vue',
+        },
+      },
+    },
+    sourcemap: true,
+  },
+  css: {
+    extract: false,
+    modules: {
+      localsConvention: 'camelCaseOnly',
+      scopeBehaviour: 'local',
+    },
+  },
+  plugins: [
+    vue({
+      css: {
+        injectCss: true,
+      },
+    }),
+    dts({
+      insertTypesEntry: true,
+      outDir: 'dist/types',
+      staticImport: true,
+    }),
+  ],
+});