From edf7b5faa7b58865f61b13b0fedf587560dcdab7 Mon Sep 17 00:00:00 2001
From: Ryan Wang <i@ryanc.cc>
Date: Thu, 23 Jun 2022 21:22:24 +0800
Subject: [PATCH] feat: support load plugin's stylesheet

Signed-off-by: Ryan Wang <i@ryanc.cc>
---
 packages/shared/src/index.ts           |  1 +
 packages/shared/src/types/extension.ts | 19 ++++++++++++++
 src/main.ts                            | 34 +++++++++++++++++++++++++-
 3 files changed, 53 insertions(+), 1 deletion(-)
 create mode 100644 packages/shared/src/types/extension.ts

diff --git a/packages/shared/src/index.ts b/packages/shared/src/index.ts
index 9b97d1351..77341bcf5 100644
--- a/packages/shared/src/index.ts
+++ b/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";
diff --git a/packages/shared/src/types/extension.ts b/packages/shared/src/types/extension.ts
new file mode 100644
index 000000000..a001678d1
--- /dev/null
+++ b/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;
+}
diff --git a/src/main.ts b/src/main.ts
index 99069b029..37e2d28e4 100644
--- a/src/main.ts
+++ b/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);
   }
 }