Serve umd modules for cli

reduxjs · Jan 4, 2019 · 8810fe4 · 8810fe4
1 parent f75d791
commit 8810fe4
Show file tree

Hide file tree

Showing 6 changed files with 99 additions and 74 deletions.
diff --git a/.gitignore b/.gitignore
@@ -3,5 +3,6 @@ node_modules
 .DS_Store
 lib
 dist
+umd
 coverage
 .idea
diff --git a/packages/redux-devtools-cli/README.md b/packages/redux-devtools-cli/README.md
@@ -1,7 +1,7 @@
 Redux DevTools Command Line Interface
 =====================================
 
-Bridge for communicating with an application remotely via [Redux DevTools extension](https://github.com/zalmoxisus/redux-devtools-extension), [Remote Redux DevTools](https://github.com/zalmoxisus/remote-redux-devtools) or [RemoteDev](https://github.com/zalmoxisus/remotedev). Running your server is optional, you can use [remotedev.io](https://remotedev.io) instead.
+Bridge for remote debugging via [Redux DevTools extension](https://github.com/zalmoxisus/redux-devtools-extension), [Remote Redux DevTools](https://github.com/zalmoxisus/remote-redux-devtools) or [RemoteDev](https://github.com/zalmoxisus/remotedev).
 
 ### Usage
 

diff --git a/packages/redux-devtools-cli/views/index.ejs → packages/redux-devtools-cli/app/index.html b/packages/redux-devtools-cli/views/index.ejs → packages/redux-devtools-cli/app/index.html
@@ -26,18 +26,18 @@
   </head>
   <body>
     <div id="root"></div>
-    <script src="//unpkg.com/react@0.14/dist/react.min.js"></script>
-    <script src="//unpkg.com/react-dom@0.14/dist/react-dom.min.js"></script>
-    <script src="//unpkg.com/remotedev-app/dist/remotedev-app.min.js"></script>
+    <script src="/react.production.min.js"></script>
+    <script src="/react-dom.production.min.js"></script>
+    <script src="/redux-devtools-core.min.js"></script>
+    <script src="/port.js"></script>
     <script>
-      window.remotedevOptions = {
-        hostname: location.hostname,
-        port: <%= port %>,
-        autoReconnect: true
-      };
       ReactDOM.render(
-        React.createElement(RemoteDevApp, {
-          socketOptions: window.remotedevOptions
+        React.createElement(ReduxDevTools, {
+          socketOptions: {
+            hostname: location.hostname,
+            port: reduxDevToolsPort,
+            autoReconnect: true
+          }
         }),
         document.querySelector('#root')
       );

diff --git a/packages/redux-devtools-cli/package.json b/packages/redux-devtools-cli/package.json
@@ -1,19 +1,20 @@
 {
   "name": "redux-devtools-cli",
   "version": "1.0.0-1",
-  "description": "Run the ReduxDevTools monitor on your local server.",
+  "description": "CLI for remote debugging with Redux DevTools.",
   "main": "index.js",
   "bin": {
     "redux-devtools": "bin/redux-devtools.js"
   },
   "files": [
     "bin",
     "src",
-    "views",
+    "app",
     "index.js",
     "defaultDbOptions.json"
   ],
   "scripts": {
+    "start": "node ./bin/redux-devtools.js",
     "test": "NODE_ENV=test mocha --recursive",
     "test:watch": "NODE_ENV=test mocha --recursive --watch",
     "prepublishOnly": "npm run test"
@@ -35,7 +36,6 @@
     "body-parser": "^1.15.0",
     "chalk": "^1.1.3",
     "cors": "^2.7.1",
-    "ejs": "^2.4.1",
     "express": "^4.13.3",
     "getport": "^0.1.0",
     "graphql": "^0.13.0",
@@ -45,6 +45,9 @@
     "lodash": "^4.15.0",
     "minimist": "^1.2.0",
     "morgan": "^1.7.0",
+    "react": "^16.0.0",
+    "react-dom": "^16.0.0",
+    "redux-devtools-core": "^1.0.0-1",
     "semver": "^5.3.0",
     "socketcluster": "^14.3.3",
     "sqlite3": "^4.0.4",

diff --git a/packages/redux-devtools-cli/src/routes.js b/packages/redux-devtools-cli/src/routes.js
@@ -0,0 +1,77 @@
+var path = require('path');
+var express = require('express');
+var morgan = require('morgan');
+var bodyParser = require('body-parser');
+var cors = require('cors');
+var graphiqlMiddleware = require('./middleware/graphiql');
+var graphqlMiddleware = require('./middleware/graphql');
+
+var app = express.Router();
+
+function serveUmdModule(name) {
+  app.use(express.static(require.resolve(name).match(/.*\/(node_modules|packages)\/[^/]+\//)[0] + 'umd'));
+}
+
+function routes(options, store) {
+  var limit = options.maxRequestBody;
+  var logHTTPRequests = options.logHTTPRequests;
+
+  if (logHTTPRequests) {
+    if (typeof logHTTPRequests === 'object') app.use(morgan('combined', logHTTPRequests));
+    else app.use(morgan('combined'));
+  }
+
+  app.use('/graphiql', graphiqlMiddleware);
+
+  serveUmdModule('react');
+  serveUmdModule('react-dom');
+  serveUmdModule('redux-devtools-core');
+
+  app.get('/port.js', function (req, res) {
+    res.send('reduxDevToolsPort = ' + options.port);
+  });
+  app.get('*',  function (req, res) {
+    res.sendFile(path.join(__dirname, '../app/index.html'));
+  });
+
+  app.use(cors({methods: 'POST'}));
+  app.use(bodyParser.json({limit: limit}));
+  app.use(bodyParser.urlencoded({limit: limit, extended: false}));
+
+  app.use('/graphql', graphqlMiddleware(store));
+
+  app.post('/', function (req, res) {
+    if (!req.body) return res.status(404).end();
+    switch (req.body.op) {
+      case 'get':
+        store.get(req.body.id).then(function (r) {
+          res.send(r || {});
+        }).catch(function (error) {
+          console.error(error);
+          res.sendStatus(500)
+        });
+        break;
+      case 'list':
+        store.list(req.body.query, req.body.fields).then(function (r) {
+          res.send(r);
+        }).catch(function (error) {
+          console.error(error);
+          res.sendStatus(500)
+        });
+        break;
+      default:
+        store.add(req.body).then(function (r) {
+          res.send({id: r.id, error: r.error});
+          scServer.exchange.publish('report', {
+            type: 'add', data: r
+          });
+        }).catch(function (error) {
+          console.error(error);
+          res.status(500).send({})
+        });
+    }
+  });
+  return app;
+}
+
+module.exports = routes;
diff --git a/packages/redux-devtools-cli/src/worker.js b/packages/redux-devtools-cli/src/worker.js
@@ -1,11 +1,7 @@
 var SCWorker = require("socketcluster/scworker");
-var path = require('path');
-var app = require('express')();
-var bodyParser = require('body-parser');
-var cors = require('cors');
-var morgan = require('morgan');
-var graphiqlMiddleware = require('./middleware/graphiql');
-var graphqlMiddleware = require('./middleware/graphql');
+var express = require('express');
+var app = express();
+var routes = require('./routes');
 var createStore = require('./store');
 
 class Worker extends SCWorker {
@@ -14,62 +10,10 @@ class Worker extends SCWorker {
     var scServer = this.scServer;
     var options = this.options;
     var store = createStore(options);
-    var limit = options.maxRequestBody;
-    var logHTTPRequests = options.logHTTPRequests;
 
     httpServer.on('request', app);
 
-    app.set('view engine', 'ejs');
-    app.set('views', path.resolve(__dirname, '..', 'views'));
-
-    if (logHTTPRequests) {
-      if (typeof logHTTPRequests === 'object') app.use(morgan('combined', logHTTPRequests));
-      else app.use(morgan('combined'));
-    }
-
-    app.use('/graphiql', graphiqlMiddleware);
-
-    app.get('*', function (req, res) {
-      res.render('index', {port: options.port});
-    });
-
-    app.use(cors({methods: 'POST'}));
-    app.use(bodyParser.json({limit: limit}));
-    app.use(bodyParser.urlencoded({limit: limit, extended: false}));
-
-    app.use('/graphql', graphqlMiddleware(store));
-
-    app.post('/', function (req, res) {
-      if (!req.body) return res.status(404).end();
-      switch (req.body.op) {
-        case 'get':
-          store.get(req.body.id).then(function (r) {
-            res.send(r || {});
-          }).catch(function (error) {
-            console.error(error);
-            res.sendStatus(500)
-          });
-          break;
-        case 'list':
-          store.list(req.body.query, req.body.fields).then(function (r) {
-            res.send(r);
-          }).catch(function (error) {
-            console.error(error);
-            res.sendStatus(500)
-          });
-          break;
-        default:
-          store.add(req.body).then(function (r) {
-            res.send({id: r.id, error: r.error});
-            scServer.exchange.publish('report', {
-              type: 'add', data: r
-            });
-          }).catch(function (error) {
-            console.error(error);
-            res.status(500).send({})
-          });
-      }
-    });
+    app.use(routes(options, store));
 
     scServer.addMiddleware(scServer.MIDDLEWARE_EMIT, function (req, next) {
       var channel = req.event;