site: refactor to unify tusimple demo

build/vite-plugin-index-tranform.js

@@ -1,18 +1,12 @@
 const transformIndexHtml = (code) => {
-  const isTusimple = !!process.env.TUSIMPLE
   switch (process.env.NODE_ENV) {
     case 'production':
-      return code.replace(
-        /__INDEX__/,
-        '/demo/index.' + (isTusimple ? 'ts-prod.js' : 'prod.js')
-      )
+      return code.replace(/__INDEX__/, '/demo/index.prod.js')
     default:
-      return code.replace(
-        /__INDEX__/,
-        '/demo/index.' + (isTusimple ? 'ts-dev.js' : 'dev.js')
-      )
+      return code.replace(/__INDEX__/, '/demo/index.dev.js')
   }
 }
+
 const demoIndexTransFormPlugin = {
   name: 'demo-transform',
   enforce: 'pre',

demo/SiteHeader.vue

@@ -31,6 +31,14 @@
         <n-button size="small" class="nav-picker" @click="handleLanguageChange">
           {{ langOptions[lang].label }}
         </n-button>
+        <n-button
+          v-if="dev"
+          size="small"
+          class="nav-picker"
+          @click="handleConfigProviderChange"
+        >
+          {{ configProviderOptions[configProviderName].label }}
+        </n-button>
         <n-button
           v-if="dev"
           size="small"
@@ -55,7 +63,8 @@ import {
   useThemeName,
   useLocaleName,
   useDisplayMode,
-  useFlattenedDocOptions
+  useFlattenedDocOptions,
+  useConfigProviderName
 } from './store'
 
 function match (pattern, string) {
@@ -128,6 +137,7 @@ export default {
       lang: useLocaleName(),
       theme: useThemeName(),
       items: useFlattenedDocOptions(),
+      configProviderName: useConfigProviderName(),
       menuItems: menuItemsRef,
       themeOptions: themeOptionsRef,
       langOptions: readonly({
@@ -149,6 +159,16 @@ export default {
           label: 'Debug',
           next: 'debug'
         }
+      }),
+      configProviderOptions: readonly({
+        default: {
+          label: 'Tusimple',
+          next: 'tusimple'
+        },
+        tusimple: {
+          label: 'Default',
+          next: 'default'
+        }
       })
     }
   },
@@ -199,16 +219,14 @@ export default {
         this.$router.push(/^(\/[^/]+){2}/.exec(this.$route.path)[0])
       }
       if (value === 'doc') {
-        if (/^(\/[^/]+){2}\/docs/.test(this.$route.path)) {
-        } else {
+        if (!/^(\/[^/]+){2}\/docs/.test(this.$route.path)) {
           this.$router.push(
             /^(\/[^/]+){2}/.exec(this.$route.path)[0] + '/docs/start'
           )
         }
       }
       if (value === 'component') {
-        if (/^(\/[^/]+){2}\/components/.test(this.$route.path)) {
-        } else {
+        if (!/^(\/[^/]+){2}\/components/.test(this.$route.path)) {
           this.$router.push(
             /^(\/[^/]+){2}/.exec(this.$route.path)[0] +
               '/components/n-config-provider'
@@ -224,6 +242,11 @@ export default {
     },
     handleLanguageChange () {
       this.lang = this.langOptions[this.lang].next
+    },
+    handleConfigProviderChange () {
+      this.configProviderName = this.configProviderOptions[
+        this.configProviderName
+      ].next
     }
   }
 }

demo/SiteRoot.vue

@@ -1,5 +1,6 @@
 <template>
-  <n-config-provider
+  <component
+    :is="configProvider"
     class="demo"
     namespace="naive-ui-doc"
     :theme="theme"
@@ -16,7 +17,7 @@
         </n-notification-provider>
       </n-message-provider>
     </n-loading-bar-provider>
-  </n-config-provider>
+  </component>
 </template>
 
 <script>

demo/TsSiteRoot.vue

@@ -1,17 +0,0 @@
-<template>
-  <ts-config-provider>
-    <site-root />
-  </ts-config-provider>
-</template>
-
-<script>
-import { TsConfigProvider } from '../themes/tusimple/src'
-import SiteRoot from './SiteRoot.vue'
-
-export default {
-  components: {
-    TsConfigProvider,
-    SiteRoot
-  }
-}
-</script>

demo/index.dev.js

@@ -1,5 +1,5 @@
 import { createApp } from 'vue'
-import { installDemoComponents } from './init'
+import { installDemoComponents } from './setup'
 import SiteRoot from './SiteRoot.vue'
 import naive from '../src/index'
 import { routes, componentChildRoutes } from './routes/routes'

demo/index.prod.js

@@ -1,6 +1,6 @@
 import { createApp } from 'vue'
 import naive from 'naive-ui'
-import { installDemoComponents } from './init'
+import { installDemoComponents } from './setup'
 import SiteRoot from './SiteRoot.vue'
 import { routes } from './routes/routes'
 import createDemoRouter from './routes/router'

demo/index.ts-dev.js

@@ -1,19 +0,0 @@
-import { createApp } from 'vue'
-import { installDemoComponents } from './init'
-import SiteRoot from './TsSiteRoot.vue'
-import naive from '../src/index'
-import { routes, componentChildRoutes } from './routes/routes'
-import createDemoRouter from './routes/router'
-
-import debugRouteMixin from './routes/debug-route-mixin'
-debugRouteMixin(routes, componentChildRoutes)
-
-const app = createApp(SiteRoot)
-
-const router = createDemoRouter(app, routes)
-
-app.use(router)
-app.use(naive)
-installDemoComponents(app)
-
-app.mount('#app')

demo/index.ts-prod.js

@@ -1,19 +0,0 @@
-import { createApp } from 'vue'
-import naive from 'naive-ui'
-import { installDemoComponents } from './init'
-import SiteRoot from './SiteRoot.vue'
-import { routes } from './routes/routes'
-import createDemoRouter from './routes/router'
-import tusimpleTheme from '../themes/tusimple'
-
-naive.use(tusimpleTheme)
-
-const app = createApp(SiteRoot)
-
-const router = createDemoRouter(app, routes)
-
-app.use(router)
-app.use(naive)
-installDemoComponents(app)
-
-app.mount('#app')

demo/store/index.js

@@ -1,6 +1,7 @@
 import { computed, ref, provide, reactive, toRef, inject } from 'vue'
 import { useRoute, useRouter } from 'vue-router'
 import {
+  NConfigProvider,
   darkTheme,
   enUS,
   zhCN,
@@ -8,6 +9,7 @@ import {
   dateZhCN,
   useOsTheme
 } from '../../src'
+import { TsConfigProvider } from '../../themes/tusimple/src'
 import { i18n } from '../utils/composables'
 import {
   createDocumentationMenuOptions,
@@ -67,6 +69,14 @@ export function siteSetup () {
     const { value } = themeNameRef
     return value === 'dark' ? darkTheme : null
   })
+  // config provider
+  const configProviderNameRef = ref('default')
+  const configProviderRef = computed(() => {
+    if (process.env.TUSIMPLE) return TsConfigProvider
+    return configProviderNameRef.value === 'tusimple'
+      ? TsConfigProvider
+      : NConfigProvider
+  })
   // options
   const docOptionsRef = computed(() =>
     createDocumentationMenuOptions({
@@ -99,6 +109,7 @@ export function siteSetup () {
     storeKey,
     reactive({
       themeName: themeNameRef,
+      configProviderName: configProviderNameRef,
       localeName: localeNameRef,
       displayMode: displayModeRef,
       docOptions: docOptionsRef,
@@ -108,6 +119,7 @@ export function siteSetup () {
   )
   i18n.provide(computed(() => localeNameRef.value))
   return {
+    configProvider: configProviderRef,
     hljs,
     theme: themeRef,
     locale: localeRef,
@@ -148,3 +160,7 @@ export function useComponentOptions () {
 export function useFlattenedDocOptions () {
   return toRef(inject(storeKey), 'flattenedDocOptions')
 }
+
+export function useConfigProviderName () {
+  return toRef(inject(storeKey), 'configProviderName')
+}

package.json

@@ -9,10 +9,9 @@
     "deprecated:build:icons": "npm run clean && node scripts/pre-build/deprecated-build-icons.js",
     "build:js": "npm run gen-version && npm run clean && tsc -b tsconfig.esm.json && tsc -b tsconfig.cjs.json && node scripts/post-build",
     "build:package": "npm run gen-version && npm run clean && node scripts/pre-build/deprecated-build-icons.js && tsc -b tsconfig.esm.json && tsc -b tsconfig.cjs.json && node scripts/post-build",
-    "build:site": "npm run build:package && ./scripts/pre-build-site/pre-build-site.sh && node scripts/pre-build-site/restore-side-effects && cross-env NODE_ENV=production NODE_OPTIONS=--max-old-space-size=4096 vite build && rm -rf node_modules/naive-ui && cp site/index.html site/404.html && node scripts/post-build-site/clear-side-effects",
+    "build:site": "./scripts/pre-build-site/pre-build-site.sh && cross-env NODE_ENV=production NODE_OPTIONS=--max-old-space-size=4096 vite build && ./scripts/post-build-site/post-build-site.sh",
     "clean": "rm -rf site lib es node_modules/naive-ui",
     "dev": "npm run clean && npm run gen-version && cross-env NODE_ENV=development vite",
-    "dev:ts": "npm run clean && npm run gen-version && cross-env NODE_ENV=development TUSIMPLE=true vite",
     "lint": "npm run lint:code && npm run lint:type",
     "lint:type": "tsc -b tsconfig.esm.json",
     "lint:code": "eslint --fix \"{src,build,scripts,demo}/**/*.{ts,tsx,js,vue,md}\"",
@@ -23,10 +22,7 @@
     "test": "cross-env NODE_ENV=test jest --coverage=false",
     "test:cov": "cross-env NODE_ENV=test jest",
     "gen-version": "node scripts/gen-version",
-    "tusimple:dev": "npm run generate && cross-env NODE_ENV=development webpack-dev-server --config build/webpack.tusimple-dev.js",
-    "tusimple:build:doc": "npm run generate && npm run build && rm -rf build-doc/dist && cross-env NODE_ENV=production webpack --config build/webpack.tusimple-doc.js",
-    "tusimple:release:doc": "npm run tusimple:build:doc && node build-doc/generate-deploy-sh.js && sudo bash build-doc/deploy-doc.sh",
-    "tusimple:release:doc:no-build": "node build-doc/generate-deploy-sh.js && sudo bash build-doc/deploy-doc.sh"
+    "build:site:ts": "./scripts/pre-build-site/pre-build-site.sh && cross-env TUSIMPLE=true NODE_ENV=production NODE_OPTIONS=--max-old-space-size=4096 vite build && ./scripts/post-build-site/post-build-site.sh"
   },
   "author": "07akioni",
   "license": "MIT",

scripts/post-build-site/post-build-site.sh

@@ -0,0 +1,5 @@
+cp site/index.html site/404.html
+
+node scripts/post-build-site/clear-side-effects
+
+rm -rf node_modules/naive-ui

scripts/pre-build-site/pre-build-site.sh

@@ -1,5 +1,9 @@
+npm run build:package
+
 npm pack
 UI_PACKAGE_NAME=$(ls | grep naive-ui)
 tar -xzvf $UI_PACKAGE_NAME
 mv package node_modules/naive-ui
 rm $UI_PACKAGE_NAME
+
+node scripts/pre-build-site/restore-side-effects

src/_internal/icons/replaceable.tsx

@@ -1,4 +1,4 @@
-import { upperFirst } from 'lodash'
+import { upperFirst } from 'lodash-es'
 import { defineComponent } from 'vue'
 import { Icons } from '../../config-provider'
 import { useConfig } from '../../_mixins'

src/locales/date/enUS.ts

@@ -1,5 +1,5 @@
 import type { Locale } from 'date-fns'
-import { enUS } from 'date-fns/locale'
+import enUS from 'date-fns/locale/en-US'
 
 interface NDateLocale {
   name: string

src/locales/date/zhCN.ts

@@ -1,4 +1,4 @@
-import { zhCN } from 'date-fns/locale'
+import zhCN from 'date-fns/locale/zh-CN'
 import { NDateLocale } from './enUS'
 
 const dateZhCN: NDateLocale = {

themes/tusimple/src/theme-overrides.ts

@@ -76,6 +76,9 @@ export const themeOverrides: GlobalThemeOverrides = {
   },
   Button: {
     textColorWarning: '#333',
+    textColorHoverWarning: '#333',
+    textColorFocusWarning: '#333',
+    textColorPressedWarning: '#333',
     iconSizeTiny: '16px',
     iconSizeSmall: '20px',
     iconSizeMedium: '20px',

vite.config.js

@@ -13,15 +13,16 @@ module.exports = {
     alias:
       process.env.NODE_ENV !== 'production'
         ? [
-          {
-            find: 'naive-ui',
-            replacement: path.resolve(__dirname, './src')
-          }
-        ]
+            {
+              find: 'naive-ui',
+              replacement: path.resolve(__dirname, './src')
+            }
+          ]
         : undefined
   },
   define: {
     'process.env.NODE_ENV': `'${process.env.NODE_ENV}'`,
+    'process.env.TUSIMPLE': !!process.env.TUSIMPLE,
     __DEV__: process.env.NODE_ENV !== 'production'
   },
   optimizeDeps: {