From 97b726e4dec7ef85ac9d0d32f5db20dc6961ec53 Mon Sep 17 00:00:00 2001
From: chouchouji <70570907+chouchouji@users.noreply.github.com>
Date: Tue, 1 Oct 2024 20:59:47 +0800
Subject: [PATCH] refactor(cli): improve create command template code (#1788)

* refactor(cli): improve create command template code

* style(cli): format code
---
 .prettierignore                                        |  1 -
 .../varlet-cli/template/create/[ComponentName].tsx.ejs |  6 +++++-
 .../varlet-cli/template/create/[ComponentName].vue.ejs |  7 +++++--
 .../template/create/__tests__/index.spec.js.ejs        |  1 +
 .../template/create/example/locale/_index.ts           |  2 +-
 packages/varlet-cli/template/generators/base/.eslintrc |  6 ++----
 .../generators/config/default/base/varlet.config.mjs   |  4 ++--
 .../config/default/sfc/src/button/Button.vue           | 10 +++++++---
 .../config/default/sfc/src/utils/components.ts         |  5 ++++-
 .../config/default/tsx/src/button/Button.tsx           |  8 ++++++--
 .../generators/config/default/tsx/src/button/index.ts  |  2 +-
 .../config/default/tsx/src/utils/components.ts         |  5 ++++-
 .../generators/config/i18n/base/varlet.config.mjs      |  2 +-
 .../generators/config/i18n/sfc/src/button/Button.vue   |  8 ++++++--
 .../generators/config/i18n/sfc/src/locale/index.ts     |  2 +-
 .../generators/config/i18n/sfc/src/utils/components.ts |  5 ++++-
 .../generators/config/i18n/tsx/src/button/Button.tsx   |  8 ++++++--
 .../generators/config/i18n/tsx/src/locale/index.ts     |  2 +-
 .../generators/config/i18n/tsx/src/utils/components.ts |  5 ++++-
 19 files changed, 61 insertions(+), 28 deletions(-)

diff --git a/.prettierignore b/.prettierignore
index cc1fc38d769..3e0b81032e8 100644
--- a/.prettierignore
+++ b/.prettierignore
@@ -1,5 +1,4 @@
 packages/varlet-cli/lib/**
-packages/varlet-cli/template/**
 
 packages/varlet-vite-plugins/lib/**
 
diff --git a/packages/varlet-cli/template/create/[ComponentName].tsx.ejs b/packages/varlet-cli/template/create/[ComponentName].tsx.ejs
index 5910986dc0a..b01e6e133dd 100644
--- a/packages/varlet-cli/template/create/[ComponentName].tsx.ejs
+++ b/packages/varlet-cli/template/create/[ComponentName].tsx.ejs
@@ -1,9 +1,13 @@
 import { defineComponent } from 'vue'
 import { props } from './props'
+import { createNamespace } from '../utils/components'
+
 import './<%- camelizeName %>.less'
 
+const { name, n, classes } = createNamespace('<%- kebabCaseName %>')
+
 export default defineComponent({
-  name: '<%- bigCamelizeNamespace + bigCamelizeName %>',
+  name,
   props,
   setup(props, { slots }) {
     return () => {
diff --git a/packages/varlet-cli/template/create/[ComponentName].vue.ejs b/packages/varlet-cli/template/create/[ComponentName].vue.ejs
index c5ab92f066a..af0ced1331c 100644
--- a/packages/varlet-cli/template/create/[ComponentName].vue.ejs
+++ b/packages/varlet-cli/template/create/[ComponentName].vue.ejs
@@ -5,13 +5,16 @@
 <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: '<%- bigCamelizeNamespace + bigCamelizeName %>',
+  name,
   props
 })
 </script>
 
 <style lang="less">
-@import './<%- camelizeName %>.less';
+@import './<%- camelizeName %>';
 </style>
diff --git a/packages/varlet-cli/template/create/__tests__/index.spec.js.ejs b/packages/varlet-cli/template/create/__tests__/index.spec.js.ejs
index c20ddff32ca..92f970341df 100644
--- a/packages/varlet-cli/template/create/__tests__/index.spec.js.ejs
+++ b/packages/varlet-cli/template/create/__tests__/index.spec.js.ejs
@@ -1,4 +1,5 @@
 import <%- bigCamelizeName %> from '..'
+import <%- bigCamelizeNamespace + bigCamelizeName %> from '../<%- bigCamelizeName %>'
 import { createApp } from 'vue'
 import { mount } from '@vue/test-utils'
 import { expect, test } from 'vitest'
diff --git a/packages/varlet-cli/template/create/example/locale/_index.ts b/packages/varlet-cli/template/create/example/locale/_index.ts
index 35ea3ec65a5..8855457aa5c 100644
--- a/packages/varlet-cli/template/create/example/locale/_index.ts
+++ b/packages/varlet-cli/template/create/example/locale/_index.ts
@@ -14,4 +14,4 @@ Locale.add('en-US', Locale.enUS)
 add('zh-CN', zhCN)
 add('en-US', enUS)
 
-export { add, t, merge, use }
\ No newline at end of file
+export { add, t, merge, use }
diff --git a/packages/varlet-cli/template/generators/base/.eslintrc b/packages/varlet-cli/template/generators/base/.eslintrc
index e0233c3dbd2..122b857198e 100644
--- a/packages/varlet-cli/template/generators/base/.eslintrc
+++ b/packages/varlet-cli/template/generators/base/.eslintrc
@@ -12,7 +12,5 @@
     "types/index.d.ts",
     ".varlet/**"
   ],
-  "extends": [
-    "@varlet"
-  ]
-}
\ No newline at end of file
+  "extends": ["@varlet"]
+}
diff --git a/packages/varlet-cli/template/generators/config/default/base/varlet.config.mjs b/packages/varlet-cli/template/generators/config/default/base/varlet.config.mjs
index debd74d1283..8b8598d76e9 100644
--- a/packages/varlet-cli/template/generators/config/default/base/varlet.config.mjs
+++ b/packages/varlet-cli/template/generators/config/default/base/varlet.config.mjs
@@ -8,7 +8,7 @@ export default defineConfig({
       darkMode: null,
       i18n: null,
       playground: null,
-      versions: null
+      versions: null,
     },
     menu: [
       {
@@ -44,5 +44,5 @@ export default defineConfig({
       i18n: null,
       darkMode: null,
     },
-  }
+  },
 })
diff --git a/packages/varlet-cli/template/generators/config/default/sfc/src/button/Button.vue b/packages/varlet-cli/template/generators/config/default/sfc/src/button/Button.vue
index 9ddd3518394..d524c720ae0 100644
--- a/packages/varlet-cli/template/generators/config/default/sfc/src/button/Button.vue
+++ b/packages/varlet-cli/template/generators/config/default/sfc/src/button/Button.vue
@@ -1,14 +1,17 @@
 <template>
-  <button class="va-button" :style="{ background: color }" @click="handleClick">
+  <button :class="n()" :style="{ background: color }" @click="handleClick">
     <slot />
   </button>
 </template>
 
 <script lang="ts">
 import { defineComponent, PropType } from 'vue'
+import { createNamespace } from '../utils/components'
+
+const { name, n, classes } = createNamespace('button')
 
 export default defineComponent({
-  name: 'VaButton',
+  name,
   props: {
     color: {
       type: String,
@@ -21,8 +24,9 @@ export default defineComponent({
     const handleClick = (e: Event) => {
       props.onClick?.(e)
     }
-    
+
     return {
+      n,
       handleClick,
     }
   },
diff --git a/packages/varlet-cli/template/generators/config/default/sfc/src/utils/components.ts b/packages/varlet-cli/template/generators/config/default/sfc/src/utils/components.ts
index 206a92c5258..937a4dbd5d3 100644
--- a/packages/varlet-cli/template/generators/config/default/sfc/src/utils/components.ts
+++ b/packages/varlet-cli/template/generators/config/default/sfc/src/utils/components.ts
@@ -1,4 +1,5 @@
 import type { Component, Plugin, App } from 'vue'
+import { createNamespaceFn } from '@varlet/shared'
 
 export type ComponentWithInstall<T> = T & Plugin
 
@@ -14,4 +15,6 @@ export function withInstall<T = Component>(component: Component, target?: T): Co
   }
 
   return componentWithInstall as ComponentWithInstall<T>
-}
\ No newline at end of file
+}
+
+export const createNamespace = createNamespaceFn('va')
diff --git a/packages/varlet-cli/template/generators/config/default/tsx/src/button/Button.tsx b/packages/varlet-cli/template/generators/config/default/tsx/src/button/Button.tsx
index 911f70c6988..843269b370c 100644
--- a/packages/varlet-cli/template/generators/config/default/tsx/src/button/Button.tsx
+++ b/packages/varlet-cli/template/generators/config/default/tsx/src/button/Button.tsx
@@ -1,8 +1,12 @@
 import { defineComponent, PropType } from 'vue'
+import { createNamespace } from '../utils/components'
+
 import './button.less'
 
+const { name, n, classes } = createNamespace('button')
+
 export default defineComponent({
-  name: 'VaButton',
+  name,
   props: {
     color: {
       type: String,
@@ -18,7 +22,7 @@ export default defineComponent({
       const { color } = props
 
       return (
-        <button class="va-button" style={{ background: color }} onClick={handleClick}>
+        <button class={n()} style={{ background: color }} onClick={handleClick}>
           {slots.default?.()}
         </button>
       )
diff --git a/packages/varlet-cli/template/generators/config/default/tsx/src/button/index.ts b/packages/varlet-cli/template/generators/config/default/tsx/src/button/index.ts
index 89f881a14d3..57cc693f81a 100644
--- a/packages/varlet-cli/template/generators/config/default/tsx/src/button/index.ts
+++ b/packages/varlet-cli/template/generators/config/default/tsx/src/button/index.ts
@@ -5,4 +5,4 @@ withInstall(Button)
 
 export const _ButtonComponent = Button
 
-export default Button
\ No newline at end of file
+export default Button
diff --git a/packages/varlet-cli/template/generators/config/default/tsx/src/utils/components.ts b/packages/varlet-cli/template/generators/config/default/tsx/src/utils/components.ts
index 206a92c5258..937a4dbd5d3 100644
--- a/packages/varlet-cli/template/generators/config/default/tsx/src/utils/components.ts
+++ b/packages/varlet-cli/template/generators/config/default/tsx/src/utils/components.ts
@@ -1,4 +1,5 @@
 import type { Component, Plugin, App } from 'vue'
+import { createNamespaceFn } from '@varlet/shared'
 
 export type ComponentWithInstall<T> = T & Plugin
 
@@ -14,4 +15,6 @@ export function withInstall<T = Component>(component: Component, target?: T): Co
   }
 
   return componentWithInstall as ComponentWithInstall<T>
-}
\ No newline at end of file
+}
+
+export const createNamespace = createNamespaceFn('va')
diff --git a/packages/varlet-cli/template/generators/config/i18n/base/varlet.config.mjs b/packages/varlet-cli/template/generators/config/i18n/base/varlet.config.mjs
index 9739190622f..4056aa1a7b0 100644
--- a/packages/varlet-cli/template/generators/config/i18n/base/varlet.config.mjs
+++ b/packages/varlet-cli/template/generators/config/i18n/base/varlet.config.mjs
@@ -7,7 +7,7 @@ export default defineConfig({
     header: {
       darkMode: null,
       playground: null,
-      versions: null
+      versions: null,
     },
     menu: [
       {
diff --git a/packages/varlet-cli/template/generators/config/i18n/sfc/src/button/Button.vue b/packages/varlet-cli/template/generators/config/i18n/sfc/src/button/Button.vue
index 0f3c9bde58e..db511a1cebb 100644
--- a/packages/varlet-cli/template/generators/config/i18n/sfc/src/button/Button.vue
+++ b/packages/varlet-cli/template/generators/config/i18n/sfc/src/button/Button.vue
@@ -1,5 +1,5 @@
 <template>
-  <button class="va-button" :style="{ background: color }" @click="handleClick">
+  <button :class="n()" :style="{ background: color }" @click="handleClick">
     {{ t('button') }}
     <slot />
   </button>
@@ -7,12 +7,15 @@
 
 <script lang="ts">
 import { defineComponent, PropType } from 'vue'
+import { createNamespace } from '../utils/components'
 
 // i18n for component's internal
 import { t } from '../locale'
 
+const { name, n, classes } = createNamespace('button')
+
 export default defineComponent({
-  name: 'VaButton',
+  name,
   props: {
     color: {
       type: String,
@@ -28,6 +31,7 @@ export default defineComponent({
 
     return {
       t,
+      n,
       handleClick,
     }
   },
diff --git a/packages/varlet-cli/template/generators/config/i18n/sfc/src/locale/index.ts b/packages/varlet-cli/template/generators/config/i18n/sfc/src/locale/index.ts
index 6cf7e82924b..77d9541fafc 100644
--- a/packages/varlet-cli/template/generators/config/i18n/sfc/src/locale/index.ts
+++ b/packages/varlet-cli/template/generators/config/i18n/sfc/src/locale/index.ts
@@ -58,7 +58,7 @@ function useLocale<T = Message>() {
     add,
     use,
     merge,
-    t
+    t,
   }
 }
 
diff --git a/packages/varlet-cli/template/generators/config/i18n/sfc/src/utils/components.ts b/packages/varlet-cli/template/generators/config/i18n/sfc/src/utils/components.ts
index 206a92c5258..937a4dbd5d3 100644
--- a/packages/varlet-cli/template/generators/config/i18n/sfc/src/utils/components.ts
+++ b/packages/varlet-cli/template/generators/config/i18n/sfc/src/utils/components.ts
@@ -1,4 +1,5 @@
 import type { Component, Plugin, App } from 'vue'
+import { createNamespaceFn } from '@varlet/shared'
 
 export type ComponentWithInstall<T> = T & Plugin
 
@@ -14,4 +15,6 @@ export function withInstall<T = Component>(component: Component, target?: T): Co
   }
 
   return componentWithInstall as ComponentWithInstall<T>
-}
\ No newline at end of file
+}
+
+export const createNamespace = createNamespaceFn('va')
diff --git a/packages/varlet-cli/template/generators/config/i18n/tsx/src/button/Button.tsx b/packages/varlet-cli/template/generators/config/i18n/tsx/src/button/Button.tsx
index cac3e12cb7f..276f6ca6211 100644
--- a/packages/varlet-cli/template/generators/config/i18n/tsx/src/button/Button.tsx
+++ b/packages/varlet-cli/template/generators/config/i18n/tsx/src/button/Button.tsx
@@ -1,11 +1,15 @@
 import { defineComponent, PropType } from 'vue'
+import { createNamespace } from '../utils/components'
+
 import './button.less'
 
 // i18n for component's internal
 import { t } from '../locale'
 
+const { name, n, classes } = createNamespace('button')
+
 export default defineComponent({
-  name: 'VaButton',
+  name,
   props: {
     color: {
       type: String,
@@ -23,7 +27,7 @@ export default defineComponent({
       const { color } = props
 
       return (
-        <button class="va-button" style={{ background: color }} onClick={handleClick}>
+        <button class={n()} style={{ background: color }} onClick={handleClick}>
           {t('button')}
           {slots.default?.()}
         </button>
diff --git a/packages/varlet-cli/template/generators/config/i18n/tsx/src/locale/index.ts b/packages/varlet-cli/template/generators/config/i18n/tsx/src/locale/index.ts
index 6cf7e82924b..77d9541fafc 100644
--- a/packages/varlet-cli/template/generators/config/i18n/tsx/src/locale/index.ts
+++ b/packages/varlet-cli/template/generators/config/i18n/tsx/src/locale/index.ts
@@ -58,7 +58,7 @@ function useLocale<T = Message>() {
     add,
     use,
     merge,
-    t
+    t,
   }
 }
 
diff --git a/packages/varlet-cli/template/generators/config/i18n/tsx/src/utils/components.ts b/packages/varlet-cli/template/generators/config/i18n/tsx/src/utils/components.ts
index 206a92c5258..937a4dbd5d3 100644
--- a/packages/varlet-cli/template/generators/config/i18n/tsx/src/utils/components.ts
+++ b/packages/varlet-cli/template/generators/config/i18n/tsx/src/utils/components.ts
@@ -1,4 +1,5 @@
 import type { Component, Plugin, App } from 'vue'
+import { createNamespaceFn } from '@varlet/shared'
 
 export type ComponentWithInstall<T> = T & Plugin
 
@@ -14,4 +15,6 @@ export function withInstall<T = Component>(component: Component, target?: T): Co
   }
 
   return componentWithInstall as ComponentWithInstall<T>
-}
\ No newline at end of file
+}
+
+export const createNamespace = createNamespaceFn('va')