refactor(cli/site): the mobile homepage is included in the cli

affects: @varlet/cli, @varlet/ui

packages/varlet-cli/site/mobile/App.vue

@@ -47,8 +47,7 @@
 import config from '@config'
 import { computed, ComputedRef, defineComponent, ref, Ref, watch } from 'vue'
 import { useRoute } from 'vue-router'
-import { watchLang } from '@varlet/ui/src/utils/components'
-import { bigCamelize, removeEmpty } from '../utils'
+import { bigCamelize, removeEmpty, watchLang } from '../utils'
 import { get } from 'lodash'
 
 type Language = Record<string, string>

packages/varlet-ui/src/home/example/index.vue → packages/varlet-cli/site/mobile/components/AppHome.vue

@@ -6,7 +6,12 @@
     </h1>
     <h2 class="varlet-home__desc">{{ description[lang] }}</h2>
   </div>
-  <var-cell v-for="component in components" :key="component.text" @click="toComponent(component)">
+  <var-cell
+    v-for="component in components"
+    :key="component.text"
+    @click="toComponent(component)"
+    v-ripple
+  >
     <template #extra>
       <var-icon name="chevron-right" size="14" />
     </template>
@@ -17,21 +22,13 @@
 </template>
 
 <script>
-import Cell from '../../cell'
-import Icon from '../../icon'
-import Ripple from '../../ripple'
 import config from '@config'
 import { useRouter } from 'vue-router'
 import { reactive, ref } from 'vue'
-import { watchLang, watchPlatform } from '../../utils/components'
+import { watchLang, watchPlatform } from '../../utils'
 
 export default {
-  name: 'HomeExample',
-  directives: { Ripple },
-  components: {
-    [Cell.name]: Cell,
-    [Icon.name]: Icon,
-  },
+  name: 'AppHome',
   setup() {
     const title = ref(config?.title ?? '')
     const logo = ref(config?.logo ?? '')
@@ -57,6 +54,7 @@ export default {
         query: {
           language: lang.value,
           platform: platform.value,
+          replace: component.doc
         },
       })
     }
@@ -74,7 +72,7 @@ export default {
 </script>
 
 <style scoped lang="less">
-@import '../../styles/var';
+@import '~@varlet/ui/es/styles/var';
 
 .logo {
   height: 100px;

packages/varlet-cli/site/mobile/main.ts

@@ -19,13 +19,18 @@ redirect &&
     redirect,
   })
 
+routes.push({
+  path: '/home',
+  component: () => import('./components/AppHome.vue')
+})
+
 const router = createRouter({
   history: createWebHashHistory(),
   scrollBehavior: (to, from, savedPosition) => savedPosition || { left: 0, top: 0 },
   routes,
 })
 
-router.beforeEach((to) => {
+router.beforeEach((to, from) => {
   const language = to.query.language ?? defaultLanguage
   const path = to.path
   const replace = to.query.replace

packages/varlet-cli/site/utils.ts

@@ -1,3 +1,5 @@
+import { onMounted, onUnmounted } from 'vue'
+
 export function camelize(str: string): string {
   return str.replace(/-(\w)/g, (_: any, p: string) => p.toUpperCase())
 }
@@ -41,3 +43,43 @@ export function removeEmpty(object: Record<string, string> = {}) {
     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) {
+  const handleHashchange = () => {
+    const language = getHashSearch().get('language') ?? 'zh-CN'
+    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 addRouteListener(cb: () => void) {
+  onMounted(() => {
+    window.addEventListener('hashchange', cb)
+    window.addEventListener('popstate', cb)
+  })
+  onUnmounted(() => {
+    window.removeEventListener('hashchange', cb)
+    window.removeEventListener('popstate', cb)
+  })
+}

packages/varlet-cli/src/compiler/compileModule.ts

@@ -2,7 +2,7 @@ import webpack from 'webpack'
 import logger from '../shared/logger'
 import { EXAMPLE_DIR_NAME, TESTS_DIR_NAME, DOCS_DIR_NAME, SRC_DIR, ES_DIR, STYLE_DIR_NAME } from '../shared/constant'
 import { copy, ensureFileSync, readdir, removeSync } from 'fs-extra'
-import { getComponentNames, getExportDirNames, isDir, isLess, isScript, isSFC } from '../shared/fsUtils'
+import { getExportComponentNames, getExportDirNames, isDir, isLess, isScript, isSFC } from '../shared/fsUtils'
 import { compileSFC } from './compileSFC'
 import { resolve } from 'path'
 import { compileLibraryEntry, compileScriptFile } from './compileScript'
@@ -76,5 +76,5 @@ export async function compileModule(modules: string | boolean = false) {
     })
   )
 
-  await compileLibraryEntry(ES_DIR, await getComponentNames(), await getExportDirNames())
+  await compileLibraryEntry(ES_DIR, await getExportComponentNames(), await getExportDirNames())
 }

packages/varlet-cli/src/shared/fsUtils.ts

@@ -2,9 +2,9 @@ import { parse, extname, resolve } from 'path'
 import { ensureFileSync, lstatSync, outputFileSync, pathExistsSync, readdir, readdirSync, readFileSync } from 'fs-extra'
 import { EXAMPLE_DIR_NAME, SCRIPTS_EXTENSIONS, SRC_DIR, TESTS_DIR_NAME } from './constant'
 
-export async function getComponentNames(): Promise<string[]> {
+export async function getExportComponentNames(): Promise<string[]> {
   const srcDir: string[] = await readdir(SRC_DIR)
-  return srcDir.filter((filename: string) => isComponentDir(resolve(SRC_DIR, filename)))
+  return srcDir.filter((filename: string) => isExportComponentDir(resolve(SRC_DIR, filename)))
 }
 
 export async function getExportDirNames(): Promise<string[]> {
@@ -24,13 +24,25 @@ export function isSFC(path: string): boolean {
   return pathExistsSync(path) && extname(path) === '.vue'
 }
 
+export function isJSX(path: string): boolean {
+  return pathExistsSync(path) && extname(path) === '.jsx'
+}
+
+export function isTSX(path: string): boolean {
+  return pathExistsSync(path) && extname(path) === '.tsx'
+}
+
 export function isIndexTS(path: string): boolean {
   return pathExistsSync(path) && path.endsWith('index.ts')
 }
 
-export function hasSFC(path: string): boolean {
+export function hasComponent(path: string): boolean {
   const dir = readdirSync(path)
-  return dir.some((filename) => isSFC(resolve(path, filename)))
+
+  return dir.some((filename) => {
+    const file = resolve(path, filename)
+    return isSFC(file) || isJSX(file) || isTSX(file)
+  })
 }
 
 export function outputFileSyncOnChange(path: string, code: string) {
@@ -61,8 +73,8 @@ export function isExportDir(path: string): boolean {
   return pathExistsSync(resolve(path, 'index.js')) || pathExistsSync(resolve(path, 'index.ts'))
 }
 
-export function isComponentDir(path: string): boolean {
-  return hasSFC(path) && isExportDir(path)
+export function isExportComponentDir(path: string): boolean {
+  return hasComponent(path) && isExportDir(path)
 }
 
 export function replaceExt(path: string, ext: string): string {

packages/varlet-ui/src/action-sheet/example/index.vue

@@ -30,7 +30,7 @@ import Button from '../../button'
 import Snackbar from '../../snackbar'
 import { ref, reactive, onUnmounted } from 'vue'
 import { pack, use } from './locale'
-import { watchLang, watchPlatform } from '../../utils/components'
+import { watchLang, watchPlatform } from '@varlet/cli/site/utils'
 import context from '../../context'
 
 export default {

packages/varlet-ui/src/app-bar/example/index.vue

@@ -65,7 +65,7 @@ import Menu from '../../menu'
 import Button from '../../button'
 import Cell from '../../cell'
 import { pack, use } from './locale'
-import { watchLang } from '../../utils/components'
+import { watchLang } from '@varlet/cli/site/utils'
 
 export default {
   name: 'AppBarExample',

packages/varlet-ui/src/badge/example/index.vue

@@ -55,13 +55,13 @@
 </template>
 
 <script>
-import { ref } from 'vue'
+import AppType from '@varlet/cli/site/mobile/components/AppType'
 import Badge from '..'
 import Button from '../../button'
 import Chip from '../../chip'
+import { ref } from 'vue'
 import { pack, use } from './locale'
-import { watchLang } from '../../utils/components'
-import AppType from '@varlet/cli/site/mobile/components/AppType'
+import { watchLang } from '@varlet/cli/site/utils'
 
 export default {
   name: 'BadgeExample',

packages/varlet-ui/src/button/example/index.vue

@@ -67,7 +67,7 @@ import AppType from '@varlet/cli/site/mobile/components/AppType'
 import Snackbar from '../../snackbar'
 import context from '../../context'
 import { pack, use } from './locale'
-import { watchLang, watchPlatform } from '../../utils/components'
+import { watchLang, watchPlatform } from '@varlet/cli/site/utils'
 import { onUnmounted } from 'vue'
 
 export default {

packages/varlet-ui/src/card/example/index.vue

@@ -32,7 +32,7 @@ import Button from '../../button'
 import Card from '..'
 import context from '../../context'
 import { pack, use } from './locale'
-import { watchLang, watchPlatform } from '../../utils/components'
+import { watchLang, watchPlatform } from '@varlet/cli/site/utils'
 import { onUnmounted } from 'vue'
 
 export default {

packages/varlet-ui/src/cell/example/index.vue

@@ -38,7 +38,7 @@ import AppType from '@varlet/cli/site/mobile/components/AppType'
 import Icon from '../../icon'
 import Cell from '..'
 import { pack, use } from './locale'
-import { watchLang } from '../../utils/components'
+import { watchLang } from '@varlet/cli/site/utils'
 
 export default {
   name: 'CellExample',

packages/varlet-ui/src/checkbox-group/example/index.vue

@@ -56,7 +56,7 @@ import Button from '../../button'
 import Row from '../../row'
 import AppType from '@varlet/cli/site/mobile/components/AppType'
 import { reactive, toRefs } from 'vue'
-import { watchLang } from '../../utils/components'
+import { watchLang } from '@varlet/cli/site/utils'
 import { use, pack } from './locale'
 
 export default {

packages/varlet-ui/src/chip/example/index.vue

@@ -62,12 +62,12 @@
 </template>
 
 <script>
-import { ref } from 'vue'
+import AppType from '@varlet/cli/site/mobile/components/AppType'
 import Chip from '..'
 import Icon from '../../icon'
+import { ref } from 'vue'
 import { pack, use } from './locale'
-import { watchLang } from '../../utils/components'
-import AppType from '@varlet/cli/site/mobile/components/AppType'
+import { watchLang } from '@varlet/cli/site/utils'
 
 export default {
   name: 'ChipExample',

packages/varlet-ui/src/collapse/example/index.vue

@@ -50,13 +50,13 @@
 </template>
 
 <script>
-import { reactive, toRefs } from 'vue'
 import AppType from '@varlet/cli/site/mobile/components/AppType'
 import Collapse from '..'
 import CollapseItem from '../../collapse-item'
 import Button from '../../button'
+import { reactive, toRefs } from 'vue'
 import { pack, use } from './locale'
-import { watchLang } from '../../utils/components'
+import { watchLang } from '@varlet/cli/site/utils'
 
 export default {
   name: 'CollapseExample',

packages/varlet-ui/src/countdown/example/index.vue

@@ -35,13 +35,13 @@
 </template>
 
 <script>
-import { ref } from 'vue'
 import AppType from '@varlet/cli/site/mobile/components/AppType'
 import Countdown from '..'
 import Snackbar from '../../snackbar'
 import Button from '../../button'
+import { ref } from 'vue'
 import { pack, use } from './locale'
-import { watchLang } from '../../utils/components'
+import { watchLang } from '@varlet/cli/site/utils'
 
 export default {
   name: 'CountdownExample',

packages/varlet-ui/src/counter/example/index.vue

@@ -33,7 +33,7 @@
 import Counter from '..'
 import AppType from '@varlet/cli/site/mobile/components/AppType'
 import { reactive, toRefs } from 'vue'
-import { watchLang } from '../../utils/components'
+import { watchLang } from '@varlet/cli/site/utils'
 import { use, pack } from './locale'
 
 export default {

packages/varlet-ui/src/date-picker/example/index.vue

@@ -48,7 +48,7 @@ import { reactive, toRefs } from 'vue'
 import AppType from '@varlet/cli/site/mobile/components/AppType'
 import DatePicker from '..'
 import { pack, use } from './locale'
-import { watchLang } from '../../utils/components'
+import { watchLang } from '@varlet/cli/site/utils'
 
 export default {
   name: 'DatePickerExample',

packages/varlet-ui/src/dialog/example/index.vue

@@ -41,7 +41,7 @@ import Cell from '../../cell'
 import AppType from '@varlet/cli/site/mobile/components/AppType'
 import { reactive, toRefs } from 'vue'
 import { pack, use } from './locale'
-import { watchLang } from '../../utils/components'
+import { watchLang } from '@varlet/cli/site/utils'
 
 export default {
   name: 'DialogExample',

packages/varlet-ui/src/divider/example/index.vue

@@ -41,7 +41,7 @@ import Divider from '..'
 import AppBar from '../../app-bar'
 import Icon from '../../icon'
 import { pack, use } from './locale'
-import { watchLang } from '../../utils/components'
+import { watchLang } from '@varlet/cli/site/utils'
 
 export default {
   name: 'DividerExample',

packages/varlet-ui/src/form/example/index.vue

@@ -81,10 +81,10 @@ import Uploader from '../../uploader'
 import Counter from '../../counter'
 import Rate from '../../rate'
 import AppType from '@varlet/cli/site/mobile/components/AppType.vue'
+import context from '../../context'
 import { onUnmounted, reactive, ref } from 'vue'
-import { watchLang, watchPlatform } from '../../utils/components'
+import { watchLang, watchPlatform } from '@varlet/cli/site/utils'
 import { use, pack } from './locale'
-import context from '../../context'
 
 export default {
   name: 'FormExample',

packages/varlet-ui/src/icon/example/index.vue

@@ -52,7 +52,7 @@ import AppType from '@varlet/cli/site/mobile/components/AppType'
 import context from '../../context'
 import { reactive, onMounted, ref, onUnmounted } from 'vue'
 import { use, pack } from './locale'
-import { watchLang, watchPlatform } from '../../utils/components'
+import { watchLang, watchPlatform } from '@varlet/cli/site/utils'
 
 const Clipboard = require('clipboard')
 

packages/varlet-ui/src/image-preview/example/index.vue

@@ -32,7 +32,7 @@ import AppType from '@varlet/cli/site/mobile/components/AppType'
 import Snackbar from '../../snackbar'
 import { defineComponent, onUnmounted, ref } from 'vue'
 import { pack, use } from './locale'
-import { watchLang, watchPlatform } from '../../utils/components'
+import { watchLang, watchPlatform } from '@varlet/cli/site/utils'
 import context from '../../context'
 
 export default defineComponent({

packages/varlet-ui/src/image/example/index.vue

@@ -55,7 +55,7 @@
 import Image from '..'
 import AppType from '@varlet/cli/site/mobile/components/AppType'
 import Row from '../../row'
-import { watchLang } from '../../utils/components'
+import { watchLang } from '@varlet/cli/site/utils'
 import { use, pack } from './locale'
 
 export default {