Skip to content

Commit

Permalink
refactor: allow users to customize vite configuration
Browse files Browse the repository at this point in the history
  • Loading branch information
recoluan committed May 18, 2024
1 parent e5c7d03 commit 1a000a4
Show file tree
Hide file tree
Showing 10 changed files with 960 additions and 1,124 deletions.
4 changes: 2 additions & 2 deletions docs/docs/api/define-kit.md
Original file line number Diff line number Diff line change
Expand Up @@ -12,9 +12,9 @@ title: defineKit
import { join } from 'node:path'
import { defineKit, useServerSocket } from '@spider/sili-shared/node'

import type { DefineKitReturn } from '@spider/sili-shared/node'
import type { Kit } from '@spider/sili-shared/node'

const demoKit: DefineKitReturn = defineKit({
const demoKit: Kit = defineKit({
// 插件名称
name: 'sili-plugin-demo',

Expand Down
8 changes: 4 additions & 4 deletions docs/docs/api/shared-api.md
Original file line number Diff line number Diff line change
Expand Up @@ -14,9 +14,9 @@ title: 共享 API
import { join } from 'node:path'
import { defineKit, useServerSocket } from '@spider/sili-shared/node'

import type { DefineKitReturn } from '@spider/sili-shared/node'
import type { Kit } from '@spider/sili-shared/node'

const demoKit: DefineKitReturn = defineKit({
const demoKit: Kit = defineKit({
// 插件名称
name: 'sili-plugin-demo',

Expand All @@ -42,9 +42,9 @@ export default demoKit

```ts
import {defineKit, useServerSocket} from '@revili/shared/node'
import type {DefineKitReturn} from '@revili/shared/node'
import type {Kit} from '@revili/shared/node'

const examplePlugin: DefineKitReturn = defineKit({
const examplePlugin: Kit = defineKit({
name: 'revili-kit-example',

registerService: server => {
Expand Down
4 changes: 2 additions & 2 deletions packages/@revili/kit-default/src/node/index.ts
Original file line number Diff line number Diff line change
@@ -1,9 +1,9 @@
import {defineKit, useServerSocket} from '@revili/shared/node'
import type {DefineKitReturn} from '@revili/shared/node'
import type {Kit} from '@revili/shared/node'

import { USER_PATH } from '../constants/index.js'

const defaultPlugin: DefineKitReturn = defineKit({
const defaultPlugin: Kit = defineKit({
name: 'revili-kit-default',

registerService: server => {
Expand Down
6 changes: 3 additions & 3 deletions packages/@revili/shared/src/common/config.ts
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import type {DefineKitReturn} from '../node/index.js'
import type { Kit } from '../node/index.js'

export interface SidebarItem {
title: string
Expand All @@ -13,11 +13,11 @@ export interface LayoutOption {
icon?: string
}

export interface AppOptions<T = DefineKitReturn> {
export interface AppOptions<T = Kit> {
devMode: boolean
layoutOptions: LayoutOption[]
plugins: Array<T>
[prop: string]: any
}

export type AppConfig = AppOptions<DefineKitReturn>
export type AppConfig = AppOptions<Kit>
15 changes: 9 additions & 6 deletions packages/@revili/shared/src/node/utils/defineKit.ts
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
import {CAC} from 'cac'
import type {ViteDevServer, Plugin} from 'vite'
import type {AppConfig} from '../../common/config.js'
import { CAC } from 'cac'
import type { ViteDevServer, Plugin, UserConfig } from 'vite'
import type { AppConfig } from '../../common/config.js'

interface SidebarItem {
icon?: string
Expand All @@ -23,19 +23,22 @@ interface Layouts {
export interface KitOptions {
name: string
layouts?: Layouts
webFramework?: string
viteOptions?: UserConfig
registerService?: (server: ViteDevServer) => void
registerCommand: (params: {program: CAC; appConfig: AppConfig}) => void
}

export type DefineKitReturn = Omit<KitOptions, 'registerService'> & {
export type Kit = Omit<KitOptions, 'registerService'> & {
vitePlugin: () => Plugin
}

export function defineKit(options: KitOptions): DefineKitReturn {
const {name, registerService, ...args} = options
export function defineKit(options: KitOptions): Kit {
const {name, webFramework, registerService, ...args} = options

return {
name,
webFramework: webFramework ?? 'vue',
vitePlugin: (): Plugin => ({
name: `vite-plugin-${name}`,
configureServer(server: ViteDevServer) {
Expand Down
9 changes: 5 additions & 4 deletions packages/core/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -42,8 +42,10 @@
"access": "public"
},
"dependencies": {
"@babel/plugin-proposal-nullish-coalescing-operator": "7.18.6",
"@babel/plugin-proposal-optional-chaining": "7.18.9",
"@babel/plugin-transform-nullish-coalescing-operator": "7.24.1",
"@babel/plugin-transform-optional-chaining": "7.24.5",
"@revili/revili-kit-default": "workspace:*",
"@revili/shared": "workspace:*",
"@vitejs/plugin-vue": "5.0.4",
"@vitejs/plugin-vue-jsx": "3.1.0",
"autoprefixer": "10.4.13",
Expand All @@ -53,9 +55,8 @@
"postcss-each": "1.1.0",
"postcss-import": "15.0.0",
"tailwindcss": "3.2.1",
"@revili/revili-kit-default": "workspace:*",
"@revili/shared": "workspace:*",
"vite": "5.2.11",
"vite-plugin-babel": "1.2.0",
"vue": "3.2.45",
"vue-router": "^4.1.6"
}
Expand Down
90 changes: 3 additions & 87 deletions packages/core/src/node/viteServer/index.ts
Original file line number Diff line number Diff line change
@@ -1,94 +1,10 @@
import path from 'node:path'
import { pathToFileURL } from 'node:url'

import {createServer} from 'vite'
import {default as vuePlugin} from '@vitejs/plugin-vue'
import {default as vueJsxPlugin} from '@vitejs/plugin-vue-jsx'

import postcssImport from 'postcss-import'
import tailwindcss from 'tailwindcss'
import autoprefixer from 'autoprefixer'
import postcssEach from 'postcss-each'
import tailwindcssNesting from 'tailwindcss/nesting/index.js'

import {tailwindcssConfig} from './tailwindcssConfig/index.js'
import {reviliPlugin} from './plugins/vitePluginRevili.js'
import {virtualModulePlugin} from './plugins/vitePluginVirtualModule.js'
import { CACHE_FOLDER_PATH, CWD } from '../alias.js'
import { getReviliCache } from '../command/handleCache.js'
import { resolveViteConfig } from './resolveViteConfig.js'

export async function createViteServer({ devMode, customKitDir }: { devMode: boolean, customKitDir: string }) {
const { activeKit: activeKitName } = await getReviliCache();

// const NODE_MODULES_PATH_OF_KIT = path.join(CACHE_FOLDER_PATH, `./node_modules`);
const ACTIVE_KIT_DIR = path.join(CACHE_FOLDER_PATH, `./node_modules/${activeKitName}`);
const CLIENT_DIR = customKitDir
? path.join(CWD, `${customKitDir}/client`)
: path.join(devMode ? CWD : ACTIVE_KIT_DIR, `./dist/client`);
const ACTIVE_KIT_ENTRY = customKitDir
? path.join(CWD, `${customKitDir}/node/index.js`)
: path.join(devMode ? CWD : ACTIVE_KIT_DIR, `./dist/node/index.js`);

const activeKit = (await import(pathToFileURL(ACTIVE_KIT_ENTRY) as unknown as string)).default;

const server = await createServer({
configFile: false,
root: CLIENT_DIR,
server: {
port: 6789,
fs: {
allow: [CLIENT_DIR],
},
},
css: {
postcss: {
plugins: [
postcssImport,
tailwindcssNesting,
// @ts-ignore
tailwindcss(tailwindcssConfig),
autoprefixer({}),
postcssEach,
],
},
},
plugins: [
// @ts-ignore
vuePlugin({
// @ts-ignore
babel: {
// @ts-ignore
plugins: ['@babel/plugin-proposal-optional-chaining', '@babel/plugin-proposal-nullish-coalescing-operator'],
},
}),
// @ts-ignore
vueJsxPlugin(),
virtualModulePlugin('kit-config', activeKit),
reviliPlugin(CLIENT_DIR),
activeKit.vitePlugin()
],
/**
* 适配 Vue 等导出文件不是 ESM的情况
* @desc 这需要被链接的依赖被导出为 ESM 格式。如果不是,那么你可以在配置里将此依赖添加到 optimizeDeps.include 和 build.commonjsOptions.include 这两项中
* @link https://vitejs.cn/vite3-cn/guide/dep-pre-bundling.html#monorepos-and-linked-dependencies
*/
optimizeDeps: {
// tip: 实际引用可能不会添加 .js 后缀,所以 optimizeDeps.include 需要去掉
include: [
// `${NODE_MODULES_PATH_OF_KIT}/vue`,
],
},
build: {
commonjsOptions: {
include: [
// `${NODE_MODULES_PATH_OF_KIT}/vue`,
// NODE_MODULES_PATH_OF_KIT,
],
},
},
})
const viteConfig = await resolveViteConfig({ devMode, customKitDir })

const server = await createServer(viteConfig)
await server.listen()

server.printUrls()
}
85 changes: 85 additions & 0 deletions packages/core/src/node/viteServer/resolveViteConfig.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,85 @@
import path from 'node:path'
import { pathToFileURL } from 'node:url'

import { mergeConfig } from 'vite'
import type { UserConfig } from 'vite'

import {default as vuePlugin} from '@vitejs/plugin-vue'
import {default as vueJsxPlugin} from '@vitejs/plugin-vue-jsx'

import postcssImport from 'postcss-import'
import tailwindcss from 'tailwindcss'
import autoprefixer from 'autoprefixer'
import postcssEach from 'postcss-each'
import tailwindcssNesting from 'tailwindcss/nesting/index.js'

import {tailwindcssConfig} from './tailwindcssConfig/index.js'
import {reviliPlugin} from './plugins/vitePluginRevili.js'
import {virtualModulePlugin} from './plugins/vitePluginVirtualModule.js'
import { CACHE_FOLDER_PATH, CWD } from '../alias.js'
import { getReviliCache } from '../command/handleCache.js'

import type { Kit } from '@revili/shared/node'

export async function resolveViteConfig({ devMode, customKitDir }: { devMode: boolean, customKitDir: string }): Promise<UserConfig> {
const { activeKit: activeKitName } = await getReviliCache();

// const NODE_MODULES_PATH_OF_KIT = path.join(CACHE_FOLDER_PATH, `./node_modules`);
const ACTIVE_KIT_DIR = path.join(CACHE_FOLDER_PATH, `./node_modules/${activeKitName}`);
const CLIENT_DIR = customKitDir
? path.join(CWD, `${customKitDir}/client`)
: path.join(devMode ? CWD : ACTIVE_KIT_DIR, `./dist/client`);
const ACTIVE_KIT_ENTRY = customKitDir
? path.join(CWD, `${customKitDir}/node/index.js`)
: path.join(devMode ? CWD : ACTIVE_KIT_DIR, `./dist/node/index.js`);

const activeKit = (await import(pathToFileURL(ACTIVE_KIT_ENTRY) as unknown as string)).default as Kit;

const vitePlugins = [
virtualModulePlugin('kit-config', activeKit),
reviliPlugin(CLIENT_DIR),
activeKit.vitePlugin()
]

if (activeKit.webFramework === 'vue') {
vitePlugins.push(
vuePlugin({
// @ts-ignore
babel: {
plugins: [
"@babel/plugin-transform-optional-chaining",
"@babel/plugin-transform-nullish-coalescing-operator"
],
},
}),
vueJsxPlugin()
)
}

return mergeConfig(
{
configFile: false,
root: CLIENT_DIR,
server: {
port: 6789,
fs: {
allow: [CLIENT_DIR],
},
},
css: {
postcss: {
plugins: [
postcssImport,
tailwindcssNesting,
// @ts-ignore
tailwindcss(tailwindcssConfig),
autoprefixer({}),
postcssEach,
],
},
},
plugins: vitePlugins,
},
activeKit.viteOptions ?? {}
)
}
4 changes: 2 additions & 2 deletions packages/core/src/types/config.ts
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import type {DefineKitReturn} from '@revili/shared/node'
import type {Kit} from '@revili/shared/node'
export interface SidebarItem {
title: string
route: string
Expand All @@ -18,4 +18,4 @@ export interface AppOptions<T = string> {
[prop: string]: any
}

export type AppConfig = AppOptions<DefineKitReturn>
export type AppConfig = AppOptions<Kit>
Loading

0 comments on commit 1a000a4

Please sign in to comment.