feat: support load plugin's stylesheet

Signed-off-by: Ryan Wang <i@ryanc.cc>

packages/shared/src/index.ts

@@ -2,3 +2,4 @@ export * from "./types/plugin";
 export * from "./types/menus";
 export * from "./core/plugins";
 export * from "./states/pages";
+export * from "./types/extension";

packages/shared/src/types/extension.ts

@@ -0,0 +1,19 @@
+export interface Metadata {
+  name: string;
+  labels?: {
+    [key: string]: string | null;
+  } | null;
+  annotations?: {
+    [key: string]: string | null;
+  } | null;
+  version?: number | null;
+  creationTimestamp?: string | null;
+  deletionTimestamp?: string | null;
+}
+
+export interface Extension<T> {
+  spec?: T;
+  apiVersion: string;
+  kind: string;
+  metadata: Metadata;
+}

src/main.ts

@@ -63,6 +63,34 @@ function loadCoreModules() {
 
 const pluginStore = usePluginStore();
 
+function loadStyle(href: string) {
+  return new Promise(function (resolve, reject) {
+    let shouldAppend = false;
+    let el: HTMLLinkElement | null = document.querySelector(
+      'script[src="' + href + '"]'
+    );
+    if (!el) {
+      el = document.createElement("link");
+      el.rel = "stylesheet";
+      el.type = "text/css";
+      el.href = href;
+      shouldAppend = true;
+    } else if (el.hasAttribute("data-loaded")) {
+      resolve(el);
+      return;
+    }
+
+    el.addEventListener("error", reject);
+    el.addEventListener("abort", reject);
+    el.addEventListener("load", function loadStyleHandler() {
+      el?.setAttribute("data-loaded", "true");
+      resolve(el);
+    });
+
+    if (shouldAppend) document.head.prepend(el);
+  });
+}
+
 async function loadPluginModules() {
   const response = await axiosInstance.get(
     `/apis/plugin.halo.run/v1alpha1/plugins`
@@ -74,7 +102,7 @@ async function loadPluginModules() {
   );
 
   for (const plugin of plugins) {
-    const { entry } = plugin.status;
+    const { entry, stylesheet } = plugin.status;
 
     if (entry) {
       const { load } = useScriptTag(
@@ -90,6 +118,10 @@ async function loadPluginModules() {
       }
     }
 
+    if (stylesheet) {
+      await loadStyle(`http://localhost:8090${stylesheet}`);
+    }
+
     pluginStore.registerPlugin(plugin);
   }
 }