#<lynx-view> Web

<lynx-view> is a container component that loads and displays Lynx templates. It can be used in web applications to render Lynx templates.

After completing the above integration, you can achieve more flexible interaction control through the APIs provided by Lynx for Web. Here is a detailed description of the core APIs:

#lynx-view

#Attributes

#Properties

#nativeModulesMap

Custom NativeModule where key is the module name and value is the module implementation (an ESM URL):

type NativeModulesMap = Record<string, string>;

Example:

const nativeModulesMap = {
  CustomModule: URL.createObjectURL(
    new Blob(
      [
        `export default function(NativeModules, NativeModulesCall) {
    return {
      async getColor(data, callback) {
        const color = await NativeModulesCall('getColor', data);
        callback(color);
      },
    }
  };`,
      ],
      { type: 'text/javascript' },
    ),
  ),
};
lynxView.nativeModulesMap = nativeModulesMap;

#onNativeModulesCall

Entry point for handling NativeModules (JSB, etc.) related calls:

(name: string, data: any, moduleName: string) => Promise<any> | any;

Example:

// Handle NativeModule.bridge.call('request')
lynxView.onNativeModulesCall = (name, data, moduleName) => {
  if (moduleName === 'bridge') {
    if (name === 'request') {
      // ...

      // return data will be automatically processed as callback data
      return {};
    }
  }
};

#browserConfig

Set browserConfig allowing the systemInfo payload to be dynamically configured at the instance level.

lynxView.browserConfig = {
  pixelRatio: 2,
  pixelWidth: 375,
  pixelHeight: 812,
};

#Events

#error

Error message notification:

type LynxError = CustomEvent<{
  error: Error;
  sourceMap: {
    offset: {
      // Line offset
      line: number;
      // Column offset
      col: number;
    };
  };
  release: string;
  fileName: 'lepus.js' | 'app-service.js';
}>;

lynxView.addEventListener('error', (err: LynxError) => {
  // ...
});

#Methods

#updateData

See details

export type Cloneable<T = string | number | null | boolean | undefined> =
  | T
  | Record<string, T>
  | T[];

updateData(
  data: Cloneable,
  updateDataType: UpdateDataType,
  callback?: () => void,
): void

#updateGlobalProps

See details

updateGlobalProps(data: Cloneable): void;

#sendGlobalEvent

See details

sendGlobalEvent(eventName: string, params: Cloneable[]): void;

#Width and Height

We will force all lynx-view elements to apply CSS Containment.

That is, by default, you need to set a width and height for lynx-view. The width and height can be allocated by flex-grow or specified as a percentage, but cannot be "stretched". Setting width and height is a strongly recommended practice and also a best practice for performance.

In some cases where you really need the width or height to be determined by the content of lynx-view, you can set height="auto" or width="auto" to enable the automatic width/height listener. In this case, the internal layout of lynx-view remains independent of the external layout flow.

#FAQ

#Runtime error: Uncaught SecurityError: Failed to construct 'Worker': Script at 'xxx' cannot be accessed from origin 'xxx'.

This is because Worker loading remote scripts needs to comply with the Same-Origin Policy, and the JS resources of the project are generally deployed on CDN, causing cross-origin issues.

This can be solved by introducing remote-web-worker:

// The import position must be before @lynx-js/web-core
import 'remote-web-worker';

import '@lynx-js/web-core/client';
document.body.innerHTML = `
<lynx-view
    style="height:100vh; width:100vw;"
    url="http://localhost:3000/main/index.main.bundle"
>
</lynx-view>`;

#Performance Optimization

We provide an RSBuild plugin for performance optimization. You can introduce this plugin in your web project.

#Compatibility

#Migrating from older versions

If you are upgrading to @lynx-js/web-core@0.20.0, notice that there are significant breaking changes due to an architectural upgrade.

#Changes to initialization

You no longer need to import CSS manually, nor do you need @lynx-js/web-elements. The initialization is simplified:

// Before:
import '@lynx-js/web-core/index.css';
import '@lynx-js/web-elements/index.css';
import '@lynx-js/web-core';
import '@lynx-js/web-elements/all';

// After:
import '@lynx-js/web-core/client';

#Changes to API

The following <lynx-view> properties are removed and no longer supported:

• thread-strategy
• customTemplateLoader
• overrideLynxTagToHTMLTagMap
• inject-head-links