refactor: attached project action events #8

CHANGELOG.md

@@ -82,4 +82,9 @@ Pretty Home is a VS Code extension designed to enhance the appearance of your re
 
 ### Feature
 - Able to remove recent projects 
-> Which will completly remove from vscode recent project history also. You can still access it from its original location if needed. Then it will appear again.
+> Which will completly remove from vscode recent project history also. You can still access it from its original location if needed. Then it will appear again.
+
+### Version 1.1.61 (2024-12-23)
+
+#### Fix
+- Refactor & Performance optimization

js/broker.js

@@ -1,9 +1,35 @@
 
 const searchInput = document.querySelector("#seachInput");
 const vscode = acquireVsCodeApi();
+const cardsContainer = document.querySelector("#cardsContainer");
 
+/**
+ * A custom event that is fired when a project needs to be acted upon.
+ *
+ * It is fired on the document, and bubbles up to the window.
+ *
+ * The event's detail object has two properties:
+ * - `action`: The action that needs to be performed on the project. This can be 'open' or 'remove'.
+ * - `path`: The path of the project that needs to be acted upon.
+ */
+const ProjectActionEvent = (action, path) => new CustomEvent("project:action", {
+  bubbles: true,
+  detail: { action, path },
+});
+
+/**
+ * Processes a project action.
+ *
+ * This function takes two arguments:
+ * - `type`: The type of action to perform on the project. This can be 'open', 'remove', 'search', or 'error'.
+ * - `payload`: The payload of the action. This is the path of the project for 'open' and 'remove', a search term for 'search', and an error message for 'error'.
+ *
+ * It sends a message to the VS Code extension with the appropriate command to perform the action.
+ *
+ * If there is an error, it sends a message to the VS Code extension with the command "errorInProject" and the error message as the payload.
+ */
 function actionsProcessor(type, payload) {
-  try { 
+  try {
     switch (type) {
       case 'open': {
         vscode.postMessage({ command: "openProject", path: payload });
@@ -14,7 +40,7 @@ function actionsProcessor(type, payload) {
         vscode.postMessage({ command: "removeProject", path: payload });
         break;
       }
-      case 'search': { 
+      case 'search': {
         vscode.postMessage({ command: "searchProject", value: payload });
         break;
       }
@@ -29,26 +55,18 @@ function actionsProcessor(type, payload) {
   }
 }
 
-function handleProjectAction(event, action) {
-  console.log(event, action)
-  const button = event.currentTarget;
-  const path = button.dataset.path || null;
-  actionsProcessor(action, path);
-}
-
-function attachEventListeners() {
-  const buttonSelectors = [
-    { selector: ".projectOpenButton", action: "open" },
-    { selector: ".removeProjectButton", action: "remove" },
-  ];
-
-  buttonSelectors.forEach(({ selector, action }) => {
-    document.querySelectorAll(selector).forEach((button) => {
-      button.addEventListener("click", (event) => handleProjectAction(event, action));
-    });
-  });
-}
 
+/**
+ * Returns a debounced version of the given function.
+ *
+ * The debounced function will only be called once the given time
+ * has passed since the last time it was called.
+ *
+ * @param {function} func - The function to debounce.
+ * @param {number} wait - The time in milliseconds to wait.
+ *
+ * @returns {function(...*)} A debounced version of the function.
+ */
 function searchDebounce(func, wait) {
   let timeout;
   return function (...args) {
@@ -63,14 +81,21 @@ function searchDebounce(func, wait) {
 
 searchInput.addEventListener("input", searchDebounce(() => actionsProcessor('search', searchInput?.value), 300));
 
-window.addEventListener('DOMContentLoaded', () => attachEventListeners());
+cardsContainer.addEventListener("click", (event) => {
+  if (!event.target.dataset.action) return;
+  event.target.dispatchEvent(ProjectActionEvent(event.target.dataset.action, event.target.dataset.path));
+})
 
 window.addEventListener("message", (event) => {
   const message = event.data;
   switch (message.command) {
     case "renderCards":
-      document.querySelector("#cardsContainer").innerHTML = message.html;
-      attachEventListeners();
+      cardsContainer.innerHTML = message.html;
       break;
   }
 });
+
+window.addEventListener("project:action", (event) => {
+  const { action, path } = event.detail;
+  actionsProcessor(action, path);
+})

package.json

@@ -2,7 +2,7 @@
   "name": "pretty-home",
   "displayName": "Pretty Home",
   "description": "Pretty Home is a VS Code extension designed to enhance the appearance of your recent projects view, making it more organized and visually appealing",
-  "version": "1.1.60",
+  "version": "1.1.61",
   "license": "MIT",
   "icon": "icon.png",
   "publisher": "sefatanam",

src/lib/constant.ts

@@ -11,10 +11,4 @@ export const COMMAND = {
     REMOVE_PROJECRT: 'removeProject',
 } as const;
 
-export const WEB_VIEW_ID = {
-    PROJECT_OPEN_BUTTON: 'projectOpenButton',
-    SEARCH_INPUIT: 'seachInput',
-    REMOVE_PROJECT_BUTTON: 'removeProjectButton',
-} as const;
-
 export const REPO_URL = 'https://github.com/sefatanam/vscode-pretty-home';

src/lib/views.ts

@@ -1,5 +1,4 @@
 import { ExtensionContext, Uri, WebviewPanel } from 'vscode';
-import { WEB_VIEW_ID } from "./constant";
 import { RecentProject } from "./types";
 
 /**
@@ -53,13 +52,13 @@ export const makeProjectCards = (projects: RecentProject[]): string => {
         	<p class="path">${project.path}</p>
     	</div>
     	<div class="project-link">
-			<vscode-button class="button ${WEB_VIEW_ID.REMOVE_PROJECT_BUTTON}" data-path="${project.path}" data-name="${project.name}" title="Remove Project">
-            	<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="icon">
+			<vscode-button class="button" data-action="remove" data-path="${project.path}" data-name="${project.name}" title="Remove Project">
+            	<svg data-action="remove" data-path="${project.path}" data-name="${project.name}" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="icon">
   					<path stroke-linecap="round" stroke-linejoin="round" d="M6 18 18 6M6 6l12 12" />
 				</svg>
         	</vscode-button>
-        	<vscode-button class="button ${WEB_VIEW_ID.PROJECT_OPEN_BUTTON}" data-path="${project.path}" data-name="${project.name}" title="Open Project">
-            	<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5"
+        	<vscode-button class="button" data-action="open" data-path="${project.path}" data-name="${project.name}" title="Open Project">
+            	<svg data-action="open" data-path="${project.path}" data-name="${project.name}" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5"
                 	stroke="currentColor" class="icon">
                 	<path stroke-linecap="round" stroke-linejoin="round"
                     	d="M13.5 6H5.25A2.25 2.25 0 0 0 3 8.25v10.5A2.25 2.25 0 0 0 5.25 21h10.5A2.25 2.25 0 0 0 18 18.75V10.5m-10.5 6L21 3m0 0h-5.25M21 3v5.25" />