@component-hook/create-app 1.1.2 → 1.1.3

package/template-react/vitest.setup.ts

@@ -0,0 +1,13 @@
+import { cleanup } from '@testing-library/react';
+import { mswServer } from '@/mocks/server';
+import '@testing-library/jest-dom';
+import '@/plugins/i18n';
+
+beforeAll(() => mswServer.listen());
+
+afterEach(() => {
+  cleanup();
+  mswServer.resetHandlers();
+});
+
+afterAll(() => mswServer.close());

package/template-vue/README.md.art

@@ -8,7 +8,7 @@ This project is built with [vue3](https://vuejs.org/) + [vite](https://vite.dev/
 - **API & Mocking**: Handles requests with [axios](https://axios-http.com/docs/intro) and mocks APIs using [msw](https://mswjs.io/).
 - **Code Quality**: Enforces standards with [eslint](https://eslint.org/) and [prettier](https://prettier.io/), with [husky](https://www.npmjs.com/package/husky), [commitlint](https://commitlint.js.org/#/), and [lint-staged](https://github.com/okonet/lint-staged) for commit validation.
 - **Testing**: Uses [vitest](https://vitest.dev/) + [testing-library](https://testing-library.com/) for unit testing and [playwright](https://playwright.dev/) for E2E testing.
-- **Optimization**: Compresses CSS with [cssnano](https://cssnano.github.io/cssnano/) , converts units with [postcss-pxtorem](https://www.npmjs.com/package/postcss-pxtorem), and analyzes assets with [rollup-plugin-visualizer](https://github.com/btd/rollup-plugin-visualizer).
+- **Optimization**: Compresses CSS with [cssnano](https://cssnano.github.io/cssnano/), converts units with [postcss-pxtorem](https://www.npmjs.com/package/postcss-pxtorem), convert modern CSS into something most browsers can understand with [postcss-preset-env](https://www.npmjs.com/package/postcss-preset-env), and analyzes assets with [rollup-plugin-visualizer](https://github.com/btd/rollup-plugin-visualizer).
 - **CI/CD**: Integrates `{{gitRepository}}` for automated testing and deployment.
 
 ## Code Features / Opinions

package/template-vue/package.json

@@ -3,7 +3,7 @@
   "version": "0.0.0",
   "private": true,
   "type": "module",
-  "packageManager": "pnpm@10.12.4",
+  "packageManager": "pnpm@10.13.1",
   "scripts": {
     "dev": "vite",
     "dev:mock": "MOCK=true vite",
@@ -20,29 +20,29 @@
   "dependencies": {
     "axios": "^1.10.0",
     "pinia": "^3.0.3",
-    "pinia-plugin-persistedstate": "^4.3.0",
+    "pinia-plugin-persistedstate": "^4.4.1",
     "vue": "^3.5.17",
-    "vue-i18n": "^11.1.7",
+    "vue-i18n": "^11.1.9",
     "vue-router": "^4.5.1"
   },
   "devDependencies": {
-    "@component-hook/eslint-plugin": "1.1.1",
+    "@component-hook/eslint-plugin": "1.1.2",
     "@intlify/unplugin-vue-i18n": "^6.0.8",
-    "@playwright/test": "^1.53.1",
+    "@playwright/test": "^1.54.0",
     "@tailwindcss/vite": "^4.1.11",
     "@testing-library/jest-dom": "^6.6.3",
     "@testing-library/user-event": "^14.6.1",
     "@testing-library/vue": "^8.1.0",
     "@tsconfig/node22": "^22.0.2",
-    "@types/node": "^22.15.33",
-    "@vitejs/plugin-vue": "^5.2.4",
+    "@types/node": "^22.16.3",
+    "@vitejs/plugin-vue": "^6.0.0",
     "@vitest/coverage-v8": "^3.2.4",
     "@vue/tsconfig": "^0.7.0",
     "autoprefixer": "^10.4.21",
     "cssnano": "^7.0.7",
-    "eslint": "^9.29.0",
+    "eslint": "^9.30.1",
     "jsdom": "^26.1.0",
-    "msw": "^2.10.2",
+    "msw": "^2.10.3",
     "postcss": "^8.5.6",
     "postcss-preset-env": "^10.2.4",
     "postcss-pxtorem": "^6.1.0",
@@ -50,10 +50,10 @@
     "rollup-plugin-visualizer": "^6.0.3",
     "tailwindcss": "^4.1.11",
     "typescript": "^5.8.3",
-    "vite": "^6.3.5",
+    "vite": "^7.0.4",
     "vite-plugin-svg-icons": "^2.0.1",
     "vitest": "^3.2.4",
-    "vue-tsc": "^2.2.10"
+    "vue-tsc": "^3.0.1"
   },
   "msw": {
     "workerDirectory": "public"

package/template-vue/src/styles/base.css

@@ -7,11 +7,16 @@
   color: rgba(255, 255, 255, 0.87);
   background-color: #242424;
 
-  font-synthesis: none;
+  overscroll-behavior: none none;
+  touch-action: manipulation;
+  user-select: none;
   text-rendering: optimizeLegibility;
-  -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
-  -webkit-text-size-adjust: 100%;
+  -moz-touch-callout: none;
+  -ms-touch-callout: none;
+  -webkit-font-smoothing: antialiased;
+  -webkit-touch-callout: none;
+  -webkit-overflow-scrolling: touch;
 }
 
 @media (prefers-color-scheme: light) {
@@ -29,6 +34,12 @@ body {
   min-height: 100vh;
 }
 
+img {
+  -webkit-touch-callout: none;
+  -webkit-user-drag: none;
+  user-select: none;
+}
+
 #app {
   max-width: 80rem;
   margin: auto;