@component-hook/create-app 1.2.1 → 1.3.0

package/README.md

@@ -101,8 +101,9 @@ ln -s $(which npx) /usr/local/bin/npx
 
 These variables are injected at build time and are fully typed:
 
-| Variable Name          | Description                                  |
-| ---------------------- | -------------------------------------------- |
-| `VITE_APP_VERSION`     | Read from `package.json` version             |
-| `VITE_APP_BUILD_EPOCH` | Timestamp generated at build time            |
-| `VITE_APP_MOCK`        | Indicates whether the mock environment is on |
+| Variable Name               | Description                                  |
+| --------------------------- | -------------------------------------------- |
+| `VITE_APP_VERSION`          | Read from `package.json` version             |
+| `VITE_APP_LAST_COMMIT_HASH` | Last commit hash at build time               |
+| `VITE_APP_BUILD_EPOCH`      | Populated as `Date.now()` at build time      |
+| `VITE_APP_MOCK`             | Indicates whether the mock environment is on |

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@component-hook/create-app",
-  "version": "1.2.1",
+  "version": "1.3.0",
   "description": "Scaffolding a basic typescript project",
   "type": "module",
   "license": "MIT",

package/template-react/.vscode/settings.json

@@ -1,24 +1,18 @@
 {
-  "[nginx]": {
-    "editor.defaultFormatter": "raynigon.nginx-formatter"
-  },
   "editor.tabSize": 2,
-  "editor.defaultFormatter": "esbenp.prettier-vscode",
-  "debug.javascript.autoAttachFilter": "smart",
   "editor.formatOnSave": true,
-  "[dart]": {
-    "editor.formatOnSave": true,
-    "editor.formatOnType": true,
-    "editor.rulers": [120],
-    "editor.selectionHighlight": false,
-    "editor.suggest.snippetsPreventQuickSuggestions": false,
-    "editor.suggestSelection": "first",
-    "editor.tabCompletion": "onlySnippets",
-    "editor.wordBasedSuggestions": "off"
+  "editor.defaultFormatter": "esbenp.prettier-vscode",
+
+  "[json]": {
+    "editor.defaultFormatter": "esbenp.prettier-vscode"
   },
+
+  "debug.javascript.autoAttachFilter": "smart",
+
+  "typescript.tsdk": "node_modules/typescript/lib",
+
   "workbench.editor.splitInGroupLayout": "vertical",
   "terminal.integrated.shellIntegration.enabled": true,
-  "files.associations": {},
-  "typescript.tsdk": "node_modules/typescript/lib",
+
   "cSpell.words": ["dotenv", "unplugin", "Sonarjs", "typecheck", "pxtorem", "norem", "partialize"]
 }

package/template-react/README.md.art

@@ -18,7 +18,8 @@ This project is built with [react](https://react.dev/) + [vite](https://vite.dev
 - if encounter npx: command not found, can execute `ln -s $(which npx) /usr/local/bin/npx` in zsh
 - Predefined and fully typed global variables:
   - `VITE_APP_VERSION` is read from `package.json` version at build time
-  - `VITE_APP_BUILD_EPOCH` is populated as `new Date().getTime()` at build time
+  - `VITE_APP_LAST_COMMIT_HASH` is last commit hash at build time
+  - `VITE_APP_BUILD_EPOCH` is populated as `Date.now()` at build time
   - `VITE_APP_MOCK` is use mock environment
 
 ## Project Files

package/template-react/package.json

@@ -48,6 +48,7 @@
     "postcss-preset-env": "^10.4.0",
     "postcss-pxtorem": "^6.1.0",
     "prettier": "^3.6.2",
+    "prettier-plugin-tailwindcss": "^0.7.1",
     "tailwindcss": "^4.1.16",
     "typescript": "^5.9.3",
     "vite": "^7.2.1",

package/template-react/src/__tests__/unit/pages/home/components/HelloWorld.test.tsx

@@ -10,7 +10,7 @@ describe('home page HelloWorld component', () => {
 
   it('renders the correct content', () => {
     const title = 'Hello World!';
-    const { version } = useConfigStore.getState();
+    const { appMeta } = useConfigStore.getState();
 
     renderComponent(<HelloWorld title={title} />);
     expect(screen.getByRole('heading', { name: title })).toBeInTheDocument();
@@ -19,7 +19,7 @@ describe('home page HelloWorld component', () => {
     expect(screen.getByText(/src\/app\.tsx/i)).toBeInTheDocument();
     expect(screen.getByText(/save to test hmr/i)).toBeInTheDocument();
     expect(screen.getByText(/click on the vite and react logos to learn more/i)).toBeInTheDocument();
-    expect(screen.getByText(version)).toBeInTheDocument();
+    expect(screen.getByText(`${appMeta.version} - Built at: ${appMeta.builtAt.toLocaleString()}`)).toBeInTheDocument();
     expect(screen.getByRole('button', { name: t('language') })).toBeInTheDocument();
   });
 

package/template-react/src/pages/home/components/hello-world/index.tsx

@@ -9,7 +9,7 @@ interface Props {
 export function HelloWorld({ title = '' }: Props) {
   const [count, setCount] = useState(0);
   const { t, i18n } = useTranslation();
-  const { version } = useConfigStore();
+  const { appMeta } = useConfigStore();
 
   function changeLanguage() {
     const language = i18n.language === 'zh-TW' ? 'en-US' : 'zh-TW';
@@ -34,7 +34,9 @@ export function HelloWorld({ title = '' }: Props) {
       </div>
 
       <p className="text-[#888]">Click on the Vite and React logos to learn more</p>
-      <p className="text-[#888]">{version}</p>
+      <p className="mt-1 text-[#888]">
+        {appMeta.version} - Built at: {appMeta.builtAt.toLocaleString()}
+      </p>
 
       <button
         className="my-4"

package/template-react/src/pages/home/index.tsx

@@ -26,7 +26,7 @@ export function Home() {
         >
           <SvgIcon
             name="react"
-            className={`${styles.logo} hover:filter-[drop-shadow(0_0_2em_#61dafbaa)] motion-safe:animate-logo-spin`}
+            className={`${styles.logo} motion-safe:animate-logo-spin hover:filter-[drop-shadow(0_0_2em_#61dafbaa)]`}
           />
         </a>
       </div>

package/template-react/src/plugins/i18n/index.ts

@@ -1,7 +1,7 @@
 import i18n from 'i18next';
 import { initReactI18next } from 'react-i18next';
-import enUS from './locales/en-US.json';
-import zhTW from './locales/zh-TW.json';
+import enUS from './locales/en-US.json' with { type: 'json' };
+import zhTW from './locales/zh-TW.json' with { type: 'json' };
 
 i18n.use(initReactI18next).init({
   lng: navigator.language,

package/template-react/src/stores/modules/config.ts

@@ -1,17 +1,19 @@
 import { createPersistedStore } from '../middleware';
 
 interface ConfigState {
-  isDev: boolean;
-  version: string;
+  appMeta: {
+    version: string;
+    builtAt: Date;
+  };
 }
 
-const versionString = import.meta.env.DEV
-  ? `${import.meta.env.VITE_APP_VERSION}-dev`
-  : import.meta.env.VITE_APP_VERSION;
+const versionString = `${import.meta.env.VITE_APP_VERSION}-${import.meta.env.VITE_APP_LAST_COMMIT_HASH}`;
 
 const defaultState = {
-  isDev: import.meta.env.DEV,
-  version: versionString,
+  appMeta: {
+    version: import.meta.env.MODE === 'development' ? `${versionString}-dev` : versionString,
+    builtAt: new Date(Number(import.meta.env.VITE_APP_BUILD_EPOCH)),
+  },
 };
 
 export const useConfigStore = createPersistedStore<ConfigState>(

package/template-react/vite.config.ts

@@ -4,17 +4,7 @@ import tailwindcss from '@tailwindcss/vite';
 import react from '@vitejs/plugin-react-swc';
 import { defineConfig } from 'vite';
 import { createSvgIconsPlugin } from 'vite-plugin-svg-icons';
-import packageJson from './package.json' with { type: 'json' };
-
-process.env.VITE_APP_VERSION = packageJson.version;
-
-if (process.env.MOCK) {
-  process.env.VITE_APP_MOCK = 'service-worker';
-}
-
-if (process.env.NODE_ENV === 'production') {
-  process.env.VITE_APP_BUILD_EPOCH = Date.now().toString();
-}
+import './scripts/build-info';
 
 export default defineConfig({
   base: './',

package/template-shared/.browserslistrc

@@ -1,10 +1,10 @@
-# Click this link to view browser coverage https://browsersl.ist/#q=%3E+1.5%25%0Aios+%3E%3D+12%0Achrome+%3E%3D+49%0Anot+ie+%3C%3D+11%0Alast+2+versions%0Anot+dead
+# Click this link to view browser coverage https://browsersl.ist/#q=%3E+1.5%25%0Aios+%3E%3D+13%0Achrome+%3E%3D+60%0Anot+ie+%3C%3D+11%0Alast+2+versions%0Anot+dead
 
 # Browsers that support
 
 > 1.5%
-ios >= 12
-chrome >= 49
+ios >= 13
+chrome >= 60
 not ie <= 11
 last 2 versions
 not dead

package/template-shared/.github/actions/setup-environment/action.yml

@@ -5,41 +5,17 @@ description: Install dependencies
 runs:
   using: composite
   steps:
-    - name: install Node.js
-      uses: actions/setup-node@v6
-      with:
-        node-version: 20.19.5
-
     - name: install pnpm
       uses: pnpm/action-setup@v4
       with:
         run_install: false
 
-    - name: get pnpm store directory
-      id: pnpm-cache
-      shell: bash
-      run: |
-        echo "STORE_PATH=$(pnpm store path)" >> $GITHUB_OUTPUT
-
-    - name: setup pnpm cache
-      uses: actions/cache@v4
-      with:
-        path: ${{ steps.pnpm-cache.outputs.STORE_PATH }}
-        key: ${{ runner.os }}-pnpm-store-${{ hashFiles('**/pnpm-lock.yaml') }}
-        restore-keys: |
-          ${{ runner.os }}-pnpm-store-
-
-    - name: setup node_modules cache
-      id: dependencies-cache
-      uses: actions/cache@v4
+    - name: install Node.js
+      uses: actions/setup-node@v6
       with:
-        path: |
-          **/node_modules
-        key: ${{ runner.os }}-node-modules-${{ hashFiles('**/pnpm-lock.yaml') }}
-        restore-keys: |
-          ${{ runner.os }}-node-modules-
+        node-version: 24.11.1
+        cache: 'pnpm'
 
     - name: install dependencies
-      if: steps.dependencies-cache.outputs.cache-hit != 'true'
       shell: bash
       run: pnpm install

package/template-shared/.github/renovate.json

@@ -1,6 +1,6 @@
 {
   "$schema": "https://docs.renovatebot.com/renovate-schema.json",
-  "extends": ["config:base", "group:allNonMajor", "schedule:weekly", ":semanticCommitTypeAll(chore)"],
+  "extends": ["config:recommended", "schedule:weekly", "group:allNonMajor"],
   "labels": ["dependencies"],
   "rangeStrategy": "bump",
   "packageRules": [

package/template-shared/.github/workflows/ci.yml

@@ -8,7 +8,7 @@ jobs:
   CI:
     runs-on: ubuntu-latest
     steps:
-      - uses: actions/checkout@v5
+      - uses: actions/checkout@v6
       - name: setup environment
         uses: './.github/actions/setup-environment'
 

package/template-shared/.github/workflows/deploy.yml

@@ -16,7 +16,7 @@ jobs:
     runs-on: ubuntu-latest
     needs: CI
     steps:
-      - uses: actions/checkout@v5
+      - uses: actions/checkout@v6
       # - name: setup environment
       #   uses: './.github/actions/setup-environment'
 

package/template-shared/.github/workflows/preview.yml

@@ -12,6 +12,6 @@ jobs:
     runs-on: ubuntu-latest
     needs: CI
     steps:
-      - uses: actions/checkout@v5
+      - uses: actions/checkout@v6
       # - name: setup environment
       #   uses: './.github/actions/setup-environment'

package/template-shared/.gitlab/setup.yml

@@ -1,5 +1,5 @@
 variables:
-  NODE_VERSION: '20'
+  NODE_VERSION: '22'
   CACHE_KEY: '${CI_PROJECT_PATH_SLUG}-${CI_COMMIT_REF_SLUG}'
 
 image: node:${NODE_VERSION}-alpine

package/template-shared/_gitignore

@@ -14,9 +14,6 @@ dist-ssr
 .env
 
 # Editor directories and files
-.vscode/*
-!.vscode/extensions.json
-!.vscode/settings.json
 .idea
 .DS_Store
 *.suo

package/template-shared/prettier.config.js

@@ -1,6 +1,7 @@
 /** @type {import('prettier').RequiredOptions} */
 
 export default {
+  $schema: 'https://json.schemastore.org/prettierrc',
   singleQuote: true,
   semi: true,
   endOfLine: 'lf',
@@ -8,4 +9,5 @@ export default {
   proseWrap: 'preserve',
   arrowParens: 'avoid',
   singleAttributePerLine: true,
+  plugins: ['prettier-plugin-tailwindcss'],
 };

package/template-shared/scripts/build-info/index.ts

@@ -0,0 +1,15 @@
+import { execFileSync } from 'node:child_process';
+import os from 'node:os';
+import packageJson from '../../package.json' with { type: 'json' };
+
+const platform = os.platform();
+const git = platform === 'win32' ? String.raw`C:\Program Files\Git\bin\git.exe` : '/usr/bin/git';
+const hash = execFileSync(git, ['rev-parse', 'HEAD']).toString().trim().slice(0, 7);
+
+process.env.VITE_APP_VERSION = packageJson.version;
+process.env.VITE_APP_LAST_COMMIT_HASH = `${hash}`;
+process.env.VITE_APP_BUILD_EPOCH = Date.now().toString();
+
+if (process.env.MOCK) {
+  process.env.VITE_APP_MOCK = 'service-worker';
+}

package/template-shared/tsconfig.node.json

@@ -8,5 +8,5 @@
     "moduleResolution": "bundler",
     "types": ["node"]
   },
-  "include": ["vite.config.ts", "package.json", "vitest.config.ts", "playwright.config.ts"]
+  "include": ["vite.config.ts", "package.json", "vitest.config.ts", "playwright.config.ts", "scripts/**/*.ts"]
 }

package/template-vue/.vscode/settings.json

@@ -1,27 +1,18 @@
 {
-  "[nginx]": {
-    "editor.defaultFormatter": "raynigon.nginx-formatter"
-  },
   "editor.tabSize": 2,
-  "editor.defaultFormatter": "esbenp.prettier-vscode",
-  "debug.javascript.autoAttachFilter": "smart",
   "editor.formatOnSave": true,
-  "[dart]": {
-    "editor.formatOnSave": true,
-    "editor.formatOnType": true,
-    "editor.rulers": [120],
-    "editor.selectionHighlight": false,
-    "editor.suggest.snippetsPreventQuickSuggestions": false,
-    "editor.suggestSelection": "first",
-    "editor.tabCompletion": "onlySnippets",
-    "editor.wordBasedSuggestions": "off"
+  "editor.defaultFormatter": "esbenp.prettier-vscode",
+
+  "[json]": {
+    "editor.defaultFormatter": "esbenp.prettier-vscode"
   },
+
+  "debug.javascript.autoAttachFilter": "smart",
+
+  "typescript.tsdk": "node_modules/typescript/lib",
+
   "workbench.editor.splitInGroupLayout": "vertical",
   "terminal.integrated.shellIntegration.enabled": true,
-  "volar.format.initialIndent": {
-    "html": true
-  },
-  "files.associations": {},
-  "typescript.tsdk": "node_modules/typescript/lib",
-  "cSpell.words": ["dotenv", "pinia", "persistedstate", "unplugin", "Sonarjs", "typecheck"]
+
+  "cSpell.words": ["dotenv", "pinia", "persistedstate", "unplugin", "Sonarjs", "typecheck", "pxtorem", "norem"]
 }

package/template-vue/README.md.art

@@ -19,7 +19,8 @@ This project is built with [vue3](https://vuejs.org/) + [vite](https://vite.dev/
 - if encounter npx: command not found, can execute `ln -s $(which npx) /usr/local/bin/npx` in zsh
 - Predefined and fully typed global variables:
   - `VITE_APP_VERSION` is read from `package.json` version at build time
-  - `VITE_APP_BUILD_EPOCH` is populated as `new Date().getTime()` at build time
+  - `VITE_APP_LAST_COMMIT_HASH` is last commit hash at build time
+  - `VITE_APP_BUILD_EPOCH` is populated as `Date.now()` at build time
   - `VITE_APP_MOCK` is use mock environment
 
 ## Project Files

package/template-vue/package.json

@@ -47,6 +47,7 @@
     "postcss-preset-env": "^10.4.0",
     "postcss-pxtorem": "^6.1.0",
     "prettier": "^3.6.2",
+    "prettier-plugin-tailwindcss": "^0.7.1",
     "rollup-plugin-visualizer": "^6.0.5",
     "tailwindcss": "^4.1.16",
     "typescript": "^5.9.3",

package/template-vue/src/vite-env.d.ts

@@ -1,10 +1,6 @@
 /// <reference types="vite/client" />
 
-declare module '*.vue' {
-  import { DefineComponent } from 'vue';
-  const component: DefineComponent<any, {}, any>;
-  export default component;
-}
+declare module 'virtual:svg-icons-register';
 
 interface ImportMetaEnv extends Readonly<Record<string, string>> {
   readonly VITE_APP_VERSION: string;

package/template-vue/vite.config.ts

@@ -6,17 +6,7 @@ import vue from '@vitejs/plugin-vue';
 import { visualizer } from 'rollup-plugin-visualizer';
 import { defineConfig } from 'vite';
 import { createSvgIconsPlugin } from 'vite-plugin-svg-icons';
-import packageJson from './package.json' with { type: 'json' };
-
-process.env.VITE_APP_VERSION = packageJson.version;
-
-if (process.env.MOCK) {
-  process.env.VITE_APP_MOCK = 'service-worker';
-}
-
-if (process.env.NODE_ENV === 'production') {
-  process.env.VITE_APP_BUILD_EPOCH = Date.now().toString();
-}
+import './scripts/build-info';
 
 export default defineConfig({
   base: './',