DOCSEARCHbyAlgolia
Submit Docs

react-runner

repository·master·Indexed 19 days ago

https://github.com/nihgwu/react-runner

A library for running React code dynamically. It supports TypeScript, class fields, and multi-file imports via custom scope configuration. The ecosystem includes react-live-runner for a react-live compatible API, react-runner-codemirror for CodeMirror6 integration, and a set of UI components like LiveProvider, LiveEditor, and LivePreview for building live-coding playgrounds.

Tokens
10.5K
Snippets
41
Records
56
Agent score
67%

What's inside react-runner

  2. Explore the React Playground

    master

    The Play React playground is a web-based environment for experimenting with React code, powered by react-runner. It allows you to write and run React code directly in the browser without the overhead of iframes. Key capabilities include:

    • No iframe: Code runs directly in the environment.
    • Dynamic imports: Supports loading modules dynamically.
    • Style import: Supports importing CSS/styles.
    • Multi files: Supports working with multiple files in a single playground session.
    https://play-react.vercel.app/

  3. Configure import statements and multi-file support

    master

    You can enable import statements in your live code by configuring the import key within the scope object. Use importCode from react-runner to treat local file contents as modules.

    To support imports, your scope should follow this structure:

    • import.constants: For constant mappings.
    • import.[package-name]: For external packages.
    • import.[path]: For local files using importCode.
    import { importCode } from 'react-runner'
import * as YourPkg from 'your-pkg'

const baseScope = {
  /* base globals */
}

const scope = {
  ...baseScope,
  // scope used by import statement
  import: {
    constants: { A: 'a' },
    'your-pkg': YourPkg,
    './local-file': importCode(localFileContent, baseScope),
  },
}

// In your live code:
import { A } from 'constants'
import Foo, { Bar } from 'your-pkg'
import What, { Ever } from './local-file'

export default function Demo() {
  /* render */
}

  5. Edit pages and API routes in the Next.js example

    master

    This project follows standard Next.js conventions:

    • React Pages: Modify pages/index.tsx to edit the main page. The page will auto-update upon saving.
    • API Routes: Files located in the pages/api directory are treated as API endpoints rather than React pages. For example, the endpoint http://localhost:3000/api/hello is defined in pages/api/hello.ts.

  6. Migrate a Remix app to a pre-configured hosting template

    master

    If you want to use a specific hosting provider's configuration (e.g., Vercel, Netlify, Cloudflare), you can use npx create-remix@latest to generate a new project with that host pre-configured, then migrate your existing app/ folder into it:

    1. Create a new project with your target host: npx create-remix@latest
    2. Navigate to the new project directory.
    3. Delete the default app/ folder in the new project.
    4. Copy your existing app/ folder into the new project directory.
    cd ..
# create a new project, and pick a pre-configured host
npx create-remix@latest
cd my-new-remix-app
# remove the new project's app (not the old one!)
rm -rf app
# copy your app over
cp -R ../my-old-remix-app/app app

  7. Manage the Create React App project with Yarn scripts

    master

    This project uses Create React App and provides several scripts via yarn to manage development, testing, and production builds.

    • Development: Use yarn start to run the app in development mode. The app will be available at http://localhost:3000 and will automatically reload on file edits.
    • Testing: Use yarn test to launch the test runner in interactive watch mode.
    • Production Build: Use yarn build to create a minified, optimized production build in the build folder, ready for deployment.
    • Customization: Use yarn eject if you need full control over the underlying build tools (webpack, Babel, ESLint, etc.). Warning: This is a one-way operation and cannot be undone.
    yarn start
yarn test
yarn build
yarn eject

  11. Use react-live-runner for a react-live compatible experience

    master
    If you are migrating from react-live, react-live-runner provides a compatible API. It re-exports react-runner and uses Sucrase for transpilation, allowing for modern features like arrow functions in event handlers without manual binding.