feat(cli): add experimental patch-compat-table command

Author: Lukas742

docs/ReadMeCompat.mdx

@@ -8,4 +8,7 @@ import ReadMe from '../packages/compat/README.md?raw';
 
 <Markdown>{ReadMe.split('## Documentation')[0].trim()}</Markdown>
 
+<br />
+<br />
+
 <Footer />

packages/cli/README.md

@@ -16,6 +16,7 @@ You can find an interactive documentation in our [Storybook](https://sap.github.
 
 - [Wrapper generation](https://sap.github.io/ui5-webcomponents-react/v2/?path=/docs/knowledge-base-bring-your-own-web-components--docs)
 - [Code-mod](https://sap.github.io/ui5-webcomponents-react/v2/?path=/docs/migration-guide--docs#codemod)
+- [Patch compatibility table](https://sap.github.io/ui5-webcomponents-react/v2/?path=/docs/legacy-components-docs--docs#experimental-patch-script)
 
 ## Contribute
 

packages/cli/package.json

@@ -29,9 +29,12 @@
     "access": "public"
   },
   "files": [
-    "dist"
+    "dist",
+    "patches"
   ],
   "dependencies": {
-    "dedent": "1.6.0"
+    "dedent": "1.6.0",
+    "execa": "^9.5.3",
+    "patch-package": "^8.0.0"
   }
 }

packages/cli/patches/@ui5+webcomponents-compat+2.10.0.patch

@@ -0,0 +1,39 @@
+diff --git a/node_modules/@ui5/webcomponents-react-compat/dist/components/Table/index.js b/node_modules/@ui5/webcomponents-react-compat/dist/components/Table/index.js
+index 250a159..3e6d6c2 100644
+--- a/node_modules/@ui5/webcomponents-react-compat/dist/components/Table/index.js
++++ b/node_modules/@ui5/webcomponents-react-compat/dist/components/Table/index.js
+@@ -56,7 +56,7 @@ import { withWebComponent } from '@ui5/webcomponents-react-base/dist/wrapper/wit
+  *
+  * __Note__: This is a UI5 Web Component! [Repository](https://github.com/SAP/ui5-webcomponents) | [Documentation](https://sap.github.io/ui5-webcomponents/)
+  */
+-const Table = withWebComponent('ui5-table', [
++const Table = withWebComponent('ui5-table-v1', [
+     'accessibleName',
+     'accessibleNameRef',
+     'busyDelay',
+diff --git a/node_modules/@ui5/webcomponents-react-compat/dist/components/TableCell/index.js b/node_modules/@ui5/webcomponents-react-compat/dist/components/TableCell/index.js
+index 2e5338f..cce3387 100644
+--- a/node_modules/@ui5/webcomponents-react-compat/dist/components/TableCell/index.js
++++ b/node_modules/@ui5/webcomponents-react-compat/dist/components/TableCell/index.js
+@@ -6,6 +6,6 @@ import { withWebComponent } from '@ui5/webcomponents-react-base/dist/wrapper/wit
+  *
+  * __Note__: This is a UI5 Web Component! [Repository](https://github.com/SAP/ui5-webcomponents) | [Documentation](https://sap.github.io/ui5-webcomponents/)
+  */
+-const TableCell = withWebComponent('ui5-table-cell', [], [], [], []);
++const TableCell = withWebComponent('ui5-table-cell-v1', [], [], [], []);
+ TableCell.displayName = 'TableCell';
+ export { TableCell };
+diff --git a/node_modules/@ui5/webcomponents-react-compat/dist/components/TableRow/index.js b/node_modules/@ui5/webcomponents-react-compat/dist/components/TableRow/index.js
+index 6d568f3..e5ace7d 100644
+--- a/node_modules/@ui5/webcomponents-react-compat/dist/components/TableRow/index.js
++++ b/node_modules/@ui5/webcomponents-react-compat/dist/components/TableRow/index.js
+@@ -6,6 +6,7 @@ import { withWebComponent } from '@ui5/webcomponents-react-base/dist/wrapper/wit
+  *
+  * __Note__: This is a UI5 Web Component! [Repository](https://github.com/SAP/ui5-webcomponents) | [Documentation](https://sap.github.io/ui5-webcomponents/)
+  */
+-const TableRow = withWebComponent('ui5-table-row', ['type'], ['navigated', 'selected'], [], []);
++const TableRow = withWebComponent('ui5-table-row-v1', ['type'], ['navigated', 'selected'], [], []);
+ TableRow.displayName = 'TableRow';
+ export { TableRow };
++console.log("hello")
+\ No newline at end of file

packages/cli/patches/@ui5+webcomponents-react-compat+2.10.0.patch

@@ -1,7 +1,10 @@
 #!/usr/bin/env node
 import { resolve } from 'node:path';
+import { fileURLToPath } from 'node:url';
 import { parseArgs } from 'node:util';
+import path from 'path';
 import * as process from 'process';
+import { $ } from 'execa';
 
 const { positionals } = parseArgs({ allowPositionals: true, strict: false });
 
@@ -120,6 +123,20 @@ switch (command) {
     await codemod.default(values.transform!, values.src!, values.typescript);
     break;
   }
+
+  case 'patch-compat-table': {
+    const patchesPath = path.relative(process.cwd(), fileURLToPath(new URL('../../patches', import.meta.url)));
+
+    try {
+      await $`patch-package --patch-dir ${patchesPath}`;
+      console.log('Patches applied successfully!');
+    } catch (error) {
+      console.error('Failed to apply patches:', error);
+      process.exit(1);
+    }
+
+    break;
+  }
   default:
     console.warn('Unknown command', command);
     process.exit(1);

packages/cli/src/bin/index.ts

@@ -8,5 +8,5 @@
     "types": ["node"],
     "skipLibCheck": true
   },
-  "include": ["src", "**/*.json"]
+  "include": ["src", "**/*.json", "patches"]
 }

packages/cli/tsconfig.json

@@ -14,15 +14,23 @@ Components in this package will not receive any new features. Only critical bugs
 npm install @ui5/webcomponents-react-compat
 ```
 
-## Importing Components
-
-As the v1 `ui5-table` (`Table`) component is part of this package and some custom element names are equal to the new v2 `ui5-table`, importing components from the root (`import { Table } from "@ui5/webcomponents-react-compat"`) is discouraged.
-The primary reason is that tree-shaking capabilities are limited in the default configurations of most bundlers in dev mode. As a result, custom elements for the v1 table will still be defined, even if only the `Toolbar` is imported. This can cause unexpected behavior if the v2 table is also used in the same app.
-
 > ⚠️ **Warning:** It is not supported using the v1 `Table` and the v2 `Table` in the same application!
 
 > ⚠️ **Warning:** Please only import components from this package via the file path!
 
+## Compatibility
+
+The legacy v1 (compat) `Table` and the modern v2 `Table` component and some subcomponents both register the same custom element names for `ui5-table`, `ui5-table-row` and `ui5-table-cell`, which will lead to conflicts when they coexist in the same application.
+
+### Recommendation
+
+We strongly recommend migrating fully to the v2 `Table`, especially if the `FilterBar` or `VariantManagement` component is used!
+
+### Importing Components
+
+Importing components from the root (`import { Toolbar } from "@ui5/webcomponents-react-compat"`) is discouraged.
+The primary reason is that tree-shaking capabilities are limited in the default configurations of most bundlers in dev mode. As a result, custom elements for the v1 table will still be defined, even if only the `Toolbar` is imported. This can cause unexpected behavior if the v2 table is also used in the same app.
+
 E.g.:
 
 - `import { Table } from '@ui5/webcomponents-react-compat/dist/components/Table/index.js';`
@@ -36,6 +44,60 @@ Following are the imports of duplicate custom element names:
 - `TableCell` (`ui5-table-cell`): `import "@ui5/webcomponents-compat/dist/TableCell.js";`
 - `TableRow` (`ui5-table-row`): `import "@ui5/webcomponents-compat/dist/TableRow.js";`
 
+### Experimental Patch Script
+
+The `patch-compat-table` script (included in the `@ui5/webcomponents-react-cli` package) is developed to address specific compatibility issues that arise when using the legacy v1 Table component in conjunction with the `FilterBar` or `VariantManagement` components. These components internally rely on the v2 `Table`, and therefore conflicts will occur when using the v1 `Table`.
+The script will change the custom element name by adding a `-v1` suffix (via `patch-package`) to all duplicate v1 table components.
+
+> ⚠️ **Experimental**: This script is in experimental state and not subject to semantic versioning.
+
+> ⚠️ **Temporary Solution:** This script is intended as a temporary workaround. It is strongly recommended to plan for a migration to the v2 Table component to ensure long-term compatibility and support.
+
+<details style="cursor:auto;">
+
+<summary><h4 style="display: inline; margin: 0; font-size:18px; cursor:pointer;">Using the script</h4></summary>
+
+<br />
+
+**What it does**
+
+<p>The script patches the `@ui5/webcomponents-compat` and `@ui5/webcomponents-react-compat` table component and subcomponents components and subcomponents to render with a different custom element name (tag name) compared to the v2 implementation.
+This is done internally using [patch-package](https://github.com/ds300/patch-package) to adjust the implementation in the **node_modules**.</p>
+
+**How to use**
+
+<p>**Install** the `@ui5/webcomponents-react-cli` and `@ui5/webcomponents-compat` packages:</p>
+
+```
+// install `@ui5/webcomponents-compat` explicitly
+npm i @ui5/webcomponents-react-cli @ui5/webcomponents-compat
+```
+
+<p>**Run** the script:</p>
+
+```
+// ui5-wcr is an executable added by the `@ui5/webcomponents-react-cli` package
+ui5-wcr patch-compat-table
+```
+
+<p>The `ui5-wcr` executable is provided by the `@ui5/webcomponents-react-cli` package. The `patch-compat-table` command applies the necessary patches.</p>
+
+<p>**Recommendation:**</p>
+
+<p>Add the script as `postinstall` script in the `package.json`, so it runs after every module update.</p>
+
+```
+{
+  "//": "rest of your applications package.json",
+  "scripts": {
+    "//": "your other scripts",
+    "postinstall": "ui5-wcr patch-compat-table"
+  }
+}
+```
+
+</details>
+
 ## Documentation
 
 You can find an interactive documentation in our [Storybook](https://sap.github.io/ui5-webcomponents-react/) (Legacy Components).