@gx-design-vue/create-gx-cli 0.1.3 → 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.3",
+  "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/template-mobile-vant-cli/.editorconfig

@@ -0,0 +1,19 @@
+root = true
+
+[*]
+charset=utf-8
+end_of_line=lf
+insert_final_newline=true
+indent_style=space
+indent_size=2
+max_line_length = 100
+
+[*.{yml,yaml,json}]
+indent_style = space
+indent_size = 2
+
+[*.md]
+trim_trailing_whitespace = false
+
+[Makefile]
+indent_style = tab

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

@@ -0,0 +1,19 @@
+# 实际执行环境 development
+VITE_NODE_ENV= development
+
+# environment 代码环境
+VITE_USE_MODE = development
+
+VITE_USE_CDN= false
+
+# 是否开启mock
+VITE_USE_MOCK = true
+
+# 是否使用v-console
+VITE_USE_V_CONSOLE = false
+
+# 是否删除console
+VITE_DROP_CONSOLE = false
+
+# api前缀
+VITE_BASE_URL=/mock-server

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

@@ -0,0 +1,19 @@
+# 实际执行环境 production
+VITE_NODE_ENV= production
+
+# environment 代码环境
+VITE_USE_MODE = pro
+
+VITE_USE_CDN= false
+
+# 是否使用v-console
+VITE_USE_V_CONSOLE = false
+
+# 是否开启mock
+VITE_USE_MOCK = false
+
+# 是否删除console
+VITE_DROP_CONSOLE = true
+
+# api前缀
+VITE_BASE_URL=/mock-server

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

@@ -0,0 +1,19 @@
+# 实际执行环境 production
+VITE_NODE_ENV= production
+
+# environment 代码环境
+VITE_USE_MODE = production
+
+VITE_USE_CDN= false
+
+# 是否使用v-console
+VITE_USE_V_CONSOLE = true
+
+# 是否开启mock
+VITE_USE_MOCK = true
+
+# 是否删除console
+VITE_DROP_CONSOLE = true
+
+# api前缀
+VITE_BASE_URL=/mock-server

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

@@ -0,0 +1,15 @@
+*.sh
+node_modules
+*.md
+*.woff
+*.ttf
+.vscode
+.idea
+dist
+/public
+/docs
+.husky
+.local
+.history
+/bin
+Dockerfile

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

@@ -0,0 +1,9 @@
+/dist/*
+.local
+.output.js
+/node_modules/**
+
+**/*.svg
+**/*.sh
+
+/public/*

package/template-mobile-vant-cli/build/cdn.ts

@@ -0,0 +1,5 @@
+const css = []
+
+const js = []
+
+export const cdnConf = { css, js }

package/template-mobile-vant-cli/build/generateModifyVars.ts

@@ -0,0 +1,7 @@
+import { resolve } from 'path'
+
+export function generateModifyVars() {
+  return {
+    hack: `true; @import (reference) "${resolve('src/design/config.less')}";`
+  }
+}

package/template-mobile-vant-cli/build/optimizer.ts

@@ -0,0 +1,18 @@
+import type { GetManualChunk } from 'rollup'
+
+const vendorLibs: { match: string[]; output: string }[] = [
+  {
+    match: ['vant'],
+    output: 'vant',
+  }
+]
+
+export const configManualChunk: GetManualChunk = (id: string) => {
+  if (/[\\/]node_modules[\\/]/.test(id)) {
+    const matchItem = vendorLibs.find((item) => {
+      const reg = new RegExp(`[\\/]node_modules[\\/]_?(${item.match.join('|')})(.*)`, 'ig')
+      return reg.test(id)
+    })
+    return matchItem ? matchItem.output : null
+  }
+}

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

@@ -0,0 +1,24 @@
+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: importsModules,
+      dts: 'types/auto-imports.d.ts',
+      dirs: [ 'src/store' ]
+    }),
+    Components({
+      resolvers: [ VantResolver() ],
+      dts: 'types/plugins-auto-import.d.ts'
+    })
+  ]
+}

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

@@ -0,0 +1,26 @@
+/**
+ * Plugin to minimize and use ejs template syntax in index.html.
+ * https://github.com/anncwb/vite-plugin-html
+ */
+import { PluginOption } from 'vite'
+
+import { createHtmlPlugin } from 'vite-plugin-html'
+
+import { cdnConf } from '../cdn'
+
+export function configHtmlPlugin(env: ViteEnv, isBuild: boolean) {
+
+  const htmlPlugin: PluginOption[] = createHtmlPlugin({
+    minify: isBuild,
+    inject: {
+      data: {
+        injectScript: env.VITE_USE_CDN ? cdnConf.js : [],
+        injectLink: env.VITE_USE_CDN ? cdnConf.css : [],
+        injectVlogScript: env.VITE_USE_V_CONSOLE
+          ? `<script src="https://unpkg.com/vconsole@latest/dist/vconsole.min.js"></script><script>var vConsole = new window.VConsole();</script>`
+          : ''
+      }
+    }
+  })
+  return htmlPlugin
+}

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

@@ -0,0 +1,42 @@
+import type { Plugin, PluginOption } from 'vite'
+
+import vue from '@vitejs/plugin-vue'
+import vueJsx from '@vitejs/plugin-vue-jsx'
+
+import vueSetupExtend from 'vite-plugin-vue-setup-extend'
+
+import Unocss from 'unocss/vite'
+
+import { configHtmlPlugin } from './html'
+import { configMockPlugin } from './mock'
+import { createAutoImport } from './autoImport'
+
+export function createVitePlugins(viteEnv: ViteEnv, isBuild: boolean) {
+  const {
+    VITE_USE_MOCK
+  } = viteEnv
+
+  const vitePlugins: (Plugin | PluginOption[])[] = [
+    // have to
+    vue(),
+    // have to
+    vueJsx()
+  ]
+
+  // unocss
+  vitePlugins.push(Unocss())
+
+  // vite-plugin-vue-setup-extend
+  vitePlugins.push(vueSetupExtend())
+
+  // vite-plugin-html
+  vitePlugins.push(configHtmlPlugin(viteEnv, isBuild))
+
+  // vite-plugin-mock
+  VITE_USE_MOCK && vitePlugins.push(configMockPlugin())
+
+  // unplugin-auto-import/vite
+  vitePlugins.push(createAutoImport())
+
+  return vitePlugins
+}

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

@@ -0,0 +1,14 @@
+import { viteMockServe } from './viteMock'
+
+export function configMockPlugin() {
+  return viteMockServe({
+    ignore: /^_/,
+    mockPath: 'mock',
+    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,
+    )}`,
+  )
+}