[pull] main from lynx-family:main

.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.

.changeset/silly-pumas-float.md

@@ -0,0 +1,8 @@
+---
+"@lynx-js/web-mainthread-apis": patch
+"@lynx-js/web-constants": patch
+"@lynx-js/web-core": patch
+"@lynx-js/web-core-server": patch
+---
+
+fix: corrupt mainthread module cache

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

@@ -26,7 +26,6 @@ import {
 } from './MainThreadRuntime.js';
 
 const moduleCache: Record<string, LynxJSModule> = {};
-
 export function loadMainThread(
   backgroundThreadRpc: Rpc,
   docu: Pick<Document, 'append' | 'createElement' | 'addEventListener'>,
@@ -65,15 +64,15 @@ export function loadMainThread(
     markTimingInternal('decode_start');
     const lepusCodeEntries = await Promise.all(
       Object.entries(lepusCode).map(async ([name, url]) => {
-        const cachedModule = moduleCache[name];
+        const cachedModule = moduleCache[url];
         if (cachedModule) {
           return [name, cachedModule] as [string, LynxJSModule];
         } else {
           Object.assign(globalThis, { module: {} });
           await import(/* webpackIgnore: true */ url);
           const module = globalThis.module as LynxJSModule;
           Object.assign(globalThis, { module: {} });
-          moduleCache[name] = module;
+          moduleCache[url] = module;
           return [name, module] as [string, LynxJSModule];
         }
       }),
@@ -169,7 +168,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

@@ -387,6 +387,16 @@ test.describe('reactlynx3 tests', () => {
       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 }) => {

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-tests/tests/react/basic-performance-div-10/index.jsx

@@ -0,0 +1,22 @@
+// 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 (
+    new Array(10).fill(0).map((_, i) => (
+      <div
+        key={i}
+        id={`target-${i}`}
+        style={{
+          height: '100px',
+          width: '100px',
+          background: 'pink',
+        }}
+      />
+    ))
+  );
+}
+
+root.render(<App></App>);

packages/web-platform/web-tests/tests/react/basic-performance-div-100/index.jsx

@@ -0,0 +1,22 @@
+// 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 (
+    new Array(100).fill(0).map((_, i) => (
+      <div
+        key={i}
+        id={`target-${i}`}
+        style={{
+          height: '100px',
+          width: '100px',
+          background: 'pink',
+        }}
+      />
+    ))
+  );
+}
+
+root.render(<App></App>);

packages/web-platform/web-tests/tests/react/basic-performance-div-1000/index.jsx

@@ -0,0 +1,22 @@
+// 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 (
+    new Array(1000).fill(0).map((_, i) => (
+      <div
+        key={i}
+        id={`target-${i}`}
+        style={{
+          height: '100px',
+          width: '100px',
+          background: 'pink',
+        }}
+      />
+    ))
+  );
+}
+
+root.render(<App></App>);

packages/web-platform/web-tests/tests/react/basic-performance-nest-level-100/index.jsx

@@ -0,0 +1,16 @@
+// 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(prop) {
+  return (
+    <div
+      id={`target-${prop.count}`}
+    >
+      {prop.count && <App count={prop.count - 1} />}
+    </div>
+  );
+}
+
+root.render(<App count={100}></App>);

packages/web-platform/web-tests/tests/server.bench.vitest.spec.ts

@@ -14,7 +14,19 @@ async function readTemplate(name: string) {
   const rawTemplate = JSON.parse(file);
   return rawTemplate as any;
 }
-const rawTemplate = await readTemplate('basic-performance-div-10000');
+const cases = {
+  'basic-performance-div-10000': await readTemplate(
+    'basic-performance-div-10000',
+  ),
+  'basic-performance-div-1000': await readTemplate(
+    'basic-performance-div-1000',
+  ),
+  'basic-performance-div-100': await readTemplate('basic-performance-div-100'),
+  'basic-performance-div-10': await readTemplate('basic-performance-div-10'),
+  'basic-performance-nest-level-100': await readTemplate(
+    'basic-performance-nest-level-100',
+  ),
+};
 describe('server-tests', () => {
   bench('basic-performance-div-10000', async () => {
     const lynxView = createLynxView({
@@ -26,7 +38,63 @@ describe('server-tests', () => {
       tagMap: {},
       initData: {},
       globalProps: {},
-      template: rawTemplate,
+      template: cases['basic-performance-div-10000'],
+    });
+    await lynxView.renderToString();
+  });
+  bench('basic-performance-div-1000', async () => {
+    const lynxView = createLynxView({
+      browserConfig: {
+        pixelRatio: 1,
+        pixelWidth: 600,
+        pixelHeight: 800,
+      },
+      tagMap: {},
+      initData: {},
+      globalProps: {},
+      template: cases['basic-performance-div-1000'],
+    });
+    await lynxView.renderToString();
+  });
+  bench('basic-performance-div-100', async () => {
+    const lynxView = createLynxView({
+      browserConfig: {
+        pixelRatio: 1,
+        pixelWidth: 600,
+        pixelHeight: 800,
+      },
+      tagMap: {},
+      initData: {},
+      globalProps: {},
+      template: cases['basic-performance-div-100'],
+    });
+    await lynxView.renderToString();
+  });
+  bench('basic-performance-div-10', async () => {
+    const lynxView = createLynxView({
+      browserConfig: {
+        pixelRatio: 1,
+        pixelWidth: 600,
+        pixelHeight: 800,
+      },
+      tagMap: {},
+      initData: {},
+      globalProps: {},
+      template: cases['basic-performance-div-10'],
+    });
+    await lynxView.renderToString();
+  });
+  bench('basic-performance-nest-level-100', async () => {
+    const lynxView = createLynxView({
+      browserConfig: {
+        pixelRatio: 1,
+        pixelWidth: 600,
+        pixelHeight: 800,
+      },
+      tagMap: {},
+      initData: {},
+      globalProps: {},
+      template: cases['basic-performance-nest-level-100'],
     });
     await lynxView.renderToString();
   });