@gx-design-vue/create-gx-cli 0.1.2 → 0.1.4

package/README.md

@@ -1,22 +1,15 @@
-# `@dkundel/create-project`
+# `@gx-design-vue/create-gx-cli`
 
 🏗 Personal CLI to bootstrap new projects
 
 ## Installation & Usage
 
 ```bash
-npm init @dkundel/project
+npm init @gx-design-vue/create-gx-cli
 # or
-npx @dkundel/create-project
+npx @gx-design-vue/create-gx-cli
 # or
-npm install -g @dkundel/create-project
+npm install -g @gx-design-vue/create-gx-cli
 create-project
 ```
 
-## License
-
-MIT
-
-## Collaborators
-
-- Dominik Kundel <hi@dominik.dev>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gx-design-vue/create-gx-cli",
-  "version": "0.1.2",
+  "version": "0.1.4",
   "license": "MIT",
   "description": "a cli to bootstrap gx project",
   "main": "src/index.js",
@@ -28,6 +28,7 @@
   "files": [
     "bin/",
     "src/",
-    "template-*"
+    "template-mobile-vant-html/*",
+    "template-mobile-vant-cli/*"
   ]
 }

package/src/main.js

@@ -13,7 +13,7 @@ const copy = promisify(ncp)
 const gitRepositoryList = [
   {
     name: 'gx-design-pro',
-    git: 'https://gitee.com/gx12358/vue-antd-admin.git#v2'
+    git: 'https://gitee.com/gx12358/vue3-antd-admin.git'
   },
   {
     name: 'gx-design-thin',
@@ -22,8 +22,15 @@ const gitRepositoryList = [
 ]
 
 async function copyTemplateFiles(templateDir, root) {
+  const exclusions = [ 'node_modules' ]
   return copy(templateDir, root, {
-    clobber: false
+    clobber: false,
+    filter: (sourcePath) => {
+      const relativePath = path.relative(templateDir, sourcePath);
+      const folders = relativePath.split(path.sep);
+      const folderToCheck = folders.length > 1 ? folders[1] : folders[0];
+      return !exclusions.includes(folderToCheck)
+    }
   })
 }
 
@@ -49,7 +56,6 @@ function editPackageJson(root, projectName) {
       writeFile(path.join(root, '.npmrc'), 'shamefully-hoist=true')
     }
 
-
     writeFile(path.join(root, 'package.json'), JSON.stringify(pkg, null, 2))
   }
 }

package/template-mobile-vant-cli/.env.pro

@@ -2,7 +2,7 @@
 VITE_NODE_ENV= production
 
 # environment 代码环境
-VITE_USE_MODE = production
+VITE_USE_MODE = pro
 
 VITE_USE_CDN= false
 

package/template-mobile-vant-cli/.env.production

@@ -1,8 +1,8 @@
 # 实际执行环境 production
-VITE_NODE_ENV= test
+VITE_NODE_ENV= production
 
 # environment 代码环境
-VITE_USE_MODE = test
+VITE_USE_MODE = production
 
 VITE_USE_CDN= false
 

package/template-mobile-vant-cli/.eslintignore

@@ -1,4 +1,3 @@
-
 *.sh
 node_modules
 *.md

package/template-mobile-vant-cli/build/plugin/autoImport.ts

@@ -2,25 +2,23 @@ import autoImport from 'unplugin-auto-import/vite'
 import Components from 'unplugin-vue-components/vite'
 import { VantResolver } from 'unplugin-vue-components/resolvers'
 
+const importsModules = [ 'vue', 'vue-router' ] as any
+
 export function createAutoImport() {
   return [
     autoImport({
       include: [
         /\.[tj]sx?$/, // .ts, .tsx, .js, .jsx
         /\.vue$/, /\.vue\?vue/, // .vue
-        /\.md$/, // .md
-      ],
-      imports: [
-        'vue',
-        'vue-router'
+        /\.md$/ // .md
       ],
-      dts: 'types/auto-imports.d.ts'
+      imports: importsModules,
+      dts: 'types/auto-imports.d.ts',
+      dirs: [ 'src/store' ]
     }),
     Components({
-      resolvers: [
-        VantResolver()
-      ],
-      dts: 'types/components.d.ts'
+      resolvers: [ VantResolver() ],
+      dts: 'types/plugins-auto-import.d.ts'
     })
   ]
 }

package/template-mobile-vant-cli/build/plugin/index.ts

@@ -5,7 +5,6 @@ import vueJsx from '@vitejs/plugin-vue-jsx'
 
 import vueSetupExtend from 'vite-plugin-vue-setup-extend'
 
-import { presetAttributify, presetUno, transformerDirectives } from 'unocss'
 import Unocss from 'unocss/vite'
 
 import { configHtmlPlugin } from './html'
@@ -25,13 +24,7 @@ export function createVitePlugins(viteEnv: ViteEnv, isBuild: boolean) {
   ]
 
   // unocss
-  vitePlugins.push(Unocss({
-    presets: [
-      presetAttributify(),
-      presetUno()
-    ],
-    transformers: [ transformerDirectives() ]
-  }))
+  vitePlugins.push(Unocss())
 
   // vite-plugin-vue-setup-extend
   vitePlugins.push(vueSetupExtend())
@@ -40,8 +33,7 @@ export function createVitePlugins(viteEnv: ViteEnv, isBuild: boolean) {
   vitePlugins.push(configHtmlPlugin(viteEnv, isBuild))
 
   // vite-plugin-mock
-  VITE_USE_MOCK && vitePlugins.push(configMockPlugin(isBuild))
-
+  VITE_USE_MOCK && vitePlugins.push(configMockPlugin())
 
   // unplugin-auto-import/vite
   vitePlugins.push(createAutoImport())

package/template-mobile-vant-cli/build/plugin/mock.ts

@@ -1,20 +1,14 @@
-/**
- * Mock plugin for development and production.
- * https://github.com/anncwb/vite-plugin-mock
- */
-import { viteMockServe } from 'vite-plugin-mock'
+import { viteMockServe } from './viteMock'
 
-export function configMockPlugin(isBuild: boolean) {
+export function configMockPlugin() {
   return viteMockServe({
-    ignore: /^\_/,
+    ignore: /^_/,
     mockPath: 'mock',
-    watchFiles: true,
-    localEnabled: !isBuild,
-    prodEnabled: isBuild,
+    enable: true,
     injectCode: `
       import { setupProdMockServer } from '../mock/_createProductionServer';
 
       setupProdMockServer();
-      `
+      `,
   })
 }

package/template-mobile-vant-cli/build/plugin/viteMock/client.ts

@@ -0,0 +1,88 @@
+import mockJs from 'mockjs'
+import { pathToRegexp } from 'path-to-regexp'
+
+const Mock = mockJs as any
+
+export function createProdMockServer(mockList: any[]) {
+  Mock.XHR.prototype.__send = Mock.XHR.prototype.send
+  Mock.XHR.prototype.send = function () {
+    if (this.custom.xhr) {
+      this.custom.xhr.withCredentials = this.withCredentials || false
+
+      if (this.responseType) {
+        this.custom.xhr.responseType = this.responseType
+      }
+    }
+    if (this.custom.requestHeaders) {
+      const headers: any = {}
+      for (let k in this.custom.requestHeaders) {
+        headers[k.toString().toLowerCase()] = this.custom.requestHeaders[k]
+      }
+      this.custom.options = Object.assign({}, this.custom.options, { headers })
+    }
+    this.__send.apply(this, arguments)
+  }
+
+  Mock.XHR.prototype.proxy_open = Mock.XHR.prototype.open
+
+  Mock.XHR.prototype.open = function () {
+    let responseType = this.responseType
+    this.proxy_open(...arguments)
+    if (this.custom.xhr) {
+      if (responseType) {
+        this.custom.xhr.responseType = responseType
+      }
+    }
+  }
+
+  for (const { url, method, response, timeout } of mockList) {
+    __setupMock__(timeout)
+    Mock.mock(
+      pathToRegexp(url, undefined, { end: false }),
+      method || 'get',
+      __XHR2ExpressReqWrapper__(response)
+    )
+  }
+}
+
+function __param2Obj__(url: string) {
+  const search = url.split('?')[1]
+  if (!search) {
+    return {}
+  }
+  return JSON.parse(
+    '{"' +
+    decodeURIComponent(search)
+      .replace(/"/g, '\\"')
+      .replace(/&/g, '","')
+      .replace(/=/g, '":"')
+      .replace(/\+/g, ' ') +
+    '"}'
+  )
+}
+
+function __XHR2ExpressReqWrapper__(handle: (d: any) => any) {
+  return function (options: any) {
+    let result = null
+    if (typeof handle === 'function') {
+      const { body, type, url, headers } = options
+      result = handle({
+        method: type,
+        body: JSON.parse(body),
+        query: __param2Obj__(url),
+        headers
+      })
+    } else {
+      result = handle
+    }
+
+    return Mock.mock(result)
+  }
+}
+
+function __setupMock__(timeout = 0) {
+  timeout &&
+  Mock.setup({
+    timeout
+  })
+}

package/template-mobile-vant-cli/build/plugin/viteMock/createMockServer.ts

@@ -0,0 +1,271 @@
+import type { MockMethod, Recordable, RespThisType, ViteMockOptions } from './types'
+import path from 'node:path'
+import fs from 'node:fs'
+import chokidar from 'chokidar'
+import colors from 'picocolors'
+import url from 'node:url'
+import fg from 'fast-glob'
+import Mock from 'mockjs'
+import type { ResolvedConfig } from 'vite'
+import { match, pathToRegexp } from 'path-to-regexp'
+import type { IncomingMessage, NextHandleFunction } from 'connect'
+import type { GetOutputFile } from 'bundle-require'
+import { bundleRequire, JS_EXT_RE } from 'bundle-require'
+import { isAbsPath, isArray, isFunction, isRegExp, sleep } from './utils'
+
+export let mockData: MockMethod[] = []
+
+export async function createMockServer(
+  opt: ViteMockOptions = { mockPath: 'mock', configPath: 'vite.mock.config' },
+  config: ResolvedConfig,
+) {
+  opt = {
+    mockPath: 'mock',
+    watchFiles: true,
+    configPath: 'vite.mock.config.ts',
+    logger: true,
+    cors: true,
+    ...opt,
+  }
+
+  if (mockData.length > 0)
+    return
+  mockData = await getMockConfig(opt, config)
+  await createWatch(opt, config)
+}
+
+// request match
+export async function requestMiddleware(opt: ViteMockOptions) {
+  const { logger = true } = opt
+  const middleware: NextHandleFunction = async (req, res, next) => {
+    let queryParams: {
+      query?: {
+        [key: string]: any
+      }
+      pathname?: string | null
+    } = {}
+
+    if (req.url) {
+      queryParams = url.parse(req.url, true)
+    }
+
+    const reqUrl = queryParams.pathname
+
+    const matchRequest = mockData.find((item) => {
+      if (!reqUrl || !item || !item.url) {
+        return false
+      }
+      if (item.method && item.method.toUpperCase() !== req.method) {
+        return false
+      }
+      return pathToRegexp(item.url).test(reqUrl)
+    })
+
+    if (matchRequest) {
+      const isGet = req.method && req.method.toUpperCase() === 'GET'
+      const { response, rawResponse, timeout, statusCode, url } = matchRequest
+
+      if (timeout) {
+        await sleep(timeout)
+      }
+
+      const urlMatch = match(url, { decode: decodeURIComponent })
+
+      let query = queryParams.query as any
+      if (reqUrl) {
+        if ((isGet && JSON.stringify(query) === '{}') || !isGet) {
+          const params = (urlMatch(reqUrl) as any).params
+          if (JSON.stringify(params) !== '{}') {
+            query = (urlMatch(reqUrl) as any).params || {}
+          } else {
+            query = queryParams.query || {}
+          }
+        }
+      }
+
+      const self: RespThisType = { req, res, parseJson: parseJson.bind(null, req) }
+      if (isFunction(rawResponse)) {
+        await rawResponse.bind(self)(req, res)
+      } else {
+        const body = await parseJson(req)
+        res.setHeader('Content-Type', 'application/json')
+        if (opt) {
+          res.setHeader('Access-Control-Allow-Credentials', true)
+          res.setHeader('Access-Control-Allow-Origin', req.headers.origin || '*')
+        }
+        res.statusCode = statusCode || 200
+        const mockResponse = isFunction(response)
+          ? response.bind(self)({ url: req.url as any, body, query, headers: req.headers })
+          : response
+        res.end(JSON.stringify(Mock.mock(mockResponse)))
+      }
+
+      logger && loggerOutput('request invoke', req.url!)
+      return
+    }
+    next()
+  }
+  return middleware
+}
+
+// create watch mock
+function createWatch(opt: ViteMockOptions, config: ResolvedConfig) {
+  const { configPath, logger, watchFiles } = opt
+
+  if (!watchFiles) {
+    return
+  }
+
+  const { absConfigPath, absMockPath } = getPath(opt)
+
+  if (process.env.VITE_DISABLED_WATCH_MOCK === 'true') {
+    return
+  }
+
+  const watchDir = []
+  const exitsConfigPath = fs.existsSync(absConfigPath)
+
+  exitsConfigPath && configPath ? watchDir.push(absConfigPath) : watchDir.push(absMockPath)
+
+  const watcher = chokidar.watch(watchDir, {
+    ignoreInitial: true,
+    // ignore files generated by `bundle require`
+    ignored: '**/_*.bundled_*.(mjs|cjs)',
+  })
+
+  watcher.on('all', async (event, file) => {
+    logger && loggerOutput(`mock file ${event}`, file)
+    mockData = await getMockConfig(opt, config)
+  })
+}
+
+// clear cache
+// function cleanRequireCache(opt: ViteMockOptions) {
+//   if (typeof require === 'undefined' || !require.cache) {
+//     return
+//   }
+//   const { absConfigPath, absMockPath } = getPath(opt)
+//   Object.keys(require.cache).forEach((file) => {
+//     if (file === absConfigPath || file.indexOf(absMockPath) > -1) {
+//       delete require.cache[file]
+//     }
+//   })
+// }
+
+function parseJson(req: IncomingMessage): Promise<Recordable> {
+  return new Promise((resolve) => {
+    let body = ''
+    let jsonStr = ''
+    req.on('data', function (chunk) {
+      body += chunk
+    })
+    req.on('end', function () {
+      try {
+        jsonStr = JSON.parse(body)
+      } catch (err) {
+        jsonStr = ''
+      }
+      resolve(jsonStr as any)
+      return
+    })
+  })
+}
+
+// load mock .ts files and watch
+async function getMockConfig(opt: ViteMockOptions, config: ResolvedConfig) {
+  const { absConfigPath, absMockPath } = getPath(opt)
+  const { ignore, configPath, logger } = opt
+
+  let ret: MockMethod[] = []
+  if (configPath && fs.existsSync(absConfigPath)) {
+    logger && loggerOutput(`load mock data from`, absConfigPath)
+    ret = await resolveModule(absConfigPath, config)
+    return ret
+  }
+
+  const mockFiles = fg
+    .sync(`**/*.{ts,mjs,js}`, {
+      cwd: absMockPath,
+    })
+    .filter((item) => {
+      if (!ignore) {
+        return true
+      }
+      if (isFunction(ignore)) {
+        return !ignore(item)
+      }
+      if (isRegExp(ignore)) {
+        return !ignore.test(path.basename(item))
+      }
+      return true
+    })
+  try {
+    ret = []
+    const resolveModulePromiseList = []
+
+    for (let index = 0; index < mockFiles.length; index++) {
+      const mockFile = mockFiles[index]
+      resolveModulePromiseList.push(resolveModule(path.join(absMockPath, mockFile), config))
+    }
+    const loadAllResult = await Promise.all(resolveModulePromiseList)
+    for (const resultModule of loadAllResult) {
+      let mod = resultModule
+      if (!isArray(mod)) {
+        mod = [mod]
+      }
+      ret = [...ret, ...mod]
+    }
+  } catch (error: any) {
+    loggerOutput(`mock reload error`, error)
+    ret = []
+  }
+  return ret
+}
+
+// fixed file generation format
+// use a random path to avoid import cache
+const getOutputFile: GetOutputFile = (filepath, format) => {
+  const dirname = path.dirname(filepath)
+  const basename = path.basename(filepath)
+  const randomname = `${Date.now()}_${Math.random().toString(36).substring(2, 15)}`
+  return path.resolve(
+    dirname,
+    `_${basename.replace(JS_EXT_RE, `.bundled_${randomname}.${format === 'esm' ? 'mjs' : 'cjs'}`)}`,
+  )
+}
+
+// Inspired by vite
+// support mock .ts files
+async function resolveModule(p: string, config: ResolvedConfig): Promise<any> {
+  const mockData = await bundleRequire({
+    filepath: p,
+    getOutputFile,
+  })
+
+  let mod = mockData.mod.default || mockData.mod
+  if (isFunction(mod)) {
+    mod = await mod({ env: config.env, mode: config.mode, command: config.command })
+  }
+  return mod
+}
+
+// get custom config file path and mock dir path
+function getPath(opt: ViteMockOptions) {
+  const { mockPath, configPath } = opt
+  const cwd = process.cwd()
+  const absMockPath = isAbsPath(mockPath) ? mockPath! : path.join(cwd, mockPath || '')
+  const absConfigPath = path.join(cwd, configPath || '')
+  return {
+    absMockPath,
+    absConfigPath,
+  }
+}
+
+function loggerOutput(title: string, msg: string, type: 'info' | 'error' = 'info') {
+  const tag = type === 'info' ? colors.cyan(`[vite:mock]`) : colors.red(`[vite:mock-server]`)
+  return console.log(
+    `${colors.dim(new Date().toLocaleTimeString())} ${tag} ${colors.green(title)} ${colors.dim(
+      msg,
+    )}`,
+  )
+}

package/template-mobile-vant-cli/build/plugin/viteMock/index.ts

@@ -0,0 +1,69 @@
+(async () => {
+  try {
+    await import('mockjs')
+  } catch (e) {
+    throw new Error('vite-plugin-vue-mock requires mockjs to be present in the dependency tree.')
+  }
+})()
+
+import type { Plugin, ResolvedConfig } from 'vite'
+import { normalizePath } from 'vite'
+import path from 'node:path'
+import type { ViteMockOptions } from './types'
+import { fileExists } from './utils'
+import { createMockServer, requestMiddleware } from './createMockServer'
+
+function getDefaultPath(supportTs = true) {
+  return path.resolve(process.cwd(), `src/main.${supportTs ? 'ts' : 'js'}`)
+}
+
+export function viteMockServe(opt: ViteMockOptions = {}): Plugin {
+  let isDev = false
+  let needSourcemap = false
+  let config: ResolvedConfig
+  let defaultPath = getDefaultPath()
+  if (!fileExists(defaultPath)) {
+    defaultPath = getDefaultPath(false)
+    if (!fileExists(defaultPath)) {
+      defaultPath = ''
+    }
+  }
+
+  const defaultEnter = normalizePath(defaultPath)
+
+  const { injectFile = defaultEnter } = opt
+
+  return {
+    name: 'vite:mock',
+    enforce: 'pre' as const,
+    configResolved(resolvedConfig) {
+      config = resolvedConfig
+      isDev = config.command === 'serve'
+      needSourcemap = !!resolvedConfig.build.sourcemap
+      isDev && createMockServer(opt, config)
+    },
+
+    configureServer: async ({ middlewares }) => {
+      const { enable = isDev } = opt
+      if (!enable) {
+        return
+      }
+      const middleware = await requestMiddleware(opt)
+      middlewares.use(middleware)
+    },
+    transform: (code, id) => {
+      if (isDev || !injectFile || !id.endsWith(injectFile)) {
+        return null
+      }
+
+      const { injectCode = '' } = opt
+
+      return {
+        map: needSourcemap ? this.getCombinedSourcemap() : null,
+        code: `${code}\n${injectCode}`
+      }
+    }
+  }
+}
+
+export * from './types'

package/template-mobile-vant-cli/build/plugin/viteMock/types.ts

@@ -0,0 +1,48 @@
+import { IncomingMessage, ServerResponse } from 'http'
+
+export interface ViteMockOptions {
+  mockPath?: string;
+  configPath?: string;
+  injectFile?: string;
+  injectCode?: string;
+  ignore?: RegExp | ((fileName: string) => boolean);
+  watchFiles?: boolean;
+  enable?: boolean;
+  cors?: boolean;
+  /**
+   * Automatic recognition, no need to configure again
+   * @deprecated Deprecated after 2.8.0
+   */
+  supportTs?: boolean;
+  logger?: boolean;
+}
+
+export interface RespThisType {
+  req: IncomingMessage
+  res: ServerResponse
+  parseJson: () => any
+}
+
+export type MethodType = 'get' | 'post' | 'put' | 'delete' | 'patch'
+
+export type Recordable<T = any> = Record<string, T>
+
+export declare interface MockMethod {
+  url: string
+  method?: MethodType
+  timeout?: number
+  statusCode?: number
+  response?:
+    | ((
+    this: RespThisType,
+    opt: { url: Recordable; body: Recordable; query: Recordable; headers: Recordable },
+  ) => any)
+    | any
+  rawResponse?: (this: RespThisType, req: IncomingMessage, res: ServerResponse) => void
+}
+
+export interface MockConfig {
+  env: Record<string, any>
+  mode: string
+  command: 'build' | 'serve'
+}