https://github.com/steelydylan/monaco-browser-bundler
https://github.com/steelydylan/monaco-browser-bundler
Last synced: about 1 year ago
JSON representation
- Host: GitHub
- URL: https://github.com/steelydylan/monaco-browser-bundler
- Owner: steelydylan
- Created: 2023-06-02T06:46:37.000Z (about 3 years ago)
- Default Branch: master
- Last Pushed: 2023-10-04T04:01:27.000Z (over 2 years ago)
- Last Synced: 2024-10-11T23:25:48.667Z (over 1 year ago)
- Language: TypeScript
- Homepage: https://monaco-browser-bundler.vercel.app
- Size: 1.07 MB
- Stars: 14
- Watchers: 2
- Forks: 1
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# BrowserBundler
Bundle React and TypeScript online without Node.js
## Playground
https://mosya.dev/tools/react-ts
## Screenshots
## Install
```
npm install browser-bundler
```
## Example
```js
import { browserBundle } from "browser-bundler";
const textarea = document.querySelector("#textarea") as HTMLTextAreaElement
const iframe = document.querySelector("#result") as HTMLIFrameElement
if (textarea && iframe) {
textarea.value = `import React from "react";
import ReactDOM from "react-dom";
const App = () {
return (
Hello World
}
ReactDOM.render(, document.getElementById("root"));`;
textarea.addEventListener("input", async () => {
const code = textarea.value
const { code: bundleCode } = await browserBundle(code)
iframe.srcdoc = `
${bundleCode}
`
})
textarea.dispatchEvent(new Event("input"))
```
## Relative Path
```js
import { browserBundle } from "browser-bundler";
const code = `
import React from "react";
import ReactDOM from "react-dom";
import { Hello } from "./hello.tsx";
const App = () => {
return (
)
}
ReactDOM.render(, document.getElementById("root"));
`
const result = await browserBundle(code, {
files: {
"./hello.tsx": `import React from "react";
export const Hello = () => {
return (
Hello World)
}`,
}
})
```