Integrate wireit services and misc improvements (#1386)

- Used (new!) Wireit services feature to streamline config of all scripts where relevant
- The top-level `npm run watch:dev` and `npm run watch:prod` scripts are now `npm start --watch` and `npm start:prod --watch`
- The `start` scripts now automatically restart servers whenever needed based on which files changed
- The `start` scripts now also launch the catalog server and firestore emulator

Also:
- Added some dependencies that were missing
- Fixed `tsc` errors by adding some new `build:types` scripts. 
- Fixed some format/lint errors
- Added CI jobs for `build` and `check`
- Switched the firestore emulator port to something more in line with the scheme we're using for the rest of the services
- Fixed a bug with `undefined` vs `null` that broke firestore calls
- Documented how to bootstrap firestore for local dev

Author: aomarks

.github/workflows/build.yml

@@ -0,0 +1,24 @@
+name: Build
+
+on: [push, pull_request]
+
+jobs:
+  build:
+    runs-on: ubuntu-latest
+
+    steps:
+      - uses: actions/checkout@v3
+
+      - uses: actions/setup-node@v3
+        with:
+          node-version: 18
+          cache: 'npm'
+          cache-dependency-path: package-lock.json
+
+      - uses: google/wireit@setup-github-actions-caching/v1
+
+      - name: NPM install
+        run: npm ci
+
+      - name: Build
+        run: npm run build

.github/workflows/check.yml

@@ -0,0 +1,24 @@
+name: Check
+
+on: [push, pull_request]
+
+jobs:
+  check:
+    runs-on: ubuntu-latest
+
+    steps:
+      - uses: actions/checkout@v3
+
+      - uses: actions/setup-node@v3
+        with:
+          node-version: 18
+          cache: 'npm'
+          cache-dependency-path: package-lock.json
+
+      - uses: google/wireit@setup-github-actions-caching/v1
+
+      - name: NPM install
+        run: npm ci
+
+      - name: Check
+        run: npm run check

README.md

@@ -20,18 +20,27 @@ This monorepo contains several npm packages:
 ## Quick Start
 
 1. Install dependencies:
+
    ```bash
    npm ci
    ```
+
 2. Run tests:
+
    ```bash
    npm test
    ```
+
 3. Start everything in development mode and watch for changes:
+
    ```bash
-   npm watch:dev
+   npm start --watch
    ```
 
+4. Visit [`http://localhost:6451/bootstrap-packages`](http://localhost:6451/bootstrap-packages) to bootstrap the database with a default set of elements.
+
+5. Visit [`http://localhost:5450/catalog`](http://localhost:5450/catalog) and search for "button" to see example elements.
+
 ## Docker
 
 Using Docker locally gives you the most realistic simulation of a production
@@ -50,3 +59,4 @@ We use the following port scheme for consistency and to prevent collisions:
 - [`localhost:5452`](http://localhost:5452): site-server in docker
 - [`localhost:6451`](http://localhost:6451): catalog-server
 - [`localhost:6452`](http://localhost:6452): catalog-server in docker
+- [`localhost:7450`](http://localhost:7450): firestore-emulator

docker/docker-compose.yml

@@ -9,7 +9,7 @@ services:
       context: ../
       dockerfile: docker/firestore-emulator/Dockerfile
     ports:
-      - 8088:8088
+      - 7450:7450
 
   catalog:
     depends_on:
@@ -19,7 +19,7 @@ services:
       dockerfile: docker/catalog/Dockerfile
     environment:
       - PORT=6452
-      - FIRESTORE_EMULATOR_HOST=firestore-emulator:8088
+      - FIRESTORE_EMULATOR_HOST=firestore-emulator:7450
     ports:
       - 6452:6452
 

package-lock.json

@@ -11,9 +11,9 @@
     "test": "wireit",
     "build:dev": "wireit",
     "build:prod": "wireit",
+    "start": "wireit",
+    "start:prod": "wireit",
     "start:docker": "docker-compose -f docker/docker-compose.yml up --build --remove-orphans",
-    "watch:dev": "npm run build:dev && (npm run start:dev > /dev/null 2>&1 & WIREIT_FAILURES=continue npm run build-and-check:dev --watch)",
-    "watch:prod": "npm run build:prod && (npm run start:prod & WIREIT_FAILURES=continue npm run build-and-check:prod --watch)",
     "check": "wireit",
     "check:lint": "wireit",
     "build-and-check:dev": "wireit",
@@ -31,14 +31,30 @@
     "eslint-plugin-no-only-tests": "^3.0.0",
     "prettier": "^2.7.1",
     "typescript": "~4.8.2",
-    "wireit": "^0.7.2"
+    "wireit": "^0.7.3-pre.3"
   },
   "wireit": {
+    "start": {
+      "dependencies": [
+        "./packages/site-server:start:dev",
+        "./packages/catalog-server:start:dev",
+        "check"
+      ]
+    },
+    "start:prod": {
+      "dependencies": [
+        "./packages/site-server:start:prod",
+        "./packages/catalog-server:start:dev",
+        "check"
+      ]
+    },
     "build": {
       "dependencies": [
         "./packages/custom-elements-manifest-tools:build",
         "./packages/catalog-api:build",
-        "./packages/catalog-server:build"
+        "./packages/catalog-server:build",
+        "./packages/site-content:build",
+        "./packages/site-client:build"
       ]
     },
     "test": {

package.json

@@ -4,7 +4,7 @@
       "port": 9099
     },
     "firestore": {
-      "port": 8088,
+      "port": 7450,
       "host": "0.0.0.0"
     },
     "ui": {

packages/catalog-server/firebase.json

@@ -18,7 +18,7 @@
     "start:dev": "wireit",
     "test": "wireit",
     "test:manual": "wireit",
-    "emulators:start": "firebase emulators:start --project wc-catalog",
+    "emulators:start": "wireit",
     "firebase": "firebase"
   },
   "wireit": {
@@ -41,34 +41,43 @@
     },
     "start": {
       "command": "node --enable-source-maps index.js",
+      "service": true,
       "dependencies": [
         "build"
       ]
     },
     "start:dev": {
-      "command": "FIRESTORE_EMULATOR_HOST=localhost:8088 npm start",
+      "command": "FIRESTORE_EMULATOR_HOST=localhost:7450 npm start",
+      "service": true,
       "dependencies": [
-        "build"
+        "build",
+        "emulators:start"
       ]
     },
     "test": {
-      "command": "firebase emulators:exec --project wc-catalog ./test.sh",
+      "command": "NODE_OPTIONS=--enable-source-maps FIRESTORE_EMULATOR_HOST=localhost:7450 uvu test \"_test\\.js$\"",
       "dependencies": [
-        "build"
-      ],
-      "files": [
-        "test.sh"
+        "build",
+        "emulators:start"
       ],
+      "files": [],
       "output": []
     },
+    "emulators:start": {
+      "command": "firebase emulators:start --project wc-catalog",
+      "service": true,
+      "files": [
+        "firebase.json",
+        "firestore.indexes.json",
+        "firestore.rules"
+      ]
+    },
     "test:manual": {
-      "command": "NODE_OPTIONS='--enable-source-maps' FIRESTORE_EMULATOR_HOST=localhost:8088 uvu test \"_test\\.js$\"",
+      "command": "NODE_OPTIONS='--enable-source-maps' FIRESTORE_EMULATOR_HOST=localhost:7450 uvu test \"_test\\.js$\"",
       "dependencies": [
         "build"
       ],
-      "files": [
-        "test.sh"
-      ],
+      "files": [],
       "output": []
     }
   },

packages/catalog-server/package.json

@@ -52,10 +52,10 @@ export class FirestoreRepository implements Repository {
    * A namespace suffix to apply to the 'packages' collection to support
    * multi-tenant-like separation of the database. Used for testing.
    */
-  private readonly namespace?: string;
+  private readonly namespace: string | null;
 
   constructor(namespace?: string) {
-    this.namespace = namespace;
+    this.namespace = namespace ?? null;
   }
 
   async startPackageImport(packageName: string): Promise<void> {

packages/catalog-server/src/lib/firestore/firestore-repository.ts

@@ -9,9 +9,7 @@ import {
   FirestoreDataConverter,
   QueryDocumentSnapshot,
 } from '@google-cloud/firestore';
-import type {
-  ValidationProblem
-} from '@webcomponents/catalog-api/lib/schema.js';
+import type {ValidationProblem} from '@webcomponents/catalog-api/lib/schema.js';
 
 export const validationProblemConverter: FirestoreDataConverter<ValidationProblem> =
   {