{"id":13837627,"url":"https://github.com/huozhi/devjar","last_synced_at":"2025-04-10T04:58:06.425Z","repository":{"id":38440306,"uuid":"483779830","full_name":"huozhi/devjar","owner":"huozhi","description":"live code runtime for your react project in browser","archived":false,"fork":false,"pushed_at":"2024-05-03T22:20:24.000Z","size":114,"stargazers_count":215,"open_issues_count":8,"forks_count":4,"subscribers_count":2,"default_branch":"main","last_synced_at":"2024-10-30T06:54:56.577Z","etag":null,"topics":["bundless","esm","live-coding","livebundle","livecode","playground","react","react-live-code"],"latest_commit_sha":null,"homepage":"https://devjar.vercel.app","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/huozhi.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"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":"2022-04-20T19:02:48.000Z","updated_at":"2024-10-15T19:21:52.000Z","dependencies_parsed_at":"2024-05-03T23:27:45.951Z","dependency_job_id":"78f1d7a2-1fbf-4cf8-af0a-cdc79552dae1","html_url":"https://github.com/huozhi/devjar","commit_stats":null,"previous_names":[],"tags_count":7,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/huozhi%2Fdevjar","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/huozhi%2Fdevjar/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/huozhi%2Fdevjar/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/huozhi%2Fdevjar/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/huozhi","download_url":"https://codeload.github.com/huozhi/devjar/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248161264,"owners_count":21057554,"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":["bundless","esm","live-coding","livebundle","livecode","playground","react","react-live-code"],"created_at":"2024-08-04T15:01:17.634Z","updated_at":"2025-04-10T04:58:06.391Z","avatar_url":"https://github.com/huozhi.png","language":"JavaScript","funding_links":[],"categories":["JavaScript"],"sub_categories":[],"readme":"# devjar\n\u003e live code runtime for your react project in browser\n\n\n![image](https://repository-images.githubusercontent.com/483779830/55bf67ee-fcc6-4a12-ad0c-5221a5f78c26)\n\n### Introduction\n\ndevjar is a library that enables you to live test and share your code snippets and examples with others. devjar will generate a live code editor where you can run your code snippets and view the results in real-time based on the provided code content of your React app. \n\nNotice: devjar only works for browser runtime at the moment. It will always render the default export component in `index.js` as the app entry.\n\n### Install\n\n```sh\npnpm add devjar\n```\n\n\n### Usage\n\n#### `\u003cDevJar\u003e`\n\n`DevJar` is a react component that allows you to develop and test your code directly in the browser, using a CDN to load your dependencies.\n\n**Props**\n\n* `files`: An object that specifies the files you want to include in your development environment.\n* `getModuleUrl`: A function that maps module names to CDN URLs.\n* `onError`: Callback function of error event from the iframe sandbox. By default `console.log`.\n\n\n```jsx\nimport { DevJar } from 'devjar'\n\nconst CDN_HOST = 'https://esm.sh'\n\nconst files = {\n  'index.js': `export default function App() { return 'hello world' }`\n}\n\nfunction App() {\n  return (\n    \u003cDevJar\n      files={files}\n      getModuleUrl={(m) =\u003e {\n        return `${CDN_HOST}/${m}`\n      }}\n    /\u003e\n  )\n}\n```\n\n#### `useLiveCode(options)`\n\n**Parameters**\n\n* `options`\n  * `getModulePath(module)`: A function that receives the module name and returns the CDN url of each imported module path. For example, import React from 'react' will load React from skypack.dev/react.\n\n**Returns**\n\n* `state`\n  * `ref`: A reference to the iframe element where the live coding will be executed.\n  * `error`: An error message in case the live coding encounters an issue.\n  * `load(codeFiles)`: void: Loads code files and executes them as live code.\n\n```jsx\nimport { useLiveCode } from 'devjar'\n\nfunction Playground() {\n  const { ref, error, load } = useLiveCode({\n    // The CDN url of each imported module path in your code\n    // e.g. `import React from 'react'` will load react from skypack.dev/react\n    getModulePath(modPath) {\n      return `https://cdn.skypack.dev/${modPath}`\n    }\n  })\n\n  // logging failures\n  if (error) {\n    console.error(error)\n  }\n\n  // load code files and execute them as live code\n  function run() {\n    load({\n      // `index.js` is the entry of every project\n      'index.js': `export default function App() { return 'hello world' }`,\n\n      // other relative modules can be used in the live coding\n      './mod': `export default function Mod() { return 'mod' }`,\n    })\n  }\n\n  // Attach the ref to an iframe element for runtime of code execution\n  return (\n    \u003cdiv\u003e\n      \u003cbutton onClick={run}\u003erun\u003c/button\u003e\n      \u003ciframe ref={ref} /\u003e\n    \u003c/div\u003e\n  )\n}\n```\n\n### License\n\nThe MIT License (MIT).\n\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fhuozhi%2Fdevjar","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fhuozhi%2Fdevjar","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fhuozhi%2Fdevjar/lists"}