@lynx-js/web-core
Version:
This is an internal experimental package, do not use
189 lines (188 loc) • 6.26 kB
TypeScript
import type { Cloneable, I18nResourceTranslationOptions, InitI18nResources, NapiModulesCall, NapiModulesMap, NativeModulesCall, NativeModulesMap } from '../../types/index.js';
export type { NapiModulesCall };
export interface BrowserConfig {
pixelRatio?: number;
pixelWidth?: number;
pixelHeight?: number;
[key: string]: any;
}
/**
* Based on our experiences, these elements are almost used in all lynx cards.
*/
/**
* @property {string} url [required] (attribute: "url") The url of the entry of your Lynx card
* @property {Cloneable} globalProps [optional] (attribute: "global-props") The globalProps value of this Lynx card
* @property {Cloneable} initData [optional] (attribute: "init-data") The initial data of this Lynx card
* @property {NativeModulesMap} nativeModulesMap [optional] use to customize NativeModules. key is module-name, value is esm url.
* @property {NativeModulesCall} onNativeModulesCall [optional] the NativeModules value handler. Arguments will be cached before this property is assigned.
* @property {"auto" | null} height [optional] (attribute: "height") set it to "auto" for height auto-sizing
* @property {"auto" | null} width [optional] (attribute: "width") set it to "auto" for width auto-sizing
* @property {NapiModulesMap} napiModulesMap [optional] the napiModule which is called in lynx-core. key is module-name, value is esm url.
* @property {NapiModulesCall} onNapiModulesCall [optional] the NapiModule value handler.
* @property {string[]} injectStyleRules [optional] the css rules which will be injected into shadowroot. Each items will be inserted by `insertRule` method. @see https://developer.mozilla.org/docs/Web/API/CSSStyleSheet/insertRule
* @property {number} lynxGroupId [optional] (attribute: "lynx-group-id") the background shared context id, which is used to share webworker between different lynx cards
* @property {InitI18nResources} initI18nResources [optional] (attribute: "init-i18n-resources") the complete set of i18nResources that on the container side, which can be obtained synchronously by _I18nResourceTranslation
*
* @event error lynx card fired an error
* @event i18nResourceMissed i18n resource cache miss
*
* @example
* HTML Example
*
* Note that you should declarae the size of lynx-view
*
* ```html
* <lynx-view url="https://path/to/main-thread.js" raw-data="{}" global-props="{}" style="height:300px;width:300px">
* </lynx-view>
* ```
*
* React 19 Example
* ```jsx
* <lynx-view url={myLynxCardUrl} rawData={{}} globalProps={{}} style={{height:'300px', width:'300px'}}>
* </lynx-view>
* ```
*/
export declare class LynxViewElement extends HTMLElement {
#private;
static lynxViewCount: number;
static tag: "lynx-view";
static observedAttributeAsProperties: string[];
/**
* @private
*/
static observedAttributes: string[];
/**
* @public
* @property nativeModulesMap
* @default {}
*/
nativeModulesMap: NativeModulesMap | undefined;
/**
* @param
* @property napiModulesMap
* @default {}
*/
napiModulesMap: NapiModulesMap | undefined;
/**
* @param
* @property
*/
onNapiModulesCall: NapiModulesCall | undefined;
/**
* @public
* @property browserConfig
*/
get browserConfig(): BrowserConfig | undefined;
set browserConfig(val: string | BrowserConfig | undefined);
/**
* @public
* @property transformVW
* Enable evaluating vw subset to the current LynxView container width
*/
get transformVW(): boolean;
set transformVW(val: boolean);
/**
* @public
* @property transformVH
* Enable evaluating vh subset to the current LynxView container height
*/
get transformVH(): boolean;
set transformVH(val: boolean);
/**
* @public
* @property transformREM
* Enable evaluating rem unit to the current CSS var(--rem-unit)
*/
get transformREM(): boolean;
set transformREM(val: boolean);
constructor();
/**
* @public
* @property the url of lynx view output entry file
*/
get url(): string | undefined;
set url(val: string);
/**
* @public
* @property globalProps
* @default {}
*/
get globalProps(): Cloneable;
set globalProps(val: string | Cloneable);
/**
* @public
* @property initData
* @default {}
*/
get initData(): Cloneable;
set initData(val: string | Cloneable);
/**
* @public
* @property initI18nResources
* @default {}
*/
get initI18nResources(): InitI18nResources;
set initI18nResources(val: string | InitI18nResources);
/**
* @public
* @method
* update the `__initData` and trigger essential flow
*/
updateI18nResources(data: InitI18nResources, options: I18nResourceTranslationOptions): void;
/**
* @param
* @property
*/
get onNativeModulesCall(): NativeModulesCall | undefined;
set onNativeModulesCall(handler: NativeModulesCall);
/**
* @param
* @property
*/
get lynxGroupId(): number | undefined;
set lynxGroupId(val: number | undefined);
/**
* @public
* @method
* update the `__initData` and trigger essential flow
*/
updateData(data: Cloneable, processorName?: string, callback?: () => void): void;
/**
* @public
* @method
* update the `__globalProps`
*/
updateGlobalProps(data: Cloneable): void;
/**
* @public
* @method
* send global events, which can be listened to using the GlobalEventEmitter
*/
sendGlobalEvent(eventName: string, params: Cloneable[]): void;
/**
* @public
* @method
* reload the current page
*/
reload(): void;
/**
* @override
* "false" value will be omitted
*
* {@inheritdoc HTMLElement.setAttribute}
*/
setAttribute(qualifiedName: string, value: string): void;
/**
* @private
*/
attributeChangedCallback(name: string, oldValue: string, newValue: string): void;
injectStyleRules?: string[];
/**
* @private
*/
disconnectedCallback(): void;
/**
* @private
*/
connectedCallback(): void;
}