@lynx-js/react-webpack-plugin-canary 0.10.1 → 0.10.2-canary-20260729-fa2ef9b6

package/CHANGELOG.md

@@ -1,5 +1,14 @@
 # @lynx-js/react-webpack-plugin
 
+## 0.10.2-canary-20260729060727-fa2ef9b6fa2ff9e881a77ff5d80f300950fbca0d
+
+### Patch Changes
+
+- Add the experimental `experimental_transformBuiltinAttributeNames` option for transforming builtin element attribute names. `false` preserves attribute names. `true` transforms `onClick` to `bindtap`, `onCatchTap` to `catchtap`, other `onXXX` event names to `bindxxx`, and remaining camelCase names to dash-case. An object supports serializable custom rules through `mode`, `preserve`, and `rename`. Currently, only explicit JSX attributes are transformed during compilation; runtime transformation of spread attributes is planned for a future release. ([#3274](https://github.com/lynx-family/lynx-stack/pull/3274))
+
+- Updated dependencies [[`7795a43`](https://github.com/lynx-family/lynx-stack/commit/7795a43797ac9daf59e5f18dc978e1596948f94b)]:
+  - @lynx-js/template-webpack-plugin@0.14.1-canary-20260729060727-fa2ef9b6fa2ff9e881a77ff5d80f300950fbca0d
+
 ## 0.10.1
 
 ### Patch Changes
@@ -25,12 +34,12 @@
 
   ```js
   pluginReactLynx({
-    firstScreenSyncTiming: 'manual',
+    firstScreenSyncTiming: "manual",
   });
   ```
 
   ```js
-  import { markFirstScreenSyncReady } from '@lynx-js/react';
+  import { markFirstScreenSyncReady } from "@lynx-js/react";
 
   markFirstScreenSyncReady();
   ```
@@ -40,8 +49,8 @@
 - Add `compat.legacySlot` to `pluginReactLynx`. When enabled, dynamic children are compiled to the pre-SlotV2 form (JSX `children` + `wrapper` elements + `__DynamicPartChildren`/`__DynamicPartSlot` symbols instead of `$0`/`$1` slot props + `SlotV2`), so the compiled output stays compatible with legacy runtimes without `SlotV2` support (`< 0.120.0`, which shipped the SlotV2 refactor in #1764) — e.g. a standalone lazy bundle consumed by a host App that ships an older runtime. ([#2947](https://github.com/lynx-family/lynx-stack/pull/2947))
 
   ```js
-  import { defineConfig } from '@lynx-js/rspeedy';
-  import { pluginReactLynx } from '@lynx-js/react-rsbuild-plugin';
+  import { defineConfig } from "@lynx-js/rspeedy";
+  import { pluginReactLynx } from "@lynx-js/react-rsbuild-plugin";
 
   export default defineConfig({
     plugins: [
@@ -214,16 +223,16 @@
   type InlineChunkConfig =
     | boolean
     | InlineChunkTest
-    | { enable?: boolean | 'auto'; test: InlineChunkTest };
+    | { enable?: boolean | "auto"; test: InlineChunkTest };
   ```
 
   ```ts
-  import { defineConfig } from '@lynx-js/rspeedy';
+  import { defineConfig } from "@lynx-js/rspeedy";
 
   export default defineConfig({
     output: {
       inlineScripts: ({ name, size }) => {
-        return name.includes('foo') && size < 1000;
+        return name.includes("foo") && size < 1000;
       },
     },
   });
@@ -307,7 +316,7 @@
 - Shake `useImperativeHandle` on the main-thread by default. ([#153](https://github.com/lynx-family/lynx-stack/pull/153))
 
   ```js
-  import { forwardRef, useImperativeHandle } from '@lynx-js/react';
+  import { forwardRef, useImperativeHandle } from "@lynx-js/react";
 
   export default forwardRef(function App(_, ref) {
     useImperativeHandle(ref, () => {
@@ -315,7 +324,7 @@
       return {
         name() {
           // This should be considered as background only
-          console.info('This should not exist in main-thread');
+          console.info("This should not exist in main-thread");
         },
       };
     });
@@ -375,14 +384,14 @@
 - 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';
+  import { pluginReactLynx } from "@lynx-js/react-rsbuild-plugin";
+  import { defineConfig } from "@lynx-js/rspeedy";
 
   export default defineConfig({
     plugins: [
       pluginReactLynx({
         defineDCE: {
-          __SOME_FALSE_DEFINE__: 'false',
+          __SOME_FALSE_DEFINE__: "false",
         },
       }),
     ],
@@ -394,20 +403,20 @@
   For example, `import` initialized by dead code will be removed:
 
   ```js
-  import { foo } from 'bar';
+  import { foo } from "bar";
 
   if (__SOME_FALSE_DEFINE__) {
     foo();
-    console.log('dead code');
+    console.log("dead code");
   } else {
-    console.log('reachable code');
+    console.log("reachable code");
   }
   ```
 
   will be transformed to:
 
   ```js
-  console.log('reachable code');
+  console.log("reachable code");
   ```
 
 ## 0.6.0
@@ -417,14 +426,14 @@
 - a30c83d: Add `compat.removeComponentAttrRegex`.
 
   ```js
-  import { pluginReactLynx } from '@lynx-js/react-rsbuild-plugin';
-  import { defineConfig } from '@lynx-js/rspeedy';
+  import { pluginReactLynx } from "@lynx-js/react-rsbuild-plugin";
+  import { defineConfig } from "@lynx-js/rspeedy";
 
   export default defineConfig({
     plugins: [
       pluginReactLynx({
         compat: {
-          removeComponentAttrRegex: 'YOUR REGEX',
+          removeComponentAttrRegex: "YOUR REGEX",
         },
       }),
     ],

package/lib/loaders/options.d.ts

@@ -1,5 +1,5 @@
 import type { LoaderContext } from '@rspack/core';
-import type { CompatVisitorConfig, DefineDceVisitorConfig, JsxTransformerConfig, ShakeVisitorConfig, TransformNodiffOptions } from '@lynx-js/react/transform';
+import type { CompatVisitorConfig, DefineDceVisitorConfig, JsxTransformerConfig, ShakeVisitorConfig, TransformBuiltinAttributeNamesOptions, TransformNodiffOptions } from '@lynx-js/react/transform';
 export declare const JSX_IMPORT_SOURCE: {
     MAIN_THREAD: string;
     BACKGROUND: string;
@@ -28,6 +28,10 @@ export interface ReactLoaderOptions {
      * {@inheritdoc @lynx-js/react-rsbuild-plugin#PluginReactLynxOptions.enableUiSourceMap}
      */
     enableUiSourceMap?: boolean | undefined;
+    /**
+     * {@inheritdoc @lynx-js/react-rsbuild-plugin#PluginReactLynxOptions.experimental_transformBuiltinAttributeNames}
+     */
+    experimental_transformBuiltinAttributeNames?: boolean | TransformBuiltinAttributeNamesOptions | undefined;
     /**
      * Enable the Fast Refresh for ReactLynx.
      */

package/lib/loaders/options.js

@@ -18,7 +18,7 @@ function normalizeSlashes(file) {
 }
 function getCommonOptions(inputSourceMap) {
     const filename = normalizeSlashes(path.relative(this.rootContext, this.resourcePath));
-    const { compat, enableRemoveCSSScope, enableUiSourceMap, inlineSourcesContent, isDynamicComponent, isExternalBundle, engineVersion, experimental_useElementTemplate, defineDCE = { define: {} }, } = this.getOptions();
+    const { compat, enableRemoveCSSScope, enableUiSourceMap, experimental_transformBuiltinAttributeNames, inlineSourcesContent, isDynamicComponent, isExternalBundle, engineVersion, experimental_useElementTemplate, defineDCE = { define: {} }, } = this.getOptions();
     const useElementTemplate = experimental_useElementTemplate === true;
     const syntax = (/\.[mc]?tsx?$/.exec(this.resourcePath))
         ? 'typescript'
@@ -108,6 +108,9 @@ function getCommonOptions(inputSourceMap) {
         },
         directiveDCE: false,
         defineDCE,
+        ...(experimental_transformBuiltinAttributeNames !== undefined && {
+            experimental_transformBuiltinAttributeNames,
+        }),
         refresh: false,
         isModule: 'unknown',
     };

package/lib/loaders/testing.js

@@ -9,7 +9,7 @@ function normalizeSlashes(file) {
 }
 function testingLoader(content) {
     const require = createRequire(import.meta.url);
-    const { compat = false, defineDCE = { define: {} }, engineVersion = '', experimental_useElementTemplate = false, shake = false, transformPath = '@lynx-js/react/transform', } = this.getOptions();
+    const { compat = false, defineDCE = { define: {} }, engineVersion = '', experimental_transformBuiltinAttributeNames, experimental_useElementTemplate = false, shake = false, transformPath = '@lynx-js/react/transform', } = this.getOptions();
     const { transformReactLynxSync } = require(transformPath);
     const filename = normalizeSlashes(path.relative(this.rootContext, this.resourcePath));
     const normalizedCompat = typeof compat === 'object'
@@ -62,6 +62,9 @@ function testingLoader(content) {
         },
         refresh: false,
         cssScope: false,
+        ...(experimental_transformBuiltinAttributeNames !== undefined && {
+            experimental_transformBuiltinAttributeNames,
+        }),
     });
     if (result.errors.length > 0) {
         for (const error of result.errors) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lynx-js/react-webpack-plugin-canary",
-  "version": "0.10.1",
+  "version": "0.10.2-canary-20260729-fa2ef9b6",
   "description": "A webpack plugin for ReactLynx",
   "keywords": [
     "webpack",
@@ -44,10 +44,10 @@
     "@rstest/core": "0.11.3",
     "css-loader": "^7.1.4",
     "swc-loader": "^0.2.7",
+    "@lynx-js/react": "npm:@lynx-js/react-canary@0.123.2-canary-20260729-fa2ef9b6",
     "@lynx-js/css-extract-webpack-plugin": "npm:@lynx-js/css-extract-webpack-plugin-canary@0.10.0",
-    "@lynx-js/react": "npm:@lynx-js/react-canary@0.123.1",
-    "@lynx-js/template-webpack-plugin": "npm:@lynx-js/template-webpack-plugin-canary@0.14.0",
-    "@lynx-js/test-tools": "0.0.0"
+    "@lynx-js/test-tools": "0.0.0",
+    "@lynx-js/template-webpack-plugin": "npm:@lynx-js/template-webpack-plugin-canary@0.14.1-canary-20260729-fa2ef9b6"
   },
   "peerDependencies": {
     "@lynx-js/template-webpack-plugin": "*"