From d9888ce6af89c7b5f22623b4db266efeae26df32 Mon Sep 17 00:00:00 2001
From: Tom <tomanagle@gmail.com>
Date: Mon, 27 Jun 2022 18:00:04 +1000
Subject: [PATCH] Chore/react 18 create root (#1489)

* chore: use createRoot for react-ts

* chore: use createRoot for react-js

* fix: quotes

* fix: remove semi

* chore: update react templates to use createRoot instead of ReactDOM.render

Co-authored-by: Lea Anthony <lea.anthony@gmail.com>
---
 .../assets/preact/frontend/src/main.jsx         | 17 +++++++++++++----
 .../assets/react-ts/frontend/src/main.tsx       | 15 +++++++++------
 .../generate/assets/react/frontend/src/main.jsx | 15 +++++++++------
 .../templates/react-ts/frontend/src/main.tsx    | 15 +++++++++------
 4 files changed, 40 insertions(+), 22 deletions(-)

diff --git a/v2/cmd/wails/internal/commands/initialise/templates/generate/assets/preact/frontend/src/main.jsx b/v2/cmd/wails/internal/commands/initialise/templates/generate/assets/preact/frontend/src/main.jsx
index 41787dab..5a7bfa9e 100644
--- a/v2/cmd/wails/internal/commands/initialise/templates/generate/assets/preact/frontend/src/main.jsx
+++ b/v2/cmd/wails/internal/commands/initialise/templates/generate/assets/preact/frontend/src/main.jsx
@@ -1,5 +1,14 @@
-import {render} from 'preact';
-import {App} from './app';
-import './style.css';
+import React from 'react'
+import { createRoot } from 'react-dom/client'
+import './style.css'
+import App from './App'
 
-render(<App/>, document.getElementById('app'));
+const container = document.getElementById('root')
+
+const root = createRoot(container)
+
+root.render(
+  <React.StrictMode>
+    <App />
+  </React.StrictMode>
+)
diff --git a/v2/cmd/wails/internal/commands/initialise/templates/generate/assets/react-ts/frontend/src/main.tsx b/v2/cmd/wails/internal/commands/initialise/templates/generate/assets/react-ts/frontend/src/main.tsx
index a6c27f6a..361c8d66 100644
--- a/v2/cmd/wails/internal/commands/initialise/templates/generate/assets/react-ts/frontend/src/main.tsx
+++ b/v2/cmd/wails/internal/commands/initialise/templates/generate/assets/react-ts/frontend/src/main.tsx
@@ -1,11 +1,14 @@
 import React from 'react'
-import ReactDOM from 'react-dom'
+import { createRoot } from 'react-dom/client'
 import './style.css'
 import App from './App'
 
-ReactDOM.render(
-    <React.StrictMode>
-        <App/>
-    </React.StrictMode>,
-    document.getElementById('root')
+const container = document.getElementById('root')
+
+const root = createRoot(container!)
+
+root.render(
+  <React.StrictMode>
+    <App />
+  </React.StrictMode>
 )
diff --git a/v2/cmd/wails/internal/commands/initialise/templates/generate/assets/react/frontend/src/main.jsx b/v2/cmd/wails/internal/commands/initialise/templates/generate/assets/react/frontend/src/main.jsx
index a6c27f6a..5a7bfa9e 100644
--- a/v2/cmd/wails/internal/commands/initialise/templates/generate/assets/react/frontend/src/main.jsx
+++ b/v2/cmd/wails/internal/commands/initialise/templates/generate/assets/react/frontend/src/main.jsx
@@ -1,11 +1,14 @@
 import React from 'react'
-import ReactDOM from 'react-dom'
+import { createRoot } from 'react-dom/client'
 import './style.css'
 import App from './App'
 
-ReactDOM.render(
-    <React.StrictMode>
-        <App/>
-    </React.StrictMode>,
-    document.getElementById('root')
+const container = document.getElementById('root')
+
+const root = createRoot(container)
+
+root.render(
+  <React.StrictMode>
+    <App />
+  </React.StrictMode>
 )
diff --git a/v2/cmd/wails/internal/commands/initialise/templates/templates/react-ts/frontend/src/main.tsx b/v2/cmd/wails/internal/commands/initialise/templates/templates/react-ts/frontend/src/main.tsx
index a6c27f6a..361c8d66 100644
--- a/v2/cmd/wails/internal/commands/initialise/templates/templates/react-ts/frontend/src/main.tsx
+++ b/v2/cmd/wails/internal/commands/initialise/templates/templates/react-ts/frontend/src/main.tsx
@@ -1,11 +1,14 @@
 import React from 'react'
-import ReactDOM from 'react-dom'
+import { createRoot } from 'react-dom/client'
 import './style.css'
 import App from './App'
 
-ReactDOM.render(
-    <React.StrictMode>
-        <App/>
-    </React.StrictMode>,
-    document.getElementById('root')
+const container = document.getElementById('root')
+
+const root = createRoot(container!)
+
+root.render(
+  <React.StrictMode>
+    <App />
+  </React.StrictMode>
 )