v0.1.0

Author: caoxiemeihao

.gitignore

@@ -102,3 +102,13 @@ dist
 
 # TernJS port file
 .tern-port
+
+.DS_Store
+
+package-lock.json
+pnpm-lock.yaml
+yarn.lock
+
+/types
+/index.cjs
+/index.js

CHANGELOG.md

@@ -0,0 +1 @@
+## 0.1.0 (2023-01-17)

README.md

@@ -1,2 +1,68 @@
 # vite-plugin-multiple
+
 Allow multiple Vite to run simultaneously.
+
+[![NPM version](https://img.shields.io/npm/v/vite-plugin-multiple.svg)](https://npmjs.com/package/vite-plugin-multiple)
+[![NPM Downloads](https://img.shields.io/npm/dm/vite-plugin-multiple.svg)](https://npmjs.com/package/vite-plugin-multiple)
+
+## Install
+
+```sh
+npm i -D vite-plugin-multiple
+```
+
+## Usage
+
+```js
+import multiple from 'vite-plugin-multiple'
+
+export default {
+  plugins: [
+    multiple([
+      {
+        name: 'foo',
+        config: 'vite.foo.config.mjs',
+      },
+      {
+        name: 'bar',
+        config: 'vite.bar.config.mjs',
+      },
+    ]),
+  ],
+}
+```
+
+**`vite serve`**
+
+- `http://localhost:5173` access to the **main** app
+- `http://localhost:5174` access to the **foo** app
+- `http://localhost:5175` access to the **bar** app
+
+**`vite build`**
+
+- `dist` **main** app
+- `dist/foo` **foo** app
+- `dist/bar` **bar** app
+
+## API <sub><sup>(Define)</sup></sub>
+
+```ts
+multiple(
+  options: {
+    /**
+     * Human friendly name of your entry point.
+     */
+    name: string
+    /**
+     * Vite config file path.
+     */
+    config: string
+  }[],
+  args?: {
+    /**
+     * Called when all builds are complete.
+     */
+    callback?: (command: 'build' | 'serve') => void
+  },
+)
+```

package.json

@@ -0,0 +1,41 @@
+{
+  "name": "vite-plugin-multiple",
+  "version": "0.1.0",
+  "description": "Allow multiple Vite to run simultaneously",
+  "type": "module",
+  "main": "index.js",
+  "types": "src",
+  "exports": {
+    ".": {
+      "import": "./index.js",
+      "require": "./index.cjs"
+    }
+  },
+  "repository": "https://github.com/vite-plugin/vite-plugin-multiple.git",
+  "author": "草鞋没号 <308487730@qq.com>",
+  "license": "MIT",
+  "scripts": {
+    "dev": "vite build --watch",
+    "build": "vite build",
+    "types": "tsc",
+    "test": "vitest run",
+    "prepublishOnly": "npm run test && npm run build"
+  },
+  "devDependencies": {
+    "@types/node": "^18.11.18",
+    "node-fetch": "^3.3.0",
+    "typescript": "^4.9.4",
+    "vite": "^4.0.4",
+    "vitest": "^0.27.1"
+  },
+  "files": [
+    "types",
+    "index.cjs",
+    "index.js"
+  ],
+  "keywords": [
+    "vite",
+    "config",
+    "multiple"
+  ]
+}

src/index.ts

@@ -0,0 +1,103 @@
+import path from 'node:path'
+import {
+  type Plugin,
+  type ResolvedConfig,
+  type UserConfig,
+  build as viteBuild,
+  createServer,
+  loadConfigFromFile,
+  mergeConfig,
+} from 'vite'
+
+export interface OptionItem {
+  /**
+   * Human friendly name of your entry point.
+   */
+  name: string
+  /**
+   * Vite config file path.
+   */
+  config: string
+}
+
+export default function multiple(
+  options: OptionItem[],
+  args: {
+    /**
+     * Called when all builds are complete.
+     */
+    callback?: (command: ResolvedConfig['command']) => void,
+  } = {},
+): Plugin {
+  let config: ResolvedConfig
+
+  return {
+    name: 'vite-plugin-multiple',
+    config(config) {
+      config.clearScreen ??= false
+    },
+    async configResolved(_config) {
+      config = _config
+    },
+    configureServer(server) {
+      if (server.httpServer) {
+        server.httpServer.once('listening', () => serve(config, options).then(() => args.callback?.('serve')))
+      } else {
+        serve(config, options).then(() => args.callback?.('serve'))
+      }
+    },
+    async closeBundle() {
+      if (config.command === 'build') {
+        await build(config, options)
+        args.callback?.(config.command)
+      }
+    },
+  }
+}
+
+export async function resolveConfig(config: ResolvedConfig, option: OptionItem): Promise<UserConfig> {
+  const { config: userConfig } = (await loadConfigFromFile({
+    command: config.command,
+    mode: config.mode,
+    ssrBuild: !!config.build?.ssr,
+  }, option.config)) ?? { path: '', config: {}, dependencies: [] };
+  const defaultConfig: UserConfig = {
+    root: config.root,
+    mode: config.mode,
+    build: {
+      outDir: !userConfig.root || config.root === userConfig.root
+        ? path.posix.join(config.build.outDir, option.name)
+        : undefined,
+    },
+    clearScreen: false,
+  }
+  return mergeConfig(defaultConfig, userConfig);
+}
+
+export async function build(config: ResolvedConfig, options: OptionItem[]) {
+  for (const option of options) {
+    const userConfig = await resolveConfig(config, option)
+    await viteBuild({
+      // 🚧 Avoid recursive build caused by load default config file.
+      configFile: false,
+      ...userConfig,
+    })
+  }
+}
+
+export async function serve(config: ResolvedConfig, options: OptionItem[]) {
+  let port = 5174 // The port of main App is 5173
+  for (const option of options) {
+    const userConfig = await resolveConfig(config, option)
+
+    userConfig.server ??= {}
+    userConfig.server.port ??= port++
+
+    const viteDevServer = await createServer({
+      configFile: false,
+      ...userConfig,
+    })
+    await viteDevServer.listen()
+    viteDevServer.printUrls()
+  }
+}

test/build.test.ts

@@ -0,0 +1,43 @@
+import fs from 'node:fs'
+import path from 'node:path'
+import { build as viteBuild } from 'vite'
+import {
+  beforeAll,
+  afterAll,
+  expect,
+  test,
+} from 'vitest'
+import multiple from '../src'
+
+const root = path.join(__dirname, 'fixtures')
+
+beforeAll(async () => {
+  await viteBuild({
+    configFile: path.join(root, 'vite.config.mjs'),
+    plugins: [multiple([
+      {
+        name: 'foo',
+        config: path.join(root, 'foo/vite.config.mjs'),
+      },
+      {
+        name: 'bar',
+        config: path.join(root, 'bar/vite.config.mjs'),
+      },
+    ])],
+  })
+})
+
+test('build', async () => {
+  const { message: main } = await import('./fixtures/dist/main'!)
+  const { message: foo } = await import('./fixtures/foo/dist/main'!)
+  const { message: bar } = await import('./fixtures/bar/dist/main'!)
+  expect(main).eq('main')
+  expect(foo).eq('foo')
+  expect(bar).eq('bar')
+})
+
+afterAll(() => {
+  fs.rmSync(path.join(root, 'dist'), { recursive: true, force: true })
+  fs.rmSync(path.join(root, 'foo/dist'), { recursive: true, force: true })
+  fs.rmSync(path.join(root, 'bar/dist'), { recursive: true, force: true })
+})

test/fixtures/bar/index.html

@@ -0,0 +1,9 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+</head>
+<body>
+  <h1>bar</h1>
+</body>
+</html>

test/fixtures/bar/main.ts

@@ -0,0 +1 @@
+export const message = 'bar'

test/fixtures/bar/vite.config.mjs

@@ -0,0 +1,18 @@
+import { defineConfig } from 'vite'
+
+export default defineConfig(({ command }) => {
+  return command === 'build'
+    ? {
+      build: {
+        lib: {
+          entry: 'main.ts',
+          formats: ['es'],
+          fileName: () => '[name].js',
+        }
+      },
+      root: __dirname,
+    }
+    : {
+      root: __dirname,
+    }
+})

test/fixtures/foo/index.html

@@ -0,0 +1,9 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+</head>
+<body>
+  <h1>foo</h1>
+</body>
+</html>