pw_web_ui: Bundle pw_protobuf_compiler and its template

Currently, we need ts-node to run pw_protobuf_compiler and the template
for proto collection is also in TypeScript which means when user runs
this command on their own protos, the output ProtoCollection is an
unbundled .ts file with missing imports (since we don't include .ts
files in our final npm bundle). This bundles the template as a .js file.

This also installs specific `protoc` binary within the node_modules
folder that works with pw_protobuf_compiler. This means we don't need
user to install the specific version and add it to PATH before running
pw_protobuf_compiler.

Change-Id: I960bdea8d8361fd8ec3fcf6b7830aa264f6bc16a
Reviewed-on: https://pigweed-review.googlesource.com/c/pigweed/pigweed/+/102323
Reviewed-by: Anthony DiGirolamo <tonymd@google.com>
Commit-Queue: Asad Memon <asadmemon@google.com>

1 files changed, 116 insertions, 52 deletions

diff --git a/package-lock.json b/package-lock.json
index ec9bbac8c..8d6e7f06b 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -9,10 +9,9 @@
       "version": "0.0.1",
       "license": "Apache-2.0",
       "dependencies": {
-        "ansi_up": "^5.1.0",
-        "arg": "^5.0.2",
-        "html-react-parser": "^1.4.0",
-        "ts-node": "^10.8.1"
+        "@protobuf-ts/protoc": "^2.7.0",
+        "google-protobuf": "^3.17.3",
+        "ts-protoc-gen": "^0.15.0"
       },
       "bin": {
         "pw_protobuf_compiler": "dist/bin/pw_protobuf_compiler.js"
@@ -24,24 +23,24 @@
         "@rollup/plugin-commonjs": "^19.0.0",
         "@rollup/plugin-node-resolve": "^13.3.0",
         "@rollup/plugin-typescript": "^8.3.3",
-        "@types/argparse": "^2.0.10",
         "@types/crc": "^3.4.0",
         "@types/google-protobuf": "^3.15.5",
         "@types/jest": "^28.1.4",
         "@types/node": "^16.0.1",
         "@types/react": "^17.0.14",
         "@types/react-dom": "^17.0.9",
-        "argparse": "^2.0.1",
+        "ansi_up": "^5.1.0",
+        "arg": "^5.0.2",
         "base64-js": "^1.5.1",
         "buffer": "^6.0.3",
         "crc": "^4.1.1",
         "debug": "^4.3.2",
         "eslint": "^7.30.0",
         "eslint-plugin-react": "^7.24.0",
-        "google-protobuf": "^3.17.3",
         "grpc-tools": "^1.11.2",
         "grpc-web": "^1.2.1",
         "gts": "^3.1.0",
+        "html-react-parser": "^1.4.0",
         "http-server": "^13.0.2",
         "install-peers": "^1.0.3",
         "jest-environment-jsdom": "^28.1.3",
@@ -58,7 +57,7 @@
         "rxjs": "^7.2.0",
         "tmp": "0.2.1",
         "ts-jest": "^28.0.5",
-        "ts-protoc-gen": "^0.15.0",
+        "ts-node": "^10.8.1",
         "tsc-watch": "^5.0.3",
         "tslib": "^2.4.0",
         "typescript": "^4.3.5"
@@ -713,6 +712,7 @@
     },
     "node_modules/@cspotcode/source-map-support": {
       "version": "0.8.1",
+      "dev": true,
       "license": "MIT",
       "dependencies": {
         "@jridgewell/trace-mapping": "0.3.9"
@@ -1292,6 +1292,7 @@
     },
     "node_modules/@jridgewell/resolve-uri": {
       "version": "3.0.8",
+      "dev": true,
       "license": "MIT",
       "engines": {
         "node": ">=6.0.0"
@@ -1309,10 +1310,12 @@
     },
     "node_modules/@jridgewell/sourcemap-codec": {
       "version": "1.4.14",
+      "dev": true,
       "license": "MIT"
     },
     "node_modules/@jridgewell/trace-mapping": {
       "version": "0.3.9",
+      "dev": true,
       "license": "MIT",
       "dependencies": {
         "@jridgewell/resolve-uri": "^3.0.3",
@@ -1540,6 +1543,14 @@
         "node": ">= 8"
       }
     },
+    "node_modules/@protobuf-ts/protoc": {
+      "version": "2.7.0",
+      "resolved": "https://registry.npmjs.org/@protobuf-ts/protoc/-/protoc-2.7.0.tgz",
+      "integrity": "sha512-YW61nbX9d3mWF44193S+bmWth5eFHxvrePQMUfdY8eEa3PTmhAUwgVCUBeCXEVUWgz1H/E0CnwdjlJgW4vQtOg==",
+      "bin": {
+        "protoc": "protoc.js"
+      }
+    },
     "node_modules/@protobufjs/aspromise": {
       "version": "1.1.2",
       "dev": true,
@@ -1748,22 +1759,21 @@
     },
     "node_modules/@tsconfig/node10": {
       "version": "1.0.9",
+      "dev": true,
       "license": "MIT"
     },
     "node_modules/@tsconfig/node12": {
       "version": "1.0.11",
+      "dev": true,
       "license": "MIT"
     },
     "node_modules/@tsconfig/node14": {
       "version": "1.0.3",
+      "dev": true,
       "license": "MIT"
     },
     "node_modules/@tsconfig/node16": {
       "version": "1.0.3",
-      "license": "MIT"
-    },
-    "node_modules/@types/argparse": {
-      "version": "2.0.10",
       "dev": true,
       "license": "MIT"
     },
@@ -1901,6 +1911,7 @@
     },
     "node_modules/@types/node": {
       "version": "16.11.4",
+      "dev": true,
       "license": "MIT"
     },
     "node_modules/@types/normalize-package-data": {
@@ -2218,6 +2229,7 @@
     },
     "node_modules/acorn-walk": {
       "version": "8.2.0",
+      "dev": true,
       "license": "MIT",
       "engines": {
         "node": ">=0.4.0"
@@ -2251,6 +2263,7 @@
     },
     "node_modules/ansi_up": {
       "version": "5.1.0",
+      "dev": true,
       "license": "MIT",
       "engines": {
         "node": "*"
@@ -2372,12 +2385,8 @@
     },
     "node_modules/arg": {
       "version": "5.0.2",
-      "license": "MIT"
-    },
-    "node_modules/argparse": {
-      "version": "2.0.1",
       "dev": true,
-      "license": "Python-2.0"
+      "license": "MIT"
     },
     "node_modules/array-includes": {
       "version": "3.1.4",
@@ -3324,6 +3333,7 @@
     },
     "node_modules/create-require": {
       "version": "1.1.1",
+      "dev": true,
       "license": "MIT"
     },
     "node_modules/cross-spawn": {
@@ -3613,6 +3623,7 @@
     },
     "node_modules/diff": {
       "version": "4.0.2",
+      "dev": true,
       "license": "BSD-3-Clause",
       "engines": {
         "node": ">=0.3.1"
@@ -3670,6 +3681,7 @@
     },
     "node_modules/dom-serializer": {
       "version": "1.3.2",
+      "dev": true,
       "license": "MIT",
       "dependencies": {
         "domelementtype": "^2.0.1",
@@ -3682,6 +3694,7 @@
     },
     "node_modules/domelementtype": {
       "version": "2.2.0",
+      "dev": true,
       "funding": [
         {
           "type": "github",
@@ -3713,6 +3726,7 @@
     },
     "node_modules/domhandler": {
       "version": "4.2.2",
+      "dev": true,
       "license": "BSD-2-Clause",
       "dependencies": {
         "domelementtype": "^2.2.0"
@@ -3726,6 +3740,7 @@
     },
     "node_modules/domutils": {
       "version": "2.8.0",
+      "dev": true,
       "license": "BSD-2-Clause",
       "dependencies": {
         "dom-serializer": "^1.0.1",
@@ -3817,6 +3832,7 @@
     },
     "node_modules/entities": {
       "version": "2.2.0",
+      "dev": true,
       "license": "BSD-2-Clause",
       "funding": {
         "url": "https://github.com/fb55/entities?sponsor=1"
@@ -4842,7 +4858,6 @@
     },
     "node_modules/google-protobuf": {
       "version": "3.19.0",
-      "dev": true,
       "license": "BSD-3-Clause"
     },
     "node_modules/got": {
@@ -5092,6 +5107,7 @@
     },
     "node_modules/html-dom-parser": {
       "version": "1.0.2",
+      "dev": true,
       "license": "MIT",
       "dependencies": {
         "domhandler": "4.2.2",
@@ -5118,6 +5134,7 @@
     },
     "node_modules/html-react-parser": {
       "version": "1.4.0",
+      "dev": true,
       "license": "MIT",
       "dependencies": {
         "domhandler": "4.2.2",
@@ -5131,6 +5148,7 @@
     },
     "node_modules/htmlparser2": {
       "version": "6.1.0",
+      "dev": true,
       "funding": [
         "https://github.com/fb55/htmlparser2?sponsor=1",
         {
@@ -5358,6 +5376,7 @@
     },
     "node_modules/inline-style-parser": {
       "version": "0.1.1",
+      "dev": true,
       "license": "MIT"
     },
     "node_modules/inquirer": {
@@ -6505,6 +6524,7 @@
     },
     "node_modules/js-tokens": {
       "version": "4.0.0",
+      "dev": true,
       "license": "MIT"
     },
     "node_modules/js-yaml": {
@@ -7017,6 +7037,7 @@
     },
     "node_modules/loose-envify": {
       "version": "1.4.0",
+      "dev": true,
       "license": "MIT",
       "dependencies": {
         "js-tokens": "^3.0.0 || ^4.0.0"
@@ -7081,6 +7102,7 @@
     },
     "node_modules/make-error": {
       "version": "1.3.6",
+      "dev": true,
       "license": "ISC"
     },
     "node_modules/makeerror": {
@@ -7456,6 +7478,7 @@
     },
     "node_modules/object-assign": {
       "version": "4.1.1",
+      "dev": true,
       "license": "MIT",
       "engines": {
         "node": ">=0.10.0"
@@ -8153,6 +8176,7 @@
     },
     "node_modules/react": {
       "version": "17.0.2",
+      "dev": true,
       "license": "MIT",
       "dependencies": {
         "loose-envify": "^1.1.0",
@@ -8182,6 +8206,7 @@
     },
     "node_modules/react-property": {
       "version": "2.0.0",
+      "dev": true,
       "license": "MIT"
     },
     "node_modules/react-transition-group": {
@@ -9141,6 +9166,7 @@
     },
     "node_modules/style-to-js": {
       "version": "1.1.0",
+      "dev": true,
       "license": "MIT",
       "dependencies": {
         "style-to-object": "0.3.0"
@@ -9148,6 +9174,7 @@
     },
     "node_modules/style-to-object": {
       "version": "0.3.0",
+      "dev": true,
       "license": "MIT",
       "dependencies": {
         "inline-style-parser": "0.1.1"
@@ -9424,6 +9451,7 @@
     },
     "node_modules/ts-node": {
       "version": "10.8.1",
+      "dev": true,
       "license": "MIT",
       "dependencies": {
         "@cspotcode/source-map-support": "^0.8.0",
@@ -9465,6 +9493,7 @@
     },
     "node_modules/ts-node/node_modules/acorn": {
       "version": "8.7.1",
+      "dev": true,
       "license": "MIT",
       "bin": {
         "acorn": "bin/acorn"
@@ -9475,11 +9504,11 @@
     },
     "node_modules/ts-node/node_modules/arg": {
       "version": "4.1.3",
+      "dev": true,
       "license": "MIT"
     },
     "node_modules/ts-protoc-gen": {
       "version": "0.15.0",
-      "dev": true,
       "license": "Apache-2.0",
       "dependencies": {
         "google-protobuf": "^3.15.5"
@@ -9579,6 +9608,7 @@
     },
     "node_modules/typescript": {
       "version": "4.4.4",
+      "dev": true,
       "license": "Apache-2.0",
       "bin": {
         "tsc": "bin/tsc",
@@ -9736,6 +9766,7 @@
     },
     "node_modules/v8-compile-cache-lib": {
       "version": "3.0.1",
+      "dev": true,
       "license": "MIT"
     },
     "node_modules/validate-npm-package-license": {
@@ -10009,6 +10040,7 @@
     },
     "node_modules/yn": {
       "version": "3.1.1",
+      "dev": true,
       "license": "MIT",
       "engines": {
         "node": ">=6"
@@ -10514,6 +10546,7 @@
     },
     "@cspotcode/source-map-support": {
       "version": "0.8.1",
+      "dev": true,
       "requires": {
         "@jridgewell/trace-mapping": "0.3.9"
       }
@@ -10979,7 +11012,8 @@
       }
     },
     "@jridgewell/resolve-uri": {
-      "version": "3.0.8"
+      "version": "3.0.8",
+      "dev": true
     },
     "@jridgewell/set-array": {
       "version": "1.1.2",
@@ -10989,10 +11023,12 @@
       "peer": true
     },
     "@jridgewell/sourcemap-codec": {
-      "version": "1.4.14"
+      "version": "1.4.14",
+      "dev": true
     },
     "@jridgewell/trace-mapping": {
       "version": "0.3.9",
+      "dev": true,
       "requires": {
         "@jridgewell/resolve-uri": "^3.0.3",
         "@jridgewell/sourcemap-codec": "^1.4.10"
@@ -11120,6 +11156,11 @@
         "fastq": "^1.6.0"
       }
     },
+    "@protobuf-ts/protoc": {
+      "version": "2.7.0",
+      "resolved": "https://registry.npmjs.org/@protobuf-ts/protoc/-/protoc-2.7.0.tgz",
+      "integrity": "sha512-YW61nbX9d3mWF44193S+bmWth5eFHxvrePQMUfdY8eEa3PTmhAUwgVCUBeCXEVUWgz1H/E0CnwdjlJgW4vQtOg=="
+    },
     "@protobufjs/aspromise": {
       "version": "1.1.2",
       "dev": true
@@ -11271,19 +11312,19 @@
       "dev": true
     },
     "@tsconfig/node10": {
-      "version": "1.0.9"
+      "version": "1.0.9",
+      "dev": true
     },
     "@tsconfig/node12": {
-      "version": "1.0.11"
+      "version": "1.0.11",
+      "dev": true
     },
     "@tsconfig/node14": {
-      "version": "1.0.3"
+      "version": "1.0.3",
+      "dev": true
     },
     "@tsconfig/node16": {
-      "version": "1.0.3"
-    },
-    "@types/argparse": {
-      "version": "2.0.10",
+      "version": "1.0.3",
       "dev": true
     },
     "@types/babel__core": {
@@ -11412,7 +11453,8 @@
       "dev": true
     },
     "@types/node": {
-      "version": "16.11.4"
+      "version": "16.11.4",
+      "dev": true
     },
     "@types/normalize-package-data": {
       "version": "2.4.1",
@@ -11619,7 +11661,8 @@
       "requires": {}
     },
     "acorn-walk": {
-      "version": "8.2.0"
+      "version": "8.2.0",
+      "dev": true
     },
     "agent-base": {
       "version": "6.0.2",
@@ -11639,7 +11682,8 @@
       }
     },
     "ansi_up": {
-      "version": "5.1.0"
+      "version": "5.1.0",
+      "dev": true
     },
     "ansi-align": {
       "version": "3.0.1",
@@ -11716,10 +11760,7 @@
       }
     },
     "arg": {
-      "version": "5.0.2"
-    },
-    "argparse": {
-      "version": "2.0.1",
+      "version": "5.0.2",
       "dev": true
     },
     "array-includes": {
@@ -12382,7 +12423,8 @@
       }
     },
     "create-require": {
-      "version": "1.1.1"
+      "version": "1.1.1",
+      "dev": true
     },
     "cross-spawn": {
       "version": "7.0.3",
@@ -12590,7 +12632,8 @@
       "peer": true
     },
     "diff": {
-      "version": "4.0.2"
+      "version": "4.0.2",
+      "dev": true
     },
     "diff-sequences": {
       "version": "28.1.1",
@@ -12631,6 +12674,7 @@
     },
     "dom-serializer": {
       "version": "1.3.2",
+      "dev": true,
       "requires": {
         "domelementtype": "^2.0.1",
         "domhandler": "^4.2.0",
@@ -12638,7 +12682,8 @@
       }
     },
     "domelementtype": {
-      "version": "2.2.0"
+      "version": "2.2.0",
+      "dev": true
     },
     "domexception": {
       "version": "4.0.0",
@@ -12659,12 +12704,14 @@
     },
     "domhandler": {
       "version": "4.2.2",
+      "dev": true,
       "requires": {
         "domelementtype": "^2.2.0"
       }
     },
     "domutils": {
       "version": "2.8.0",
+      "dev": true,
       "requires": {
         "dom-serializer": "^1.0.1",
         "domelementtype": "^2.2.0",
@@ -12732,7 +12779,8 @@
       }
     },
     "entities": {
-      "version": "2.2.0"
+      "version": "2.2.0",
+      "dev": true
     },
     "errno": {
       "version": "0.1.8",
@@ -13414,8 +13462,7 @@
       }
     },
     "google-protobuf": {
-      "version": "3.19.0",
-      "dev": true
+      "version": "3.19.0"
     },
     "got": {
       "version": "9.6.0",
@@ -13590,6 +13637,7 @@
     },
     "html-dom-parser": {
       "version": "1.0.2",
+      "dev": true,
       "requires": {
         "domhandler": "4.2.2",
         "htmlparser2": "6.1.0"
@@ -13611,6 +13659,7 @@
     },
     "html-react-parser": {
       "version": "1.4.0",
+      "dev": true,
       "requires": {
         "domhandler": "4.2.2",
         "html-dom-parser": "1.0.2",
@@ -13620,6 +13669,7 @@
     },
     "htmlparser2": {
       "version": "6.1.0",
+      "dev": true,
       "requires": {
         "domelementtype": "^2.0.1",
         "domhandler": "^4.0.0",
@@ -13756,7 +13806,8 @@
       "dev": true
     },
     "inline-style-parser": {
-      "version": "0.1.1"
+      "version": "0.1.1",
+      "dev": true
     },
     "inquirer": {
       "version": "7.3.3",
@@ -14596,7 +14647,8 @@
       }
     },
     "js-tokens": {
-      "version": "4.0.0"
+      "version": "4.0.0",
+      "dev": true
     },
     "js-yaml": {
       "version": "3.14.1",
@@ -15012,6 +15064,7 @@
     },
     "loose-envify": {
       "version": "1.4.0",
+      "dev": true,
       "requires": {
         "js-tokens": "^3.0.0 || ^4.0.0"
       }
@@ -15052,7 +15105,8 @@
       }
     },
     "make-error": {
-      "version": "1.3.6"
+      "version": "1.3.6",
+      "dev": true
     },
     "makeerror": {
       "version": "1.0.12",
@@ -15308,7 +15362,8 @@
       "dev": true
     },
     "object-assign": {
-      "version": "4.1.1"
+      "version": "4.1.1",
+      "dev": true
     },
     "object-inspect": {
       "version": "1.11.0",
@@ -15779,6 +15834,7 @@
     },
     "react": {
       "version": "17.0.2",
+      "dev": true,
       "requires": {
         "loose-envify": "^1.1.0",
         "object-assign": "^4.1.1"
@@ -15798,7 +15854,8 @@
       "dev": true
     },
     "react-property": {
-      "version": "2.0.0"
+      "version": "2.0.0",
+      "dev": true
     },
     "react-transition-group": {
       "version": "4.4.2",
@@ -16441,12 +16498,14 @@
     },
     "style-to-js": {
       "version": "1.1.0",
+      "dev": true,
       "requires": {
         "style-to-object": "0.3.0"
       }
     },
     "style-to-object": {
       "version": "0.3.0",
+      "dev": true,
       "requires": {
         "inline-style-parser": "0.1.1"
       }
@@ -16638,6 +16697,7 @@
     },
     "ts-node": {
       "version": "10.8.1",
+      "dev": true,
       "requires": {
         "@cspotcode/source-map-support": "^0.8.0",
         "@tsconfig/node10": "^1.0.7",
@@ -16655,16 +16715,17 @@
       },
       "dependencies": {
         "acorn": {
-          "version": "8.7.1"
+          "version": "8.7.1",
+          "dev": true
         },
         "arg": {
-          "version": "4.1.3"
+          "version": "4.1.3",
+          "dev": true
         }
       }
     },
     "ts-protoc-gen": {
       "version": "0.15.0",
-      "dev": true,
       "requires": {
         "google-protobuf": "^3.15.5"
       }
@@ -16726,7 +16787,8 @@
       }
     },
     "typescript": {
-      "version": "4.4.4"
+      "version": "4.4.4",
+      "dev": true
     },
     "unbox-primitive": {
       "version": "1.0.1",
@@ -16825,7 +16887,8 @@
       "dev": true
     },
     "v8-compile-cache-lib": {
-      "version": "3.0.1"
+      "version": "3.0.1",
+      "dev": true
     },
     "validate-npm-package-license": {
       "version": "3.0.4",
@@ -17017,7 +17080,8 @@
       "dev": true
     },
     "yn": {
-      "version": "3.1.1"
+      "version": "3.1.1",
+      "dev": true
     }
   }
 }