refactor(cli): improve create command template code (#1788)

* refactor(cli): improve create command template code * style(cli): format code
varletjs · Oct 1, 2024 · 97b726e · 97b726e
1 parent f4aaa55
commit 97b726e
Show file tree

Hide file tree

Showing 19 changed files with 61 additions and 28 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -14,4 +14,4 @@ Locale.add('en-US', Locale.enUS)
 add('zh-CN', zhCN)
 add('en-US', enUS)
 
-export { add, t, merge, use }
+export { add, t, merge, use }
diff --git 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"
-  ]
-}
+  "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
@@ -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
@@ -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
@@ -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>
-}
+}
+
+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
@@ -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
@@ -5,4 +5,4 @@ withInstall(Button)
 
 export const _ButtonComponent = Button
 
-export default Button
+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
@@ -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>
-}
+}
+
+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
@@ -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
@@ -1,18 +1,21 @@
 <template>
-  <button class="va-button" :style="{ background: color }" @click="handleClick">
+  <button :class="n()" :style="{ background: color }" @click="handleClick">
     {{ t('button') }}
     <slot />
   </button>
 </template>
 
 <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
@@ -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
@@ -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>
-}
+}
+
+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
@@ -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
@@ -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
@@ -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>
-}
+}
+
+export const createNamespace = createNamespaceFn('va')
Original file line number	Diff line number	Diff line change
Expand Up		@@ -5,4 +5,4 @@ withInstall(Button)

		export const _ButtonComponent = Button

		export default Button
		export default Button
-Original file line number
+Diff line change
@@ Expand Up / @@ -58,7 +58,7 @@ function useLocale<T = Message>() { @@
         add,
         use,
         merge,
-        t
+        t,
       }
     }
@@ Expand Down @@