Fix tests, update holochain client, alter build output

.github/workflows/node.js.yml

@@ -15,7 +15,7 @@ jobs:
 
     strategy:
       matrix:
-        node-version: [16.x, 18.x]
+        node-version: [18.x]
 
     steps:
       - uses: actions/checkout@v2

.gitignore

@@ -9,4 +9,5 @@ AGENTID
 conductor.toml
 conductor-storage
 .cache
-holo-host-web-sdk-*.tgz
+holo-host-web-sdk-*.tgz
+yarn-error.log

package.json

@@ -2,13 +2,13 @@
   "name": "@holo-host/web-sdk",
   "version": "0.6.17-prerelease",
   "description": "Standard development kit for creating Web UIs that work with Holo Hosting.",
-  "main": "dist/holo_hosting_web_sdk",
-  "module": "dist/holo_hosting_web_sdk.js",
+  "main": "./dist/holo_hosting_web_sdk",
+  "module": "./dist/holo_hosting_web_sdk.js",
   "typings": "dist/index.d.ts",
   "scripts": {
     "build": "npm run bundle",
-    "bundle": "npx webpack --mode production --output-filename holo_hosting_web_sdk.js",
-    "test": "yarn jest",
+    "bundle": "npx webpack --mode production",
+    "test": "npx vitest",
     "prepublish": "npm run build"
   },
   "author": "Holo Ltd.",
@@ -30,28 +30,28 @@
     "src/*"
   ],
   "devDependencies": {
-    "@babel/core": "^7.9.0",
-    "@babel/preset-env": "^7.9.5",
-    "@babel/preset-typescript": "^7.21.0",
+    "@babel/core": "^7.23.2",
+    "@babel/preset-env": "^7.23.2",
+    "@babel/preset-typescript": "^7.23.2",
     "@holo-host/chaperone": "^8.0.1",
-    "@jest/globals": "^29.4.3",
-    "@types/jest": "^29.4.0",
     "@types/node": "^12.20.55",
     "@whi/stdlog": "^0.3.0",
-    "babel-loader": "^8.1.0",
+    "babel-loader": "^9.1.3",
     "babel-polyfill": "^6.26.0",
-    "jest": "^27.1.3",
-    "jest-canvas-mock": "^2.4.0",
+    "jsdom": "^22.1.0",
     "puppeteer": "^2.1.1",
-    "ts-jest": "^27.1.3",
-    "ts-loader": "^9.4.1",
-    "typescript": "^4.9.3",
-    "webpack": "^5.74.0",
-    "webpack-cli": "^4.10.0"
+    "ts-loader": "^9.5.0",
+    "typescript": "^5.2.2",
+    "vitest": "^0.34.6",
+    "webpack": "^5.89.0",
+    "webpack-cli": "^5.1.4",
+    "buffer": "^6.0.3",
+    "crypto-browserify": "^3.12.0",
+    "stream-browserify": "^3.0.0"
   },
   "dependencies": {
     "@holo-host/comb": "0.3.1",
-    "@holochain/client": "0.14.1",
+    "@holochain/client": "0.16.3",
     "semver": "^7.5.1"
   }
 }

src/index.ts

@@ -1,13 +1,11 @@
 import Emittery from "emittery"
 import semverSatisfies from 'semver/functions/satisfies'
-import { AppInfoResponse, AppAgentClient, AppAgentCallZomeRequest, AppCreateCloneCellRequest, CreateCloneCellResponse, AgentPubKey, AppEnableCloneCellRequest, AppDisableCloneCellRequest, EnableCloneCellResponse, DisableCloneCellResponse, AppSignal, decodeHashFromBase64 } from '@holochain/client'
+import { AppInfoResponse, AppAgentClient, AppAgentCallZomeRequest, AppCreateCloneCellRequest, CreateCloneCellResponse, AgentPubKey, AppEnableCloneCellRequest, AppDisableCloneCellRequest, EnableCloneCellResponse, DisableCloneCellResponse, AppSignal, decodeHashFromBase64, NetworkInfoRequest, NetworkInfoResponse } from '@holochain/client'
+import { COMB } from "@holo-host/comb";
 
-const COMPATIBLE_CHAPERONE_VERSION = '>=0.1.1 <0.2.0'
+(<any>window).COMB = COMB;
 
-const TESTING = (<any>global).COMB !== undefined
-if (!TESTING) {
-  if (typeof window !== "undefined") (<any>window).COMB = require('@holo-host/comb').COMB
-}
+const COMPATIBLE_CHAPERONE_VERSION = '>=0.1.1 <0.2.0'
 
 function makeUrlAbsolute (url) {
   return new URL(url, window.location.href).href
@@ -111,7 +109,7 @@ class WebSdkApi implements AppAgentClient {
 
     let child
     try {
-      child = await ((<any>window).COMB || (<any>global).COMB).connect(url.href, authOpts.container || document.body, 60000)
+      child = await (<any>window).COMB.connect(url.href, authOpts.container || document.body, 60000)
     } catch (err) {
       if (err.name === 'TimeoutError')
         console.log('Chaperone did not load properly. Is it running?')
@@ -122,7 +120,7 @@ class WebSdkApi implements AppAgentClient {
 
     // Set styles and history props when in production mode
     // Note: Set styles and history props only when in production mode
-    if (!TESTING) {
+    if (process.env.NODE_ENV === "production") {
       webSdkApi.#iframe = document.getElementsByClassName('comb-frame-0')[0]
       webSdkApi.#iframe.setAttribute('allowtransparency', 'true')
       const style = webSdkApi.#iframe.style
@@ -160,7 +158,7 @@ class WebSdkApi implements AppAgentClient {
     const { agentState, uiState } = chaperone_state
 
     webSdkApi.agentState = agentState
-    webSdkApi.myPubKey = decodeHashFromBase64(agentState.id)
+    webSdkApi.myPubKey = agentState ? decodeHashFromBase64(agentState.id) : undefined
     webSdkApi.uiState = uiState
     webSdkApi.chaperoneState = chaperone_state
     webSdkApi.happId = happ_id
@@ -200,6 +198,8 @@ class WebSdkApi implements AppAgentClient {
 
   enableCloneCell = (args: AppEnableCloneCellRequest): Promise<EnableCloneCellResponse> => this.#child.call('enableCloneCell', args).then(unwrap)
 
+  networkInfo = (args: NetworkInfoRequest): Promise<NetworkInfoResponse> => this.#child.call('networkInfo', args).then(unwrap)
+
   signPayload = (args: any): Promise<any> => this.#child.call('signPayload', args).then(unwrap)
 
   stateDump = () => this.#child.call('stateDump')
@@ -267,7 +267,7 @@ export type ChaperoneState = {
 
 // DUPLICATION END
 
-type AuthFormCustomization = {
+export type AuthFormCustomization = {
   // The name of the hosted hApp. Currently shows up as "appName Login"
   appName?: string
   // The URL of the hApp logo. Currently displayed on a white background with no `width` or `height` constraints.

tests/api.test.ts

@@ -1,15 +1,17 @@
-import {describe, expect, test} from '@jest/globals';
+// @vitest-environment jsdom
+
+import {beforeEach, afterEach, expect, describe, it } from 'vitest'
 
 const path = require('path')
 const log = require('@whi/stdlog')(path.basename(__filename), {
   level: process.env.LOG_LEVEL || 'fatal'
 })
 
-require("./mock_browser")
-const mock_comb = require("./mock_comb")
+import "./mock_browser"
+import mock_comb from "./mock_comb"
+import WebSdkApi from "../src/index"
 
-let WebSdkApi
-WebSdkApi = require("../src/index").default
+(global.window as any).COMB = mock_comb
 
 describe('test API endpoints', () => {
   let holo
@@ -97,22 +99,20 @@ describe("test comb error", () => {
   const expectedError = 'timeout error'
 
   beforeEach(() => {
-    if( (<any>global).COMB ) {
-      globalComb = (<any>global).COMB
+    if( (<any>window).COMB ) {
+      globalComb = (<any>window).COMB
     }
 
-    (<any>global).COMB = {
+    (<any>window).COMB = {
       connect() {
         throw new Error(expectedError)
       }
     }
-
-    WebSdkApi = require("../src/index").default
   })
 
   afterEach(() => {
     if( globalComb ) {
-      (<any>global).COMB = globalComb
+      (<any>window).COMB = globalComb
     }
   })
 

tests/mock_browser.ts

@@ -1,5 +1,5 @@
 
-(<any>global.window) = {
+export default (<any>global.window) = {
   "location": {
     "hostname": "https://localhost",
   }

tests/mock_comb.ts

@@ -1,10 +1,22 @@
-const { inspect } = require("util");
+import { inspect } from "util";
 
 let next_response;
 let event_listeners = {}
 
-
-;(<any>global).COMB = {
+export default {
+  nextResponse(value) {
+    next_response = value;
+  },
+  triggerEvent(event_name) {
+    const event_callback = event_listeners[event_name]
+    if (!event_callback) {
+      throw new Error(`Expected to find event listener ${event_name}, but none found.  Current event listeners: ${inspect(event_listeners)}`)
+    }
+    setTimeout(() => {
+      event_callback()
+    }, 0)
+    return
+  },
   async connect() {
     return Promise.resolve({
       // Test event listener set with callback
@@ -26,22 +38,6 @@ let event_listeners = {}
           return Promise.resolve(value)
         }
       },
-    });
-  }
-}
-
-module.exports = {
-  nextResponse(value) {
-    next_response = value;
-  },
-  triggerEvent(event_name) {
-    const event_callback = event_listeners[event_name]
-    if (!event_callback) {
-      throw new Error(`Expected to find event listener ${event_name}, but none found.  Current event listeners: ${inspect(event_listeners)}`)
-    }
-    setTimeout(() => {
-      event_callback()
-    }, 0)
-    return
+    })
   }
-}
+};

webpack.config.js

@@ -2,19 +2,29 @@ module.exports = {
   target: "web",
   mode: 'development', // production | development
   devtool: 'source-map',
+
+  experiments: {
+    outputModule: true,
+  },
 
   entry: [ "babel-polyfill", "./src/index.ts" ],
 
   // Assign 'module.exports' to the variable defined by `output.library`
   output: {
-    library: "HoloWebSDK",
-    libraryTarget: "umd",
-
+    library: {
+      type: "module",
+    },
+    filename: "holo_hosting_web_sdk.js",
     publicPath: "/dist/",
   },
 
   resolve: {
-    extensions: [".ts", ".js"]
+    extensions: [".ts", ".js"],
+    fallback: {
+      crypto: require.resolve("crypto-browserify"),
+      stream: require.resolve("stream-browserify"),
+      buffer: require.resolve("buffer/"),
+    },
   },
 
   module: {
@@ -34,15 +44,4 @@ module.exports = {
       }
     ],
   },
-
-  plugins: [
-  ],
-
-  externals: {
-    "node:crypto": {
-      commonjs: 'node:crypto',
-      commonjs2: 'node:crypto',
-      amd: 'node:crypto',
-    }
-  },
 };