Package Exports

@fullstackcraftllc/codevideo-ide-react
@fullstackcraftllc/codevideo-ide-react/dist/index.js

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (@fullstackcraftllc/codevideo-ide-react) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

@fullstackcraftllc/codevideo-ide-react

NPM Version

React component for the CodeVideo IDE. Our first "nearly-complete" functionality component for replaying IDE sessions, complete with a file explorer, multiple editor tab support, and a terminal.

IT'S CRITICAL THIS SHIPS TO PRODUCTION ONLY AFTER CONFIRMING THERE ARE NO SSR ISSUES - MONACO IS INFAMOUS FOR SSR ISSUES!

Typically, this is caused by calling monaco.editor by accident, when the react ref globalMonacoRef.current.editor. can be used instead.

Examples

There is a Gatsby site (in this repo under the ./example folder) featuring the CodeVideoIDE component in various configurations.

In step mode using the arrow keys to navigate through steps:

https://codevideo.github.io/codevideo-ide-react/step

In replay mode, starting a full replay with sound as soon as the page is interacted with:

https://codevideo.github.io/codevideo-ide-react/replay

In replay mode compatible with puppeteer recording callbacks, starting a full replay with sound as soon as the page is interacted with:

https://codevideo.github.io/codevideo-ide-react/puppeteer

Installation

Install the package itself via npm:

npm install @fullstackcraftllc/codevideo-ide-react

Ensure that you include radix CSS in your project. For frameworks like Next.js, you can include this in the root of your project:

import "@radix-ui/themes/styles.css";

For Gatsby, add this to your gatsby-browser.js and gatsby-ssr.js files:

require('@radix-ui/themes/styles.css');