@maple-design/cli-vue 0.0.0-stage → 1.1.0

package/site/pc/scroll-hash.ts

@@ -0,0 +1,25 @@
+import type { Router } from 'vue-router'
+
+// Like Cedar's active-header-links: replace the URL without navigating the
+// viewport or adding a back entry. Keep preview navigation separate from this.
+export function createScrollHashSync(router: Router) {
+  let pending = false
+  return {
+    get pending() {
+      return pending
+    },
+    async replace(hash: string) {
+      if (pending || router.currentRoute.value.hash === hash) return
+      const { path, query } = router.currentRoute.value
+      const scrollBehavior = router.options.scrollBehavior
+      pending = true
+      router.options.scrollBehavior = undefined
+      try {
+        await router.replace({ path, query, hash })
+      } finally {
+        router.options.scrollBehavior = scrollBehavior
+        pending = false
+      }
+    },
+  }
+}

package/site/route-recovery.spec.ts

@@ -0,0 +1,51 @@
+import { afterEach, expect, it, vi } from 'vitest'
+import type { Router } from 'vue-router'
+import { installRouteRecovery } from './route-recovery'
+
+afterEach(() => vi.unstubAllGlobals())
+function fixture() {
+  const storage = new Map<string, string>()
+  const location = { pathname: '/', assign: vi.fn(), reload: vi.fn() }
+  vi.stubGlobal('window', {
+    location,
+    sessionStorage: {
+      getItem: (key: string) => storage.get(key) ?? null,
+      setItem: (key: string, value: string) => storage.set(key, value),
+      removeItem: (key: string) => storage.delete(key),
+    },
+  })
+  let error: (error: Error, to: { fullPath: string }) => void
+  let complete: (to: object, from: object, failure?: object) => void
+  const router = {
+    onError: (handler: typeof error) => {
+      error = handler
+    },
+    afterEach: (handler: typeof complete) => {
+      complete = handler
+    },
+    resolve: (path: string) => ({ href: '#' + path }),
+  } as unknown as Router
+  installRouteRecovery(router)
+  return {
+    location,
+    storage,
+    error: (...args: Parameters<typeof error>) => error(...args),
+    complete: () => complete({}, {}),
+  }
+}
+it('reloads a stale chunk at the requested Input route once, then clears the guard on success', () => {
+  const host = fixture()
+  const failure = new Error('Failed to fetch dynamically imported module: /assets/input-old.js')
+  host.error(failure, { fullPath: '/zh-CN/input' })
+  expect(host.location.assign).toHaveBeenCalledWith('#/zh-CN/input')
+  expect(host.location.reload).toHaveBeenCalledTimes(1)
+  host.error(failure, { fullPath: '/zh-CN/input' })
+  expect(host.location.reload).toHaveBeenCalledTimes(1)
+  host.complete()
+  expect(host.storage.size).toBe(0)
+})
+it('does not reload for component errors', () => {
+  const host = fixture()
+  host.error(new Error('Component render failed'), { fullPath: '/zh-CN/input' })
+  expect(host.location.reload).not.toHaveBeenCalled()
+})

package/site/route-recovery.ts

@@ -0,0 +1,38 @@
+import type { Router } from 'vue-router'
+
+const chunkFailure =
+  /Failed to fetch dynamically imported module|Importing a module script failed|error loading dynamically imported module|Loading chunk .+ failed|Unable to preload CSS/i
+
+/** A preview rebuild replaces hashed assets. Retry the requested route with the new entry once. */
+export function installRouteRecovery(router: Router) {
+  const key = `maple-site-route-retry:${window.location.pathname}`
+  let retry: string | null = null
+  try {
+    retry = window.sessionStorage.getItem(key)
+  } catch {
+    /* Storage can be unavailable in embedded previews. */
+  }
+  router.onError((error, to) => {
+    if (!chunkFailure.test(String(error?.message ?? error)) || retry === to.fullPath) {
+      return
+    }
+    retry = to.fullPath
+    try {
+      window.sessionStorage.setItem(key, retry)
+    } catch {
+      /* The in-memory guard still prevents repeated retries. */
+    }
+    window.location.assign(router.resolve(to.fullPath).href)
+    window.location.reload()
+  })
+  router.afterEach((_to, _from, failure) => {
+    if (!failure) {
+      retry = null
+      try {
+        window.sessionStorage.removeItem(key)
+      } catch {
+        /* No persistent guard was stored. */
+      }
+    }
+  })
+}

package/site/tsconfig.json

@@ -0,0 +1,16 @@
+{
+  "compilerOptions": {
+    "target": "es2017",
+    "strict": true,
+    "declaration": true,
+    "skipLibCheck": true,
+    "esModuleInterop": true,
+    "downlevelIteration": true,
+    "resolveJsonModule": true,
+    "jsx": "preserve",
+    "lib": ["esnext", "dom"],
+    "module": "esnext",
+    "moduleResolution": "node",
+    "outDir": "./lib"
+  }
+}

package/site/types.ts

@@ -0,0 +1,6 @@
+import { type IContext } from '@maple-design/ui-vue'
+
+export interface SiteContext extends IContext {
+  showPlayground: boolean
+  playgroundURL: string
+}

package/site/utils.ts

@@ -0,0 +1,45 @@
+export interface Menu {
+  doc: string
+  text: Record<string, string>
+  type: MenuTypes
+  useMobile?: boolean
+  parent?: string
+}
+
+export enum MenuTypes {
+  TITLE = 1,
+  COMPONENT = 2,
+  DOCUMENTATION = 3,
+}
+
+export function removeEmpty(object: Record<string, string> = {}) {
+  return Object.keys(object).reduce((record: Record<string, string>, key) => {
+    const value = object[key]
+    value && (record[key] = value)
+    return record
+  }, {})
+}
+
+const absoluteAssetRE = /^(?:[a-z][a-z\d+.-]*:|\/\/|\/|#)/i
+
+/** Resolve a public asset against Vite's configured base path. */
+export function resolveSiteAsset(source = '') {
+  if (!source || absoluteAssetRE.test(source)) {
+    return source
+  }
+
+  const base = import.meta.env.BASE_URL || '/'
+  return `${base.endsWith('/') ? base : `${base}/`}${source.replace(/^\.\//, '')}`
+}
+
+export function isPhone() {
+  return /Android|webOS|iPhone|iPod|BlackBerry|Pad/i.test(navigator.userAgent)
+}
+
+export function inIframe() {
+  return window.self !== window.top
+}
+
+export function utoa(data: string): string {
+  return btoa(unescape(encodeURIComponent(data)))
+}

package/template/create/[ComponentName].tsx.ejs

@@ -0,0 +1,16 @@
+import { defineComponent } from 'vue'
+import { props } from './props'
+import { createNamespace } from '../utils/components'
+import './style'
+
+const { name, n, classes } = createNamespace('<%- kebabCaseName %>')
+
+export default defineComponent({
+  name,
+  props,
+  setup(props, { slots }) {
+    return () => {
+      return <div class={n()}>{ slots.default?.() }</div>
+    }
+  },
+})

package/template/create/[ComponentName].vue.ejs

@@ -0,0 +1,21 @@
+<template>
+  <div :class="n()"></div>
+</template>
+
+<script lang="ts">
+  import { defineComponent } from 'vue'
+  import { props } from './props'
+  import { createNamespace } from '../utils/components'
+
+  const { name, n, classes } = createNamespace('<%- kebabCaseName %>')
+
+  export default defineComponent({
+    name,
+    props,
+    setup(props) {
+      return {
+        n,
+      }
+    },
+  })
+</script>

package/template/create/[componentName].d.ts.ejs

@@ -0,0 +1,13 @@
+import { VarComponent, BasicAttributes, SetPropsDefaults } from '../../types/varComponent'
+
+export declare const <%- camelizeName %>Props: Record<keyof <%- bigCamelizeName %>Props, any>
+
+export interface <%- bigCamelizeName %>Props extends BasicAttributes {}
+
+export class <%- bigCamelizeName %> extends VarComponent {
+  static setPropsDefaults: SetPropsDefaults<<%- bigCamelizeName %>Props>
+  
+  $props: <%- bigCamelizeName %>Props
+}
+
+export class _<%- bigCamelizeName %>Component extends <%- bigCamelizeName %> {}

package/template/create/__tests__/index.spec.js.ejs

@@ -0,0 +1,10 @@
+import <%- bigCamelizeName %> from '..'
+import <%- bigCamelizeNamespace + bigCamelizeName %> from '../<%- bigCamelizeName %>'
+import { createApp } from 'vue'
+import { mount } from '@vue/test-utils'
+import { expect, test } from 'vitest'
+
+test('test <%- kebabCaseName %> plugin', () => {
+  const app = createApp({}).use(<%- bigCamelizeName %>)
+  expect(app.component(<%- bigCamelizeName %>.name)).toBeTruthy()
+})

package/template/create/example/index.vue.ejs

@@ -0,0 +1,17 @@
+<script setup>
+import <%- bigCamelizeNamespace + bigCamelizeName %> from '..'
+<% if (!locale) { -%>
+import { AppType } from '@maple-design/cli-vue/client'
+<% } -%>
+<% if (locale) { -%>
+import { watchLang, AppType } from '@maple-design/cli-vue/client'
+import { use, t } from './locale'
+
+watchLang(use)
+<% } -%>
+</script>
+
+<template>
+  <app-type>Mobile phone example code</app-type>
+  <mp-<%- kebabCaseName %>/>
+</template>

package/template/create/example/locale/_index.ts

@@ -0,0 +1,17 @@
+import { Locale } from '@maple-design/ui-vue'
+import enUS from './en-US'
+import zhCN from './zh-CN'
+
+const { add, use: exampleUse, t, merge } = Locale.useLocale()
+
+const use = (lang: string) => {
+  Locale.use(lang)
+  exampleUse(lang)
+}
+
+Locale.add('zh-CN', Locale.zhCN)
+Locale.add('en-US', Locale.enUS)
+add('zh-CN', zhCN)
+add('en-US', enUS)
+
+export { add, t, merge, use }

package/template/create/example/locale/en-US.ts

@@ -0,0 +1,3 @@
+export default {
+  // Example locale
+}

package/template/create/example/locale/index.ts

@@ -0,0 +1,24 @@
+// @ts-nocheck
+// lib
+import { add as _add, use as _use, useLocale } from '../../../locale'
+import _enCN from '../../../locale/en-US'
+import _zhCN from '../../../locale/zh-CN'
+import enUS from './en-US'
+// mobile example doc
+import zhCN from './zh-CN'
+
+const { add, use: exampleUse, t, merge } = useLocale()
+
+const use = (lang: string) => {
+  _use(lang)
+  exampleUse(lang)
+}
+
+export { add, t, merge, use }
+
+// lib
+_add('zh-CN', _zhCN)
+_add('en-US', _enCN)
+// mobile example doc
+add('zh-CN', zhCN)
+add('en-US', enUS)

package/template/create/example/locale/zh-CN.ts

@@ -0,0 +1,3 @@
+export default {
+  // Example locale
+}

package/template/create/index.ts.ejs

@@ -0,0 +1,12 @@
+import <%- bigCamelizeName %> from './<%- bigCamelizeName %><%- style === 'vue' ? '.vue' : '' %>'
+import { withInstall, withPropsDefaultsSetter } from '../utils/components'
+import { props as <%- camelizeName %>Props } from './props'
+
+withInstall(<%- bigCamelizeName %>)
+withPropsDefaultsSetter(<%- bigCamelizeName %>, <%- camelizeName %>Props)
+
+export { <%- camelizeName %>Props  }
+
+export const _<%- bigCamelizeName %>Component = <%- bigCamelizeName %>
+
+export default <%- bigCamelizeName %>

package/template/create/props.ts

@@ -0,0 +1 @@
+export const props = {}

package/template/create/style/[componentName].less.ejs

@@ -0,0 +1,5 @@
+@import '../../style/common';
+
+.<%- namespace %>-<%- kebabCaseName %> {
+
+}

package/template/create/style/index.less.ejs

@@ -0,0 +1 @@
+@import './<%- camelizeName %>';

package/template/create/style/index.ts.ejs

@@ -0,0 +1 @@
+import './index.less'

package/template/generators/base/.browserslistrc

@@ -0,0 +1,2 @@
+Chrome >= 54
+iOS >= 10

package/template/generators/base/.prettierignore

@@ -0,0 +1,14 @@
+coverage/**
+highlight/**
+es/**
+umd/**
+lib/**
+site/**
+public/**
+.maple/**
+types/index.d.ts
+*.md
+package.json
+
+pnpm-lock.yaml
+pnpm-workspace.yaml

package/template/generators/base/README.md

@@ -0,0 +1,90 @@
+# Vue component library template
+
+### Reference
+
+[@maple-design/cli-vue 中文文档](https://github.com/loca-spirit/maple-design-mobile/blob/main/packages/cli/README.md)
+[@maple-design/cli-vue documentation](https://github.com/loca-spirit/maple-design-mobile/blob/main/packages/cli/README.md)
+
+### Quickstart
+
+```shell
+pnpm install
+pnpm dev
+```
+
+### Commands
+
+#### Start the development server
+
+```shell
+pnpm dev
+```
+
+#### Build documentation site
+
+```shell
+pnpm build
+```
+
+#### Building component libraries
+
+```shell
+pnpm compile
+```
+
+#### Lint code
+
+```shell
+pnpm lint
+```
+
+#### Run unit test
+
+```shell
+pnpm test
+```
+
+#### Run unit test in watch mode
+
+```shell
+pnpm test:watch 
+```
+
+#### Run unit test and report coverage
+
+```shell
+pnpm test:coverage 
+```
+
+#### Mount Git Hooks
+
+```shell
+npx simple-git-hooks
+```
+
+#### Generate changelog
+
+```shell
+pnpm changelog
+```
+
+#### Release
+
+tips: 
+- 1.The registry of npm must be the official source of npm
+- 2.The npm must be logged in
+
+```shell
+pnpm release
+```
+
+#### Create component template files
+
+```shell
+pnpm run create
+```
+
+
+本文件夹是组件库项目模板，不是工作区包。`maple-library-template-vue` 为模板占位名称；CLI 生成后使用用户输入的项目包名，并将内部 workspace 依赖替换为版本依赖。
+
+生成项目已包含 ui-build.config.mjs 和 tsconfig.declaration.json。pnpm compile 输出 es/index.mjs、lib/index.js、types-generated/index.d.ts 和 es/library.css；发布包 files 包含 types-generated。运行时需要的 shared 包保留在 dependencies，所有内部版本在生成时转为 semver。

package/template/generators/base/_gitignore

@@ -0,0 +1,19 @@
+node_modules
+
+.maple
+.idea
+.vscode
+.history
+*.log
+.DS_Store
+index.draft.vue
+*.draft.md
+
+site
+lib
+es
+umd
+coverage
+highlight
+
+.eslintcache

package/template/generators/base/eslint.config.js

@@ -0,0 +1,15 @@
+const { defineConfig } = require("@configurajs/eslint");
+
+module.export = defineConfig({
+  ignores: [
+    "lib/**",
+    "es/**",
+    "umd/**",
+    "site/**",
+    "public/**",
+    "coverage/**",
+    "highlight/**",
+    "types/index.d.ts",
+    ".maple/**",
+  ],
+});

package/template/generators/base/package.json

@@ -0,0 +1,97 @@
+{
+  "name": "maple-library-template-vue",
+  "version": "0.0.0",
+  "description": "A components library example",
+  "main": "lib/index.js",
+  "module": "es/index.mjs",
+  "typings": "types-generated/index.d.ts",
+  "web-types": "highlight/web-types.en-US.json",
+  "keywords": [
+    "Vue",
+    "UI"
+  ],
+  "license": "MIT",
+  "sideEffects": [
+    "es/**/style/*",
+    "lib/**/style/*",
+    "*.css",
+    "*.less"
+  ],
+  "scripts": {
+    "preinstall": "npx only-allow pnpm",
+    "postinstall": "simple-git-hooks",
+    "dev": "maple-cli dev",
+    "build": "maple-cli build",
+    "preview": "maple-cli preview",
+    "compile": "maple-cli compile",
+    "lint": "eslint . --fix",
+    "format": "prettier --write .",
+    "changelog": "maple-cli changelog",
+    "release": "pnpm compile && maple-cli release",
+    "test": "maple-cli test",
+    "test:watch": "maple-cli test -w",
+    "test:coverage": "maple-cli test -cov",
+    "create": "maple-cli create"
+  },
+  "peerDependencies": {
+    "vue": "^3.2.0"
+  },
+  "devDependencies": {
+    "@maple-design/cli-vue": "workspace:*",
+    "@maple-design/icons-vue": "workspace:*",
+    "@maple-design/touch-emulator-vue": "workspace:*",
+    "@maple-design/ui-vue": "workspace:*",
+    "@vue/test-utils": "2.4.6",
+    "@vue/runtime-core": "3.5.13",
+    "@vitest/coverage-istanbul": "3.0.6",
+    "@configurajs/eslint": "*",
+    "@configurajs/prettier": "*",
+    "jsdom": "24.1.1",
+    "vitest": "3.0.6",
+    "clipboard": "^2.0.6",
+    "eslint": "^9.17.0",
+    "lint-staged": "^10.5.0",
+    "live-server": "^1.2.1",
+    "prettier": "^3.5.2",
+    "simple-git-hooks": "^2.8.0",
+    "typescript": "5.6.3",
+    "vue": "3.5.13",
+    "vue-router": "4.5.0",
+    "vue-tsc": "^2.2.12"
+  },
+  "lint-staged": {
+    "*.{ts,tsx,js,vue,less}": "prettier --write",
+    "*.{ts,tsx,js,vue}": "eslint --fix"
+  },
+  "simple-git-hooks": {
+    "pre-commit": "pnpm exec lint-staged --allow-empty --concurrent false",
+    "commit-msg": "pnpm exec maple-cli commit-lint -p $1"
+  },
+  "packageManager": "pnpm@9.6.0",
+  "engines": {
+    "pnpm": ">=9.0",
+    "node": ">=20.19.0"
+  },
+  "dependencies": {
+    "@maple-design/shared-vue": "workspace:*"
+  },
+  "style": "es/library.css",
+  "exports": {
+    ".": {
+      "types": "./types-generated/index.d.ts",
+      "import": "./es/index.mjs",
+      "require": "./lib/index.js"
+    },
+    "./style": "./es/library.css",
+    "./package.json": "./package.json",
+    "./*": {
+      "types": "./types-generated/*/index.d.ts",
+      "import": "./es/*/index.mjs",
+      "require": "./lib/*/index.js"
+    },
+    "./*/style": {
+      "import": "./es/*/style/index.mjs",
+      "require": "./lib/*/style/index.js"
+    }
+  }
+}

package/template/generators/base/prettier.config.js

@@ -0,0 +1,3 @@
+const { defineConfig } = require("@configurajs/prettier");
+
+module.export = defineConfig();

package/template/generators/base/public/logo.svg

@@ -0,0 +1,30 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="138px" height="146px" viewBox="0 0 138 146" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <title>编组 2备份 4</title>
+    <defs>
+        <linearGradient x1="42.6722626%" y1="13.5075845%" x2="58.7114688%" y2="100%" id="linearGradient-1">
+            <stop stop-color="#3999FF" offset="0%"></stop>
+            <stop stop-color="#8F28FB" offset="100%"></stop>
+        </linearGradient>
+        <linearGradient x1="50%" y1="15.5408894%" x2="50%" y2="100%" id="linearGradient-2">
+            <stop stop-color="#722DFA" offset="0%"></stop>
+            <stop stop-color="#21D4FD" offset="100%"></stop>
+        </linearGradient>
+        <linearGradient x1="50%" y1="0%" x2="50%" y2="100%" id="linearGradient-3">
+            <stop stop-color="#0DBBFA" offset="0%"></stop>
+            <stop stop-color="#2EF4D0" offset="100%"></stop>
+        </linearGradient>
+        <linearGradient x1="40.4455375%" y1="0%" x2="61.1107186%" y2="100%" id="linearGradient-4">
+            <stop stop-color="#54E7FA" offset="0%"></stop>
+            <stop stop-color="#3478FF" offset="100%"></stop>
+        </linearGradient>
+    </defs>
+    <g id="页面-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="编组-2备份-4">
+            <path d="M61.1454478,0 L80.8081453,0 C83.2200978,-4.36166956e-15 85.3680539,1.52588995 86.1620863,3.80339469 L133.110133,138.463395 C134.14103,141.420295 132.579697,144.653043 129.622797,145.683941 C129.022705,145.893158 128.391709,146 127.756192,146 L104.065574,146 L104.065574,146 L55.7915068,7.53660531 C54.7606091,4.57970533 56.3219425,1.34695661 59.2788425,0.316058965 C59.8789348,0.106841966 60.5099303,8.99852687e-15 61.1454478,0 Z" id="矩形备份-19" fill="url(#linearGradient-1)" transform="translate(94.450820, 73.000000) scale(-1, 1) translate(-94.450820, -73.000000) "></path>
+            <path d="M10.7758114,0.143137255 L28.2717621,0.143137255 C31.4003503,0.143137255 33.937707,2.67721101 33.9417574,5.8057966 L34.0758197,109.356863 L34.0758197,109.356863 L2.40368852,141.419608 L2.27081564,8.65664929 C2.26611457,3.95946985 6.0701199,0.147842583 10.7672993,0.143141514 C10.7701367,0.143138675 10.772974,0.143137255 10.7758114,0.143137255 Z" id="矩形备份-20" fill="url(#linearGradient-2)" transform="translate(18.169057, 70.781373) scale(-1, 1) translate(-18.169057, -70.781373) "></path>
+            <path d="M59.4954713,57.5193828 L80.5061701,57.5193828 C83.6322889,57.5193828 86.1686187,60.0496067 86.1761536,63.1757164 L86.440508,172.851892 C86.4456008,174.964841 85.2753699,176.905341 83.4041828,177.886788 L54.099775,193.257088 L54.099775,193.257088 L53.8254839,63.201341 C53.8188796,60.0698934 56.3520656,57.5259998 59.4835131,57.5193954 C59.4874992,57.519387 59.4914852,57.5193828 59.4954713,57.5193828 Z" id="矩形备份-21" fill="url(#linearGradient-3)" transform="translate(70.131148, 125.388235) rotate(-270.000000) translate(-70.131148, -125.388235) "></path>
+            <path d="M8.0988647,0 L27.7025748,0 C30.0859285,1.09876935e-16 32.2148633,1.49046324 33.0303471,3.72996343 L83.9352009,143.526025 L83.9352009,143.526025 L84.8360656,146 L57.1334908,146 C54.7501371,146 52.6212023,144.509537 51.8057185,142.270037 L2.77109236,7.61003657 C1.69963975,4.66758916 3.21638072,1.41368027 6.15882813,0.34222766 C6.78058382,0.115823698 7.43717075,1.89790805e-15 8.0988647,0 Z" id="矩形备份-22" fill="url(#linearGradient-4)"></path>
+        </g>
+    </g>
+</svg>

package/template/generators/base/shims/shims-md.d.ts

@@ -0,0 +1,4 @@
+declare module "*.md" {
+  const content: string;
+  export default content;
+}

package/template/generators/base/shims/shims-vue.d.ts

@@ -0,0 +1,6 @@
+declare module "*.vue" {
+  import { defineComponent } from "vue";
+
+  const component: ReturnType<typeof defineComponent>;
+  export default component;
+}