@pplancq/react-template 2.3.16 → 2.4.0

package/CHANGELOG.md

@@ -1,3 +1,25 @@
+## @pplancq/react-template [2.4.0](https://github.com/pplancq/dev-tools/compare/@pplancq/react-template@2.3.16...@pplancq/react-template@2.4.0) (2025-04-23)
+
+### Features
+
+* **react-template:** enhance Vite migration by adding public path configuration and build options ([4bfa14a](https://github.com/pplancq/dev-tools/commit/4bfa14a8f1765f02281742f2d3f189e74460b4e3))
+* **react-template:** improve plugin configuration and update ESLint settings ([a311045](https://github.com/pplancq/dev-tools/commit/a31104522edeeccd252a498348c9fb8d4df2d125))
+* **react-template:** migrate configuration files to ES module syntax and update related scripts ([b9d9bd0](https://github.com/pplancq/dev-tools/commit/b9d9bd04a42a024b276254772765b3ecfeda4415))
+* **react-template:** update file paths and remove obsolete configurations ([d48bbe0](https://github.com/pplancq/dev-tools/commit/d48bbe042c304bc8a708bd0d741613601d0ee9cf))
+* **react-template:** update package scripts for Vite integration and add mock environment support ([e534e40](https://github.com/pplancq/dev-tools/commit/e534e40e5dbcf2c14231b7e6d400b8591ecdffd2))
+
+### Bug Fixes
+
+* **deps:** update dependency react-router to ^7.5.1 ([ae0c0e5](https://github.com/pplancq/dev-tools/commit/ae0c0e579612faf1371644ce3a6d7fa40883993a))
+* **deps:** update react-query mono repo to ^5.74.4 ([8c56b6b](https://github.com/pplancq/dev-tools/commit/8c56b6be39c9e3e932b1a8d994dc676c5068efad))
+* **react-template:** update tsconfig to replace webpack config with vite ([68b87e2](https://github.com/pplancq/dev-tools/commit/68b87e2ce031f771efc0c0f087362242afc3ec73))
+
+
+### Dependencies
+
+* **@pplancq/eslint-config:** upgraded to 4.0.20
+* **@pplancq/webpack-config:** upgraded to 1.9.11
+
 ## @pplancq/react-template [2.3.16](https://github.com/pplancq/dev-tools/compare/@pplancq/react-template@2.3.15...@pplancq/react-template@2.3.16) (2025-04-14)
 
 ### Bug Fixes

package/commitlint.config.mjs

@@ -0,0 +1,3 @@
+export default {
+  extends: ['@pplancq/commitlint-config'],
+};

package/eslint.config.mjs

@@ -11,5 +11,12 @@ export default defineConfig({
         'import/no-extraneous-dependencies': 'off',
       },
     },
+    {
+      files: ['**/*.config.{js,cjs,mjs,ts,cts,mts}'],
+      rules: {
+        'import/no-default-export': 'off',
+        'import/no-extraneous-dependencies': 'off',
+      },
+    },
   ],
 });

package/{.lintstagedrc.js → lint-staged.config.mjs}

@@ -1,4 +1,4 @@
-module.exports = {
+export default {
   '*.{js,jsx,mjs,ts,tsx}': 'eslint --fix',
   '*.{ts,tsx}': 'tsc-files --noEmit',
   '*.{scss,css}': 'stylelint --fix',

package/package.json

@@ -1,14 +1,15 @@
 {
   "name": "@pplancq/react-template",
-  "version": "2.3.16",
+  "version": "2.4.0",
   "license": "MIT",
   "description": "react template",
   "author": "pplancq <paul.plancq@outlook.fr>",
   "repository": {
     "type": "git",
-    "url": "https://github.com/pplancq/dev-tools",
-    "directory": "packages/webpack-config"
+    "url": "git+https://github.com/pplancq/dev-tools.git",
+    "directory": "packages/react-template"
   },
+  "type": "module",
   "scripts": {
     "start": "webpack serve",
     "start:mock": "webpack serve --env FRONT_MOCK_ENABLE=true",
@@ -24,8 +25,8 @@
     "lint:prettier:fix": "prettier \"{mocks,public,src}/**/*.!(js|jsx|mjs|ts|tsx|scss|css)\" --write --ignore-unknown",
     "lint:tsc": "tsc --noEmit",
     "package:check": "npm exec --yes package-lock-utd@1.1.3",
-    "remove:demo": "node ./scripts/removeDemo.js",
-    "migrate:vite": "node ./scripts/migrateToVite.js",
+    "remove:demo": "node ./scripts/removeDemo.cjs",
+    "migrate:vite": "node ./scripts/migrateToVite.cjs",
     "_prepare": "husky",
     "_postinstall": "msw init"
   },
@@ -38,12 +39,12 @@
   ],
   "dependencies": {
     "@hookform/resolvers": "^5.0.1",
-    "@tanstack/react-query": "^5.72.2",
-    "@tanstack/react-query-devtools": "^5.72.2",
+    "@tanstack/react-query": "^5.74.4",
+    "@tanstack/react-query-devtools": "^5.74.4",
     "react": "^19.1.0",
     "react-dom": "^19.1.0",
     "react-hook-form": "^7.55.0",
-    "react-router": "^7.5.0",
+    "react-router": "^7.5.1",
     "yup": "^1.6.1"
   },
   "devDependencies": {
@@ -57,17 +58,17 @@
     "@testing-library/jest-dom": "^6.6.3",
     "@testing-library/react": "^16.3.0",
     "@testing-library/user-event": "^14.6.1",
-    "@types/react": "^19.1.0",
+    "@types/react": "^19.1.2",
     "@types/react-dom": "^19.1.2",
-    "@vitejs/plugin-react-swc": "^3.8.1",
+    "@vitejs/plugin-react-swc": "^3.9.0",
     "@vitest/coverage-v8": "^3.1.1",
     "concurrently": "^9.1.2",
     "eslint": "^9.24.0",
     "eslint-plugin-prettier": "^5.2.6",
     "husky": "^9.1.7",
-    "jsdom": "^26.0.0",
-    "lint-staged": "^15.5.0",
-    "msw": "^2.7.3",
+    "jsdom": "^26.1.0",
+    "lint-staged": "^15.5.1",
+    "msw": "^2.7.4",
     "prettier": "^3.5.3",
     "stylelint": "^16.18.0",
     "stylelint-prettier": "^5.0.3",

package/postcss.config.mjs

@@ -0,0 +1,5 @@
+import defaultConfig from '@pplancq/postcss-config';
+
+export default {
+  ...defaultConfig,
+};

package/prettier.config.mjs

@@ -0,0 +1,5 @@
+import defaultConfig from '@pplancq/prettier-config';
+
+export default {
+  ...defaultConfig,
+};

package/scripts/lint.js

@@ -1,5 +1,5 @@
 // eslint-disable-next-line import/no-extraneous-dependencies
-const concurrently = require('concurrently');
+import concurrently from 'concurrently';
 
 const { result } = concurrently(['npm:lint:eslint', 'npm:lint:tsc', 'npm:lint:stylelint', 'npm:lint:prettier'], {
   prefixColors: 'auto',

package/scripts/{migrateToVite.js → migrateToVite.cjs}

@@ -40,58 +40,104 @@ runCommand(
 writeFileSync(
   resolve(__dirname, '../vite.config.mts'),
   `import react from '@vitejs/plugin-react-swc'
-import { resolve } from 'path'
 import { defineConfig, loadEnv } from 'vite'
 import eslintPlugin from 'vite-plugin-eslint2'
 import stylelintPlugin from 'vite-plugin-stylelint'
 import svgr from 'vite-plugin-svgr'
 import viteTsconfigPaths from 'vite-tsconfig-paths'
+import packageJson from './package.json'
+
+const resolveModule = (module: string) => {
+  try {
+    require.resolve(module);
+    return true;
+  } catch {
+    return false;
+  }
+};
 
 export default defineConfig(({ mode }) => {
   const env = loadEnv(mode, process.cwd(), '')
 
+  const disableStyleLintPlugin =
+    (env.DISABLE_STYLELINT_PLUGIN ?? 'false') === 'true' || !resolveModule('stylelint');
+  const disableEsLintPlugin =
+   (env.DISABLE_ESLINT_PLUGIN ?? 'false') === 'true' || !resolveModule('eslint');
+  const publicUrl = env.PUBLIC_URL ?? packageJson.homepage ?? '/';
+  const publicPath = mode === 'development'
+    ? '/'
+    : new URL(publicUrl.endsWith('/') ? publicUrl : \`\${publicUrl}/\`, 'http://localhost').pathname;
+
   return {
     plugins: [
       react(),
       viteTsconfigPaths(),
       svgr(),
-      eslintPlugin({
+      !disableEsLintPlugin && eslintPlugin({
         emitErrorAsWarning: true,
         cache: false
       }),
-      stylelintPlugin({
+      !disableStyleLintPlugin && stylelintPlugin({
         emitErrorAsWarning: true,
         cache: false
       })
-    ],
+    ].filter(Boolean),
     envPrefix: env.ENV_PREFIX ?? 'FRONT_',
+    base: publicPath,
     server: {
-      port: parseInt(process.env.PORT ?? '3000', 10),
-      open: (process.env.BROWSER ?? 'false') === 'true'
-    },
-    root: resolve(__dirname, 'public'),
-    publicDir: resolve(__dirname, 'public'),
-    resolve: {
-      alias: { '/src': resolve(__dirname, 'src') }
+      port: parseInt(env.PORT ?? '3000', 10),
+      open: (env.BROWSER ?? 'false') === 'true'
     },
     build: {
-      outDir: resolve(__dirname, 'build')
-    }
+      sourcemap: (env.DISABLE_SOURCE_MAP ?? 'false') !== 'true',
+      outDir: 'build',
+    },
   }
 })
 `,
   { encoding: 'utf-8' },
 );
 
+let tsconfig = readFileSync(resolve(__dirname, '../tsconfig.json'), { encoding: 'utf-8' });
+tsconfig = tsconfig.replace('@pplancq/webpack-config', 'vite/client');
+writeFileSync(resolve(__dirname, '../tsconfig.json'), tsconfig, { encoding: 'utf-8' });
+
 const packagesJson = JSON.parse(readFileSync(resolve(__dirname, '../package.json'), { encoding: 'utf-8' }));
-const { start, build, 'migrate:vite': _, ...scripts } = packagesJson.scripts;
-packagesJson.scripts = { start: 'vite', build: 'vite build', preview: 'vite preview', ...scripts };
+const { start, build, 'migrate:vite': a, 'start:mock': b, ...scripts } = packagesJson.scripts;
+packagesJson.scripts = {
+  start: 'vite',
+  build: 'vite build',
+  preview: 'vite preview',
+  'start:mock': 'vite --mode mock',
+  ...scripts,
+};
 writeFileSync(resolve(__dirname, '../package.json'), JSON.stringify(packagesJson, null, 2), { encoding: 'utf-8' });
 
 let indexHTML = readFileSync(resolve(__dirname, '../public/index.html'), { encoding: 'utf-8' });
 indexHTML = indexHTML.replace('  </body>', '    <script type="module" src="/src/main.ts"></script>\n  </body>');
-writeFileSync(resolve(__dirname, '../public/index.html'), indexHTML, { encoding: 'utf-8' });
+writeFileSync(resolve(__dirname, '../index.html'), indexHTML, { encoding: 'utf-8' });
+rmSync(resolve(__dirname, '../public/index.html'));
+
+let envFile = readFileSync(resolve(__dirname, '../.env'), { encoding: 'utf-8' });
+envFile = envFile.replace(
+  `
+
+# Specify the type of configuration to use with ESLint.
+# - 'eslintrc' is the classic configuration format available in most ESLint versions.
+# - 'flat'  is the new format introduced in ESLint 8.21.0.
+# Default is 'eslintrc'
+ESLINT_CONFIG_TYPE='flat'`,
+  '',
+);
+writeFileSync(resolve(__dirname, '../.env'), envFile, { encoding: 'utf-8' });
+
+writeFileSync(
+  resolve(__dirname, '../.env.mock'),
+  `FRONT_MOCK_ENABLE=true
+`,
+  { encoding: 'utf-8' },
+);
 
-rmSync(resolve(__dirname, '../scripts/migrateToVite.js'));
+rmSync(resolve(__dirname, '../scripts/migrateToVite.cjs'));
 
 console.info('\nThe application has been migrate to vite');

package/scripts/{removeDemo.js → removeDemo.cjs}

@@ -83,6 +83,6 @@ const { 'remove:demo': _, ...scripts } = packagesJson.scripts;
 packagesJson.scripts = { ...scripts };
 writeFileSync(resolve(__dirname, '../package.json'), JSON.stringify(packagesJson, null, 2), { encoding: 'utf-8' });
 
-rmSync(resolve(__dirname, '../scripts/removeDemo.js'));
+rmSync(resolve(__dirname, '../scripts/removeDemo.cjs'));
 
 console.info('\nThe demo application has been removed\n');

package/stylelint.config.mjs

@@ -0,0 +1,3 @@
+export default {
+  extends: ['@pplancq/stylelint-config/prettier'],
+};

package/.commitlintrc.js

@@ -1 +0,0 @@
-module.exports = { extends: ['@pplancq/commitlint-config'] };

package/.postcssrc.js

@@ -1 +0,0 @@
-module.exports = require('@pplancq/postcss-config');

package/.prettierrc.js

@@ -1 +0,0 @@
-module.exports = require('@pplancq/prettier-config');

package/.stylelintrc.js

@@ -1 +0,0 @@
-module.exports = { extends: ['@pplancq/stylelint-config/prettier'] };