+
+Using the script
+
+
+
+**What it does**
+
+The script patches the @ui5/webcomponents-compat
and @ui5/webcomponents-react-compat
table component and subcomponents to render with a different custom element name (tag name) compared to the v2 implementation.
+This is done internally using patch-package
to adjust the implementation in the node_modules.
+
+⚠️ Note: Since the tag names and the related attribute are changed, any CSS selectors targeting these tags must be updated accordingly!
+
+**How to use**
+
+Install the @ui5/webcomponents-react-cli
and @ui5/webcomponents-compat
packages:
+
+```
+// install `@ui5/webcomponents-compat` explicitly
+npm i @ui5/webcomponents-react-cli @ui5/webcomponents-compat
+```
+
+Run the script:
+
+```
+// ui5-wcr is an executable added by the `@ui5/webcomponents-react-cli` package
+ui5-wcr patch-compat-table
+```
+
+The ui5-wcr
executable is provided by the @ui5/webcomponents-react-cli
package. The patch-compat-table
command applies the necessary patches.
+
+Recommendation:
+
+Add the script as postinstall
script in the package.json
, so it runs after every module update.
+
+```
+{
+ "//": "rest of your applications package.json",
+ "scripts": {
+ "//": "your other scripts",
+ "postinstall": "ui5-wcr patch-compat-table"
+ }
+}
+```
+
+
+
## Documentation
You can find an interactive documentation in our [Storybook](https://sap.github.io/ui5-webcomponents-react/) (Legacy Components).
diff --git a/yarn.lock b/yarn.lock
index 03e1dac5c6f..d29dde8c4a1 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -4555,6 +4555,13 @@ __metadata:
languageName: node
linkType: hard
+"@sec-ant/readable-stream@npm:^0.4.1":
+ version: 0.4.1
+ resolution: "@sec-ant/readable-stream@npm:0.4.1"
+ checksum: 10c0/64e9e9cf161e848067a5bf60cdc04d18495dc28bb63a8d9f8993e4dd99b91ad34e4b563c85de17d91ffb177ec17a0664991d2e115f6543e73236a906068987af
+ languageName: node
+ linkType: hard
+
"@semantic-release/error@npm:^4.0.0":
version: 4.0.0
resolution: "@semantic-release/error@npm:4.0.0"
@@ -4681,6 +4688,13 @@ __metadata:
languageName: node
linkType: hard
+"@sindresorhus/merge-streams@npm:^4.0.0":
+ version: 4.0.0
+ resolution: "@sindresorhus/merge-streams@npm:4.0.0"
+ checksum: 10c0/482ee543629aa1933b332f811a1ae805a213681ecdd98c042b1c1b89387df63e7812248bb4df3910b02b3cc5589d3d73e4393f30e197c9dde18046ccd471fc6b
+ languageName: node
+ linkType: hard
+
"@stackblitz/sdk@npm:^1.11.0":
version: 1.11.0
resolution: "@stackblitz/sdk@npm:1.11.0"
@@ -6464,6 +6478,8 @@ __metadata:
resolution: "@ui5/webcomponents-react-cli@workspace:packages/cli"
dependencies:
dedent: "npm:1.6.0"
+ execa: "npm:^9.5.3"
+ patch-package: "npm:^8.0.0"
bin:
ui5-wcr: ./dist/bin/index.js
languageName: unknown
@@ -8618,7 +8634,7 @@ __metadata:
languageName: node
linkType: hard
-"chalk@npm:4.1.2, chalk@npm:^4.0.0, chalk@npm:^4.0.2, chalk@npm:^4.1.0, chalk@npm:^4.1.1":
+"chalk@npm:4.1.2, chalk@npm:^4.0.0, chalk@npm:^4.0.2, chalk@npm:^4.1.0, chalk@npm:^4.1.1, chalk@npm:^4.1.2":
version: 4.1.2
resolution: "chalk@npm:4.1.2"
dependencies:
@@ -8857,6 +8873,13 @@ __metadata:
languageName: node
linkType: hard
+"ci-info@npm:^3.7.0":
+ version: 3.9.0
+ resolution: "ci-info@npm:3.9.0"
+ checksum: 10c0/6f0109e36e111684291d46123d491bc4e7b7a1934c3a20dea28cba89f1d4a03acd892f5f6a81ed3855c38647e285a150e3c9ba062e38943bef57fee6c1554c3a
+ languageName: node
+ linkType: hard
+
"ci-info@npm:^4.0.0":
version: 4.0.0
resolution: "ci-info@npm:4.0.0"
@@ -12160,6 +12183,26 @@ __metadata:
languageName: node
linkType: hard
+"execa@npm:^9.5.3":
+ version: 9.5.3
+ resolution: "execa@npm:9.5.3"
+ dependencies:
+ "@sindresorhus/merge-streams": "npm:^4.0.0"
+ cross-spawn: "npm:^7.0.3"
+ figures: "npm:^6.1.0"
+ get-stream: "npm:^9.0.0"
+ human-signals: "npm:^8.0.0"
+ is-plain-obj: "npm:^4.1.0"
+ is-stream: "npm:^4.0.1"
+ npm-run-path: "npm:^6.0.0"
+ pretty-ms: "npm:^9.0.0"
+ signal-exit: "npm:^4.1.0"
+ strip-final-newline: "npm:^4.0.0"
+ yoctocolors: "npm:^2.0.0"
+ checksum: 10c0/f39b38b960cfd68a69e73f19f74e6b5a15b43f913130c89e96d4c9377c6baa18243033bc5087003e25e6f67916dc5f37fc7cd3b940dfe699c30be5d17ba5fa1e
+ languageName: node
+ linkType: hard
+
"executable@npm:^4.1.1":
version: 4.1.1
resolution: "executable@npm:4.1.1"
@@ -12413,6 +12456,15 @@ __metadata:
languageName: node
linkType: hard
+"figures@npm:^6.1.0":
+ version: 6.1.0
+ resolution: "figures@npm:6.1.0"
+ dependencies:
+ is-unicode-supported: "npm:^2.0.0"
+ checksum: 10c0/9159df4264d62ef447a3931537de92f5012210cf5135c35c010df50a2169377581378149abfe1eb238bd6acbba1c0d547b1f18e0af6eee49e30363cedaffcfe4
+ languageName: node
+ linkType: hard
+
"file-entry-cache@npm:^6.0.1":
version: 6.0.1
resolution: "file-entry-cache@npm:6.0.1"
@@ -12551,6 +12603,15 @@ __metadata:
languageName: node
linkType: hard
+"find-yarn-workspace-root@npm:^2.0.0":
+ version: 2.0.0
+ resolution: "find-yarn-workspace-root@npm:2.0.0"
+ dependencies:
+ micromatch: "npm:^4.0.2"
+ checksum: 10c0/b0d3843013fbdaf4e57140e0165889d09fa61745c9e85da2af86e54974f4cc9f1967e40f0d8fc36a79d53091f0829c651d06607d552582e53976f3cd8f4e5689
+ languageName: node
+ linkType: hard
+
"flat-cache@npm:^3.0.4":
version: 3.0.4
resolution: "flat-cache@npm:3.0.4"
@@ -12728,7 +12789,7 @@ __metadata:
languageName: node
linkType: hard
-"fs-extra@npm:^9.1.0":
+"fs-extra@npm:^9.0.0, fs-extra@npm:^9.1.0":
version: 9.1.0
resolution: "fs-extra@npm:9.1.0"
dependencies:
@@ -13090,6 +13151,16 @@ __metadata:
languageName: node
linkType: hard
+"get-stream@npm:^9.0.0":
+ version: 9.0.1
+ resolution: "get-stream@npm:9.0.1"
+ dependencies:
+ "@sec-ant/readable-stream": "npm:^0.4.1"
+ is-stream: "npm:^4.0.1"
+ checksum: 10c0/d70e73857f2eea1826ac570c3a912757dcfbe8a718a033fa0c23e12ac8e7d633195b01710e0559af574cbb5af101009b42df7b6f6b29ceec8dbdf7291931b948
+ languageName: node
+ linkType: hard
+
"get-symbol-description@npm:^1.0.0":
version: 1.0.0
resolution: "get-symbol-description@npm:1.0.0"
@@ -14014,6 +14085,13 @@ __metadata:
languageName: node
linkType: hard
+"human-signals@npm:^8.0.0":
+ version: 8.0.1
+ resolution: "human-signals@npm:8.0.1"
+ checksum: 10c0/195ac607108c56253757717242e17cd2e21b29f06c5d2dad362e86c672bf2d096e8a3bbb2601841c376c2301c4ae7cff129e87f740aa4ebff1390c163114c7c4
+ languageName: node
+ linkType: hard
+
"humanize-ms@npm:^1.2.1":
version: 1.2.1
resolution: "humanize-ms@npm:1.2.1"
@@ -14732,7 +14810,7 @@ __metadata:
languageName: node
linkType: hard
-"is-plain-obj@npm:^4.0.0":
+"is-plain-obj@npm:^4.0.0, is-plain-obj@npm:^4.1.0":
version: 4.1.0
resolution: "is-plain-obj@npm:4.1.0"
checksum: 10c0/32130d651d71d9564dc88ba7e6fda0e91a1010a3694648e9f4f47bb6080438140696d3e3e15c741411d712e47ac9edc1a8a9de1fe76f3487b0d90be06ac9975e
@@ -14850,6 +14928,13 @@ __metadata:
languageName: node
linkType: hard
+"is-stream@npm:^4.0.1":
+ version: 4.0.1
+ resolution: "is-stream@npm:4.0.1"
+ checksum: 10c0/2706c7f19b851327ba374687bc4a3940805e14ca496dc672b9629e744d143b1ad9c6f1b162dece81c7bfbc0f83b32b61ccc19ad2e05aad2dd7af347408f60c7f
+ languageName: node
+ linkType: hard
+
"is-string@npm:^1.0.5, is-string@npm:^1.0.7":
version: 1.0.7
resolution: "is-string@npm:1.0.7"
@@ -14961,6 +15046,13 @@ __metadata:
languageName: node
linkType: hard
+"is-unicode-supported@npm:^2.0.0":
+ version: 2.1.0
+ resolution: "is-unicode-supported@npm:2.1.0"
+ checksum: 10c0/a0f53e9a7c1fdbcf2d2ef6e40d4736fdffff1c9f8944c75e15425118ff3610172c87bf7bc6c34d3903b04be59790bb2212ddbe21ee65b5a97030fc50370545a5
+ languageName: node
+ linkType: hard
+
"is-url@npm:^1.2.4":
version: 1.2.4
resolution: "is-url@npm:1.2.4"
@@ -15034,7 +15126,7 @@ __metadata:
languageName: node
linkType: hard
-"is-wsl@npm:^2.2.0":
+"is-wsl@npm:^2.1.1, is-wsl@npm:^2.2.0":
version: 2.2.0
resolution: "is-wsl@npm:2.2.0"
dependencies:
@@ -15513,6 +15605,19 @@ __metadata:
languageName: node
linkType: hard
+"json-stable-stringify@npm:^1.0.2":
+ version: 1.3.0
+ resolution: "json-stable-stringify@npm:1.3.0"
+ dependencies:
+ call-bind: "npm:^1.0.8"
+ call-bound: "npm:^1.0.4"
+ isarray: "npm:^2.0.5"
+ jsonify: "npm:^0.0.1"
+ object-keys: "npm:^1.1.1"
+ checksum: 10c0/8b3ff19e4c23c0ad591a49bc3a015d89a538db787d12fe9c4072e1d64d8cfa481f8c37719c629c3d84e848847617bf49f5fee894cf1d25959ab5b67e1c517f31
+ languageName: node
+ linkType: hard
+
"json-stringify-nice@npm:^1.1.4":
version: 1.1.4
resolution: "json-stringify-nice@npm:1.1.4"
@@ -15567,6 +15672,13 @@ __metadata:
languageName: node
linkType: hard
+"jsonify@npm:^0.0.1":
+ version: 0.0.1
+ resolution: "jsonify@npm:0.0.1"
+ checksum: 10c0/7f5499cdd59a0967ed35bda48b7cec43d850bbc8fb955cdd3a1717bb0efadbe300724d5646de765bb7a99fc1c3ab06eb80d93503c6faaf99b4ff50a3326692f6
+ languageName: node
+ linkType: hard
+
"jsonparse@npm:^1.2.0, jsonparse@npm:^1.3.1":
version: 1.3.1
resolution: "jsonparse@npm:1.3.1"
@@ -15635,6 +15747,15 @@ __metadata:
languageName: node
linkType: hard
+"klaw-sync@npm:^6.0.0":
+ version: 6.0.0
+ resolution: "klaw-sync@npm:6.0.0"
+ dependencies:
+ graceful-fs: "npm:^4.1.11"
+ checksum: 10c0/00d8e4c48d0d699b743b3b028e807295ea0b225caf6179f51029e19783a93ad8bb9bccde617d169659fbe99559d73fb35f796214de031d0023c26b906cecd70a
+ languageName: node
+ linkType: hard
+
"kleur@npm:^3.0.3":
version: 3.0.3
resolution: "kleur@npm:3.0.3"
@@ -17624,7 +17745,7 @@ __metadata:
languageName: node
linkType: hard
-"micromatch@npm:^4.0.4, micromatch@npm:^4.0.8":
+"micromatch@npm:^4.0.2, micromatch@npm:^4.0.4, micromatch@npm:^4.0.8":
version: 4.0.8
resolution: "micromatch@npm:4.0.8"
dependencies:
@@ -18479,6 +18600,16 @@ __metadata:
languageName: node
linkType: hard
+"npm-run-path@npm:^6.0.0":
+ version: 6.0.0
+ resolution: "npm-run-path@npm:6.0.0"
+ dependencies:
+ path-key: "npm:^4.0.0"
+ unicorn-magic: "npm:^0.3.0"
+ checksum: 10c0/b223c8a0dcd608abf95363ea5c3c0ccc3cd877daf0102eaf1b0f2390d6858d8337fbb7c443af2403b067a7d2c116d10691ecd22ab3c5273c44da1ff8d07753bd
+ languageName: node
+ linkType: hard
+
"npmlog@npm:^6.0.0":
version: 6.0.2
resolution: "npmlog@npm:6.0.2"
@@ -18845,6 +18976,16 @@ __metadata:
languageName: node
linkType: hard
+"open@npm:^7.4.2":
+ version: 7.4.2
+ resolution: "open@npm:7.4.2"
+ dependencies:
+ is-docker: "npm:^2.0.0"
+ is-wsl: "npm:^2.1.1"
+ checksum: 10c0/77573a6a68f7364f3a19a4c80492712720746b63680ee304555112605ead196afe91052bd3c3d165efdf4e9d04d255e87de0d0a77acec11ef47fd5261251813f
+ languageName: node
+ linkType: hard
+
"open@npm:^8.0.4":
version: 8.4.2
resolution: "open@npm:8.4.2"
@@ -19281,6 +19422,13 @@ __metadata:
languageName: node
linkType: hard
+"parse-ms@npm:^4.0.0":
+ version: 4.0.0
+ resolution: "parse-ms@npm:4.0.0"
+ checksum: 10c0/a7900f4f1ebac24cbf5e9708c16fb2fd482517fad353aecd7aefb8c2ba2f85ce017913ccb8925d231770404780df46244ea6fec598b3bde6490882358b4d2d16
+ languageName: node
+ linkType: hard
+
"parse-path@npm:^7.0.0":
version: 7.0.0
resolution: "parse-path@npm:7.0.0"
@@ -19313,6 +19461,31 @@ __metadata:
languageName: node
linkType: hard
+"patch-package@npm:^8.0.0":
+ version: 8.0.0
+ resolution: "patch-package@npm:8.0.0"
+ dependencies:
+ "@yarnpkg/lockfile": "npm:^1.1.0"
+ chalk: "npm:^4.1.2"
+ ci-info: "npm:^3.7.0"
+ cross-spawn: "npm:^7.0.3"
+ find-yarn-workspace-root: "npm:^2.0.0"
+ fs-extra: "npm:^9.0.0"
+ json-stable-stringify: "npm:^1.0.2"
+ klaw-sync: "npm:^6.0.0"
+ minimist: "npm:^1.2.6"
+ open: "npm:^7.4.2"
+ rimraf: "npm:^2.6.3"
+ semver: "npm:^7.5.3"
+ slash: "npm:^2.0.0"
+ tmp: "npm:^0.0.33"
+ yaml: "npm:^2.2.2"
+ bin:
+ patch-package: index.js
+ checksum: 10c0/690eab0537e953a3fd7d32bb23f0e82f97cd448f8244c3227ed55933611a126f9476397325c06ad2c11d881a19b427a02bd1881bee78d89f1731373fc4fe0fee
+ languageName: node
+ linkType: hard
+
"path-exists@npm:^2.0.0":
version: 2.1.0
resolution: "path-exists@npm:2.1.0"
@@ -19357,6 +19530,13 @@ __metadata:
languageName: node
linkType: hard
+"path-key@npm:^4.0.0":
+ version: 4.0.0
+ resolution: "path-key@npm:4.0.0"
+ checksum: 10c0/794efeef32863a65ac312f3c0b0a99f921f3e827ff63afa5cb09a377e202c262b671f7b3832a4e64731003fa94af0263713962d317b9887bd1e0c48a342efba3
+ languageName: node
+ linkType: hard
+
"path-parse@npm:^1.0.7":
version: 1.0.7
resolution: "path-parse@npm:1.0.7"
@@ -20265,6 +20445,15 @@ __metadata:
languageName: node
linkType: hard
+"pretty-ms@npm:^9.0.0":
+ version: 9.2.0
+ resolution: "pretty-ms@npm:9.2.0"
+ dependencies:
+ parse-ms: "npm:^4.0.0"
+ checksum: 10c0/ab6d066f90e9f77020426986e1b018369f41575674544c539aabec2e63a20fec01166d8cf6571d0e165ad11cfe5a8134a2a48a36d42ab291c59c6deca5264cbb
+ languageName: node
+ linkType: hard
+
"proc-log@npm:^3.0.0":
version: 3.0.0
resolution: "proc-log@npm:3.0.0"
@@ -21460,6 +21649,17 @@ __metadata:
languageName: node
linkType: hard
+"rimraf@npm:^2.6.3":
+ version: 2.7.1
+ resolution: "rimraf@npm:2.7.1"
+ dependencies:
+ glob: "npm:^7.1.3"
+ bin:
+ rimraf: ./bin.js
+ checksum: 10c0/4eef73d406c6940927479a3a9dee551e14a54faf54b31ef861250ac815172bade86cc6f7d64a4dc5e98b65e4b18a2e1c9ff3b68d296be0c748413f092bb0dd40
+ languageName: node
+ linkType: hard
+
"rimraf@npm:^4.4.1":
version: 4.4.1
resolution: "rimraf@npm:4.4.1"
@@ -22796,6 +22996,13 @@ __metadata:
languageName: node
linkType: hard
+"strip-final-newline@npm:^4.0.0":
+ version: 4.0.0
+ resolution: "strip-final-newline@npm:4.0.0"
+ checksum: 10c0/b0cf2b62d597a1b0e3ebc42b88767f0a0d45601f89fd379a928a1812c8779440c81abba708082c946445af1d6b62d5f16e2a7cf4f30d9d6587b89425fae801ff
+ languageName: node
+ linkType: hard
+
"strip-indent@npm:^3.0.0":
version: 3.0.0
resolution: "strip-indent@npm:3.0.0"
@@ -23941,6 +24148,13 @@ __metadata:
languageName: node
linkType: hard
+"unicorn-magic@npm:^0.3.0":
+ version: 0.3.0
+ resolution: "unicorn-magic@npm:0.3.0"
+ checksum: 10c0/0a32a997d6c15f1c2a077a15b1c4ca6f268d574cf5b8975e778bb98e6f8db4ef4e86dfcae4e158cd4c7e38fb4dd383b93b13eefddc7f178dea13d3ac8a603271
+ languageName: node
+ linkType: hard
+
"unified@npm:^10.0.0":
version: 10.1.2
resolution: "unified@npm:10.1.2"
@@ -25232,14 +25446,7 @@ __metadata:
languageName: node
linkType: hard
-"yaml@npm:^2.3.4":
- version: 2.3.4
- resolution: "yaml@npm:2.3.4"
- checksum: 10c0/cf03b68f8fef5e8516b0f0b54edaf2459f1648317fc6210391cf606d247e678b449382f4bd01f77392538429e306c7cba8ff46ff6b37cac4de9a76aff33bd9e1
- languageName: node
- linkType: hard
-
-"yaml@npm:^2.7.1":
+"yaml@npm:^2.2.2, yaml@npm:^2.7.1":
version: 2.7.1
resolution: "yaml@npm:2.7.1"
bin:
@@ -25248,6 +25455,13 @@ __metadata:
languageName: node
linkType: hard
+"yaml@npm:^2.3.4":
+ version: 2.3.4
+ resolution: "yaml@npm:2.3.4"
+ checksum: 10c0/cf03b68f8fef5e8516b0f0b54edaf2459f1648317fc6210391cf606d247e678b449382f4bd01f77392538429e306c7cba8ff46ff6b37cac4de9a76aff33bd9e1
+ languageName: node
+ linkType: hard
+
"yargs-parser@npm:20.2.4":
version: 20.2.4
resolution: "yargs-parser@npm:20.2.4"
@@ -25450,6 +25664,13 @@ __metadata:
languageName: node
linkType: hard
+"yoctocolors@npm:^2.0.0":
+ version: 2.1.1
+ resolution: "yoctocolors@npm:2.1.1"
+ checksum: 10c0/85903f7fa96f1c70badee94789fade709f9d83dab2ec92753d612d84fcea6d34c772337a9f8914c6bed2f5fc03a428ac5d893e76fab636da5f1236ab725486d0
+ languageName: node
+ linkType: hard
+
"zip-stream@npm:^4.1.0":
version: 4.1.0
resolution: "zip-stream@npm:4.1.0"