dx.md

DX

Environment Setup

Requirements

• Node.js ^20.9.0
• PNPM package manager
• Any Chromium-based browser (Chrome, Edge, Brave, etc.)
  • Firefox is NOT supported for running the dev environment

Development Workflow

Getting Started

1. Clone the repository

2. Clone submodules:

   git submodule update --init --recursive

3. Install dependencies:

   pnpm install
   pnpm turbo build --filter=./packages/*

4. Start the development server:

   cd perplexity/extension
   pnpm turbo dev

   • At the current size of the project, dev server might take up to 30 seconds to finish transpiling the necessary code for the extension to work initially.
   • HMR not working? Refer to HMR Support.

5. Enable "Developer mode" in your browser

6. Load the extension from the perplexity/extension/dist/chrome folder

Build Process

# Build for Chrome
pnpm turbo build

# Build for Firefox
pnpm turbo build:firefox

# Build for both browsers and create .zip distribution packages
pnpm turbo zip:all

Developer Tools

Tip

For the best experience on VSCode, it is strongly recommended to open the extension as a dedicated workspace.

Linting and Formatting

• Prettier TailwindCSS class sorting
• In addition to common TypeScript/React ESLint rules, this project includes some specific rules:
  • Enforces strict null checks (@typescript-eslint/strict-boolean-expressions)
  • Enforces specific filename casing (PascalCase, kebab-case, camelCase)
  • Provides automatic global imports via unimport (see config)
  • Enforces import scoping via eslint-plugin-boundaries to maintain a clean architecture with clear dependency directions (see config)

Development Commands

• pnpm lint: Run ESLint
• pnpm lintq: Run ESLint but only show errors
• pnpm lintf: Run ESLint with auto-fix
• pnpm fmt: Format all code with Prettier
• pnpm clean: Delete node_modules and dist directories
• Unit tests with Vitest
  • pnpm test: Run tests
  • pnpm test:ui: Run tests with UI
• End-to-end tests with Playwright
  • Currently only boilerplate code, working unreliable due to Cloudflare protection

Editor Experience

VSCode Integration .vscode/settings.json

• File exclusions to keep the explorer clean
• You might want to adjust typescript.tsserver.maxTsServerMemory to match your system's specs
• TailwindCSS (v4) IntelliSense support for jQuery's methods
• i18n-ally (lokalise.i18n-ally) pre-configured

Misc

• You will see that the project uses lazily from react-lazily to lazy load React components. So why not React.lazy?
  • react-lazily supports named exports with shorter syntax
  • React.lazy doesn't play well with VSCode's Typescript references, which means it always show 0 references for the lazy loaded components
  • See microsoft/TypeScript#50957 (comment)