adds lightweight tooling for adding web components with lit

babel.config.json

@@ -0,0 +1,6 @@
+{
+  "plugins": [
+    ["@babel/plugin-proposal-decorators", { "decoratorsBeforeExport": true }],
+    ["@babel/plugin-proposal-class-properties", { "loose": true }]
+  ]
+}

jsconfig.json

@@ -0,0 +1,5 @@
+{
+  "compilerOptions": {
+    "experimentalDecorators": true
+  }
+}

package.json

@@ -17,6 +17,7 @@
     "lint": "eslint ./app ./config && markdownlint '**/*.md' --ignore node_modules",
     "start": "node app/server.js",
     "dev": "npm-run-all --parallel start build:watch",
+    "dev:frontend": "snowpack dev",
     "build": "snowpack build",
     "build:watch": "snowpack build --watch",
     "test": "uvu"
@@ -37,11 +38,15 @@
     "xml2js": "^0.4.23"
   },
   "devDependencies": {
+    "@babel/plugin-proposal-class-properties": "^7.16.0",
+    "@babel/plugin-proposal-decorators": "^7.16.4",
+    "@snowpack/plugin-babel": "^2.1.7",
     "eslint": "^7.32.0",
     "eslint-config-standard": "^16.0.3",
     "eslint-plugin-import": "^2.25.3",
     "eslint-plugin-node": "^11.1.0",
     "eslint-plugin-promise": "^5.1.1",
+    "http2-proxy": "^5.0.53",
     "markdownlint-cli": "^0.30.0",
     "npm-run-all": "^4.1.5",
     "simple-git-hooks": "^2.7.0",

snowpack.config.js

@@ -1,5 +1,6 @@
 // Snowpack Configuration File
 // See all supported options: https://www.snowpack.dev/reference/configuration
+import proxy from 'http2-proxy'
 
 // todo: might add a proxy for websockets here so we can use snowpack dev server with HMR
 export default {
@@ -9,9 +10,7 @@ export default {
     // mount "public" to the root URL path ("/*") and serve files with zero transformations:
     // './public': { url: '/', static: true, resolve: false }
   },
-  plugins: [
+  plugins: ['@snowpack/plugin-babel'],
-    /* ... */
-  ],
   packageOptions: {
     /* ... */
   },
@@ -21,5 +20,30 @@ export default {
   },
   buildOptions: {
     out: 'build'
+  },
+  // add a proxy for websocket requests for the dev setting
+  routes: [
+    {
+      src: '/websocket',
+      upgrade: (req, socket, head) => {
+        const defaultWSHandler = (err, req, socket, head) => {
+          if (err) {
+            console.error('proxy error', err)
+            socket.destroy()
           }
+        }
+
+        proxy.ws(
+          req,
+          socket,
+          head,
+          {
+            hostname: 'localhost',
+            port: 80
+          },
+          defaultWSHandler
+        )
+      }
+    }
+  ]
 }