live-typescript - npm explorer

A simple React component to show live Typescript code samples.

- TypesScript hinting and error checking using the Monaco editor from VS Code.
- Your example code is vanilla Typescript.
- Example code can import local packages (not just public packages on npm).
- Live preview, isolated in an iframe.
- Instant refresh, transpiles with sucrase.
- Docusaurus compatible.

$3

Here's a simple example:

```

To import modules in your example code, use the provided plugin in a vite or rollup build: [rollup-plugin-sourcefiles].

`import pkgSource from "thimbleberry?sourceFiles";

code=" import { mapN } from 'thimbleberry';

const seq = mapN(10).join(' '); document.body.innerHTML =

${seq}

;
      "
    >


Here's a complete [example][] using vite.
$3
LiveTypescript works well in Docusaurus.
The recommended approach is to build (and test) your code examples in a separate 
vite/rollup package build, and then import the examples package
into your documentation build.

Consider wrapping your LiveTypescript component in `. The
current sandboxed execution doesn't run on the server anyway, and server side
rendering can lead to developer console warnings at runtime.

[example]: https://github.com/mighdoll/live-typescript/tree/main/packages/example/src/App.tsx
[rollup-plugin-sourcefiles]: https://github.com/mighdoll/live-typescript/tree/main/packages/rollup-plugin-sourcefiles