chore(examples): update dependencies and best practices

remarkablemark · remarkablemark · commit 4885d1a1dbfd · 2023-02-11T16:12:18.000-05:00
diff --git a/examples/amd/requirejs.html b/examples/amd/requirejs.html
@@ -7,21 +7,20 @@
   window.requirejs.config({
     paths: {
       'html-react-parser': '../../dist/html-react-parser.min',
-      react: 'https://unpkg.com/react@16/umd/react.development',
-      'react-dom': 'https://unpkg.com/react-dom@16/umd/react-dom.development'
+      react: 'https://unpkg.com/react@18/umd/react.development',
+      'react-dom': 'https://unpkg.com/react-dom@18/umd/react-dom.development'
     }
   });
 
   window.requirejs(
     ['html-react-parser', 'react-dom'],
     function (HTMLReactParser, ReactDOM) {
-      ReactDOM.render(
+      ReactDOM.createRoot(document.getElementById('root')).render(
         HTMLReactParser(
-          '<h2 style="font-family:\'Lucida Grande\';">' +
+          '<h2 style="font-family: \'Lucida Grande\', sans-serif;">' +
             'HTMLReactParser loaded with RequireJS' +
             '<\/h2>'
-        ),
-        document.getElementById('root')
+        )
       );
     }
   );
diff --git a/examples/create-react-app-typescript/package.json b/examples/create-react-app-typescript/package.json
@@ -3,13 +3,13 @@
   "version": "0.1.0",
   "private": true,
   "dependencies": {
-    "@types/node": "^17.0.21",
-    "@types/react-dom": "^17.0.12",
+    "@types/node": "^18.13.0",
+    "@types/react-dom": "^18.0.10",
     "html-react-parser": "../../",
-    "react": "^17.0.2",
-    "react-dom": "^17.0.2",
-    "react-scripts": "5.0.0",
-    "typescript": "^4.6.2"
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "react-scripts": "5.0.1",
+    "typescript": "^4.9.5"
   },
   "scripts": {
     "start": "react-scripts start",
diff --git a/examples/create-react-app-typescript/src/App.tsx b/examples/create-react-app-typescript/src/App.tsx
@@ -1,4 +1,3 @@
-import React from 'react';
 import parse, { domToReact, htmlToDOM, Element } from 'html-react-parser';
 import './App.css';
 
@@ -18,10 +17,10 @@ export default function App() {
   return (
     <div className="App">
       {parser(`
-          <h2 style="font-family: 'Lucida Grande';">
-            HTMLReactParser<br class="remove"> loaded withCreate React App
-          </h2>
-        `)}
+        <h2 style="font-family: 'Lucida Grande';">
+          HTMLReactParser<br class="remove"> with Create React App (TypeScript)
+        </h2>
+      `)}
     </div>
   );
 }
diff --git a/examples/create-react-app-typescript/src/index.tsx b/examples/create-react-app-typescript/src/index.tsx
@@ -1,10 +1,9 @@
 import React from 'react';
-import ReactDOM from 'react-dom';
+import ReactDOM from 'react-dom/client';
 import App from './App';
 
-ReactDOM.render(
+ReactDOM.createRoot(document.getElementById('root')!).render(
   <React.StrictMode>
     <App />
-  </React.StrictMode>,
-  document.getElementById('root')
+  </React.StrictMode>
 );
diff --git a/examples/create-react-app/package.json b/examples/create-react-app/package.json
@@ -5,9 +5,9 @@
   },
   "devDependencies": {
     "html-react-parser": "../../",
-    "react": "^17.0.2",
-    "react-dom": "^17.0.2",
-    "react-scripts": "5.0.0"
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "react-scripts": "5.0.1"
   },
   "eslintConfig": {
     "extends": "react-app"
diff --git a/examples/create-react-app/src/App.js b/examples/create-react-app/src/App.js
@@ -1,4 +1,3 @@
-import React from 'react';
 import parse, { domToReact, htmlToDOM, Element } from 'html-react-parser';
 import './App.css';
 
@@ -18,10 +17,10 @@ export default function App() {
   return (
     <div className="App">
       {parser(`
-            <h2 style="font-family: 'Lucida Grande';">
-              HTMLReactParser<br class="remove"> loaded withCreate React App
-            </h2>
-          `)}
+        <h2 style="font-family: 'Lucida Grande';">
+          HTMLReactParser<br class="remove"> with Create React App
+        </h2>
+      `)}
     </div>
   );
 }
diff --git a/examples/create-react-app/src/index.js b/examples/create-react-app/src/index.js
@@ -1,5 +1,9 @@
 import React from 'react';
-import ReactDOM from 'react-dom';
+import ReactDOM from 'react-dom/client';
 import App from './App';
 
-ReactDOM.render(<App />, document.getElementById('root'));
+ReactDOM.createRoot(document.getElementById('root')).render(
+  <React.StrictMode>
+    <App />
+  </React.StrictMode>
+);
diff --git a/examples/next/next-env.d.ts b/examples/next/next-env.d.ts
@@ -0,0 +1,5 @@
+/// <reference types="next" />
+/// <reference types="next/image-types/global" />
+
+// NOTE: This file should not be edited
+// see https://nextjs.org/docs/basic-features/typescript for more information.
diff --git a/examples/next/package.json b/examples/next/package.json
@@ -6,8 +6,8 @@
   },
   "dependencies": {
     "html-react-parser": "../../",
-    "next": "^12.1.0",
-    "react": "^17.0.2",
-    "react-dom": "^17.0.2"
+    "next": "^13.1.6",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0"
   }
 }
diff --git a/examples/next/pages/index.tsx b/examples/next/pages/index.tsx
diff --git a/examples/next/tsconfig.json b/examples/next/tsconfig.json
@@ -0,0 +1,19 @@
+{
+  "compilerOptions": {
+    "lib": ["dom", "dom.iterable", "esnext"],
+    "allowJs": true,
+    "skipLibCheck": true,
+    "strict": false,
+    "forceConsistentCasingInFileNames": true,
+    "noEmit": true,
+    "incremental": true,
+    "esModuleInterop": true,
+    "module": "esnext",
+    "moduleResolution": "node",
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "jsx": "preserve"
+  },
+  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx"],
+  "exclude": ["node_modules"]
+}
diff --git a/examples/script/index.html b/examples/script/index.html
@@ -1,27 +1,28 @@
 <div id="root" style="padding: 50px"></div>
 
 <!-- React -->
-<script src="https://unpkg.com/react@16/umd/react.development.js"></script>
+<script src="https://unpkg.com/react@18/umd/react.development.js"></script>
 <!--
+  <script src="https://unpkg.com/react@16/umd/react.development.js"></script>
   <script src="https://unpkg.com/react@15/dist/react.js"></script>
 -->
 
 <!-- HTMLReactParser -->
-<script src="../../dist/html-react-parser.min.js"></script>
+<script src="../../dist/html-react-parser.js"></script>
 
 <!-- ReactDOM -->
-<script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
+<script src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"></script>
 <!--
+  <script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
   <script src="https://unpkg.com/react-dom@15/dist/react-dom.js"></script>
 -->
 
 <script>
-  window.ReactDOM.render(
-    window.HTMLReactParser(
+  ReactDOM.createRoot(document.getElementById('root')).render(
+    HTMLReactParser(
       '<h2 style="font-family: \'Lucida Grande\', sans-serif;">' +
         'HTMLReactParser loaded with script tag' +
         '<\/h2>'
-    ),
-    document.getElementById('root')
+    )
   );
 </script>
diff --git a/examples/script/repl.html b/examples/script/repl.html
@@ -1,7 +1,8 @@
 <textarea cols="50" rows="5"><p>Hello, world!</p></textarea>
 <pre><code></code></pre>
-<script src="https://unpkg.com/react@16/umd/react.production.min.js"></script>
+<script src="https://unpkg.com/react@18/umd/react.production.min.js"></script>
 <script src="../../dist/html-react-parser.min.js"></script>
+
 <script>
   var code = document.querySelector('code');
   var textarea = document.querySelector('textarea');
diff --git a/examples/webpack/package.json b/examples/webpack/package.json
@@ -6,9 +6,9 @@
   },
   "devDependencies": {
     "html-react-parser": "../../",
-    "react": "^17.0.2",
-    "react-dom": "^17.0.2",
-    "webpack": "^5.69.1",
-    "webpack-cli": "^4.9.2"
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "webpack": "^5.75.0",
+    "webpack-cli": "^5.0.1"
   }
 }
diff --git a/examples/webpack/src/index.js b/examples/webpack/src/index.js
@@ -1,8 +1,6 @@
+import ReactDOM from 'react-dom/client';
 import parse from 'html-react-parser';
 
-import('react-dom').then(function (ReactDOM) {
-  ReactDOM.render(
-    parse('<h1>HTMLReactParser loaded with webpack</h1>'),
-    document.getElementById('root')
-  );
-});
+ReactDOM.createRoot(document.getElementById('root')).render(
+  parse('<h1>HTMLReactParser loaded with Webpack</h1>')
+);

Original file line number	Diff line number	Diff line change
`@@ -6,8 +6,8 @@`
`6`	`6`	`},`
`7`	`7`	`"dependencies": {`
`8`	`8`	`"html-react-parser": "../../",`
`9`		`- "next": "^12.1.0",`
`10`		`- "react": "^17.0.2",`
`11`		`- "react-dom": "^17.0.2"`
	`9`	`+ "next": "^13.1.6",`
	`10`	`+ "react": "^18.2.0",`
	`11`	`+ "react-dom": "^18.2.0"`
`12`	`12`	`}`
`13`	`13`	`}`