feat(plugin): add vue example (#3592)

plugins/bookmark/project.json

@@ -1,6 +1,13 @@
 {
   "name": "@affine/bookmark-plugin",
   "$schema": "../../node_modules/nx/schemas/project-schema.json",
+  "namedInputs": {
+    "default": [
+      "{projectRoot}/**/*",
+      "{workspaceRoot}/packages/plugin-cli/**/*",
+      "sharedGlobals"
+    ]
+  },
   "targets": {
     "build": {
       "executor": "nx:run-script",
@@ -8,7 +15,7 @@
         "script": "build"
       },
       "dependsOn": ["^build"],
-      "inputs": ["{projectRoot}/**/*"],
+      "inputs": ["default"],
       "outputs": [
         "{workspaceRoot}/apps/core/public/plugins/bookmark",
         "{workspaceRoot}/apps/electron/dist/plugins/bookmark"

plugins/copilot/project.json

@@ -1,7 +1,13 @@
 {
   "name": "@affine/copilot-plugin",
   "$schema": "../../node_modules/nx/schemas/project-schema.json",
-  "tags": ["plugin"],
+  "namedInputs": {
+    "default": [
+      "{projectRoot}/**/*",
+      "{workspaceRoot}/packages/plugin-cli/src/**/*",
+      "sharedGlobals"
+    ]
+  },
   "targets": {
     "build": {
       "executor": "nx:run-script",
@@ -9,11 +15,12 @@
         "script": "build"
       },
       "dependsOn": ["^build"],
-      "inputs": ["{projectRoot}/**/*"],
+      "inputs": ["default"],
       "outputs": [
         "{workspaceRoot}/apps/core/public/plugins/copilot",
         "{workspaceRoot}/apps/electron/dist/plugins/copilot"
       ]
     }
-  }
+  },
+  "tags": ["plugin"]
 }

plugins/hello-world/project.json

@@ -1,7 +1,13 @@
 {
   "name": "@affine/hello-world-plugin",
   "$schema": "../../node_modules/nx/schemas/project-schema.json",
-  "tags": ["plugin"],
+  "namedInputs": {
+    "default": [
+      "{projectRoot}/**/*",
+      "{workspaceRoot}/packages/plugin-cli/src/**/*",
+      "sharedGlobals"
+    ]
+  },
   "targets": {
     "build": {
       "executor": "nx:run-script",
@@ -9,11 +15,12 @@
         "script": "build"
       },
       "dependsOn": ["^build"],
-      "inputs": ["{projectRoot}/**/*"],
+      "inputs": ["default"],
       "outputs": [
         "{workspaceRoot}/apps/core/public/plugins/hello-world",
         "{workspaceRoot}/apps/electron/dist/plugins/hello-world"
       ]
     }
-  }
+  },
+  "tags": ["plugin"]
 }

plugins/image-preview/project.json

@@ -1,7 +1,13 @@
 {
   "name": "@affine/image-preview-plugin",
   "$schema": "../../node_modules/nx/schemas/project-schema.json",
-  "tags": ["plugin"],
+  "namedInputs": {
+    "default": [
+      "{projectRoot}/**/*",
+      "{workspaceRoot}/packages/plugin-cli/src/**/*",
+      "sharedGlobals"
+    ]
+  },
   "targets": {
     "build": {
       "executor": "nx:run-script",
@@ -9,11 +15,12 @@
         "script": "build"
       },
       "dependsOn": ["^build"],
-      "inputs": ["{projectRoot}/**/*"],
+      "inputs": ["default"],
       "outputs": [
         "{workspaceRoot}/apps/core/public/plugins/image-preview",
         "{workspaceRoot}/apps/electron/dist/plugins/image-preview"
       ]
     }
-  }
+  },
+  "tags": ["plugin"]
 }

plugins/vue-hello-world/.eslintrc.json

@@ -0,0 +1,10 @@
+{
+  "root": false,
+  "parser": "vue-eslint-parser",
+  "parserOptions": {
+    "parser": "@typescript-eslint/parser",
+    "sourceType": "module",
+    "extraFileExtensions": [".vue"]
+  },
+  "extends": ["plugin:vue/vue3-recommended"]
+}

plugins/vue-hello-world/package.json

@@ -0,0 +1,26 @@
+{
+  "name": "@affine/vue-hello-world-plugin",
+  "type": "module",
+  "private": true,
+  "description": "Vue hello world plugin",
+  "version": "0.8.0-canary.11",
+  "scripts": {
+    "dev": "af dev",
+    "build": "af build"
+  },
+  "affinePlugin": {
+    "release": "development",
+    "entry": {
+      "core": "./src/index.ts"
+    }
+  },
+  "dependencies": {
+    "@affine/component": "workspace:*",
+    "@affine/sdk": "workspace:*",
+    "element-plus": "^2.3.9",
+    "vue": "^3.3.4"
+  },
+  "devDependencies": {
+    "@affine/plugin-cli": "workspace:*"
+  }
+}

plugins/vue-hello-world/project.json

@@ -0,0 +1,26 @@
+{
+  "name": "@affine/vue-hello-world-plugin",
+  "$schema": "../../node_modules/nx/schemas/project-schema.json",
+  "namedInputs": {
+    "default": [
+      "{projectRoot}/**/*",
+      "{workspaceRoot}/packages/plugin-cli/src/**/*",
+      "sharedGlobals"
+    ]
+  },
+  "targets": {
+    "build": {
+      "executor": "nx:run-script",
+      "options": {
+        "script": "build"
+      },
+      "dependsOn": ["^build"],
+      "inputs": ["default"],
+      "outputs": [
+        "{workspaceRoot}/apps/core/public/plugins/vue-hello-world",
+        "{workspaceRoot}/apps/electron/dist/plugins/vue-hello-world"
+      ]
+    }
+  },
+  "tags": ["plugin"]
+}

plugins/vue-hello-world/src/app.vue

@@ -0,0 +1,13 @@
+<script setup lang="ts">
+import { ref } from 'vue';
+
+const count = ref(0);
+</script>
+
+<template>
+  <el-button @click="count++">
+    {{ count }}
+  </el-button>
+</template>
+
+<style scoped></style>

plugins/vue-hello-world/src/global.d.ts

@@ -0,0 +1,5 @@
+declare module '*.vue' {
+  import type { ComponentOptions } from 'vue';
+  const component: ComponentOptions;
+  export default component;
+}

plugins/vue-hello-world/src/index.ts

@@ -0,0 +1,18 @@
+import type { PluginContext } from '@affine/sdk/entry';
+import ElementPlus from 'element-plus';
+import { createApp } from 'vue';
+
+import App from './app.vue';
+
+export const entry = (context: PluginContext) => {
+  context.register('headerItem', div => {
+    const app = createApp(App);
+    app.use(ElementPlus);
+    app.mount(div, false, false);
+    return () => {
+      app.unmount();
+    };
+  });
+
+  return () => {};
+};

plugins/vue-hello-world/tsconfig.json

@@ -0,0 +1,14 @@
+{
+  "extends": "../../tsconfig.json",
+  "include": ["./src"],
+  "compilerOptions": {
+    "noEmit": false,
+    "outDir": "lib",
+    "jsx": "preserve"
+  },
+  "references": [
+    {
+      "path": "../../packages/sdk"
+    }
+  ]
+}