✨ refactor use vanjs

package.json

@@ -18,7 +18,8 @@
     "plasmo": "^0.82.1",
     "react": "18.2.0",
     "react-dom": "18.2.0",
-    "ts-pattern": "^5.0.5"
+    "ts-pattern": "^5.0.5",
+    "vanjs-core": "^1.0.2"
   },
   "devDependencies": {
     "@plasmohq/prettier-plugin-sort-imports": "4.0.1",

src/content.ts

@@ -1,8 +1,8 @@
-import { BskyClient, BskyLoginParams } from "./lib/bskyClient";
+import { BskyClient, type BskyLoginParams } from "./lib/bskyClient";
 import type { PlasmoCSConfig } from "plasmo"
 import { MESSAGE_NAMES, VIEWER_STATE } from "~lib/constants";
 import "./style.content.css"
-import { initialize, searchBskyUsers } from '~lib/searchAndInsertBskyUsers';
+import { searchBskyUsers } from '~lib/searchAndInsertBskyUsers';
 
 export const config: PlasmoCSConfig = {
   matches: ["https://twitter.com/*", "https://x.com/*"],
@@ -54,7 +54,6 @@ const searchAndShowBskyUsers = async ({
 
 chrome.runtime.onMessage.addListener((message, _, sendResponse) => {
   if (Object.values(MESSAGE_NAMES).includes(message.name)) {
-    initialize()
     searchAndShowBskyUsers({
       identifier: message.body.userId,
       password: message.body.password,
@@ -64,6 +63,7 @@ chrome.runtime.onMessage.addListener((message, _, sendResponse) => {
         sendResponse({ hasError: false })
       })
       .catch((e) => {
+        console.error(e)
         sendResponse({ hasError: true, message: e.toString() })
       });
     return true

src/lib/components/BskyUserCell.ts

@@ -0,0 +1,124 @@
+import type { ProfileView, ViewerState } from "@atproto/api/dist/client/types/app/bsky/actor/defs"
+import van from 'vanjs-core'
+
+const { a, div, p, img, button } = van.tags
+
+export type UserCellBtnLabel = {
+  add: string,
+  remove: string,
+  progressive: string,
+}
+
+const ActionButton = ({ statusKey, profile, btnLabel, addAction, removeAction }: {
+  profile: ProfileView,
+  statusKey: keyof ViewerState,
+  btnLabel: UserCellBtnLabel,
+  addAction: () => Promise<void>,
+  removeAction: () => Promise<void>
+}) => {
+  const label = van.state(`${profile.viewer[statusKey] ? btnLabel.progressive : btnLabel.add} on Bluesky`)
+
+  const isStateOfBeing = van.state(profile.viewer[statusKey])
+  const isProcessing = van.state(false)
+  const isJustApplied = van.state(false)
+
+  const beingClass = van.derive(() => isStateOfBeing.val ? "action-button__being" : "")
+  const processingClass = van.derive(() => isProcessing.val ? "action-button__processing" : "")
+  const justAppliedClass = van.derive(() => isJustApplied.val ? "action-button__just-applied" : "")
+
+  const onClick = async () => {
+    if (isProcessing.val) return
+    isProcessing.val = true
+    label.val = "Processing..."
+
+    if (isStateOfBeing.val) {
+      await removeAction()
+      label.val = `${btnLabel.add} on Bluesky`
+      isStateOfBeing.val = false
+    } else {
+      await addAction()
+      label.val = `${btnLabel.progressive} on Bluesky`
+      isStateOfBeing.val = true
+      isJustApplied.val = true
+    }
+    isProcessing.val = false
+  }
+
+  const onMouseover = () => {
+    if(
+      isProcessing.val ||
+      isJustApplied.val ||
+      !isStateOfBeing.val
+    ) return
+
+    label.val = `${btnLabel.remove} on Bluesky`
+  }
+
+  const onMouseout = () => {
+    if (isJustApplied.val) {
+      isJustApplied.val = false
+    }
+    if(!isStateOfBeing.val) return
+
+    label.val = `${btnLabel.progressive} on Bluesky`
+  }
+
+  return () => button({
+    class: `action-button ${beingClass.val} ${processingClass.val} ${justAppliedClass.val}`,
+    onclick: onClick,
+    onmouseover: onMouseover,
+    onmouseout: onMouseout,
+  },
+    label.val,
+  )
+}
+
+const Avatar = ({ avatar }: { avatar?: string }) => {
+  return avatar ? img({ src: avatar, width: "40" }) : div({ class: "no-avatar" })
+}
+
+export const BskyUserCell = ({
+  profile,
+  statusKey,
+  btnLabel,
+  addAction,
+  removeAction,
+}: {
+  profile: ProfileView,
+  statusKey: keyof ViewerState,
+  btnLabel: UserCellBtnLabel,
+  addAction: () => Promise<void>,
+  removeAction: () => Promise<void>
+}) => {
+  return div({ class: "bsky-user-content" },
+    div({ class: "icon-section"},
+      a({ href: `https://bsky.app/profile/${profile.handle}`, target: "_blank", rel: "noopener" },
+        Avatar({ avatar: profile.avatar }),
+      ),
+    ),
+    div({ class: "content" },
+      div({ class: "name-and-controller" },
+        div(
+          p({ class: "display-name" },
+            a({ href: `https://bsky.app/profile/${profile.handle}`, target: "_blank", rel: "noopener" },
+              profile.displayName ?? profile.handle,
+            ),
+          ),
+          p({ class: "handle" },
+            `@${profile.handle}`,
+          ),
+        ),
+        div(
+          ActionButton({
+            profile,
+            statusKey,
+            btnLabel,
+            addAction,
+            removeAction,
+          })
+        ),
+      ),
+      profile.description ? p({ class: "description" }, profile.description) : "",
+    ),
+  )
+}

src/lib/components/NotFoundCell.ts

@@ -0,0 +1,29 @@
+
+import van from "vanjs-core"
+
+const { div, p } = van.tags
+const { svg, path } = van.tagsNS("http://www.w3.org/2000/svg")
+
+const WarningIcon = () =>  svg(
+  {
+    fill: "none",
+    "stroke-width": "1.5",
+    stroke: "currentColor",
+    class: "w-6 h-6",
+    viewBox: "0 0 24 24"
+  },
+  path({
+    "stroke-linecap": "round",
+    "stroke-linejoin": "round",
+    d: "M12 9v3.75m-9.303 3.376c-.866 1.5.217 3.374 1.948 3.374h14.71c1.73 0 2.813-1.874 1.948-3.374L13.949 3.378c-.866-1.5-3.032-1.5-3.898 0L2.697 16.126zM12 15.75h.007v.008H12v-.008z"
+  }),
+)
+
+export const NotFoundCell = () => div({ class: "bsky-user-content bsky-user-content__not-found" },
+  WarningIcon(),
+  p({
+    class: "not-found"
+  },
+    "No similar users found."
+  )
+)

src/lib/components/ReloadBtn.ts

@@ -0,0 +1,19 @@
+import van from "vanjs-core"
+
+const { button, div } = van.tags
+
+export const ReloadButton = ({clickAction}: {clickAction: () => void}) => {
+  const deleted = van.state(false)
+
+  return () => deleted.val ? null : div({ class: "bsky-reload-btn-wrapper" },
+  button(
+    {
+      class: "bsky-reload-btn",
+      onclick: () => {
+        clickAction()
+        deleted.val = true
+      }
+    },
+    "Find More"
+  ))
+}