@lynx-js/react-webpack-plugin 0.6.6

package/CHANGELOG.md

@@ -0,0 +1,134 @@
+# @lynx-js/react-webpack-plugin
+
+## 0.6.6
+
+### Patch Changes
+
+- 1abf8f0: Be compat with `@lynx-js/react` v0.105.0
+- 1abf8f0: Improve compilation performance by avoid using `compilation.updateAsset`.
+
+## 0.6.5
+
+### Patch Changes
+
+- 94419fb: Support `@lynx-js/react` v0.104.0
+- 1bf9271: fix(react): default `compat` in transform to `false`
+
+## 0.6.4
+
+### Patch Changes
+
+- 0d3b44c: Support `@lynx-js/template-webpack-plugin` v0.6.0.
+- 74e0ea3: Supports new `__MAIN_THREAD__` and `__BACKGROUND__` macro as an alternative to `__LEPUS__` and `__JS__`.
+
+## 0.6.3
+
+### Patch Changes
+
+- 65ecd41: Fix `module` is not defined when using lazy bundle.
+
+## 0.6.2
+
+### Patch Changes
+
+- 3bf5830: Add `lynxProcessEvalResult`.
+- Updated dependencies [3bf5830]
+  - @lynx-js/webpack-runtime-globals@0.0.4
+
+## 0.6.1
+
+### Patch Changes
+
+- e8039f2: Add `defineDCE` in plugin options. Often used to define custom macros.
+
+  ```js
+  import { pluginReactLynx } from '@lynx-js/react-rsbuild-plugin';
+  import { defineConfig } from '@lynx-js/rspeedy';
+
+  export default defineConfig({
+    plugins: [
+      pluginReactLynx({
+        defineDCE: {
+          __SOME_FALSE_DEFINE__: 'false',
+        },
+      }),
+    ],
+  });
+  ```
+
+  Different from `define` provided by bundlers like webpack, `defineDCE` works at transform time and a extra DCE (Dead Code Elimination) pass will be performed.
+
+  For example, `import` initialized by dead code will be removed:
+
+  ```js
+  import { foo } from 'bar';
+
+  if (__SOME_FALSE_DEFINE__) {
+    foo();
+    console.log('dead code');
+  } else {
+    console.log('reachable code');
+  }
+  ```
+
+  will be transformed to:
+
+  ```js
+  console.log('reachable code');
+  ```
+
+## 0.6.0
+
+### Minor Changes
+
+- a30c83d: Add `compat.removeComponentAttrRegex`.
+
+  ```js
+  import { pluginReactLynx } from '@lynx-js/react-rsbuild-plugin';
+  import { defineConfig } from '@lynx-js/rspeedy';
+
+  export default defineConfig({
+    plugins: [
+      pluginReactLynx({
+        compat: {
+          removeComponentAttrRegex: 'YOUR REGEX',
+        },
+      }),
+    ],
+  });
+  ```
+
+  NOTE: This feature is deprecated and will be removed in the future. Use codemod instead.
+
+- 5f8d492: **BREAKING CHANGE**: Require `@lynx-js/react` v0.103.0.
+- 5f8d492: Deprecate `compat.simplifyCtorLikeReactLynx2`
+
+## 0.5.2
+
+### Patch Changes
+
+- e3be842: Support `@lynx-js/react` v0.102.0
+- 21dba89: Add `options.shake` to allow custom package names to be shaken.
+
+## 0.5.1
+
+### Patch Changes
+
+- 6730c58: Support `@lynx-js/react` v0.101.0
+- 63f40cc: Inject `globDynamicComponentEntry` for all main thread script.
+
+  |             |     Before      |     After      |
+  | :---------: | :-------------: | :------------: |
+  | Main Bundle |   Not defined   | Defined(local) |
+  | Lazy Bundle | Defined(params) | Defined(local) |
+
+## 0.5.0
+
+### Minor Changes
+
+- 587a782: **BRAKING CHANGE**: Require `@lynx-js/react` v0.100.0
+
+### Patch Changes
+
+- 1938bb1: Add `transformPath` to loader option
+- 1938bb1: Make peerDependencies of `@lynx-js/react` optional.

package/LICENSE

@@ -0,0 +1,202 @@
+
+                                 Apache License
+                           Version 2.0, January 2004
+                        http://www.apache.org/licenses/
+
+   TERMS AND CONDITIONS FOR USE, REPRODUCTION, AND DISTRIBUTION
+
+   1. Definitions.
+
+      "License" shall mean the terms and conditions for use, reproduction,
+      and distribution as defined by Sections 1 through 9 of this document.
+
+      "Licensor" shall mean the copyright owner or entity authorized by
+      the copyright owner that is granting the License.
+
+      "Legal Entity" shall mean the union of the acting entity and all
+      other entities that control, are controlled by, or are under common
+      control with that entity. For the purposes of this definition,
+      "control" means (i) the power, direct or indirect, to cause the
+      direction or management of such entity, whether by contract or
+      otherwise, or (ii) ownership of fifty percent (50%) or more of the
+      outstanding shares, or (iii) beneficial ownership of such entity.
+
+      "You" (or "Your") shall mean an individual or Legal Entity
+      exercising permissions granted by this License.
+
+      "Source" form shall mean the preferred form for making modifications,
+      including but not limited to software source code, documentation
+      source, and configuration files.
+
+      "Object" form shall mean any form resulting from mechanical
+      transformation or translation of a Source form, including but
+      not limited to compiled object code, generated documentation,
+      and conversions to other media types.
+
+      "Work" shall mean the work of authorship, whether in Source or
+      Object form, made available under the License, as indicated by a
+      copyright notice that is included in or attached to the work
+      (an example is provided in the Appendix below).
+
+      "Derivative Works" shall mean any work, whether in Source or Object
+      form, that is based on (or derived from) the Work and for which the
+      editorial revisions, annotations, elaborations, or other modifications
+      represent, as a whole, an original work of authorship. For the purposes
+      of this License, Derivative Works shall not include works that remain
+      separable from, or merely link (or bind by name) to the interfaces of,
+      the Work and Derivative Works thereof.
+
+      "Contribution" shall mean any work of authorship, including
+      the original version of the Work and any modifications or additions
+      to that Work or Derivative Works thereof, that is intentionally
+      submitted to Licensor for inclusion in the Work by the copyright owner
+      or by an individual or Legal Entity authorized to submit on behalf of
+      the copyright owner. For the purposes of this definition, "submitted"
+      means any form of electronic, verbal, or written communication sent
+      to the Licensor or its representatives, including but not limited to
+      communication on electronic mailing lists, source code control systems,
+      and issue tracking systems that are managed by, or on behalf of, the
+      Licensor for the purpose of discussing and improving the Work, but
+      excluding communication that is conspicuously marked or otherwise
+      designated in writing by the copyright owner as "Not a Contribution."
+
+      "Contributor" shall mean Licensor and any individual or Legal Entity
+      on behalf of whom a Contribution has been received by Licensor and
+      subsequently incorporated within the Work.
+
+   2. Grant of Copyright License. Subject to the terms and conditions of
+      this License, each Contributor hereby grants to You a perpetual,
+      worldwide, non-exclusive, no-charge, royalty-free, irrevocable
+      copyright license to reproduce, prepare Derivative Works of,
+      publicly display, publicly perform, sublicense, and distribute the
+      Work and such Derivative Works in Source or Object form.
+
+   3. Grant of Patent License. Subject to the terms and conditions of
+      this License, each Contributor hereby grants to You a perpetual,
+      worldwide, non-exclusive, no-charge, royalty-free, irrevocable
+      (except as stated in this section) patent license to make, have made,
+      use, offer to sell, sell, import, and otherwise transfer the Work,
+      where such license applies only to those patent claims licensable
+      by such Contributor that are necessarily infringed by their
+      Contribution(s) alone or by combination of their Contribution(s)
+      with the Work to which such Contribution(s) was submitted. If You
+      institute patent litigation against any entity (including a
+      cross-claim or counterclaim in a lawsuit) alleging that the Work
+      or a Contribution incorporated within the Work constitutes direct
+      or contributory patent infringement, then any patent licenses
+      granted to You under this License for that Work shall terminate
+      as of the date such litigation is filed.
+
+   4. Redistribution. You may reproduce and distribute copies of the
+      Work or Derivative Works thereof in any medium, with or without
+      modifications, and in Source or Object form, provided that You
+      meet the following conditions:
+
+      (a) You must give any other recipients of the Work or
+          Derivative Works a copy of this License; and
+
+      (b) You must cause any modified files to carry prominent notices
+          stating that You changed the files; and
+
+      (c) You must retain, in the Source form of any Derivative Works
+          that You distribute, all copyright, patent, trademark, and
+          attribution notices from the Source form of the Work,
+          excluding those notices that do not pertain to any part of
+          the Derivative Works; and
+
+      (d) If the Work includes a "NOTICE" text file as part of its
+          distribution, then any Derivative Works that You distribute must
+          include a readable copy of the attribution notices contained
+          within such NOTICE file, excluding those notices that do not
+          pertain to any part of the Derivative Works, in at least one
+          of the following places: within a NOTICE text file distributed
+          as part of the Derivative Works; within the Source form or
+          documentation, if provided along with the Derivative Works; or,
+          within a display generated by the Derivative Works, if and
+          wherever such third-party notices normally appear. The contents
+          of the NOTICE file are for informational purposes only and
+          do not modify the License. You may add Your own attribution
+          notices within Derivative Works that You distribute, alongside
+          or as an addendum to the NOTICE text from the Work, provided
+          that such additional attribution notices cannot be construed
+          as modifying the License.
+
+      You may add Your own copyright statement to Your modifications and
+      may provide additional or different license terms and conditions
+      for use, reproduction, or distribution of Your modifications, or
+      for any such Derivative Works as a whole, provided Your use,
+      reproduction, and distribution of the Work otherwise complies with
+      the conditions stated in this License.
+
+   5. Submission of Contributions. Unless You explicitly state otherwise,
+      any Contribution intentionally submitted for inclusion in the Work
+      by You to the Licensor shall be under the terms and conditions of
+      this License, without any additional terms or conditions.
+      Notwithstanding the above, nothing herein shall supersede or modify
+      the terms of any separate license agreement you may have executed
+      with Licensor regarding such Contributions.
+
+   6. Trademarks. This License does not grant permission to use the trade
+      names, trademarks, service marks, or product names of the Licensor,
+      except as required for reasonable and customary use in describing the
+      origin of the Work and reproducing the content of the NOTICE file.
+
+   7. Disclaimer of Warranty. Unless required by applicable law or
+      agreed to in writing, Licensor provides the Work (and each
+      Contributor provides its Contributions) on an "AS IS" BASIS,
+      WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or
+      implied, including, without limitation, any warranties or conditions
+      of TITLE, NON-INFRINGEMENT, MERCHANTABILITY, or FITNESS FOR A
+      PARTICULAR PURPOSE. You are solely responsible for determining the
+      appropriateness of using or redistributing the Work and assume any
+      risks associated with Your exercise of permissions under this License.
+
+   8. Limitation of Liability. In no event and under no legal theory,
+      whether in tort (including negligence), contract, or otherwise,
+      unless required by applicable law (such as deliberate and grossly
+      negligent acts) or agreed to in writing, shall any Contributor be
+      liable to You for damages, including any direct, indirect, special,
+      incidental, or consequential damages of any character arising as a
+      result of this License or out of the use or inability to use the
+      Work (including but not limited to damages for loss of goodwill,
+      work stoppage, computer failure or malfunction, or any and all
+      other commercial damages or losses), even if such Contributor
+      has been advised of the possibility of such damages.
+
+   9. Accepting Warranty or Additional Liability. While redistributing
+      the Work or Derivative Works thereof, You may choose to offer,
+      and charge a fee for, acceptance of support, warranty, indemnity,
+      or other liability obligations and/or rights consistent with this
+      License. However, in accepting such obligations, You may act only
+      on Your own behalf and on Your sole responsibility, not on behalf
+      of any other Contributor, and only if You agree to indemnify,
+      defend, and hold each Contributor harmless for any liability
+      incurred by, or claims asserted against, such Contributor by reason
+      of your accepting any such warranty or additional liability.
+
+   END OF TERMS AND CONDITIONS
+
+   APPENDIX: How to apply the Apache License to your work.
+
+      To apply the Apache License to your work, attach the following
+      boilerplate notice, with the fields enclosed by brackets "[]"
+      replaced with your own identifying information. (Don't include
+      the brackets!)  The text should be enclosed in the appropriate
+      comment syntax for the file format. We also recommend that a
+      file or class name and description of purpose be included on the
+      same "printed page" as the copyright notice for easier
+      identification within third-party archives.
+
+   Copyright [yyyy] [name of copyright owner]
+
+   Licensed under the Apache License, Version 2.0 (the "License");
+   you may not use this file except in compliance with the License.
+   You may obtain a copy of the License at
+
+       http://www.apache.org/licenses/LICENSE-2.0
+
+   Unless required by applicable law or agreed to in writing, software
+   distributed under the License is distributed on an "AS IS" BASIS,
+   WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+   See the License for the specific language governing permissions and
+   limitations under the License.

package/lib/LynxProcessEvalResultRuntimeModule.d.ts

@@ -0,0 +1,4 @@
+import type { RuntimeModule } from '@rspack/core';
+type LynxProcessEvalResultRuntimeModule = new () => RuntimeModule;
+export declare function createLynxProcessEvalResultRuntimeModule(webpack: typeof import('@rspack/core').rspack): LynxProcessEvalResultRuntimeModule;
+export {};

package/lib/LynxProcessEvalResultRuntimeModule.js

@@ -0,0 +1,30 @@
+import { RuntimeGlobals as LynxRuntimeGlobals } from '@lynx-js/webpack-runtime-globals';
+export function createLynxProcessEvalResultRuntimeModule(webpack) {
+    return class LynxProcessEvalResultRuntimeModule extends webpack.RuntimeModule {
+        constructor() {
+            super('Lynx process eval result', webpack.RuntimeModule.STAGE_ATTACH);
+        }
+        generate() {
+            const chunk = this.chunk;
+            const compilation = this.compilation;
+            if (!chunk || !compilation) {
+                return '';
+            }
+            return `
+${LynxRuntimeGlobals.lynxProcessEvalResult} = function (result, schema) {
+  var chunk = result(schema);
+  if (chunk.ids && chunk.modules) {
+    // We only deal with webpack chunk
+    ${webpack.RuntimeGlobals.externalInstallChunk}(chunk);
+    // TODO: sort with preOrderIndex. See: https://github.com/web-infra-dev/rspack/pull/8588
+    for (var moduleId in chunk.modules) {
+      ${webpack.RuntimeGlobals.require}(moduleId);
+    }
+    return chunk;
+  }
+}
+`;
+        }
+    };
+}
+//# sourceMappingURL=LynxProcessEvalResultRuntimeModule.js.map

package/lib/ReactWebpackPlugin.d.ts

@@ -0,0 +1,87 @@
+import type { Compiler } from '@rspack/core';
+import { LAYERS } from './layer.js';
+/**
+ * The options for ReactWebpackPlugin
+ *
+ * @public
+ */
+interface ReactWebpackPluginOptions {
+    /**
+     * {@inheritdoc @lynx-js/react-rsbuild-plugin#PluginReactLynxOptions.compat.disableCreateSelectorQueryIncompatibleWarning}
+     */
+    disableCreateSelectorQueryIncompatibleWarning?: boolean | undefined;
+    /**
+     * {@inheritdoc @lynx-js/react-rsbuild-plugin#PluginReactLynxOptions.firstScreenSyncTiming}
+     */
+    firstScreenSyncTiming?: 'immediately' | 'jsReady';
+    /**
+     * The chunk names to be considered as main thread chunks.
+     */
+    mainThreadChunks?: string[] | undefined;
+}
+/**
+ * ReactWebpackPlugin allows using ReactLynx with webpack
+ *
+ * @example
+ * ```js
+ * // webpack.config.js
+ * import { ReactWebpackPlugin } from '@lynx-js/react-webpack-plugin'
+ * export default {
+ *   plugins: [new ReactWebpackPlugin()],
+ * }
+ * ```
+ *
+ * @public
+ */
+declare class ReactWebpackPlugin {
+    #private;
+    private readonly options?;
+    /**
+     * The loaders for ReactLynx.
+     *
+     * @remarks
+     * Note that this loader will only transform JSX/TSX to valid JavaScript.
+     * For `.tsx` files, the type annotations would not be eliminated.
+     * You should use `babel-loader` or `swc-loader` to load TypeScript files.
+     *
+     * @example
+     * ```js
+     * // webpack.config.js
+     * import { ReactWebpackPlugin, LAYERS } from '@lynx-js/react-webpack-plugin'
+     * export default {
+     *   module: {
+     *     rules: [
+     *       {
+     *         test: /\.tsx?$/,
+     *         layer: LAYERS.MAIN_THREAD,
+     *         use: ['swc-loader', ReactWebpackPlugin.loaders.MAIN_THREAD]
+     *       },
+     *       {
+     *         test: /\.tsx?$/,
+     *         layer: LAYERS.BACKGROUND,
+     *         use: ['swc-loader', ReactWebpackPlugin.loaders.BACKGROUND]
+     *       },
+     *     ],
+     *   },
+     *   plugins: [new ReactWebpackPlugin()],
+     * }
+     * ```
+     *
+     * @public
+     */
+    static loaders: Record<keyof typeof LAYERS, string>;
+    constructor(options?: ReactWebpackPluginOptions | undefined);
+    /**
+     * `defaultOptions` is the default options that the {@link ReactWebpackPlugin} uses.
+     *
+     * @public
+     */
+    static defaultOptions: Readonly<Required<ReactWebpackPluginOptions>>;
+    /**
+     * The entry point of a webpack plugin.
+     * @param compiler - the webpack compiler
+     */
+    apply(compiler: Compiler): void;
+}
+export { ReactWebpackPlugin as ReactWebpackPlugin };
+export type { ReactWebpackPluginOptions };

package/lib/ReactWebpackPlugin.js

@@ -0,0 +1,200 @@
+// 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 fs from 'node:fs';
+import { createRequire } from 'node:module';
+import invariant from 'tiny-invariant';
+import { LynxTemplatePlugin } from '@lynx-js/template-webpack-plugin';
+import { RuntimeGlobals } from '@lynx-js/webpack-runtime-globals';
+import { LAYERS } from './layer.js';
+import { createLynxProcessEvalResultRuntimeModule } from './LynxProcessEvalResultRuntimeModule.js';
+const require = createRequire(import.meta.url);
+/**
+ * ReactWebpackPlugin allows using ReactLynx with webpack
+ *
+ * @example
+ * ```js
+ * // webpack.config.js
+ * import { ReactWebpackPlugin } from '@lynx-js/react-webpack-plugin'
+ * export default {
+ *   plugins: [new ReactWebpackPlugin()],
+ * }
+ * ```
+ *
+ * @public
+ */
+class ReactWebpackPlugin {
+    /**
+     * The loaders for ReactLynx.
+     *
+     * @remarks
+     * Note that this loader will only transform JSX/TSX to valid JavaScript.
+     * For `.tsx` files, the type annotations would not be eliminated.
+     * You should use `babel-loader` or `swc-loader` to load TypeScript files.
+     *
+     * @example
+     * ```js
+     * // webpack.config.js
+     * import { ReactWebpackPlugin, LAYERS } from '@lynx-js/react-webpack-plugin'
+     * export default {
+     *   module: {
+     *     rules: [
+     *       {
+     *         test: /\.tsx?$/,
+     *         layer: LAYERS.MAIN_THREAD,
+     *         use: ['swc-loader', ReactWebpackPlugin.loaders.MAIN_THREAD]
+     *       },
+     *       {
+     *         test: /\.tsx?$/,
+     *         layer: LAYERS.BACKGROUND,
+     *         use: ['swc-loader', ReactWebpackPlugin.loaders.BACKGROUND]
+     *       },
+     *     ],
+     *   },
+     *   plugins: [new ReactWebpackPlugin()],
+     * }
+     * ```
+     *
+     * @public
+     */
+    static { this.loaders = {
+        BACKGROUND: require.resolve('../lib/loaders/background.js'),
+        MAIN_THREAD: require.resolve('../lib/loaders/main-thread.js'),
+    }; }
+    constructor(options) {
+        this.options = options;
+    }
+    /**
+     * `defaultOptions` is the default options that the {@link ReactWebpackPlugin} uses.
+     *
+     * @public
+     */
+    static { this.defaultOptions = Object
+        .freeze({
+        disableCreateSelectorQueryIncompatibleWarning: false,
+        firstScreenSyncTiming: 'immediately',
+        mainThreadChunks: [],
+    }); }
+    /**
+     * The entry point of a webpack plugin.
+     * @param compiler - the webpack compiler
+     */
+    apply(compiler) {
+        const options = Object.assign({}, ReactWebpackPlugin.defaultOptions, this.options);
+        const { BannerPlugin, DefinePlugin, EnvironmentPlugin } = compiler.webpack;
+        new BannerPlugin({
+            // TODO: handle cases that do not have `'use strict'`
+            banner: `'use strict';var globDynamicComponentEntry=globDynamicComponentEntry||'__Card__';`,
+            raw: true,
+            test: options.mainThreadChunks,
+        }).apply(compiler);
+        new EnvironmentPlugin({
+            // Default values of null and undefined behave differently.
+            // Use undefined for variables that must be provided during bundling, or null if they are optional.
+            NODE_ENV: null,
+            DEBUG: null,
+        }).apply(compiler);
+        new DefinePlugin({
+            __DEV__: JSON.stringify(compiler.options.mode === 'development'),
+            // We enable profile by default in development.
+            // It can also be disabled by environment variable `REACT_PROFILE=false`
+            __PROFILE__: JSON.stringify(process.env['REACT_PROFILE'] ?? compiler.options.mode === 'development'),
+            // TODO: config
+            __EXTRACT_STR__: JSON.stringify(false),
+            __FIRST_SCREEN_SYNC_TIMING__: JSON.stringify(options.firstScreenSyncTiming),
+            __DISABLE_CREATE_SELECTOR_QUERY_INCOMPATIBLE_WARNING__: JSON.stringify(options.disableCreateSelectorQueryIncompatibleWarning),
+        }).apply(compiler);
+        compiler.hooks.thisCompilation.tap(this.constructor.name, compilation => {
+            const onceForChunkSet = new WeakSet();
+            compilation.hooks.runtimeRequirementInTree.for(compiler.webpack.RuntimeGlobals.ensureChunkHandlers).tap('ReactWebpackPlugin', (_, runtimeRequirements) => {
+                runtimeRequirements.add(RuntimeGlobals.lynxProcessEvalResult);
+            });
+            compilation.hooks.runtimeRequirementInTree.for(RuntimeGlobals.lynxProcessEvalResult).tap('ReactWebpackPlugin', (chunk) => {
+                if (onceForChunkSet.has(chunk)) {
+                    return;
+                }
+                onceForChunkSet.add(chunk);
+                if (chunk.name?.includes(':background')) {
+                    return;
+                }
+                const LynxProcessEvalResultRuntimeModule = createLynxProcessEvalResultRuntimeModule(compiler.webpack);
+                compilation.addRuntimeModule(chunk, new LynxProcessEvalResultRuntimeModule());
+            });
+            compilation.hooks.processAssets.tap({
+                name: this.constructor.name,
+                stage: compiler.webpack.Compilation.PROCESS_ASSETS_STAGE_ADDITIONAL,
+            }, () => {
+                for (const name of options.mainThreadChunks ?? []) {
+                    this.#updateMainThreadInfo(compilation, name);
+                }
+                compilation.chunkGroups
+                    // Async ChunkGroups
+                    .filter(cg => !cg.isInitial())
+                    // MainThread ChunkGroups
+                    .filter(cg => cg.origins.every(origin => origin.module?.layer === LAYERS.MAIN_THREAD))
+                    .forEach(cg => {
+                    const files = cg.getFiles();
+                    files
+                        .filter(name => name.endsWith('.js'))
+                        .forEach(name => this.#updateMainThreadInfo(compilation, name));
+                });
+            });
+            // TODO: replace LynxTemplatePlugin types with Rspack
+            // @ts-expect-error Rspack x Webpack compilation not match
+            const hooks = LynxTemplatePlugin.getLynxTemplatePluginHooks(compilation);
+            const { RawSource, ConcatSource } = compiler.webpack.sources;
+            hooks.beforeEncode.tap(this.constructor.name, (args) => {
+                const lepusCode = args.encodeData.lepusCode;
+                if (lepusCode.root?.source.source().toString()?.includes('registerWorkletInternal')) {
+                    const path = compiler.options.mode === 'development'
+                        ? '@lynx-js/react/worklet-dev-runtime'
+                        : '@lynx-js/react/worklet-runtime';
+                    const runtimeFile = require.resolve(path);
+                    lepusCode.chunks.push({
+                        name: 'worklet-runtime',
+                        source: new RawSource(fs.readFileSync(runtimeFile, 'utf8')),
+                        info: {
+                            ['lynx:main-thread']: true,
+                        },
+                    });
+                }
+                return args;
+            });
+            // Inject `module.exports` for async main-thread chunks
+            hooks.beforeEncode.tap(this.constructor.name, (args) => {
+                const { encodeData } = args;
+                // A lazy bundle may not have main-thread code
+                if (!encodeData.lepusCode.root) {
+                    return args;
+                }
+                if (encodeData.sourceContent.appType === 'card') {
+                    return args;
+                }
+                // We inject `module.exports` for each async template.
+                compilation.updateAsset(encodeData.lepusCode.root.name, (old) => new ConcatSource(`\
+(function (globDynamicComponentEntry) {
+  const module = { exports: {} }
+  const exports = module.exports
+`, old, `\
+  return module.exports
+})`));
+                return args;
+            });
+            // The react-transform will add `-${LAYER}` to the webpackChunkName.
+            // We replace it with an empty string here to make sure main-thread & background chunk match.
+            hooks.asyncChunkName.tap(this.constructor.name, (chunkName) => chunkName
+                ?.replaceAll(`-${LAYERS.BACKGROUND}`, '')
+                ?.replaceAll(`-${LAYERS.MAIN_THREAD}`, ''));
+        });
+    }
+    #updateMainThreadInfo(compilation, name) {
+        const asset = compilation.getAsset(name);
+        invariant(asset, `Should have main thread asset ${name}`);
+        compilation.updateAsset(asset.name, asset.source, {
+            ...asset.info,
+            'lynx:main-thread': true,
+        });
+    }
+}
+export { ReactWebpackPlugin as ReactWebpackPlugin };
+//# sourceMappingURL=ReactWebpackPlugin.js.map

package/lib/index.d.ts

@@ -0,0 +1,9 @@
+/**
+ * @packageDocumentation
+ *
+ * A webpack plugin to integrate webpack with ReactLynx.
+ */
+export { ReactWebpackPlugin } from './ReactWebpackPlugin.js';
+export type { ReactWebpackPluginOptions } from './ReactWebpackPlugin.js';
+export { LAYERS } from './layer.js';
+export type { ReactLoaderOptions } from './loaders/options.js';

package/lib/index.js

@@ -0,0 +1,11 @@
+// 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.
+/**
+ * @packageDocumentation
+ *
+ * A webpack plugin to integrate webpack with ReactLynx.
+ */
+export { ReactWebpackPlugin } from './ReactWebpackPlugin.js';
+export { LAYERS } from './layer.js';
+//# sourceMappingURL=index.js.map

package/lib/layer.d.ts

@@ -0,0 +1,4 @@
+export declare const LAYERS: {
+    readonly BACKGROUND: "react:background";
+    readonly MAIN_THREAD: "react:main-thread";
+};

package/lib/layer.js

@@ -0,0 +1,8 @@
+// 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 const LAYERS = {
+    BACKGROUND: 'react:background',
+    MAIN_THREAD: 'react:main-thread',
+};
+//# sourceMappingURL=layer.js.map

package/lib/loaders/background.d.ts

@@ -0,0 +1,4 @@
+import type { LoaderContext } from '@rspack/core';
+import type { ReactLoaderOptions } from './options.js';
+declare function backgroundLoader(this: LoaderContext<ReactLoaderOptions>, content: string): void;
+export default backgroundLoader;

package/lib/loaders/background.js

@@ -0,0 +1,72 @@
+// 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 { createRequire } from 'node:module';
+import { getBackgroundTransformOptions } from './options.js';
+function backgroundLoader(content) {
+    const require = createRequire(import.meta.url);
+    const { transformPath = '@lynx-js/react/transform' } = this.getOptions();
+    const { transformReactLynxSync } = require(transformPath);
+    const result = transformReactLynxSync(content, getBackgroundTransformOptions.call(this));
+    if (result.errors.length > 0) {
+        for (const error of result.errors) {
+            if (this.experiments?.emitDiagnostic) {
+                // Rspack with `emitDiagnostic` API
+                try {
+                    this.experiments.emitDiagnostic({
+                        message: error.text,
+                        sourceCode: content,
+                        location: {
+                            line: error.location?.line ?? 1,
+                            column: error.location?.column ?? 0,
+                            length: error.location?.length ?? 0,
+                            text: error.text ?? '',
+                        },
+                        severity: 'error',
+                    });
+                }
+                catch {
+                    // Rspack may throw on invalid line & column when containing UTF-8.
+                    // We catch it up here.
+                    this.emitError(new Error(error.text));
+                }
+            }
+            else {
+                // Webpack or legacy Rspack
+                this.emitError(new Error(error.text));
+            }
+        }
+        this.callback(new Error('react-transform failed'));
+        return;
+    }
+    for (const warning of result.warnings) {
+        if (this.experiments?.emitDiagnostic) {
+            // Rspack with `emitDiagnostic` API
+            try {
+                this.experiments.emitDiagnostic({
+                    message: warning.text,
+                    sourceCode: content,
+                    location: {
+                        line: warning.location?.line ?? 1,
+                        column: warning.location?.column ?? 0,
+                        length: warning.location?.length ?? 0,
+                        text: warning.text ?? '',
+                    },
+                    severity: 'warning',
+                });
+            }
+            catch {
+                // Rspack may throw on invalid line & column when containing UTF-8.
+                // We catch it up here.
+                this.emitWarning(new Error(warning.text));
+            }
+        }
+        else {
+            // Webpack or legacy Rspack
+            this.emitWarning(new Error(warning.text));
+        }
+    }
+    this.callback(null, result.code, result.map);
+}
+export default backgroundLoader;
+//# sourceMappingURL=background.js.map

package/lib/loaders/main-thread.d.ts

@@ -0,0 +1,4 @@
+import type { LoaderContext } from '@rspack/core';
+import type { ReactLoaderOptions } from './options.js';
+declare function mainThreadLoader(this: LoaderContext<ReactLoaderOptions>, content: string): void;
+export default mainThreadLoader;

package/lib/loaders/main-thread.js

@@ -0,0 +1,86 @@
+// 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 { createRequire } from 'node:module';
+import { getMainThreadTransformOptions } from './options.js';
+function mainThreadLoader(content) {
+    const require = createRequire(import.meta.url);
+    const { transformPath = '@lynx-js/react/transform' } = this.getOptions();
+    const { transformReactLynxSync } = require(transformPath);
+    const result = transformReactLynxSync(content, getMainThreadTransformOptions.call(this));
+    if (result.errors.length > 0) {
+        for (const error of result.errors) {
+            if (this.experiments?.emitDiagnostic) {
+                // Rspack with `emitDiagnostic` API
+                try {
+                    this.experiments.emitDiagnostic({
+                        message: error.text,
+                        sourceCode: content,
+                        location: {
+                            line: error.location?.line ?? 1,
+                            column: error.location?.column ?? 0,
+                            length: error.location?.length ?? 0,
+                            text: error.text ?? '',
+                        },
+                        severity: 'error',
+                    });
+                }
+                catch {
+                    // Rspack may throw on invalid line & column when containing UTF-8.
+                    // We catch it up here.
+                    this.emitError(new Error(error.text));
+                }
+            }
+            else {
+                // Webpack or legacy Rspack
+                this.emitError(new Error(error.text));
+            }
+        }
+        this.callback(new Error('react-transform failed'));
+        return;
+    }
+    for (const warning of result.warnings) {
+        if (this.experiments?.emitDiagnostic) {
+            // Rspack with `emitDiagnostic` API
+            try {
+                this.experiments.emitDiagnostic({
+                    message: warning.text,
+                    sourceCode: content,
+                    location: {
+                        line: warning.location?.line ?? 1,
+                        column: warning.location?.column ?? 0,
+                        length: warning.location?.length ?? 0,
+                        text: warning.text ?? '',
+                    },
+                    severity: 'warning',
+                });
+            }
+            catch {
+                // Rspack may throw on invalid line & column when containing UTF-8.
+                // We catch it up here.
+                this.emitWarning(new Error(warning.text));
+            }
+        }
+        else {
+            // Webpack or legacy Rspack
+            this.emitWarning(new Error(warning.text));
+        }
+    }
+    this.callback(null, result.code + (this.hot
+        // TODO: temporary fix LEPUS error `$RefreshReg$ is not defined`
+        // should make react-refresh transform in `react-transform`.
+        ? `\
+  // noop fns to prevent runtime errors during initialization
+  if (typeof globalThis !== "undefined") {
+    globalThis.$RefreshReg$ = function () {};
+    globalThis.$RefreshSig$ = function () {
+      return function(type) {
+        return type;
+      };
+    };
+  }
+`
+        : ''), result.map);
+}
+export default mainThreadLoader;
+//# sourceMappingURL=main-thread.js.map

package/lib/loaders/options.d.ts

@@ -0,0 +1,38 @@
+import type { LoaderContext } from '@rspack/core';
+import type { CompatVisitorConfig, DefineDceVisitorConfig, JsxTransformerConfig, ShakeVisitorConfig, TransformNodiffOptions } from '@lynx-js/react/transform';
+/**
+ * The options of the ReactLynx plugin.
+ * @public
+ */
+export interface ReactLoaderOptions {
+    /**
+     * {@inheritdoc @lynx-js/react-rsbuild-plugin#PluginReactLynxOptions.compat}
+     */
+    compat?: CompatVisitorConfig | undefined;
+    /**
+     * {@inheritdoc @lynx-js/template-webpack-plugin#LynxTemplatePluginOptions.enableRemoveCSSScope}
+     */
+    enableRemoveCSSScope?: boolean | undefined;
+    /**
+     * {@inheritdoc @lynx-js/react-rsbuild-plugin#PluginReactLynxOptions.jsx}
+     */
+    jsx?: JsxTransformerConfig | undefined;
+    /**
+     * Enable the Fast Refresh for ReactLynx.
+     */
+    refresh?: boolean | undefined;
+    /**
+     * How main-thread code will be shaken.
+     */
+    shake?: ShakeVisitorConfig | undefined;
+    /**
+     * Like `define` in various bundlers, but this one happens at transform time, and a DCE pass will be performed.
+     */
+    defineDCE?: DefineDceVisitorConfig | undefined;
+    /**
+     * Generate inline source content in source-map.
+     */
+    inlineSourcesContent?: boolean | undefined;
+}
+export declare function getMainThreadTransformOptions(this: LoaderContext<ReactLoaderOptions>): TransformNodiffOptions;
+export declare function getBackgroundTransformOptions(this: LoaderContext<ReactLoaderOptions>): TransformNodiffOptions;

package/lib/loaders/options.js

@@ -0,0 +1,222 @@
+// 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 path from 'node:path';
+import { LAYERS } from '../layer.js';
+const PLUGIN_NAME = 'react:webpack';
+const JSX_IMPORT_SOURCE = {
+    MAIN_THREAD: '@lynx-js/react/lepus',
+    BACKGROUND: '@lynx-js/react',
+};
+const PUBLIC_RUNTIME_PKG = '@lynx-js/react';
+const RUNTIME_PKG = '@lynx-js/react/internal';
+const OLD_RUNTIME_PKG = '@lynx-js/react-runtime';
+const COMPONENT_PKG = '@lynx-js/react-components';
+function getCommonOptions() {
+    const filename = path.relative(this.rootContext, this.resourcePath);
+    const { compat, enableRemoveCSSScope, inlineSourcesContent, isDynamicComponent, defineDCE = { define: {} }, } = this.getOptions();
+    const syntax = (/\.[mc]?tsx?$/.exec(this.resourcePath))
+        ? 'typescript'
+        : 'ecmascript';
+    // is '.ts' (one of '.js', '.jsx', '.ts', '.tsx')
+    const isTS = /\.[mc]?ts$/.exec(this.resourcePath);
+    const commonOptions = {
+        // We need to set `mode: 'development'` for HMR to work
+        mode: this.hot ? 'development' : 'production',
+        compat: typeof compat === 'object'
+            ? {
+                target: 'MIXED',
+                addComponentElement: compat?.addComponentElement ?? false,
+                additionalComponentAttributes: compat?.additionalComponentAttributes
+                    ?? [],
+                componentsPkg: compat?.componentsPkg ?? [COMPONENT_PKG],
+                disableDeprecatedWarning: compat?.disableDeprecatedWarning ?? false,
+                newRuntimePkg: compat?.newRuntimePkg ?? PUBLIC_RUNTIME_PKG,
+                oldRuntimePkg: compat?.oldRuntimePkg ?? [OLD_RUNTIME_PKG],
+                simplifyCtorLikeReactLynx2: compat?.simplifyCtorLikeReactLynx2 ?? false,
+                // NOTE: never pass '' (empty string) as default value
+                ...(typeof compat?.removeComponentAttrRegex === 'string' && {
+                    removeComponentAttrRegex: compat?.removeComponentAttrRegex,
+                }),
+                darkMode: false,
+            }
+            : false,
+        pluginName: PLUGIN_NAME,
+        // Ensure that swc get a full absolute path so that it will generate
+        // absolute path in the `source` param of `jsxDev(type, props, key, isStatic, source, self)`
+        filename: this.resourcePath,
+        cssScope: {
+            mode: getCSSScopeMode(enableRemoveCSSScope),
+            filename,
+        },
+        // Ensure that Webpack will get a full absolute path in the sourcemap
+        // so that it can properly map the module back to its internal cached
+        // modules.
+        // See: https://github.com/babel/babel-loader/blob/d85f4207947b618e040fb6a70afe9be9e1fd87d7/src/index.js#L135C1-L137C16
+        // See: https://github.com/swc-project/pkgs/blob/d096fdc1ac372ac045894bdda3180ef99bbcbe33/packages/swc-loader/src/index.js#L42
+        sourceFileName: this.resourcePath,
+        sourcemap: this.sourceMap,
+        sourceMapColumns: this.sourceMap && !this.hot,
+        inlineSourcesContent: inlineSourcesContent ?? !this.hot,
+        snapshot: {
+            // TODO: config
+            preserveJsx: false,
+            target: 'MIXED',
+            runtimePkg: RUNTIME_PKG,
+            filename,
+            isDynamicComponent: isDynamicComponent ?? false,
+        },
+        syntaxConfig: JSON.stringify({
+            syntax,
+            decorators: true,
+            // Only '.ts' conflicts with tsx, both '.js' and '.jsx' can be handled by tsx.
+            tsx: !isTS,
+            // `.js` is not conflicts with jsx, always pass true
+            jsx: true,
+        }),
+        // TODO: config
+        worklet: {
+            filename: filename,
+            runtimePkg: RUNTIME_PKG,
+            target: 'MIXED',
+        },
+        directiveDCE: false,
+        defineDCE,
+        refresh: false,
+        isModule: 'unknown',
+    };
+    return commonOptions;
+}
+export function getMainThreadTransformOptions() {
+    const commonOptions = getCommonOptions.call(this);
+    const { shake } = this.getOptions();
+    return {
+        ...commonOptions,
+        compat: typeof commonOptions.compat === 'object'
+            ? {
+                ...commonOptions.compat,
+                target: 'LEPUS',
+            }
+            : false,
+        snapshot: {
+            ...commonOptions.snapshot,
+            jsxImportSource: JSX_IMPORT_SOURCE.MAIN_THREAD,
+            target: 'LEPUS',
+        },
+        dynamicImport: {
+            layer: LAYERS.MAIN_THREAD,
+            runtimePkg: RUNTIME_PKG,
+        },
+        defineDCE: {
+            define: {
+                ...commonOptions.defineDCE?.define,
+                // DO NOT put lynx-speedy's defines here,
+                // we want to handle as few as possible defines here.
+                __LEPUS__: 'true',
+                __MAIN_THREAD__: 'true',
+                __JS__: 'false',
+                __BACKGROUND__: 'false',
+                __REACTLYNX2__: 'false',
+                __REACTLYNX3__: 'true',
+            },
+        },
+        shake: {
+            // if shake is false, we will not shake anything
+            // if shake is true, we will use default config from HERE,
+            // so never pass true to shake to rust
+            pkgName: [
+                'react',
+                PUBLIC_RUNTIME_PKG,
+                `${PUBLIC_RUNTIME_PKG}/legacy-react-runtime`,
+                RUNTIME_PKG,
+                ...typeof commonOptions.compat === 'object'
+                    ? commonOptions.compat.oldRuntimePkg
+                    : [],
+                ...(shake?.pkgName ?? []),
+            ],
+            retainProp: [
+                'constructor',
+                'render',
+                'getDerivedStateFromProps',
+                'state',
+                'defaultDataProcessor',
+                'dataProcessors',
+                'contextType',
+                'defaultProps',
+                ...(shake?.retainProp ?? []),
+            ],
+            removeCallParams: [
+                'useEffect',
+                'useLayoutEffect',
+                '__runInJS',
+                'useLynxGlobalEventListener',
+                ...(shake?.removeCallParams ?? []),
+            ],
+        },
+        worklet: {
+            ...commonOptions.worklet,
+            target: 'LEPUS',
+        },
+        directiveDCE: {
+            target: 'LEPUS',
+        },
+    };
+}
+export function getBackgroundTransformOptions() {
+    const commonOptions = getCommonOptions.call(this);
+    return {
+        ...commonOptions,
+        compat: typeof commonOptions.compat === 'object'
+            ? {
+                ...commonOptions.compat,
+                target: 'JS',
+            }
+            : false,
+        dynamicImport: {
+            layer: LAYERS.BACKGROUND,
+            runtimePkg: RUNTIME_PKG,
+        },
+        snapshot: {
+            ...commonOptions.snapshot,
+            jsxImportSource: JSX_IMPORT_SOURCE.BACKGROUND,
+            target: this.hot
+                // Using `MIX` when HMR is enabled.
+                // This allows serializing the updated runtime code to Lepus using `Function.prototype.toString`.
+                ? 'MIXED'
+                : 'JS',
+        },
+        defineDCE: {
+            define: {
+                ...commonOptions.defineDCE?.define,
+                // DO NOT put lynx-speedy's defines here,
+                // we want to handle as few as possible defines here.
+                __LEPUS__: 'false',
+                __MAIN_THREAD__: 'false',
+                __JS__: 'true',
+                __BACKGROUND__: 'true',
+                __REACTLYNX2__: 'false',
+                __REACTLYNX3__: 'true',
+            },
+        },
+        shake: false,
+        worklet: {
+            ...commonOptions.worklet,
+            target: 'JS',
+        },
+        directiveDCE: {
+            target: 'JS',
+        },
+    };
+}
+function getCSSScopeMode(enableRemoveCSSScope) {
+    if (enableRemoveCSSScope === true) {
+        return 'none';
+    }
+    else if (enableRemoveCSSScope === false) {
+        return 'all';
+    }
+    else {
+        return 'modules';
+    }
+}
+//# sourceMappingURL=options.js.map

package/package.json

@@ -0,0 +1,67 @@
+{
+  "name": "@lynx-js/react-webpack-plugin",
+  "version": "0.6.6",
+  "description": "A webpack plugin for ReactLynx",
+  "keywords": [
+    "webpack",
+    "Lynx",
+    "ReactLynx"
+  ],
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/lynx-wg/lynx-stack.git",
+    "directory": "packages/webpack/react-webpack-plugin"
+  },
+  "license": "Apache-2.0",
+  "author": {
+    "name": "Qingyu Wang",
+    "email": "colinwang.0616@gmail.com"
+  },
+  "type": "module",
+  "exports": {
+    ".": {
+      "types": "./lib/index.d.ts",
+      "default": "./lib/index.js"
+    },
+    "./package.json": "./package.json"
+  },
+  "types": "./lib/index.d.ts",
+  "files": [
+    "lib",
+    "!lib/**/*.js.map",
+    "CHANGELOG.md",
+    "README.md"
+  ],
+  "dependencies": {
+    "tiny-invariant": "^1.3.3",
+    "@lynx-js/webpack-runtime-globals": "0.0.4"
+  },
+  "devDependencies": {
+    "@microsoft/api-extractor": "7.51.0",
+    "@rspack/core": "1.2.6",
+    "css-loader": "^7.1.2",
+    "swc-loader": "^0.2.6",
+    "webpack": "^5.98.0",
+    "@lynx-js/css-extract-webpack-plugin": "0.5.0",
+    "@lynx-js/react": "0.105.0",
+    "@lynx-js/template-webpack-plugin": "0.6.3",
+    "@lynx-js/test-tools": "0.0.0",
+    "@lynx-js/vitest-setup": "0.0.0"
+  },
+  "peerDependencies": {
+    "@lynx-js/react": "^0.103.0 || ^0.104.0 || ^0.105.0",
+    "@lynx-js/template-webpack-plugin": "^0.4.0 || ^0.5.0 || ^0.6.0"
+  },
+  "peerDependenciesMeta": {
+    "@lynx-js/react": {
+      "optional": true
+    }
+  },
+  "engines": {
+    "node": ">=18"
+  },
+  "scripts": {
+    "api-extractor": "api-extractor run --verbose",
+    "test": "pnpm -w run test --project webpack/react"
+  }
+}