From 25f170f9b074ea0cd628ec535059a56d57908bc0 Mon Sep 17 00:00:00 2001
From: Dhaya <154633+dhayab@users.noreply.github.com>
Date: Mon, 1 Aug 2022 11:48:57 +0200
Subject: [PATCH] feat(templates): update react instantsearch web templates to
react 18 (#576)
---
e2e/__snapshots__/templates.test.js.snap | 16 ++++++++++------
.../React InstantSearch Hooks/package.json | 12 +++++++-----
.../React InstantSearch Hooks/src/App.tsx.hbs | 1 +
.../React InstantSearch Hooks/src/Panel.tsx | 2 ++
.../React InstantSearch Hooks/src/index.tsx | 5 +++--
src/templates/React InstantSearch/package.json | 4 ++--
src/templates/React InstantSearch/src/index.js | 4 ++--
7 files changed, 27 insertions(+), 17 deletions(-)
diff --git a/e2e/__snapshots__/templates.test.js.snap b/e2e/__snapshots__/templates.test.js.snap
index 8a3d7c44e..6043208a9 100644
--- a/e2e/__snapshots__/templates.test.js.snap
+++ b/e2e/__snapshots__/templates.test.js.snap
@@ -5821,11 +5821,11 @@ body {
exports[`Templates React InstantSearch File content: src/index.js 1`] = `
"import React from 'react';
-import ReactDOM from 'react-dom';
+import { createRoot } from 'react-dom/client';
import './index.css';
import App from './App';
-ReactDOM.render(, document.getElementById('root'));"
+createRoot(document.getElementById('root')).render();"
`;
exports[`Templates React InstantSearch Folder structure: contains the right files 1`] = `
@@ -6037,7 +6037,8 @@ em {
`;
exports[`Templates React InstantSearch Hooks File content: src/App.tsx 1`] = `
-"import algoliasearch from 'algoliasearch/lite';
+"import React from 'react';
+import algoliasearch from 'algoliasearch/lite';
import {
Configure,
DynamicWidgets,
@@ -6124,7 +6125,9 @@ function Hit({ hit }: HitProps) {
`;
exports[`Templates React InstantSearch Hooks File content: src/Panel.tsx 1`] = `
-"type PanelProps = React.PropsWithChildren<{
+"import React from 'react';
+
+type PanelProps = React.PropsWithChildren<{
header: string;
}>;
@@ -6141,11 +6144,12 @@ export function Panel({ header, children }: PanelProps) {
`;
exports[`Templates React InstantSearch Hooks File content: src/index.tsx 1`] = `
-"import ReactDOM from 'react-dom';
+"import React from 'react';
+import { createRoot } from 'react-dom/client';
import { App } from './App';
-ReactDOM.render(, document.getElementById('root'));"
+createRoot(document.getElementById('root')!).render();"
`;
exports[`Templates React InstantSearch Hooks Folder structure: contains the right files 1`] = `
diff --git a/src/templates/React InstantSearch Hooks/package.json b/src/templates/React InstantSearch Hooks/package.json
index 67028b01d..e5178e998 100644
--- a/src/templates/React InstantSearch Hooks/package.json
+++ b/src/templates/React InstantSearch Hooks/package.json
@@ -8,13 +8,15 @@
},
"dependencies": {
"algoliasearch": "4",
- "instantsearch.js": "4.40.5",
- "react": "17.0.2",
- "react-dom": "17.0.2",
+ "instantsearch.js": "4.43.1",
+ "react": "18.1.0",
+ "react-dom": "18.1.0",
"react-instantsearch-hooks-web": "{{libraryVersion}}"
},
"devDependencies": {
- "@types/react": "17.0.45",
- "parcel": "2.5.0"
+ "@types/react": "18.0.15",
+ "@types/react-dom": "18.0.6",
+ "parcel": "2.5.0",
+ "typescript": "4.7.4"
}
}
diff --git a/src/templates/React InstantSearch Hooks/src/App.tsx.hbs b/src/templates/React InstantSearch Hooks/src/App.tsx.hbs
index 4d2d9782c..5f3036f8c 100644
--- a/src/templates/React InstantSearch Hooks/src/App.tsx.hbs
+++ b/src/templates/React InstantSearch Hooks/src/App.tsx.hbs
@@ -1,3 +1,4 @@
+import React from 'react';
import algoliasearch from 'algoliasearch/lite';
import {
Configure,
diff --git a/src/templates/React InstantSearch Hooks/src/Panel.tsx b/src/templates/React InstantSearch Hooks/src/Panel.tsx
index e9c943961..bbff1e71f 100644
--- a/src/templates/React InstantSearch Hooks/src/Panel.tsx
+++ b/src/templates/React InstantSearch Hooks/src/Panel.tsx
@@ -1,3 +1,5 @@
+import React from 'react';
+
type PanelProps = React.PropsWithChildren<{
header: string;
}>;
diff --git a/src/templates/React InstantSearch Hooks/src/index.tsx b/src/templates/React InstantSearch Hooks/src/index.tsx
index da7925647..b5cce1263 100644
--- a/src/templates/React InstantSearch Hooks/src/index.tsx
+++ b/src/templates/React InstantSearch Hooks/src/index.tsx
@@ -1,5 +1,6 @@
-import ReactDOM from 'react-dom';
+import React from 'react';
+import { createRoot } from 'react-dom/client';
import { App } from './App';
-ReactDOM.render(, document.getElementById('root'));
+createRoot(document.getElementById('root')!).render();
diff --git a/src/templates/React InstantSearch/package.json b/src/templates/React InstantSearch/package.json
index 46474d8c2..3c0bfad57 100644
--- a/src/templates/React InstantSearch/package.json
+++ b/src/templates/React InstantSearch/package.json
@@ -10,8 +10,8 @@
},
"dependencies": {
"algoliasearch": "4",
- "react": "16.12.0",
- "react-dom": "16.12.0",
+ "react": "18.1.0",
+ "react-dom": "18.1.0",
"react-instantsearch-dom": "{{libraryVersion}}",
"react-scripts": "2.1.1"
},
diff --git a/src/templates/React InstantSearch/src/index.js b/src/templates/React InstantSearch/src/index.js
index 395b74997..21b72f9ca 100644
--- a/src/templates/React InstantSearch/src/index.js
+++ b/src/templates/React InstantSearch/src/index.js
@@ -1,6 +1,6 @@
import React from 'react';
-import ReactDOM from 'react-dom';
+import { createRoot } from 'react-dom/client';
import './index.css';
import App from './App';
-ReactDOM.render(, document.getElementById('root'));
+createRoot(document.getElementById('root')).render();