Formatting and a dummy ws-client to test

js/packages/core/index.ts

@@ -10,6 +10,8 @@ import {
   isNode,
   resolve,
   NodeRepr_t,
+  format,
+  formatRoots,
 } from './nodeUtils';
 
 
@@ -242,4 +244,6 @@ export {
   renderWithDelegate,
   stdlib,
   stdlib as el,
+  format,
+  formatRoots,
 };

js/packages/core/nodeUtils.ts

@@ -1,4 +1,4 @@
-import { create, isNode as NodeRepr_isNode } from './src/NodeRepr.gen';
+import { format, formatRoots, create, isNode as NodeRepr_isNode } from './src/NodeRepr.gen';
 import type { t as NodeRepr_t } from './src/NodeRepr.gen';
 
 import invariant from 'invariant';
@@ -41,3 +41,5 @@ export function unpack(node: NodeRepr_t, numChannels: number): Array<NodeRepr_t>
     };
   });
 }
+
+export { format, formatRoots };

js/packages/core/src/NodeRepr.gen.ts

@@ -26,6 +26,15 @@ export type t = {
   readonly children: list<t>
 };
 
+// tslint:disable-next-line:interface-over-type-literal
+export type formatted = {
+  readonly hash: number; 
+  readonly kind: string; 
+  readonly props: props; 
+  readonly output_channel: number; 
+  readonly children: formatted[]
+};
+
 // tslint:disable-next-line:interface-over-type-literal
 export type shallow = {
   readonly symbol: string; 
@@ -38,11 +47,15 @@ export type shallow = {
   }
 };
 
+export const format: (node:t) => formatted = NodeReprBS.format;
+
 export const create: (kind:string, props:{}, children:t[]) => t = function (Arg1: any, Arg2: any, Arg3: any) {
   const result = Curry._3(NodeReprBS.create, Arg1, Arg2, Arg3);
   return result
 };
 
+export const formatRoots: (roots:t[]) => formatted[] = NodeReprBS.formatRoots;
+
 export const isNode: <T1>(a:{ readonly symbol: T1 }) => boolean = NodeReprBS.isNode;
 
 export const shallowCopy: (node:t) => shallow = NodeReprBS.shallowCopy;

js/packages/core/src/NodeRepr.res

@@ -17,6 +17,15 @@ type rec t = {
   children: list<t>,
 }
 
+@genType
+type rec formatted = {
+  hash: int,
+  kind: string,
+  props: props,
+  output_channel: int,
+  children: array<formatted>,
+}
+
 @genType
 type shallow = {
   symbol: string,
@@ -30,6 +39,17 @@ type shallow = {
 // Symbol constant for helping to identify node objects
 let symbol = "__ELEM_NODE__"
 
+@genType
+let rec format = (node: t): formatted => {
+  {
+    hash: node.hash,
+    kind: node.kind,
+    props: node.props,
+    output_channel: node.outputChannel,
+    children: Belt.List.toArray(Belt.List.map(node.children, n => format(n))),
+  }
+}
+
 @genType
 let create = (kind, props: 'a, children: array<t>): t => {
   let childrenList = Belt.List.fromArray(children)
@@ -53,6 +73,13 @@ let create = (kind, props: 'a, children: array<t>): t => {
   }
 }
 
+@genType
+let formatRoots = (roots: array<t>): array<formatted> => {
+  Belt.Array.mapWithIndex(roots, (i, g) => {
+    format(create("root", {"channel": i, "fadeInMs": 8, "fadeOutMs": 8}, [g]))
+  })
+}
+
 @genType
 let isNode = (a): bool => {
   // We identify Node-type objects from JavaScript/TypeScript by looking

js/packages/core/ws-client.js

@@ -0,0 +1,22 @@
+import {el, Renderer, formatRoots} from "./dist/index.js";
+
+// Create WebSocket connection.
+const socket = new WebSocket("ws://localhost:8080");
+
+// Connection opened
+socket.addEventListener("open", (event) => {
+  // Once the connection is opened we generate a new graph every 500ms
+  setInterval(() => {
+    let i = 1 + Math.round((Math.random() * 8));
+    let f = 110 * i;
+
+    socket.send(JSON.stringify({
+      graph: formatRoots([el.cycle(el.const({key: 'a', value: f})), el.cycle(el.const({key: 'b', value: f * 1.01}))]),
+    }));
+  }, 500);
+});
+
+// Listen for messages
+socket.addEventListener("message", (event) => {
+  console.log("Message from server ", event.data);
+});