browser-module-sandbox
Advanced tools
browser-module-sandbox - npm Package Compare versions
Comparing version 0.1.1 to 1.0.0
27
index.js
@@ -6,2 +6,3 @@ var inherits = require('inherits') | ||
| var request = require('browser-request') | ||
| var detective = require('detective') | ||
@@ -18,3 +19,3 @@ module.exports = function(opts) { | ||
| this.iframeBody = opts.iframeBody || "" | ||
| this.snuggieAPI = opts.snuggieAPI || window.location.protocol + '//' + window.location.host | ||
| this.cdn = opts.cdn || window.location.protocol + '//' + window.location.host | ||
| this.iframe = iframe({ container: this.container, scrollingDisabled: true }) | ||
@@ -24,8 +25,26 @@ this.iframeStyle = "<style type='text/css'> html, body { margin: 0; padding: 0; border: 0; } </style>" | ||
| Sandbox.prototype.bundle = function(body) { | ||
| Sandbox.prototype.bundle = function(entry) { | ||
| var self = this | ||
| var modules = detective(entry) | ||
| self.emit('bundleStart') | ||
| request({method: "POST", body: body, url: this.snuggieAPI, json: true}, function(err, resp, json) { | ||
| var body = { | ||
| "options": { | ||
| "debug": true | ||
| }, | ||
| "dependencies": {} | ||
| } | ||
| modules.map(function(module) { | ||
| body.dependencies[module] = 'latest' | ||
| }) | ||
| request({method: "POST", body: body, url: this.cdn + '/multi', json: true}, function(err, resp, json) { | ||
| var allBundles = '' | ||
| Object.keys(json).map(function(module) { | ||
| allBundles += json[module] | ||
| }) | ||
| // setTimeout is because iframes report inaccurate window.innerWidth/innerHeight, even after DOMContentLoaded! | ||
| var body = self.iframeBody + '<script type="text/javascript"> setTimeout(function(){' + json.bundle + '}, 0)</script>' | ||
| var body = self.iframeBody + | ||
| '<script type="text/javascript"> setTimeout(function(){' + | ||
| allBundles + | ||
| entry + | ||
| '}, 0)</script>' | ||
| self.iframe.setHTML({ head: self.iframeHead + self.iframeStyle, body: body }) | ||
@@ -32,0 +51,0 @@ self.emit('bundleEnd') |
| { | ||
| "name": "browser-module-sandbox", | ||
| "version": "0.1.1", | ||
| "description": "browser editor for code that gets 'compiled' on the server with node and run on the client", | ||
| "version": "1.0.0", | ||
| "description": "uses browserify-cdn to run node code in an iframe", | ||
| "repository": { | ||
@@ -13,3 +13,4 @@ "type": "git", | ||
| "inherits": "1.0.0", | ||
| "extend": "1.1.3" | ||
| "extend": "1.1.3", | ||
| "detective": "~2.1.2" | ||
| }, | ||
@@ -16,0 +17,0 @@ "engines": { |
| # browser-module-sandbox | ||
| editor for code that gets 'compiled' on the server with node and then sent back and executed on the client. | ||
| uses browserify-cdn to run node code in an iframe | ||
| there are two "panes", one is a codemirror editor pane and other is a display pane that shows the output (if any) of the program. there is also a built in toolbar UI widget for switching between the two states | ||
| requires a hosted browserify-cdn | ||
| for an example go see the [voxel-gist](http://github.com/maxogden/voxel-gist) project | ||
| to compile the dependencies on the server you should run an instance of [snuggie](https://github.com/maxogden/snuggie) | ||
| ``` | ||
@@ -15,2 +11,3 @@ npm install browser-module-sandbox | ||
| ## usage | ||
@@ -24,27 +21,15 @@ | ||
| you need to give it dom elements as targets that it will use to to render itself. `output` and `editor` for the two "panes" that get turned on and off based on the state of `control`. | ||
| ```javascript | ||
| var sandbox = sandbox({ | ||
| snuggieAPI: 'http://localhost:8000', // defaults to the current browser domain root | ||
| defaultCode: "var foo = require('foo')", // defaults to 'var url = require("url")' | ||
| output: document.querySelector('#output'), | ||
| controls: document.querySelector('#controls'), | ||
| editor: document.querySelector('#edit'), | ||
| codemirrorOptions: {}, | ||
| cdn: 'http://localhost:8000', // browserify-cdn API endpoint, defaults to the current browser domain root, | ||
| container: dom element where the iframe should be appended, | ||
| iframeHead: string that gets prepended to the `<head>` of the output iframe, | ||
| iframeBody: string that gets prepended to the `<body>` of the output iframe | ||
| iframeBody: string that gets prepended to the `<body>` of the output iframe, | ||
| iframeStyle: string for css, gets appended to end of iframeHead, | ||
| iframe: iframe instance, default creates a new one inside container | ||
| }) | ||
| ``` | ||
| ## sandbox.on('bundleStart') && sandbox.on('bundleEnd') | ||
| these fire when the output pane is activated. the sandbox will emit `bundleStart`, upload the contents of the editor to the server, and then when it receives and renders them will emit `bundleEnd` | ||
| ## sandbox.on('edit') | ||
| this fires when the edit button is clicked, which also switches back to the editor | ||
| ## license | ||
| BSD |
New alerts
Major refactor
Supply chain riskPackage has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.
Found 1 instance in 1 package
Fixed alerts
No v1
QualityPackage is not semver >=1. This means it is not stable and does not support ^ ranges.
Found 1 instance in 1 package
Improved metrics
- Number of low quality alerts
- decreased by-50%
1
Worsened metrics
- Total package byte prevSize
- decreased by-98.54%
2898
- Dependency count
- increased by25%
5
- Number of package files
- decreased by-33.33%
4
- Lines of code
- decreased by-98.94%
48
- Number of lines in readme file
- decreased by-31.25%
33
- Number of medium supply chain risk alerts
- increased byInfinity%
1
Dependency changes
+ Addeddetective@~2.1.2
+ Addeddetective@2.1.2(transitive)
+ Addedescodegen@0.0.15(transitive)
+ Addedesprima@1.0.2(transitive)
+ Addedsource-map@0.7.4(transitive)