OPEN TECH FOUNDATION

React Node REPL

The Node.js REPL in a React component.

Live Demo | Documentation

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

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", "[email protected]", "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', '[email protected]'] | | 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. DEFAULT2. 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

• @opentf/react-sandbox - The CodeSandbox sandpack wrapper with additional features.

• @opentf/react-state - A global state manager for React.

• @opentf/react-form - A simple form state manager for React.

• @opentf/std - An Extensive JavaScript Standard Library.

License

Copyright (c) 2021, Thanga Ganapathy (MIT License).