React Preview (Current File)

React component preview side pane for the active file.

This VS Code extension shows a live preview of exported React components from the currently active JavaScript/TypeScript file in a side panel.

Side pane view: A dedicated React Preview activity bar icon and view.
Auto-updates with active editor: Whenever you switch files or edit the current one, the preview updates.
Detects exported components:
- Named exports like export const MyComponent = () => { ... }
- Default exports like export default function MyComponent() { ... }
Supports:
- javascript, javascriptreact
- typescript, typescriptreact

The extension sends the entire current file contents to a webview.
The webview uses React, ReactDOM, and @babel/standalone (via CDN) to:
- Compile the code (JS/TS + JSX) to CommonJS.
- Evaluate the module in an isolated environment.
- Inspect the module exports and pick likely React components (functions with PascalCase names).
- Render each component in its own small preview card.

Note: This is best-effort and may not work for files that rely heavily on external bundler features, non-browser APIs, or complex imports.

Install dependencies:

cd /home/berhalak/dev/react-preview
npm install

Open in VS Code:
- Open this folder in VS Code.
- Run the Run Extension launch configuration (F5) to start a new Extension Development Host.
Use the React Preview view:
- In the Extension Development Host window, click the React Preview icon in the Activity Bar.
- Open any .tsx, .jsx, .ts, or .js file containing exported React components.
- The side pane will show a card for each exported component and render it.
Manual refresh (optional):
- Command Palette → React Preview: Refresh.

Imports: If the file imports modules that are not available in a browser environment, evaluation may fail.
Side effects: Code that performs side effects on module load will run in the preview environment.
Security: This is intended for local development; it evaluates your own source code in a webview.