From 0a485def21ff6dc0946e5f7b45bb2cb860281b95 Mon Sep 17 00:00:00 2001
From: Eduardo Santos de Brito <edu.santos.brito@gmail.com>
Date: Sat, 26 Jun 2021 23:00:05 -0300
Subject: [PATCH] Migrating the boilerplate to the new JSX Transform and minor
 changes in package.json and webpack. (#298)

* fix: react v17 new JSX Transform

* fix: minors package.json and webpack problems

* chore: include changeset
---
 .changeset/spicy-kiwis-learn.md                            | 5 +++++
 .../src/common-templates/babel.config.json.ejs             | 7 ++++++-
 .../src/react/templates/react.package.json                 | 4 ++--
 .../src/react/templates/src/root.component.js              | 2 --
 .../src/react/templates/src/root.component.test.js         | 1 -
 .../src/react/templates/webpack.config.js                  | 2 +-
 .../src/root-config/templates/root-config.package.json     | 1 +
 7 files changed, 15 insertions(+), 7 deletions(-)
 create mode 100644 .changeset/spicy-kiwis-learn.md

diff --git a/.changeset/spicy-kiwis-learn.md b/.changeset/spicy-kiwis-learn.md
new file mode 100644
index 00000000..a0b69067
--- /dev/null
+++ b/.changeset/spicy-kiwis-learn.md
@@ -0,0 +1,5 @@
+---
+"generator-single-spa": minor
+---
+
+Minor changes in package.json and webpack. Migrate to the new JSX Transform with React 17
diff --git a/packages/generator-single-spa/src/common-templates/babel.config.json.ejs b/packages/generator-single-spa/src/common-templates/babel.config.json.ejs
index b3132949..e40b8c0c 100644
--- a/packages/generator-single-spa/src/common-templates/babel.config.json.ejs
+++ b/packages/generator-single-spa/src/common-templates/babel.config.json.ejs
@@ -1,7 +1,12 @@
 {
   "presets": [
     "@babel/preset-env",<% if (framework === 'react') { %>
-    "@babel/preset-react",<% } if (typescript) { %>
+    [
+      "@babel/preset-react", 
+      {
+        runtime: "automatic"
+      }
+    ],<% } if (typescript) { %>
     "@babel/preset-typescript"<% } %>
   ],
   "plugins": [
diff --git a/packages/generator-single-spa/src/react/templates/react.package.json b/packages/generator-single-spa/src/react/templates/react.package.json
index b0bafe84..609e153a 100644
--- a/packages/generator-single-spa/src/react/templates/react.package.json
+++ b/packages/generator-single-spa/src/react/templates/react.package.json
@@ -39,7 +39,6 @@
     "jest-cli": "^26.6.3",
     "prettier": "^2.2.1",
     "pretty-quick": "^3.1.0",
-    "single-spa-react": "^4.0.0",
     "webpack": "^5.8.0",
     "webpack-cli": "^4.2.0",
     "webpack-config-single-spa-react": "^2.0.0",
@@ -48,6 +47,7 @@
   },
   "dependencies": {
     "react": "^17.0.1",
-    "react-dom": "^17.0.1"
+    "react-dom": "^17.0.1",
+    "single-spa-react": "^4.0.0"
   }
 }
diff --git a/packages/generator-single-spa/src/react/templates/src/root.component.js b/packages/generator-single-spa/src/react/templates/src/root.component.js
index afb88d43..f9375f8b 100644
--- a/packages/generator-single-spa/src/react/templates/src/root.component.js
+++ b/packages/generator-single-spa/src/react/templates/src/root.component.js
@@ -1,5 +1,3 @@
-import React from "react";
-
 export default function Root(props) {
   return <section>{props.name} is mounted!</section>;
 }
diff --git a/packages/generator-single-spa/src/react/templates/src/root.component.test.js b/packages/generator-single-spa/src/react/templates/src/root.component.test.js
index 043f30e0..ef1e9ce9 100644
--- a/packages/generator-single-spa/src/react/templates/src/root.component.test.js
+++ b/packages/generator-single-spa/src/react/templates/src/root.component.test.js
@@ -1,4 +1,3 @@
-import React from "react";
 import { render } from "@testing-library/react";
 import Root from "./root.component";
 
diff --git a/packages/generator-single-spa/src/react/templates/webpack.config.js b/packages/generator-single-spa/src/react/templates/webpack.config.js
index 42ba1a55..226b8120 100644
--- a/packages/generator-single-spa/src/react/templates/webpack.config.js
+++ b/packages/generator-single-spa/src/react/templates/webpack.config.js
@@ -1,4 +1,4 @@
-const { merge }  = require("webpack-merge");
+const { merge } = require("webpack-merge");
 const singleSpaDefaults = require("webpack-config-single-spa-react<% if (typescript) { %>-ts<% } %>");
 
 module.exports = (webpackConfigEnv, argv) => {
diff --git a/packages/generator-single-spa/src/root-config/templates/root-config.package.json b/packages/generator-single-spa/src/root-config/templates/root-config.package.json
index e06f9697..1c9d020d 100644
--- a/packages/generator-single-spa/src/root-config/templates/root-config.package.json
+++ b/packages/generator-single-spa/src/root-config/templates/root-config.package.json
@@ -25,6 +25,7 @@
     "eslint-config-important-stuff": "^1.1.0",
     "eslint-config-prettier": "^7.0.0",
     "eslint-plugin-prettier": "^3.2.0",
+    "html-webpack-plugin": "^5.3.1",
     "husky": "^4.3.5",
     "jest": "^26.6.3",
     "jest-cli": "^26.6.3",