Merge pull request cerebral#284 from eirikhm/next

WIP: VS Code extension

Author: christianalfoni

package-lock.json

@@ -28,6 +28,8 @@
     "@babel/plugin-transform-runtime": "^7.2.0",
     "@babel/preset-env": "^7.2.0",
     "@types/node": "10.5.1",
+    "@types/vscode": "^1.35.0",
+    "@types/ws": "6.0.1",
     "axios": "0.18.0",
     "color": "3.0.0",
     "color-hash": "1.0.3",
@@ -52,11 +54,11 @@
     "react-icons": "^3.5.0",
     "styled-components": "3.3.3",
     "tslib": "1.9.3",
+    "vscode": "^1.1.34",
     "vue": "2.5.16",
     "vue-hot-reload-api": "2.3.0",
     "vue-styled-components": "1.3.0",
-    "ws": "7.0.0",
-    "@types/ws": "6.0.1"
+    "ws": "7.0.0"
   },
   "devDependencies": {
     "@babel/core": "7.2.2",

package.json

@@ -1,24 +1,38 @@
 const WebSocket = require('ws')
 
+
+
 class DevtoolBackend {
   constructor(options) {
     this.options = options
-
     this.onError = this.onError.bind(this)
+
     this.onClientConnection = this.onClientConnection.bind(this)
     this.onDevtoolConnection = this.onDevtoolConnection.bind(this)
+    this.onConnection = this.onConnection.bind(this)
     this.onClientMessage = this.onClientMessage.bind(this)
     this.onDevtoolMessage = this.onDevtoolMessage.bind(this)
-
+    
     this.devtoolServer = new WebSocket.Server(
       {
         port: options.port,
       },
       () => {}
     )
 
-    this.devtoolServer.on('connection', this.onDevtoolConnection)
+    this.devtoolServer.on('connection', this.onConnection)
+    this.devtoolServer.on('error', this.onError)
+  }
+
+  onConnection(ws, req) {
+    // devtools connects with ?devtools=1 in url
+    if (req.url.indexOf("devtools") !== -1) {
+      this.onDevtoolConnection(ws, req)
+    } else {
+      this.onClientConnection(ws, req)
+    }
   }
+
   onDevtoolConnection(ws) {
     this.devtoolSocket = ws
     this.devtoolSocket.on('message', this.onDevtoolMessage)
@@ -46,14 +60,16 @@ class DevtoolBackend {
         this.options.onRelaunch()
         break
       case 'connect':
-        this.createClientServer(parsedMessage.data)
+          console.log('TODO: connect'); // TODO: Let devtools know that they are connected to server?
+        // this.createClientServer(parsedMessage.data)
         break
       default:
         this.clientSocket.send(JSON.stringify(parsedMessage.data))
     }
   }
   onError() {
-    this.devtoolServer.emit('port:exists')
+    console.log('TODO: onError');
+    // this.devtoolServer.emit('port:exists')
   }
   onClientConnection(ws) {
     this.clientSocket = ws
@@ -82,23 +98,6 @@ class DevtoolBackend {
       )
     }
   }
-  createClientServer(port) {
-    if (this.clientPort === Number(port)) {
-      return
-    }
-
-    if (this.clientServer) {
-      this.clientServer.close()
-    }
-
-    this.clientPort = Number(port)
-    this.clientServer = new WebSocket.Server(
-      { port: this.clientPort },
-      () => {}
-    )
-    this.clientServer.on('connection', this.onClientConnection)
-    this.clientServer.on('error', this.onError)
-  }
 }
 
 DevtoolBackend.create = (options) => new DevtoolBackend(options)

packages/node_modules/overmind-devtools-client/DevtoolBackend.js

@@ -12,7 +12,7 @@ class WebsocketConnector {
   private callbacks: {
     [event: string]: Function[]
   } = {}
-  private socket = new WebSocket('ws://localhost:1040')
+  private socket = new WebSocket('ws://localhost:3031?devtools=1') // TODO should be able to configure
   private messagesBeforeConnected: Array<[string, any, any]> = []
   private isOpen = false
   constructor() {

packages/node_modules/overmind-devtools-client/src/BackendConnector.ts

@@ -0,0 +1,4 @@
+out
+node_modules
+.vscode-test/
+*.vsix