@octohash/vite-config 0.2.0

package/LICENSE.md

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2025 Jing Haihan
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,192 @@
+# @octohash/vite-config
+
+[![npm version][npm-version-src]][npm-version-href]
+[![npm downloads][npm-downloads-src]][npm-downloads-href]
+[![bundle][bundle-src]][bundle-href]
+[![JSDocs][jsdocs-src]][jsdocs-href]
+[![License][license-src]][license-href]
+
+> [!NOTE]
+> My personal vite config, opinionated but customizable, with built-in support for unplugin, i18n, and more.
+
+```bash
+pnpm add -d @octohash/vite-config
+```
+
+## Usage
+
+Automatically detects the project type (app or library) and applies suitable plugins. Manual configuration is rarely needed.
+
+```ts
+import { defineConfig } from '@octohash/vite-config'
+import tailwindcss from '@tailwindcss/vite'
+
+export default defineConfig({
+  // Vue are autodetected, you can also explicitly enable them
+  vue: true,
+  // You can override and extend vite config here
+  vite: {
+    plugins: [
+      tailwindcss(),
+    ]
+  }
+})
+```
+
+## Customization
+
+The following is the top-level configuration (OptionsConfig) used to customize the Vite setup. It covers project type detection, alias resolution, common plugins, and both app/library-specific options.
+
+```ts
+interface OptionsConfig {
+  /**
+   * Whether to build for production
+   *
+   * @default auto-detect based on `command === 'build'`
+   */
+  isBuild?: boolean
+  /**
+   * Type of the project
+   *
+   * @default auto-detect based on the `index.html` file
+   */
+  type?: ProjectType
+  /**
+   * Aliases used to replace values in `import` or `require` statements
+   * Paths are automatically resolved if needed
+   *
+   * @default { "@": "./src" }
+   */
+  alias?: AliasOptions
+
+  // Common Plugin
+  /**
+   * https://github.com/btd/rollup-plugin-visualizer
+   * By default template path is: ./node_modules/.cache/visualizer/stats.html
+   *
+   * @default false
+   */
+  visualizer?: boolean | VisualizerPluginOptions
+  /**
+   * Inject license info to output files
+   * Load license file from `package.json`, if it is a monorepo project, the root `package.json` will also be merged
+   *
+   * @default true
+   */
+  license?: boolean | LicensePluginOptions
+  /**
+   * https://github.com/originjs/vite-plugin-federation
+   * Module federation
+   */
+  federation?: FederationPluginOptions
+
+  // Application Plugin
+  /**
+   * https://github.com/chenxch/vite-plugin-dynamic-base
+   * If you want to build once and deploy to multiple environments, you can enable this plugin to set publicPath at runtime
+   * You can set like this: `dynamicBase: 'window.__dynamic_base__'`
+   */
+  dynamicBase?: string
+  /**
+   * Inject app loading to `index.html`
+   * You can customize the root element and loading template
+   * Use `[app-loading-title]` as a placeholder to dynamically set the document title during loading`
+   *
+   * @default auto-detect based on `projectType === 'app'`
+   */
+  appLoading?: boolean | AppLoadingPluginOptions
+  /**
+   * Injects metadata using `define`, accessible via `__VITE_APP_METADATA__`.
+   * Includes information such as author, build time, version, and more.
+   *
+   * @default auto-detect based on `projectType === 'app'`
+   */
+  metadata?: boolean | MetadataPluginOptions
+  /**
+   * Generates an import map for the project.
+   * Based on https://github.com/jspm/vite-plugin-jspm, with extended CDN provider support and options for include/exclude.
+   *
+   * @default false
+   */
+  importMap?: boolean | ImportMapPluginOptions
+
+  // Library Plugin
+  /**
+   * https://github.com/qmhc/vite-plugin-dts
+   * Generates declaration files from .ts or .vue source files
+   *
+   * @default auto-detect based on `projectType === 'lib'`
+   */
+  dts?: boolean | DtsPluginOptions
+
+  // Vue Plugin
+  /**
+   * Enable Vue support
+   * The goal is to provide an automatic registration mechanism similar to Nuxt in app development.
+   *
+   * @default auto-detect based on the dependencies
+   */
+  vue?: boolean | OptionsVue
+
+  // Override
+  vite?: UserConfig
+}
+```
+
+Vue-related options (vue) can also be customized in detail
+
+```ts
+interface OptionsVue {
+  /**
+   * https://github.com/vuejs/devtools
+   * Enable Vue Devtools
+   *
+   * @default false
+   */
+  devtools?: boolean | VueDevtoolsPluginOptions
+  /**
+   * https://github.com/intlify/bundle-tools
+   * Enable Vue I18n
+   *
+   * @default false
+   */
+  i18n?: boolean | VueI18nPluginOptions
+  /**
+   * https://github.com/unplugin/unplugin-auto-import
+   * Automatically imports commonly used APIs such as `vue`, `vue-router`, `pinia`, `@vueuse/core`, etc
+   * Also supports auto-importing UI components from libraries like `ant-design-vue`, `element-plus`, etc
+   *
+   * @default auto-detect based on `projectType === 'app'`
+   */
+  imports?: boolean | VueImportsPluginOptions
+  /**
+   * https://github.com/unplugin/unplugin-vue-components
+   * Enabled by default when the project type is `app`
+   * The `directoryAsNamespace` option is enabled by default.
+   *
+   * @default auto-detect based on `projectType === 'app'`
+   */
+  components?: boolean | VueComponentsPluginOptions
+  /**
+   * https://github.com/posva/unplugin-vue-router
+   * Enabled by default when the project type is `app`
+   * Folder(s) to scan for files and generate routes. Defaults to scanning the pages directory.
+   *
+   * @default auto-detect based on `projectType === 'app'`
+   */
+  pages?: boolean | VuePagesPluginOptions
+}
+```
+
+<!-- Badges -->
+
+[npm-version-src]: https://img.shields.io/npm/v/@octohash/vite-config?style=flat&colorA=080f12&colorB=1fa669
+[npm-version-href]: https://npmjs.com/package/@octohash/vite-config
+[npm-downloads-src]: https://img.shields.io/npm/dm/@octohash/vite-config?style=flat&colorA=080f12&colorB=1fa669
+[npm-downloads-href]: https://npmjs.com/package/@octohash/vite-config
+[bundle-src]: https://img.shields.io/bundlephobia/minzip/@octohash/vite-config?style=flat&colorA=080f12&colorB=1fa669&label=minzip
+[bundle-href]: https://bundlephobia.com/result?p=@octohash/vite-config
+[license-src]: https://img.shields.io/badge/license-MIT-blue.svg?style=flat&colorA=080f12&colorB=1fa669
+[license-href]: https://github.com/jinghaihan/@octohash/vite-config/LICENSE
+[jsdocs-src]: https://img.shields.io/badge/jsdocs-reference-080f12?style=flat&colorA=080f12&colorB=1fa669
+[jsdocs-href]: https://www.jsdocs.io/package/@octohash/vite-config

package/dist/default-loading.html

@@ -0,0 +1,114 @@
+<style data-app-loading="inject-css">
+  html {
+    /* same as ant-design-vue/dist/reset.css setting, avoid the title line-height changed */
+    line-height: 1.15;
+  }
+
+  .loading {
+    position: fixed;
+    top: 0;
+    left: 0;
+    z-index: 9999;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    width: 100%;
+    height: 100%;
+    overflow: hidden;
+    background-color: #f4f7f9;
+
+    /* transition: all 0.8s ease-out; */
+  }
+
+  .loading.hidden {
+    pointer-events: none;
+    visibility: hidden;
+    opacity: 0;
+    transition: all 0.8s ease-out;
+  }
+
+  .dark .loading {
+    background: #0d0d10;
+  }
+
+  .title {
+    margin-top: 66px;
+    font-size: 28px;
+    font-weight: 600;
+    color: rgb(0 0 0 / 85%);
+  }
+
+  .dark .title {
+    color: #fff;
+  }
+
+  .loader {
+    position: relative;
+    width: 48px;
+    height: 48px;
+  }
+
+  .loader::before {
+    position: absolute;
+    top: 60px;
+    left: 0;
+    width: 48px;
+    height: 5px;
+    content: '';
+    background: hsl(var(--primary, 212 100% 45%) / 50%);
+    border-radius: 50%;
+    animation: shadow-ani 0.5s linear infinite;
+  }
+
+  .loader::after {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    content: '';
+    background: hsl(var(--primary, 212 100% 45%));
+    border-radius: 4px;
+    animation: jump-ani 0.5s linear infinite;
+  }
+
+  @keyframes jump-ani {
+    15% {
+      border-bottom-right-radius: 3px;
+    }
+
+    25% {
+      transform: translateY(9px) rotate(22.5deg);
+    }
+
+    50% {
+      border-bottom-right-radius: 40px;
+      transform: translateY(18px) scale(1, 0.9) rotate(45deg);
+    }
+
+    75% {
+      transform: translateY(9px) rotate(67.5deg);
+    }
+
+    100% {
+      transform: translateY(0) rotate(90deg);
+    }
+  }
+
+  @keyframes shadow-ani {
+    0%,
+    100% {
+      transform: scale(1, 1);
+    }
+
+    50% {
+      transform: scale(1.2, 1);
+    }
+  }
+</style>
+
+<div class="loading" id="__app-loading__">
+  <div class="loader"></div>
+  <div class="title">[app-loading-title]</div>
+</div>

package/dist/esm-shims-BFgucRO_.js

@@ -0,0 +1,46 @@
+import { createRequire } from "node:module";
+import path from "node:path";
+import { fileURLToPath } from "node:url";
+
+//#region rolldown:runtime
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __esm = (fn, res) => function() {
+	return fn && (res = (0, fn[__getOwnPropNames(fn)[0]])(fn = 0)), res;
+};
+var __commonJS = (cb, mod) => function() {
+	return mod || (0, cb[__getOwnPropNames(cb)[0]])((mod = { exports: {} }).exports, mod), mod.exports;
+};
+var __copyProps = (to, from, except, desc) => {
+	if (from && typeof from === "object" || typeof from === "function") for (var keys = __getOwnPropNames(from), i = 0, n = keys.length, key; i < n; i++) {
+		key = keys[i];
+		if (!__hasOwnProp.call(to, key) && key !== except) __defProp(to, key, {
+			get: ((k) => from[k]).bind(null, key),
+			enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable
+		});
+	}
+	return to;
+};
+var __reExport = (target, mod, secondTarget) => (__copyProps(target, mod, "default"), secondTarget && __copyProps(secondTarget, mod, "default"));
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", {
+	value: mod,
+	enumerable: true
+}) : target, mod));
+var __require = /* @__PURE__ */ createRequire(import.meta.url);
+
+//#endregion
+//#region node_modules/.pnpm/tsdown@0.12.4_typescript@5.8.3/node_modules/tsdown/esm-shims.js
+var getFilename, getDirname, __dirname, __filename;
+var init_esm_shims = __esm({ "node_modules/.pnpm/tsdown@0.12.4_typescript@5.8.3/node_modules/tsdown/esm-shims.js"() {
+	getFilename = () => fileURLToPath(import.meta.url);
+	getDirname = () => path.dirname(getFilename());
+	__dirname = /* @__PURE__ */ getDirname();
+	__filename = /* @__PURE__ */ getFilename();
+} });
+
+//#endregion
+export { __commonJS, __dirname, __filename, __reExport, __require, __toESM, init_esm_shims };

package/dist/index.d.ts

@@ -0,0 +1,190 @@
+import * as vite0 from "vite";
+import { AliasOptions, PluginOption, UserConfig } from "vite";
+import { PluginVisualizerOptions } from "rollup-plugin-visualizer";
+import { PluginOptions } from "vite-plugin-dts";
+import { VitePluginFederationOptions } from "@originjs/vite-plugin-federation";
+import { VitePluginVueDevToolsOptions } from "vite-plugin-vue-devtools";
+import { PluginOptions as PluginOptions$1 } from "@intlify/unplugin-vue-i18n";
+import { Options } from "unplugin-auto-import/types";
+import { Options as Options$1 } from "unplugin-vue-components";
+import { Options as Options$2 } from "unplugin-vue-router";
+import { GeneratorOptions } from "@jspm/generator";
+
+//#region src/plugins/app-loading/index.d.ts
+interface AppLoadingPluginOptions {
+  rootContainer?: string;
+  title?: string;
+  filePath?: string;
+}
+//#endregion
+//#region src/plugins/import-map.d.ts
+interface ImportMapPluginOptions extends GeneratorOptions {
+  downloadDeps?: boolean;
+  debug?: boolean;
+  defaultProvider?: 'jspm.io' | 'jsdelivr' | 'unpkg' | 'esm.sh';
+  include?: string[];
+  exclude?: string[];
+}
+//#endregion
+//#region src/plugins/license.d.ts
+interface LicensePluginOptions {
+  name?: string;
+  author?: string;
+  version?: string;
+  description?: string;
+  homepage?: string;
+  license?: string;
+  contact?: string;
+  copyright?: {
+    holder?: string;
+    year?: string | number;
+  };
+}
+//#endregion
+//#region src/plugins/metadata.d.ts
+interface MetadataPluginOptions {
+  extendMetadata?: Record<string, unknown>;
+}
+//#endregion
+//#region src/types.d.ts
+type ProjectType = 'app' | 'lib';
+interface CommonPluginOptions {
+  /**
+   * https://github.com/btd/rollup-plugin-visualizer
+   * By default template path is: ./node_modules/.cache/visualizer/stats.html
+   *
+   * @default false
+   */
+  visualizer?: boolean | PluginVisualizerOptions;
+  /**
+   * Inject license info to output files
+   * Load license file from `package.json`, if it is a monorepo project, the root `package.json` will also be merged
+   *
+   * @default true
+   */
+  license?: boolean | LicensePluginOptions;
+  /**
+   * https://github.com/originjs/vite-plugin-federation
+   * Module federation
+   */
+  federation?: VitePluginFederationOptions;
+}
+interface AppPluginOptions {
+  /**
+   * https://github.com/chenxch/vite-plugin-dynamic-base
+   * If you want to build once and deploy to multiple environments, you can enable this plugin to set publicPath at runtime
+   * You can set like this: `dynamicBase: 'window.__dynamic_base__'`
+   */
+  dynamicBase?: string;
+  /**
+   * Inject app loading to `index.html`
+   * You can customize the root element and loading template
+   * Use `[app-loading-title]` as a placeholder to dynamically set the document title during loading`
+   *
+   * @default auto-detect based on `projectType === 'app'`
+   */
+  appLoading?: boolean | AppLoadingPluginOptions;
+  /**
+   * Injects metadata using `define`, accessible via `__VITE_APP_METADATA__`.
+   * Includes information such as author, build time, version, and more.
+   *
+   * @default auto-detect based on `projectType === 'app'`
+   */
+  metadata?: boolean | MetadataPluginOptions;
+  /**
+   * Generates an import map for the project.
+   * Based on https://github.com/jspm/vite-plugin-jspm, with extended CDN provider support and options for include/exclude.
+   *
+   * @default false
+   */
+  importMap?: boolean | ImportMapPluginOptions;
+}
+interface LibPluginOptions {
+  /**
+   * https://github.com/qmhc/vite-plugin-dts
+   * Generates declaration files from .ts or .vue source files
+   *
+   * @default auto-detect based on `projectType === 'lib'`
+   */
+  dts?: boolean | PluginOptions;
+}
+interface OptionsVue {
+  /**
+   * https://github.com/vuejs/devtools
+   * Enable Vue Devtools
+   *
+   * @default false
+   */
+  devtools?: boolean | VitePluginVueDevToolsOptions;
+  /**
+   * https://github.com/intlify/bundle-tools
+   * Enable Vue I18n
+   *
+   * @default false
+   */
+  i18n?: boolean | PluginOptions$1;
+  /**
+   * https://github.com/unplugin/unplugin-auto-import
+   * Auto-imports commonly used APIs such as `vue`, `vue-router`, `pinia`, `@vueuse/core`, etc
+   * Also supports auto-importing UI components from libraries like `ant-design-vue`, `element-plus`, etc
+   * Files from `src/composables` and `src/utils` will also be auto-imported.
+   *
+   * @default auto-detect based on `projectType === 'app'`
+   */
+  imports?: boolean | Options;
+  /**
+   * https://github.com/unplugin/unplugin-vue-components
+   * Enabled by default when the project type is `app`
+   * The `directoryAsNamespace` option is enabled by default.
+   *
+   * @default auto-detect based on `projectType === 'app'`
+   */
+  components?: boolean | Options$1;
+  /**
+   * https://github.com/posva/unplugin-vue-router
+   * Enabled by default when the project type is `app`
+   * Folder(s) to scan for files and generate routes. Defaults to scanning the pages directory.
+   *
+   * @default auto-detect based on `projectType === 'app'`
+   */
+  pages?: boolean | Options$2;
+}
+interface OptionsConfig extends CommonPluginOptions, AppPluginOptions, LibPluginOptions {
+  /**
+   * Whether to build for production
+   *
+   * @default auto-detect based on `command === 'build'`
+   */
+  isBuild?: boolean;
+  /**
+   * Type of the project
+   *
+   * @default auto-detect based on the `index.html` file
+   */
+  type?: ProjectType;
+  /**
+   * Aliases used to replace values in `import` or `require` statements
+   * Paths are automatically resolved if needed
+   *
+   * @default { "@": "./src" }
+   */
+  alias?: AliasOptions;
+  /**
+   * Enable Vue support
+   * The goal is to provide an automatic registration mechanism similar to Nuxt in app development.
+   *
+   * @default auto-detect based on the dependencies
+   */
+  vue?: boolean | OptionsVue;
+  vite?: UserConfig;
+}
+interface ConditionPlugin {
+  condition?: boolean;
+  plugins: () => PluginOption[] | PromiseLike<PluginOption[]>;
+}
+type ResolvedOptions<T> = T extends boolean ? never : NonNullable<T>;
+//#endregion
+//#region src/index.d.ts
+declare function defineConfig(options: OptionsConfig): vite0.UserConfigFnPromise;
+//#endregion
+export { AppPluginOptions, CommonPluginOptions, ConditionPlugin, LibPluginOptions, OptionsConfig, OptionsVue, ProjectType, ResolvedOptions, defineConfig };