@lynx-js/web-core-server 0.13.2 → 0.13.3

package/CHANGELOG.md

@@ -1,5 +1,26 @@
 # @lynx-js/web-core-server
 
+## 0.13.3
+
+### Patch Changes
+
+- refactor: code clean ([#897](https://github.com/lynx-family/lynx-stack/pull/897))
+
+  rename many internal apis to make logic be clear:
+
+  multi-thread: startMainWorker -> prepareMainThreadAPIs -> startMainThread -> createMainThreadContext(new MainThreadRuntime)
+  all-on-ui: prepareMainThreadAPIs -> startMainThread -> createMainThreadContext(new MainThreadRuntime)
+
+- feat: support to dump ssrEncode string ([#876](https://github.com/lynx-family/lynx-stack/pull/876))
+
+- perf: improve dom operation performance ([#881](https://github.com/lynx-family/lynx-stack/pull/881))
+
+  - code clean for offscreen-document, cut down inheritance levels
+  - add `appendChild` method for OffscreenElement, improve performance for append one node
+  - bypass some JS getter for dumping SSR string
+
+- feat: dump dehydrate string with shadow root template ([#838](https://github.com/lynx-family/lynx-stack/pull/838))
+
 ## 0.13.2
 
 ### Patch Changes

package/dist/createLynxView.d.ts

@@ -1,6 +1,11 @@
-import { type MainThreadStartConfigs } from '@lynx-js/web-constants';
-interface LynxViewConfig extends Pick<MainThreadStartConfigs, 'browserConfig' | 'tagMap' | 'initData' | 'globalProps' | 'template'> {
+import { type StartMainThreadContextConfig } from '@lynx-js/web-constants';
+interface LynxViewConfig extends Pick<StartMainThreadContextConfig, 'browserConfig' | 'tagMap' | 'initData' | 'globalProps' | 'template'> {
     templateName?: string;
+    hydrateUrl: string;
+    injectStyles: string;
+    overrideElemenTemplates?: Record<string, ((attributes: Record<string, string>) => string) | string>;
+    autoSize?: boolean;
+    lynxViewStyle?: string;
 }
 export declare function createLynxView(config: LynxViewConfig): Promise<{
     renderToString: () => Promise<string>;

package/dist/createLynxView.js

@@ -1,33 +1,78 @@
-import { flushElementTreeEndpoint, mainThreadStartEndpoint, } from '@lynx-js/web-constants';
+import { inShadowRootStyles, } from '@lynx-js/web-constants';
 import { Rpc } from '@lynx-js/web-worker-rpc';
-import { startMainThread } from '@lynx-js/web-worker-runtime';
+import { prepareMainThreadAPIs } from '@lynx-js/web-mainthread-apis';
 import { loadTemplate } from './utils/loadTemplate.js';
+import { dumpHTMLString, OffscreenDocument, } from '@lynx-js/offscreen-document/webworker';
+import { templateScrollView, templateXAudioTT, templateXImage, templateFilterImage, templateXInput, templateXList, templateXOverlayNg, templateXRefreshView, templateXSwiper, templateXText, templateInlineImage, templateXTextarea, templateXViewpageNg, } from '@lynx-js/web-elements-template';
+const builtinElementTemplates = {
+    'scroll-view': templateScrollView,
+    'x-audio-tt': templateXAudioTT,
+    'x-image': templateXImage,
+    'filter-image': templateFilterImage,
+    'x-input': templateXInput,
+    'x-list': templateXList,
+    'x-overlay-ng': templateXOverlayNg,
+    'x-refresh-view': templateXRefreshView,
+    'x-swiper': templateXSwiper,
+    'x-text': templateXText,
+    'inline-image': templateInlineImage,
+    'x-textarea': templateXTextarea,
+    'x-viewpage-ng': templateXViewpageNg,
+};
+const builtinTagTransformMap = {
+    'page': 'div',
+    'view': 'x-view',
+    'text': 'x-text',
+    'image': 'x-image',
+    'list': 'x-list',
+    'svg': 'x-svg',
+};
 export async function createLynxView(config) {
-    const { template: rawTemplate, browserConfig, tagMap, initData, globalProps, } = config;
-    const mainToUIChannel = new MessageChannel();
-    const mainWithBackgroundChannel = new MessageChannel();
-    const mainToUIMessagePort = mainToUIChannel.port2;
-    const uiToMainRpc = new Rpc(mainToUIChannel.port1, 'main-to-ui');
-    const { docu: offscreenDocument } = startMainThread(mainToUIMessagePort, mainWithBackgroundChannel.port2);
+    const { template: rawTemplate, browserConfig, tagMap, initData, globalProps, overrideElemenTemplates = {}, hydrateUrl, autoSize, injectStyles, lynxViewStyle, } = config;
+    const template = await loadTemplate(rawTemplate, config.templateName);
     const { promise: firstPaintReadyPromise, resolve: firstPaintReady } = Promise
         .withResolvers();
-    const template = await loadTemplate(rawTemplate, config.templateName);
-    const mainThreadStart = uiToMainRpc.createCall(mainThreadStartEndpoint);
-    mainThreadStart({
+    const mainWithBackgroundChannel = new MessageChannel();
+    const backgroundThreadRpc = new Rpc(mainWithBackgroundChannel.port1, 'background-thread');
+    const offscreenDocument = new OffscreenDocument({
+        onCommit: () => {
+        },
+    });
+    const { startMainThread } = prepareMainThreadAPIs(backgroundThreadRpc, offscreenDocument, offscreenDocument.createElement.bind(offscreenDocument), () => {
+        firstPaintReady();
+    }, () => {
+        // mark timing
+    }, () => {
+        // report error
+    });
+    const runtime = await startMainThread({
         template,
         initData,
         globalProps,
         browserConfig,
         nativeModulesMap: {}, // the bts won't start
         napiModulesMap: {}, // the bts won't start
-        tagMap,
-    });
-    uiToMainRpc.registerHandler(flushElementTreeEndpoint, () => {
-        firstPaintReady();
+        tagMap: {
+            ...builtinTagTransformMap,
+            ...tagMap,
+        },
     });
+    const elementTemplates = {
+        ...builtinElementTemplates,
+        ...overrideElemenTemplates,
+    };
     async function renderToString() {
         await firstPaintReadyPromise;
-        return offscreenDocument.innerHTML;
+        const innerShadowRootHTML = dumpHTMLString(offscreenDocument, elementTemplates);
+        const ssrEncodeData = runtime?.ssrEncode?.();
+        const encodeDataEncoded = ssrEncodeData ? encodeURI(ssrEncodeData) : ''; // to avoid XSS
+        return `
+    <lynx-view url="${hydrateUrl}" ssr ${autoSize ? 'height="auto" width="auto"' : ''} ${lynxViewStyle ? `style="${lynxViewStyle}"` : ''} ${encodeDataEncoded ? `ssr-encode-data="${encodeDataEncoded}"` : ''}>
+      <template shadowrootmode="open">
+        <style>${injectStyles}\n${inShadowRootStyles.join('\n')}</style>
+        ${innerShadowRootHTML}
+      </template>
+    </lynx-view>`;
     }
     return {
         renderToString,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lynx-js/web-core-server",
-  "version": "0.13.2",
+  "version": "0.13.3",
   "private": false,
   "description": "",
   "keywords": [],
@@ -22,8 +22,10 @@
     "README.md"
   ],
   "devDependencies": {
-    "@lynx-js/web-constants": "0.13.2",
-    "@lynx-js/web-worker-rpc": "0.13.2",
-    "@lynx-js/web-worker-runtime": "0.13.2"
+    "@lynx-js/offscreen-document": "0.0.4",
+    "@lynx-js/web-constants": "0.13.3",
+    "@lynx-js/web-elements-template": "0.7.3",
+    "@lynx-js/web-mainthread-apis": "0.13.3",
+    "@lynx-js/web-worker-rpc": "0.13.3"
   }
 }