@flatjs/evolve-launch-editor

Usage

1. flatjs-evolve.config.ts

import { createLaunchEditorMiddleware } from '@flatjs/evolve-launch-editor';

export default defineConfig((env) => ({
  projectVirtualPath: '',
  devServer: {
    middlewares: [createLaunchEditorMiddleware({})],
    mockOptions: {
      port: 8000,
      ...
    },
  },

  ...
})

2. Custom fetch server api to open the code editor gotoServerEditor.ts

const getCodeInfo = (codeInfo) =>
  'codeInfo' in codeInfo ? codeInfo.codeInfo : codeInfo;

// Note if you have an customized `devServer.pageProxy` in `flatjs-evolve.config.ts`
// e.g. `devServer.pageProxy: 'route'`, you should change to `/route/__inspect-open-in-editor`
const launchEditorEndpoint = '/pages/__inspect-open-in-editor';

/**
 * fetch server api to open the code editor
 */
export const gotoServerEditor = (
  codeInfo?,
  options?: {
    editor?;
  }
) => {
  if (!codeInfo) return;
  codeInfo = getCodeInfo(codeInfo);

  const { lineNumber, columnNumber, relativePath, absolutePath } = codeInfo;

  const isRelative = Boolean(relativePath);
  const fileName = isRelative ? relativePath : absolutePath;

  if (!fileName) {
    console.error(
      `[react-dev-inspector] Cannot open editor without source fileName`,
      codeInfo
    );
    return;
  }

  const launchParams = {
    fileName,
    lineNumber,
    colNumber: columnNumber,
    editor: options?.editor,
  };

  const urlParams = new URLSearchParams(
    Object.entries(launchParams).filter(([, value]) => Boolean(value)) as [
      string,
      string,
    ][]
  );

  fetchToServerEditor({
    apiUrl: launchEditorEndpoint,
    urlParams,
  });
};

const fetchToServerEditor = async ({
  apiUrl,
  urlParams,
  fallbackUrl,
}: {
  apiUrl: string;
  urlParams: URLSearchParams;
  fallbackUrl?: string;
}) => {
  const response = await fetch(`${apiUrl}?${urlParams}`);
  // only 404 need to try fallback legacy endpoint
  if (response.status === 404 && fallbackUrl) {
    return await fetch(`${fallbackUrl}?${urlParams}`);
  }
  return response;
};

3. Create tsx component named FileInspector

import { useState } from 'react';
import { Inspector } from 'react-dev-inspector';
import { gotoServerEditor } from './gotoServerEditor';

export const FileInspector = () => {
  const [active, setActive] = useState(false);

  return (
    <Inspector
      active={active}
      onActiveChange={setActive}
      onInspectElement={gotoServerEditor}
    >
      <div className="mx-auto max-w-2xl">
        <div className="text-center">
          <div className="mt-8 flex flex-col items-center justify-center gap-x-6">
            <div className="mb-2 mt-6 text-[min(4.5vw,1rem)] font-light leading-[min(6vw,1.75rem)] text-gray-600 sm:text-lg">
              try shortcuts or click ↓
            </div>

            <button
              className="group flex items-center text-[min(4vw,.875rem)] leading-[min(5vw,1.25rem)] sm:text-base"
              onClick={() => setActive(true)}
            >
              <span>Ctrl + Shift + Command + C</span>
              <span className="ml-1">🍭</span>
            </button>
          </div>
        </div>
      </div>
    </Inspector>
  );
};

Custom editor support

You can use the LAUNCH_EDITOR environment variable to force a specific supported editor

LAUNCH_EDITOR=code
LAUNCH_EDITOR=code-insiders

Supported editors

| Value | Editor | Linux | Windows | macOS | | --------------- | ---------------------------------------------------------------------- | :---: | :-----: | :---: | | appcode | AppCode | | | ✓ | | atom | Atom | ✓ | ✓ | ✓ | | atom-beta | Atom Beta | | | ✓ | | brackets | Brackets | ✓ | ✓ | ✓ | | clion | Clion | | ✓ | ✓ | | code | Visual Studio Code | ✓ | ✓ | ✓ | | code-insiders | Visual Studio Code Insiders | ✓ | ✓ | ✓ | | codium | VSCodium | ✓ | ✓ | ✓ | | emacs | Emacs | ✓ | | | | idea | IDEA | ✓ | ✓ | ✓ | | notepad++ | Notepad++ | | ✓ | | | pycharm | PyCharm | ✓ | ✓ | ✓ | | phpstorm | PhpStorm | ✓ | ✓ | ✓ | | rider | Rider | ✓ | ✓ | ✓ | | rubymine | RubyMine | ✓ | ✓ | ✓ | | sublime | Sublime Text | ✓ | ✓ | ✓ | | vim | Vim | ✓ | | | | visualstudio | Visual Studio | | | ✓ | | webstorm | WebStorm | ✓ | ✓ | ✓ | | zed | Zed | | | ✓ |