imp: Extract debugger-ui (#832)

* imp: Extract debugger-ui

* Extract styles, images and audio file

* Typescript reference

* Remove IIFE and add copyright comment

Author: Esemesek

.gitignore

@@ -8,3 +8,4 @@ build/
 .eslintcache
 !packages/cli/src/commands/init/__fixtures__/editTemplate/node_modules
 *.tsbuildinfo
+.cache

package.json

@@ -5,8 +5,9 @@
   ],
   "scripts": {
     "prebuild": "yarn build:ts",
-    "build": "node ./scripts/build.js",
+    "build": "node ./scripts/build.js && yarn build:debugger",
     "build:ts": "node ./scripts/buildTs.js",
+    "build:debugger": "yarn workspace @react-native-community/debugger-ui build",
     "build-clean": "rm -rf ./packages/*/build",
     "build-clean-all": "rm -rf ./packages/*/build ./packages/*/tsconfig.tsbuildinfo",
     "watch": "node ./scripts/watch.js",
@@ -16,7 +17,7 @@
     "lint": "eslint --ext .js,.ts . --cache --report-unused-disable-directives",
     "test:ci:cocoapods": "ruby packages/platform-ios/native_modules.rb",
     "postinstall": "yarn build",
-    "link-packages": "PACKAGES=('tools' 'platform-ios' 'platform-android' 'cli' 'cli-types' 'global-cli') && cd packages && for PACKAGE in \"${PACKAGES[@]}\"; do cd $PACKAGE && yarn link && cd ..; done",
+    "link-packages": "PACKAGES=('tools' 'platform-ios' 'platform-android' 'cli' 'cli-types' 'global-cli' 'debugger-ui') && cd packages && for PACKAGE in \"${PACKAGES[@]}\"; do cd $PACKAGE && yarn link && cd ..; done",
     "publish": "yarn build-clean-all && yarn install && lerna publish"
   },
   "dependencies": {
@@ -47,6 +48,7 @@
     "typescript": "^3.7.0"
   },
   "devDependencies": {
-    "@babel/plugin-proposal-class-properties": "^7.5.5"
+    "@babel/plugin-proposal-class-properties": "^7.5.5",
+    "@babel/plugin-transform-runtime": "^7.6.2"
   }
 }

packages/cli/package.json

@@ -31,6 +31,7 @@
     "@react-native-community/cli-platform-ios": "^3.0.0-alpha.7",
     "@react-native-community/cli-tools": "^3.0.0-alpha.7",
     "@react-native-community/cli-types": "^3.0.0-alpha.7",
+    "@react-native-community/debugger-ui": "^3.0.0-alpha.7",
     "@types/mkdirp": "^0.5.2",
     "@types/node-notifier": "^5.4.0",
     "@types/semver": "^6.0.2",

packages/cli/src/commands/server/debugger-ui/index.html

@@ -8,9 +8,9 @@
 import compression from 'compression';
 import connect from 'connect';
 import errorhandler from 'errorhandler';
-import path from 'path';
-import serveStatic from 'serve-static';
 import {Server as WebSocketServer} from 'ws';
+import serveStatic from 'serve-static';
+import {debuggerUIMiddleware} from '@react-native-community/debugger-ui';
 
 import indexPageMiddleware from './indexPage';
 import copyToClipBoardMiddleware from './copyToClipBoardMiddleware';
@@ -39,15 +39,13 @@ export default class MiddlewareManager {
   options: Options;
 
   constructor(options: Options) {
-    const debuggerUIFolder = path.join(__dirname, '..', 'debugger-ui');
-
     this.options = options;
     this.app = connect()
       .use(getSecurityHeadersMiddleware)
       .use(loadRawBodyMiddleware)
       // @ts-ignore compression and connect types mismatch
       .use(compression())
-      .use('/debugger-ui', serveStatic(debuggerUIFolder))
+      .use('/debugger-ui', debuggerUIMiddleware())
       .use(openStackFrameInEditorMiddleware(this.options))
       .use(openURLMiddleware)
       .use(copyToClipBoardMiddleware)

packages/cli/src/commands/server/middleware/MiddlewareManager.ts

@@ -8,7 +8,8 @@
     {"path": "../tools"},
     {"path": "../cli-types"},
     {"path": "../platform-ios"},
-    {"path": "../platform-android"}
+    {"path": "../platform-android"},
+    {"path": "../debugger-ui"}
   ],
   "include": ["../package.json"]
 }

packages/cli/tsconfig.json

@@ -0,0 +1,3 @@
+{
+  "plugins": [["@babel/plugin-transform-runtime", {"regenerator": true}]]
+}

packages/debugger-ui/.babelrc

@@ -0,0 +1,21 @@
+{
+  "name": "@react-native-community/debugger-ui",
+  "version": "3.0.0-alpha.7",
+  "license": "MIT",
+  "main": "./build/middleware",
+  "scripts": {
+    "build": "yarn build:ui && yarn build:middleware",
+    "build:ui": "parcel build src/ui/index.html --out-dir build/ui --public-url '/debugger-ui'",
+    "build:middleware": "tsc"
+  },
+  "files": [
+    "build"
+  ],
+  "devDependencies": {
+    "@babel/core": "^7.6.4",
+    "parcel-bundler": "^1.12.4"
+  },
+  "dependencies": {
+    "serve-static": "^1.13.1"
+  }
+}

packages/debugger-ui/package.json

@@ -0,0 +1,6 @@
+import serveStatic from 'serve-static';
+import path from 'path';
+
+export function debuggerUIMiddleware() {
+  return serveStatic(path.join(__dirname, '..', 'ui'));
+}