LocatorJS logo

Install Locator for Preact

Install Locator on Preact codebase.

1

Add Babel plugin

You need a babel plugin to gather all the component's locations in their files.
npm install -D @locator/babel-jsx
Add this to your vite.config.js
import { defineConfig } from "vite";
import preact from "@preact/preset-vite";

export default defineConfig({
  plugins: [
    preact({
      babel: {
        plugins: [
          [
            "@locator/babel-jsx/dist",
            {
              env: "development",
            },
          ],
        ],
      },
    }),
  ],
});
2

Add UI library (optional for Browser Extension users)

Import and call setup function to show the components and handle the clickings.
npm install -D @locator/runtime

Add this to index.jsx (or other global file):
import setupLocatorUI from "@locator/runtime";

if (process.env.NODE_ENV === "development") {
  setupLocatorUI();
}
Alternatively to the 2nd step, you can install Browser Extension. If you are not ready to show the UI to your whole team, you can skip installing library. Browser extension will connect to apps that have Locator Babel Plugin installed.
3

Test and enjoy Locator

Go to your localhost environment.