Frame Master React UI Flow Locator Range Handler

This VS Code-compatible extension handles LocatorJS links generated by the frame-master-react-ui-flow plugin. It opens the target source file and expands the selection to the matching JSX element or fragment instead of only moving the cursor to a single point.

Features

• Handles vscode://.../open and cursor://.../open locator URIs.
• Handles vscode://.../webview and cursor://.../webview locator URIs by opening a preview webview panel.
• Can load a configured local preview URL inside an iframe and relay LocatorJS clicks from that embedded app back into the editor.
• Watches for the plugin's preview marker file opening and converts that fake file-open into a real preview panel open in the current editor instance.
• Opens local files for Linux and Windows environments.
• Opens vscode-remote://wsl+... files for WSL targets.
• Expands the editor selection to the full JSX node at the locator position.

Preview Mode

When the plugin is configured with useWebview: true and a webviewUrl, the extension opens a reusable preview panel beside the editor.

• The panel loads the configured app URL in an iframe.
• The plugin appends frameMasterPreview=vscode to that URL.
• Inside preview mode, the plugin patches LocatorJS VS Code links so they post messages to the parent panel instead of trying to navigate the iframe.
• The extension receives those messages and opens the matching source range in the active editor.

On VS Code or Cursor startup, the extension also scans workspace frame-master.config.ts|mts|js|mjs files. If it finds UIFlowPlugin({ editor: "vscode" | "cursor", useWebview: true, webviewUrl: ... }), it polls that preview URL and auto-opens the panel when the dev server becomes reachable, even before you click a Locator target.

The plugin can also open the preview directly in the current editor instance without --open-url. On dev-server start it writes a JSON marker file and opens that file with code -r or cursor -r. This extension detects the marker document, opens the preview webview, and closes the temporary tab immediately.

code -r .frame-master/frame-master-react-ui-flow.preview.json
cursor -r .frame-master/frame-master-react-ui-flow.preview.json

Local Packaging

Build a locally installable VSIX with:

npm run package:vsix

This writes frame-master-react-ui-flow-locator-range-handler.vsix in the extension folder.

Install it into VS Code with:

code --install-extension frame-master-react-ui-flow-locator-range-handler.vsix --force

Install it into Cursor with:

cursor --install-extension frame-master-react-ui-flow-locator-range-handler.vsix --force