@gx-design-vue/create-gx-cli 0.1.10 → 0.1.12

package/template-gx-design-thin/build/vite/plugin/html.ts

@@ -0,0 +1,39 @@
+import type { PluginOption } from 'vite'
+import { createHtmlPlugin } from 'vite-plugin-html'
+
+import cdnModules from '../cdn'
+import { GLOB_CONFIG_FILE_NAME } from '../../constant'
+import { defaultSettings } from '../../../config'
+import pkg from '../../../package.json'
+
+const { title, publicPath, useCdn } = defaultSettings
+
+export function configHtmlPlugin(_: ViteEnv, isBuild: boolean) {
+  const path = publicPath.endsWith('/') ? publicPath : `${publicPath}/`
+
+  const getAppConfigSrc = () => {
+    return `${path || '/'}${GLOB_CONFIG_FILE_NAME}?v=${pkg.version}-${new Date().getTime()}`
+  }
+
+  const htmlPlugin: PluginOption[] = createHtmlPlugin({
+    minify: isBuild,
+    inject: {
+      // Inject data into ejs template
+      data: {
+        VUE_APP_TITLE: title,
+        injectScript: useCdn && isBuild ? cdnModules.map(e => e.js).filter(el => el) : [],
+        injectLink: useCdn && isBuild ? cdnModules.map(e => e.css).filter(el => el) : []
+      },
+      // Embed the generated app.config.js file
+      tags: isBuild
+        ? [
+          {
+            tag: 'script',
+            attrs: { src: getAppConfigSrc() }
+          }
+        ]
+        : []
+    }
+  })
+  return htmlPlugin
+}

package/template-gx-design-thin/build/vite/plugin/index.ts

@@ -0,0 +1,75 @@
+import type { PluginOption } from 'vite'
+
+import vue from '@vitejs/plugin-vue'
+import vueJsx from '@vitejs/plugin-vue-jsx'
+import VueDevTools from 'vite-plugin-vue-devtools'
+import legacy from '@vitejs/plugin-legacy'
+
+import vueSetupExtend from 'vite-plugin-vue-setup-extend'
+
+import Unocss from 'unocss/vite'
+
+import { configPwaConfig } from './pwa'
+import { configHtmlPlugin } from './html'
+import { configMockPlugin } from './mock'
+import viteNotice from './viteNotice'
+import { createAutoImport } from './autoImport'
+import { configCompressPlugin } from './compress'
+import { createAppConfigPlugin } from './appConfig'
+import { configVisualizerConfig } from './visualizer'
+
+export async function createVitePlugins(viteEnv: ViteEnv, isBuild: boolean) {
+  const {
+    VITE_APP_ENV,
+    VITE_USE_MOCK,
+    VITE_LEGACY,
+    VITE_BUILD_COMPRESS,
+    VITE_BUILD_COMPRESS_DELETE_ORIGIN_FILE
+  } = viteEnv
+
+  const isDev = VITE_APP_ENV === 'dev'
+
+  const vitePlugins: PluginOption[] = [
+    // have to
+    vue(),
+    // have to
+    vueJsx()
+  ]
+
+  // vite-plugin-app-info
+  vitePlugins.push(await createAppConfigPlugin({ isBuild }))
+  // vite-plugin-vue-devtools
+  vitePlugins.push(VueDevTools() as any)
+  // vite-plugin-windicss
+  vitePlugins.push(Unocss())
+  // vite-plugin-vue-setup-extend
+  vitePlugins.push(vueSetupExtend())
+  // @vitejs/plugin-legacy
+  VITE_LEGACY && isBuild && vitePlugins.push(legacy())
+  // vite-plugin-html
+  vitePlugins.push(configHtmlPlugin(viteEnv, isBuild))
+  // vite-plugin-build-info
+  vitePlugins.push(await viteNotice())
+  // vite-plugin-mock
+  const useMock = isDev || VITE_USE_MOCK
+  useMock && vitePlugins.push(configMockPlugin())
+
+  // rollup-plugin-visualizer
+  vitePlugins.push(configVisualizerConfig())
+
+  // unplugin-auto-import/vite
+  vitePlugins.push(createAutoImport())
+
+  // The following plugins only work in the production environment
+  if (isBuild) {
+    // rollup-plugin-gzip
+    vitePlugins.push(
+      configCompressPlugin(VITE_BUILD_COMPRESS, VITE_BUILD_COMPRESS_DELETE_ORIGIN_FILE)
+    )
+
+    // vite-plugin-pwa
+    vitePlugins.push(configPwaConfig(viteEnv))
+  }
+
+  return vitePlugins
+}

package/template-gx-design-thin/build/vite/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-gx-design-thin/build/vite/plugin/pwa.ts

@@ -0,0 +1,31 @@
+import { VitePWA } from 'vite-plugin-pwa'
+
+import { defaultSettings } from '../../../config'
+
+export function configPwaConfig(env: ViteEnv) {
+  const { title, shortName } = defaultSettings
+  const { VITE_USE_PWA } = env
+
+  if (VITE_USE_PWA) {
+    const pwaPlugin = VitePWA({
+      manifest: {
+        name: title || 'GX Pro Admin',
+        short_name: shortName || 'gx_pro_admin',
+        icons: [
+          {
+            src: './resource/img/pwa-192x192.png',
+            sizes: '192x192',
+            type: 'image/png'
+          },
+          {
+            src: './resource/img/pwa-512x512.png',
+            sizes: '512x512',
+            type: 'image/png'
+          }
+        ]
+      }
+    })
+    return pwaPlugin
+  }
+  return []
+}

package/template-gx-design-thin/build/vite/plugin/visualizer.ts

@@ -0,0 +1,14 @@
+import { visualizer } from 'rollup-plugin-visualizer'
+import { isReportMode } from '../../util'
+
+export function configVisualizerConfig() {
+  if (isReportMode()) {
+    return visualizer({
+      filename: './node_modules/.cache/visualizer/stats.html',
+      open: true,
+      gzipSize: true,
+      brotliSize: true
+    }) as Plugin
+  }
+  return []
+}

package/template-gx-design-thin/build/vite/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-gx-design-thin/build/vite/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 { match, pathToRegexp } from 'path-to-regexp'
+import { isAbsPath, isArray, isFunction, isRegExp, sleep } from './utils'
+import type { IncomingMessage, NextHandleFunction } from 'connect'
+import type { GetOutputFile } from 'bundle-require'
+import { bundleRequire, JS_EXT_RE } from 'bundle-require'
+import type { ResolvedConfig } from 'vite'
+
+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-gx-design-thin/build/vite/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-gx-design-thin/build/vite/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'
+}

package/template-gx-design-thin/build/vite/plugin/viteMock/utils.ts

@@ -0,0 +1,48 @@
+import fs from 'node:fs'
+
+const toString = Object.prototype.toString
+
+export function is(val: unknown, type: string) {
+  return toString.call(val) === `[object ${type}]`
+}
+
+export function fileExists(f: string) {
+  try {
+    fs.accessSync(f, fs.constants.W_OK);
+    return true;
+  } catch (error) {
+    return false;
+  }
+}
+
+export function isFunction<T = Function>(val: unknown): val is T {
+  return is(val, 'Function') || is(val, 'AsyncFunction')
+}
+
+export function isArray(val: any): val is Array<any> {
+  return val && Array.isArray(val)
+}
+
+export function isRegExp(val: unknown): val is RegExp {
+  return is(val, 'RegExp')
+}
+
+export function isAbsPath(path: string | undefined) {
+  if (!path) {
+    return false
+  }
+  // Windows 路径格式：C:\ 或 \\ 开头，或已含盘符（D:\path\to\file）
+  if (/^([a-zA-Z]:\\|\\\\|(?:\/|\uFF0F){2,})/.test(path)) {
+    return true
+  }
+  // Unix/Linux 路径格式：/ 开头
+  return /^\/[^/]/.test(path)
+}
+
+export function sleep(time: number) {
+  return new Promise((resolve) => {
+    setTimeout(() => {
+      resolve('')
+    }, time)
+  })
+}