Refactored to simple server implementation, added sandbox domain and handling entry points

Author: christianalfoni

app/components/AddFile/index.js

@@ -30,13 +30,20 @@ function AddFile(props) {
           <form onSubmit={onSubmit}>
             <input
               value={props.value}
+              onClick={(e) => e.stopPropagation()}
               onChange={onAddFileInputChange}
               onKeyDown={onAddFileInputKeyDown}
               className={styles.input}
               autoFocus
-              placeholder={props.placeholder}
-              onBlur={() => props.onAddFileAborted()}>
-            </input>
+              placeholder={props.placeholder}/>
+            <label className={styles.entry} onClick={(e) => e.stopPropagation()}>
+              <input
+                type="checkbox"
+                checked={props.isEntry}
+                disabled={props.disableEntry}
+                onChange={() => props.onEntryChange()}/>
+                <span>Is entry</span>
+            </label>
           </form>
         </div>
       </div>

app/components/AddFile/styles.css

@@ -38,3 +38,18 @@
 .input:focus {
   outline: 0;
 }
+
+.entry {
+  display: inline-block;
+  margin: 0 5px;
+  height: 30px;
+}
+
+.entry input {
+  margin-right: 5px;
+}
+
+.entry span {
+  position: relative;
+  top: 1px;
+}

app/components/Preview/index.js

@@ -14,27 +14,33 @@ class Preview extends React.Component {
   }
   componentDidUpdate(prevProps) {
     if (prevProps.isRunning && !this.props.isRunning) {
-      this.refs.iframe.src =  location.origin + '/api/sandbox';
+      this.refs.iframe.src =  [
+        location.protocol,
+        '//',
+        location.hostname.replace('www', 'sandbox'),
+        (location.port ? ':' + location.port : ''),
+        '/'
+      ].join('')
     }
   }
   componentDidMount() {
     window.addEventListener('message', this.onIframeMessage);
     this.refs.iframe.addEventListener('load', () => {
-      this.refs.iframe.contentWindow.document.addEventListener('click', () => {
-        this.props.signals.bin.appClicked();
-      });
+
     });
   }
   onIframeMessage(event) {
     if (event.data.type === 'loaded') {
-      console.log('Loaded!');
       this.props.signals.bin.iframeLoaded();
     }
     if (event.data.type === 'log') {
       this.props.signals.bin.logReceived({
         value: event.data.value
       });
     }
+    if (event.data.type === 'click') {
+      this.props.signals.bin.appClicked();
+    }
   }
   render() {
     return (

app/components/Toolbar/index.js

@@ -10,6 +10,8 @@ import ToolbarButtonPopover from '../ToolbarButtonPopover';
 import Npm from '../Npm';
 import Boilerplates from '../Boilerplates';
 
+import hasEntry from '../../computed/hasEntry';
+
 @Cerebral({
   files: 'bin.currentBin.files',
   selectedFileIndex: 'bin.selectedFileIndex',
@@ -25,7 +27,9 @@ import Boilerplates from '../Boilerplates';
   showBoilerplatesSelector: 'bin.showBoilerplatesSelector',
   vimModeEnabled: 'bin.vimMode',
   currentBin: 'bin.currentBin',
-  highlightCreateIssue: 'bin.highlightCreateIssue'
+  highlightCreateIssue: 'bin.highlightCreateIssue',
+  isEntry: 'bin.isEntry',
+  hasEntry: hasEntry
 })
 class Toolbar extends React.Component {
   static propTypes = {
@@ -157,11 +161,14 @@ class Toolbar extends React.Component {
         <div className={styles.row}>
           <AddFile
             onAddFileClick={signals.bin.addFileClicked}
+            onEntryChange={signals.bin.entryToggled}
             onFileNameChange={signals.bin.addFileNameUpdated}
             onFileSubmit={signals.bin.addFileSubmitted}
             onAddFileAborted={signals.bin.addFileAborted}
             showInput={this.props.showAddFileInput}
             placeholder="Filename..."
+            isEntry={this.props.isEntry}
+            disableEntry={this.props.hasEntry}
             value={this.props.newFileName}/>
           {this.renderFiles()}
         </div>

app/computed/hasEntry.js

@@ -0,0 +1,8 @@
+function canControl(get) {
+  const files = get('bin.currentBin.files');
+  return Boolean(files.filter((file) => {
+    return file.isEntry;
+  }).length)
+}
+
+export default canControl;

app/modules/Bin/actions/addFile.js

@@ -3,7 +3,8 @@ function addFile({state}) {
   const ext = fileName.split('.')[fileName.split('.').length - 1];
   state.push('bin.currentBin.files', {
     name: fileName,
-    content: ''
+    content: '',
+    isEntry: state.get('bin.isEntry')
   });
 
   if (ext === 'ts' && !state.get('bin.currentBin.loaders.typescript')) {

app/modules/Bin/actions/setEmptyBin.js

@@ -3,8 +3,16 @@ function setEmptyBin({state}) {
     packages: {},
     loaders: {},
     files: [{
-      name: 'main.js',
-      content: ''
+      name: 'index.html',
+      content: `<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8"/>
+  </head>
+  <body>
+
+  </body>
+</html>`
     }]
   });
   state.set('bin.selectedFileIndex', 0);

app/modules/Bin/index.js

@@ -32,6 +32,7 @@ import logPathSelected from './signals/logPathSelected';
 import welcomeBinClicked from './signals/welcomeBinClicked';
 import emptyBinClicked from './signals/emptyBinClicked';
 import toggleFullLog from './signals/toggleFullLog';
+import entryToggled from './signals/entryToggled';
 
 export default (options = {}) => {
   return (module, controller) => {
@@ -49,6 +50,7 @@ export default (options = {}) => {
         loaders: {},
         isLive: false
       },
+      isEntry: false,
       isLoadingBin: false,
       showBinLoader: false,
       logs: [],
@@ -98,6 +100,10 @@ export default (options = {}) => {
       logPathSelected: preventIfLive(logPathSelected),
       logReceived: preventIfLive(logReceived),
       toggleFullLog: preventIfLive(toggleFullLog),
+      entryToggled: preventIfLive(entryToggled),
+      addFileAborted: preventIfLive(addFileAborted),
+      addFileNameUpdated: preventIfLive(addFileNameUpdated),
+      addFileSubmitted: preventIfLive(addFileSubmitted),
       opened,
       vimModeClicked,
       linterRequested,
@@ -106,9 +112,6 @@ export default (options = {}) => {
       rootRouted,
       linted,
       iframeLoaded,
-      addFileAborted,
-      addFileNameUpdated,
-      addFileSubmitted,
       welcomeBinClicked,
       emptyBinClicked
     });

app/modules/Bin/signals/addFileSubmitted.js

@@ -8,5 +8,6 @@ export default [
   selectLastFile,
   set('state:/bin.newFileName', ''),
   set('state:/bin.showAddFileInput', false),
+  set('state:/bin.isEntry', false),
   shouldLint
 ];

app/modules/Bin/signals/appClicked.js

@@ -1,5 +1,7 @@
+import set from 'cerebral-addons/set';
 import hidePopups from '../factories/hidePopups';
 
 export default [
-  ...hidePopups
+  ...hidePopups,
+  set('state:/bin.showAddFileInput', false)
 ];

app/modules/Bin/signals/entryToggled.js

@@ -0,0 +1,5 @@
+import toggle from 'cerebral-addons/toggle';
+
+export default [
+  toggle('state:/bin.isEntry')
+];

index.html

@@ -52,6 +52,6 @@
       <img src="logo.png"/>
       <h3>Loading it up!</h3>
     </div>
-    <script type="text/javascript" src="/build/bundle.js"></script>
+    <script type="text/javascript" src="/client_bundle.js"></script>
   </body>
 </html>

package.json

@@ -21,12 +21,7 @@
   "homepage": "https://github.com/cerebral/cerebral-boilerplate",
   "scripts": {
     "start": "node start.js",
-    "dev": "concurrently \"npm run client\" \"npm run server\"",
-    "client": "kotatsu serve app/main.js --public public --index index.html --config webpack.config.js --devtool eval-source-map --proxy /api http://www.webpackbin.dev:4000/api",
-    "server": "kotatsu start start.js --source-maps",
-    "build": "npm run build:client",
-    "build:client": "kotatsu build client app/main.js --config webpack.production.config.js --source-maps --minify -o public/client_build.js",
-    "build:server": "kotatsu build server start.js --minify -o server_build.js",
+    "build": "webpack --config webpack.production.config.js",
     "postinstall": "node configure && npm run build"
   },
   "dependencies": {
@@ -89,12 +84,15 @@
     "source-map-support": "^0.4.0",
     "string-hash": "^1.1.0",
     "style-loader": "^0.13.0",
+    "subdomain": "^1.2.0",
     "tar-pack": "^3.1.3",
     "ts-loader": "^0.8.1",
     "typescript": "^1.8.2",
     "url-loader": "^0.5.7",
     "usage": "^0.7.1",
     "webpack-bin-babel-core": "https://github.com/christianalfoni/webpack-bin-babel-core.git",
+    "webpack-dev-middleware": "^1.5.1",
+    "webpack-hot-middleware": "^2.10.0",
     "ws": "^1.0.1"
   }
 }

server/index.js

@@ -1,8 +1,12 @@
 var server = require('http').createServer();
+var webpack = require('webpack');
+var config = require('../webpack.config.js');
+var webpackMiddleware = require('webpack-dev-middleware');
+var webpackHotMiddleware = require('webpack-hot-middleware');
 var WebSocketServer = require('ws').Server;
 var wss = new WebSocketServer({ server: server });
 var express = require('express');
-var webpack = require('webpack');
+var subdomain = require('subdomain');
 var compression = require('compression');
 var app = express();
 var MemoryFileSystem = require("memory-fs");
@@ -22,8 +26,7 @@ var npm = require('./npm');
 var bins = require('./bins');
 var liveConnection = require('./live');
 var zip = require('./zip');
-var usage = require('usage');
-var vendorsBundlesCleaner = require('./vendorsBundlesCleaner');
+var status = require('./status');
 
 preLoadPackages([
   // Core node
@@ -74,44 +77,54 @@ if (utils.isProduction()) {
     }
   });
 }
+
 app.use(compression())
 app.use(cookieParser());
+app.use(subdomain({
+  base: utils.isProduction() ? 'webpackbin.com' : 'webpackbin.dev',
+  ignoreWWW: true
+}));
 app.use(bodyParser.json());
 app.use(express.static(path.resolve('public')));
 app.use(sessions.middleware);
 
-app.get('/api/bins/:id', bins.get);
+if (!utils.isProduction()) {
+  const compiler = webpack(config);
 
-app.get('/api/sandbox/', sandbox.getIndex);
-app.get('/api/sandbox/*', sandbox.getFile)
-app.post('/api/sandbox', sandbox.updateSandbox);
+  app.use(webpackMiddleware(compiler, {
+    publicPath: config.output.publicPath,
+    contentBase: 'app',
+    stats: {
+      colors: true,
+      hash: false,
+      timings: true,
+      chunks: true,
+      chunkModules: false,
+      modules: false
+    }
+  }));
+
+  app.use(webpackHotMiddleware(compiler));
+}
 
+app.get('/api/bins/:id', bins.get);
 app.get('/api/packages/:packageName', npm.getPackageFromRegistry);
 app.get('/api/bundles', database.searchBundles);
-
 app.get('/api/boilerplates/:id', bins.getBoilerplate);
-
 app.get('/api/project.zip', zip);
+app.post('/api/sandbox', sandbox.updateSandbox);
 
-app.get('/status', function (req, res) {
-  var pid = process.pid;
-  var options = { keepHistory: true }
-  usage.lookup(pid, options, function(err, result) {
-    if (err) {
-      return res.sendStatus(500);
-    }
-    res.send({
-      memory: result,
-      vendorsInMemory: vendorsBundlesCleaner.getBundles()
-    });
-  });
-});
+app.get('/subdomain/sandbox/', sandbox.getIndex);
+app.get('/subdomain/sandbox/*', sandbox.getFile)
+
+app.get('/status', status.get);
 
 var indexHtml = fs.readFileSync(path.resolve('index.html'))
   .toString()
   .replace('/build/bundle.js', '/client_build.js')
   .replace('</body>', "<script>(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)})(window,document,'script','//www.google-analytics.com/analytics.js','ga');ga('create', 'UA-74769782-1', 'auto');ga('send', 'pageview');</script>\n  </body>");
 app.get('*', function(req, res) {
+  console.log('Got here!');
   res.send(indexHtml);
 });