Merge pull request #100 from bvaughn/feat/react-18-basic-support

feat: provide basic support of React 18

Author: sergei-startsev

.babelrc

@@ -9,9 +9,6 @@
             "transform": "react-transform-hmr",
             "imports": ["react"],
             "locals": ["module"]
-          }, {
-            "transform": "react-transform-catch-errors",
-            "imports": ["react", "redbox-react"]
           }]
         }
       }

README.md

@@ -12,17 +12,18 @@ To use it, just provide it with an array of search terms and a body of text to h
 
 ```jsx
 import React from "react";
-import ReactDOM from "react-dom";
+import { createRoot } from "react-dom/client";
 import Highlighter from "react-highlight-words";
 
-ReactDOM.render(
+
+const root = createRoot(document.getElementById("root"));
+root.render(
   <Highlighter
     highlightClassName="YourHighlightClass"
     searchWords={["and", "or", "the"]}
     autoEscape={true}
     textToHighlight="The dog is chasing the cat. Or perhaps they're just playing?"
-  />,
-  document.getElementById("root")
+  />
 );
 ```
 

karma.conf.js

@@ -19,6 +19,6 @@ module.exports = function (config) {
       require('karma-sourcemap-loader'),
       require('karma-phantomjs2-launcher')
     ],
-    webpack: require('./webpack.config.dev')
+    webpack: require('./webpack.config.test')
   })
 }

package.json

@@ -14,7 +14,6 @@
     "lint": "standard",
     "prebuild": "npm run lint",
     "postpublish": "npm run deploy",
-    "prepublish": "npm run build",
     "start": "webpack-dev-server --hot --inline --config webpack.config.dev.js",
     "test": "cross-env NODE_ENV=test karma start",
     "watch": "watch 'clear && npm run lint -s && npm run test -s' src"
@@ -83,11 +82,9 @@
     "lodash": "^4.17.10",
     "mocha": "^2.3.4",
     "phantomjs2": "^2.0.2",
-    "react": "^15.1.0",
-    "react-dom": "^15.1.0",
-    "react-transform-catch-errors": "^1.0.0",
+    "react": "^18.0.0",
+    "react-dom": "^18.0.0",
     "react-transform-hmr": "^1.0.1",
-    "redbox-react": "1.2.6",
     "rimraf": "^2.4.4",
     "standard": "^5.4.1",
     "style-loader": "^0.13.0",
@@ -102,6 +99,6 @@
     "prop-types": "^15.5.8"
   },
   "peerDependencies": {
-    "react": "^0.14.0 || ^15.0.0 || ^16.0.0-0 || ^17.0.0-0"
+    "react": "^0.14.0 || ^15.0.0 || ^16.0.0-0 || ^17.0.0-0 || ^18.0.0-0"
   }
 }

webpack.config.test.js

@@ -0,0 +1,44 @@
+const HtmlWebpackPlugin = require('html-webpack-plugin')
+const path = require('path')
+const webpack = require('webpack')
+
+module.exports = {
+  devtool: 'eval',
+  entry: [
+    'babel/polyfill',
+    './website/index.js'
+  ],
+  output: {
+    path: 'build',
+    filename: '/static/[name].js'
+  },
+  plugins: [
+    new HtmlWebpackPlugin({
+      filename: 'index.html',
+      inject: true,
+      template: './website/index.html'
+    }),
+    new webpack.NoErrorsPlugin(),
+    new webpack.DefinePlugin({
+      'process.env': {
+        // to temporarily suppress "ReactDOM.render is no longer supported in React 18" warnings
+        // should be removed after switching to createRoot
+        'NODE_ENV': JSON.stringify('production')
+      }
+    })
+  ],
+  module: {
+    loaders: [
+      {
+        test: /\.js$/,
+        loader: 'babel',
+        exclude: path.join(__dirname, 'node_modules')
+      },
+      {
+        test: /\.css$/,
+        loaders: ['style', 'css?modules&importLoaders=1', 'cssnext'],
+        exclude: path.join(__dirname, 'node_modules')
+      }
+    ]
+  }
+}

website/index.js

@@ -1,14 +1,12 @@
 /**
- * This is the entray point to the documentation/demo/test harness site for react-highlight-words.
+ * This is the entry point to the documentation/demo/test harness site for react-highlight-words.
  * This target is published to the root of the `gh-pages` branch.
  * @flow
  */
 import Application from './Application'
 import React from 'react'
-import { render } from 'react-dom'
+import { createRoot } from 'react-dom/client'
 import './index.css'
 
-render(
-  <Application/>,
-  document.getElementById('root')
-)
+const root = createRoot(document.getElementById('root'))
+root.render(<Application/>)

yarn.lock

@@ -1075,14 +1075,6 @@ core-util-is@1.0.2, core-util-is@~1.0.0:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/core-util-is/-/core-util-is-1.0.2.tgz#b5fd54220aa2bc5ab57aab7140c940754503c1a7"
 
-create-react-class@^15.6.0:
-  version "15.6.2"
-  resolved "https://registry.yarnpkg.com/create-react-class/-/create-react-class-15.6.2.tgz#cf1ed15f12aad7f14ef5f2dfe05e6c42f91ef02a"
-  dependencies:
-    fbjs "^0.8.9"
-    loose-envify "^1.3.1"
-    object-assign "^4.1.1"
-
 cross-env@^5.1.3:
   version "5.1.3"
   resolved "https://registry.yarnpkg.com/cross-env/-/cross-env-5.1.3.tgz#f8ae18faac87692b0a8b4d2f7000d4ec3a85dfd7"
@@ -1606,12 +1598,6 @@ errno@^0.1.3:
   dependencies:
     prr "~0.0.0"
 
-error-stack-parser@^1.3.6:
-  version "1.3.6"
-  resolved "https://registry.yarnpkg.com/error-stack-parser/-/error-stack-parser-1.3.6.tgz#e0e73b93e417138d1cd7c0b746b1a4a14854c292"
-  dependencies:
-    stackframe "^0.3.1"
-
 es5-ext@^0.10.14, es5-ext@^0.10.9, es5-ext@~0.10.14:
   version "0.10.35"
   resolved "https://registry.yarnpkg.com/es5-ext/-/es5-ext-0.10.35.tgz#18ee858ce6a3c45c7d79e91c15fcca9ec568494f"
@@ -2011,7 +1997,7 @@ faye-websocket@~0.11.0:
   dependencies:
     websocket-driver ">=0.5.1"
 
-fbjs@^0.8.16, fbjs@^0.8.9:
+fbjs@^0.8.16:
   version "0.8.16"
   resolved "https://registry.yarnpkg.com/fbjs/-/fbjs-0.8.16.tgz#5e67432f550dc41b572bf55847b8aca64e5337db"
   dependencies:
@@ -4685,7 +4671,7 @@ promise@^7.1.1:
   dependencies:
     asap "~2.0.3"
 
-prop-types@^15.5.10, prop-types@^15.5.8:
+prop-types@^15.5.8:
   version "15.6.0"
   resolved "https://registry.yarnpkg.com/prop-types/-/prop-types-15.6.0.tgz#ceaf083022fc46b4a35f69e13ef75aed0d639856"
   dependencies:
@@ -4815,14 +4801,13 @@ react-deep-force-update@^1.0.0:
   version "1.1.1"
   resolved "https://registry.yarnpkg.com/react-deep-force-update/-/react-deep-force-update-1.1.1.tgz#bcd31478027b64b3339f108921ab520b4313dc2c"
 
-react-dom@^15.1.0:
-  version "15.6.2"
-  resolved "https://registry.yarnpkg.com/react-dom/-/react-dom-15.6.2.tgz#41cfadf693b757faf2708443a1d1fd5a02bef730"
+react-dom@^18.0.0:
+  version "18.0.0"
+  resolved "https://registry.yarnpkg.com/react-dom/-/react-dom-18.0.0.tgz#26b88534f8f1dbb80853e1eabe752f24100d8023"
+  integrity sha512-XqX7uzmFo0pUceWFCt7Gff6IyIMzFUn7QMZrbrQfGxtaxXZIcGQzoNpRLE3fQLnS4XzLLPMZX2T9TRcSrasicw==
   dependencies:
-    fbjs "^0.8.9"
     loose-envify "^1.1.0"
-    object-assign "^4.1.0"
-    prop-types "^15.5.10"
+    scheduler "^0.21.0"
 
 react-proxy@^1.1.7:
   version "1.1.8"
@@ -4831,26 +4816,19 @@ react-proxy@^1.1.7:
     lodash "^4.6.1"
     react-deep-force-update "^1.0.0"
 
-react-transform-catch-errors@^1.0.0:
-  version "1.0.2"
-  resolved "https://registry.yarnpkg.com/react-transform-catch-errors/-/react-transform-catch-errors-1.0.2.tgz#1b4d4a76e97271896fc16fe3086c793ec88a9eeb"
-
 react-transform-hmr@^1.0.1:
   version "1.0.4"
   resolved "https://registry.yarnpkg.com/react-transform-hmr/-/react-transform-hmr-1.0.4.tgz#e1a40bd0aaefc72e8dfd7a7cda09af85066397bb"
   dependencies:
     global "^4.3.0"
     react-proxy "^1.1.7"
 
-react@^15.1.0:
-  version "15.6.2"
-  resolved "https://registry.yarnpkg.com/react/-/react-15.6.2.tgz#dba0434ab439cfe82f108f0f511663908179aa72"
+react@^18.0.0:
+  version "18.0.0"
+  resolved "https://registry.yarnpkg.com/react/-/react-18.0.0.tgz#b468736d1f4a5891f38585ba8e8fb29f91c3cb96"
+  integrity sha512-x+VL6wbT4JRVPm7EGxXhZ8w8LTROaxPXOqhlGyVSrv0sB1jkyFGgXxJ8LVoPRLvPR6/CIZGFmfzqUa2NYeMr2A==
   dependencies:
-    create-react-class "^15.6.0"
-    fbjs "^0.8.9"
     loose-envify "^1.1.0"
-    object-assign "^4.1.0"
-    prop-types "^15.5.10"
 
 read-file-stdin@^0.2.0:
   version "0.2.1"
@@ -4934,13 +4912,6 @@ recast@^0.11.17:
     private "~0.1.5"
     source-map "~0.5.0"
 
-redbox-react@1.2.6:
-  version "1.2.6"
-  resolved "https://registry.yarnpkg.com/redbox-react/-/redbox-react-1.2.6.tgz#b88f5b5c579b4bbf23fa2ddd535285346aa89abc"
-  dependencies:
-    error-stack-parser "^1.3.6"
-    object-assign "^4.0.1"
-
 reduce-css-calc@^1.2.0, reduce-css-calc@^1.2.6:
   version "1.3.0"
   resolved "https://registry.yarnpkg.com/reduce-css-calc/-/reduce-css-calc-1.3.0.tgz#747c914e049614a4c9cfbba629871ad1d2927716"
@@ -5224,6 +5195,13 @@ sax@~1.2.1:
   version "1.2.4"
   resolved "https://registry.yarnpkg.com/sax/-/sax-1.2.4.tgz#2816234e2378bddc4e5354fab5caa895df7100d9"
 
+scheduler@^0.21.0:
+  version "0.21.0"
+  resolved "https://registry.yarnpkg.com/scheduler/-/scheduler-0.21.0.tgz#6fd2532ff5a6d877b6edb12f00d8ab7e8f308820"
+  integrity sha512-1r87x5fz9MXqswA2ERLo0EbOAU74DpIUO090gIasYTqlVoJeMcl+Z1Rg7WHz+qtPujhS/hGIt9kxZOYBV3faRQ==
+  dependencies:
+    loose-envify "^1.1.0"
+
 "semver@2 || 3 || 4", semver@^4.3.1, semver@~4.3.3:
   version "4.3.6"
   resolved "https://registry.yarnpkg.com/semver/-/semver-4.3.6.tgz#300bc6e0e86374f7ba61068b5b1ecd57fc6532da"
@@ -5492,10 +5470,6 @@ stable@~0.1.3:
   version "0.1.6"
   resolved "https://registry.yarnpkg.com/stable/-/stable-0.1.6.tgz#910f5d2aed7b520c6e777499c1f32e139fdecb10"
 
-stackframe@^0.3.1:
-  version "0.3.1"
-  resolved "https://registry.yarnpkg.com/stackframe/-/stackframe-0.3.1.tgz#33aa84f1177a5548c8935533cbfeb3420975f5a4"
-
 standard-engine@^2.0.4:
   version "2.2.5"
   resolved "https://registry.yarnpkg.com/standard-engine/-/standard-engine-2.2.5.tgz#a2b9d4419f648a221b8d17823fb745406f37c34e"