enable React 18 rendering of the examples (#1)

auto-detect React 17 / 18 and adjust the rendering method

Author: mmomtchev

.eslintrc.json

@@ -68,5 +68,8 @@
                 "no-console": "off"
             }
         }
+    ],
+    "ignorePatterns": [
+        "webpack.config.ts"
     ]
 }

CHANGELOG.md

@@ -5,6 +5,10 @@ All notable changes to this project will be documented in this file.
 The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
 
+### [1.1.1] WIP
+
+-   Render the examples in React 18 mode when available
+
 ## [1.1.0] 2021-05-04
 
 -   Support custom grid elements

examples/index-react18.tsx

@@ -0,0 +1,8 @@
+import React from 'react';
+import ReactDOMClient from 'react-dom/client';
+
+import App from './App';
+
+// eslint-disable-next-line no-console
+console.debug('React 18 mode');
+ReactDOMClient.createRoot(document.getElementById('root')).render(<App />);

examples/index.tsx

@@ -3,4 +3,6 @@ import ReactDOM from 'react-dom';
 
 import App from './App';
 
+// eslint-disable-next-line no-console
+console.debug('React 16/17 mode');
 ReactDOM.render(<App />, document.getElementById('root'));

package-lock.json

@@ -90,6 +90,7 @@
     "jest": "^27.5.1",
     "jest-canvas-mock": "^2.3.1",
     "markdown-loader": "^7.0.0",
+    "null-loader": "^4.0.1",
     "prettier": "2.6.2",
     "prism-themes": "^1.6.0",
     "prismjs": "^1.28.0",

package.json

@@ -4,10 +4,18 @@ import webpack, {Configuration} from 'webpack';
 import HtmlWebpackPlugin from 'html-webpack-plugin';
 import ForkTsCheckerWebpackPlugin from 'fork-ts-checker-webpack-plugin';
 import {TsconfigPathsPlugin} from 'tsconfig-paths-webpack-plugin';
+import * as React from 'react';
 
 const webpackConfig = (env): Configuration => {
+    let reactMajorVersion = +React.version.split('.')[0];
+    if (reactMajorVersion >= 18) {
+        console.log('React 18 detected');
+    } else {
+        console.log('React 16/17 detected');
+    }
+
     const conf: Configuration = {
-        entry: './examples/index.tsx',
+        entry: reactMajorVersion >= 18 ? './examples/index-react18.tsx' : './examples/index.tsx',
         ...(env.production || !env.development ? {} : {devtool: 'eval-source-map'}),
         resolve: {
             alias: {
@@ -32,12 +40,7 @@ const webpackConfig = (env): Configuration => {
                     options: {
                         transpileOnly: true,
                         configFile: 'examples/tsconfig.json'
-                    },
-                    exclude: /dist/
-                },
-                {
-                    test: /\.jsx$/,
-                    use: 'raw-loader'
+                    }
                 },
                 {
                     test: /\.css$/i,
@@ -63,16 +66,25 @@ const webpackConfig = (env): Configuration => {
                         DEBUG: !env.production || env.development
                     }
                 },
-                VERSION: JSON.stringify(require('./package.json').version)
+                VERSION: JSON.stringify(require('./package.json').version),
+                MAPBOX_TOKEN: JSON.stringify(process.env.MAPBOX_TOKEN)
             })
         ],
         devServer: {
-            port: 8030,
-            allowedHosts: ['all']
+            port: 8030
         }
     };
 
-    if (env.production) {
+    if (reactMajorVersion < 18) {
+        // This is needed for React 16/17 as otherwise ts-loader
+        // will pick `index-react18.tsx` and will fail transpiling it
+        conf.module.rules.unshift({
+            test: /index-react18\.tsx?$/,
+            loader: 'null-loader'
+        });
+    }
+
+    if (!env.development) {
         conf.plugins.push(
             new ForkTsCheckerWebpackPlugin({
                 eslint: {