@lynx-js/web-core 0.7.0

package/dist/uiThread/startUIThread.js

@@ -0,0 +1,78 @@
+// 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 { registerLoadNewTagHandler } from './crossThreadHandlers/registerLoadNewTagHandler.js';
+import { createExposureService } from './crossThreadHandlers/createExposureService.js';
+import { registerInvokeUIMethodHandler } from './crossThreadHandlers/registerInvokeUIMethodHandler.js';
+import { registerNativePropsHandler } from './crossThreadHandlers/registerSetNativePropsHandler.js';
+import { registerNativeModulesCallHandler } from './crossThreadHandlers/registerNativeModulesCallHandler.js';
+import { bootWorkers } from './bootWorkers.js';
+import { registerReportErrorHandler } from './crossThreadHandlers/registerReportErrorHandler.js';
+import { registerFlushElementTreeHandler } from './crossThreadHandlers/registerFlushElementTreeHandler.js';
+import { createDispose } from './crossThreadHandlers/createDispose.js';
+import { bootTimingSystem } from './crossThreadHandlers/bootTimingSystem.js';
+import { registerTriggerComponentEventHandler } from './crossThreadHandlers/registerTriggerComponentEventHandler.js';
+import { registerSelectComponentHandler } from './crossThreadHandlers/registerSelectComponentHandler.js';
+import { flushElementTreeEndpoint, loadNewTagEndpoint, mainThreadChunkReadyEndpoint, mainThreadStartEndpoint, sendGlobalEventEndpoint, uiThreadFpReadyEndpoint, } from '@lynx-js/web-constants';
+import { loadTemplate } from '../utils/loadTemplate.js';
+import { createUpdateData } from './crossThreadHandlers/createUpdateData.js';
+export function startUIThread(templateUrl, configs, rootDom, callbacks, overrideTagMap = {}, nativeModulesUrl) {
+    const createLynxStartTiming = performance.now() + performance.timeOrigin;
+    const { entryId } = configs;
+    const currentLoadingTags = [];
+    const { mainThreadRpc, backgroundRpc, terminateWorkers, } = bootWorkers();
+    const sendGlobalEvent = backgroundRpc.createCall(sendGlobalEventEndpoint);
+    const uiThreadFpReady = backgroundRpc.createCall(uiThreadFpReadyEndpoint);
+    const mainThreadStart = mainThreadRpc.createCall(mainThreadStartEndpoint);
+    const { markTimingInternal, sendTimingResult } = bootTimingSystem(mainThreadRpc, backgroundRpc, rootDom);
+    markTimingInternal('create_lynx_start', undefined, createLynxStartTiming);
+    markTimingInternal('load_template_start');
+    loadTemplate(templateUrl).then((template) => {
+        markTimingInternal('load_template_end');
+        mainThreadStart({
+            ...configs,
+            template,
+            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);
+    mainThreadRpc.registerHandler(mainThreadChunkReadyEndpoint, (mainChunkInfo) => {
+        const { pageConfig } = mainChunkInfo;
+        registerFlushElementTreeHandler(mainThreadRpc, flushElementTreeEndpoint, {
+            pageConfig,
+            overrideTagMap,
+            backgroundRpc,
+            rootDom,
+            entryId,
+            currentLoadingTags,
+        }, (info) => {
+            const { pipelineId, timingFlags, isFP } = info;
+            if (isFP) {
+                registerInvokeUIMethodHandler(backgroundRpc, rootDom);
+                registerNativePropsHandler(backgroundRpc, rootDom);
+                registerTriggerComponentEventHandler(backgroundRpc, rootDom);
+                registerSelectComponentHandler(backgroundRpc, rootDom);
+                createExposureService(backgroundRpc, rootDom);
+                uiThreadFpReady();
+            }
+            sendTimingResult(pipelineId, timingFlags, isFP);
+        }, markTimingInternal);
+    });
+    registerNativeModulesCallHandler(backgroundRpc, callbacks.nativeModulesCall);
+    return {
+        updateData: createUpdateData(mainThreadRpc, backgroundRpc),
+        dispose: createDispose(backgroundRpc, terminateWorkers),
+        sendGlobalEvent,
+    };
+}
+//# sourceMappingURL=startUIThread.js.map

package/dist/utils/browser.d.ts

@@ -0,0 +1,3 @@
+export declare const isChromium: boolean;
+export declare const isWebkit: boolean;
+export declare const supportAtScope = true;

package/dist/utils/browser.js

@@ -0,0 +1,9 @@
+const UA = window.navigator.userAgent;
+export const isChromium = UA.includes('Chrome');
+export const isWebkit = /\b(iPad|iPhone|iPod|OS X)\b/.test(UA)
+    && !/Edge/.test(UA)
+    && /WebKit/.test(UA)
+    // @ts-expect-error
+    && !window.MSStream;
+export const supportAtScope = !!globalThis.CSSScopeRule;
+//# sourceMappingURL=browser.js.map

package/dist/utils/createCrossThreadEvent.d.ts

@@ -0,0 +1,2 @@
+import { type LynxCrossThreadEvent } from '@lynx-js/web-constants';
+export declare function createCrossThreadEvent(domEvent: Event): LynxCrossThreadEvent;

package/dist/utils/createCrossThreadEvent.js

@@ -0,0 +1,43 @@
+// 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 { lynxRuntimeValue, lynxUniqueIdAttribute, W3cEventNameToLynx, } from '@lynx-js/web-constants';
+export function createCrossThreadEvent(domEvent) {
+    const targetElement = domEvent.target;
+    const currentTargetElement = domEvent
+        .currentTarget;
+    const type = domEvent.type;
+    const params = {};
+    if (type.match(/^transition/)) {
+        Object.assign(params, {
+            'animation_type': 'keyframe-animation',
+            'animation_name': domEvent.propertyName,
+            new_animator: true, // we support the new_animator only
+        });
+    }
+    else if (type.match(/animation/)) {
+        Object.assign(params, {
+            'animation_type': 'keyframe-animation',
+            'animation_name': domEvent.animationName,
+            new_animator: true, // we support the new_animator only
+        });
+    }
+    return {
+        type: W3cEventNameToLynx[type] ?? type,
+        timestamp: domEvent.timeStamp,
+        target: {
+            id: targetElement.id,
+            dataset: targetElement[lynxRuntimeValue].dataset,
+            uniqueId: parseFloat(targetElement.getAttribute(lynxUniqueIdAttribute)),
+        },
+        currentTarget: {
+            id: currentTargetElement.id,
+            dataset: currentTargetElement[lynxRuntimeValue]?.dataset ?? {},
+            uniqueId: parseFloat(currentTargetElement.getAttribute(lynxUniqueIdAttribute)),
+        },
+        // @ts-expect-error
+        detail: domEvent.detail ?? {},
+        params,
+    };
+}
+//# sourceMappingURL=createCrossThreadEvent.js.map

package/dist/utils/loadTemplate.d.ts

@@ -0,0 +1,2 @@
+import type { LynxTemplate } from '@lynx-js/web-constants';
+export declare function loadTemplate(url: string): Promise<LynxTemplate>;

package/dist/utils/loadTemplate.js

@@ -0,0 +1,53 @@
+const TemplateCache = {};
+function createJsModuleUrl(content) {
+    return URL.createObjectURL(new Blob([content], { type: 'text/javascript' }));
+}
+function generateJavascriptUrl(obj, injectVars, injectWithBind) {
+    return Object.fromEntries(Object.entries(obj).map(([name, content]) => {
+        return [
+            name,
+            createJsModuleUrl(`globalThis.module.exports = function(lynx_runtime) {
+const module= {exports:{}};let exports = module.exports;
+var {${injectVars.join(',')}} = lynx_runtime; 
+${injectWithBind.map((nm) => `const ${nm} = lynx_runtime.${nm}?.bind(lynx_runtime)`).join(';')}
+var globDynamicComponentEntry = '__Card__';
+var {__globalProps} = lynx;
+${content}
+return module.exports;}`),
+        ];
+    }));
+}
+const mainThreadInjectVars = [
+    'lynx',
+    'globalThis',
+];
+const backgroundInjectVars = [
+    'NativeModules',
+    'globalThis',
+    'lynx',
+    'lynxCoreInject',
+];
+const backgroundInjectWithBind = [
+    'Card',
+    'Component',
+];
+export async function loadTemplate(url) {
+    const cachedTemplate = TemplateCache[url];
+    if (cachedTemplate)
+        return cachedTemplate;
+    const template = (await (await fetch(url, {
+        method: 'GET',
+    })).json());
+    const decodedTemplate = {
+        ...template,
+        lepusCode: generateJavascriptUrl(template.lepusCode, mainThreadInjectVars, []),
+        manifest: generateJavascriptUrl(template.manifest, backgroundInjectVars, backgroundInjectWithBind),
+    };
+    TemplateCache[url] = decodedTemplate;
+    /**
+     * This will cause a memory leak, which is expected.
+     * We cannot ensure that the `URL.createObjectURL` created url will never be used, therefore here we keep it for the entire lifetime of this page.
+     */
+    return decodedTemplate;
+}
+//# sourceMappingURL=loadTemplate.js.map

package/index.css

@@ -0,0 +1,66 @@
+/*
+// 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.
+*/
+[lynx-default-display-linear="false"] * {
+  --lynx-display: flex;
+  --lynx-display-toggle: var(--lynx-display-flex);
+}
+
+lynx-view {
+  contain: strict;
+  display: flex;
+}
+
+lynx-view > #lynx-view-root {
+  display: contents;
+  width: 100%;
+  height: 100%;
+}
+
+lynx-view[height="auto"] {
+  --lynx-view-height: 100%;
+  height: var(--lynx-view-height);
+  block-size: var(--lynx-view-height);
+}
+lynx-view[height="auto"] > #lynx-view-root {
+  height: unset;
+}
+
+lynx-view[width="auto"] {
+  --lynx-view-width: 100%;
+  width: var(--lynx-view-width);
+  inline-size: var(--lynx-view-width);
+}
+lynx-view[width="auto"] > #lynx-view-root {
+  width: unset;
+}
+
+lynx-view[height="auto"], lynx-view[width="auto"] {
+  contain-intrinsic-size: var(--lynx-view-width) var(--lynx-view-height);
+}
+lynx-view[height="auto"] > #lynx-view-root,
+lynx-view[width="auto"] > #lynx-view-root {
+  display: unset;
+  position: fixed;
+  top: 0;
+  left: 0;
+}
+
+@property --lynx-view-width {
+  syntax: "<length> | <percentage>";
+  inherits: false;
+  initial-value: 100%;
+}
+
+@property --lynx-view-height {
+  syntax: "<length> | <percentage>";
+  inherits: false;
+  initial-value: 100%;
+}
+
+lynx-view:not([width="auto"]):not([height="auto"]) [lynx-tag="page"] {
+  height: 100%;
+  width: 100%;
+}

package/package.json

@@ -0,0 +1,34 @@
+{
+  "name": "@lynx-js/web-core",
+  "version": "0.7.0",
+  "private": false,
+  "description": "",
+  "keywords": [],
+  "license": "Apache-2.0",
+  "type": "module",
+  "main": "dist/index.js",
+  "typings": "dist/index.d.ts",
+  "files": [
+    "dist",
+    "!dist/**/*.js.map",
+    "LICENSE.txt",
+    "Notice.txt",
+    "CHANGELOG.md",
+    "README.md",
+    "index.css",
+    "**/*.css"
+  ],
+  "dependencies": {
+    "@lynx-js/web-constants": "0.7.0",
+    "@lynx-js/web-worker-rpc": "0.7.0",
+    "@lynx-js/web-worker-runtime": "0.7.0"
+  },
+  "devDependencies": {
+    "@lynx-js/lynx-core": "0.1.0",
+    "@lynx-js/web-elements": "0.2.4"
+  },
+  "peerDependencies": {
+    "@lynx-js/lynx-core": "0.1.0",
+    "@lynx-js/web-elements": ">=0.1.0"
+  }
+}