https://github.com/steelydylan/browser-bundler
https://github.com/steelydylan/browser-bundler
Last synced: about 1 year ago
JSON representation
- Host: GitHub
- URL: https://github.com/steelydylan/browser-bundler
- Owner: steelydylan
- License: mit
- Created: 2023-05-24T02:24:15.000Z (about 3 years ago)
- Default Branch: master
- Last Pushed: 2025-03-04T08:37:19.000Z (over 1 year ago)
- Last Synced: 2025-03-17T16:55:28.657Z (about 1 year ago)
- Language: TypeScript
- Homepage: https://mosya.dev/tools/react-ts
- Size: 2.57 MB
- Stars: 15
- Watchers: 3
- Forks: 1
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
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)
}`,
}
})
```