refactor(web): remove web-elements/lazy and loadNewTag

.changeset/clean-papers-go.md

@@ -0,0 +1,5 @@
+---
+"@lynx-js/web-explorer": patch
+---
+
+chore: update dependencies

.changeset/dull-falcons-smile.md

@@ -0,0 +1,23 @@
+---
+"@lynx-js/web-mainthread-apis": minor
+"@lynx-js/web-worker-runtime": minor
+"@lynx-js/web-constants": minor
+"@lynx-js/web-elements": minor
+"@lynx-js/web-core": minor
+---
+
+refactor: remove web-elements/lazy and loadNewTag
+
+- remove @lynx-js/web-elements/lazy
+- remove loadElement
+- remove loadNewTag callback
+
+**This is a breaking change**
+
+Now we removed the default lazy loading preinstalled in web-core
+
+Please add the following statement in your web project
+
+```
+import "@lynx-js/web-elements/all";
+```

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

@@ -107,11 +107,6 @@ export const BackgroundThreadStartEndpoint = createRpcEndpoint<[
   },
 ], void>('start', false, true);
 
-export const loadNewTagEndpoint = createRpcEndpoint<
-  [tag: string],
-  void
->('loadNewTag', false, true);
-
 /**
  * threadLabel, Error message, info
  */

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

@@ -14,16 +14,10 @@ import {
   type NativeModulesCall,
   type UpdateDataType,
 } from '@lynx-js/web-constants';
-import { loadElement } from '@lynx-js/web-elements/lazy';
 
 /**
  * Based on our experiences, these elements are almost used in all lynx cards.
  */
-loadElement('lynx-wrapper');
-loadElement('x-view');
-loadElement('x-text');
-loadElement('x-image');
-loadElement('scroll-view');
 
 /**
  * @param {string} url [required] The url of the entry of your Lynx card
@@ -359,7 +353,6 @@ export class LynxView extends HTMLElement {
             overrideLynxTagToHTMLTagMap: this.#overrideLynxTagToHTMLTagMap,
             nativeModulesUrl: this.#nativeModulesUrl,
             callbacks: {
-              loadNewTag: loadElement,
               nativeModulesCall: (
                 ...args: [name: string, data: any, moduleName: string]
               ) => {

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

@@ -42,7 +42,6 @@ export function registerFlushElementTreeHandler(
     backgroundRpc: Rpc;
     rootDom: HTMLElement;
     entryId: string;
-    currentLoadingTags: Promise<void>[];
   },
   onCommit: (info: {
     pipelineId: string | undefined;
@@ -61,7 +60,6 @@ export function registerFlushElementTreeHandler(
     backgroundRpc,
     rootDom,
     entryId,
-    currentLoadingTags,
   } = options;
   const uniqueIdToElement: WeakRef<
     HTMLElement & RuntimePropertyOnElement
@@ -146,37 +144,35 @@ export function registerFlushElementTreeHandler(
       const pipelineId = pipelineOptions?.pipelineID;
       const timingFlags: string[] = [];
       markTimingInternal('dispatch_start', pipelineId);
-      Promise.all(currentLoadingTags).then(() => {
-        markTimingInternal('layout_start', pipelineId);
-        markTimingInternal('ui_operation_flush_start', pipelineId);
-        const page = decodeElementOperation(operations, {
-          timingFlags,
-          uniqueIdToElement,
-          uniqueIdToCssInJsRule,
-          createElementImpl,
-          createStyleRuleImpl,
-          eventHandler: {
-            mtsHandler,
-            btsHandler,
-          },
-        });
-        markTimingInternal('ui_operation_flush_end', pipelineId);
-        const isFP = !!page;
-        if (isFP) {
-          // on FP
-          const styleElement = document.createElement('style');
-          styleElement.innerHTML = cardCss!;
-          rootDom.append(styleElement);
-          rootDom.append(page);
-          applyPageAttributes(page, pageConfig, entryId);
-        }
-        markTimingInternal('layout_end', pipelineId);
-        markTimingInternal('dispatch_end', pipelineId);
-        onCommit({
-          pipelineId,
-          timingFlags,
-          isFP,
-        });
+      markTimingInternal('layout_start', pipelineId);
+      markTimingInternal('ui_operation_flush_start', pipelineId);
+      const page = decodeElementOperation(operations, {
+        timingFlags,
+        uniqueIdToElement,
+        uniqueIdToCssInJsRule,
+        createElementImpl,
+        createStyleRuleImpl,
+        eventHandler: {
+          mtsHandler,
+          btsHandler,
+        },
+      });
+      markTimingInternal('ui_operation_flush_end', pipelineId);
+      const isFP = !!page;
+      if (isFP) {
+        // on FP
+        const styleElement = document.createElement('style');
+        styleElement.innerHTML = cardCss!;
+        rootDom.append(styleElement);
+        rootDom.append(page);
+        applyPageAttributes(page, pageConfig, entryId);
+      }
+      markTimingInternal('layout_end', pipelineId);
+      markTimingInternal('dispatch_end', pipelineId);
+      onCommit({
+        pipelineId,
+        timingFlags,
+        isFP,
       });
     },
   );

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

@@ -3,7 +3,6 @@
 // LICENSE file in the root directory of this source tree.
 
 import type { LynxView } from '../apis/createLynxView.js';
-import { registerLoadNewTagHandler } from './crossThreadHandlers/registerLoadNewTagHandler.js';
 import { createExposureService } from './crossThreadHandlers/createExposureService.js';
 import { registerInvokeUIMethodHandler } from './crossThreadHandlers/registerInvokeUIMethodHandler.js';
 import { registerNativePropsHandler } from './crossThreadHandlers/registerSetNativePropsHandler.js';
@@ -17,7 +16,6 @@ import { registerTriggerComponentEventHandler } from './crossThreadHandlers/regi
 import { registerSelectComponentHandler } from './crossThreadHandlers/registerSelectComponentHandler.js';
 import {
   flushElementTreeEndpoint,
-  loadNewTagEndpoint,
   mainThreadChunkReadyEndpoint,
   mainThreadStartEndpoint,
   sendGlobalEventEndpoint,
@@ -33,7 +31,6 @@ export function startUIThread(
   configs: Omit<MainThreadStartConfigs, 'template'>,
   rootDom: HTMLElement,
   callbacks: {
-    loadNewTag?: (tag: string) => void;
     nativeModulesCall: NativeModulesCall;
     onError?: () => void;
   },
@@ -42,7 +39,6 @@ export function startUIThread(
 ): LynxView {
   const createLynxStartTiming = performance.now() + performance.timeOrigin;
   const { entryId } = configs;
-  const currentLoadingTags: Promise<void>[] = [];
   const {
     mainThreadRpc,
     backgroundRpc,
@@ -66,21 +62,6 @@ export function startUIThread(
       nativeModulesUrl,
     });
   });
-  registerLoadNewTagHandler(
-    mainThreadRpc,
-    loadNewTagEndpoint,
-    (tag) => {
-      if (callbacks.loadNewTag) {
-        callbacks.loadNewTag(tag);
-      } else {
-        if (!customElements.get(tag) && tag.includes('-')) {
-          throw new Error(`[lynx-web] cannot find custom element ${tag}`);
-        }
-      }
-    },
-    overrideTagMap,
-    currentLoadingTags,
-  );
   registerReportErrorHandler(
     mainThreadRpc,
     callbacks.onError,
@@ -98,7 +79,6 @@ export function startUIThread(
           backgroundRpc,
           rootDom,
           entryId,
-          currentLoadingTags,
         },
         (info) => {
           const { pipelineId, timingFlags, isFP } = info;

packages/web-platform/web-elements/package.json

@@ -22,10 +22,6 @@
       "types": "./dist/all.d.ts",
       "default": "./dist/all.js"
     },
-    "./lazy": {
-      "types": "./dist/lazy.d.ts",
-      "default": "./dist/lazy.js"
-    },
     "./LynxWrapper": {
       "types": "./dist/LynxWrapper/index.d.ts",
       "default": "./dist/LynxWrapper/index.js"

packages/web-platform/web-explorer/index.html

@@ -76,7 +76,7 @@
     </div>
     <lynx-view
       id="lynx-view"
-      style="flex: 0 1 100vh"
+      style="flex: 0 1 100vh; height:100vh;"
     ></lynx-view>
     <video
       id="qr-scanner"

packages/web-platform/web-explorer/index.ts

@@ -2,6 +2,7 @@ import '@lynx-js/web-core';
 import type { LynxView } from '@lynx-js/web-core';
 import '@lynx-js/web-core/index.css';
 import '@lynx-js/web-elements/index.css';
+import '@lynx-js/web-elements/all';
 
 import QrScanner from 'qr-scanner';
 

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

@@ -30,7 +30,6 @@ import {
 
 export interface MainThreadRuntimeCallbacks {
   mainChunkReady: () => void;
-  onNewTag: (tag: string) => void;
   flushElementTree: (
     operations: ElementOperation[],
     options: FlushElementTreeOptions,
@@ -79,7 +78,6 @@ export class MainThreadRuntime {
       initializeElementCreatingFunction({
         operationsRef: this.operationsRef,
         pageConfig: config.pageConfig,
-        onNewTag: config.callbacks.onNewTag,
         styleInfo: cssInJs,
       }),
     );