A simple React component to show live Typescript code samples.
npm install live-typescriptA 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.
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";
import { mapN } from 'thimbleberry';
const seq = mapN(10).join(' ');
document.body.innerHTML =
;
"
>
`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
[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