https://github.com/huozhi/devjar

live code runtime for your react project in browser
https://github.com/huozhi/devjar

bundless esm live-coding livebundle livecode playground react react-live-code

Last synced: 12 days ago
JSON representation

live code runtime for your react project in browser

• Host: GitHub
• URL: https://github.com/huozhi/devjar
• Owner: huozhi
• Created: 2022-04-20T19:02:48.000Z (over 2 years ago)
• Default Branch: main
• Last Pushed: 2024-05-03T22:20:24.000Z (6 months ago)
• Last Synced: 2024-05-03T23:27:35.467Z (6 months ago)
• Topics: bundless, esm, live-coding, livebundle, livecode, playground, react, react-live-code
• Language: JavaScript
• Homepage: https://devjar.vercel.app
• Size: 111 KB
• Stars: 205
• Watchers: 2
• Forks: 4
• Open Issues: 8
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# devjar

> live code runtime for your react project in browser

![image](https://repository-images.githubusercontent.com/483779830/28347c03-774a-4766-b113-54041fad1e72)

### Introduction

devjar 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. 

Notice: devjar only works for browser runtime at the moment. It will always render the default export component in `index.js` as the app entry.

### Install

```sh

pnpm add devjar

```

### Usage

#### ``

`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.

**Props**

* `files`: An object that specifies the files you want to include in your development environment.

* `getModuleUrl`: A function that maps module names to CDN URLs.

* `onError`: Callback function of error event from the iframe sandbox. By default `console.log`.

```jsx

import { DevJar } from 'devjar'

const CDN_HOST = 'https://esm.sh'

const files = {

  'index.js': `export default function App() { return 'hello world' }`

}

function App() {

  return (

     {

        return `${CDN_HOST}/${m}`

      }}

    />

  )

}

```

#### `useLiveCode(options)`

**Parameters**

* `options`

  * `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.

**Returns**

* `state`

  * `ref`: A reference to the iframe element where the live coding will be executed.

  * `error`: An error message in case the live coding encounters an issue.

  * `load(codeFiles)`: void: Loads code files and executes them as live code.

```jsx

import { useLiveCode } from 'devjar'

function Playground() {

  const { ref, error, load } = useLiveCode({

    // The CDN url of each imported module path in your code

    // e.g. `import React from 'react'` will load react from skypack.dev/react

    getModulePath(modPath) {

      return `https://cdn.skypack.dev/${modPath}`

    }

  })

  // logging failures

  if (error) {

    console.error(error)

  }

  // load code files and execute them as live code

  function run() {

    load({

      // `index.js` is the entry of every project

      'index.js': `export default function App() { return 'hello world' }`,

      // other relative modules can be used in the live coding

      './mod': `export default function Mod() { return 'mod' }`,

    })

  }

  // Attach the ref to an iframe element for runtime of code execution

  return (

    


      run

      

    

  )

}

```


### License

The MIT License (MIT).