fix(cli/types): add global.d.ts for volar

affects: @varlet/cli, @varlet/ui

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

@@ -1,21 +1,33 @@
 import { ensureDir, readdir, writeFile } from 'fs-extra'
-import { TYPES_DIR } from '../shared/constant'
-import { camelize } from '../shared/fsUtils'
+import { TYPES_DIR, UI_PACKAGE_JSON } from '../shared/constant'
+import { bigCamelize } from '../shared/fsUtils'
 import { resolve } from 'path'
+import { getVarletConfig } from '../config/varlet.config'
+import { get } from 'lodash'
 
 export async function compileTypes() {
+  const varletConfig = getVarletConfig()
+  const namespace = get(varletConfig, 'namespace')
+  const { name } = require(UI_PACKAGE_JSON)
   await ensureDir(TYPES_DIR)
 
   const dir = await readdir(TYPES_DIR)
-
-  const ignoreEntryDir = dir.filter((filename) => filename !== 'index.d.ts')
-
+  const ignoreEntryDir = dir.filter((filename) => filename !== 'index.d.ts' && filename !== 'global.d.ts')
   const exports: string[] = []
+  const declares: string[] = []
 
   ignoreEntryDir.forEach((filename) => {
-    const componentName = camelize(filename.slice(0, filename.indexOf('.d.ts')))
+    const componentName = filename.slice(0, filename.indexOf('.d.ts'))
 
     exports.push(`export * from './${componentName}'`)
+
+    if (!componentName.startsWith(namespace)) {
+      declares.push(
+        `${bigCamelize(namespace)}${bigCamelize(componentName)}: typeof import('${name}')['_${bigCamelize(
+          componentName
+        )}Component']`
+      )
+    }
   })
 
   const template = `\
@@ -26,5 +38,18 @@ export const install: (app: App) => void
 ${exports.join('\n')}
 `
 
-  await writeFile(resolve(TYPES_DIR, 'index.d.ts'), template)
+  const globalTemplate = `\
+declare module 'vue' {
+  export interface GlobalComponents {
+    ${declares.join('\n    ')}
+  }
+}
+
+export {}
+`
+
+  await Promise.all([
+    writeFile(resolve(TYPES_DIR, 'index.d.ts'), template),
+    writeFile(resolve(TYPES_DIR, 'global.d.ts'), globalTemplate),
+  ])
 }

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

@@ -18,6 +18,7 @@ export const DOCS_DIR_NAME = 'docs'
 export const EXAMPLE_DIR_INDEX = 'index.vue'
 export const TESTS_DIR_NAME = '__tests__'
 export const GENERATORS_DIR = resolve(__dirname, '../../generators')
+export const UI_PACKAGE_JSON = resolve(CWD, 'package.json')
 export const CLI_PACKAGE_JSON = resolve(__dirname, '../../package.json')
 
 // site

packages/varlet-ui/docs/ide.en-US.md

@@ -12,7 +12,7 @@ Open the library properties documentation by setting 'editor-> general-> Code Co
 <img style="width: 100%; margin-top: 10px; border-radius: 5px" src="https://varlet.gitee.io/varlet-ui/hl_wb.jpg" alt="webstorm highlight" />
 
 ### VSCode
-Just install the `Vetur` plugin.
+Install the `Volar` plugin, Type hints can be obtained in the template.
 
 <img style="width: 100%; margin-top: 10px; border-radius: 5px" src="https://varlet.gitee.io/varlet-ui/hl_vsc_setting.png" alt="vscode setting" />
 <img style="width: 100%; margin-top: 10px; border-radius: 5px" src="https://varlet.gitee.io/varlet-ui/hl_vsc.png" alt="vscode highlight" />

packages/varlet-ui/docs/ide.zh-CN.md

@@ -11,7 +11,7 @@
 <img style="width: 100%; margin-top: 10px; border-radius: 5px" src="https://varlet.gitee.io/varlet-ui/hl_wb.jpg" alt="webstorm highlight" />
 
 ### VSCode
-安装`Vetur`插件即可
+安装`Volar`插件, 可以在模板中得到类型提示。
 
 <img style="width: 100%; margin-top: 10px; border-radius: 5px" src="https://varlet.gitee.io/varlet-ui/hl_vsc_setting.png" alt="vscode setting" />
 <img style="width: 100%; margin-top: 10px; border-radius: 5px" src="https://varlet.gitee.io/varlet-ui/hl_vsc.png" alt="vscode highlight" />

packages/varlet-ui/types/global.d.ts

@@ -0,0 +1,63 @@
+declare module 'vue' {
+  export interface GlobalComponents {
+    VarActionSheet: typeof import('@varlet/ui')['_ActionSheetComponent']
+    VarAppBar: typeof import('@varlet/ui')['_AppBarComponent']
+    VarBackTop: typeof import('@varlet/ui')['_BackTopComponent']
+    VarBadge: typeof import('@varlet/ui')['_BadgeComponent']
+    VarButton: typeof import('@varlet/ui')['_ButtonComponent']
+    VarCard: typeof import('@varlet/ui')['_CardComponent']
+    VarCell: typeof import('@varlet/ui')['_CellComponent']
+    VarCheckbox: typeof import('@varlet/ui')['_CheckboxComponent']
+    VarCheckboxGroup: typeof import('@varlet/ui')['_CheckboxGroupComponent']
+    VarChip: typeof import('@varlet/ui')['_ChipComponent']
+    VarCol: typeof import('@varlet/ui')['_ColComponent']
+    VarCollapse: typeof import('@varlet/ui')['_CollapseComponent']
+    VarCollapseItem: typeof import('@varlet/ui')['_CollapseItemComponent']
+    VarCountdown: typeof import('@varlet/ui')['_CountdownComponent']
+    VarCounter: typeof import('@varlet/ui')['_CounterComponent']
+    VarDatePicker: typeof import('@varlet/ui')['_DatePickerComponent']
+    VarDialog: typeof import('@varlet/ui')['_DialogComponent']
+    VarDivider: typeof import('@varlet/ui')['_DividerComponent']
+    VarForm: typeof import('@varlet/ui')['_FormComponent']
+    VarIcon: typeof import('@varlet/ui')['_IconComponent']
+    VarImage: typeof import('@varlet/ui')['_ImageComponent']
+    VarImagePreview: typeof import('@varlet/ui')['_ImagePreviewComponent']
+    VarIndexAnchor: typeof import('@varlet/ui')['_IndexAnchorComponent']
+    VarIndexBar: typeof import('@varlet/ui')['_IndexBarComponent']
+    VarInput: typeof import('@varlet/ui')['_InputComponent']
+    VarLazy: typeof import('@varlet/ui')['_LazyComponent']
+    VarLoading: typeof import('@varlet/ui')['_LoadingComponent']
+    VarLocale: typeof import('@varlet/ui')['_LocaleComponent']
+    VarMenu: typeof import('@varlet/ui')['_MenuComponent']
+    VarOption: typeof import('@varlet/ui')['_OptionComponent']
+    VarPagination: typeof import('@varlet/ui')['_PaginationComponent']
+    VarPicker: typeof import('@varlet/ui')['_PickerComponent']
+    VarPopup: typeof import('@varlet/ui')['_PopupComponent']
+    VarProgress: typeof import('@varlet/ui')['_ProgressComponent']
+    VarPullRefresh: typeof import('@varlet/ui')['_PullRefreshComponent']
+    VarRadio: typeof import('@varlet/ui')['_RadioComponent']
+    VarRadioGroup: typeof import('@varlet/ui')['_RadioGroupComponent']
+    VarRate: typeof import('@varlet/ui')['_RateComponent']
+    VarRipple: typeof import('@varlet/ui')['_RippleComponent']
+    VarRow: typeof import('@varlet/ui')['_RowComponent']
+    VarSelect: typeof import('@varlet/ui')['_SelectComponent']
+    VarSlider: typeof import('@varlet/ui')['_SliderComponent']
+    VarSnackbar: typeof import('@varlet/ui')['_SnackbarComponent']
+    VarStep: typeof import('@varlet/ui')['_StepComponent']
+    VarSteps: typeof import('@varlet/ui')['_StepsComponent']
+    VarSticky: typeof import('@varlet/ui')['_StickyComponent']
+    VarStyleProvider: typeof import('@varlet/ui')['_StyleProviderComponent']
+    VarSwipe: typeof import('@varlet/ui')['_SwipeComponent']
+    VarSwipeItem: typeof import('@varlet/ui')['_SwipeItemComponent']
+    VarSwitch: typeof import('@varlet/ui')['_SwitchComponent']
+    VarTab: typeof import('@varlet/ui')['_TabComponent']
+    VarTabItem: typeof import('@varlet/ui')['_TabItemComponent']
+    VarTable: typeof import('@varlet/ui')['_TableComponent']
+    VarTabs: typeof import('@varlet/ui')['_TabsComponent']
+    VarTabsItems: typeof import('@varlet/ui')['_TabsItemsComponent']
+    VarTimePicker: typeof import('@varlet/ui')['_TimePickerComponent']
+    VarUploader: typeof import('@varlet/ui')['_UploaderComponent']
+  }
+}
+
+export {}