chore: added support for react 19 & updated test applications

package.json

@@ -1,7 +1,7 @@
 {
   "name": "react-flagpack",
   "description": "Gorgeous flag components for your React project.",
-  "version": "2.0.6",
+  "version": "2.0.7",
   "author": "Yummygum <info@yummygum.com> (https://yummygum.com)",
   "sideEffects": false,
   "repository": {
@@ -59,14 +59,14 @@
     "meow": "^13.2.0"
   },
   "devDependencies": {
-    "@babel/core": "^7.24.3",
-    "@babel/preset-react": "^7.24.1",
-    "@types/node": "^20.11.30",
-    "@types/react": "^18.2.66",
-    "@types/react-dom": "^18.2.22",
+    "@babel/core": "^7.26.10",
+    "@babel/preset-react": "^7.26.3",
+    "@types/node": "^22.15.3",
+    "@types/react": "^19.1.2",
+    "@types/react-dom": "^19.1.2",
     "@typescript-eslint/eslint-plugin": "^7.2.0",
     "@typescript-eslint/parser": "^7.2.0",
-    "@vitejs/plugin-react": "^4.2.1",
+    "@vitejs/plugin-react": "^4.4.1",
     "autoprefixer": "^9.5.1",
     "concurrently": "^8.2.2",
     "cross-env": "^7.0.3",
@@ -88,11 +88,11 @@
     "tslib": "^1.9.3",
     "tsx": "^4.7.1",
     "typescript": "^5.2.2",
-    "vite": "^5.2.0",
-    "vite-plugin-dts": "^3.8.1"
+    "vite": "^6.3.3",
+    "vite-plugin-dts": "^4.5.3"
   },
   "peerDependencies": {
-    "react": "^16.8.* || ^17.* || ^18.*"
+    "react": "^16.8.* || ^17.* || ^18.* || ^19.*"
   },
   "authors": [
     {

test-applications/create-react-app/package.json

@@ -6,8 +6,8 @@
     "@testing-library/jest-dom": "^5.17.0",
     "@testing-library/react": "^13.4.0",
     "@testing-library/user-event": "^13.5.0",
-    "react": "^18.2.0",
-    "react-dom": "^18.2.0",
+    "react": "^19.1.0",
+    "react-dom": "^19.1.0",
     "react-flagpack": "link:../../",
     "react-scripts": "5.0.1",
     "web-vitals": "^2.1.4"
@@ -39,4 +39,4 @@
     ]
   },
   "packageManager": "yarn@4.1.1"
-}
+}

test-applications/next-app-router/package.json

@@ -11,15 +11,15 @@
     "postinstall": "node ../../cli/flagpack.js --path ./public/flags"
   },
   "dependencies": {
-    "next": "14.1.4",
-    "react": "^18",
-    "react-dom": "^18",
+    "next": "15.3.1",
+    "react": "^19.1.0",
+    "react-dom": "^19.1.0",
     "react-flagpack": "link:../../"
   },
   "devDependencies": {
     "@types/node": "^20",
-    "@types/react": "^18",
-    "@types/react-dom": "^18",
+    "@types/react": "^19.1.2",
+    "@types/react-dom": "^19.1.2",
     "typescript": "^5"
   }
-}
+}

test-applications/next-app-router/src/app/page.tsx

@@ -1,5 +1,3 @@
-import Image from "next/image";
-import styles from "./page.module.css";
 import Flag from 'react-flagpack'
 import { Flags } from 'flagpack-core'
 import 'react-flagpack/dist/style.css'
@@ -512,8 +510,8 @@ export default function Home() {
     '074'
   ]
 
-  const sizes = ['s', 'm', 'l']
-  const gradient = ['top-down', 'real-circular', 'real-linear', '']
+  const sizes = ['s', 'm', 'l'] as const
+  const gradient = ['top-down', 'real-circular', 'real-linear', ''] as const
   const hasBorder = [true, false]
   const hasDropShadow = [true, false]
   const hasBorderRadius = [true, false]
@@ -523,34 +521,26 @@ export default function Home() {
       <header className="App-header">
         {flags.map((flag) => (
           <div key={flag} className="App-Flag">
-            {sizes.map((size) => (
-              <>
-                {gradient.map((gradient) => (
-                  <>
-                    {hasBorder.map((hasBorder) => (
-                      <>
-                        {hasDropShadow.map((hasDropShadow) => (
-                          <>
-                            {hasBorderRadius.map((hasBorderRadius) => (
-                              <>
-                                <Flag
-                                  code={flag}
-                                  size={size}
-                                  gradient={gradient}
-                                  hasBorder={hasBorder}
-                                  hasDropShadow={hasDropShadow}
-                                  hasBorderRadius={hasBorderRadius}
-                                />
-                              </>
-                            ))}
-                          </>
-                        ))}
-                      </>
-                    ))}
-                  </>
-                ))}
-              </>
-            ))}
+            {sizes.map((size) =>
+              gradient.map((gradient, gradientIndex) =>
+                hasBorder.map((hasBorder, borderIndex) =>
+                  hasDropShadow.map((hasDropShadow, shadowIndex) =>
+                    hasBorderRadius.map((hasBorderRadius, radiusIndex) => (
+                      <Flag
+                        key={`${flag}-${size}-${gradientIndex}-${borderIndex}-${shadowIndex}-${radiusIndex}`}
+                        code={flag}
+                        size={size}
+                        gradient={gradient}
+                        hasBorder={hasBorder}
+                        hasDropShadow={hasDropShadow}
+                        hasBorderRadius={hasBorderRadius}
+                      />
+                    ))
+                  )
+                )
+              )
+            )}
+
             <Flag code={flag} />
             <Flag code={flag} size="m" />
             <Flag code={flag} size="l" />

test-applications/next-app-router/tsconfig.json

@@ -1,6 +1,10 @@
 {
   "compilerOptions": {
-    "lib": ["dom", "dom.iterable", "esnext"],
+    "lib": [
+      "dom",
+      "dom.iterable",
+      "esnext"
+    ],
     "allowJs": true,
     "skipLibCheck": true,
     "strict": true,
@@ -18,9 +22,19 @@
       }
     ],
     "paths": {
-      "@/*": ["./src/*"]
-    }
+      "@/*": [
+        "./src/*"
+      ]
+    },
+    "target": "ES2017"
   },
-  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"],
-  "exclude": ["node_modules"]
+  "include": [
+    "next-env.d.ts",
+    "**/*.ts",
+    "**/*.tsx",
+    ".next/types/**/*.ts"
+  ],
+  "exclude": [
+    "node_modules"
+  ]
 }