Implement Canvas API

package.json

@@ -37,6 +37,7 @@
     "prepublishOnly": "npm run build"
   },
   "dependencies": {
+    "@types/sinon": "^7.0.10",
     "dompurify": "1.0.10"
   },
   "devDependencies": {
@@ -69,6 +70,7 @@
     "rollup-plugin-node-resolve": "4.0.1",
     "rollup-plugin-terser": "4.0.4",
     "serve-static": "1.13.2",
+    "sinon": "^7.1.1",
     "tslint": "5.14.0",
     "typescript": "3.3.4000"
   },

src/main-thread/commands/bounding-client-rect.ts

@@ -62,6 +62,6 @@ export class BoundingClientRectProcessor {
         boundingRect.width,
         boundingRect.height,
       ],
-    });
+    }, []);
   }
 }

src/main-thread/commands/event-subscription.ts

@@ -118,7 +118,7 @@ const fireValueChange = (workerContext: WorkerContext, node: RenderableElement):
       [TransferrableKeys.index]: node._index_,
       [TransferrableKeys.value]: node.value,
     },
-  });
+  }, []);
 };
 
 /**
@@ -154,5 +154,5 @@ const eventHandler = (workerContext: WorkerContext, index: number) => (event: Ev
       [TransferrableKeys.type]: event.type,
       [TransferrableKeys.keyCode]: 'keyCode' in event ? event.keyCode : undefined,
     },
-  });
+  }, []);
 };

src/main-thread/commands/offscreen-canvas.ts

@@ -0,0 +1,38 @@
+import { WorkerContext } from "../worker";
+import { TransferrableKeys } from "../../transfer/TransferrableKeys";
+import { MessageType } from "../../transfer/Messages";
+import { NodeContext } from "../nodes";
+import { TransferrableMutationRecord } from "../../transfer/TransferrableRecord";
+import { NumericBoolean } from "../../utils";
+
+export class OffscreenCanvasProcessor {
+    private nodeContext: NodeContext;
+    private workerContext: WorkerContext;
+
+    constructor(nodeContext: NodeContext, workerContext: WorkerContext) {
+        this.nodeContext = nodeContext;
+        this.workerContext = workerContext;
+    }
+
+    process(mutation: TransferrableMutationRecord): void {
+        const nodeId = mutation[TransferrableKeys.target];
+        const target = this.nodeContext.getNode(nodeId) as HTMLCanvasElement;
+
+        if (!target) {
+            console.error('getNode() yields a null value. Node id (' + nodeId + ') was not found.');
+            return;
+        }
+
+        const offscreen = target.transferControlToOffscreen();
+
+        this.workerContext.messageToWorker({
+            [TransferrableKeys.type]: MessageType.OFFSCREEN_CANVAS_INSTANCE,
+            [TransferrableKeys.target]: {
+                // This is a TransferredNode (index: number, transferred: NumericBoolean)
+                [TransferrableKeys.index]: target._index_,
+                [TransferrableKeys.transferred]: NumericBoolean.TRUE,
+            }, 
+            [TransferrableKeys.data]: offscreen, // Object, an OffscreenCanvas
+        }, [offscreen]);
+    }
+}

src/main-thread/debugging.ts

@@ -31,6 +31,7 @@ import {
   BoundingClientRectToWorker,
   LongTaskStartToWorker,
   LongTaskEndToWorker,
+  OffscreenCanvasToWorker,
 } from '../transfer/Messages';
 import { HydrateableNode, TransferredNode } from '../transfer/TransferrableNodes';
 import { NodeContext } from './nodes';
@@ -53,6 +54,7 @@ const MUTATION_RECORD_TYPE_REVERSE_MAPPING = {
   '5': 'GET_BOUNDING_CLIENT_RECT',
   '6': 'LONG_TASK_START',
   '7': 'LONG_TASK_END',
+  '8': 'OFFSCREEN_CANVAS_INSTANCE',
 };
 
 export class DebuggingContext {
@@ -119,6 +121,8 @@ export class DebuggingContext {
       return { type: 'LONG_TASK_START' };
     } else if (isLongTaskEnd(message)) {
       return { type: 'LONG_TASK_END' };
+    } else if (isOffscreenCanvasInstance) {
+      return { type: 'OFFSCREEN_CANVAS_INSTANCE'};
     } else {
       return 'Unrecognized MessageToWorker type: ' + message[TransferrableKeys.type];
     }
@@ -249,6 +253,13 @@ function isLongTaskEnd(message: MessageToWorker): message is LongTaskEndToWorker
   return message[TransferrableKeys.type] === MessageType.LONG_TASK_END;
 }
 
+/**
+ * @param data 
+ */
+function isOffscreenCanvasInstance(message: MessageToWorker): message is OffscreenCanvasToWorker {
+  return message[TransferrableKeys.type] === MessageType.OFFSCREEN_CANVAS_INSTANCE;
+}
+
 /**
  * @param e
  */

src/main-thread/main-thread.d.ts

@@ -32,6 +32,10 @@ declare interface Sanitizer {
   validProperty(tag: string, prop: string, value: string): boolean;
 }
 
+declare interface HTMLCanvasElement {
+  transferControlToOffscreen(): Transferable;
+}
+
 interface Node {
   _index_: number;
 }

src/main-thread/mutator.ts

@@ -26,6 +26,7 @@ import { TransferrableMutationRecord } from '../transfer/TransferrableRecord';
 import { TransferrableKeys } from '../transfer/TransferrableKeys';
 import { TransferrableNode } from '../transfer/TransferrableNodes';
 import { WorkerContext } from './worker';
+import { OffscreenCanvasProcessor } from './commands/offscreen-canvas';
 
 export class MutatorProcessor {
   private strings: Strings;
@@ -61,6 +62,7 @@ export class MutatorProcessor {
     const eventSubscriptionProcessor = new EventSubscriptionProcessor(strings, nodeContext, workerContext);
     const boundingClientRectProcessor = new BoundingClientRectProcessor(nodeContext, workerContext);
     const longTaskProcessor = new LongTaskProcessor(callbacks);
+    const offscreenCanvasProcessor = new OffscreenCanvasProcessor(nodeContext, workerContext);
 
     this.mutators = {
       [MutationRecordType.CHILD_LIST]: this.mutateChildList.bind(this),
@@ -71,6 +73,7 @@ export class MutatorProcessor {
       [MutationRecordType.GET_BOUNDING_CLIENT_RECT]: boundingClientRectProcessor.process.bind(boundingClientRectProcessor),
       [MutationRecordType.LONG_TASK_START]: longTaskProcessor.processStart,
       [MutationRecordType.LONG_TASK_END]: longTaskProcessor.processEnd,
+      [MutationRecordType.OFFSCREEN_CANVAS_INSTANCE]: offscreenCanvasProcessor.process.bind(offscreenCanvasProcessor),
     };
   }
 

src/main-thread/worker.ts

@@ -85,10 +85,10 @@ export class WorkerContext {
   /**
    * @param message
    */
-  messageToWorker(message: MessageToWorker) {
+  messageToWorker(message: MessageToWorker, transferables: Transferable[]) {
     if (this.callbacks && this.callbacks.onSendMessage) {
       this.callbacks.onSendMessage(message);
     }
-    this.worker.postMessage(message);
+    this.worker.postMessage(message, transferables);
   }
 }