create-application-template 2.3.3 → 2.4.1-beta.0

package/.babelrc

@@ -14,11 +14,14 @@
       "@babel/plugin-transform-runtime",
       {
         "regenerator": true
-      },
-      "react-refresh/babel"
-    ]
+      }
+    ],
+    "babel-plugin-react-compiler"
   ],
   "env": {
+    "development": {
+      "plugins": ["react-refresh/babel"]
+    },
     "test": {
       // to mock webpack's require.context in jest
       "plugins": ["transform-require-context"]

package/README.md

@@ -14,7 +14,11 @@ See the template running live [here](https://www.createapplicationtemplate.com/)
 ## installation
 first install globally  
 ```
-npm install -g create-application-template
+npm install -g create-application-template@latest
+```
+_or_
+```
+npm install -g create-application-template@beta
 ```
 
 then create your project  
@@ -22,6 +26,13 @@ then create your project
 npx create-application-template --name={my-project}
 ```
 
+## new on BETA version 🚀
+beta upgrades to React 19 with [React Compiler](https://react.dev/learn/react-compiler/introduction) opt-in
+
+this version takes advantage of the React Compiler's automatic optimization
+
+it also includes the React Compiler's ESLint integretion
+
 ## usage
 webpack is used for code bundling and the development server  
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "create-application-template",
-  "version": "2.3.3",
+  "version": "2.4.1-beta.0",
   "description": "provides a configured application template for you to build upon",
   "main": "index.js",
   "bin": {
@@ -50,8 +50,8 @@
     "dotenv-flow": "4.1.0",
     "husky": "9.1.7",
     "polished": "4.3.1",
-    "react": "18.3.1",
-    "react-dom": "18.3.1",
+    "react": "19.1.1",
+    "react-dom": "19.1.1",
     "styled-components": "6.1.15",
     "yargs": "17.7.2"
   },
@@ -68,14 +68,15 @@
     "@testing-library/user-event": "14.6.1",
     "@types/jest": "29.5.14",
     "@types/node": "20.12.12",
-    "@types/react": "18.3.2",
-    "@types/react-dom": "18.3.0",
+    "@types/react": "19.1.13",
+    "@types/react-dom": "19.1.9",
     "@types/styled-components": "5.1.34",
     "@types/webpack-env": "1.18.8",
     "@typescript-eslint/eslint-plugin": "6.5.0",
     "@typescript-eslint/parser": "6.5.0",
     "babel-jest": "29.7.0",
     "babel-loader": "10.0.0",
+    "babel-plugin-react-compiler": "19.1.0-rc.3",
     "babel-plugin-styled-components": "2.1.4",
     "babel-plugin-transform-require-context": "0.1.1",
     "case-sensitive-paths-webpack-plugin": "2.4.0",
@@ -90,7 +91,7 @@
     "eslint-plugin-import": "2.31.0",
     "eslint-plugin-jsx-a11y": "6.10.2",
     "eslint-plugin-react": "7.37.4",
-    "eslint-plugin-react-hooks": "5.2.0",
+    "eslint-plugin-react-hooks": "6.0.0-rc.2",
     "html-webpack-plugin": "5.6.3",
     "identity-obj-proxy": "3.0.0",
     "jest": "29.7.0",

package/src/components/App.tsx

@@ -9,19 +9,19 @@ import logo from '../assets/logo.svg'
 import { Counter } from './Counter'
 import { Typewriter } from './Typewriter'
 
-export const App: FC = () => {
-  const TemplateLink: FC = () => {
-    return (
-      <app.StyledLink
-        href='https://www.npmjs.com/package/create-application-template'
-        rel='noreferrer'
-        target='_blank'
-      >
-        here
-      </app.StyledLink>
-    )
-  }
+const TemplateLink: FC = () => {
+  return (
+    <app.StyledLink
+      href='https://www.npmjs.com/package/create-application-template'
+      rel='noreferrer'
+      target='_blank'
+    >
+      here
+    </app.StyledLink>
+  )
+}
 
+export const App: FC = () => {
   return (
     <ThemeProvider theme={theme}>
       <GlobalStyles />

package/src/components/Typewriter.tsx

@@ -28,8 +28,12 @@ export const Typewriter: FC<
   // B) this triggers the typing animation effect to restart with the new text
 
   useEffect(() => {  // A
-    setDisplayedText('')
-    setCurrentIndex(0)
+    const timeoutIdInit = setTimeout(() => {
+      setDisplayedText('')
+      setCurrentIndex(0)
+    }, 0)
+
+    return () => clearTimeout(timeoutIdInit)
   }, [text])
 
   useEffect(() => {  // B