feat: rewrite to solidjs

entrypoints/content/App.tsx

@@ -0,0 +1,15 @@
+import stopImage from "@/assets/stop.png";
+import "./style.css";
+import { Todo } from "@/components/Todo";
+
+function App() {
+  return (
+    <div class="main">
+      <img class="logo" src={stopImage} />
+      <h1 class="message">[go back to your work]</h1>
+      <Todo />
+    </div>
+  );
+}
+
+export default App;

entrypoints/content/index.ts

@@ -1,8 +1,8 @@
 import { ContentScriptContext } from "#imports";
-import App from "./App.vue";
+import App from "./App";
+import { render } from "solid-js/web";
 import { featureEnableBlock } from "@/utils/storage";
-import { createApp } from "vue";
-import { createProxyService } from '@webext-core/proxy-service';
+import { createProxyService } from "@webext-core/proxy-service";
 import { BlockedSite } from "@/utils/types";
 const blockedSitesRepo = createProxyService(BLOCKED_SITES_REPO_KEY);
 
@@ -14,12 +14,16 @@ export default defineContentScript({
     const ui = await defineOverlay(ctx);
     const isBlockEnabled = await featureEnableBlock.getValue();
     const currentDomain = window.location.hostname;
-    const blockedSites = await blockedSitesRepo.getAll()
+    const blockedSites = await blockedSitesRepo.getAll();
 
     function isOnBlockList() {
       return (
         blockedSites.filter(function (blockedSite: BlockedSite) {
-          return (blockedSite.url == currentDomain || "www." + blockedSite.url == currentDomain) && blockedSite.blocked;
+          return (
+            (blockedSite.url == currentDomain ||
+              "www." + blockedSite.url == currentDomain) &&
+            blockedSite.blocked
+          );
         }).length > 0
       );
     }
@@ -44,8 +48,7 @@ function defineOverlay(ctx: ContentScriptContext) {
     position: "overlay",
     zIndex: 9999,
     onMount(container, _shadow, shadowHost) {
-      const app = createApp(App);
-      app.mount(container);
+      const app = render(App, container);
       shadowHost.style.pointerEvents = "none";
       return app;
     },

entrypoints/content/style.css

@@ -1,17 +1,3 @@
-<script lang="ts" setup>
-import stopImage from "~/assets/stop.png";
-import Todo from "@/components/Todo.vue";
-</script>
-
-<template>
-    <div class="main">
-        <img class="logo" :src="stopImage" />
-        <h1 class="message">[go back to your work]</h1>
-        <Todo />
-    </div>
-</template>
-
-<style>
 body {
     margin: 0;
 }
@@ -39,4 +25,3 @@ h1.message,
 img.logo {
     filter: drop-shadow(0 0 1em #ffffff);
 }
-</style>