{"id":16331090,"url":"https://github.com/steelydylan/browser-bundler","last_synced_at":"2025-03-20T23:30:17.769Z","repository":{"id":168860248,"uuid":"644668318","full_name":"steelydylan/browser-bundler","owner":"steelydylan","description":null,"archived":false,"fork":false,"pushed_at":"2025-03-04T08:37:19.000Z","size":2696,"stargazers_count":15,"open_issues_count":0,"forks_count":1,"subscribers_count":3,"default_branch":"master","last_synced_at":"2025-03-17T16:55:28.657Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"https://mosya.dev/tools/react-ts","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/steelydylan.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2023-05-24T02:24:15.000Z","updated_at":"2025-03-04T08:36:59.000Z","dependencies_parsed_at":null,"dependency_job_id":"d5561990-5222-4404-b495-aee9446d6f6a","html_url":"https://github.com/steelydylan/browser-bundler","commit_stats":null,"previous_names":["steelydylan/browser-bundler"],"tags_count":14,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/steelydylan%2Fbrowser-bundler","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/steelydylan%2Fbrowser-bundler/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/steelydylan%2Fbrowser-bundler/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/steelydylan%2Fbrowser-bundler/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/steelydylan","download_url":"https://codeload.github.com/steelydylan/browser-bundler/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":244710182,"owners_count":20497209,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-10-10T23:25:32.382Z","updated_at":"2025-03-20T23:30:17.242Z","avatar_url":"https://github.com/steelydylan.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# BrowserBundler\n\nBundle React and TypeScript online without Node.js\n\n## Playground\n\nhttps://mosya.dev/tools/react-ts\n\n## Screenshots\n\n![](./screenshot.png)\n\n## Install\n\n```\nnpm install browser-bundler\n```\n\n## Example\n\n```js\nimport { browserBundle } from \"browser-bundler\";\n\nconst textarea = document.querySelector(\"#textarea\") as HTMLTextAreaElement\nconst iframe = document.querySelector(\"#result\") as HTMLIFrameElement\n\nif (textarea \u0026\u0026 iframe) {\n  textarea.value = `import React from \"react\";\nimport ReactDOM from \"react-dom\";\n\nconst App = () {\n  return (\u003cdiv\u003eHello World\u003c/div\u003e\n}\n\nReactDOM.render(\u003cApp /\u003e, document.getElementById(\"root\"));`;\n\ntextarea.addEventListener(\"input\", async () =\u003e {\n  const code = textarea.value\n  const { code: bundleCode } = await browserBundle(code)\n  iframe.srcdoc = `\n    \u003chtml\u003e\n      \u003chead\u003e\n        \u003cmeta charset=\"utf-8\"\u003e\n      \u003c/head\u003e\n      \u003cbody\u003e\n        \u003cdiv id=\"root\"\u003e\u003c/div\u003e\n        \u003cscript type=\"module\"\u003e\n        ${bundleCode}\n        \u003c/script\u003e\n      \u003c/body\u003e\n    \u003c/html\u003e\n  `\n})\ntextarea.dispatchEvent(new Event(\"input\"))\n```\n\n\n## Relative Path\n\n```js\nimport { browserBundle } from \"browser-bundler\";\n\nconst code = `\nimport React from \"react\";\nimport ReactDOM from \"react-dom\";\nimport { Hello } from \"./hello.tsx\";\n\nconst App = () =\u003e {\n  return (\u003cdiv\u003e\u003cHello /\u003e\u003c/div\u003e)\n}\n\nReactDOM.render(\u003cApp /\u003e, document.getElementById(\"root\"));\n`\n\nconst result = await browserBundle(code, {\n  files: {\n    \"./hello.tsx\": `import React from \"react\";\n    export const Hello = () =\u003e {\n      return (\u003cdiv\u003eHello World\u003c/div\u003e)\n    }`,\n  }\n})\n```","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsteelydylan%2Fbrowser-bundler","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fsteelydylan%2Fbrowser-bundler","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsteelydylan%2Fbrowser-bundler/lists"}