newui

2022-10-05 00:43:57 +08:00
parent f628af6899
commit e427c8c200
19 changed files with 1004 additions and 245 deletions
--- a/README.md
+++ b/README.md
@@ -0,0 +1,15 @@
+```sh
+pnpm i
+pnpm build
+```
+
+### todo
+
+- 删减列表
+
+- 演员头像，偷 bus 
+  ```html
+  <img src="/pics/actress/sl1_a.jpg" title="河北彩花">
+  ```
+- 移动端 样式改动（panel 的阴影、圆角等）
+
--- a/dist/jop.user.js
+++ b/dist/jop.user.js
@@ -10,6 +10,7 @@
 // @match        *://*.javdb.com/*
 // @match        *://*.javbus.com/*
 // @match        *://*.javlibrary.com/*
+// @require      https://cdn.jsdelivr.net/npm/preact@10.11.0/dist/preact.min.js
 // @connect      jable.tv
 // @connect      missav.com
 // @connect      javhhh.com
@@ -25,69 +26,153 @@
 // @connect      javfc2.net
 // @connect      paipancon.com
 // @connect      ggjav.com
-// @grant        GM_xmlhttpRequest
 // ==/UserScript==

-(e=>{const o=document.createElement("style");o.dataset.source="vite-plugin-monkey",o.innerText=e,document.head.appendChild(o)})('.jop-panel{box-sizing:border-box;position:fixed;top:37.5%;right:-305px;width:330px;height:400px;padding:35px 35px 35px 60px;border-radius:15px 0 0 15px;background-color:#fff;box-shadow:#00000042 3px 0 8px;transition:right .2s ease-in-out;display:flex;flex-wrap:wrap;justify-content:space-between;gap:10px 0}.jop-panel_open{right:0}.jop-button_leakage:after,.jop-button_subtitle:before{position:absolute;font-size:10px;padding:4px;border-radius:4px;top:-8px;line-height:.75;color:#fff;background:#67c23a}.jop-button_subtitle:before{content:"\\5b57\\5e55";right:-10px}.jop-button_leakage:after{content:"\\65e0\\7801";right:18px}.jop-button{display:inline-flex;-webkit-box-align:center;align-items:center;-webkit-box-pack:center;justify-content:center;position:relative;box-sizing:border-box;-webkit-tap-highlight-color:transparent;background-color:transparent;outline:0px;cursor:pointer;user-select:none;vertical-align:middle;appearance:none;text-decoration:none;font-family:Roboto,Helvetica,Arial,sans-serif;font-weight:500;font-size:14px;line-height:1.75;letter-spacing:.02857em;min-width:110px;padding:5px 15px;border-radius:8px;transition:background-color .25s cubic-bezier(.4,0,.2,1) 0ms,box-shadow .25s cubic-bezier(.4,0,.2,1) 0ms,border-color .25s cubic-bezier(.4,0,.2,1) 0ms,color .25s cubic-bezier(.4,0,.2,1) 0ms;color:#606266;border:1px solid #dcdfe6}.jop-button:visited{color:#606266}.jop-button:hover{text-decoration:none;color:#409eff;border:1px solid #c6e2ff;background-color:#ecf5ff}.jop-button-loading{position:absolute;left:5px;width:8px;height:8px;border:1px solid #dcdfe6;border-top-color:transparent;border-radius:100%;animation:btnLoading infinite .75s linear}.jop-button_green{color:#67c23a!important;background-color:#f0f9eb;border:1px solid #b3e19d}.jop-button_green:hover{color:#fff!important;background-color:#67c23a}.jop-button_red{color:#f56c6c!important;background-color:#fef0f0;border:1px solid #fab6b6}.jop-button_red:hover{color:#fff!important;background-color:#f56c6c}@keyframes btnLoading{0%{transform:rotate(0)}to{transform:rotate(360deg)}}');
+(e=>{const o=document.createElement("style");o.dataset.source="vite-plugin-monkey",o.innerText=e,document.head.appendChild(o)})('.jop-panelParent{position:relative}.jop-panel{box-sizing:border-box;position:absolute;top:0;left:1rem;width:100%;height:100%;z-index:10;border-radius:15px 0 0 15px;background-color:#fff;box-shadow:#00000042 -3px 0 8px;transition:right .2s ease-in-out;display:flex;flex-wrap:wrap;justify-content:space-between;gap:10px 0}.jop-panel_open{right:0}.jop-button_leakage:after,.jop-button_subtitle:before{position:absolute;font-size:10px;padding:4px;border-radius:4px;top:-8px;line-height:.75;color:#fff;background:#67c23a}.jop-button_subtitle:before{content:"\\5b57\\5e55";right:-10px}.jop-button_leakage:after{content:"\\65e0\\7801";right:18px}.jop-button{display:inline-flex;-webkit-box-align:center;align-items:center;-webkit-box-pack:center;justify-content:center;position:relative;box-sizing:border-box;-webkit-tap-highlight-color:transparent;background-color:transparent;outline:0px;cursor:pointer;user-select:none;vertical-align:middle;appearance:none;text-decoration:none;font-family:Roboto,Helvetica,Arial,sans-serif;font-weight:500;font-size:14px;line-height:1.75;letter-spacing:.02857em;min-width:110px;padding:5px 15px;border-radius:8px;transition:background-color .25s cubic-bezier(.4,0,.2,1) 0ms,box-shadow .25s cubic-bezier(.4,0,.2,1) 0ms,border-color .25s cubic-bezier(.4,0,.2,1) 0ms,color .25s cubic-bezier(.4,0,.2,1) 0ms;color:#606266;border:1px solid #dcdfe6}.jop-button:visited{color:#606266}.jop-button:hover{text-decoration:none;color:#409eff;border:1px solid #c6e2ff;background-color:#ecf5ff}.jop-button-loading{position:absolute;left:5px;width:8px;height:8px;border:1px solid #dcdfe6;border-top-color:transparent;border-radius:100%;animation:btnLoading infinite .75s linear}.jop-button_green{color:#67c23a!important;background-color:#f0f9eb;border:1px solid #b3e19d}.jop-button_green:hover{color:#fff!important;background-color:#67c23a}.jop-button_red{color:#f56c6c!important;background-color:#fef0f0;border:1px solid #fab6b6}.jop-button_red:hover{color:#fff!important;background-color:#f56c6c}@keyframes btnLoading{0%{transform:rotate(0)}to{transform:rotate(360deg)}}');

-var vite_plugin_monkey_a18d479d16c8e = function(exports) {
-  var _a, _b;
+(function(preact2) {
  "use strict";
-  function createPanel() {
-    const parentNode = document.querySelector("body");
-    const panelNode = document.createElement("div");
-    parentNode && parentNode.appendChild(panelNode);
-    panelNode.classList.add("jop-panel");
-    panelNode.addEventListener("click", () => {
-      const class1 = panelNode.classList[1];
-      if (class1 === void 0) {
-        panelNode.classList.add("jop-panel_open");
-      } else {
-        panelNode.classList.remove("jop-panel_open");
-      }
-    });
-    return panelNode;
-  }
-  function createButtonNode(panelNode, siteName, siteUrl) {
-    const button = document.createElement("a");
-    button.setAttribute("target", "_blank");
-    button.classList.add("jop-button");
-    button.innerHTML = siteName;
-    button.href = siteUrl;
-    button.addEventListener("click", (e) => e.stopPropagation());
-    panelNode.appendChild(button);
-    const loadAni = document.createElement("span");
-    loadAni.classList.add("jop-button-loading");
-    button.appendChild(loadAni);
-    const setButtonStatus = (targetLink, color, hasLeakage = false, hasSubtitle = false) => {
-      button.href = targetLink;
-      button.classList.add(`jop-button_${color}`);
-      loadAni.classList.remove("jop-button-loading");
-      hasLeakage && button.classList.add("jop-button_leakage");
-      hasSubtitle && button.classList.add("jop-button_subtitle");
-    };
-    return { button, setButtonStatus };
-  }
  const matchList = [
    {
      name: "javdb",
      enable: true,
      hostname: "javdb.com",
-      panelParentQueryStr: "video-meta-panel"
-    },
-    {
-      name: "javbus",
-      enable: true,
-      hostname: "www.javbus.com",
-      panelParentQueryStr: "div.row.movie"
-    },
-    {
-      name: "javlib",
-      enable: true,
-      hostname: "www.javlibrary.com",
-      panelParentQueryStr: "#video_jacket_info"
+      panelParentQueryStr: ".video-meta-panel .column:nth-child(2)",
+      infoPanelQueryStr: "video-meta-panel"
    }
  ];
+  function getInfo(cmsName) {
+    var _a;
+    if (cmsName === "javdb") {
+      const codeNode = document.querySelector(`[data-clipboard-text]`);
+      const actorNode = document.querySelector(`.panel-block>span.value>a`);
+      return {
+        codeText: codeNode == null ? void 0 : codeNode.dataset.clipboardText,
+        codeLink: codeNode == null ? void 0 : codeNode.href,
+        actorText: actorNode == null ? void 0 : actorNode.innerHTML,
+        actorLink: actorNode == null ? void 0 : actorNode.href
+      };
+    } else if (cmsName === "javbus") {
+      const codeNode = document.querySelector(`span[style="color:#CC0000;"]`);
+      document.querySelector(`.panel-block>span.value>a`);
+      return {
+        codeText: codeNode == null ? void 0 : codeNode.innerText.replace("\u590D\u5236", ""),
+        codeLink: "",
+        actorText: "",
+        actorLink: ""
+      };
+    } else {
+      return {
+        codeText: (_a = document.querySelector(`#video_id td.text`)) == null ? void 0 : _a.innerHTML,
+        codeLink: "",
+        actorText: "",
+        actorLink: ""
+      };
+    }
+  }
+  const style = "";
+  var r, u, i, o$1, f = 0, c = [], e = [], a = preact2.options.__b, v = preact2.options.__r, l = preact2.options.diffed, m = preact2.options.__c, d = preact2.options.unmount;
+  function p(t, r2) {
+    preact2.options.__h && preact2.options.__h(u, t, f || r2), f = 0;
+    var i2 = u.__H || (u.__H = { __: [], __h: [] });
+    return t >= i2.__.length && i2.__.push({ __V: e }), i2.__[t];
+  }
+  function y(n) {
+    return f = 1, h(C, n);
+  }
+  function h(n, t, i2) {
+    var o2 = p(r++, 2);
+    if (o2.t = n, !o2.__c && (o2.__ = [i2 ? i2(t) : C(void 0, t), function(n2) {
+      var t2 = o2.__N ? o2.__N[0] : o2.__[0], r2 = o2.t(t2, n2);
+      t2 !== r2 && (o2.__N = [r2, o2.__[1]], o2.__c.setState({}));
+    }], o2.__c = u, !u.u)) {
+      u.u = true;
+      var f2 = u.shouldComponentUpdate;
+      u.shouldComponentUpdate = function(n2, t2, r2) {
+        if (!o2.__c.__H)
+          return true;
+        var u2 = o2.__c.__H.__.filter(function(n3) {
+          return n3.__c;
+        });
+        if (u2.every(function(n3) {
+          return !n3.__N;
+        }))
+          return !f2 || f2.call(this, n2, t2, r2);
+        var i3 = false;
+        return u2.forEach(function(n3) {
+          if (n3.__N) {
+            var t3 = n3.__[0];
+            n3.__ = n3.__N, n3.__N = void 0, t3 !== n3.__[0] && (i3 = true);
+          }
+        }), !!i3 && (!f2 || f2.call(this, n2, t2, r2));
+      };
+    }
+    return o2.__N || o2.__;
+  }
+  function g() {
+    for (var t; t = c.shift(); )
+      if (t.__P && t.__H)
+        try {
+          t.__H.__h.forEach(w), t.__H.__h.forEach(z), t.__H.__h = [];
+        } catch (r2) {
+          t.__H.__h = [], preact2.options.__e(r2, t.__v);
+        }
+  }
+  preact2.options.__b = function(n) {
+    "function" != typeof n.type || n.o || n.type === preact2.Fragment ? n.o || (n.o = n.__ && n.__.o ? n.__.o : "") : n.o = (n.__ && n.__.o ? n.__.o : "") + (n.__ && n.__.__k ? n.__.__k.indexOf(n) : 0), u = null, a && a(n);
+  }, preact2.options.__r = function(n) {
+    v && v(n), r = 0;
+    var t = (u = n.__c).__H;
+    t && (i === u ? (t.__h = [], u.__h = [], t.__.forEach(function(n2) {
+      n2.__N && (n2.__ = n2.__N), n2.__V = e, n2.__N = n2.i = void 0;
+    })) : (t.__h.forEach(w), t.__h.forEach(z), t.__h = [])), i = u;
+  }, preact2.options.diffed = function(t) {
+    l && l(t);
+    var r2 = t.__c;
+    r2 && r2.__H && (r2.__H.__h.length && (1 !== c.push(r2) && o$1 === preact2.options.requestAnimationFrame || ((o$1 = preact2.options.requestAnimationFrame) || k)(g)), r2.__H.__.forEach(function(n) {
+      n.i && (n.__H = n.i), n.__V !== e && (n.__ = n.__V), n.i = void 0, n.__V = e;
+    })), i = u = null;
+  }, preact2.options.__c = function(t, r2) {
+    r2.some(function(t2) {
+      try {
+        t2.__h.forEach(w), t2.__h = t2.__h.filter(function(n) {
+          return !n.__ || z(n);
+        });
+      } catch (u2) {
+        r2.some(function(n) {
+          n.__h && (n.__h = []);
+        }), r2 = [], preact2.options.__e(u2, t2.__v);
+      }
+    }), m && m(t, r2);
+  }, preact2.options.unmount = function(t) {
+    d && d(t);
+    var r2, u2 = t.__c;
+    u2 && u2.__H && (u2.__H.__.forEach(function(n) {
+      try {
+        w(n);
+      } catch (n2) {
+        r2 = n2;
+      }
+    }), u2.__H = void 0, r2 && preact2.options.__e(r2, u2.__v));
+  };
+  var j = "function" == typeof requestAnimationFrame;
+  function k(n) {
+    var t, r2 = function() {
+      clearTimeout(u2), j && cancelAnimationFrame(t), setTimeout(n);
+    }, u2 = setTimeout(r2, 100);
+    j && (t = requestAnimationFrame(r2));
+  }
+  function w(n) {
+    var t = u, r2 = n.__c;
+    "function" == typeof r2 && (n.__c = void 0, r2()), u = t;
+  }
+  function z(n) {
+    var t = u;
+    n.__c = n.__(), u = t;
+  }
+  function C(n, t) {
+    return "function" == typeof t ? t(n) : t;
+  }
  const print = (name) => {
    console.log(name);
  };
@@ -97,7 +182,9 @@ var vite_plugin_monkey_a18d479d16c8e = function(exports) {
      hostname: "jable.tv",
      url: "https://jable.tv/videos/{{code}}/",
      fetcher: "get",
-      domQuery: { subQuery: ".header-right>h6" },
+      domQuery: {
+        subQuery: ".header-right>h6"
+      },
      method: print
    },
    {
@@ -116,7 +203,10 @@ var vite_plugin_monkey_a18d479d16c8e = function(exports) {
      hostname: "netflav.com",
      url: "https://netflav.com/search?type=title&keyword={{code}}",
      fetcher: "parser",
-      domQuery: { linkQuery: ".grid_cell>a", titleQuery: ".grid_cell>a>.grid_title" },
+      domQuery: {
+        linkQuery: ".grid_cell>a",
+        titleQuery: ".grid_cell>a>.grid_title"
+      },
      method: print
    },
    {
@@ -146,7 +236,10 @@ var vite_plugin_monkey_a18d479d16c8e = function(exports) {
      hostname: "bestjavporn.com",
      url: "https://www3.bestjavporn.com/search/{{code}}",
      fetcher: "parser",
-      domQuery: { linkQuery: "article.thumb-block>a", titleQuery: "article.thumb-block>a" },
+      domQuery: {
+        linkQuery: "article.thumb-block>a",
+        titleQuery: "article.thumb-block>a"
+      },
      method: print
    },
    {
@@ -164,7 +257,10 @@ var vite_plugin_monkey_a18d479d16c8e = function(exports) {
      hostname: "jav.guru",
      url: "https://jav.guru/?s={{code}}",
      fetcher: "parser",
-      domQuery: { linkQuery: ".imgg>a[href]", titleQuery: ".inside-article>.grid1 a[title]" },
+      domQuery: {
+        linkQuery: ".imgg>a[href]",
+        titleQuery: ".inside-article>.grid1 a[title]"
+      },
      method: print
    },
    {
@@ -218,7 +314,10 @@ var vite_plugin_monkey_a18d479d16c8e = function(exports) {
      hostname: "av01.tv",
      url: "https://www.av01.tv/search/videos?search_query={{code}}",
      fetcher: "parser",
-      domQuery: { linkQuery: "div[id].well-sm>a", titleQuery: ".video-views>.pull-left" },
+      domQuery: {
+        linkQuery: "div[id].well-sm>a",
+        titleQuery: ".video-views>.pull-left"
+      },
      method: print
    },
    {
@@ -231,130 +330,65 @@ var vite_plugin_monkey_a18d479d16c8e = function(exports) {
      method: print
    }
  ];
-  var r = (_a = Reflect.get(document, "__monkeyWindow")) != null ? _a : window;
-  r.GM;
-  r.unsafeWindow = (_b = r.unsafeWindow) != null ? _b : window;
-  r.unsafeWindow;
-  r.GM_info;
-  r.GM_cookie;
-  var b = (...e) => r.GM_xmlhttpRequest(...e);
-  function videoPageParser(responseText, { subQuery, leakQuery, videoQuery }) {
-    const doc = new DOMParser().parseFromString(responseText, "text/html");
-    const subNode = subQuery ? doc.querySelector(subQuery) : "";
-    const subNodeText = subNode ? subNode.innerHTML : "";
-    const leakNode = leakQuery ? doc.querySelector(leakQuery) : null;
-    const videoNode = videoQuery ? doc.querySelector(videoQuery) : true;
-    return {
-      isSuccess: !!videoNode,
-      hasSubtitle: subNodeText.includes("\u5B57\u5E55") || subNodeText.includes("subtitle"),
-      hasLeakage: !!leakNode
-    };
+  var _ = 0;
+  function o(o2, e2, n, t, f2) {
+    var l2, s, u2 = {};
+    for (s in e2)
+      "ref" == s ? l2 = e2[s] : u2[s] = e2[s];
+    var a2 = { type: o2, props: u2, key: n, ref: l2, __k: null, __: null, __b: 0, __e: null, __d: void 0, __c: null, __h: null, constructor: void 0, __v: --_, __source: f2, __self: t };
+    if ("function" == typeof o2 && (l2 = o2.defaultProps))
+      for (s in l2)
+        void 0 === u2[s] && (u2[s] = l2[s]);
+    return preact2.options.vnode && preact2.options.vnode(a2), a2;
  }
-  function serachPageParser(responseText, { linkQuery, titleQuery, listIndex = 0, spaceCode = false }, siteHostName, CODE) {
-    const doc = new DOMParser().parseFromString(responseText, "text/html");
-    const linkNode = linkQuery ? doc.querySelectorAll(linkQuery)[listIndex] : null;
-    const titleNode = titleQuery ? doc.querySelectorAll(titleQuery)[listIndex] : null;
-    const titleNodeText = titleNode ? titleNode == null ? void 0 : titleNode.outerHTML : "";
-    function query() {
-      const envCodeWithSpace = spaceCode ? CODE.replace("-", " ") : CODE;
-      const condition = linkNode && titleNode && (titleNodeText.includes(envCodeWithSpace) || titleNodeText.includes(CODE));
-      if (condition) {
-        return {
-          isSuccess: true,
-          targetLink: linkNode.href.replace(linkNode.hostname, siteHostName),
-          hasLeakage: titleNodeText.includes("\u65E0\u7801") || titleNodeText.includes("Uncensored"),
-          hasSubtitle: titleNodeText.includes("\u5B57\u5E55") || titleNodeText.includes("subtitle")
-        };
-      } else {
-        return { targetLink: "", isSuccess: false };
-      }
-    }
-    return query();
-  }
-  async function xhr(siteItem, siteUrl, CODE) {
-    const xhrPromise = new Promise((resolve) => {
-      b({
-        method: "GET",
-        url: siteUrl,
-        onload: (response) => {
-          if (siteItem.fetcher === "get") {
-            if (response.status === 404) {
-              resolve({
-                isSuccess: false,
-                targetLink: siteUrl,
-                name: siteItem.name,
-                msg: "\u5E94\u8BE5\u662F\u6CA1\u6709\u8D44\u6E90"
-              });
-            } else {
-              const { hasSubtitle, hasLeakage, isSuccess } = videoPageParser(
-                response.responseText,
-                siteItem.domQuery
-              );
-              resolve({
-                isSuccess,
-                targetLink: siteUrl,
-                name: siteItem.name,
-                hasSubtitle,
-                hasLeakage,
-                msg: "[get]\uFF0C\u5B58\u5728\u8D44\u6E90"
-              });
-            }
-          } else if (siteItem.fetcher === "parser") {
-            const { targetLink, isSuccess, hasLeakage, hasSubtitle } = serachPageParser(
-              response.responseText,
-              siteItem.domQuery,
-              siteItem.hostname,
-              CODE
-            );
-            resolve({
-              name: siteItem.name,
-              isSuccess,
-              targetLink: isSuccess ? targetLink : siteUrl,
-              hasSubtitle,
-              hasLeakage,
-              msg: "[parser]\u5B58\u5728\u8D44\u6E90"
-            });
-          }
-        },
-        onerror: (error) => {
-          resolve({
-            isSuccess: false,
-            targetLink: siteUrl,
-            name: siteItem.name,
-            msg: error.error
-          });
-        }
-      });
+  const Info = ({
+    info
+  }) => {
+    console.log(info);
+    return o("div", {
+      children: [o("a", {
+        href: info.codeLink,
+        children: ["\u756A\u53F7:", info.codeText]
+      }), o("a", {
+        href: info.actorLink,
+        children: ["\u6F14\u5458:", info.actorText]
+      })]
    });
-    return xhrPromise;
-  }
-  const style = "";
-  function getCode(cmsName) {
-    var _a2, _b2, _c;
-    if (cmsName === "javdb") {
-      return (_a2 = document.querySelector(`[data-clipboard-text]`)) == null ? void 0 : _a2.dataset.clipboardText;
-    } else if (cmsName === "javbus") {
-      return (_b2 = document.querySelector(`span[style="color:#CC0000;"]`)) == null ? void 0 : _b2.innerText.replace("\u590D\u5236", "");
-    } else {
-      return (_c = document.querySelector(`#video_id td.text`)) == null ? void 0 : _c.innerHTML;
-    }
-  }
-  async function main() {
+  };
+  const Panel = function({
+    cms,
+    info
+  }) {
+    siteList.filter((item) => item.disable !== cms.name);
+    const [showPanel, setShowPanel] = y(true);
+    return o(preact2.Fragment, {
+      children: [o("div", {
+        style: {
+          position: "absolute",
+          zIndex: 11
+        },
+        onClick: () => setShowPanel(!showPanel),
+        children: "\u5173\u6389"
+      }), showPanel && o("div", {
+        className: "jop-panel",
+        children: o(Info, {
+          info
+        })
+      })]
+    });
+  };
+  function main() {
    const cms = matchList.find((item) => item.hostname === window.location.hostname);
-    const CODE = getCode(cms.name);
+    const info = getInfo(cms.name);
+    const CODE = info.codeText;
    if (CODE === void 0)
      return;
-    const panel = createPanel();
-    const envSiteList = siteList.filter((item) => item.disable !== cms.name);
-    envSiteList.forEach(async (siteItem) => {
-      const siteUrl = siteItem.url.replace("{{code}}", CODE);
-      const { setButtonStatus } = createButtonNode(panel, siteItem.name, siteUrl);
-      const { isSuccess, hasLeakage, hasSubtitle, targetLink } = await xhr(siteItem, siteUrl, CODE);
-      setButtonStatus(targetLink, isSuccess ? "green" : "red", hasLeakage, hasSubtitle);
-    });
+    const panelParent = document.querySelector(cms.panelParentQueryStr);
+    panelParent == null ? void 0 : panelParent.classList.add("jop-panelParent");
+    panelParent && preact2.render(o(Panel, {
+      cms,
+      info
+    }), panelParent);
  }
  main();
-  exports.main = main;
-  Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
-  return exports;
-}({});
+})(preact);
--- a/package.json
+++ b/package.json
@@ -7,7 +7,11 @@
    "dev": "vite",
    "build": "tsc && vite build"
  },
+  "dependencies": {
+    "preact": "10.11.0"
+  },
  "devDependencies": {
+    "@preact/preset-vite": "^2.4.0",
    "typescript": "^4.8.4",
    "vite": "^3.1.4",
    "vite-plugin-monkey": "^2.5.1"
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -1,17 +1,267 @@
 lockfileVersion: 5.4

 specifiers:
+  '@preact/preset-vite': ^2.4.0
+  preact: 10.11.0
  typescript: ^4.8.4
  vite: ^3.1.4
  vite-plugin-monkey: ^2.5.1

+dependencies:
+  preact: 10.11.0
+
 devDependencies:
+  '@preact/preset-vite': 2.4.0_preact@10.11.0+vite@3.1.4
  typescript: 4.8.4
  vite: 3.1.4
  vite-plugin-monkey: 2.5.1_vite@3.1.4

 packages:

+  /@ampproject/remapping/2.2.0:
+    resolution: {integrity: sha512-qRmjj8nj9qmLTQXXmaR1cck3UXSRMPrbsLJAasZpF+t3riI71BXed5ebIOYwQntykeZuhjsdweEc9BxH5Jc26w==}
+    engines: {node: '>=6.0.0'}
+    dependencies:
+      '@jridgewell/gen-mapping': 0.1.1
+      '@jridgewell/trace-mapping': 0.3.15
+    dev: true
+
+  /@babel/code-frame/7.18.6:
+    resolution: {integrity: sha512-TDCmlK5eOvH+eH7cdAFlNXeVJqWIQ7gW9tY1GJIpUtFb6CmjVyq2VM3u71bOyR8CRihcCgMUYoDNyLXao3+70Q==}
+    engines: {node: '>=6.9.0'}
+    dependencies:
+      '@babel/highlight': 7.18.6
+    dev: true
+
+  /@babel/compat-data/7.19.3:
+    resolution: {integrity: sha512-prBHMK4JYYK+wDjJF1q99KK4JLL+egWS4nmNqdlMUgCExMZ+iZW0hGhyC3VEbsPjvaN0TBhW//VIFwBrk8sEiw==}
+    engines: {node: '>=6.9.0'}
+    dev: true
+
+  /@babel/core/7.19.3:
+    resolution: {integrity: sha512-WneDJxdsjEvyKtXKsaBGbDeiyOjR5vYq4HcShxnIbG0qixpoHjI3MqeZM9NDvsojNCEBItQE4juOo/bU6e72gQ==}
+    engines: {node: '>=6.9.0'}
+    dependencies:
+      '@ampproject/remapping': 2.2.0
+      '@babel/code-frame': 7.18.6
+      '@babel/generator': 7.19.3
+      '@babel/helper-compilation-targets': 7.19.3_@babel+core@7.19.3
+      '@babel/helper-module-transforms': 7.19.0
+      '@babel/helpers': 7.19.0
+      '@babel/parser': 7.19.3
+      '@babel/template': 7.18.10
+      '@babel/traverse': 7.19.3
+      '@babel/types': 7.19.3
+      convert-source-map: 1.8.0
+      debug: 4.3.4
+      gensync: 1.0.0-beta.2
+      json5: 2.2.1
+      semver: 6.3.0
+    transitivePeerDependencies:
+      - supports-color
+    dev: true
+
+  /@babel/generator/7.19.3:
+    resolution: {integrity: sha512-fqVZnmp1ncvZU757UzDheKZpfPgatqY59XtW2/j/18H7u76akb8xqvjw82f+i2UKd/ksYsSick/BCLQUUtJ/qQ==}
+    engines: {node: '>=6.9.0'}
+    dependencies:
+      '@babel/types': 7.19.3
+      '@jridgewell/gen-mapping': 0.3.2
+      jsesc: 2.5.2
+    dev: true
+
+  /@babel/helper-annotate-as-pure/7.18.6:
+    resolution: {integrity: sha512-duORpUiYrEpzKIop6iNbjnwKLAKnJ47csTyRACyEmWj0QdUrm5aqNJGHSSEQSUAvNW0ojX0dOmK9dZduvkfeXA==}
+    engines: {node: '>=6.9.0'}
+    dependencies:
+      '@babel/types': 7.19.3
+    dev: true
+
+  /@babel/helper-compilation-targets/7.19.3_@babel+core@7.19.3:
+    resolution: {integrity: sha512-65ESqLGyGmLvgR0mst5AdW1FkNlj9rQsCKduzEoEPhBCDFGXvz2jW6bXFG6i0/MrV2s7hhXjjb2yAzcPuQlLwg==}
+    engines: {node: '>=6.9.0'}
+    peerDependencies:
+      '@babel/core': ^7.0.0
+    dependencies:
+      '@babel/compat-data': 7.19.3
+      '@babel/core': 7.19.3
+      '@babel/helper-validator-option': 7.18.6
+      browserslist: 4.21.4
+      semver: 6.3.0
+    dev: true
+
+  /@babel/helper-environment-visitor/7.18.9:
+    resolution: {integrity: sha512-3r/aACDJ3fhQ/EVgFy0hpj8oHyHpQc+LPtJoY9SzTThAsStm4Ptegq92vqKoE3vD706ZVFWITnMnxucw+S9Ipg==}
+    engines: {node: '>=6.9.0'}
+    dev: true
+
+  /@babel/helper-function-name/7.19.0:
+    resolution: {integrity: sha512-WAwHBINyrpqywkUH0nTnNgI5ina5TFn85HKS0pbPDfxFfhyR/aNQEn4hGi1P1JyT//I0t4OgXUlofzWILRvS5w==}
+    engines: {node: '>=6.9.0'}
+    dependencies:
+      '@babel/template': 7.18.10
+      '@babel/types': 7.19.3
+    dev: true
+
+  /@babel/helper-hoist-variables/7.18.6:
+    resolution: {integrity: sha512-UlJQPkFqFULIcyW5sbzgbkxn2FKRgwWiRexcuaR8RNJRy8+LLveqPjwZV/bwrLZCN0eUHD/x8D0heK1ozuoo6Q==}
+    engines: {node: '>=6.9.0'}
+    dependencies:
+      '@babel/types': 7.19.3
+    dev: true
+
+  /@babel/helper-module-imports/7.18.6:
+    resolution: {integrity: sha512-0NFvs3VkuSYbFi1x2Vd6tKrywq+z/cLeYC/RJNFrIX/30Bf5aiGYbtvGXolEktzJH8o5E5KJ3tT+nkxuuZFVlA==}
+    engines: {node: '>=6.9.0'}
+    dependencies:
+      '@babel/types': 7.19.3
+    dev: true
+
+  /@babel/helper-module-transforms/7.19.0:
+    resolution: {integrity: sha512-3HBZ377Fe14RbLIA+ac3sY4PTgpxHVkFrESaWhoI5PuyXPBBX8+C34qblV9G89ZtycGJCmCI/Ut+VUDK4bltNQ==}
+    engines: {node: '>=6.9.0'}
+    dependencies:
+      '@babel/helper-environment-visitor': 7.18.9
+      '@babel/helper-module-imports': 7.18.6
+      '@babel/helper-simple-access': 7.18.6
+      '@babel/helper-split-export-declaration': 7.18.6
+      '@babel/helper-validator-identifier': 7.19.1
+      '@babel/template': 7.18.10
+      '@babel/traverse': 7.19.3
+      '@babel/types': 7.19.3
+    transitivePeerDependencies:
+      - supports-color
+    dev: true
+
+  /@babel/helper-plugin-utils/7.19.0:
+    resolution: {integrity: sha512-40Ryx7I8mT+0gaNxm8JGTZFUITNqdLAgdg0hXzeVZxVD6nFsdhQvip6v8dqkRHzsz1VFpFAaOCHNn0vKBL7Czw==}
+    engines: {node: '>=6.9.0'}
+    dev: true
+
+  /@babel/helper-simple-access/7.18.6:
+    resolution: {integrity: sha512-iNpIgTgyAvDQpDj76POqg+YEt8fPxx3yaNBg3S30dxNKm2SWfYhD0TGrK/Eu9wHpUW63VQU894TsTg+GLbUa1g==}
+    engines: {node: '>=6.9.0'}
+    dependencies:
+      '@babel/types': 7.19.3
+    dev: true
+
+  /@babel/helper-split-export-declaration/7.18.6:
+    resolution: {integrity: sha512-bde1etTx6ZyTmobl9LLMMQsaizFVZrquTEHOqKeQESMKo4PlObf+8+JA25ZsIpZhT/WEd39+vOdLXAFG/nELpA==}
+    engines: {node: '>=6.9.0'}
+    dependencies:
+      '@babel/types': 7.19.3
+    dev: true
+
+  /@babel/helper-string-parser/7.18.10:
+    resolution: {integrity: sha512-XtIfWmeNY3i4t7t4D2t02q50HvqHybPqW2ki1kosnvWCwuCMeo81Jf0gwr85jy/neUdg5XDdeFE/80DXiO+njw==}
+    engines: {node: '>=6.9.0'}
+    dev: true
+
+  /@babel/helper-validator-identifier/7.19.1:
+    resolution: {integrity: sha512-awrNfaMtnHUr653GgGEs++LlAvW6w+DcPrOliSMXWCKo597CwL5Acf/wWdNkf/tfEQE3mjkeD1YOVZOUV/od1w==}
+    engines: {node: '>=6.9.0'}
+    dev: true
+
+  /@babel/helper-validator-option/7.18.6:
+    resolution: {integrity: sha512-XO7gESt5ouv/LRJdrVjkShckw6STTaB7l9BrpBaAHDeF5YZT+01PCwmR0SJHnkW6i8OwW/EVWRShfi4j2x+KQw==}
+    engines: {node: '>=6.9.0'}
+    dev: true
+
+  /@babel/helpers/7.19.0:
+    resolution: {integrity: sha512-DRBCKGwIEdqY3+rPJgG/dKfQy9+08rHIAJx8q2p+HSWP87s2HCrQmaAMMyMll2kIXKCW0cO1RdQskx15Xakftg==}
+    engines: {node: '>=6.9.0'}
+    dependencies:
+      '@babel/template': 7.18.10
+      '@babel/traverse': 7.19.3
+      '@babel/types': 7.19.3
+    transitivePeerDependencies:
+      - supports-color
+    dev: true
+
+  /@babel/highlight/7.18.6:
+    resolution: {integrity: sha512-u7stbOuYjaPezCuLj29hNW1v64M2Md2qupEKP1fHc7WdOA3DgLh37suiSrZYY7haUB7iBeQZ9P1uiRF359do3g==}
+    engines: {node: '>=6.9.0'}
+    dependencies:
+      '@babel/helper-validator-identifier': 7.19.1
+      chalk: 2.4.2
+      js-tokens: 4.0.0
+    dev: true
+
+  /@babel/parser/7.19.3:
+    resolution: {integrity: sha512-pJ9xOlNWHiy9+FuFP09DEAFbAn4JskgRsVcc169w2xRBC3FRGuQEwjeIMMND9L2zc0iEhO/tGv4Zq+km+hxNpQ==}
+    engines: {node: '>=6.0.0'}
+    hasBin: true
+    dependencies:
+      '@babel/types': 7.19.3
+    dev: true
+
+  /@babel/plugin-syntax-jsx/7.18.6:
+    resolution: {integrity: sha512-6mmljtAedFGTWu2p/8WIORGwy+61PLgOMPOdazc7YoJ9ZCWUyFy3A6CpPkRKLKD1ToAesxX8KGEViAiLo9N+7Q==}
+    engines: {node: '>=6.9.0'}
+    peerDependencies:
+      '@babel/core': ^7.0.0-0
+    dependencies:
+      '@babel/helper-plugin-utils': 7.19.0
+    dev: true
+
+  /@babel/plugin-transform-react-jsx-development/7.18.6:
+    resolution: {integrity: sha512-SA6HEjwYFKF7WDjWcMcMGUimmw/nhNRDWxr+KaLSCrkD/LMDBvWRmHAYgE1HDeF8KUuI8OAu+RT6EOtKxSW2qA==}
+    engines: {node: '>=6.9.0'}
+    peerDependencies:
+      '@babel/core': ^7.0.0-0
+    dependencies:
+      '@babel/plugin-transform-react-jsx': 7.19.0
+    dev: true
+
+  /@babel/plugin-transform-react-jsx/7.19.0:
+    resolution: {integrity: sha512-UVEvX3tXie3Szm3emi1+G63jyw1w5IcMY0FSKM+CRnKRI5Mr1YbCNgsSTwoTwKphQEG9P+QqmuRFneJPZuHNhg==}
+    engines: {node: '>=6.9.0'}
+    peerDependencies:
+      '@babel/core': ^7.0.0-0
+    dependencies:
+      '@babel/helper-annotate-as-pure': 7.18.6
+      '@babel/helper-module-imports': 7.18.6
+      '@babel/helper-plugin-utils': 7.19.0
+      '@babel/plugin-syntax-jsx': 7.18.6
+      '@babel/types': 7.19.3
+    dev: true
+
+  /@babel/template/7.18.10:
+    resolution: {integrity: sha512-TI+rCtooWHr3QJ27kJxfjutghu44DLnasDMwpDqCXVTal9RLp3RSYNh4NdBrRP2cQAoG9A8juOQl6P6oZG4JxA==}
+    engines: {node: '>=6.9.0'}
+    dependencies:
+      '@babel/code-frame': 7.18.6
+      '@babel/parser': 7.19.3
+      '@babel/types': 7.19.3
+    dev: true
+
+  /@babel/traverse/7.19.3:
+    resolution: {integrity: sha512-qh5yf6149zhq2sgIXmwjnsvmnNQC2iw70UFjp4olxucKrWd/dvlUsBI88VSLUsnMNF7/vnOiA+nk1+yLoCqROQ==}
+    engines: {node: '>=6.9.0'}
+    dependencies:
+      '@babel/code-frame': 7.18.6
+      '@babel/generator': 7.19.3
+      '@babel/helper-environment-visitor': 7.18.9
+      '@babel/helper-function-name': 7.19.0
+      '@babel/helper-hoist-variables': 7.18.6
+      '@babel/helper-split-export-declaration': 7.18.6
+      '@babel/parser': 7.19.3
+      '@babel/types': 7.19.3
+      debug: 4.3.4
+      globals: 11.12.0
+    transitivePeerDependencies:
+      - supports-color
+    dev: true
+
+  /@babel/types/7.19.3:
+    resolution: {integrity: sha512-hGCaQzIY22DJlDh9CH7NOxgKkFjBk0Cw9xDO1Xmh2151ti7wiGfQ3LauXzL4HP1fmFlTX6XjpRETTpUcv7wQLw==}
+    engines: {node: '>=6.9.0'}
+    dependencies:
+      '@babel/helper-string-parser': 7.18.10
+      '@babel/helper-validator-identifier': 7.19.1
+      to-fast-properties: 2.0.0
+    dev: true
+
  /@esbuild/android-arm/0.15.10:
    resolution: {integrity: sha512-FNONeQPy/ox+5NBkcSbYJxoXj9GWu8gVGJTVmUyoOCKQFDTrHVKgNSzChdNt0I8Aj/iKcsDf2r9BFwv+FSNUXg==}
    engines: {node: '>=12'}
@@ -30,11 +280,163 @@ packages:
    dev: true
    optional: true

+  /@jridgewell/gen-mapping/0.1.1:
+    resolution: {integrity: sha512-sQXCasFk+U8lWYEe66WxRDOE9PjVz4vSM51fTu3Hw+ClTpUSQb718772vH3pyS5pShp6lvQM7SxgIDXXXmOX7w==}
+    engines: {node: '>=6.0.0'}
+    dependencies:
+      '@jridgewell/set-array': 1.1.2
+      '@jridgewell/sourcemap-codec': 1.4.14
+    dev: true
+
+  /@jridgewell/gen-mapping/0.3.2:
+    resolution: {integrity: sha512-mh65xKQAzI6iBcFzwv28KVWSmCkdRBWoOh+bYQGW3+6OZvbbN3TqMGo5hqYxQniRcH9F2VZIoJCm4pa3BPDK/A==}
+    engines: {node: '>=6.0.0'}
+    dependencies:
+      '@jridgewell/set-array': 1.1.2
+      '@jridgewell/sourcemap-codec': 1.4.14
+      '@jridgewell/trace-mapping': 0.3.15
+    dev: true
+
+  /@jridgewell/resolve-uri/3.1.0:
+    resolution: {integrity: sha512-F2msla3tad+Mfht5cJq7LSXcdudKTWCVYUgw6pLFOOHSTtZlj6SWNYAp+AhuqLmWdBO2X5hPrLcu8cVP8fy28w==}
+    engines: {node: '>=6.0.0'}
+    dev: true
+
+  /@jridgewell/set-array/1.1.2:
+    resolution: {integrity: sha512-xnkseuNADM0gt2bs+BvhO0p78Mk762YnZdsuzFV018NoG1Sj1SCQvpSqa7XUaTam5vAGasABV9qXASMKnFMwMw==}
+    engines: {node: '>=6.0.0'}
+    dev: true
+
+  /@jridgewell/sourcemap-codec/1.4.14:
+    resolution: {integrity: sha512-XPSJHWmi394fuUuzDnGz1wiKqWfo1yXecHQMRf2l6hztTO+nPru658AyDngaBe7isIxEkRsPR3FZh+s7iVa4Uw==}
+    dev: true
+
+  /@jridgewell/trace-mapping/0.3.15:
+    resolution: {integrity: sha512-oWZNOULl+UbhsgB51uuZzglikfIKSUBO/M9W2OfEjn7cmqoAiCgmv9lyACTUacZwBz0ITnJ2NqjU8Tx0DHL88g==}
+    dependencies:
+      '@jridgewell/resolve-uri': 3.1.0
+      '@jridgewell/sourcemap-codec': 1.4.14
+    dev: true
+
+  /@preact/preset-vite/2.4.0_preact@10.11.0+vite@3.1.4:
+    resolution: {integrity: sha512-EiUMHuiCThuTuK+eH2r5uDg+CJbbt4aWJGePuszrHuXUpRv6WAeO4S+/DTJsEHtPtGmPRR3cLQ68N5097eOSRA==}
+    peerDependencies:
+      '@babel/core': 7.x
+      vite: 2.x || 3.x
+    dependencies:
+      '@babel/plugin-transform-react-jsx': 7.19.0
+      '@babel/plugin-transform-react-jsx-development': 7.18.6
+      '@prefresh/vite': 2.2.8_preact@10.11.0+vite@3.1.4
+      '@rollup/pluginutils': 4.2.1
+      babel-plugin-transform-hook-names: 1.0.2
+      debug: 4.3.4
+      kolorist: 1.6.0
+      resolve: 1.22.1
+      vite: 3.1.4
+    transitivePeerDependencies:
+      - preact
+      - supports-color
+    dev: true
+
+  /@prefresh/babel-plugin/0.4.3:
+    resolution: {integrity: sha512-fYAWbU1WDSLn108kKY4eDaaeUcnszFqXjgaGKYXNZ5NLulpRTpsrY+Sbfo9q8LDpWrBpqIgzjrwNnvglWI1xNQ==}
+    dev: true
+
+  /@prefresh/core/1.4.1_preact@10.11.0:
+    resolution: {integrity: sha512-og1vaBj3LMJagVncNrDb37Gqc0cWaUcDbpVt5hZtsN4i2Iwzd/5hyTsDHvlMirhSym3wL9ihU0Xa2VhSaOue7g==}
+    peerDependencies:
+      preact: ^10.0.0
+    dependencies:
+      preact: 10.11.0
+    dev: true
+
+  /@prefresh/utils/1.1.3:
+    resolution: {integrity: sha512-Mb9abhJTOV4yCfkXrMrcgFiFT7MfNOw8sDa+XyZBdq/Ai2p4Zyxqsb3EgHLOEdHpMj6J9aiZ54W8H6FTam1u+A==}
+    dev: true
+
+  /@prefresh/vite/2.2.8_preact@10.11.0+vite@3.1.4:
+    resolution: {integrity: sha512-yGGa+PKPYPTzMlxgQ8aBgxw9K69I8X4iQ0E6KOcIvls96WKqKLLOYZW9SUgCve446jpUXvc9udviPBZjCeZIIQ==}
+    peerDependencies:
+      preact: ^10.4.0
+      vite: '>=2.0.0-beta.3'
+    dependencies:
+      '@babel/core': 7.19.3
+      '@prefresh/babel-plugin': 0.4.3
+      '@prefresh/core': 1.4.1_preact@10.11.0
+      '@prefresh/utils': 1.1.3
+      '@rollup/pluginutils': 4.2.1
+      preact: 10.11.0
+      vite: 3.1.4
+    transitivePeerDependencies:
+      - supports-color
+    dev: true
+
+  /@rollup/pluginutils/4.2.1:
+    resolution: {integrity: sha512-iKnFXr7NkdZAIHiIWE+BX5ULi/ucVFYWD6TbAV+rZctiRTY2PL6tsIKhoIOaoskiWAkgu+VsbXgUVDNLHf+InQ==}
+    engines: {node: '>= 8.0.0'}
+    dependencies:
+      estree-walker: 2.0.2
+      picomatch: 2.3.1
+    dev: true
+
  /address/1.2.1:
    resolution: {integrity: sha512-B+6bi5D34+fDYENiH5qOlA0cV2rAGKuWZ9LeyUUehbXy8e0VS9e498yO0Jeeh+iM+6KbfudHTFjXw2MmJD4QRA==}
    engines: {node: '>= 10.0.0'}
    dev: true

+  /ansi-styles/3.2.1:
+    resolution: {integrity: sha512-VT0ZI6kZRdTh8YyJw3SMbYm/u+NqfsAxEpWO0Pf9sq8/e94WxxOpPKx9FR1FlyCtOVDNOQ+8ntlqFxiRc+r5qA==}
+    engines: {node: '>=4'}
+    dependencies:
+      color-convert: 1.9.3
+    dev: true
+
+  /babel-plugin-transform-hook-names/1.0.2:
+    resolution: {integrity: sha512-5gafyjyyBTTdX/tQQ0hRgu4AhNHG/hqWi0ZZmg2xvs2FgRkJXzDNKBZCyoYqgFkovfDrgM8OoKg8karoUvWeCw==}
+    peerDependencies:
+      '@babel/core': ^7.12.10
+    dev: true
+
+  /browserslist/4.21.4:
+    resolution: {integrity: sha512-CBHJJdDmgjl3daYjN5Cp5kbTf1mUhZoS+beLklHIvkOWscs83YAhLlF3Wsh/lciQYAcbBJgTOD44VtG31ZM4Hw==}
+    engines: {node: ^6 || ^7 || ^8 || ^9 || ^10 || ^11 || ^12 || >=13.7}
+    hasBin: true
+    dependencies:
+      caniuse-lite: 1.0.30001414
+      electron-to-chromium: 1.4.270
+      node-releases: 2.0.6
+      update-browserslist-db: 1.0.9_browserslist@4.21.4
+    dev: true
+
+  /caniuse-lite/1.0.30001414:
+    resolution: {integrity: sha512-t55jfSaWjCdocnFdKQoO+d2ct9C59UZg4dY3OnUlSZ447r8pUtIKdp0hpAzrGFultmTC+Us+KpKi4GZl/LXlFg==}
+    dev: true
+
+  /chalk/2.4.2:
+    resolution: {integrity: sha512-Mti+f9lpJNcwF4tWV8/OrTTtF1gZi+f8FqlyAdouralcFWFQWF2+NgCHShjkCb+IFBLq9buZwE1xckQU4peSuQ==}
+    engines: {node: '>=4'}
+    dependencies:
+      ansi-styles: 3.2.1
+      escape-string-regexp: 1.0.5
+      supports-color: 5.5.0
+    dev: true
+
+  /color-convert/1.9.3:
+    resolution: {integrity: sha512-QfAUtd+vFdAtFQcC8CCyYt1fYWxSqAiK2cSD6zDB8N3cpsEBAvRxp9zOGg6G/SHHJYAT88/az/IuDGALsNVbGg==}
+    dependencies:
+      color-name: 1.1.3
+    dev: true
+
+  /color-name/1.1.3:
+    resolution: {integrity: sha512-72fSenhMw2HZMTVHeCA9KCmpEIbzWiQsjN+BHcBbS9vr1mtt+vJjPdksIBNUmKAW8TFUDPJK5SUU3QhE9NEXDw==}
+    dev: true
+
+  /convert-source-map/1.8.0:
+    resolution: {integrity: sha512-+OQdjP49zViI/6i7nIJpA8rAl4sV/JdPfU9nZs3VqOwGIgizICvuN2ru6fMd+4llL0tar18UYJXfZ/TWtmhUjA==}
+    dependencies:
+      safe-buffer: 5.1.2
+    dev: true
+
  /cross-spawn/7.0.3:
    resolution: {integrity: sha512-iRDPJKUPVEND7dHPO8rkbOnPpyDygcDFtWjpeWNCgy8WP2rXcxXL8TskReQl6OrB2G7+UJrags1q15Fudc7G6w==}
    engines: {node: '>= 8'}
@@ -55,6 +457,18 @@ packages:
      ms: 2.0.0
    dev: true

+  /debug/4.3.4:
+    resolution: {integrity: sha512-PRWFHuSU3eDtQJPvnNY7Jcket1j0t5OuOsFzPPzsekD52Zl8qUfFIPEiswXqIvHWGVHOgX+7G/vCNNhehwxfkQ==}
+    engines: {node: '>=6.0'}
+    peerDependencies:
+      supports-color: '*'
+    peerDependenciesMeta:
+      supports-color:
+        optional: true
+    dependencies:
+      ms: 2.1.2
+    dev: true
+
  /define-lazy-prop/2.0.0:
    resolution: {integrity: sha512-Ds09qNh8yw3khSjiJjiUInaGX9xlqZDY7JVryGxdxV7NPeuqQfplOpQ66yJFZut3jLa5zOwkXw1g9EI2uKh4Og==}
    engines: {node: '>=8'}
@@ -98,6 +512,10 @@ packages:
      domhandler: 5.0.3
    dev: true

+  /electron-to-chromium/1.4.270:
+    resolution: {integrity: sha512-KNhIzgLiJmDDC444dj9vEOpZEgsV96ult9Iff98Vanumn+ShJHd5se8aX6KeVxdc0YQeqdrezBZv89rleDbvSg==}
+    dev: true
+
  /entities/4.4.0:
    resolution: {integrity: sha512-oYp7156SP8LkeGD0GF85ad1X9Ai79WtRsZ2gxJqtBuzH+98YUV6jkHEKlZkMbcrjJjIVJNIDP/3WL9wQkoPbWA==}
    engines: {node: '>=0.12'}
@@ -313,6 +731,20 @@ packages:
      esbuild-windows-arm64: 0.15.10
    dev: true

+  /escalade/3.1.1:
+    resolution: {integrity: sha512-k0er2gUkLf8O0zKJiAhmkTnJlTvINGv7ygDNPbeIsX/TJjGJZHuh9B2UxbsaEkmlEo9MfhrSzmhIlhRlI2GXnw==}
+    engines: {node: '>=6'}
+    dev: true
+
+  /escape-string-regexp/1.0.5:
+    resolution: {integrity: sha512-vbRorB5FUQWvla16U8R/qgaFIya2qGzwDrNmCZuYKrbdSUMG6I1ZCGQRefkRVhuOkIGVne7BQ35DSfo1qvJqFg==}
+    engines: {node: '>=0.8.0'}
+    dev: true
+
+  /estree-walker/2.0.2:
+    resolution: {integrity: sha512-Rfkk/Mp/DL7JVje3u18FxFujQlTNR2q6QfMSMB7AvCBx91NGj/ba3kCfza0f6dVDbw7YlRf/nDrn7pQrCCyQ/w==}
+    dev: true
+
  /fsevents/2.3.2:
    resolution: {integrity: sha512-xiqMQR4xAeHTuB9uWm+fFRcIOgKBMiOBP+eXiyT7jsgVCq1bkVygt00oASowB7EdtpOHaaPgKt812P9ab+DDKA==}
    engines: {node: ^8.16.0 || ^10.6.0 || >=11.0.0}
@@ -325,6 +757,21 @@ packages:
    resolution: {integrity: sha512-yIovAzMX49sF8Yl58fSCWJ5svSLuaibPxXQJFLmBObTuCr0Mf1KiPopGM9NiFjiYBCbfaa2Fh6breQ6ANVTI0A==}
    dev: true

+  /gensync/1.0.0-beta.2:
+    resolution: {integrity: sha512-3hN7NaskYvMDLQY55gnW3NQ+mesEAepTqlg+VEbj7zzqEMBVNhzcGYYeqFo/TlYz6eQiFcp1HcsCZO+nGgS8zg==}
+    engines: {node: '>=6.9.0'}
+    dev: true
+
+  /globals/11.12.0:
+    resolution: {integrity: sha512-WOBp/EEGUiIsJSp7wcv/y6MO+lV9UoncWqxuFfm8eBwzWNgyfBd6Gz+IeKQ9jCmyhoH99g15M3T+QaVHFjizVA==}
+    engines: {node: '>=4'}
+    dev: true
+
+  /has-flag/3.0.0:
+    resolution: {integrity: sha512-sKJf1+ceQBr4SMkvQnBDNDtf4TXpVhVGateu0t918bl30FnbE2m4vNLX+VWe/dpjlb+HugGYzW7uQXH98HPEYw==}
+    engines: {node: '>=4'}
+    dev: true
+
  /has/1.0.3:
    resolution: {integrity: sha512-f2dvO0VU6Oej7RkWJGrehjbzMAjFp5/VKPp5tTpWIV4JHHZK1/BxbFRtf/siA2SWTe09caDmVtYYzWEIbBS4zw==}
    engines: {node: '>= 0.4.0'}
@@ -364,6 +811,26 @@ packages:
    resolution: {integrity: sha512-RHxMLp9lnKHGHRng9QFhRCMbYAcVpn69smSGcq3f36xjgVVWThj4qqLbTLlq7Ssj8B+fIQ1EuCEGI2lKsyQeIw==}
    dev: true

+  /js-tokens/4.0.0:
+    resolution: {integrity: sha512-RdJUflcE3cUzKiMqQgsCu06FPu9UdIJO0beYbPhHN4k6apgJtifcoCtT9bcxOpYBtpD2kCM6Sbzg4CausW/PKQ==}
+    dev: true
+
+  /jsesc/2.5.2:
+    resolution: {integrity: sha512-OYu7XEzjkCQ3C5Ps3QIZsQfNpqoJyZZA99wd9aWd05NCtC5pWOkShK2mkL6HXQR6/Cy2lbNdPlZBpuQHXE63gA==}
+    engines: {node: '>=4'}
+    hasBin: true
+    dev: true
+
+  /json5/2.2.1:
+    resolution: {integrity: sha512-1hqLFMSrGHRHxav9q9gNjJ5EXznIxGVO09xQRrwplcS8qs28pZ8s8hupZAmqDwZUmVZ2Qb2jnyPOWcDH8m8dlA==}
+    engines: {node: '>=6'}
+    hasBin: true
+    dev: true
+
+  /kolorist/1.6.0:
+    resolution: {integrity: sha512-dLkz37Ab97HWMx9KTes3Tbi3D1ln9fCAy2zr2YVExJasDRPGRaKcoE4fycWNtnCAJfjFqe0cnY+f8KT2JePEXQ==}
+    dev: true
+
  /mrmime/1.0.1:
    resolution: {integrity: sha512-hzzEagAgDyoU1Q6yg5uI+AorQgdvMCur3FcKf7NhMKWsaYg+RnbTyHRa/9IlLF9rf455MOCtcqqrQQ83pPP7Uw==}
    engines: {node: '>=10'}
@@ -373,6 +840,10 @@ packages:
    resolution: {integrity: sha512-Tpp60P6IUJDTuOq/5Z8cdskzJujfwqfOTkrwIwj7IRISpnkJnT6SyJ4PCPnGMoFjC9ddhal5KVIYtAt97ix05A==}
    dev: true

+  /ms/2.1.2:
+    resolution: {integrity: sha512-sGkPx+VjMtmA6MX27oA4FBFELFCZZ4S4XqeGOXCv68tT+jb3vk/RyaKWP0PTKyWtmLSM0b+adUTEvbs1PEaH2w==}
+    dev: true
+
  /nanoid/3.3.4:
    resolution: {integrity: sha512-MqBkQh/OHTS2egovRtLk45wEyNXwF+cokD+1YPf9u5VfJiRdAiRwB2froX5Co9Rh20xs4siNPm8naNotSD6RBw==}
    engines: {node: ^10 || ^12 || ^13.7 || ^14 || >=15.0.1}
@@ -391,6 +862,10 @@ packages:
      whatwg-url: 5.0.0
    dev: true

+  /node-releases/2.0.6:
+    resolution: {integrity: sha512-PiVXnNuFm5+iYkLBNeq5211hvO38y63T0i2KKh2KnUs3RpzJ+JtODFjkD8yjLwnDkTYF1eKXheUwdssR+NRZdg==}
+    dev: true
+
  /open/8.4.0:
    resolution: {integrity: sha512-XgFPPM+B28FtCCgSb9I+s9szOC1vZRSwgWsRUA5ylIxRTgKozqjOCrVOqGsYABPYK5qnfqClxZTFBa8PKt2v6Q==}
    engines: {node: '>=12'}
@@ -413,6 +888,11 @@ packages:
    resolution: {integrity: sha512-1fygroTLlHu66zi26VoTDv8yRgm0Fccecssto+MhsZ0D/DGW2sm8E8AjW7NU5VVTRt5GxbeZ5qBuJr+HyLYkjQ==}
    dev: true

+  /picomatch/2.3.1:
+    resolution: {integrity: sha512-JU3teHTNjmE2VCGFzuY8EXzCDVwEqB2a8fsIvwaStHhAWJEeVd1o1QD80CU6+ZdEXXSLbSsuLwJjkCBWqRQUVA==}
+    engines: {node: '>=8.6'}
+    dev: true
+
  /postcss/8.4.17:
    resolution: {integrity: sha512-UNxNOLQydcOFi41yHNMcKRZ39NeXlr8AxGuZJsdub8vIb12fHzcq37DTU/QtbI6WLxNg2gF9Z+8qtRwTj1UI1Q==}
    engines: {node: ^10 || ^12 || >=14}
@@ -422,6 +902,9 @@ packages:
      source-map-js: 1.0.2
    dev: true

+  /preact/10.11.0:
+    resolution: {integrity: sha512-Fk6+vB2kb6mSJfDgODq0YDhMfl0HNtK5+Uc9QqECO4nlyPAQwCI+BKyWO//idA7ikV7o+0Fm6LQmNuQi1wXI1w==}
+
  /resolve/1.22.1:
    resolution: {integrity: sha512-nBpuuYuY5jFsli/JIs1oldw6fOQCBioohqWZg/2hiaOybXOft4lonv85uDOKXdf8rhyK159cxU5cDcK/NKk8zw==}
    hasBin: true
@@ -439,6 +922,15 @@ packages:
      fsevents: 2.3.2
    dev: true

+  /safe-buffer/5.1.2:
+    resolution: {integrity: sha512-Gd2UZBJDkXlY7GbJxfsE8/nvKkUEU1G38c1siN6QP6a9PT9MmHB8GnpscSmMJSoF8LOIrt8ud/wPtojys4G6+g==}
+    dev: true
+
+  /semver/6.3.0:
+    resolution: {integrity: sha512-b39TBaTSfV6yBrapU89p5fKekE2m/NwnDocOVruQFS1/veMgdzuPcnOM34M6CwxW8jH/lxEa5rBoDeUwu5HHTw==}
+    hasBin: true
+    dev: true
+
  /shebang-command/2.0.0:
    resolution: {integrity: sha512-kHxr2zZpYtdmrN1qDjrrX/Z1rR1kG8Dx+gkpK1G4eXmvXswmcE1hTWBWYUzlraYw1/yZp6YuDY77YtvbN0dmDA==}
    engines: {node: '>=8'}
@@ -456,11 +948,23 @@ packages:
    engines: {node: '>=0.10.0'}
    dev: true

+  /supports-color/5.5.0:
+    resolution: {integrity: sha512-QjVjwdXIt408MIiAqCX4oUKsgU2EqAGzs2Ppkm4aQYbjm+ZEWEcW4SfFNTr4uMNZma0ey4f5lgLrkB0aX0QMow==}
+    engines: {node: '>=4'}
+    dependencies:
+      has-flag: 3.0.0
+    dev: true
+
  /supports-preserve-symlinks-flag/1.0.0:
    resolution: {integrity: sha512-ot0WnXS9fgdkgIcePe6RHNk1WA8+muPa6cSjeR3V8K27q9BB1rTE3R1p7Hv0z1ZyAc8s6Vvv8DIyWf681MAt0w==}
    engines: {node: '>= 0.4'}
    dev: true

+  /to-fast-properties/2.0.0:
+    resolution: {integrity: sha512-/OaKK0xYrs3DmxRYqL/yDc+FxFUVYhDlXMhRmv3z915w2HF1tnN1omB354j8VUGO/hbRzyD6Y3sA7v7GS/ceog==}
+    engines: {node: '>=4'}
+    dev: true
+
  /tr46/0.0.3:
    resolution: {integrity: sha512-N3WMsuqV66lT30CrXNbEjx4GEwlow3v6rr4mCcv6prnfwhS01rkgyFdjPNBYd9br7LpXV1+Emh01fHnq2Gdgrw==}
    dev: true
@@ -471,6 +975,17 @@ packages:
    hasBin: true
    dev: true

+  /update-browserslist-db/1.0.9_browserslist@4.21.4:
+    resolution: {integrity: sha512-/xsqn21EGVdXI3EXSum1Yckj3ZVZugqyOZQ/CxYPBD/R+ko9NSUScf8tFF4dOKY+2pvSSJA/S+5B8s4Zr4kyvg==}
+    hasBin: true
+    peerDependencies:
+      browserslist: '>= 4.21.0'
+    dependencies:
+      browserslist: 4.21.4
+      escalade: 3.1.1
+      picocolors: 1.0.0
+    dev: true
+
  /vite-plugin-monkey/2.5.1_vite@3.1.4:
    resolution: {integrity: sha512-18eKt5++5eRF7rn2nXm7GjHECxSvBh36OiYnYR2vpRYIw+052fEAg7XvAAGCY1H3jb+1ox6ZOkmMvTPNubRaQg==}
    engines: {node: ^14.18 || >= 16, pnpm: '>=6'}
--- a/src/buckup/index.ts
+++ b/src/buckup/index.ts
@@ -1,31 +1,19 @@
-import { createButtonNode, createPanel } from "./createNode";
-import { matchList } from "./matchList";
-import { siteList } from "./siteList";
-import { xhr } from "./xhr";
+import { createButtonNode, createPanel } from "./utils/createNode";
+import { matchList } from "./utils/matchList";
+import { siteList } from "./utils/siteList";
+import { xhr } from "./utils/xhr";

-import type { Cms } from "./matchList";
+import type { Cms } from "./utils/matchList";

 import "./style.css";

-function getCode(cmsName: Cms["name"]) {
-  if (cmsName === "javdb") {
-    return document.querySelector<HTMLElement>(`[data-clipboard-text]`)?.dataset.clipboardText;
-  } else if (cmsName === "javbus") {
-    return document
-      .querySelector<HTMLElement>(`span[style="color:#CC0000;"]`)
-      ?.innerText.replace("复制", "");
-  } else {
-    return document.querySelector<HTMLElement>(`#video_id td.text`)?.innerHTML;
-  }
-}
-
 export async function main() {
  /** 当前 macth 站点对象 */
  const cms = matchList.find((item) => item.hostname === window.location.hostname) as Cms;
  const CODE = getCode(cms.name);
  if (CODE === undefined) return;

-  const panel = createPanel();
+  const panel = createPanel(cms);

  /** 禁用部分 */
  const envSiteList = siteList.filter((item) => item.disable !== cms.name);
--- a/src/components/Info.tsx
+++ b/src/components/Info.tsx
@@ -0,0 +1,43 @@
+import { useRef } from "preact/hooks";
+
+/** 从原 info panel 抄一点精简的信息 */
+export type Infos = {
+  codeText: string;
+  actorList: {
+    text: string;
+    link: string;
+    // avatart:string
+  }[];
+};
+
+const Info = ({ infos }: { infos: Infos }) => {
+  const codeRef = useRef<HTMLDivElement>(null);
+
+  return (
+    <div className="jop-info">
+      <div
+        className="jop-info-code"
+        ref={codeRef}
+        title="点击复制"
+        onClick={() => codeRef.current && navigator.clipboard.writeText(codeRef.current.innerHTML)}
+      >
+        {infos.codeText}
+      </div>
+
+      <div class="jop-info-actor">
+        <a
+          class="jop-info-actor-item"
+          target="_blank"
+          href={infos.actorList[0].link}
+        >
+          {infos.actorList[0].text}
+        </a>
+        <span className="jop-info-actor-more"> 等</span>
+      </div>
+
+      {/* {info.actorList.map((item, index) => { const length = info.actorList.length; return ( <a href={item.link} style={{ paddingRight: length !== 1 && index !== length - 1 ? 16 : 0 }} > {item.text} </a> ); })} */}
+    </div>
+  );
+};
+
+export default Info;
--- a/src/components/Panel.tsx
+++ b/src/components/Panel.tsx
@@ -0,0 +1,31 @@
+import { useState } from "preact/hooks";
+
+import { Cms } from "../utils/matchList";
+import { siteList } from "../utils/siteList";
+import Info, { Infos } from "./Info";
+
+/** Panel 就是根组件了… */
+const Panel = function ({ cms, infos }: { cms: Cms; infos: Infos }) {
+  /** 禁用部分 */
+  const siteListFil = siteList.filter((item) => item.disable !== cms.name);
+
+  const [showPanel, setShowPanel] = useState(true);
+
+  return (
+    <>
+      <div
+        style={{ position: "absolute", zIndex: 11 }}
+        onClick={() => setShowPanel(!showPanel)}
+      >
+        关掉
+      </div>
+      {showPanel && (
+        <div className="jop-panel">
+          <Info infos={infos} />
+        </div>
+      )}
+    </>
+  );
+};
+
+export default Panel;
--- a/src/main.tsx
+++ b/src/main.tsx
@@ -0,0 +1,34 @@
+import { render } from "preact";
+import { xhr } from "./utils/xhr";
+import { Cms, matchList } from "./utils/matchList";
+import { siteList } from "./utils/siteList";
+import { getInfos } from "./utils/getInfos";
+import { createButtonNode, createPanel } from "./utils/createNode";
+import "./style.css";
+
+import Panel from "./components/Panel";
+
+// !debugger 图片关
+// document.querySelectorAll("img").forEach((item) => (item.style.display = "none"));
+
+function main() {
+  /** 当前 macth 站点对象 */
+  const cms = matchList.find((item) => item.hostname === window.location.hostname) as Cms;
+  cms.method();
+  const infos = getInfos(cms);
+  const CODE = infos.codeText;
+  if (CODE === undefined) return;
+
+  const panelParent = document.querySelector(cms.panelParentQueryStr);
+  panelParent?.classList.add("jop-panelParent");
+  panelParent &&
+    render(
+      <Panel
+        cms={cms}
+        infos={infos}
+      />,
+      panelParent,
+    );
+}
+
+main();
--- a/src/matchList.ts
+++ b/src/matchList.ts
@@ -1,27 +0,0 @@
-export type Cms = {
-  name: string;
-  enable: boolean;
-  hostname: string;
-  panelParentQueryStr: string;
-};
-
-export const matchList: Cms[] = [
-  {
-    name: "javdb",
-    enable: true,
-    hostname: "javdb.com",
-    panelParentQueryStr: "video-meta-panel",
-  },
-  {
-    name: "javbus",
-    enable: true,
-    hostname: "www.javbus.com",
-    panelParentQueryStr: "div.row.movie",
-  },
-  {
-    name: "javlib",
-    enable: true,
-    hostname: "www.javlibrary.com",
-    panelParentQueryStr: "#video_jacket_info",
-  },
-];
--- a/src/preact.d.ts
+++ b/src/preact.d.ts
@@ -0,0 +1 @@
+import JSX = preact.JSX;
--- a/src/style.css
+++ b/src/style.css
@@ -1,21 +1,53 @@
+.jop-panelParent {
+  position: relative;
+}
 .jop-panel {
  box-sizing: border-box;
-  position: fixed;
-  top: 37.5%;
-  right: -305px;
-  width: 330px;
-  height: 400px;
-  padding: 35px 35px 35px 60px;
+  position: absolute;
+  top: 0;
+  /* left: 10px; */
+  right: -3px;
+  width: 100%;
+  height: 100%;
+  z-index: 10;
+  padding: 20px;
  border-radius: 15px 0 0 15px;
  background-color: white;
-  box-shadow: rgb(0 0 0 / 26%) 3px 0px 8px;
+  box-shadow: rgb(0 0 0 / 26%) -3px 0px 8px;
  transition: right 200ms ease-in-out;
+}
+
+.jop-info {
+  color: black;
+  text-align: right;
+  height: 30px;
+}
+.jop-info-code {
+  color: #3272dc;
+  font-size: 30px;
+  cursor: pointer;
+  font-family: system-ui, -apple-system;
+  font-weight: bolder;
+  font-style: italic;
+}
+.jop-info-actor-item {
+  padding: 3px 6px;
+  color: #409eff;
+  background: #ecf5ff;
+  border: 1px solid #d9ecff;
+  border-radius: 4px;
+}
+.jop-info-actor-more {
+  font-size: 0.8em;
+}
+.jop-list {
+  box-sizing: border-box;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 10px 0;
 }
-.jop-panel_open {
+.jop-list_open {
  right: 0;
 }
 .jop-button_leakage::after,
--- a/src/utils/createNode.ts
+++ b/src/utils/createNode.ts
@@ -1,5 +1,9 @@
-export function createPanel() {
-  const parentNode = document.querySelector("body");
+import type { Cms } from "./matchList";
+
+export function createPanel(cms: Cms) {
+  const parentNode = document.querySelector(cms.panelParentQueryStr);
+  // const removeNode =
+  parentNode?.remove();
  const panelNode = document.createElement("div");
  parentNode && parentNode.appendChild(panelNode);
  panelNode.classList.add("jop-panel");
--- a/src/utils/getInfos.ts
+++ b/src/utils/getInfos.ts
@@ -0,0 +1,17 @@
+import { Infos } from "../components/Info";
+import { Cms } from "./matchList";
+
+export function getInfos(cms: Cms): Infos {
+  const codeNode = document.querySelector<HTMLElement>(cms.codeQueryStr) as HTMLElement;
+  const actorNodeList = document.querySelectorAll<HTMLAnchorElement>(cms.actorQueryStr);
+  const actorList = [...actorNodeList].map((item) => {
+    return { text: item.innerHTML, link: item.href };
+  });
+  return {
+    codeText:
+      cms.name === "javdb"
+        ? (codeNode?.dataset.clipboardText as string)
+        : codeNode.innerText.replace("复制", ""),
+    actorList,
+  };
+}
--- a/src/utils/matchList.ts
+++ b/src/utils/matchList.ts
@@ -0,0 +1,47 @@
+/** 当前 macth 站点对象 */
+export type Cms = {
+  name: "javdb" | "javbus" | "javlib";
+  enable: boolean;
+  hostname: string;
+  panelParentQueryStr: string;
+  codeQueryStr: string;
+  actorQueryStr: string;
+  method: () => void;
+};
+export const matchList: Cms[] = [
+  {
+    name: "javdb",
+    enable: true,
+    hostname: "javdb.com",
+    panelParentQueryStr: ".video-meta-panel>.columns.is-desktop>.column:not(.column-video-cover)",
+    codeQueryStr: `span[style="color:#CC0000;"]`,
+    actorQueryStr: `span.value>a[href^="/actors"]`,
+    method() {},
+  },
+  {
+    name: "javbus",
+    enable: true,
+    hostname: "www.javbus.com",
+    panelParentQueryStr: ".movie>div.info",
+    codeQueryStr: `span[style="color:#CC0000;"]`,
+    actorQueryStr: `.genre>a`,
+    method() {
+      // panel 加宽
+      const colmd8 = document.querySelector(".movie>.col-md-9.screencap");
+      colmd8?.classList.remove("col-md-9");
+      colmd8?.classList.add("col-md-8");
+      const colmd4 = document.querySelector(".movie>.col-md-3.info");
+      colmd4?.classList.remove("col-md-3");
+      colmd4?.classList.add("col-md-4");
+    },
+  },
+  {
+    name: "javlib",
+    enable: true,
+    hostname: "www.javlibrary.com",
+    panelParentQueryStr: "#video_jacket_info",
+    codeQueryStr: `#video_id td.text`,
+    actorQueryStr: `.cast>.star>a`,
+    method() {},
+  },
+];
--- a/src/utils/siteList.ts
+++ b/src/utils/siteList.ts
--- a/src/utils/xhr.ts
+++ b/src/utils/xhr.ts
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -2,19 +2,23 @@
  "compilerOptions": {
    "target": "ESNext",
    "useDefineForClassFields": true,
-    "module": "ESNext",
-    "lib": ["ESNext", "DOM"],
-    "moduleResolution": "Node",
+    "lib": ["DOM", "DOM.Iterable", "ESNext"],
+    "allowJs": false,
+    "skipLibCheck": true,
+    "esModuleInterop": false,
+    "allowSyntheticDefaultImports": true,
    "strict": true,
-    "sourceMap": true,
+    "forceConsistentCasingInFileNames": true,
+    "module": "ESNext",
+    "moduleResolution": "Node",
    "resolveJsonModule": true,
    "isolatedModules": true,
-    "esModuleInterop": true,
    "noEmit": true,
-    "noUnusedLocals": true,
-    "noUnusedParameters": true,
-    "noImplicitReturns": true,
-    "skipLibCheck": true
+    "jsx": "preserve",
+    "jsxFactory": "h",
+    "jsxFragmentFactory": "Fragment"
  },
-  "include": ["src"]
+  "include": ["src"],
+  "exclude": ["src/buckup"],
+  "references": [{ "path": "./tsconfig.node.json" }]
 }
--- a/tsconfig.node.json
+++ b/tsconfig.node.json
@@ -0,0 +1,9 @@
+{
+  "compilerOptions": {
+    "composite": true,
+    "module": "ESNext",
+    "moduleResolution": "Node",
+    "allowSyntheticDefaultImports": true
+  },
+  "include": ["vite.config.ts"]
+}
--- a/vite.config.ts
+++ b/vite.config.ts
@@ -1,5 +1,6 @@
 import { defineConfig } from "vite";
-import monkey from "vite-plugin-monkey";
+import monkey, { cdn } from "vite-plugin-monkey";
+import preact from "@preact/preset-vite";
 import type { MonkeyUserScript } from "vite-plugin-monkey";

 const UserscriptConfig: MonkeyUserScript = {
@@ -34,9 +35,16 @@ const UserscriptConfig: MonkeyUserScript = {

 export default defineConfig({
  plugins: [
+    preact(),
    monkey({
-      entry: "src/index.ts",
-      build: { fileName: "jop.user.js" },
+      entry: "src/main.tsx",
+      build: {
+        fileName: "jop.user.js",
+        externalGlobals: {
+          preact: cdn.jsdelivr("preact", "dist/preact.min.js"),
+        },
+      },
+
      userscript: UserscriptConfig,
    }),
  ],