Skip to content

Commit 4885d1a

Browse files
remarkablemarkremarkablemark
committed
chore(examples): update dependencies and best practices
1 parent a557f85 commit 4885d1a

File tree

15 files changed

+76
-52
lines changed

15 files changed

+76
-52
lines changed

‎examples/amd/requirejs.html

Lines changed: 5 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -7,21 +7,20 @@
77
window.requirejs.config({
88
paths: {
99
'html-react-parser': '../../dist/html-react-parser.min',
10-
react: 'https://unpkg.com/react@16/umd/react.development',
11-
'react-dom': 'https://unpkg.com/react-dom@16/umd/react-dom.development'
10+
react: 'https://unpkg.com/react@18/umd/react.development',
11+
'react-dom': 'https://unpkg.com/react-dom@18/umd/react-dom.development'
1212
}
1313
});
1414

1515
window.requirejs(
1616
['html-react-parser', 'react-dom'],
1717
function (HTMLReactParser, ReactDOM) {
18-
ReactDOM.render(
18+
ReactDOM.createRoot(document.getElementById('root')).render(
1919
HTMLReactParser(
20-
'<h2 style="font-family:\'Lucida Grande\';">' +
20+
'<h2 style="font-family: \'Lucida Grande\', sans-serif;">' +
2121
'HTMLReactParser loaded with RequireJS' +
2222
'<\/h2>'
23-
),
24-
document.getElementById('root')
23+
)
2524
);
2625
}
2726
);

‎examples/create-react-app-typescript/package.json

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -3,13 +3,13 @@
33
"version": "0.1.0",
44
"private": true,
55
"dependencies": {
6-
"@types/node": "^17.0.21",
7-
"@types/react-dom": "^17.0.12",
6+
"@types/node": "^18.13.0",
7+
"@types/react-dom": "^18.0.10",
88
"html-react-parser": "../../",
9-
"react": "^17.0.2",
10-
"react-dom": "^17.0.2",
11-
"react-scripts": "5.0.0",
12-
"typescript": "^4.6.2"
9+
"react": "^18.2.0",
10+
"react-dom": "^18.2.0",
11+
"react-scripts": "5.0.1",
12+
"typescript": "^4.9.5"
1313
},
1414
"scripts": {
1515
"start": "react-scripts start",

‎examples/create-react-app-typescript/src/App.tsx

Lines changed: 4 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,3 @@
1-
import React from 'react';
21
import parse, { domToReact, htmlToDOM, Element } from 'html-react-parser';
32
import './App.css';
43

@@ -18,10 +17,10 @@ export default function App() {
1817
return (
1918
<div className="App">
2019
{parser(`
21-
<h2 style="font-family: 'Lucida Grande';">
22-
HTMLReactParser<br class="remove"> loaded withCreate React App
23-
</h2>
24-
`)}
20+
<h2 style="font-family: 'Lucida Grande';">
21+
HTMLReactParser<br class="remove"> with Create React App (TypeScript)
22+
</h2>
23+
`)}
2524
</div>
2625
);
2726
}

‎examples/create-react-app-typescript/src/index.tsx

Lines changed: 3 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,9 @@
11
import React from 'react';
2-
import ReactDOM from 'react-dom';
2+
import ReactDOM from 'react-dom/client';
33
import App from './App';
44

5-
ReactDOM.render(
5+
ReactDOM.createRoot(document.getElementById('root')!).render(
66
<React.StrictMode>
77
<App />
8-
</React.StrictMode>,
9-
document.getElementById('root')
8+
</React.StrictMode>
109
);

‎examples/create-react-app/package.json

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -5,9 +5,9 @@
55
},
66
"devDependencies": {
77
"html-react-parser": "../../",
8-
"react": "^17.0.2",
9-
"react-dom": "^17.0.2",
10-
"react-scripts": "5.0.0"
8+
"react": "^18.2.0",
9+
"react-dom": "^18.2.0",
10+
"react-scripts": "5.0.1"
1111
},
1212
"eslintConfig": {
1313
"extends": "react-app"

‎examples/create-react-app/src/App.js

Lines changed: 4 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,3 @@
1-
import React from 'react';
21
import parse, { domToReact, htmlToDOM, Element } from 'html-react-parser';
32
import './App.css';
43

@@ -18,10 +17,10 @@ export default function App() {
1817
return (
1918
<div className="App">
2019
{parser(`
21-
<h2 style="font-family: 'Lucida Grande';">
22-
HTMLReactParser<br class="remove"> loaded withCreate React App
23-
</h2>
24-
`)}
20+
<h2 style="font-family: 'Lucida Grande';">
21+
HTMLReactParser<br class="remove"> with Create React App
22+
</h2>
23+
`)}
2524
</div>
2625
);
2726
}

‎examples/create-react-app/src/index.js

Lines changed: 6 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,9 @@
11
import React from 'react';
2-
import ReactDOM from 'react-dom';
2+
import ReactDOM from 'react-dom/client';
33
import App from './App';
44

5-
ReactDOM.render(<App />, document.getElementById('root'));
5+
ReactDOM.createRoot(document.getElementById('root')).render(
6+
<React.StrictMode>
7+
<App />
8+
</React.StrictMode>
9+
);

‎examples/next/next-env.d.ts

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
/// <reference types="next" />
2+
/// <reference types="next/image-types/global" />
3+
4+
// NOTE: This file should not be edited
5+
// see https://nextjs.org/docs/basic-features/typescript for more information.

‎examples/next/package.json

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -6,8 +6,8 @@
66
},
77
"dependencies": {
88
"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"
1212
}
1313
}

‎examples/next/pages/index.js renamed to ‎examples/next/pages/index.tsx

File renamed without changes.

‎examples/next/tsconfig.json

Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
{
2+
"compilerOptions": {
3+
"lib": ["dom", "dom.iterable", "esnext"],
4+
"allowJs": true,
5+
"skipLibCheck": true,
6+
"strict": false,
7+
"forceConsistentCasingInFileNames": true,
8+
"noEmit": true,
9+
"incremental": true,
10+
"esModuleInterop": true,
11+
"module": "esnext",
12+
"moduleResolution": "node",
13+
"resolveJsonModule": true,
14+
"isolatedModules": true,
15+
"jsx": "preserve"
16+
},
17+
"include": ["next-env.d.ts", "**/*.ts", "**/*.tsx"],
18+
"exclude": ["node_modules"]
19+
}

‎examples/script/index.html

Lines changed: 8 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,27 +1,28 @@
11
<div id="root" style="padding: 50px"></div>
22

33
<!-- React -->
4-
<script src="https://unpkg.com/react@16/umd/react.development.js"></script>
4+
<script src="https://unpkg.com/react@18/umd/react.development.js"></script>
55
<!--
6+
<script src="https://unpkg.com/react@16/umd/react.development.js"></script>
67
<script src="https://unpkg.com/react@15/dist/react.js"></script>
78
-->
89

910
<!-- HTMLReactParser -->
10-
<script src="../../dist/html-react-parser.min.js"></script>
11+
<script src="../../dist/html-react-parser.js"></script>
1112

1213
<!-- ReactDOM -->
13-
<script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
14+
<script src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"></script>
1415
<!--
16+
<script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
1517
<script src="https://unpkg.com/react-dom@15/dist/react-dom.js"></script>
1618
-->
1719

1820
<script>
19-
window.ReactDOM.render(
20-
window.HTMLReactParser(
21+
ReactDOM.createRoot(document.getElementById('root')).render(
22+
HTMLReactParser(
2123
'<h2 style="font-family: \'Lucida Grande\', sans-serif;">' +
2224
'HTMLReactParser loaded with script tag' +
2325
'<\/h2>'
24-
),
25-
document.getElementById('root')
26+
)
2627
);
2728
</script>

‎examples/script/repl.html

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,8 @@
11
<textarea cols="50" rows="5"><p>Hello, world!</p></textarea>
22
<pre><code></code></pre>
3-
<script src="https://unpkg.com/react@16/umd/react.production.min.js"></script>
3+
<script src="https://unpkg.com/react@18/umd/react.production.min.js"></script>
44
<script src="../../dist/html-react-parser.min.js"></script>
5+
56
<script>
67
var code = document.querySelector('code');
78
var textarea = document.querySelector('textarea');

‎examples/webpack/package.json

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -6,9 +6,9 @@
66
},
77
"devDependencies": {
88
"html-react-parser": "../../",
9-
"react": "^17.0.2",
10-
"react-dom": "^17.0.2",
11-
"webpack": "^5.69.1",
12-
"webpack-cli": "^4.9.2"
9+
"react": "^18.2.0",
10+
"react-dom": "^18.2.0",
11+
"webpack": "^5.75.0",
12+
"webpack-cli": "^5.0.1"
1313
}
1414
}

‎examples/webpack/src/index.js

Lines changed: 4 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,6 @@
1+
import ReactDOM from 'react-dom/client';
12
import parse from 'html-react-parser';
23

3-
import('react-dom').then(function (ReactDOM) {
4-
ReactDOM.render(
5-
parse('<h1>HTMLReactParser loaded with webpack</h1>'),
6-
document.getElementById('root')
7-
);
8-
});
4+
ReactDOM.createRoot(document.getElementById('root')).render(
5+
parse('<h1>HTMLReactParser loaded with Webpack</h1>')
6+
);

0 commit comments

Comments
 (0)