Updated demos to React 18

[wszymanski]

Context

Done changes:

• Updated docs/react-data-grid/demo/ and /react-data-grid/redux pages (they have been importing react-dom).
• Updated examples project in the directory examples/next/docs/react.
• Updated visual tests version of React to 18
• Updated examples in https://github.com/handsontable/handsontable/tree/develop/examples/next/docs/react to React 18
• Fixed problem with building examples (TypeScript error for subpackage in demo directory) See a comment below.
• Updated JSFiddles (docs) to use React 18

I have been considering whether in handsontable/docs/.vuepress/public/scripts/fixer.js should be line:

} else if (key === 'react-dom/client' || key === 'react-dom') {

I've come to the conclusion that backward compatibility probably won't be needed due to rebuilding only the latest version of the documentation.

Note from the issue:

It should be checked on staging first - @aninde will test if all JSFiddles (docs) and examples work correctly and updated if everything works correctly.

Note: Some changes will be introduced to another repo: https://github.com/handsontable/handsontable.com-v2/pull/162

[skip changelog]

[github-actions]

Launch the local version of documentation by running:

npm run docs:review db873d6efa7a2551d926eee5b3f1368b3f607ece

[wszymanski]

It seems that updating examples in develop/examples/next/docs/react to React 18 isn't possible without updating React wrapper dependencies to React 18. Otherwise, a TypeScript error is thrown:

Creating an optimized production build...
Failed to compile.

/home/runner/work/handsontable/handsontable/examples/next/docs/react/demo/src/index.tsx
TypeScript error in /home/runner/work/handsontable/handsontable/examples/next/docs/react/demo/src/index.tsx(22,6):
'HotTable' cannot be used as a JSX component.
  Its instance type 'HotTable' is not a valid JSX element.
    The types returned by 'render()' are incompatible between these types.
      Type 'ReactElement<any, string | JSXElementConstructor<any>>' is not assignable to type 'ReactNode'.
        Property 'children' is missing in type 'ReactElement<any, string | JSXElementConstructor<any>>' but required in type 'ReactPortal'.  TS2786

    20 | const App = () => {
    21 |   return (
  > 22 |     <HotTable
       |      ^
    23 |       data={data}
    24 |       height={4[50](https://github.com/handsontable/handsontable/actions/runs/4512356490/jobs/7945829667#step:21:51)}
    25 |       colWidths={[140, 192, 100, 90, 90, 110, 97, 100, 126]}

It can be reproduced and tested by building Handsontable, running npm run install:version next in handsontable/examples directory and building example by npm run build command within next/docs/react/demo directory.

There is problem with mismatching @types/react and @types/react-dom packages. After updating them to ^18.0.29 and ^18.0.11 (within 4450490 and 9bf0a21) it seems that problem hasn't been occurring.

It is possible to install dependencies in the single workspace or use npm dedupe in the example directory, but this workaround doesn't resolve the source of the problem. I suggest to update wrapper packages within another issue as it needs releasing of Handsontable. I reverted changes related to updating examples and visual tests within c4a14ea and 0a8612f so far.

[adamu-handsontable]

If I understand correctly, we have everything ready (using React 18) except examples (which are used mostly by us). Updating examples forces us to change React version in Handsontable React Wrapper to version 18. This could result in breaking changes for our users and seems like a separate issue. I think best way to move forward would be to merge what we already have and create a separate task for updating examples in the future.

[wszymanski]

@jansiegel This PR will release only selected features.

[jansiegel]

There are a few things here:

1. The syntax was changed to work with react@18, but react was not bumped to 18, so the examples don't work
2. The targeted container id was changed to container from root here, but in the styles it's still root, so the example renders a blank page
3. If updating the examples to react@18 requires a change in the wrapper's dependencies, it's highly possible that our wrapper is, at least in some instances, incompatible with react@18, right? Or am I missing something? And if that's the case, it should be probable looked into sooner than later. (cc @adamu-handsontable)

[wszymanski]

According to 1 and 2 points. I don't know why it hasn't been reverted 🙄 Changed within 0a3d06e.

3. I thought that problem is only related to our linking system and examples (part of the task), but it seems that there are some extra problems with ES build. Thus, I can agree that updating wrapper should be fixed sooner than later. Probably it will be a breaking change.

[wszymanski]

Update: https://github.com/handsontable/dev-handsontable/issues/1048#issuecomment-1630483272

[krzysztofspilka]

As discussed on Aug 11, 2023, this issue needs further investigation. Not urgent.