@varlet/cli 1.27.20 → 2.0.0-alpha.1663499244572

package/site/utils.ts

@@ -1,153 +1,167 @@
-import { onMounted, onUnmounted } from 'vue'
-import { get } from 'lodash-es'
-import { formatStyleVars } from './components/utils/elements'
-
-export * from './components/utils/components'
-export * from './components/utils/elements'
-
-export type StyleVars = Record<string, string>
-
-const mountedVarKeys: string[] = []
-
-function StyleProvider(styleVars: StyleVars | null = {}) {
-  mountedVarKeys.forEach((key) => document.documentElement.style.removeProperty(key))
-  mountedVarKeys.length = 0
-
-  const styles: StyleVars = formatStyleVars(styleVars)
-  Object.entries(styles).forEach(([key, value]) => {
-    document.documentElement.style.setProperty(key, value)
-    mountedVarKeys.push(key)
-  })
-}
-
-export interface PCLocationInfo {
-  language: string
-  menuName: string
-}
-
-export function getPCLocationInfo(): PCLocationInfo {
-  const [, language, menuName] = window.location.hash.split('/')
-
-  return {
-    language,
-    menuName,
-  }
-}
-
-export function isPhone() {
-  return /Android|webOS|iPhone|iPod|BlackBerry|Pad/i.test(navigator.userAgent)
-}
-
-export enum MenuTypes {
-  TITLE = 1,
-  COMPONENT = 2,
-  DOCUMENTATION = 3,
-}
-
-export function inIframe() {
-  return window.self !== window.top
-}
-
-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
-  }, {})
-}
-
-export function getHashSearch() {
-  const { href } = window.location
-  const hashSearch = href.slice(href.indexOf('?'))
-
-  return new URLSearchParams(hashSearch)
-}
-
-export function watchLang(cb: (lang: string) => void, platform: 'pc' | 'mobile' = 'mobile') {
-  const handleHashchange = () => {
-    const language = platform === 'mobile' ? getHashSearch().get('language') ?? 'zh-CN' : getPCLocationInfo().language
-
-    cb(language)
-  }
-
-  addRouteListener(handleHashchange)
-
-  handleHashchange()
-}
-
-export function watchPlatform(cb: (platform: string) => void) {
-  const handleHashchange = () => {
-    const platform = getHashSearch().get('platform') ?? 'mobile'
-    cb(platform)
-  }
-
-  addRouteListener(handleHashchange)
-
-  handleHashchange()
-}
-
-export function watchThemes(
-  cb: (themes: 'themes' | 'darkThemes', from: 'pc' | 'mobile' | 'default') => void,
-  shouldUnmount = true
-) {
-  const handleThemesChange = (event: MessageEvent) => {
-    const { data } = event
-    if (data.action === 'themesChange') {
-      cb(data.data, data.from)
-    }
-  }
-
-  window.addEventListener('message', handleThemesChange)
-
-  if (shouldUnmount) {
-    onUnmounted(() => {
-      window.removeEventListener('message', handleThemesChange)
-    })
-  }
-
-  cb(getBrowserThemes(), 'default')
-}
-
-export function addRouteListener(cb: () => void) {
-  onMounted(() => {
-    window.addEventListener('hashchange', cb)
-    window.addEventListener('popstate', cb)
-  })
-  onUnmounted(() => {
-    window.removeEventListener('hashchange', cb)
-    window.removeEventListener('popstate', cb)
-  })
-}
-
-export function setThemes(config: Record<string, any>, name: 'themes' | 'darkThemes') {
-  const themes = get(config, name, {})
-  const styleVars = Object.entries(themes).reduce((styleVars, [key, value]) => {
-    styleVars[`--site-config-${key}`] = value as string
-    return styleVars
-  }, {} as StyleVars)
-
-  StyleProvider(styleVars)
-}
-
-export function getBrowserThemes(themes = 'VARLET_THEMES'): 'darkThemes' | 'themes' {
-  let currentThemes = window.localStorage.getItem(themes) as 'darkThemes' | 'themes'
-
-  if (!currentThemes) {
-    currentThemes = window.matchMedia?.('(prefers-color-scheme: dark)').matches ? 'darkThemes' : 'themes'
-    window.localStorage.setItem(themes, currentThemes)
-  }
-
-  return currentThemes
-}
-
-export function watchDarkMode(dark: StyleVars, cb?: (themes: 'darkThemes' | 'themes') => void) {
-  watchThemes((themes) => {
-    StyleProvider(themes === 'darkThemes' ? dark : null)
-
-    cb?.(themes)
-  })
-}
-
-export function utoa(data: string): string {
-  return btoa(unescape(encodeURIComponent(data)))
-}
+import { onMounted, onUnmounted } from 'vue'
+import { get } from 'lodash-es'
+import { formatStyleVars } from './components/utils/elements'
+import config from "@config";
+
+export * from './components/utils/components'
+export * from './components/utils/elements'
+
+export type StyleVars = Record<string, string>
+
+const mountedVarKeys: string[] = []
+
+function StyleProvider(styleVars: StyleVars | null = {}) {
+  mountedVarKeys.forEach((key) => document.documentElement.style.removeProperty(key))
+  mountedVarKeys.length = 0
+
+  const styles: StyleVars = formatStyleVars(styleVars)
+  Object.entries(styles).forEach(([key, value]) => {
+    document.documentElement.style.setProperty(key, value)
+    mountedVarKeys.push(key)
+  })
+}
+
+export interface PCLocationInfo {
+  language: string
+  menuName: string
+}
+
+export function getPCLocationInfo(): PCLocationInfo {
+  const [, language, menuName] = window.location.hash.split('/')
+
+  return {
+    language,
+    menuName,
+  }
+}
+
+export function isPhone() {
+  return /Android|webOS|iPhone|iPod|BlackBerry|Pad/i.test(navigator.userAgent)
+}
+
+export enum MenuTypes {
+  TITLE = 1,
+  COMPONENT = 2,
+  DOCUMENTATION = 3,
+}
+
+export function inIframe() {
+  return window.self !== window.top
+}
+
+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
+  }, {})
+}
+
+export function getHashSearch() {
+  const { href } = window.location
+  const hashSearch = href.slice(href.indexOf('?'))
+
+  return new URLSearchParams(hashSearch)
+}
+
+export function watchLang(cb: (lang: string) => void, platform: 'pc' | 'mobile' = 'mobile') {
+  const handleHashchange = () => {
+    const language = platform === 'mobile' ? getHashSearch().get('language') ?? 'zh-CN' : getPCLocationInfo().language
+
+    cb(language)
+  }
+
+  addRouteListener(handleHashchange)
+
+  handleHashchange()
+}
+
+export function watchPlatform(cb: (platform: string) => void) {
+  const handleHashchange = () => {
+    const platform = getHashSearch().get('platform') ?? 'mobile'
+    cb(platform)
+  }
+
+  addRouteListener(handleHashchange)
+
+  handleHashchange()
+}
+
+export function watchTheme(
+  cb: (theme: Theme, from: 'pc' | 'mobile' | 'default' | 'playground') => void,
+  shouldUnmount = true
+) {
+  const handleThemeChange = (event: MessageEvent) => {
+    const { data } = event
+    if (data.action === 'theme-change') {
+      cb(data.data, data.from)
+    }
+  }
+
+  window.addEventListener('message', handleThemeChange)
+
+  if (shouldUnmount) {
+    onUnmounted(() => {
+      window.removeEventListener('message', handleThemeChange)
+    })
+  }
+
+  cb(getBrowserTheme(), 'default')
+}
+
+export function addRouteListener(cb: () => void) {
+  onMounted(() => {
+    window.addEventListener('hashchange', cb)
+    window.addEventListener('popstate', cb)
+  })
+  onUnmounted(() => {
+    window.removeEventListener('hashchange', cb)
+    window.removeEventListener('popstate', cb)
+  })
+}
+
+export type Theme = 'lightTheme' | 'darkTheme'
+
+export function setTheme(config: Record<string, any>, name: Theme) {
+  const themeConfig = get(config, name, {})
+  const styleVars = Object.entries(themeConfig).reduce((styleVars, [key, value]) => {
+    styleVars[`--site-config-${key}`] = value as string
+    return styleVars
+  }, {} as StyleVars)
+
+  StyleProvider(styleVars)
+}
+
+export function getBrowserTheme(): Theme {
+  const themeKey = get(config, 'themeKey')
+  const darkThemeConfig = get(config, 'darkTheme')
+
+  if (!darkThemeConfig) {
+    return 'lightTheme'
+  }
+
+  const storageTheme = window.localStorage.getItem(themeKey) as Theme
+
+  if (!storageTheme) {
+    const preferTheme = window.matchMedia?.('(prefers-color-scheme: dark)').matches
+      ? 'darkTheme'
+      : 'lightTheme'
+    window.localStorage.setItem(themeKey, preferTheme)
+
+    return preferTheme
+  }
+
+  return storageTheme
+}
+
+export function watchDarkMode(dark: StyleVars, cb?: (theme: Theme) => void) {
+  watchTheme((theme) => {
+    StyleProvider(theme === 'darkTheme' ? dark : null)
+
+    cb?.(theme)
+  })
+}
+
+export function utoa(data: string): string {
+  return btoa(unescape(encodeURIComponent(data)))
+}

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

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

package/template/create/example/index.ejs

@@ -0,0 +1,15 @@
+<script setup>
+import <%- bigCamelizeNamespace + bigCamelizeName %> from '../index'
+import AppType from '@varlet/cli/site/mobile/components/AppType'
+<% if (locale) { -%>
+import { watchLang } from '@varlet/cli/site/utils'
+import { use, pack } from './locale'
+
+watchLang(use)
+<% } -%>
+</script>
+
+<template>
+  <app-type>Mobile phone example code</app-type>
+  <var-<%- kebabCaseName %>/>
+</template>

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

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

package/{generators/config/i18n/tsx/src/button → template/create}/example/locale/index.ts

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

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

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

package/template/create/index.ejs

@@ -0,0 +1,12 @@
+// Component entry, the folder where the file exists will be exposed to the user
+
+import <%- bigCamelizeName %> from './<%- bigCamelizeName %>.vue'
+import type { App } from 'vue'
+
+<%- bigCamelizeName %>.install = function(app: App) {
+  app.component(<%- bigCamelizeName %>.name, <%- bigCamelizeName %>)
+}
+
+export const _<%- bigCamelizeName %>Component = <%- bigCamelizeName %>
+
+export default <%- bigCamelizeName %>

package/template/create/less.ejs

@@ -0,0 +1,3 @@
+.<%- namespace %>-<%- kebabCaseName %> {
+
+}

package/template/create/props.ts

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

package/template/create/tsx.ejs

@@ -0,0 +1,13 @@
+import { defineComponent } from 'vue'
+import { props } from './props'
+import './<%- kebabCaseName %>.less'
+
+export default defineComponent({
+  name: '<%- bigCamelizeNamespace + bigCamelizeName %>',
+  props,
+  setup(props, { slots }) {
+    return () => {
+      return <div>{ slots.default?.() }</div>
+    }
+  },
+})

package/template/create/vue.ejs

@@ -0,0 +1,17 @@
+<template>
+  <div class="var-<%- kebabCaseName %>"></div>
+</template>
+
+<script lang="ts">
+import { defineComponent } from 'vue'
+import { props } from './props'
+
+export default defineComponent({
+  name: '<%- bigCamelizeNamespace + bigCamelizeName %>',
+  props
+})
+</script>
+
+<style lang="less">
+@import './<%- kebabCaseName %>.less';
+</style>

package/{generators → template/generators}/base/.prettierignore

@@ -1,9 +1,9 @@
-coverage/**
-es/**
-umd/**
-site/**
-public/**
-types/global.d.ts
-*.md
-package.json
-
+coverage/**
+es/**
+umd/**
+site/**
+public/**
+types/global.d.ts
+*.md
+package.json
+

package/{generators → template/generators}/base/.prettierrc

@@ -1,5 +1,5 @@
-{
-  "printWidth": 120,
-  "singleQuote": true,
-  "semi": false
-}
+{
+  "printWidth": 120,
+  "singleQuote": true,
+  "semi": false
+}

package/{generators → template/generators}/base/README.md

@@ -1,82 +1,82 @@
-# varlet-cli-app
-
-### Reference
-
-[@varlet/cli 中文文档](https://github.com/varletjs/varlet/blob/dev/packages/varlet-cli/README.md)
-[@varlet/cli documentation](https://github.com/varletjs/varlet/blob/dev/packages/varlet-cli/README.en-US.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 
-or
-pnpm test:watchAll 
-```
-
-#### 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 create <componentName>
-```
-
+# varlet-cli-app
+
+### Reference
+
+[@varlet/cli 中文文档](https://github.com/varletjs/varlet/blob/dev/packages/varlet-cli/README.md)
+[@varlet/cli documentation](https://github.com/varletjs/varlet/blob/dev/packages/varlet-cli/README.en-US.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 
+or
+pnpm test:watchAll 
+```
+
+#### 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 create <componentName>
+```
+