create-lik-app 1.0.2 → 1.1.3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "create-lik-app",
-  "version": "1.0.2",
+  "version": "1.1.3",
   "type": "module",
   "license": "MIT",
   "author": "licheung228 <licheung228@163.com>",
@@ -28,8 +28,7 @@
     "cross-spawn": "^7.0.6",
     "minimist": "^1.2.8",
     "picocolors": "^1.1.1",
-    "prompts": "^2.4.2",
-    "unbuild": "^2.0.0"
+    "prompts": "^2.4.2"
   },
   "scripts": {
     "build": "unbuild",

package/templates/template-react/_gitignore

@@ -22,3 +22,6 @@ dist-ssr
 *.njsproj
 *.sln
 *.sw?
+
+# types
+types/auto-imports.d.ts

package/templates/template-react/{plugins/index.ts → config/build/_base.ts}

@@ -1,9 +1,12 @@
+import { defineConfig } from 'vite'
+import type { Plugin } from 'vite'
 import react from '@vitejs/plugin-react'
 import unocss from 'unocss/vite'
-import type { PluginOption } from 'vite'
 import AutoImport from 'unplugin-auto-import/vite'
+import path from 'node:path'
+import process from 'node:process'
 
-export const createPlugins = (): PluginOption[] => [
+const basePlugins: Plugin[] = [
   react({
     babel: {
       plugins: [
@@ -17,8 +20,17 @@ export const createPlugins = (): PluginOption[] => [
     include: [
       /\.[tj]sx?$/ // .ts, .tsx, .js, .jsx
     ],
-    imports: ['react', 'react-router-dom'],
+    imports: ['react', 'react-router-dom', 'mobx', 'mobx-react-lite'],
     // 为true时在项目根目录自动创建
-    dts: 'types/auto-imports.d.ts'
+    dts: 'src/types/auto-imports.d.ts'
   })
 ]
+
+export default defineConfig({
+  plugins: basePlugins,
+  resolve: {
+    alias: {
+      '@': path.resolve(process.cwd(), 'src')
+    }
+  }
+})

package/templates/template-react/config/build/development.ts

@@ -0,0 +1,7 @@
+import { defineConfig } from 'vite';
+
+export default defineConfig({
+  server: {
+    port: 8220
+  }
+});

package/templates/template-react/config/build/production.ts

@@ -0,0 +1 @@
+export default {};

package/templates/template-react/config/build/test.ts

@@ -0,0 +1 @@
+export default {}

package/templates/template-react/src/components/Lic/index.tsx

@@ -4,7 +4,7 @@ const Lic: FC<{ favorite: string }> = ({ favorite }) => {
   return (
     <div className="animate-keyframes-bounce-in animate-duration-1000 animate-count-1 flex-center flex-col">
       <img className="w-30" src="/lic.svg" alt="liclogo" />
-      <p className="text-8xl mt6">{favorite.toUpperCase()}</p>
+      <p className="sm:text-8xl text-xl mt6">{favorite.toUpperCase()}</p>
     </div>
   )
 }

package/templates/template-react/src/main.tsx

@@ -1,6 +1,6 @@
 import 'virtual:uno.css'
 import '@unocss/reset/tailwind.css'
-import '@/styles/mian.css'
+import '@/styles/main.css'
 import { StrictMode } from 'react'
 import { createRoot } from 'react-dom/client'
 import App from './App.tsx'

package/templates/template-react/src/store/index.ts

@@ -1,2 +1 @@
-export * from './module/counter'
-export * from './module/favorite'
+export * from './module/favorite';

package/templates/template-react/src/styles/main.css

@@ -0,0 +1,10 @@
+@import './variable.css';
+@import './animation.css';
+
+html,
+body,
+#root {
+  height: 100vh;
+  width: 100vw;
+  color: var(--lic-color-text-muted);
+}

package/templates/template-react/{types → src/types}/auto-imports.d.ts

@@ -9,14 +9,33 @@ declare global {
   const Link: typeof import('react-router-dom')['Link']
   const NavLink: typeof import('react-router-dom')['NavLink']
   const Navigate: typeof import('react-router-dom')['Navigate']
+  const Observer: typeof import('mobx-react-lite')['Observer']
   const Outlet: typeof import('react-router-dom')['Outlet']
   const Route: typeof import('react-router-dom')['Route']
   const Routes: typeof import('react-router-dom')['Routes']
+  const action: typeof import('mobx')['action']
+  const autorun: typeof import('mobx')['autorun']
+  const computed: typeof import('mobx')['computed']
   const createRef: typeof import('react')['createRef']
+  const extendObservable: typeof import('mobx')['extendObservable']
+  const flow: typeof import('mobx')['flow']
+  const flowResult: typeof import('mobx')['flowResult']
   const forwardRef: typeof import('react')['forwardRef']
+  const intercept: typeof import('mobx')['intercept']
   const lazy: typeof import('react')['lazy']
+  const makeAutoObservable: typeof import('mobx')['makeAutoObservable']
+  const makeObservable: typeof import('mobx')['makeObservable']
   const memo: typeof import('react')['memo']
+  const observable: typeof import('mobx')['observable']
+  const observe: typeof import('mobx')['observe']
+  const observer: typeof import('mobx-react-lite')['observer']
+  const onBecomeObserved: typeof import('mobx')['onBecomeObserved']
+  const onBecomeUnobserved: typeof import('mobx')['onBecomeUnobserved']
+  const onReactionError: typeof import('mobx')['onReactionError']
+  const reaction: typeof import('mobx')['reaction']
+  const runInAction: typeof import('mobx')['runInAction']
   const startTransition: typeof import('react')['startTransition']
+  const toJS: typeof import('mobx')['toJS']
   const useCallback: typeof import('react')['useCallback']
   const useContext: typeof import('react')['useContext']
   const useDebugValue: typeof import('react')['useDebugValue']
@@ -29,6 +48,7 @@ declare global {
   const useInsertionEffect: typeof import('react')['useInsertionEffect']
   const useLayoutEffect: typeof import('react')['useLayoutEffect']
   const useLinkClickHandler: typeof import('react-router-dom')['useLinkClickHandler']
+  const useLocalObservable: typeof import('mobx-react-lite')['useLocalObservable']
   const useLocation: typeof import('react-router-dom')['useLocation']
   const useMemo: typeof import('react')['useMemo']
   const useNavigate: typeof import('react-router-dom')['useNavigate']
@@ -44,4 +64,5 @@ declare global {
   const useState: typeof import('react')['useState']
   const useSyncExternalStore: typeof import('react')['useSyncExternalStore']
   const useTransition: typeof import('react')['useTransition']
+  const when: typeof import('mobx')['when']
 }

package/templates/template-react/src/views/Home/components/React/index.tsx

@@ -1,12 +1,11 @@
 import { favoriteStore } from '@/store'
-import { observer } from 'mobx-react-lite'
 import type { FC } from 'react'
 
 const React: FC = observer(() => {
   return (
-    <div className={`scale-${favoriteStore.favorite === 'react'}`}>
+    <div>
       <img
-        className="w-30 animate-spin animate-duration-2000"
+        className={`w-30 ${favoriteStore.favorite === 'react' ? 'animate-spin' : ''} animate-duration-2000`}
         src="/react.svg"
         alt="reactlogo"
       />

package/templates/template-react/src/views/Home/index.tsx

@@ -1,4 +1,3 @@
-import { observer } from 'mobx-react-lite'
 import { type FC } from 'react'
 import Lic from '@/components/Lic'
 import { favoriteStore } from '@/store'

package/templates/template-react/src/views/Layout/index.tsx

@@ -1,5 +1,4 @@
 import { type FC } from 'react'
-import { Outlet, Link } from 'react-router-dom'
 
 const Layout: FC = () => {
   return (

package/templates/template-react/tsconfig.node.json

@@ -20,10 +20,5 @@
     "noUnusedParameters": true,
     "noFallthroughCasesInSwitch": true
   },
-  "include": [
-    "vite.config.ts",
-    "./config/**/*.ts",
-    "./plugins/*.ts",
-    "./types/*.d.ts"
-  ]
+  "include": ["vite.config.ts", "./config/**/*.ts", "./types/*.d.ts"]
 }

package/templates/template-react/vite.config.ts

@@ -1,18 +1,15 @@
-import { defineConfig } from 'vite'
-
-import path from 'node:path'
-import process from 'node:process'
-import { createPlugins } from './plugins'
+import { defineConfig, loadConfigFromFile, mergeConfig } from 'vite'
+import _base from './config/build/_base'
 
 // https://vite.dev/config/
-export default defineConfig(() => ({
-  plugins: createPlugins(),
-  resolve: {
-    alias: {
-      '@': path.resolve(process.cwd(), '/src')
-    }
-  },
-  server: {
-    port: 8220
-  }
-}))
+export default defineConfig(async (configEnv) => {
+  if (configEnv.mode === '_base')
+    throw new Error('base config is not allowed to be used directly')
+
+  const re = await loadConfigFromFile(
+    configEnv,
+    `config/build/${configEnv.mode}.ts`
+  )
+
+  return mergeConfig(_base, re?.config ?? {})
+})

package/templates/template-react-tanstack-jotai/.husky/commit-msg

@@ -0,0 +1,6 @@
+BG_COLOR='\e[42m'
+RESET='\e[0m'
+
+npx --no -- commitlint --edit $1
+
+printf "\n${BG_COLOR}${FG_COLOR} >>>>>> Commit Lint Success <<<<<< ${RESET}\n"

package/templates/template-react-tanstack-jotai/.husky/lintstagedrc.cjs

@@ -0,0 +1,8 @@
+module.exports = {
+  '*.{js,jsx,ts,tsx}': ['eslint --fix', 'prettier --write'],
+  '{!(package)*.json,*.code-snippets,.!(browserslist)*rc}': ['prettier --parser json --write'],
+  'package.json': ['prettier --write'],
+  // '*.{scss,less,styl,css,html}': ['stylelint --fix', 'prettier --write'],
+  '*.md': ['prettier --write'],
+  '*.hbs': ['prettier --write']
+}

package/templates/template-react-tanstack-jotai/.husky/pre-commit

@@ -0,0 +1,10 @@
+BG_COLOR='\e[42m' # 背景色
+RESET='\e[0m'     # 重置所有格式
+
+npx tsc
+
+printf "\n${BG_COLOR}${FG_COLOR} >>>>>> TS Check Success <<<<<< ${RESET}\r\n\n"
+
+pnpm run lint
+
+printf "\n${BG_COLOR}${FG_COLOR} >>>>>> Code Lint Success <<<<<< ${RESET}\r\n\n"

package/templates/template-react-tanstack-jotai/.prettierignore

@@ -0,0 +1,13 @@
+node_modules
+.idea
+.vscode
+.DS_Store
+
+.git/node_modules/**
+/dist/
+/dist*
+/public/*
+/docs/*
+/docs/**/*
+/plop/**/*
+CHANGELOG

package/templates/template-react-tanstack-jotai/.vscode/extensions.json

@@ -0,0 +1,5 @@
+{
+  "recommendations": [
+    "antfu.unocss"
+  ]
+}

package/templates/template-react-tanstack-jotai/README.md

@@ -0,0 +1,40 @@
+# Lic-Blog
+
+## @/components
+
+the common components / pages components
+
+### Naming
+
+**common components**
+
+dirname start with lower case
+
+**views components**
+
+- in the views directory
+- dirname start with upper case
+- correspondence to the layout route name
+
+## commit standard
+
+### lint
+
+- eslint
+- prettier
+- lint-staged
+
+### commit lint
+
+- @commitlint/cli
+- @commitlint/config-conventional
+
+## the commit message should be
+
+- "feat: xxx" add xxx
+- "fix: xxx" fix bug xxx
+- "docs: xxx" add docs
+- "style: xxx" style change
+- "refactor: xxx" refactor code
+
+... and more in /commitlint.config.mjs

package/templates/template-react-tanstack-jotai/_gitignore

@@ -0,0 +1,27 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
+node_modules
+dist
+dist-ssr
+*.local
+
+# Editor directories and files
+.vscode/*
+!.vscode/extensions.json
+.idea
+.DS_Store
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?
+
+# types
+types/auto-imports.d.ts

package/templates/template-react-tanstack-jotai/commitlint.config.mjs

@@ -0,0 +1,28 @@
+export default {
+  extends: ['@commitlint/config-conventional'],
+  rules: {
+    'type-enum': [
+      2,
+      'always',
+      [
+        'feat', // 新功能(feature)
+        'fix', // 修补bug
+        'docs', // 文档(documentation)
+        'style', // 格式、样式(不影响代码运行的变动)
+        'refactor', // 重构(即不是新增功能，也不是修改BUG的代码)
+        'perf', // 优化相关，比如提升性能、体验
+        'test', // 添加测试
+        'ci', // 持续集成修改
+        'chore', // 构建过程或辅助工具的变动
+        'revert', // 回滚到上一个版本
+        'workflow', // 工作流改进
+        'mod', // 不确定分类的修改
+        'wip', // 开发中
+        'types', // 类型修改
+        'release' // 版本发布
+      ]
+    ],
+    'subject-full-stop': [0, 'never'],
+    'subject-case': [0, 'never']
+  }
+}

package/templates/template-react-tanstack-jotai/config/build/_base.ts

@@ -0,0 +1,38 @@
+import { defineConfig } from 'vite';
+import type { Plugin } from 'vite';
+import react from '@vitejs/plugin-react';
+import unocss from 'unocss/vite';
+import { TanStackRouterVite } from '@tanstack/router-plugin/vite';
+import AutoImport from 'unplugin-auto-import/vite';
+import path from 'node:path';
+import process from 'node:process';
+
+const basePlugins: Plugin[] = [
+  react({
+    babel: {
+      plugins: [
+        ['@babel/plugin-proposal-decorators', { legacy: true }]
+        // ['@babel/plugin-proposal-class-properties', { loose: true }]
+      ]
+    }
+  }),
+  unocss(),
+  TanStackRouterVite(),
+  AutoImport({
+    include: [
+      /\.[tj]sx?$/ // .ts, .tsx, .js, .jsx
+    ],
+    imports: ['react', 'jotai'],
+    // 为true时在项目根目录自动创建
+    dts: 'src/types/auto-imports.d.ts'
+  })
+];
+
+export default defineConfig({
+  plugins: basePlugins,
+  resolve: {
+    alias: {
+      '@': path.resolve(process.cwd(), 'src')
+    }
+  }
+});

package/templates/template-react-tanstack-jotai/config/build/development.ts

@@ -0,0 +1,7 @@
+import { defineConfig } from 'vite';
+
+export default defineConfig({
+  server: {
+    port: 8220
+  }
+});

package/templates/template-react-tanstack-jotai/config/build/production.ts

@@ -0,0 +1 @@
+export default {};

package/templates/template-react-tanstack-jotai/config/build/test.ts

@@ -0,0 +1 @@
+export default {};

package/templates/template-react-tanstack-jotai/config/uno/rules.ts

@@ -0,0 +1,127 @@
+import type { Rule } from 'unocss';
+
+const link: Rule[] = [
+  [
+    'linkPrimary',
+    {
+      color: 'var(--lic-color-primary)',
+      'text-decoration': 'none',
+      transition: 'color 0.3s ease'
+    }
+  ],
+  [
+    'linkHover',
+    {
+      color: 'var(--lic-color-primary-hover)'
+    }
+  ],
+  [
+    'linkActive',
+    {
+      color: 'var(--lic-color-primary-highlight)'
+    }
+  ],
+  [
+    'linkVisited',
+    {
+      color: 'var(--lic-color-primary-deep)',
+      'text-decoration': 'underline'
+    }
+  ],
+  [
+    'linkDisabledHover',
+    {
+      color: 'var(--lic-color-text-muted)'
+    }
+  ],
+  [
+    'linkIsActive',
+    {
+      'text-decoration': 'underline',
+      'text-decoration-style': 'double',
+      'text-decoration-color': 'var(--lic-color-primary-highlight)'
+    }
+  ]
+];
+
+const btn: Rule[] = [
+  [
+    'btnPrimary',
+    {
+      /* 按钮的默认背景色为主题色 */
+      'background-color': 'var(--lic-color-primary)',
+      /* 文字颜色为白色，以保证在主题色背景上的可读性 */
+      color: 'white',
+      /* 去除默认边框 */
+      border: 'none',
+      /* 设置内边距，使按钮内容有合适的空间 */
+      padding: '10px 20px',
+      /* 设置按钮的圆角半径，使其外观更圆润 */
+      'border-radius': '5px',
+      /* 设置过渡效果，当按钮状态改变时（如悬停），背景色的变化会有平滑过渡 */
+      transition: 'background-color 0.3s ease',
+      /* 设置鼠标指针样式为手型，表示可点击 */
+      cursor: 'pointer'
+    }
+  ],
+  [
+    'btnHover',
+    {
+      /* 当鼠标悬停在按钮上时，背景色变为主题色的悬停色调 */
+      'background-color': 'var(--lic-color-primary-hover)'
+    }
+  ],
+  [
+    'btnActive',
+    {
+      /* 当按钮被按下时，背景色变为主题色的高亮色调 */
+      'background-color': 'var(--lic-color-primary-highlight)'
+    }
+  ],
+  [
+    'btnDisabled',
+    {
+      /* 当按钮处于禁用状态时 */
+      /* 背景色变为较浅的、用于表示禁用的色调 */
+      'background-color': 'var(--lic-color-background-muted)',
+      /* 文字颜色变为表示禁用的文本颜色 */
+      color: 'var(--lic-color-text-disabled)',
+      /* 鼠标指针变为不可用样式 */
+      cursor: 'not-allowed'
+    }
+  ]
+];
+
+const success: Rule[] = [
+  [
+    'success',
+    {
+      'background-color': 'var(--lic-color-success)',
+      color: 'var(--lic-color-text-inverse) !important'
+    }
+  ],
+  [
+    'successHover',
+    {
+      'background-color': 'var(--lic-color-success-hover)'
+    }
+  ]
+];
+
+const active: Rule[] = [
+  [
+    'active',
+    {
+      'background-color': 'var(--lic-color-primary-highlight)'
+    }
+  ]
+];
+
+const rules: Record<string, Rule[]> = {
+  link,
+  btn,
+  success,
+  active
+};
+
+export default rules;

package/templates/template-react-tanstack-jotai/env/.env.development

@@ -0,0 +1,2 @@
+VITE_APP_DOMAIN="https://api.example.com"
+VITE_APP_SSL=""

package/templates/template-react-tanstack-jotai/env/.env.production

@@ -0,0 +1 @@
+VITE_APP_DOMAIN="https://api.example.com"

package/templates/template-react-tanstack-jotai/eslint.config.mjs

@@ -0,0 +1,44 @@
+import js from '@eslint/js'
+import globals from 'globals'
+import reactHooks from 'eslint-plugin-react-hooks'
+import reactRefresh from 'eslint-plugin-react-refresh'
+import tseslint from 'typescript-eslint'
+import prettier from 'eslint-plugin-prettier'
+import prettierConfig from './prettier.config.mjs'
+
+export default tseslint.config(
+  { ignores: ['dist', 'node_modules'] },
+  {
+    extends: [js.configs.recommended, ...tseslint.configs.recommended],
+    files: ['**/*.{ts,tsx}'],
+    languageOptions: {
+      ecmaVersion: 2020,
+      globals: globals.browser
+    },
+    plugins: {
+      prettier,
+      'react-hooks': reactHooks,
+      'react-refresh': reactRefresh
+    },
+    rules: {
+      'prettier/prettier': ['error', prettierConfig],
+      'no-useless-escape': 'error',
+      // 'no-undef': 'error', // for unplugin-auto-import
+      'no-unused-vars': 'error',
+      '@typescript-eslint/consistent-type-imports': 'error', // 要求 import type
+      '@typescript-eslint/no-use-before-define': 'error',
+      '@typescript-eslint/ban-ts-comment': 'error',
+      '@typescript-eslint/no-non-null-assertion': 'error',
+      '@typescript-eslint/explicit-module-boundary-types': 'error',
+      '@typescript-eslint/no-unused-vars': 'error',
+      '@typescript-eslint/no-explicit-any': 'error',
+      '@typescript-eslint/no-var-requires': 'error',
+      '@typescript-eslint/no-empty-function': 'error',
+      ...reactHooks.configs.recommended.rules,
+      'react-refresh/only-export-components': [
+        'warn',
+        { allowConstantExport: true }
+      ]
+    }
+  }
+)

package/templates/template-react-tanstack-jotai/index.html

@@ -0,0 +1,13 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" type="image/svg+xml" href="/lic.svg" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Lic-Vite-React-Jotai-Tanstack</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/main.tsx"></script>
+  </body>
+</html>