@gx-design-vue/create-gx-cli 0.0.1

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2022 gx12358
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

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

package/bin/create-gx-cli

@@ -0,0 +1,4 @@
+#!/usr/bin/env node
+
+require = require('esm')(module /*, options*/);
+require('../src/cli.js').cli();

package/package.json

@@ -0,0 +1,31 @@
+{
+  "name": "@gx-design-vue/create-gx-cli",
+  "version": "0.0.1",
+  "license": "MIT",
+  "description": "a cli to bootstrap gx project",
+  "main": "src/index.js",
+  "bin": "bin/create-gx-cli",
+  "publishConfig": {
+    "access": "public"
+  },
+  "keywords": [
+    "gx-cli",
+    "create-project"
+  ],
+  "author": "gx12358",
+  "dependencies": {
+    "chalk": "^2.4.2",
+    "esm": "^3.2.18",
+    "inquirer": "^6.2.2",
+    "kolorist": "^1.6.0",
+    "listr": "^0.14.3",
+    "minimist": "^1.2.7",
+    "ncp": "^2.0.0",
+    "prompts": "^2.4.2"
+  },
+  "files": [
+    "bin/",
+    "src/",
+    "template-*"
+  ]
+}

package/src/cli.js

@@ -0,0 +1,78 @@
+import minimist from 'minimist'
+import prompts from 'prompts'
+import { blue, reset, yellow } from 'kolorist'
+import { createProject } from './main'
+
+const defaultTargetDir = 'gx-cli-project'
+
+const FRAMEWORKS = [
+  {
+    name: 'vue',
+    color: yellow
+  },
+  {
+    name: 'mobile',
+    color: blue
+  }
+]
+
+const TEMPLATES = FRAMEWORKS.map(
+  (f) => (f.variants && f.variants.map((v) => v.name)) || [f.name]
+).reduce((a, b) => a.concat(b), [])
+
+function formatTargetDir(targetDir) {
+  return targetDir ? targetDir.trim().replace(/\/+$/g, '') : ''
+}
+
+function parseArgumentsIntoOptions() {
+  const argv = minimist(process.argv.slice(2), { string: ['_'] })
+  const argTargetDir = formatTargetDir(argv._[0])
+  const argTemplate = argv.template || argv.t
+  return {
+    template: argTemplate,
+    projectName: argTargetDir
+  }
+}
+
+async function promptForMissingOptions(options) {
+  const answers = await prompts([
+    {
+      type: options.projectName ? null : 'text',
+      name: 'projectName',
+      message: reset('Project name:'),
+      initial: defaultTargetDir,
+    },
+    {
+      type: options.template && TEMPLATES.includes(options.template) ? null : 'select',
+      name: 'template',
+      message:
+        typeof options.template === 'string' && !TEMPLATES.includes(options.template)
+          ? reset(
+            `"${options.template}" isn't a valid template. Please choose from below: `,
+          )
+          : reset('Select a framework:'),
+      choices: FRAMEWORKS.map((framework) => {
+        const frameworkColor = framework.color
+        return {
+          title: frameworkColor(framework.name),
+          value: framework
+        }
+      }),
+      default: 'vue'
+    }
+  ])
+
+  return {
+    ...options,
+    template: options.template || answers.template ? answers.template.name : '',
+    projectName: options.projectName || answers.projectName || ''
+  }
+}
+
+export async function cli() {
+  let options = parseArgumentsIntoOptions()
+  options = await promptForMissingOptions(options)
+  if (options.template && options.projectName) {
+    await createProject(options)
+  }
+}

package/src/main.js

@@ -0,0 +1,75 @@
+import chalk from 'chalk'
+import fs from 'fs'
+import { fileURLToPath } from 'url'
+import Listr from 'listr'
+import ncp from 'ncp'
+import path from 'path'
+import { promisify } from 'util'
+
+const access = promisify(fs.access)
+const copy = promisify(ncp)
+const writeFileSync = promisify(fs.writeFileSync)
+
+async function copyTemplateFiles(templateDir, root) {
+  return copy(templateDir, root, {
+    clobber: false
+  })
+}
+
+function writeFile(path, content) {
+  writeFileSync(path, content)
+}
+
+export async function createProject(options) {
+  const cwd = process.cwd()
+
+  const root = path.join(cwd, options.projectName)
+
+  const getProjectName = () =>
+    options.projectName === '.' ? path.basename(path.resolve()) : options.projectName
+
+  const templateDir = path.resolve(
+    fileURLToPath(import.meta.url),
+    '../..',
+    `template-${options.template}-ts`
+  )
+
+  const pkg = JSON.parse(
+    fs.readFileSync(path.join(templateDir, `package.json`), 'utf-8')
+  )
+
+  pkg.name = options.projectName || getProjectName()
+
+  try {
+    await access(templateDir, fs.constants.R_OK)
+  } catch (err) {
+    console.error('%s Invalid template name', chalk.red.bold('ERROR'))
+    process.exit(1)
+  }
+
+  const tasks = new Listr(
+    [
+      {
+        title: 'Copy Project Files',
+        task: () => copyTemplateFiles(templateDir, root)
+      },
+      {
+        title: 'Edit Project package.json',
+        task: () => writeFile(path.join(root, 'package.json'), JSON.stringify(pkg, null, 2))
+      }
+    ],
+    {
+      exitOnError: false
+    }
+  )
+
+  await tasks.run()
+  console.log(`\nDone. Now run:\n`)
+  if (root !== cwd) {
+    console.log(`cd ${path.relative(cwd, root)}`)
+  }
+  console.log(`pnpm(yarn、npm) install`)
+  console.log(`pnpm(yarn、npm) run dev`)
+  console.log()
+  return true
+}

package/template-mobile-ts/.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-ts/.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-ts/.env.pro

@@ -0,0 +1,19 @@
+# 实际执行环境 production
+VITE_NODE_ENV= production
+
+# environment 代码环境
+VITE_USE_MODE = production
+
+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-ts/.env.production

@@ -0,0 +1,19 @@
+# 实际执行环境 production
+VITE_NODE_ENV= test
+
+# environment 代码环境
+VITE_USE_MODE = test
+
+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-ts/.eslintignore

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

package/template-mobile-ts/.eslintrc.js

@@ -0,0 +1,64 @@
+module.exports = {
+  root: true,
+  env: {
+    browser: true,
+    node: true,
+    es6: true,
+  },
+  parser: 'vue-eslint-parser',
+  parserOptions: {
+    parser: '@typescript-eslint/parser',
+    ecmaVersion: 2020,
+    sourceType: 'module',
+    jsxPragma: 'React',
+    ecmaFeatures: {
+      jsx: true,
+    },
+  },
+  extends: [
+    'plugin:vue/vue3-recommended',
+    'plugin:@typescript-eslint/recommended'
+  ],
+  rules: {
+    'vue/script-setup-uses-vars': 'error',
+    '@typescript-eslint/ban-ts-ignore': 'off',
+    '@typescript-eslint/explicit-function-return-type': 'off',
+    '@typescript-eslint/no-explicit-any': 'off',
+    '@typescript-eslint/no-var-requires': 'off',
+    '@typescript-eslint/no-empty-function': 'off',
+    'vue/custom-event-name-casing': 'off',
+    'no-use-before-define': 'off',
+    '@typescript-eslint/no-use-before-define': 'off',
+    '@typescript-eslint/ban-ts-comment': 'off',
+    '@typescript-eslint/ban-types': 'off',
+    '@typescript-eslint/no-non-null-assertion': 'off',
+    '@typescript-eslint/explicit-module-boundary-types': 'off',
+    '@typescript-eslint/no-unused-vars': [
+      'error',
+      {
+        argsIgnorePattern: '^_',
+        varsIgnorePattern: '^_',
+      },
+    ],
+    'no-unused-vars': [
+      'error',
+      {
+        argsIgnorePattern: '^_',
+        varsIgnorePattern: '^_',
+      },
+    ],
+    'space-before-function-paren': 'off',
+
+    'vue/attributes-order': 'off',
+    'vue/one-component-per-file': 'off',
+    'vue/html-closing-bracket-newline': 'off',
+    'vue/max-attributes-per-line': 'off',
+    'vue/multiline-html-element-content-newline': 'off',
+    'vue/singleline-html-element-content-newline': 'off',
+    'vue/attribute-hyphenation': 'off',
+    'vue/require-default-prop': 'off',
+    'vue/require-explicit-emits': 'off',
+    'vue/html-self-closing': 0,
+    'vue/multi-word-component-names': 'off',
+  },
+};

package/template-mobile-ts/.prettierignore

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

package/template-mobile-ts/.stylelintignore

@@ -0,0 +1,3 @@
+/dist/*
+/public/*
+public/*

package/template-mobile-ts/README.md

@@ -0,0 +1,16 @@
+# Vue 3 + TypeScript + Vite
+
+This template should help get you started developing with Vue 3 and TypeScript in Vite. The template uses Vue 3 `<script setup>` SFCs, check out the [script setup docs](https://v3.vuejs.org/api/sfc-script-setup.html#sfc-script-setup) to learn more.
+
+## Recommended IDE Setup
+
+- [VS Code](https://code.visualstudio.com/) + [Volar](https://marketplace.visualstudio.com/items?itemName=Vue.volar)
+
+## Type Support For `.vue` Imports in TS
+
+Since TypeScript cannot handle type information for `.vue` imports, they are shimmed to be a generic Vue component type by default. In most cases this is fine if you don't really care about component prop types outside of templates. However, if you wish to get actual prop types in `.vue` imports (for example to get props validation when using manual `h(...)` calls), you can enable Volar's Take Over mode by following these steps:
+
+1. Run `Extensions: Show Built-in Extensions` from VS Code's command palette, look for `TypeScript and JavaScript Language Features`, then right click and select `Disable (Workspace)`. By default, Take Over mode will enable itself if the default TypeScript extension is disabled.
+2. Reload the VS Code window by running `Developer: Reload Window` from the command palette.
+
+You can learn more about Take Over mode [here](https://github.com/johnsoncodehk/volar/discussions/471).

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

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

package/template-mobile-ts/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-ts/build/plugin/autoImport.ts

@@ -0,0 +1,26 @@
+import autoImport from 'unplugin-auto-import/vite'
+import Components from 'unplugin-vue-components/vite'
+import { VantResolver } from 'unplugin-vue-components/resolvers'
+
+export function createAutoImport() {
+  return [
+    autoImport({
+      include: [
+        /\.[tj]sx?$/, // .ts, .tsx, .js, .jsx
+        /\.vue$/, /\.vue\?vue/, // .vue
+        /\.md$/, // .md
+      ],
+      imports: [
+        'vue',
+        'vue-router'
+      ],
+      dts: 'types/auto-imports.d.ts'
+    }),
+    Components({
+      resolvers: [
+        VantResolver()
+      ],
+      dts: 'types/components.d.ts'
+    })
+  ]
+}

package/template-mobile-ts/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-ts/build/plugin/index.ts

@@ -0,0 +1,38 @@
+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 { configHtmlPlugin } from './html'
+import { configMockPlugin } from './mock'
+import { createAutoImport } from './autoImport'
+
+export function createVitePlugins(viteEnv: ViteEnv, isBuild: boolean) {
+  const {
+    VITE_USE_V_CONSOLE,
+    VITE_USE_MOCK
+  } = viteEnv
+
+  const vitePlugins: (Plugin | PluginOption[])[] = [
+    // have to
+    vue(),
+    // have to
+    vueJsx()
+  ]
+
+  // 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(isBuild))
+
+
+  // unplugin-auto-import/vite
+  vitePlugins.push(createAutoImport())
+
+  return vitePlugins
+}

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

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

package/template-mobile-ts/index.html

@@ -0,0 +1,24 @@
+<!DOCTYPE html>
+<html lang="zh">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" href="/favicon.ico" type="image/x-icon" />
+    <meta
+      name="viewport"
+      content="width=device-width,viewport-fit=cover,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no"
+    />
+    <title>vue-vant-mobile</title>
+    <% for (var i in injectLink) { %>
+    <link rel="stylesheet" type="text/css" href="<%= injectLink[i] %>" />
+    <% } %>
+  </head>
+  <body>
+    <div id="app"></div>
+    <% for (var i in injectScript) { %>
+    <script type="text/javascript" src="<%= injectScript[i] %>"></script>
+    <% } %>
+    <script type="module" src="/src/main.ts"></script>
+    <%- injectVlogScript %>
+    <script src="/js/flexible.js"></script>
+  </body>
+</html>

package/template-mobile-ts/mock/_createProductionServer.ts

@@ -0,0 +1,19 @@
+import { createProdMockServer } from 'vite-plugin-mock/es/createProdMockServer'
+
+const modules = import.meta.globEager('./api/*.ts')
+
+const mockModules: any[] = []
+Object.keys(modules).forEach((key) => {
+  if (key.includes('/_')) {
+    return
+  }
+  if (modules[key] && modules[key]['default']) mockModules.push(...modules[key]['default'])
+  return
+})
+
+/**
+ * Used in a production environment. Need to manually import all modules
+ */
+export function setupProdMockServer() {
+  createProdMockServer(mockModules)
+}