@lynx-js/template-webpack-plugin-canary 0.7.0-canary-20250523-790e6b63 → 0.7.0

package/CHANGELOG.md

@@ -1,6 +1,6 @@
 # @lynx-js/template-webpack-plugin
 
-## 0.7.0-canary-20250523151504-790e6b63a4c4d7aa447cee266b0f8f5353cfc0d9
+## 0.7.0
 
 ### Minor Changes
 
@@ -17,7 +17,7 @@
   example:
 
   ```js
-  import { defineConfig } from "@lynx-js/rspeedy";
+  import { defineConfig } from '@lynx-js/rspeedy';
 
   export default defineConfig({
     output: {
@@ -33,6 +33,10 @@
   multi-thread: startMainWorker -> prepareMainThreadAPIs -> startMainThread -> createMainThreadContext(new MainThreadRuntime)
   all-on-ui: prepareMainThreadAPIs -> startMainThread -> createMainThreadContext(new MainThreadRuntime)
 
+- Add `WebEncodePlugin`. ([#904](https://github.com/lynx-family/lynx-stack/pull/904))
+
+  This is previously known as `WebWebpackPlugin` from `@lynx-js/web-webpack-plugin`.
+
 - Fix a bug that the `lepus` arg of `beforeEmit` hook does not contains the `root` main chunk of the main thread. ([#898](https://github.com/lynx-family/lynx-stack/pull/898))
 
 ## 0.6.11
@@ -108,7 +112,7 @@
 - Add `defaultOverflowVisible` option to `LynxTemplatePlugin`. ([#78](https://github.com/lynx-family/lynx-stack/pull/78))
 
   ```js
-  import { LynxTemplatePlugin } from "@lynx-js/template-webpack-plugin";
+  import { LynxTemplatePlugin } from '@lynx-js/template-webpack-plugin';
 
   new LynxTemplatePlugin({
     defaultOverflowVisible: false,
@@ -127,10 +131,10 @@
 - 1abf8f0: Add `entryNames` parameter to `beforeEncode` hook.
 
   ```js
-  import { LynxTemplatePlugin } from "@lynx-js/template-webpack-plugin";
+  import { LynxTemplatePlugin } from '@lynx-js/template-webpack-plugin';
 
   const hooks = LynxTemplatePlugin.getLynxTemplatePluginHooks(compilation);
-  hooks.beforeEncode.tap("MyPlugin", ({ entryNames }) => {
+  hooks.beforeEncode.tap('MyPlugin', ({ entryNames }) => {
     console.log(entryNames);
   });
   ```

package/lib/WebEncodePlugin.d.ts

@@ -0,0 +1,13 @@
+import type { Compilation, Compiler } from 'webpack';
+export declare class WebEncodePlugin {
+    static name: string;
+    static BEFORE_ENCODE_HOOK_STAGE: number;
+    static ENCODE_HOOK_STAGE: number;
+    apply(compiler: Compiler): void;
+    /**
+     * The deleteDebuggingAssets delete all the assets that are inlined into the template.
+     */
+    deleteDebuggingAssets(compilation: Compilation, assets: ({
+        name: string;
+    } | undefined)[]): void;
+}

package/lib/WebEncodePlugin.js

@@ -0,0 +1,96 @@
+// Copyright 2024 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 { LynxTemplatePlugin, isDebug, isRsdoctor, } from './LynxTemplatePlugin.js';
+import { genStyleInfo } from './web/genStyleInfo.js';
+export class WebEncodePlugin {
+    static name = 'WebEncodePlugin';
+    static BEFORE_ENCODE_HOOK_STAGE = 100;
+    static ENCODE_HOOK_STAGE = 100;
+    apply(compiler) {
+        const isDev = process.env['NODE_ENV'] === 'development'
+            || compiler.options.mode === 'development';
+        compiler.hooks.thisCompilation.tap(WebEncodePlugin.name, (compilation) => {
+            const hooks = LynxTemplatePlugin.getLynxTemplatePluginHooks(compilation);
+            const inlinedAssets = new Set();
+            const { Compilation } = compiler.webpack;
+            compilation.hooks.processAssets.tap({
+                name: WebEncodePlugin.name,
+                // `PROCESS_ASSETS_STAGE_REPORT` is the last stage of the `processAssets` hook.
+                // We need to run our asset deletion after this stage to ensure all assets have been processed.
+                // E.g.: upload source-map to sentry.
+                stage: Compilation.PROCESS_ASSETS_STAGE_REPORT + 1,
+            }, () => {
+                inlinedAssets.forEach((name) => {
+                    compilation.deleteAsset(name);
+                });
+                inlinedAssets.clear();
+            });
+            hooks.beforeEncode.tap({
+                name: WebEncodePlugin.name,
+                stage: WebEncodePlugin.BEFORE_ENCODE_HOOK_STAGE,
+            }, (encodeOptions) => {
+                const { encodeData } = encodeOptions;
+                const { cssMap } = encodeData.css;
+                const styleInfo = genStyleInfo(cssMap);
+                const [name, content] = last(Object.entries(encodeData.manifest));
+                if (!isDebug() && !isDev && !isRsdoctor()) {
+                    [
+                        { name },
+                        encodeData.lepusCode.root,
+                        ...encodeData.lepusCode.chunks,
+                        ...encodeData.css.chunks,
+                    ]
+                        .filter(asset => asset !== undefined)
+                        .forEach(asset => inlinedAssets.add(asset.name));
+                }
+                Object.assign(encodeData, {
+                    styleInfo,
+                    manifest: {
+                        // `app-service.js` is the entry point of a template.
+                        '/app-service.js': content,
+                    },
+                    customSections: encodeData.customSections,
+                    cardType: encodeData.sourceContent.dsl.substring(0, 5),
+                    pageConfig: encodeData.compilerOptions,
+                });
+                return encodeOptions;
+            });
+            hooks.encode.tap({
+                name: WebEncodePlugin.name,
+                stage: WebEncodePlugin.ENCODE_HOOK_STAGE,
+            }, ({ encodeOptions }) => {
+                return {
+                    buffer: Buffer.from(JSON.stringify({
+                        styleInfo: encodeOptions['styleInfo'],
+                        manifest: encodeOptions.manifest,
+                        cardType: encodeOptions['cardType'],
+                        pageConfig: encodeOptions.compilerOptions,
+                        lepusCode: {
+                            // flatten the lepusCode to a single object
+                            ...encodeOptions.lepusCode.lepusChunk,
+                            root: encodeOptions.lepusCode.root,
+                        },
+                        customSections: encodeOptions.customSections,
+                    })),
+                    debugInfo: '',
+                };
+            });
+        });
+    }
+    /**
+     * The deleteDebuggingAssets delete all the assets that are inlined into the template.
+     */
+    deleteDebuggingAssets(compilation, assets) {
+        assets
+            .filter(asset => asset !== undefined)
+            .forEach(asset => deleteAsset(asset));
+        function deleteAsset({ name }) {
+            return compilation.deleteAsset(name);
+        }
+    }
+}
+function last(array) {
+    return array[array.length - 1];
+}
+//# sourceMappingURL=WebEncodePlugin.js.map

package/lib/index.d.ts

@@ -7,5 +7,6 @@ export { LynxTemplatePlugin } from './LynxTemplatePlugin.js';
 export type { LynxTemplatePluginOptions, TemplateHooks, } from './LynxTemplatePlugin.js';
 export { LynxEncodePlugin } from './LynxEncodePlugin.js';
 export type { LynxEncodePluginOptions, EncodeCSSOptions, } from './LynxEncodePlugin.js';
+export { WebEncodePlugin } from './WebEncodePlugin.js';
 export * as CSSPlugins from './css/plugins/index.js';
 export * as CSS from './css/index.js';

package/lib/index.js

@@ -8,6 +8,7 @@
  */
 export { LynxTemplatePlugin } from './LynxTemplatePlugin.js';
 export { LynxEncodePlugin } from './LynxEncodePlugin.js';
+export { WebEncodePlugin } from './WebEncodePlugin.js';
 export * as CSSPlugins from './css/plugins/index.js';
 export * as CSS from './css/index.js';
 //# sourceMappingURL=index.js.map

package/lib/web/StyleInfo.d.ts

@@ -0,0 +1,10 @@
+export interface CSSRule {
+    sel: string[][][];
+    decl: [string, string][];
+}
+export interface OneInfo {
+    content: string[];
+    rules: CSSRule[];
+    imports?: string[];
+}
+export type StyleInfo = Record<string, OneInfo>;

package/lib/web/StyleInfo.js

@@ -0,0 +1,5 @@
+// Copyright 2024 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.
+export {};
+//# sourceMappingURL=StyleInfo.js.map

package/lib/web/genStyleInfo.d.ts

@@ -0,0 +1,3 @@
+import type { StyleInfo } from './StyleInfo.js';
+import * as CSS from '../css/index.js';
+export declare function genStyleInfo(cssMap: Record<string, CSS.LynxStyleNode[]>): StyleInfo;

package/lib/web/genStyleInfo.js

@@ -0,0 +1,97 @@
+// Copyright 2024 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 * as CSS from '../css/index.js';
+export function genStyleInfo(cssMap) {
+    return Object.fromEntries(Object.entries(cssMap).map(([cssId, nodes]) => {
+        /**
+         * note that "0" implies it's a common style
+         */
+        const contentsAtom = [];
+        const imports = [];
+        const rules = [];
+        for (const node of nodes) {
+            if (node.type === 'FontFaceRule') {
+                contentsAtom.push([
+                    '@font-face {',
+                    node.style.map((declaration) => `${declaration.name}:${declaration.value}`).join(';'),
+                    '}',
+                ].join(''));
+            }
+            else if (node.type === 'ImportRule') {
+                imports.push(node.href);
+            }
+            else if (node.type === 'KeyframesRule') {
+                contentsAtom.push([
+                    `@keyframes ${node.name.value} {`,
+                    node.styles.map((keyframesStyle) => `${keyframesStyle.keyText.value} {${keyframesStyle.style.map((declaration) => `${declaration.name}:${declaration.value};`).join('')}}`).join(' '),
+                    '}',
+                ].join(''));
+            }
+            else if (node.type === 'StyleRule') {
+                const ast = CSS.csstree.parse(`${node.selectorText.value}{ --mocked-declaration:1;}`);
+                const selectors = ast.children.first
+                    .prelude.children
+                    .toArray();
+                const groupedSelectors = [];
+                for (const selectorList of selectors) {
+                    let plainSelectors = [];
+                    let pseudoClassSelectors = [];
+                    let pseudoElementSelectors = [];
+                    const currentSplittedSelectorInfo = [];
+                    for (const selector of selectorList.children.toArray()) {
+                        if (selector.type === 'PseudoClassSelector'
+                            && selector.name === 'root') {
+                            /**
+                             * [aa]:root {
+                             * }
+                             * ===>
+                             * [aa][lynx-tag="page"] {
+                             * }
+                             */
+                            plainSelectors.push('[lynx-tag="page"]');
+                        }
+                        else if (selector.type === 'PseudoClassSelector') {
+                            pseudoClassSelectors.push(CSS.csstree.generate(selector));
+                        }
+                        else if (selector.type === 'PseudoElementSelector') {
+                            pseudoElementSelectors.push(CSS.csstree.generate(selector));
+                        }
+                        else if (selector.type === 'TypeSelector') {
+                            plainSelectors.push(`[lynx-tag="${selector.name}"]`);
+                        }
+                        else if (selector.type === 'Combinator') {
+                            currentSplittedSelectorInfo.push(plainSelectors, pseudoClassSelectors, pseudoElementSelectors, [CSS.csstree.generate(selector)]);
+                            plainSelectors = [];
+                            pseudoClassSelectors = [];
+                            pseudoElementSelectors = [];
+                        }
+                        else {
+                            plainSelectors.push(CSS.csstree.generate(selector));
+                        }
+                    }
+                    currentSplittedSelectorInfo.push(plainSelectors, pseudoClassSelectors, pseudoElementSelectors, []);
+                    groupedSelectors.push(currentSplittedSelectorInfo);
+                }
+                const decl = node.style.map((declaration) => [
+                    declaration.name,
+                    declaration.value.replaceAll(/\{\{--([^}]+)\}\}/g, 'var(--$1)'),
+                ]);
+                decl.push(...(Object.entries(node.variables)));
+                rules.push({
+                    sel: groupedSelectors,
+                    decl,
+                });
+            }
+        }
+        const info = {
+            content: [contentsAtom.join('\n')],
+            rules,
+        };
+        if (imports.length > 0) {
+            info.imports = imports;
+        }
+        return [cssId, info];
+    }));
+}
+//# sourceMappingURL=genStyleInfo.js.map

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lynx-js/template-webpack-plugin-canary",
-  "version": "0.7.0-canary-20250523-790e6b63",
+  "version": "0.7.0",
   "description": "Simplifies creation of Lynx template files to serve your webpack bundles",
   "keywords": [
     "webpack",