Replace react with preact (#3221)

Author: AndreasArvidsson

packages/cheatsheet-local/jest.config.ts

@@ -0,0 +1,14 @@
+import type { Config } from "jest";
+import { preactModuleNameMapper } from "@cursorless/common";
+
+const config: Config = {
+  preset: "ts-jest",
+  testEnvironment: "jsdom",
+  moduleNameMapper: {
+    ...preactModuleNameMapper,
+    "^@cursorless/cheatsheet$": "<rootDir>/../cheatsheet/src/index.ts",
+    "\\.(css|scss)$": "<rootDir>/src/test/styleMock.ts",
+  },
+};
+
+export default config;

packages/cheatsheet-local/package.json

@@ -19,6 +19,7 @@
     }
   },
   "scripts": {
+    "test": "jest",
     "compile": "tsc --build",
     "watch": "tsc --build --watch",
     "build": "pnpm build:prod",
@@ -29,19 +30,14 @@
   "dependencies": {
     "@cursorless/cheatsheet": "workspace:*",
     "@cursorless/common": "workspace:*",
-    "react": "^19.2.4",
-    "react-dom": "^19.2.4",
+    "preact": "^10.29.0",
     "tslib": "^2.8.1"
   },
   "devDependencies": {
+    "@preact/preset-vite": "^2.10.3",
     "@tailwindcss/postcss": "^4.2.1",
-    "@testing-library/dom": "^10.4.1",
-    "@testing-library/react": "^16.3.2",
     "@types/jest": "^30.0.0",
     "@types/node": "^24.12.0",
-    "@types/react": "^19.2.14",
-    "@types/react-dom": "^19.2.3",
-    "@vitejs/plugin-react": "^6.0.1",
     "jest": "^30.3.0",
     "postcss": "^8.5.8",
     "tailwindcss": "^4.2.1",

packages/cheatsheet-local/src/app/app.spec.tsx

@@ -1,16 +1,36 @@
-import { render } from "@testing-library/react";
+import { fakeCheatsheetInfo } from "@cursorless/cheatsheet";
+import { render } from "preact";
+import { act } from "preact/test-utils";
 import { App } from "./app";
 
 describe("App", () => {
-  it("should render successfully", () => {
-    const { baseElement } = render(<App />);
+  beforeEach(() => {
+    document.cheatsheetInfo = fakeCheatsheetInfo;
+  });
+
+  afterEach(() => {
+    document.body.innerHTML = "";
+  });
 
-    expect(baseElement).toBeTruthy();
+  it("should render successfully", async () => {
+    const container = document.createElement("div");
+    document.body.append(container);
+
+    await act(() => {
+      render(<App />, container);
+    });
+
+    expect(container).toBeTruthy();
   });
 
-  it("should have a greeting as the title", () => {
-    const { getByText } = render(<App />);
+  it("should have a greeting as the title", async () => {
+    const container = document.createElement("div");
+    document.body.append(container);
+
+    await act(() => {
+      render(<App />, container);
+    });
 
-    expect(getByText(/Welcome cheatsheet-local/gi)).toBeTruthy();
+    expect(container.textContent).toMatch(/Cursorless Cheatsheet/gi);
   });
 });

packages/cheatsheet-local/src/index.tsx

@@ -1,12 +1,18 @@
-import { StrictMode } from "react";
-import * as ReactDOM from "react-dom/client";
+import { render } from "preact";
+import { StrictMode } from "preact/compat";
 import { App } from "./app/app";
 
-const root = ReactDOM.createRoot(
-  document.getElementById("root") as HTMLElement,
-);
-root.render(
+render(
   <StrictMode>
     <App />
   </StrictMode>,
+  getRoot(),
 );
+
+function getRoot() {
+  const root = document.getElementById("root");
+  if (root == null) {
+    throw new Error("Missing root container");
+  }
+  return root;
+}

packages/cheatsheet-local/src/test/styleMock.ts

@@ -0,0 +1 @@
+export default {};

packages/cheatsheet-local/tsconfig.json

@@ -4,6 +4,7 @@
     "target": "es2022",
     "lib": ["dom", "es2022"],
     "jsx": "react-jsx",
+    "jsxImportSource": "preact",
     "allowSyntheticDefaultImports": true,
     "skipLibCheck": true,
     "esModuleInterop": true,

packages/cheatsheet-local/vite.config.ts

@@ -1,6 +1,6 @@
 import { fakeCheatsheetInfo } from "@cursorless/cheatsheet";
 import { viteHtmlParams } from "@cursorless/common";
-import react from "@vitejs/plugin-react";
+import preact from "@preact/preset-vite";
 import { defineConfig } from "vite";
 import { viteSingleFile } from "vite-plugin-singlefile";
 
@@ -11,7 +11,7 @@ export default defineConfig(() => {
     },
 
     plugins: [
-      react(),
+      preact(),
       viteSingleFile(),
       viteHtmlParams({
         FAKE_CHEATSHEET_INFO: JSON.stringify(fakeCheatsheetInfo),

packages/cheatsheet/jest.config.ts

@@ -1,8 +1,10 @@
 import type { Config } from "jest";
+import { preactModuleNameMapper } from "@cursorless/common";
 
 const config: Config = {
   preset: "ts-jest",
   testEnvironment: "jsdom",
+  moduleNameMapper: preactModuleNameMapper,
 };
 
 export default config;

packages/cheatsheet/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@cursorless/cheatsheet",
   "version": "0.1.0",
-  "description": "Core cheatsheet react component",
+  "description": "Core cheatsheet Preact component",
   "license": "MIT",
   "type": "module",
   "main": "./out/index.js",
@@ -26,21 +26,15 @@
     "watch": "pnpm run --filter @cursorless/cheatsheet --parallel '/^watch:.*/'"
   },
   "dependencies": {
+    "@cursorless/common": "workspace:*",
     "@fortawesome/fontawesome-svg-core": "^7.2.0",
     "@fortawesome/free-solid-svg-icons": "^7.2.0",
     "@fortawesome/react-fontawesome": "^3.2.0",
-    "react": "^19.2.4",
-    "react-dom": "^19.2.4",
-    "react-string-replace": "^2.0.1",
+    "preact": "^10.29.0",
     "react-use": "^17.6.0"
   },
   "devDependencies": {
-    "@testing-library/dom": "^10.4.1",
-    "@testing-library/react": "^16.3.2",
     "@types/jest": "^30.0.0",
-    "@types/react": "^19.2.14",
-    "@types/react-dom": "^19.2.3",
-    "@types/react-helmet": "^6.1.11",
     "jest": "^30.3.0",
     "jest-environment-jsdom": "^30.3.0",
     "ts-jest": "^29.4.6",

packages/cheatsheet/src/lib/CheatsheetPage.tsx

@@ -1,4 +1,4 @@
-import * as React from "react";
+import type { ComponentChildren } from "preact";
 import CheatsheetListComponent from "./components/CheatsheetListComponent";
 import CheatsheetLegendComponent from "./components/CheatsheetLegendComponent";
 import cheatsheetLegend from "./cheatsheetLegend";
@@ -56,7 +56,7 @@ function Cheatsheet({ cheatsheetInfo }: Props) {
 }
 
 type CheatsheetSectionProps = {
-  children?: React.ReactNode;
+  children?: ComponentChildren;
 };
 
 function CheatsheetSection({ children }: CheatsheetSectionProps) {