OPEN TECH FOUNDATION
React Node REPL
The Node.js REPL in a React component.
Features
- Simple API
- Powered by WebContainers
- Install npm packages locally, directly in the terminal
- Switch between
Terminal or Console View
- Keyboard shortcuts
- TypeScript support
Upcoming
- Serialization of objects for better console view
- Code formating
- Syntax errors highlighting
- TypeScript errors
Requirements
- Your site must be served over HTTPS.
- The following headers must be set in your deployed page.
Cross-Origin-Embedder-Policy: require-corp
Cross-Origin-Opener-Policy: same-origin
Learn more.
Installation
npm install @opentf/react-node-repl
yarn add @opentf/react-node-repl
pnpm add @opentf/react-node-repl
bun add @opentf/react-node-repl
Usage
import { NodeREPL } from "@opentf/react-node-repl";
import "@opentf/react-node-repl/lib/style.css";
export default function App() {
const code = `console.log("Hello World")`;
const deps = ["pkg1", "pkg2@1.2.3", "pkg3@beta"];
return <NodeREPL code={code} deps={deps} layout="SPLIT_PANEL" />;
}
API
Props
| Prop | Type | Required | Default | Description |
|---|
| code | string | No | "" | The main code to execute |
| deps | string[] | No | [] | The npm dependencies.Eg: ['lodash', 'chalk@4.1.2'] |
| setupCode | string | No | "" | The setup code, used to init some values.
Eg: const log = console.log |
| layout | string | No | "DEFAULT" | The predefined layouts for the components.
There are two types of layout:
1. DEFAULT
2. SPLIT_PANEL |
| editor | EditorProps | No | undefined | The editor component config. |
| terminal | TerminalProps | No | undefined | The terminal component config. |
| console | ConsoleProps | No | undefined | The console component config. |
| style | React.CSSProperties | No | {} | It is used to style the component container. |
EditorProps
| Prop | Type | Required | Default | Description |
|---|
| header | boolean | No | true | Show / Hide the editor header component. |
| darkMode | boolean | No | false | The editor dark mode toggle. |
| style | React.CSSProperties | No | {} | It is used to style the editor container. |
TerminalProps
| Prop | Type | Required | Default | Description |
|---|
| show | boolean | No | true | Show / Hide the terminal component. |
| style | React.CSSProperties | No | {} | It is used to style the terminal container. |
ConsoleProps
| Prop | Type | Required | Default | Description |
|---|
| show | boolean | No | true | Show / Hide the console component. |
| style | React.CSSProperties | No | {} | It is used to style the console container. |
Limitations
- Currently, it runs only Node.js v18
- By default, in REPL mode, you cannot use import statements. You need to fallback to require().
- You can run ESM modules manually in the terminal with the ESM switch on. Eg:
$ node main.js
- It is not possible to run native addons.
Related
License
Copyright (c) 2021, Thanga Ganapathy (MIT License).
