Improved bridge so wrapped objects pass from the JS to Java code

Author: shai-almog

Ports/JavaScriptPort/STATUS.md

@@ -22,47 +22,54 @@ Current State
 - Bundle generation ordering bug identified and fixed for worker mode:
   - Cause: `worker.js` was generated before `port.js` was copied into the output bundle, so worker never imported JavaScriptPort natives.
   - Fix: copy JavaScriptPort assets before `worker.js` generation and keep service-worker/shell scripts excluded from worker imports.
-- Latest CI artifact confirms `worker.js` now imports `port.js`, but startup still fails in `HTML5Implementation.__init`:
-  - first failure remains `TypeError: Cannot read properties of null (reading '__classDef')`
-  - crash site moved to `HTMLDocument.createElement(...)` invocation with null document target.
 - Added explicit worker-native bindings for initial DOM bridge path:
   - `Window.getDocument()`
   - `HTMLDocument.createElement(String)`
   - `HTMLDocument.getBody()`
   - `HTMLDocument.getElementById(String)`
-- Latest CI artifacts now run worker mode but fail early before suite start with:
-  - `PARPAR:DIAG:FIRST_FAILURE:category=runtime_error`
-  - `TypeError: Cannot read properties of null (reading '__classDef')`
-  - stack rooted in `HTML5Implementation.__init` after `Window.current()` returned `null`.
+- Worker/main-thread JSO bridge introduced:
+  - `parparvm_runtime.js` now routes JSO calls on host refs through `host-call` (`__cn1_jso_bridge__`).
+  - `browser_bridge.js` now resolves host refs and executes getter/setter/method operations on main-thread DOM objects.
+  - `Window.current()` now requests host window in worker mode (instead of using `self.window` shim).
+- Host-ref class metadata added:
+  - host markers include `__cn1HostClass`, and runtime class inference consumes it.
+  - this moved startup failure from null receiver to later bridge/cast and callback transport issues.
+- Latest local repro first blocker moved again:
+  - `DataCloneError: Failed to execute 'postMessage' ... function(...) could not be cloned`
+  - cause: non-cloneable callback/function payload crossing worker host-call boundary.
+  - mitigation added: runtime host-call argument sanitization (`toHostTransferArg`) before `emitVmMessage`.
 - Existing form-constructor recovery diagnostics remain active in `port.js` and are still relevant while migrating.
 
 Next Steps
 ----------
 
-1. Validate worker-only boot in CI and local:
+1. Validate latest host-call serialization fix in CI artifacts:
+   - Check whether first failure moved off `DataCloneError`.
+   - If still present, capture offending host symbol + argument type and add explicit callback-handle transport (not null coercion) for that symbol.
+2. Continue worker-only boot validation:
    - Required markers: `PARPAR:worker-mode`, `PARPAR:DIAG:BOOT:bridgeMode=worker`.
    - Any `main-thread-mode` marker now indicates stale artifact or wrong bundle.
-2. Confirm worker native rebind fix is present in produced bundle:
+3. Confirm worker native rebind fix is present in produced bundle:
    - In generated `worker.js`, ensure `__parparInstallNativeBindings()` is invoked after imports and before `start`.
    - This must eliminate `Window.current()` null stubs from startup execution.
-3. Separate VM/EDT execution from main-thread host services cleanly:
+4. Separate VM/EDT execution from main-thread host services cleanly:
    - Keep VM/EDT scheduling in worker.
    - Ensure main-thread browser APIs are reached through explicit host-call handlers rather than direct worker DOM access.
-4. Re-triage screenshot correctness in worker mode only:
+5. Re-triage screenshot correctness in worker mode only:
    - Re-run screenshot suite and classify first blocker using the existing `TOP_BLOCKER` output.
    - Prioritize deterministic runtime failures before throughput tuning.
-5. Restore full screenshot count and correctness:
+6. Restore full screenshot count and correctness:
    - Exit gate remains `CN1SS:SUITE:FINISHED` with expected screenshot artifacts and no `BROWSER:PARPAR_ERROR`.
 
 Important Notes
 --------------
 
-- Current CI artifact (`~/Downloads/javascript-ui-tests/browser.log`) shows:
+- Current local debug artifact (`/tmp/js-ci-debug/browser.log`) shows:
   - `PARPAR:worker-mode`
   - `PARPAR:DIAG:BOOT:bridgeMode=worker`
   - `TOP_BLOCKER=runtime_error|none|none`
-  - first crash in `HTML5Implementation.__init` due null window wrapper.
-- This is consistent with native rebind order being a primary startup blocker in worker mode.
+  - first crash currently as `DataCloneError` during worker->host message transport.
+- This indicates startup has progressed beyond initial null DOM receiver failure and is now blocked by host-call payload transport semantics.
 
 Known Important Context
 -----------------------
@@ -78,5 +85,6 @@ Known Important Context
   - `CN1SS:SUITE:FINISHED`
 - Current local patch set touches:
   - `vm/ByteCodeTranslator/src/javascript/browser_bridge.js`
+  - `vm/ByteCodeTranslator/src/javascript/parparvm_runtime.js`
   - `Ports/JavaScriptPort/src/main/webapp/port.js`
   - `scripts/hellocodenameone/common/src/main/java/com/codenameone/examples/hellocodenameone/tests/Cn1ssDeviceRunner.java`

Ports/JavaScriptPort/src/main/webapp/port.js

@@ -727,7 +727,17 @@ bindNative(["cn1_com_codename1_html5_js_core_JSArray_create_int_R_com_codename1_
 });
 
 bindNative(["cn1_com_codename1_html5_js_browser_Window_current_R_com_codename1_html5_js_browser_Window", "cn1_com_codename1_html5_js_browser_Window_current___R_com_codename1_html5_js_browser_Window"], function*() {
-  const wrapper = jvm.wrapJsObject(global.window || global.self || global, "com_codename1_html5_js_browser_Window");
+  const nativeWindow = global.window;
+  const hasDomWindow = !!(nativeWindow && nativeWindow.document);
+  if (!hasDomWindow && typeof jvm.invokeHostNative === "function") {
+    const hostWindow = yield jvm.invokeHostNative("__cn1_dom_window_current__", []);
+    if (hostWindow != null) {
+      const workerWrapper = jvm.wrapJsObject(hostWindow, "com_codename1_html5_js_browser_Window");
+      jvm.enhanceJsWrapper(workerWrapper, "com_codename1_impl_html5_JSOImplementations_WindowExt");
+      return workerWrapper;
+    }
+  }
+  const wrapper = jvm.wrapJsObject((hasDomWindow ? nativeWindow : null) || global.self || global, "com_codename1_html5_js_browser_Window");
   jvm.enhanceJsWrapper(wrapper, "com_codename1_impl_html5_JSOImplementations_WindowExt");
   return wrapper;
 });
@@ -737,6 +747,27 @@ bindNative([
   "cn1_com_codename1_html5_js_browser_Window_getDocument___R_com_codename1_html5_js_dom_HTMLDocument"
 ], function*(__cn1ThisObject) {
   const win = jvm.unwrapJsValue(__cn1ThisObject);
+  if (win && win.__cn1HostRef != null && typeof jvm.invokeHostNative === "function") {
+    const hostResult = yield jvm.invokeHostNative("__cn1_jso_bridge__", [{
+      receiver: win,
+      kind: "getter",
+      member: "document",
+      args: []
+    }]);
+    return hostResult == null ? null : jvm.wrapJsObject(hostResult, "com_codename1_html5_js_dom_HTMLDocument");
+  }
+  if (typeof jvm.invokeHostNative === "function" && (!win || !win.document)) {
+    const hostWindow = yield jvm.invokeHostNative("__cn1_dom_window_current__", []);
+    if (hostWindow != null) {
+      const hostDocument = yield jvm.invokeHostNative("__cn1_jso_bridge__", [{
+        receiver: hostWindow,
+        kind: "getter",
+        member: "document",
+        args: []
+      }]);
+      return hostDocument == null ? null : jvm.wrapJsObject(hostDocument, "com_codename1_html5_js_dom_HTMLDocument");
+    }
+  }
   if (!win || !win.document) {
     return null;
   }
@@ -748,19 +779,47 @@ bindNative([
   "cn1_com_codename1_html5_js_dom_HTMLDocument_createElement___java_lang_String_R_com_codename1_html5_js_dom_HTMLElement"
 ], function*(__cn1ThisObject, tagName) {
   const doc = jvm.unwrapJsValue(__cn1ThisObject);
+  const tag = tagName == null ? "" : jvm.toNativeString(tagName);
+  const canvasClass = "com_codename1_html5_js_dom_HTMLCanvasElement";
+  if (doc && doc.__cn1HostRef != null && typeof jvm.invokeHostNative === "function") {
+    const hostResult = yield jvm.invokeHostNative("__cn1_jso_bridge__", [{
+      receiver: doc,
+      kind: "method",
+      member: "createElement",
+      args: [tag]
+    }]);
+    if (hostResult == null) {
+      return null;
+    }
+    const expectedClass = String(tag).toLowerCase() === "canvas"
+      ? canvasClass
+      : jvm.inferJsObjectClass(hostResult, "com_codename1_html5_js_dom_HTMLElement");
+    return jvm.wrapJsObject(hostResult, expectedClass);
+  }
   if (!doc || typeof doc.createElement !== "function") {
     return null;
   }
-  const tag = tagName == null ? "" : jvm.toNativeString(tagName);
   const element = doc.createElement(tag);
-  return jvm.wrapJsObject(element, jvm.inferJsObjectClass(element, "com_codename1_html5_js_dom_HTMLElement"));
+  const expectedClass = String(tag).toLowerCase() === "canvas"
+    ? canvasClass
+    : jvm.inferJsObjectClass(element, "com_codename1_html5_js_dom_HTMLElement");
+  return jvm.wrapJsObject(element, expectedClass);
 });
 
 bindNative([
   "cn1_com_codename1_html5_js_dom_HTMLDocument_getBody_R_com_codename1_html5_js_dom_HTMLElement",
   "cn1_com_codename1_html5_js_dom_HTMLDocument_getBody___R_com_codename1_html5_js_dom_HTMLElement"
 ], function*(__cn1ThisObject) {
   const doc = jvm.unwrapJsValue(__cn1ThisObject);
+  if (doc && doc.__cn1HostRef != null && typeof jvm.invokeHostNative === "function") {
+    const hostResult = yield jvm.invokeHostNative("__cn1_jso_bridge__", [{
+      receiver: doc,
+      kind: "getter",
+      member: "body",
+      args: []
+    }]);
+    return hostResult == null ? null : jvm.wrapJsObject(hostResult, "com_codename1_html5_js_dom_HTMLBodyElement");
+  }
   if (!doc || !doc.body) {
     return null;
   }
@@ -772,10 +831,32 @@ bindNative([
   "cn1_com_codename1_html5_js_dom_HTMLDocument_getElementById___java_lang_String_R_com_codename1_html5_js_dom_HTMLElement"
 ], function*(__cn1ThisObject, id) {
   const doc = jvm.unwrapJsValue(__cn1ThisObject);
+  const nativeId = id == null ? "" : jvm.toNativeString(id);
+  const canvasClass = "com_codename1_html5_js_dom_HTMLCanvasElement";
+  if (doc && doc.__cn1HostRef != null && typeof jvm.invokeHostNative === "function") {
+    const hostResult = yield jvm.invokeHostNative("__cn1_jso_bridge__", [{
+      receiver: doc,
+      kind: "method",
+      member: "getElementById",
+      args: [nativeId]
+    }]);
+    if (hostResult == null) {
+      return null;
+    }
+    const tagName = yield jvm.invokeHostNative("__cn1_jso_bridge__", [{
+      receiver: hostResult,
+      kind: "getter",
+      member: "tagName",
+      args: []
+    }]);
+    const expectedClass = String(tagName || "").toUpperCase() === "CANVAS"
+      ? canvasClass
+      : jvm.inferJsObjectClass(hostResult, "com_codename1_html5_js_dom_HTMLElement");
+    return jvm.wrapJsObject(hostResult, expectedClass);
+  }
   if (!doc || typeof doc.getElementById !== "function") {
     return null;
   }
-  const nativeId = id == null ? "" : jvm.toNativeString(id);
   const element = doc.getElementById(nativeId);
   return element == null ? null : jvm.wrapJsObject(element, jvm.inferJsObjectClass(element, "com_codename1_html5_js_dom_HTMLElement"));
 });

vm/ByteCodeTranslator/src/javascript/browser_bridge.js

@@ -100,6 +100,128 @@
       }
     }
   };
+
+  var hostRefNextId = 1;
+  var hostRefById = {};
+  var hostRefByObject = (typeof WeakMap === 'function') ? new WeakMap() : null;
+
+  function isHostRefMarker(value) {
+    return !!(value && typeof value === 'object'
+      && value.__cn1HostRef != null
+      && value.__cn1HostRef !== 0);
+  }
+
+  function storeHostRef(value) {
+    if (value == null || (typeof value !== 'object' && typeof value !== 'function')) {
+      return value;
+    }
+    var inferredClass = inferHostClass(value);
+    if (hostRefByObject && hostRefByObject.has(value)) {
+      var existing = { __cn1HostRef: hostRefByObject.get(value) };
+      if (inferredClass) {
+        existing.__cn1HostClass = inferredClass;
+      }
+      return existing;
+    }
+    var id = hostRefNextId++;
+    hostRefById[id] = value;
+    if (hostRefByObject) {
+      hostRefByObject.set(value, id);
+    }
+    var marker = { __cn1HostRef: id };
+    if (inferredClass) {
+      marker.__cn1HostClass = inferredClass;
+    }
+    return marker;
+  }
+
+  function resolveHostRef(marker) {
+    if (!isHostRefMarker(marker)) {
+      return marker;
+    }
+    return hostRefById[marker.__cn1HostRef] || null;
+  }
+
+  function mapHostArgs(args) {
+    var out = [];
+    var list = args || [];
+    for (var i = 0; i < list.length; i++) {
+      out.push(resolveHostRef(list[i]));
+    }
+    return out;
+  }
+
+  function hostResult(value) {
+    if (value == null || typeof value === 'string' || typeof value === 'number' || typeof value === 'boolean') {
+      return value;
+    }
+    return storeHostRef(value);
+  }
+
+  function inferHostClass(value) {
+    if (value === global.window) {
+      return 'com_codename1_html5_js_browser_Window';
+    }
+    if (value && value.nodeType === 9) {
+      return 'com_codename1_html5_js_dom_HTMLDocument';
+    }
+    if (value && value.canvas && typeof value.drawImage === 'function' && typeof value.fillRect === 'function') {
+      return 'com_codename1_html5_js_canvas_CanvasRenderingContext2D';
+    }
+    if (value && value.setProperty && value.removeProperty) {
+      return 'com_codename1_html5_js_dom_CSSStyleDeclaration';
+    }
+    if (value && value.tagName) {
+      var tagName = String(value.tagName).toUpperCase();
+      if (tagName === 'CANVAS') {
+        return 'com_codename1_html5_js_dom_HTMLCanvasElement';
+      }
+      if (tagName === 'BODY') {
+        return 'com_codename1_html5_js_dom_HTMLBodyElement';
+      }
+      return 'com_codename1_html5_js_dom_HTMLElement';
+    }
+    if (value && value.nodeType === 1) {
+      return 'com_codename1_html5_js_dom_Element';
+    }
+    return null;
+  }
+
+  hostBridge.register('__cn1_dom_window_current__', function() {
+    if (global.window) {
+      return hostResult(global.window);
+    }
+    return null;
+  });
+
+  hostBridge.register('__cn1_jso_bridge__', function(request) {
+    var payload = request || {};
+    var receiver = resolveHostRef(payload.receiver);
+    if (receiver == null) {
+      throw new Error('Missing host receiver for JSO bridge');
+    }
+    var kind = payload.kind;
+    var member = payload.member;
+    var args = mapHostArgs(payload.args || []);
+    var value;
+    if (kind === 'getter') {
+      value = receiver[member];
+    } else if (kind === 'setter') {
+      receiver[member] = args.length ? args[0] : null;
+      value = null;
+    } else {
+      var fn = receiver[member];
+      if (typeof fn === 'function') {
+        value = fn.apply(receiver, args);
+      } else if (!args.length && Object.prototype.hasOwnProperty.call(receiver, member)) {
+        value = receiver[member];
+      } else {
+        throw new Error('Missing JS member ' + member + ' for host receiver');
+      }
+    }
+    return hostResult(value);
+  });
+
   global.__parparMessages = [];
   global.cn1Initialized = false;
   global.cn1Started = false;