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

apps/core/src/bootstrap/plugins/setup.ts

@@ -135,7 +135,14 @@ const pluginFetch = createFetch({});
 const timer = createTimers(abortController.signal);
 
 const sharedGlobalThis = Object.assign(Object.create(null), timer, {
+  Object: globalThis.Object,
   fetch: pluginFetch,
+  Symbol: globalThis.Symbol,
+  Error: globalThis.Error,
+  TypeError: globalThis.TypeError,
+  RangeError: globalThis.RangeError,
+  console: globalThis.console,
+  crypto: globalThis.crypto,
 });
 
 const dynamicImportMap = new Map<
@@ -222,6 +229,9 @@ export const createOrGetGlobalThis = (
             if (sharedGlobalThis[key]) return sharedGlobalThis[key];
             const result = Reflect.get(window, key);
             if (typeof result === 'function') {
+              if (result === ShadowRoot) {
+                return result;
+              }
               return function (...args: any[]) {
                 permissionLogger.debug(
                   `${pluginName} is calling window`,
@@ -262,15 +272,11 @@ export const createOrGetGlobalThis = (
         userAgent: navigator.userAgent,
       },
 
-      // safe to use for all plugins
-      Error: globalThis.Error,
-      TypeError: globalThis.TypeError,
-      RangeError: globalThis.RangeError,
-      console: globalThis.console,
-      crypto: globalThis.crypto,
+      MouseEvent: globalThis.MouseEvent,
+      KeyboardEvent: globalThis.KeyboardEvent,
+      CustomEvent: globalThis.CustomEvent,
 
       // copilot uses these
-      CustomEvent: globalThis.CustomEvent,
       Date: globalThis.Date,
       Math: globalThis.Math,
       URL: globalThis.URL,
@@ -284,6 +290,10 @@ export const createOrGetGlobalThis = (
       Blob: globalThis.Blob,
       ClipboardItem: globalThis.ClipboardItem,
 
+      // vue uses these
+      Element: globalThis.Element,
+      SVGElement: globalThis.SVGElement,
+
       // fixme: use our own db api
       indexedDB: globalThis.indexedDB,
       IDBRequest: globalThis.IDBRequest,
@@ -299,6 +309,7 @@ export const createOrGetGlobalThis = (
       IDBVersionChangeEvent: globalThis.IDBVersionChangeEvent,
     }
   );
+  pluginGlobalThis.global = pluginGlobalThis;
   globalThisMap.set(pluginName, pluginGlobalThis);
   return pluginGlobalThis;
 };

apps/core/src/bootstrap/register-plugins.ts

@@ -1,5 +1,7 @@
 import { DebugLogger } from '@affine/debug';
 import { registeredPluginAtom, rootStore } from '@toeverything/infra/atom';
+import { packageJsonOutputSchema } from '@toeverything/infra/type';
+import type { z } from 'zod';
 
 import { evaluatePluginEntry, setupPluginCode } from './plugins/setup';
 
@@ -8,6 +10,7 @@ const builtinPluginUrl = new Set([
   '/plugins/copilot',
   '/plugins/hello-world',
   '/plugins/image-preview',
+  '/plugins/vue-hello-world',
 ]);
 
 const logger = new DebugLogger('register-plugins');
@@ -23,7 +26,10 @@ export const pluginRegisterPromise = Promise.all(
   [...builtinPluginUrl].map(url => {
     return fetch(`${url}/package.json`)
       .then(async res => {
-        const packageJson = await res.json();
+        const packageJson = (await res.json()) as z.infer<
+          typeof packageJsonOutputSchema
+        >;
+        packageJsonOutputSchema.parse(packageJson);
         const {
           name: pluginName,
           affinePlugin: {
@@ -38,6 +44,12 @@ export const pluginRegisterPromise = Promise.all(
         if (!release && !runtimeConfig.enablePlugin) {
           return Promise.resolve();
         }
+        if (
+          release === 'development' &&
+          process.env.NODE_ENV !== 'development'
+        ) {
+          return Promise.resolve();
+        }
         const baseURL = url;
         const entryURL = `${baseURL}/${core}`;
         rootStore.set(registeredPluginAtom, prev => [...prev, pluginName]);