feat: allow lynx code to get JS engine provided properties on globalThis

.changeset/busy-hounds-take.md

@@ -0,0 +1,13 @@
+---
+"@lynx-js/web-mainthread-apis": patch
+"@lynx-js/web-worker-runtime": patch
+"@lynx-js/web-core": patch
+---
+
+feat: allow lynx code to get JS engine provided properties on globalThis
+
+```
+globalThis.Reflect; // this will be the Reflect Object
+```
+
+Note that `assigning to the globalThis` is still not allowed.

packages/web-platform/web-mainthread-apis/src/MainThreadRuntime.ts

@@ -205,9 +205,20 @@ export class MainThreadRuntime {
    */
   __lynxGlobalBindingValues: Record<string, any> = {};
 
-  get globalThis() {
-    return this;
-  }
+  globalThis = new Proxy(this, {
+    get: (target, prop) => {
+      // @ts-expect-error
+      return target[prop] ?? globalThis[prop];
+    },
+    set: (target, prop, value) => {
+      // @ts-expect-error
+      target[prop] = value;
+      return true;
+    },
+    ownKeys(target) {
+      return Reflect.ownKeys(target).filter((key) => key !== 'globalThis');
+    },
+  });
 
   SystemInfo: typeof systemInfo;
 

packages/web-platform/web-mainthread-apis/src/loadMainThread.ts

@@ -169,7 +169,7 @@ export function loadMainThread(
         publicComponentEvent,
         postExposure,
       },
-    }).globalThis;
+    });
     markTimingInternal('decode_end');
     entry!(runtime);
     jsContext.__start(); // start the jsContext after the runtime is created

packages/web-platform/web-tests/shell-project/mainthread-test.ts

@@ -135,7 +135,7 @@ function initializeMainThreadTest() {
       },
       postExposure: () => {},
     },
-  });
+  }).globalThis;
   Object.assign(globalThis, runtime);
   Object.assign(globalThis, {
     genFiberElementTree,

packages/web-platform/web-tests/tests/react.spec.ts

@@ -35,7 +35,7 @@
 
 const expectHasText = async (page: Page, text: string) => {
   const hasText = (await page.getByText(text).count()) === 1;
   await expect(hasText).toBe(true);
 };
 
 const expectNoText = async (page: Page, text: string) => {
@@ -387,6 +387,16 @@
       await wait(100);
       await expect(page.locator('#target')).toHaveCSS('color', 'rgb(0, 0, 0)');
     });
+    test('basic-globalThis-property-bts', async ({ page }, { title }) => {
+      await goto(page, title);
+      await wait(100);
+      await expect(page.locator('#target')).toHaveCSS('color', 'rgb(0, 0, 0)');
+    });
+    test('basic-globalThis-property-mts', async ({ page }, { title }) => {
+      await goto(page, title);
+      await wait(100);
+      await expect(page.locator('#target')).toHaveCSS('color', 'rgb(0, 0, 0)');
+    });
   });
   test.describe('apis', () => {
     test('api-custom-template-loader', async ({ page }, { title }) => {
@@ -933,7 +943,7 @@
         globalThis.lynxView.sendGlobalEvent('event-test', ['change']);
       });
       await wait(100);
       await expect(target).toHaveCSS(
         'background-color',
         'rgb(0, 128, 0)',
       ); // green;
@@ -1146,7 +1156,7 @@
       await wait(100);
       const target = page.locator('#target');
       await target.click();
       await expect(await target.getAttribute('style')).toContain('green');
       await target.click();
       await expect(await target.getAttribute('style')).toContain('pink');
     });
@@ -1395,7 +1405,7 @@
           await wait(500);
           const count = (await page.getByText('the count is:1').count())
             + (await await page.getByText('the count is:2').count());
           expect(count).toBe(1);
         },
       );
 
@@ -2086,7 +2096,7 @@
           await page.locator('.focus').click({ force: true });
           await wait(100);
           const result = await page.locator('.result').first().innerText();
           expect(result).toBe('bindfocus');
         },
       );
       // input/focus test-case end
@@ -2097,7 +2107,7 @@
         await page.locator('input').click({ force: true });
         await wait(100);
         const result = await page.locator('.result').first().innerText();
         expect(result).toBe('bindfocus');
       });
       // input/bindfocus test-case end
 
@@ -2107,7 +2117,7 @@
         await page.locator('input').press('Enter');
         await wait(100);
         const result = await page.locator('.result').first().innerText();
         expect(result).toBe('bindconfirm');
       });
       // input/bindconfirm test-case end
 

packages/web-platform/web-tests/tests/react/basic-globalThis-property-bts/index.jsx

@@ -0,0 +1,19 @@
+// Copyright 2023 The Lynx Authors. All rights reserved.
+// Licensed under the Apache License Version 2.0 that can be found in the
+// LICENSE file in the root directory of this source tree.
+import { root } from '@lynx-js/react';
+
+function App() {
+  return (
+    <view
+      id='target'
+      style={{
+        height: '100px',
+        width: '100px',
+        background: globalThis.Object ? 'green' : 'pink',
+      }}
+    />
+  );
+}
+
+root.render(<App></App>);

packages/web-platform/web-tests/tests/react/basic-globalThis-property-mts/index.jsx

@@ -0,0 +1,23 @@
+// Copyright 2023 The Lynx Authors. All rights reserved.
+// Licensed under the Apache License Version 2.0 that can be found in the
+// LICENSE file in the root directory of this source tree.
+import { useState, root, useEffect } from '@lynx-js/react';
+function App() {
+  const [color, setColor] = useState('pink');
+  useEffect(() => {
+    if (globalThis.Object) {
+      setColor('green');
+    }
+  }, []);
+  return (
+    <view
+      id='target'
+      style={{
+        height: '100px',
+        width: '100px',
+        background: color,
+      }}
+    />
+  );
+}
+root.render(<App />);

packages/web-platform/web-worker-runtime/src/backgroundThread/background-apis/createNativeApp.ts

@@ -66,7 +66,22 @@ export async function createNativeApp(config: {
     return {
       init: (lynxCoreInject) => {
         lynxCoreInject.tt.lynxCoreInject = lynxCoreInject;
-        lynxCoreInject.tt.globalThis ??= lynxCoreInject;
+        lynxCoreInject.tt.globalThis ??= new Proxy(lynxCoreInject, {
+          get(target, prop) {
+            // @ts-expect-error
+            return target[prop] ?? globalThis[prop];
+          },
+          set(target, prop, value) {
+            // @ts-expect-error
+            target[prop] = value;
+            return true;
+          },
+          ownKeys(target) {
+            return Reflect.ownKeys(target).filter((key) =>
+              key !== 'globalThis'
+            );
+          },
+        });
         Object.assign(lynxCoreInject.tt, {
           SystemInfo: { ...systemInfo, ...browserConfig },
         });