refactor(pplx:ext)

Author: pnd280

perplexity/extension/.gitignore

@@ -29,4 +29,6 @@ unimport.d.ts
 /release/*.zip
 /release/*.xpi
 /release/*.crx
-/release/*-firefox
+/release/*-firefox
+
+dom-selectors.json

perplexity/extension/e2e/pages/home.page.ts

@@ -1,18 +1,20 @@
 import { expect } from "@playwright/test";
 
+import { DomSelectorsRegistry } from "@/data/dom-selectors-registry";
 import { ENDPOINTS } from "@/services/pplx-api/endpoints";
-import { DOM_SELECTORS } from "@/utils/dom-selectors";
 import { E2E_CONFIG } from "~/e2e/config";
 import { BasePage } from "~/e2e/pages/base.page";
 
-export class HomePage extends BasePage {
+export class HomePage extends BasePage implements Extracted {
   async load(): Promise<void> {
     await this.navigateTo(ENDPOINTS.HOME);
     await expect(this.page).toHaveTitle(/Perplexity/);
   }
 
   async verifyKeyElements(): Promise<void> {
-    const heading = this.page.locator(DOM_SELECTORS.QUERY_BOX.TEXTAREA.MAIN);
+    const heading = this.page.locator(
+      DomSelectorsRegistry.cachedSync.QUERY_BOX.TEXTAREA.MAIN,
+    );
     await expect(heading).toBeVisible({
       timeout: E2E_CONFIG.TIMEOUTS.HEADING_VISIBLE,
     });
@@ -22,3 +24,9 @@ export class HomePage extends BasePage {
     await this.verifyKeyElements();
   }
 }
+
+interface Extracted {
+  load(): Promise<void>;
+  verifyKeyElements(): Promise<void>;
+  verifyHomepageLoad(): Promise<void>;
+}

perplexity/extension/e2e/tests/pro/query-box.spec.ts

@@ -1,7 +1,7 @@
 import { expect } from "@playwright/test";
 
-import { languageModels } from "@/plugins/_core/misc/remote-language-models.loader";
-import { TEST_ID_SELECTORS } from "@/utils/dom-selectors";
+import { DomSelectorsRegistry } from "@/data/dom-selectors-registry";
+import { PplxLanguageModel } from "@/data/plugins/query-box/language-model-selector/language-models";
 import { sleep } from "@/utils/utils";
 import { HomePage } from "~/e2e/pages/home.page";
 import { test } from "~/e2e/tests/pro/context.fixtures";
@@ -13,7 +13,7 @@ test.describe("Query box", () => {
       await homePage.load();
 
       const languageModelSelector = page.locator(
-        `[data-testid="${TEST_ID_SELECTORS.QUERY_BOX.LANGUAGE_MODEL_SELECTOR}"]`,
+        `[data-testid="${DomSelectorsRegistry.testIds.QUERY_BOX.LANGUAGE_MODEL_SELECTOR}"]`,
       );
 
       await expect(languageModelSelector).toBeVisible();
@@ -24,7 +24,7 @@ test.describe("Query box", () => {
       await homePage.load();
 
       const languageModelSelector = page.locator(
-        `[data-testid="${TEST_ID_SELECTORS.QUERY_BOX.LANGUAGE_MODEL_SELECTOR}"]`,
+        `[data-testid="${DomSelectorsRegistry.testIds.QUERY_BOX.LANGUAGE_MODEL_SELECTOR}"]`,
       );
 
       await languageModelSelector.click();
@@ -38,13 +38,13 @@ test.describe("Query box", () => {
       await homePage.load();
 
       const languageModelSelector = page.locator(
-        `[data-testid="${TEST_ID_SELECTORS.QUERY_BOX.LANGUAGE_MODEL_SELECTOR}"]`,
+        `[data-testid="${DomSelectorsRegistry.testIds.QUERY_BOX.LANGUAGE_MODEL_SELECTOR}"]`,
       );
 
       await languageModelSelector.click();
 
       const claudeOption = page
-        .locator(`text=${languageModels?.[1]?.label}`)
+        .locator(`text=${PplxLanguageModel.allModels?.[1]?.label}`)
         .first();
       await claudeOption.click();
 
@@ -53,7 +53,7 @@ test.describe("Query box", () => {
       await languageModelSelector.click();
 
       const gpt4oOption = page
-        .locator(`text=${languageModels?.[0]?.label}`)
+        .locator(`text=${PplxLanguageModel.allModels?.[0]?.label}`)
         .first();
       await gpt4oOption.click();
     });

perplexity/extension/package.json

@@ -1,6 +1,6 @@
 {
   "name": "pplx-ext",
-  "version": "1.11.2",
+  "version": "1.12.0",
   "author": "pnd280",
   "dependencies": {
     "@ark-ui/react": "^5.6.0",

perplexity/extension/release/changelog/1.12.0.md

@@ -0,0 +1,3 @@
+## Improvements
+
+- Many minor changes to improve the loading performance and the reliability of the extension against changes from Perplexity

perplexity/extension/release/cli/create-release-note.js

@@ -41,8 +41,6 @@ async function main() {
       `Changelog file ${chalk.yellowBright(changelogFile)} already exists`,
     );
   } else {
-    // const releaseNote = generateFooter(extVersion);
-
     fs.writeFileSync(changelogFile, "");
     logger.success(
       `Created empty changelog file ${chalk.yellowBright(changelogFile)}`,
@@ -53,47 +51,97 @@ async function main() {
     {
       type: "confirm",
       name: "createRelease",
-      message: `Create a new GitHub release for version ${extVersion}? Remember to commit and push your changes (including the newly created changelog file) before proceeding.`,
+      message: `Commit and push your changes (including the newly created changelog file) before proceeding!\nCreate a new GitHub release for version ${extVersion}?`,
       default: false,
     },
   ]);
 
   if (createRelease) {
     const tagName = `${packageJson.name}@${extVersion}`;
+    const crxPath = `../${extVersion}-chrome.crx`;
+    const xpiPath = `../${extVersion}-firefox.xpi`;
 
-    const temptChangelogFile = `${changelogFile}.tmp`;
-    const releaseNote = fs.readFileSync(changelogFile, "utf8");
-    fs.writeFileSync(
-      temptChangelogFile,
-      releaseNote + "\n\n" + generateFooter(extVersion),
-    );
+    const crxExists = fs.existsSync(crxPath);
+    const xpiExists = fs.existsSync(xpiPath);
+
+    let proceedWithRelease = true;
 
-    const command = `gh release create "${tagName}" -t "${tagName}" --notes-file ${temptChangelogFile} ../${extVersion}-chrome.crx ../${extVersion}-firefox.xpi`;
+    if (!crxExists || !xpiExists) {
+      const missingFiles = [];
+      if (!crxExists) missingFiles.push("Chrome extension (CRX)");
+      if (!xpiExists) missingFiles.push("Firefox extension (XPI)");
 
-    const execAsync = promisify(exec);
+      const { proceed } = await inquirer.prompt([
+        {
+          type: "confirm",
+          name: "proceed",
+          message: `The following files are missing: ${missingFiles.join(", ")}. Do you want to proceed with creating the release without them?`,
+          default: false,
+        },
+      ]);
 
-    try {
-      const { stdout } = await execAsync(command);
-      console.log(stdout);
+      proceedWithRelease = proceed;
+    }
 
-      logger.success(`Created release ${chalk.yellowBright(tagName)}`);
-      logger.detail(
-        `https://github.com/pnd280/complexity/releases/tag/${tagName}`,
+    if (proceedWithRelease) {
+      const temptChangelogFile = `${changelogFile}.tmp`;
+      const releaseNote = fs.readFileSync(changelogFile, "utf8");
+
+      let footerContent;
+      try {
+        footerContent = generateFooter(extVersion, crxExists, xpiExists);
+      } catch (error) {
+        logger.error(`Failed to generate footer: ${error.message}`);
+        return;
+      }
+
+      fs.writeFileSync(
+        temptChangelogFile,
+        releaseNote + "\n\n" + footerContent,
       );
-    } catch (error) {
-      logger.error(`Failed to create GitHub release: ${error.message}`);
-      process.exit(1);
-    } finally {
-      fs.unlinkSync(temptChangelogFile);
+
+      let command = `gh release create "${tagName}" -t "${tagName}" --notes-file ${temptChangelogFile}`;
+
+      if (crxExists) {
+        command += ` "${crxPath}"`;
+      }
+
+      if (xpiExists) {
+        command += ` "${xpiPath}"`;
+      }
+
+      const execAsync = promisify(exec);
+
+      try {
+        const { stdout } = await execAsync(command);
+        console.log(stdout);
+
+        logger.success(`Created release ${chalk.yellowBright(tagName)}`);
+        logger.detail(
+          `https://github.com/pnd280/complexity/releases/tag/${tagName}`,
+        );
+      } catch (error) {
+        logger.error(`Failed to create GitHub release: ${error.message}`);
+        process.exit(1);
+      } finally {
+        fs.unlinkSync(temptChangelogFile);
+      }
+    } else {
+      logger.info("Release creation cancelled.");
     }
   }
 }
 
-function generateFooter(version) {
+function generateFooter(version, crxExists = true, xpiExists = true) {
   try {
     const footerTemplate = fs.readFileSync(FOOTER_TEMPLATE_PATH, "utf8");
-    const crxHash = md5sum(`../${version}-chrome.crx`);
-    const xpiHash = md5sum(`../${version}-firefox.xpi`);
+
+    const crxHash = crxExists
+      ? md5sum(`../${version}-chrome.crx`)
+      : "File not available";
+    const xpiHash = xpiExists
+      ? md5sum(`../${version}-firefox.xpi`)
+      : "File not available";
 
     return footerTemplate
       .replace("$CRX_HASH", crxHash)

perplexity/extension/src/app.config.ts

@@ -26,11 +26,12 @@ const APP_CONFIG = {
     globalExcludeMatches: [
       "https://stripe.perplexity.ai/*",
       "https://*.perplexity.ai/p/api/*",
-      "https://*.perplexity.ai/hub/*",
       "https://*.perplexity.ai/rest/*",
       "https://*.perplexity.ai/api/*",
       "https://*.labs.perplexity.ai/*",
       "https://*.docs.perplexity.ai/*",
+      "https://*.perplexity.ai/hub/*",
+      "https://*.perplexity.ai/changelog/*",
     ],
   },
 };

perplexity/extension/src/components/SettingsDashboardLink.tsx

@@ -3,30 +3,36 @@ import { sendMessage } from "webext-bridge/content-script";
 import Cplx from "@/components/icons/Cplx";
 import FaArrowUpRight from "@/components/icons/FaArrowUpRight";
 import { Portal } from "@/components/ui/portal";
+import { DomSelectorsRegistry } from "@/data/dom-selectors-registry";
+import { useIsMobileStore } from "@/hooks/use-is-mobile-store";
 import { useSettingsPageDomObserverStore } from "@/plugins/_core/dom-observers/settings-page/store";
-import { DOM_SELECTORS, INTERNAL_ATTRIBUTES } from "@/utils/dom-selectors";
 
 export function SettingsDashboardLink() {
+  const isMobile = useIsMobileStore((store) => store.isMobile);
+
   const $sidebarWrapper = useSettingsPageDomObserverStore(
     (store) => store.$sidebarWrapper,
+    isMobile ? undefined : deepEqual,
   );
 
   const portalContainer = useMemo(() => {
     if ($sidebarWrapper == null || !$sidebarWrapper.length) return null;
 
     const $existingContainer = $sidebarWrapper.find(
-      `[data-cplx-component="${INTERNAL_ATTRIBUTES.SETTINGS_PAGE.CPLX_DASHBOARD_LINK}"]`,
+      `[data-cplx-component="${DomSelectorsRegistry.internalAttributes.SETTINGS_PAGE.CPLX_DASHBOARD_LINK}"]`,
     );
 
     if ($existingContainer[0]) return $existingContainer[0];
 
     const $portalContainer = $("<div>")
       .internalComponentAttr(
-        INTERNAL_ATTRIBUTES.SETTINGS_PAGE.CPLX_DASHBOARD_LINK,
+        DomSelectorsRegistry.internalAttributes.SETTINGS_PAGE
+          .CPLX_DASHBOARD_LINK,
       )
       .insertAfter(
         $sidebarWrapper.find(
-          DOM_SELECTORS.SETTINGS_PAGE.SIDEBAR_CHILD.BACK_BUTTON,
+          DomSelectorsRegistry.cachedSync.SETTINGS_PAGE.SIDEBAR_CHILD
+            .BACK_BUTTON,
         ),
       );
 

perplexity/extension/src/components/ui/command.tsx

@@ -11,7 +11,7 @@ const Command = ({
 }: React.ComponentProps<typeof CommandPrimitive>) => (
   <CommandPrimitive
     className={cn(
-      "x:flex x:h-full x:w-full x:flex-col x:overflow-hidden x:rounded-md x:bg-popover x:text-popover-foreground",
+      "x:flex x:h-full x:w-full x:flex-col x:overflow-hidden x:rounded-lg x:bg-popover x:text-popover-foreground",
       className,
     )}
     {...props}
@@ -70,7 +70,7 @@ const CommandInput = ({
     )}
     <CommandPrimitive.Input
       className={cn(
-        "x:flex x:h-11 x:w-full x:rounded-md x:bg-transparent x:py-3 x:text-sm x:outline-none x:placeholder:text-muted-foreground x:disabled:cursor-not-allowed x:disabled:opacity-50",
+        "x:flex x:h-11 x:w-full x:rounded-lg x:bg-transparent x:py-3 x:text-sm x:outline-none x:placeholder:text-muted-foreground x:disabled:cursor-not-allowed x:disabled:opacity-50",
         inputClassName,
       )}
       {...props}
@@ -139,7 +139,7 @@ const CommandItem = ({
 }: React.ComponentProps<typeof CommandPrimitive.Item>) => (
   <CommandPrimitive.Item
     className={cn(
-      "x:relative x:flex x:cursor-pointer x:items-center x:rounded-md x:px-2 x:py-1.5 x:text-xs x:text-muted-foreground x:outline-none x:select-none x:aria-selected:bg-primary-foreground x:aria-selected:text-primary x:data-[disabled=true]:pointer-events-none x:data-[disabled=true]:opacity-50",
+      "x:relative x:flex x:cursor-pointer x:items-center x:rounded-lg x:px-2 x:py-1.5 x:text-xs x:text-muted-foreground x:outline-none x:select-none x:aria-selected:bg-primary-foreground x:aria-selected:text-primary x:data-[disabled=true]:pointer-events-none x:data-[disabled=true]:opacity-50",
       className,
     )}
     {...props}

perplexity/extension/src/data/dom-selectors-registry/dom-selectors.test.ts

@@ -0,0 +1,37 @@
+import * as fs from "fs";
+import * as path from "path";
+
+import { describe, it } from "vitest";
+
+import { DOM_SELECTORS } from "@/data/dom-selectors-registry/dom-selectors";
+
+/**
+ * This is a test file that not for testing anything but exports DOM selectors to JSON for the CDN.
+ * Vitest will run this during the build process.
+ */
+describe("DOM selectors", () => {
+  it("syncs DOM selectors to JSON file", () => {
+    try {
+      const rootDir = process.cwd();
+      const cdnTemplatePath = path.join(rootDir, "cdn-template");
+      const outputPath = path.join(cdnTemplatePath, "dom-selectors.json");
+
+      if (!fs.existsSync(cdnTemplatePath)) {
+        console.warn(
+          "cdn-template folder does not exist, skipping DOM selectors sync",
+        );
+        return;
+      }
+
+      if (fs.existsSync(outputPath)) {
+        fs.unlinkSync(outputPath);
+      }
+
+      fs.writeFileSync(outputPath, JSON.stringify(DOM_SELECTORS));
+      console.log("DOM selectors successfully synced to JSON file");
+    } catch (error) {
+      console.error(`Failed to sync DOM selectors: ${error}`);
+      throw error;
+    }
+  });
+});