thefrontside · jnicklas · Jan 29, 2022 · jnicklas · Mar 30, 2022
diff --git a/package.json b/package.json
@@ -11,6 +11,7 @@
       "packages/globals",
       "packages/core",
       "packages/keyboard",
+      "packages/remote",
       "packages/html",
       "packages/material-ui",
       "packages/with-cypress"
@@ -48,6 +49,7 @@
   "resolutions": {
     "@definitelytyped/typescript-versions": "^0.0.40",
     "@typescript-eslint/eslint-plugin": "^4.12.0",
+    "@effection/core": "^2.2.0",
     "chromedriver": "96.0.0",
     "typescript": "^4.1.3",
     "yargs-parser": "^13.1.2"

diff --git a/packages/remote/example/client.ts b/packages/remote/example/client.ts
@@ -0,0 +1,12 @@
+import { connect } from '../src/index';
+import { main } from 'effection';
+import { Heading, Link } from '@interactors/html';
+
+main(function*() {
+  console.log("[client] connecting...");
+  yield connect('ws://127.0.0.1:30400');
+  console.log("[client] connected!");
+
+  yield Heading('Hello World').exists();
+  yield Link('Some Link').has({ href: '/incorrect' });
+});
diff --git a/packages/remote/example/server.ts b/packages/remote/example/server.ts
@@ -0,0 +1,20 @@
+import { serve } from '../src/index';
+import { main } from 'effection';
+import { Heading, Link } from '@interactors/html';
+import { JSDOM } from 'jsdom';
+import { setDocumentResolver } from '@interactors/globals';
+
+let dom = new JSDOM(`
+  <!doctype html>
+  <html>
+    <h1>Hello World</h1>
+    <a href="/foobar">Some Link</a>
+  </html>
+`);
+
+setDocumentResolver(() => dom.window.document);
+
+main(function*() {
+  console.log('[server] starting');
+  yield serve(30400, [Heading, Link]);
+});
diff --git a/packages/remote/package.json b/packages/remote/package.json
@@ -0,0 +1,61 @@
+{
+  "name": "@interactors/remote",
+  "version": "1.0.0-rc1.2",
+  "description": "Call interactors running in a remote process",
+  "main": "dist/cjs/index.js",
+  "browser": "dist/esm/index.js",
+  "types": "dist/index.d.ts",
+  "repository": "https://github.com/thefrontside/interactors.git",
+  "homepage": "https://frontside.com/interactors",
+  "author": "Frontside Engineering <engineering@frontside.com>",
+  "license": "MIT",
+  "files": [
+    "dist/**/*",
+    "src/**/*",
+    "README.md"
+  ],
+  "exports": {
+    ".": {
+      "require": "./dist/cjs/index.js",
+      "default": "./dist/esm/index.js"
+    }
+  },
+  "scripts": {
+    "clean": "rm -rf dist *.tsbuildinfo",
+    "lint": "eslint \"{src,test}/**/*.ts\"",
+    "check:types": "tsc --noEmit",
+    "test": "mocha -r ts-node/register \"test/**/*.test.ts\"",
+    "docs": "rm -rf docs && yarn typedoc --options typedoc.json",
+    "docs:netlify": "yarn prepack && yarn docs",
+    "docs:preview": "yarn parcel docs/api/v1/index.html",
+    "prepack": "tsc --build ./tsconfig.build.json && yarn prepack:es2015 && yarn prepack:commonjs",
+    "prepack:es2015": "tsc --project ./tsconfig.build.json --outdir dist/esm --module es2015",
+    "prepack:commonjs": "tsc --project ./tsconfig.build.json --outdir dist/cjs --module commonjs"
+  },
+  "dependencies": {
+    "@effection/core": "^2.2.0",
+    "@effection/dispatch": "^2.0.3",
+    "@effection/websocket-client": "^2.0.3",
+    "@effection/websocket-server": "^2.0.3",
+    "@interactors/core": "1.0.0-rc1.2",
+    "@interactors/globals": "1.0.0-rc1.1",
+    "uuid": "^8.3.2"
+  },
+  "devDependencies": {
+    "@frontside/tsconfig": "^1.2.0",
+    "@types/mocha": "^7.0.1",
+    "@types/node": "^14.17.5",
+    "@types/uuid": "^8.3.4",
+    "expect": "^24.9.0",
+    "jsdom": "^16.2.2",
+    "mocha": "^6.2.2",
+    "parcel": "^2.0.0-beta.2",
+    "ts-node": "^10.4.0",
+    "typedoc": "^0.22.7",
+    "typescript": "~4.4.4"
+  },
+  "volta": {
+    "node": "14.17.5",
+    "yarn": "1.22.11"
+  }
+}
diff --git a/packages/remote/src/index.ts b/packages/remote/src/index.ts
@@ -0,0 +1,103 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
+import { Operation, spawn } from '@effection/core';
+import { addInteractionWrapper } from '@interactors/globals';
+import { InteractorConstructor, Interactor } from '@interactors/core';
+import { createWebSocketServer, WebSocketConnection, WebSocketServer } from '@effection/websocket-server';
+import { createWebSocketClient, WebSocketClient } from '@effection/websocket-client';
+import { createDispatch } from '@effection/dispatch';
+import { v4 as uuid } from 'uuid';
+
+type ServerMessage = {
+  key: string;
+  name: string;
+  args: unknown[];
+  options: SerializedOptions,
+};
+
+type ClientMessage = {
+  key: string;
+  status: "success" | "error";
+  value?: unknown;
+  error?: string;
+};
+
+// TODO: we should change InteractionOptions in core so it is more easily serializable
+type SerializedOptions = {
+  name: string;
+  locator: string | undefined;
+  filters: Record<string, unknown>;
+  ancestors: SerializedOptions[];
+}
+
+function serializeOptions(options: Interactor<any, any>['options']): SerializedOptions {
+  return {
+    name: options.name,
+    locator: options.locator?.value as string | undefined,
+    filters: options.filter.filters,
+    ancestors: options.ancestors.map(serializeOptions),
+  }
+}
+
+export function connect(url: string): Operation<void> {
+  return {
+    *init() {
+      let client: WebSocketClient<ClientMessage, ServerMessage> = yield createWebSocketClient(url);
+      let dispatch = createDispatch<string, ClientMessage>();
+
+      addInteractionWrapper<any>(function*(perform, interaction) {
+        let key = uuid();
+        let interactor = interaction.interactor as Interactor<any, any>;
+        yield client.send({
+          key,
+          name: interaction.options.name,
+          args: interaction.options.args,
+          options: serializeOptions(interactor.options),
+        });
+
+        let reply: ClientMessage = yield dispatch.get(key).expect();
+        if(reply.status === 'error') {
+          throw new Error(reply.error || "unknown error");
+        } else {
+          return reply.value as any;
+        }
+      })
+
+      yield spawn(client.forEach(function*(message) {
+        dispatch.send(message.key, message);
+      }));
+    }
+  }
+}
+
+export function* serve(port: number, interactors: InteractorConstructor<any, any, any, any>[]): Operation<void> {
+  let map = new Map(interactors.map((i) => [i.interactorName, i]));
+  console.log('[server] strarting...');
+  let server: WebSocketServer<ServerMessage, ClientMessage> = yield createWebSocketServer({ port });
+
+  console.log(`[server] started! Listening on port ${port}`);
+
+  while(true) {
+    let connection: WebSocketConnection<ServerMessage, ClientMessage> = yield server.first();
+    if(!connection) break;
+
+    yield spawn(connection.forEach(({ options, key, name, args }) => function*() {
+      try {
+        console.log('[server] received request', key, options);
+        let constructor = map.get(options.name);
+        if(!constructor) throw new Error(`no such interactor: ${options.name}`);
+
+        let interactor = options.locator ?
+          constructor(options.locator, options.filters) :
+          constructor(options.filters);
+
+        let value = yield interactor[name](...args);
+
+        console.log('[server] success', key);
+        yield connection.send({ key, status: "success", value });
+      } catch(error: any) {
+        console.log('[server] error', key);
+        yield connection.send({ key, status: "error", error: error.message });
+      }
+    }));
+  }
+}
diff --git a/packages/remote/tsconfig.build.json b/packages/remote/tsconfig.build.json
@@ -0,0 +1,15 @@
+{
+  "extends": "../../tsconfig-base.json",
+  "compilerOptions": {
+    "outDir": "dist/cjs",
+    "rootDir": "./src",
+    "declarationDir": "dist"
+  },
+  "include": [
+    "src/**/*.ts"
+  ],
+  "references": [
+    { "path": "../core/tsconfig.build.json" },
+    { "path": "../globals/tsconfig.build.json" }
+  ]
+}
diff --git a/packages/remote/tsconfig.json b/packages/remote/tsconfig.json
@@ -0,0 +1,4 @@
+{
+  "extends": "@frontside/tsconfig",
+  "exclude": ["types/**/*.ts"]
+}
diff --git a/packages/remote/typedoc.json b/packages/remote/typedoc.json
@@ -0,0 +1,7 @@
+{
+  "out": "docs/api/v1",
+  "name": "@interactors/html",
+  "entryPoints": "src/index.ts",
+  "includeVersion": true,
+  "excludePrivate": true
+}