feat: support lynx.reload()

.changeset/upset-bats-bathe.md

@@ -0,0 +1,7 @@
+---
+"@lynx-js/web-worker-runtime": patch
+"@lynx-js/web-constants": patch
+"@lynx-js/web-core": patch
+---
+
+feat: support lynx.reload()

packages/web-platform/web-constants/src/endpoints.ts

@@ -260,3 +260,8 @@ export const loadTemplateMultiThread = createRpcEndpoint<
   [string],
   LynxTemplate
 >('loadTemplateMultiThread', false, true);
+
+export const reloadEndpoint = createRpcEndpoint<
+  [],
+  void
+>('reload', false, false);

packages/web-platform/web-core-wasm-e2e/tests/reactlynx.spec.ts

@@ -239,6 +239,19 @@ test.describe('reactlynx3 tests', () => {
         page.locator('#wheat'),
       ).toHaveAttribute('style', /wheat/g);
     });
+
+    test('basic-lynx-reload', async ({ page }, { title }) => {
+      await goto(page, title);
+      await wait(100);
+      const target = page.locator('#target');
+      await target.click();
+      await wait(100);
+      await expect(await target.getAttribute('style')).toContain('green');
+      await page.locator('#reload').click();
+      await wait(100);
+      await expect(await target.getAttribute('style')).toContain('pink');
+    });
+
     test(
       'basic-wrapper-element-do-not-impact-layout',
       async ({ page }, { title }) => {

packages/web-platform/web-core-wasm-e2e/tests/reactlynx/basic-lynx-reload/index.jsx

@@ -0,0 +1,32 @@
+// 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 } from '@lynx-js/react';
+function App() {
+  const [color, setColor] = useState('pink');
+  return (
+    <>
+      <view
+        id='target'
+        bindTap={() => setColor(color === 'pink' ? 'green' : 'pink')}
+        style={{
+          height: '100px',
+          width: '100px',
+          background: color,
+        }}
+      />
+      <view
+        id='reload'
+        bindTap={() => {
+          lynx.reload();
+        }}
+        style={{
+          height: '100px',
+          width: '100px',
+          background: color,
+        }}
+      />
+    </>
+  );
+}
+root.render(<App />);

packages/web-platform/web-core-wasm/ts/client/background/background-apis/createBackgroundLynx.ts

@@ -5,6 +5,7 @@
 import {
   dispatchCoreContextOnBackgroundEndpoint,
   dispatchJSContextOnMainThreadEndpoint,
+  reloadEndpoint,
 } from '../../endpoints.js';
 import type { Rpc } from '@lynx-js/web-worker-rpc';
 import { createGetCustomSection } from './crossThreadHandlers/createGetCustomSection.js';
@@ -56,5 +57,8 @@ export function createBackgroundLynx(
         },
       ) => void,
     ) => nativeApp.queryComponent(source, callback),
+    reload: () => {
+      mainThreadRpc.invoke(reloadEndpoint, []);
+    },
   };
 }

packages/web-platform/web-core-wasm/ts/client/endpoints.ts

@@ -212,3 +212,8 @@ export const updateBTSChunkEndpoint = createRpcEndpoint<
   [/** url */ string, Record<string, string>],
   void
 >('updateBTSChunkEndpoint', false, true);
+
+export const reloadEndpoint = createRpcEndpoint<
+  [],
+  void
+>('reload', false, false);

packages/web-platform/web-core-wasm/ts/client/mainthread/Background.ts

@@ -42,6 +42,7 @@ import { registerTriggerComponentEventHandler } from './crossThreadHandlers/regi
 import { registerTriggerElementMethodEndpointHandler } from './crossThreadHandlers/registerTriggerElementMethodEndpointHandler.js';
 import { registerNapiModulesCallHandler } from './crossThreadHandlers/registerNapiModulesCallHandler.js';
 import { registerNativeModulesCallHandler } from './crossThreadHandlers/registerNativeModulesCallHandler.js';
+import { registerReloadHandler } from './crossThreadHandlers/registerReloadHandler.js';
 
 function createWebWorker(): Worker {
   return new Worker(
@@ -236,6 +237,7 @@ export class BackgroundThread implements AsyncDisposable {
         });
       },
     );
+    registerReloadHandler(this.#rpc, this.#lynxViewInstance);
     registerGetPathInfoHandler(this.#rpc, this.#lynxViewInstance);
     registerInvokeUIMethodHandler(this.#rpc, this.#lynxViewInstance);
     registerNapiModulesCallHandler(this.#rpc, this.#lynxViewInstance);

packages/web-platform/web-core-wasm/ts/client/mainthread/crossThreadHandlers/registerReloadHandler.ts

@@ -0,0 +1,19 @@
+// Copyright 2026 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 type { Rpc } from '@lynx-js/web-worker-rpc';
+import { reloadEndpoint } from '../../endpoints.js';
+import type { LynxViewInstance } from '../LynxViewInstance.js';
+
+export function registerReloadHandler(
+  rpc: Rpc,
+  lynxViewInstance: LynxViewInstance,
+) {
+  rpc.registerHandler(
+    reloadEndpoint,
+    () => {
+      lynxViewInstance.parentDom.reload();
+    },
+  );
+}

packages/web-platform/web-core/src/apis/LynxView.ts

@@ -480,6 +480,9 @@ export class LynxView extends HTMLElement {
                 );
               },
               customTemplateLoader: this.customTemplateLoader,
+              reload: () => {
+                this.reload();
+              },
             },
             ssr: ssrData
               ? JSON.parse(decodeURI(ssrData)) as SSRDumpInfo

packages/web-platform/web-core/src/uiThread/crossThreadHandlers/registerReloadHandler.ts

@@ -0,0 +1,16 @@
+// Copyright 2026 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 type { Rpc } from '@lynx-js/web-worker-rpc';
+import { reloadEndpoint } from '@lynx-js/web-constants';
+
+export function registerReloadHandler(
+  rpc: Rpc,
+  reloadHandler: () => void,
+) {
+  rpc.registerHandler(
+    reloadEndpoint,
+    reloadHandler,
+  );
+}

packages/web-platform/web-core/src/uiThread/startBackground.ts

@@ -19,6 +19,7 @@ import { registerTriggerElementMethodEndpointHandler } from './crossThreadHandle
 import type { StartUIThreadCallbacks } from './startUIThread.js';
 import { registerReportErrorHandler } from './crossThreadHandlers/registerReportErrorHandler.js';
 import { registerGetPathInfoHandler } from './crossThreadHandlers/registerGetPathInfoHandler.js';
+import { registerReloadHandler } from './crossThreadHandlers/registerReloadHandler.js';
 
 export function startBackground(
   backgroundRpc: Rpc,
@@ -60,6 +61,10 @@ export function startBackground(
     'app-service.js',
     callbacks.onError,
   );
+  registerReloadHandler(
+    backgroundRpc,
+    callbacks.reload,
+  );
 
   const sendGlobalEvent = backgroundRpc.createCall(sendGlobalEventEndpoint);
   const markTiming = backgroundRpc.createCall(markTimingEndpoint);

packages/web-platform/web-core/src/uiThread/startUIThread.ts

@@ -28,6 +28,7 @@ export type StartUIThreadCallbacks = {
   napiModulesCall: NapiModulesCall;
   onError?: (err: Error, release: string, fileName: string) => void;
   customTemplateLoader?: TemplateLoader;
+  reload: () => void;
 };
 
 export function startUIThread(

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

@@ -21,7 +21,7 @@
     ReturnType<typeof expect<Page>>['toHaveScreenshot']
   >[0],
 ) => {
   await expect(page).toHaveScreenshot([
     `${caseName}`,
     `${subcaseName}`,
     `${label}.png`,
@@ -250,6 +250,18 @@
         page.locator('#wheat'),
       ).toHaveAttribute('style', /wheat/g);
     });
+
+    test('basic-lynx-reload', async ({ page }, { title }) => {
+      await goto(page, title);
+      await wait(100);
+      const target = page.locator('#target');
+      await target.click();
+      await wait(100);
+      await expect(await target.getAttribute('style')).toContain('green');
+      await page.locator('#reload').click();
+      await wait(100);
+      await expect(await target.getAttribute('style')).toContain('pink');
+    });
     test(
       'basic-wrapper-element-do-not-impact-layout',
       async ({ page }, { title }) => {
@@ -4238,7 +4250,7 @@
           // we may miss the first one
           expect(autoplay[2]).toBe(true);
           expect(autoplay[3]).toBe(true);
           expect(programming).toBe(true);
           if (browserName === 'chromium') {
             expect(manual).toBe(true);
           }
@@ -4486,7 +4498,7 @@
           await wait(100);
           expect(bindblur).toBeTruthy();
           expect(bindfocus).toBeTruthy();
           expect(bindinput).toBeTruthy();
         },
       );
       // x-textarea/bindinput test-case end

packages/web-platform/web-tests/tests/react/basic-lynx-reload/index.jsx

@@ -0,0 +1,32 @@
+// 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 } from '@lynx-js/react';
+function App() {
+  const [color, setColor] = useState('pink');
+  return (
+    <>
+      <view
+        id='target'
+        bindTap={() => setColor(color === 'pink' ? 'green' : 'pink')}
+        style={{
+          height: '100px',
+          width: '100px',
+          background: color,
+        }}
+      />
+      <view
+        id='reload'
+        bindTap={() => {
+          lynx.reload();
+        }}
+        style={{
+          height: '100px',
+          width: '100px',
+          background: color,
+        }}
+      />
+    </>
+  );
+}
+root.render(<App />);

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

@@ -6,6 +6,7 @@ import {
   dispatchCoreContextOnBackgroundEndpoint,
   dispatchJSContextOnMainThreadEndpoint,
   LynxCrossThreadContext,
+  reloadEndpoint,
   type BackMainThreadContextConfig,
   type NativeApp,
 } from '@lynx-js/web-constants';
@@ -57,5 +58,8 @@ export function createBackgroundLynx(
         },
       ) => void,
     ) => nativeApp.queryComponent(source, callback),
+    reload: () => {
+      uiThreadRpc.invoke(reloadEndpoint, []);
+    },
   };
 }