@varlet/cli 2.0.0-alpha.1663499244572 → 2.0.0-alpha.1664031123039

package/site/utils.ts

@@ -1,167 +1,165 @@
-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)))
-}
+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/{tsx.ejs → [ComponentName].tsx.ejs}

@@ -1,13 +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>
-    }
-  },
-})
+import { defineComponent } from 'vue'
+import { props } from './props'
+import './<%- camelizeName %>.less'
+
+export default defineComponent({
+  name: '<%- bigCamelizeNamespace + bigCamelizeName %>',
+  props,
+  setup(props, { slots }) {
+    return () => {
+      return <div class="<%- namespace %>-<%- kebabCaseName %>">{ slots.default?.() }</div>
+    }
+  },
+})

package/template/create/{vue.ejs → [ComponentName].vue.ejs}

@@ -1,17 +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>
+<template>
+  <div class="<%- namespace %>-<%- 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 './<%- camelizeName %>.less';
+</style>

package/template/create/{less.ejs → [componentName].less.ejs}

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

package/template/create/__tests__/{index.spec.ejs → index.spec.js.ejs}

@@ -1,8 +1,13 @@
-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()
-})
+import <%- bigCamelizeName %> from '..'
+import { createApp } from 'vue'
+import { mount } from '@vue/test-utils'
+
+test('test <%- kebabCaseName %> plugin', () => {
+  const app = createApp({}).use(<%- bigCamelizeName %>)
+  expect(app.component(<%- bigCamelizeName %>.name)).toBeTruthy()
+})
+
+test('test <%- kebabCaseName %> snapshot', () => {
+  const wrapper = mount(<%- bigCamelizeName %>)
+  expect(wrapper.html()).toMatchSnapshot()
+})

package/template/create/example/{index.ejs → index.vue.ejs}

@@ -1,15 +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>
+<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

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

package/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

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

package/template/create/{index.ejs → index.ts.ejs}

@@ -1,12 +1,11 @@
-// 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 %>
+// 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/props.ts

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

package/template/generators/base/.prettierignore

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

package/template/generators/base/.prettierrc

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