@pavlos-samaras/react-cli 2.0.2 → 2.1.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (91) hide show
  1. package/README.md +68 -20
  2. package/dist/commands/generate/utils/generateComponent.d.ts.map +1 -1
  3. package/dist/commands/generate/utils/generateComponent.js +7 -6
  4. package/dist/commands/generate/utils/generateComponent.js.map +1 -1
  5. package/dist/commands/generate/utils/generateHook.d.ts.map +1 -1
  6. package/dist/commands/generate/utils/generateHook.js +3 -2
  7. package/dist/commands/generate/utils/generateHook.js.map +1 -1
  8. package/dist/commands/generate/utils/runGenerateComponent.js +1 -1
  9. package/dist/commands/generate/utils/runGenerateComponent.js.map +1 -1
  10. package/dist/commands/generate/utils/runGenerateHook.js +1 -1
  11. package/dist/commands/generate/utils/runGenerateHook.js.map +1 -1
  12. package/dist/commands/new/new.constants.d.ts +2 -0
  13. package/dist/commands/new/new.constants.d.ts.map +1 -1
  14. package/dist/commands/new/new.constants.js +2 -0
  15. package/dist/commands/new/new.constants.js.map +1 -1
  16. package/dist/commands/new/new.d.ts.map +1 -1
  17. package/dist/commands/new/new.js +16 -27
  18. package/dist/commands/new/new.js.map +1 -1
  19. package/dist/commands/new/new.types.d.ts +7 -0
  20. package/dist/commands/new/new.types.d.ts.map +1 -0
  21. package/dist/commands/new/new.types.js +2 -0
  22. package/dist/commands/new/new.types.js.map +1 -0
  23. package/dist/commands/new/utils/general.d.ts +3 -0
  24. package/dist/commands/new/utils/general.d.ts.map +1 -0
  25. package/dist/commands/new/utils/general.js +6 -0
  26. package/dist/commands/new/utils/general.js.map +1 -0
  27. package/dist/commands/new/utils/runCommand.d.ts +2 -0
  28. package/dist/commands/new/utils/runCommand.d.ts.map +1 -0
  29. package/dist/commands/new/utils/runCommand.js +7 -0
  30. package/dist/commands/new/utils/runCommand.js.map +1 -0
  31. package/dist/commands/new/utils/runCreateVite.d.ts +2 -0
  32. package/dist/commands/new/utils/runCreateVite.d.ts.map +1 -0
  33. package/dist/commands/new/utils/runCreateVite.js +32 -0
  34. package/dist/commands/new/utils/runCreateVite.js.map +1 -0
  35. package/dist/commands/new/utils/runCustomTemplate.d.ts +3 -0
  36. package/dist/commands/new/utils/runCustomTemplate.d.ts.map +1 -0
  37. package/dist/commands/new/utils/runCustomTemplate.js +25 -0
  38. package/dist/commands/new/utils/runCustomTemplate.js.map +1 -0
  39. package/dist/utils/general.d.ts +4 -0
  40. package/dist/utils/general.d.ts.map +1 -0
  41. package/dist/utils/general.js +3 -0
  42. package/dist/utils/general.js.map +1 -0
  43. package/package.json +3 -2
  44. package/templates/component.tpl +9 -0
  45. package/templates/hook.tpl +3 -0
  46. package/templates/react/README.md +12 -0
  47. package/templates/react/eslint.config.js +29 -0
  48. package/templates/react/index.html +13 -0
  49. package/templates/react/jsconfig.json +13 -0
  50. package/templates/react/package.json +30 -0
  51. package/templates/react/public/favicon.svg +1 -0
  52. package/templates/react/src/app/App.jsx +12 -0
  53. package/templates/react/src/app/providers.jsx +13 -0
  54. package/templates/react/src/app/routes.jsx +19 -0
  55. package/templates/react/src/config/queryClient.config.js +12 -0
  56. package/templates/react/src/lib/queryClient.jsx +6 -0
  57. package/templates/react/src/main.jsx +13 -0
  58. package/templates/react/src/pages/home/Home.jsx +11 -0
  59. package/templates/react/src/pages/home/Home.module.scss +0 -0
  60. package/templates/react/vite.config.js +18 -0
  61. package/templates/react-ts/README.md +75 -0
  62. package/templates/react-ts/eslint.config.js +22 -0
  63. package/templates/react-ts/index.html +13 -0
  64. package/templates/react-ts/package-lock.json +3221 -0
  65. package/templates/react-ts/package.json +33 -0
  66. package/templates/react-ts/public/favicon.svg +1 -0
  67. package/templates/react-ts/src/app/App.tsx +12 -0
  68. package/templates/react-ts/src/app/providers.tsx +16 -0
  69. package/templates/react-ts/src/app/routes.tsx +19 -0
  70. package/templates/react-ts/src/config/queryClient.config.ts +14 -0
  71. package/templates/react-ts/src/lib/queryClient.tsx +6 -0
  72. package/templates/react-ts/src/main.tsx +13 -0
  73. package/templates/react-ts/src/pages/home/Home.module.scss +0 -0
  74. package/templates/react-ts/src/pages/home/Home.tsx +11 -0
  75. package/templates/react-ts/tsconfig.app.json +29 -0
  76. package/templates/react-ts/tsconfig.json +7 -0
  77. package/templates/react-ts/tsconfig.node.json +23 -0
  78. package/templates/react-ts/vite.config.ts +18 -0
  79. package/templates/stylesheet.tpl +3 -0
  80. package/dist/templates/component.d.ts +0 -3
  81. package/dist/templates/component.d.ts.map +0 -1
  82. package/dist/templates/component.js +0 -11
  83. package/dist/templates/component.js.map +0 -1
  84. package/dist/templates/hook.d.ts +0 -3
  85. package/dist/templates/hook.d.ts.map +0 -1
  86. package/dist/templates/hook.js +0 -5
  87. package/dist/templates/hook.js.map +0 -1
  88. package/dist/templates/stylesheet.d.ts +0 -3
  89. package/dist/templates/stylesheet.d.ts.map +0 -1
  90. package/dist/templates/stylesheet.js +0 -7
  91. package/dist/templates/stylesheet.js.map +0 -1
package/templates/react/index.html ADDED
@@ -0,0 +1,13 @@
1
+ <!doctype html>
2
+ <html lang="en">
3
+ <head>
4
+ <meta charset="UTF-8" />
5
+ <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
6
+ <meta name="viewport" content="width=device-width, initial-scale=1.0" />
7
+ <title>my-app</title>
8
+ </head>
9
+ <body>
10
+ <div id="root"></div>
11
+ <script type="module" src="/src/main.jsx"></script>
12
+ </body>
13
+ </html>
package/templates/react/jsconfig.json ADDED
@@ -0,0 +1,13 @@
1
+ {
2
+ "compilerOptions": {
3
+ "target": "es2023",
4
+ "module": "esnext",
5
+ "moduleResolution": "bundler",
6
+ "jsx": "react-jsx",
7
+ "checkJs": false,
8
+ "paths": {
9
+ "@/*": ["./src/*"]
10
+ }
11
+ },
12
+ "include": ["src"]
13
+ }
package/templates/react/package.json ADDED
@@ -0,0 +1,30 @@
1
+ {
2
+ "name": "my-app",
3
+ "private": true,
4
+ "version": "0.0.0",
5
+ "type": "module",
6
+ "scripts": {
7
+ "dev": "vite",
8
+ "build": "vite build",
9
+ "lint": "eslint .",
10
+ "preview": "vite preview"
11
+ },
12
+ "dependencies": {
13
+ "@tanstack/react-query": "^5.106.1",
14
+ "react": "^19.3.1",
15
+ "react-dom": "^19.3.1",
16
+ "react-router": "^8.5.1",
17
+ "sass": "^1.107.1"
18
+ },
19
+ "devDependencies": {
20
+ "@eslint/js": "^10.0.1",
21
+ "@types/react": "^19.3.0",
22
+ "@types/react-dom": "^19.3.0",
23
+ "@vitejs/plugin-react": "^6.1.2",
24
+ "eslint": "^10.14.0",
25
+ "eslint-plugin-react-hooks": "^7.1.1",
26
+ "eslint-plugin-react-refresh": "^0.5.7",
27
+ "globals": "^17.13.0",
28
+ "vite": "^8.3.6"
29
+ }
30
+ }
package/templates/react/public/favicon.svg ADDED
@@ -0,0 +1 @@
1
+ <svg xmlns="http://www.w3.org/2000/svg" width="48" height="46" fill="none" viewBox="0 0 48 46"><path fill="#863bff" d="M25.946 44.938c-.664.845-2.021.375-2.021-.698V33.937a2.26 2.26 0 0 0-2.262-2.262H10.287c-.92 0-1.456-1.04-.92-1.788l7.48-10.471c1.07-1.497 0-3.578-1.842-3.578H1.237c-.92 0-1.456-1.04-.92-1.788L10.013.474c.214-.297.556-.474.92-.474h28.894c.92 0 1.456 1.04.92 1.788l-7.48 10.471c-1.07 1.498 0 3.579 1.842 3.579h11.377c.943 0 1.473 1.088.89 1.83L25.947 44.94z" style="fill:#863bff;fill:color(display-p3 .5252 .23 1);fill-opacity:1"/><mask id="a" width="48" height="46" x="0" y="0" maskUnits="userSpaceOnUse" style="mask-type:alpha"><path fill="#000" d="M25.842 44.938c-.664.844-2.021.375-2.021-.698V33.937a2.26 2.26 0 0 0-2.262-2.262H10.183c-.92 0-1.456-1.04-.92-1.788l7.48-10.471c1.07-1.498 0-3.579-1.842-3.579H1.133c-.92 0-1.456-1.04-.92-1.787L9.91.473c.214-.297.556-.474.92-.474h28.894c.92 0 1.456 1.04.92 1.788l-7.48 10.471c-1.07 1.498 0 3.578 1.842 3.578h11.377c.943 0 1.473 1.088.89 1.832L25.843 44.94z" style="fill:#000;fill-opacity:1"/></mask><g mask="url(#a)"><g filter="url(#b)"><ellipse cx="5.508" cy="14.704" fill="#ede6ff" rx="5.508" ry="14.704" style="fill:#ede6ff;fill:color(display-p3 .9275 .9033 1);fill-opacity:1" transform="matrix(.00324 1 1 -.00324 -4.47 31.516)"/></g><g filter="url(#c)"><ellipse cx="10.399" cy="29.851" fill="#ede6ff" rx="10.399" ry="29.851" style="fill:#ede6ff;fill:color(display-p3 .9275 .9033 1);fill-opacity:1" transform="matrix(.00324 1 1 -.00324 -39.328 7.883)"/></g><g filter="url(#d)"><ellipse cx="5.508" cy="30.487" fill="#7e14ff" rx="5.508" ry="30.487" style="fill:#7e14ff;fill:color(display-p3 .4922 .0767 1);fill-opacity:1" transform="rotate(89.814 -25.913 -14.639)scale(1 -1)"/></g><g filter="url(#e)"><ellipse cx="5.508" cy="30.599" fill="#7e14ff" rx="5.508" ry="30.599" style="fill:#7e14ff;fill:color(display-p3 .4922 .0767 1);fill-opacity:1" transform="rotate(89.814 -32.644 -3.334)scale(1 -1)"/></g><g filter="url(#f)"><ellipse cx="5.508" cy="30.599" fill="#7e14ff" rx="5.508" ry="30.599" style="fill:#7e14ff;fill:color(display-p3 .4922 .0767 1);fill-opacity:1" transform="matrix(.00324 1 1 -.00324 -34.34 30.47)"/></g><g filter="url(#g)"><ellipse cx="14.072" cy="22.078" fill="#ede6ff" rx="14.072" ry="22.078" style="fill:#ede6ff;fill:color(display-p3 .9275 .9033 1);fill-opacity:1" transform="rotate(93.35 24.506 48.493)scale(-1 1)"/></g><g filter="url(#h)"><ellipse cx="3.47" cy="21.501" fill="#7e14ff" rx="3.47" ry="21.501" style="fill:#7e14ff;fill:color(display-p3 .4922 .0767 1);fill-opacity:1" transform="rotate(89.009 28.708 47.59)scale(-1 1)"/></g><g filter="url(#i)"><ellipse cx="3.47" cy="21.501" fill="#7e14ff" rx="3.47" ry="21.501" style="fill:#7e14ff;fill:color(display-p3 .4922 .0767 1);fill-opacity:1" transform="rotate(89.009 28.708 47.59)scale(-1 1)"/></g><g filter="url(#j)"><ellipse cx=".387" cy="8.972" fill="#7e14ff" rx="4.407" ry="29.108" style="fill:#7e14ff;fill:color(display-p3 .4922 .0767 1);fill-opacity:1" transform="rotate(39.51 .387 8.972)"/></g><g filter="url(#k)"><ellipse cx="47.523" cy="-6.092" fill="#7e14ff" rx="4.407" ry="29.108" style="fill:#7e14ff;fill:color(display-p3 .4922 .0767 1);fill-opacity:1" transform="rotate(37.892 47.523 -6.092)"/></g><g filter="url(#l)"><ellipse cx="41.412" cy="6.333" fill="#47bfff" rx="5.971" ry="9.665" style="fill:#47bfff;fill:color(display-p3 .2799 .748 1);fill-opacity:1" transform="rotate(37.892 41.412 6.333)"/></g><g filter="url(#m)"><ellipse cx="-1.879" cy="38.332" fill="#7e14ff" rx="4.407" ry="29.108" style="fill:#7e14ff;fill:color(display-p3 .4922 .0767 1);fill-opacity:1" transform="rotate(37.892 -1.88 38.332)"/></g><g filter="url(#n)"><ellipse cx="-1.879" cy="38.332" fill="#7e14ff" rx="4.407" ry="29.108" style="fill:#7e14ff;fill:color(display-p3 .4922 .0767 1);fill-opacity:1" transform="rotate(37.892 -1.88 38.332)"/></g><g filter="url(#o)"><ellipse cx="35.651" cy="29.907" fill="#7e14ff" rx="4.407" ry="29.108" style="fill:#7e14ff;fill:color(display-p3 .4922 .0767 1);fill-opacity:1" transform="rotate(37.892 35.651 29.907)"/></g><g filter="url(#p)"><ellipse cx="38.418" cy="32.4" fill="#47bfff" rx="5.971" ry="15.297" style="fill:#47bfff;fill:color(display-p3 .2799 .748 1);fill-opacity:1" transform="rotate(37.892 38.418 32.4)"/></g></g><defs><filter id="b" width="60.045" height="41.654" x="-19.77" y="16.149" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feBlend in="SourceGraphic" in2="BackgroundImageFix" result="shape"/><feGaussianBlur result="effect1_foregroundBlur_2002_17158" stdDeviation="7.659"/></filter><filter id="c" width="90.34" height="51.437" x="-54.613" y="-7.533" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feBlend in="SourceGraphic" in2="BackgroundImageFix" result="shape"/><feGaussianBlur result="effect1_foregroundBlur_2002_17158" stdDeviation="7.659"/></filter><filter id="d" width="79.355" height="29.4" x="-49.64" y="2.03" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feBlend in="SourceGraphic" in2="BackgroundImageFix" result="shape"/><feGaussianBlur result="effect1_foregroundBlur_2002_17158" stdDeviation="4.596"/></filter><filter id="e" width="79.579" height="29.4" x="-45.045" y="20.029" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feBlend in="SourceGraphic" in2="BackgroundImageFix" result="shape"/><feGaussianBlur result="effect1_foregroundBlur_2002_17158" stdDeviation="4.596"/></filter><filter id="f" width="79.579" height="29.4" x="-43.513" y="21.178" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feBlend in="SourceGraphic" in2="BackgroundImageFix" result="shape"/><feGaussianBlur result="effect1_foregroundBlur_2002_17158" stdDeviation="4.596"/></filter><filter id="g" width="74.749" height="58.852" x="15.756" y="-17.901" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feBlend in="SourceGraphic" in2="BackgroundImageFix" result="shape"/><feGaussianBlur result="effect1_foregroundBlur_2002_17158" stdDeviation="7.659"/></filter><filter id="h" width="61.377" height="25.362" x="23.548" y="2.284" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feBlend in="SourceGraphic" in2="BackgroundImageFix" result="shape"/><feGaussianBlur result="effect1_foregroundBlur_2002_17158" stdDeviation="4.596"/></filter><filter id="i" width="61.377" height="25.362" x="23.548" y="2.284" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feBlend in="SourceGraphic" in2="BackgroundImageFix" result="shape"/><feGaussianBlur result="effect1_foregroundBlur_2002_17158" stdDeviation="4.596"/></filter><filter id="j" width="56.045" height="63.649" x="-27.636" y="-22.853" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feBlend in="SourceGraphic" in2="BackgroundImageFix" result="shape"/><feGaussianBlur result="effect1_foregroundBlur_2002_17158" stdDeviation="4.596"/></filter><filter id="k" width="54.814" height="64.646" x="20.116" y="-38.415" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feBlend in="SourceGraphic" in2="BackgroundImageFix" result="shape"/><feGaussianBlur result="effect1_foregroundBlur_2002_17158" stdDeviation="4.596"/></filter><filter id="l" width="33.541" height="35.313" x="24.641" y="-11.323" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feBlend in="SourceGraphic" in2="BackgroundImageFix" result="shape"/><feGaussianBlur result="effect1_foregroundBlur_2002_17158" stdDeviation="4.596"/></filter><filter id="m" width="54.814" height="64.646" x="-29.286" y="6.009" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feBlend in="SourceGraphic" in2="BackgroundImageFix" result="shape"/><feGaussianBlur result="effect1_foregroundBlur_2002_17158" stdDeviation="4.596"/></filter><filter id="n" width="54.814" height="64.646" x="-29.286" y="6.009" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feBlend in="SourceGraphic" in2="BackgroundImageFix" result="shape"/><feGaussianBlur result="effect1_foregroundBlur_2002_17158" stdDeviation="4.596"/></filter><filter id="o" width="54.814" height="64.646" x="8.244" y="-2.416" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feBlend in="SourceGraphic" in2="BackgroundImageFix" result="shape"/><feGaussianBlur result="effect1_foregroundBlur_2002_17158" stdDeviation="4.596"/></filter><filter id="p" width="39.409" height="43.623" x="18.713" y="10.588" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feBlend in="SourceGraphic" in2="BackgroundImageFix" result="shape"/><feGaussianBlur result="effect1_foregroundBlur_2002_17158" stdDeviation="4.596"/></filter></defs></svg>
package/templates/react/src/app/App.jsx ADDED
@@ -0,0 +1,12 @@
1
+ import Providers from "./providers";
2
+ import AppRoutes from "./routes";
3
+
4
+ const App = () => {
5
+ return (
6
+ <Providers>
7
+ <AppRoutes />
8
+ </Providers>
9
+ );
10
+ };
11
+
12
+ export default App;
package/templates/react/src/app/providers.jsx ADDED
@@ -0,0 +1,13 @@
1
+ import { BrowserRouter } from "react-router";
2
+ import { QueryClientProvider } from "@tanstack/react-query";
3
+ import queryClient from "@/lib/queryClient";
4
+
5
+ const Providers = ({ children }) => {
6
+ return (
7
+ <QueryClientProvider client={queryClient}>
8
+ <BrowserRouter>{children}</BrowserRouter>
9
+ </QueryClientProvider>
10
+ );
11
+ };
12
+
13
+ export default Providers;
package/templates/react/src/app/routes.jsx ADDED
@@ -0,0 +1,19 @@
1
+ import { Suspense, lazy } from "react";
2
+ import { Routes, Route } from "react-router";
3
+
4
+ const HomePage = lazy(() => import("@/pages/home/Home"));
5
+
6
+ const AppRoutes = () => {
7
+ return (
8
+ <Suspense fallback={<div>Loading...</div>}>
9
+ <Routes>
10
+ <Route path="/" element={<HomePage />} />
11
+
12
+ {/* Fallback route, must be last */}
13
+ <Route path="*" element={<div>404 Page Not Found</div>} />
14
+ </Routes>
15
+ </Suspense>
16
+ );
17
+ };
18
+
19
+ export default AppRoutes;
package/templates/react/src/config/queryClient.config.js ADDED
@@ -0,0 +1,12 @@
1
+ const STALE_TIME_MINS = 5;
2
+ const STALE_TIME_MILLISECONDS = STALE_TIME_MINS * 60 * 1000;
3
+
4
+ export const queryClientConfig = {
5
+ defaultOptions: {
6
+ queries: {
7
+ refetchOnWindowFocus: false,
8
+ retry: 1,
9
+ staleTime: STALE_TIME_MILLISECONDS,
10
+ },
11
+ },
12
+ };
package/templates/react/src/lib/queryClient.jsx ADDED
@@ -0,0 +1,6 @@
1
+ import { QueryClient } from "@tanstack/react-query";
2
+ import { queryClientConfig } from "../config/queryClient.config";
3
+
4
+ const queryClient = new QueryClient(queryClientConfig);
5
+
6
+ export default queryClient;
package/templates/react/src/main.jsx ADDED
@@ -0,0 +1,13 @@
1
+ import { StrictMode } from "react";
2
+ import { createRoot } from "react-dom/client";
3
+ import App from "./app/App.jsx";
4
+
5
+ const rootEl = document.getElementById("root");
6
+ if (!rootEl) throw new Error("root element wasn't found");
7
+ const root = createRoot(rootEl);
8
+
9
+ root.render(
10
+ <StrictMode>
11
+ <App />
12
+ </StrictMode>,
13
+ );
package/templates/react/src/pages/home/Home.jsx ADDED
@@ -0,0 +1,11 @@
1
+ import styles from "./Home.module.scss";
2
+
3
+ const HomePage = () => {
4
+ return (
5
+ <div className={styles.home}>
6
+ <h1>Home Page</h1>
7
+ </div>
8
+ );
9
+ };
10
+
11
+ export default HomePage;
package/templates/react/vite.config.js ADDED
@@ -0,0 +1,18 @@
1
+ import react from "@vitejs/plugin-react";
2
+ import path from "path";
3
+ import { defineConfig } from "vite";
4
+
5
+ // https://vite.dev/config/
6
+ export default defineConfig({
7
+ plugins: [react()],
8
+ resolve: {
9
+ alias: {
10
+ "@": path.resolve(import.meta.dirname, "src"),
11
+ },
12
+ },
13
+ css: {
14
+ modules: {
15
+ localsConvention: "camelCase",
16
+ },
17
+ },
18
+ });
package/templates/react-ts/README.md ADDED
@@ -0,0 +1,75 @@
1
+ # React + TypeScript + Vite
2
+
3
+ This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.
4
+
5
+ Currently, two official plugins are available:
6
+
7
+ - [@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react) uses [Oxc](https://oxc.rs)
8
+ - [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react-swc) uses [SWC](https://swc.rs/)
9
+
10
+ ## React Compiler
11
+
12
+ The React Compiler is not enabled on this template because of its impact on dev & build performances. To add it, see [this documentation](https://react.dev/learn/react-compiler/installation).
13
+
14
+ ## Expanding the ESLint configuration
15
+
16
+ If you are developing a production application, we recommend updating the configuration to enable type-aware lint rules:
17
+
18
+ ```js
19
+ export default defineConfig([
20
+ globalIgnores(['dist']),
21
+ {
22
+ files: ['**/*.{ts,tsx}'],
23
+ extends: [
24
+ // Other configs...
25
+
26
+ // Remove tseslint.configs.recommended and replace with this
27
+ tseslint.configs.recommendedTypeChecked,
28
+ // Alternatively, use this for stricter rules
29
+ tseslint.configs.strictTypeChecked,
30
+ // Optionally, add this for stylistic rules
31
+ tseslint.configs.stylisticTypeChecked,
32
+
33
+ // Other configs...
34
+ ],
35
+ languageOptions: {
36
+ parserOptions: {
37
+ project: ['./tsconfig.node.json', './tsconfig.app.json'],
38
+ tsconfigRootDir: import.meta.dirname,
39
+ },
40
+ // other options...
41
+ },
42
+ },
43
+ ])
44
+
45
+ ```
46
+
47
+ You can also install [eslint-plugin-react-x](https://npmx.dev/package/eslint-plugin-react-x) and [eslint-plugin-react-dom](https://npmx.dev/package/eslint-plugin-react-dom) for React-specific lint rules:
48
+
49
+ ```js
50
+ // eslint.config.js
51
+ import reactX from 'eslint-plugin-react-x'
52
+ import reactDom from 'eslint-plugin-react-dom'
53
+
54
+ export default defineConfig([
55
+ globalIgnores(['dist']),
56
+ {
57
+ files: ['**/*.{ts,tsx}'],
58
+ extends: [
59
+ // Other configs...
60
+ // Enable lint rules for React
61
+ reactX.configs['recommended-typescript'],
62
+ // Enable lint rules for React DOM
63
+ reactDom.configs.recommended,
64
+ ],
65
+ languageOptions: {
66
+ parserOptions: {
67
+ project: ['./tsconfig.node.json', './tsconfig.app.json'],
68
+ tsconfigRootDir: import.meta.dirname,
69
+ },
70
+ // other options...
71
+ },
72
+ },
73
+ ])
74
+
75
+ ```
package/templates/react-ts/eslint.config.js ADDED
@@ -0,0 +1,22 @@
1
+ import js from '@eslint/js'
2
+ import globals from 'globals'
3
+ import reactHooks from 'eslint-plugin-react-hooks'
4
+ import reactRefresh from 'eslint-plugin-react-refresh'
5
+ import tseslint from 'typescript-eslint'
6
+ import { defineConfig, globalIgnores } from 'eslint/config'
7
+
8
+ export default defineConfig([
9
+ globalIgnores(['dist']),
10
+ {
11
+ files: ['**/*.{ts,tsx}'],
12
+ extends: [
13
+ js.configs.recommended,
14
+ tseslint.configs.recommended,
15
+ reactHooks.configs.flat.recommended,
16
+ reactRefresh.configs.vite,
17
+ ],
18
+ languageOptions: {
19
+ globals: globals.browser,
20
+ },
21
+ },
22
+ ])
package/templates/react-ts/index.html ADDED
@@ -0,0 +1,13 @@
1
+ <!doctype html>
2
+ <html lang="en">
3
+ <head>
4
+ <meta charset="UTF-8" />
5
+ <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
6
+ <meta name="viewport" content="width=device-width, initial-scale=1.0" />
7
+ <title>my-app</title>
8
+ </head>
9
+ <body>
10
+ <div id="root"></div>
11
+ <script type="module" src="/src/main.tsx"></script>
12
+ </body>
13
+ </html>