vm 1.0.1

- adds simple test for dom element marshaling
- change randomId gen to more stable method
- add fallbacks for cacheId assignment

package.json

@@ -26,6 +26,8 @@
     "eslint": "8.57.0",
     "eslint-config-prettier": "9.1.0",
     "eslint-plugin-prettier": "5.1.3",
+    "jsdom": "24.1.1",
+    "jsdom-global": "3.0.2",
     "mocha": "10.4.0",
     "prettier": "3.2.5",
     "prettier-eslint": "16.3.0",

packages/vm/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tectonica/vm",
-  "version": "1.0.0",
+  "version": "1.0.1",
   "module": "dist/esm/index.js",
   "types": "dist/types/index.d.ts",
   "exports": {
@@ -16,12 +16,15 @@
   ],
   "scripts": {
     "prebuild": "rimraf dist",
-    "build:lib": "tsup",
+    "build:lib": "tsup --minify",
     "build:types": "tsc -p tsconfig.cjs.json --emitDeclarationOnly --outDir dist/types",
+    "build": "concurrently \"npm:build:*\"",
     "dev:lib": "tsup --watch",
     "dev:types": "tsc -p tsconfig.cjs.json --emitDeclarationOnly --outDir dist/types --watch",
-    "build": "concurrently \"npm:build:*\"",
     "dev": "concurrently \"npm:dev:*\"",
+    "debug:lib": "tsup --sourcemap",
+    "debug:types": "tsc -p tsconfig.cjs.json --emitDeclarationOnly --outDir dist/types",
+    "debug": "concurrently \"npm:debug:*\"",
     "lint": "eslint src",
     "test": "mocha -r tsx tests/**/*.test.ts",
     "publish-package": "pnpm publish --access public"

packages/vm/src/marshal.ts

@@ -6,6 +6,8 @@ export class Marshaller {
   vmCacheIdSymbol = Symbol('vmCacheId')
   hostCacheIdSymbol = Symbol('hostCacheId')
 
+  private cacheIdMap = new WeakMap()
+
   constructor(private vm?: QuickJSContext) {
     if (vm) {
       // init
@@ -100,7 +102,6 @@ export class Marshaller {
 
   serializeJSValue(value: any, magicToken?: string, parentCacheId?: string): { serialized: string; token: string } {
     const tkn = magicToken ?? generateMagicToken()
-
     const valueType = typeof value
     if (PRIMITIVE_TYPES.includes(valueType)) {
       return { serialized: JSON.stringify(value), token: tkn }
@@ -117,7 +118,7 @@ export class Marshaller {
     if (value?.[this.vmCacheIdSymbol]) {
       return { serialized: `{"type": "vmcache", "${tkn}": "${value[this.vmCacheIdSymbol]}"}`, token: tkn }
     }
-    const valueId = value?.[this.hostCacheIdSymbol] ?? generateRandomId()
+    const valueId = this.getCacheId(value) ?? generateRandomId()
     if (valueType === 'object') {
       if (value === null) {
         return { serialized: `null`, token: tkn }
@@ -215,7 +216,21 @@ export class Marshaller {
 
   private _cacheValue(cacheId: string, value: any) {
     this.valueCache.set(cacheId, value)
-    value[this.hostCacheIdSymbol] = cacheId
+    try {
+      value[this.hostCacheIdSymbol] = cacheId
+    } catch (e) {
+      // not extensible, store in big ref
+      try {
+        this.cacheIdMap.set(value, cacheId)
+      } catch (e2) {
+        return
+      }
+    }
+  }
+
+  private getCacheId(value: any): string | undefined {
+    const cacheId = value[this.hostCacheIdSymbol] ?? this.cacheIdMap.get(value)
+    return cacheId
   }
 
   private _createVMProxy(base: any, cacheId: string, parentId?: string) {

packages/vm/src/utils.ts

@@ -3,7 +3,8 @@ export const PRIMITIVE_TYPES = ['string', 'boolean', 'number']
 export function generateRandomId() {
   const randomNum = Math.pow(10, 12) * Math.random()
   const timedNum = performance.now()
-  return btoa(`${Math.floor(randomNum + timedNum)}`)
+  const seed = Math.floor(randomNum + timedNum).toString(16)
+  return `0x${seed}`
 }
 
 export function generateMagicToken({ prefix, suffix }: { prefix?: string; suffix?: string } = {}) {

packages/vm/tests/vm.test.ts

@@ -1,3 +1,4 @@
+import 'jsdom-global/register'
 import { expect } from 'chai'
 import { VMManager } from '../src/vm'
 
@@ -118,4 +119,22 @@ describe('VMManager', () => {
       expect(() => vm.eval(`const occ = 'used again'`)).not.to.throw()
     })
   })
+
+  describe('VM DOM Eval', () => {
+    const vm: VMManager = new VMManager()
+    beforeEach(async () => {
+      await vm.init()
+    })
+
+    afterEach(() => {
+      vm.teardown()
+    })
+
+    it('handles serializing dom elements', () => {
+      const context = { __container: document.createElement('div') }
+      const domProxy = vm.scopedEval(`__container`, context)
+      expect(domProxy).not.to.be.null
+      expect(typeof domProxy).to.equal('object')
+    })
+  })
 })

packages/vm/tsup.config.ts

@@ -7,9 +7,10 @@ const CJS_OUT = join(DIST, 'cjs')
 
 export default defineConfig((options) => [
   {
-    watch: options.watch,
+    watch: options.watch ?? false,
+    minify: options.minify ?? false,
+    sourcemap: options.sourcemap ?? false,
     cjsInterop: true,
-    minify: true,
     replaceNodeEnv: true,
     dts: false,
     clean: true,
@@ -21,9 +22,10 @@ export default defineConfig((options) => [
     outExtension: () => ({ js: '.js' }),
   },
   {
-    watch: options.watch,
+    watch: options.watch ?? false,
+    minify: options.minify ?? false,
+    sourcemap: options.sourcemap ?? false,
     cjsInterop: true,
-    minify: true,
     replaceNodeEnv: true,
     dts: false,
     clean: true,