https://github.com/plotdb/sandbox

Handy Sandbox for executing / rendering arbitrary JavaScript.
https://github.com/plotdb/sandbox

Last synced: about 2 months ago
JSON representation

Handy Sandbox for executing / rendering arbitrary JavaScript.

• Host: GitHub
• URL: https://github.com/plotdb/sandbox
• Owner: plotdb
• License: mit
• Created: 2019-05-15T14:53:40.000Z (over 5 years ago)
• Default Branch: master
• Last Pushed: 2022-12-15T16:02:59.000Z (about 2 years ago)
• Last Synced: 2024-10-12T01:18:17.205Z (3 months ago)
• Language: JavaScript
• Homepage:
• Size: 2.01 MB
• Stars: 0
• Watchers: 2
• Forks: 0
• Open Issues: 3
• Metadata Files:
  • Readme: README.md
  • Changelog: CHANGELOG.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# sandbox.js

Sandboxing javascript in embedded iframe.

## Usage

var sb = new sandbox(config);

## Configurations

 * root - root element. sandbox.js will create one if this is omitted.

 * container - if root is not specified or root doesn't have a parent, attach root to container.

   default to document.body if both root and container are omitted.

 * sandbox - iframe sandbox attributes. default to "allow-scripts allow-pointer-lock".

   Note: blob iframe in Firefox exploits host cookie with empty sandbox.

 * className: space separated class list to add over the root element.

 * window - works in standalone popup window. root and container won't be necessary when window provided.

   window, if provided, should be an object containing following members:

   - name - window name. randomly generated if omitted.

   - width - window width. decided by sandbox.js if omitted.

   - height - window height. decided by sandbox.js if omitted.

## Methods

 * setProxy(({obj: obj}) - set an object as proxy interface. Proxy object must passed in an object like:

   ```

   sb.setProxy({ Interface: Interface });

   ```

   once set, you can invoke corresponding object in sandbox with following:

   ```

   sb.proxy.someFunc(args);

   ```

   you must have the object ( e.g., Interface ) with the exact same name as a global object in sandbox context.

 * send(msg) - send message to sandbox. msg will be wrapped in an object as:

   ```

   { type: \msg, payload: your-msg-data }

   ```

 * reload() - reload sandbox.

 * load(payload) - initialize sandbox content. payload can be a plain string or has following structure:

   ```

   {

      "html": (string or {url: HTML-URL} ),

      "css":  (string or {url: CSS-URL} ),

      "js":   (string or {url: JS-URL} )

   }

   ```

 * openWindow(cfg) - open sandbox in a standalone window.

   - cfg.name - window name.

## Sample Usage

iframe mode:

```

    /* create a sandbox instance */ 

    var sb = new sandbox({

      container: 'selector-for-certain-node',

      className: 'space separated class names'

    });

    /* load and render code */

    sb.load({js: '...', html: '...', css: '...'});

    /* you can still render it again in a standalone window */

    sb.openWindow({name: "window-name"})

      .then(function() { ... });

```

window mode:

```

    /* create a sandbox instance */ 

    var sb = new sandbox({

      window: 'window-name'

    });

    /* load and render code */

    sb.load({js: '...', html: '...', css: '...'});

```

you can also init with both modes:

```

    /* create a sandbox instance */ 

    var sb = new sandbox({

      window: 'window-name',

      container: 'selector-for-certain-node'

    });

```

## Resources

 - how figma support plugins: https://www.figma.com/blog/how-we-built-the-figma-plugin-system/

## License

MIT