@octohash/vite-config 0.3.4 → 0.5.0

package/README.md

@@ -12,7 +12,7 @@ pnpm add -D @octohash/vite-config
 
 ## Usage
 
-Automatically detects the project type (app or library) and applies suitable plugins. Manual configuration is rarely needed.
+Provides an application-focused Vite preset with suitable plugins. Manual configuration is rarely needed.
 
 ```ts
 import { defineConfig } from '@octohash/vite-config'
@@ -32,7 +32,7 @@ export default defineConfig({
 
 ## 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.
+The following is the top-level configuration (OptionsConfig) used to customize the Vite setup. It covers alias resolution, common plugins, and application-specific options.
 
 ```ts
 interface OptionsConfig {
@@ -42,12 +42,6 @@ interface OptionsConfig {
    * @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
@@ -71,12 +65,6 @@ interface OptionsConfig {
    * @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
@@ -89,33 +77,16 @@ interface OptionsConfig {
    * 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'`
+   * @default true
    */
   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'`
+   * @default true
    */
   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
@@ -153,7 +124,7 @@ interface OptionsVue {
    * 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'`
+   * @default true
    */
   imports?: boolean | VueImportsPluginOptions
   /**
@@ -161,15 +132,15 @@ interface OptionsVue {
    * Enabled by default when the project type is `app`
    * The `directoryAsNamespace` option is enabled by default.
    *
-   * @default auto-detect based on `projectType === 'app'`
+   * @default true
    */
   components?: boolean | VueComponentsPluginOptions
   /**
-   * https://github.com/posva/unplugin-vue-router
+   * https://router.vuejs.org/guide/file-based-routing.html
    * 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'`
+   * @default true
    */
   pages?: boolean | VuePagesPluginOptions
 }

package/dist/default-loading.html

@@ -5,6 +5,9 @@
   }
 
   .loading {
+    --app-loading-background: #fff;
+    --app-loading-foreground: #000;
+
     position: fixed;
     top: 0;
     left: 0;
@@ -16,7 +19,8 @@
     width: 100%;
     height: 100%;
     overflow: hidden;
-    background-color: #f4f7f9;
+    color: var(--app-loading-foreground);
+    background-color: var(--app-loading-background);
 
     /* transition: all 0.8s ease-out; */
   }
@@ -29,81 +33,86 @@
   }
 
   .dark .loading {
-    background: #0d0d10;
+    --app-loading-background: #000;
+    --app-loading-foreground: #fff;
   }
 
   .title {
-    margin-top: 66px;
+    margin-top: 64px;
     font-size: 28px;
     font-weight: 600;
-    color: rgb(0 0 0 / 85%);
-  }
-
-  .dark .title {
-    color: #fff;
+    color: var(--app-loading-foreground);
   }
 
   .loader {
     position: relative;
-    width: 48px;
-    height: 48px;
+    width: 2.5em;
+    height: 2.5em;
+    font-size: 20px;
+    color: var(--app-loading-foreground);
+    transform: rotate(165deg);
   }
 
-  .loader::before {
+  .loader::before,
+  .loader::after {
     position: absolute;
-    top: 60px;
-    left: 0;
-    width: 48px;
-    height: 5px;
+    top: 50%;
+    left: 50%;
+    display: block;
+    width: 0.5em;
+    height: 0.5em;
     content: '';
-    background: hsl(var(--primary, 212 100% 45%) / 50%);
-    border-radius: 50%;
-    animation: shadow-ani 0.5s linear infinite;
+    border-radius: 0.25em;
+    transform: translate(-50%, -50%);
   }
 
-  .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;
+  .loader::before {
+    animation: before8 2s infinite;
   }
 
-  @keyframes jump-ani {
-    15% {
-      border-bottom-right-radius: 3px;
-    }
+  .loader::after {
+    animation: after6 2s infinite;
+  }
 
-    25% {
-      transform: translateY(9px) rotate(22.5deg);
+  @keyframes before8 {
+    0% {
+      width: 0.5em;
+      box-shadow: 1em -0.5em currentColor, -1em 0.5em currentColor;
     }
 
-    50% {
-      border-bottom-right-radius: 40px;
-      transform: translateY(18px) scale(1, 0.9) rotate(45deg);
+    35% {
+      width: 2.5em;
+      box-shadow: 0 -0.5em currentColor, 0 0.5em currentColor;
     }
 
-    75% {
-      transform: translateY(9px) rotate(67.5deg);
+    70% {
+      width: 0.5em;
+      box-shadow: -1em -0.5em currentColor, 1em 0.5em currentColor;
     }
 
     100% {
-      transform: translateY(0) rotate(90deg);
+      box-shadow: 1em -0.5em currentColor, -1em 0.5em currentColor;
     }
   }
 
-  @keyframes shadow-ani {
-    0%,
-    100% {
-      transform: scale(1, 1);
+  @keyframes after6 {
+    0% {
+      height: 0.5em;
+      box-shadow: 0.5em 1em currentColor, -0.5em -1em currentColor;
     }
 
-    50% {
-      transform: scale(1.2, 1);
+    35% {
+      height: 2.5em;
+      box-shadow: 0.5em 0 currentColor, -0.5em 0 currentColor;
+    }
+
+    70% {
+      height: 0.5em;
+      box-shadow: 0.5em -1em currentColor, -0.5em 1em currentColor;
+    }
+
+    100% {
+      box-shadow: 0.5em 1em currentColor, -0.5em -1em currentColor;
     }
   }
 </style>

package/dist/index.d.mts

@@ -1,195 +1,159 @@
-import * as vite from 'vite';
-import { AliasOptions, UserConfig, PluginOption } from 'vite';
-import { PluginOptions as PluginOptions$1 } from '@intlify/unplugin-vue-i18n';
-import { VitePluginFederationOptions } from '@originjs/vite-plugin-federation';
-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 { PluginOptions } from 'vite-plugin-dts';
-import { VitePluginVueDevToolsOptions } from 'vite-plugin-vue-devtools';
-import { GeneratorOptions } from '@jspm/generator';
+import { AliasOptions, PluginOption, UserConfig } from "vite";
+import { PluginOptions } from "@intlify/unplugin-vue-i18n";
+import { Options } from "unplugin-auto-import/types";
+import { Options as Options$1 } from "unplugin-vue-components";
+import { VitePluginVueDevToolsOptions } from "vite-plugin-vue-devtools";
+import { Options as Options$2 } from "vue-router/unplugin";
 
+//#region src/plugins/app-loading/index.d.ts
 interface AppLoadingPluginOptions {
-    container?: string;
-    title?: string;
-    filepath?: string;
+  container?: string;
+  title?: string;
+  filepath?: string;
 }
-
-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;
-    };
+  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>;
+  extendMetadata?: Record<string, unknown>;
 }
-
-type ProjectType = 'app' | 'lib';
+//#endregion
+//#region src/types.d.ts
 interface CommonPluginOptions {
-    /**
-     * https://github.com/KusStar/vite-bundle-visualizer
-     * By default template path is: ./node_modules/.cache/visualizer/stats.html
-     *
-     * @default false
-     */
-    visualizer?: boolean | {
-        help?: boolean;
-        template?: 'treemap' | 'sunburst' | 'network';
-        output?: string;
-        open?: boolean;
-        config?: string;
-    };
-    /**
-     * 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;
+  /**
+   * https://github.com/KusStar/vite-bundle-visualizer
+   * By default template path is: ./node_modules/.cache/visualizer/stats.html
+   *
+   * @default false
+   */
+  visualizer?: boolean | {
+    help?: boolean;
+    template?: 'treemap' | 'sunburst' | 'network';
+    output?: string;
+    open?: boolean;
+    config?: string;
+  };
+  /**
+   * 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;
 }
 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;
+  /**
+   * 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 true
+   */
+  appLoading?: boolean | AppLoadingPluginOptions;
+  /**
+   * Injects metadata using `define`, accessible via `__VITE_APP_METADATA__`.
+   * Includes information such as author, build time, version, and more.
+   *
+   * @default true
+   */
+  metadata?: boolean | MetadataPluginOptions;
 }
 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;
+  /**
+   * 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;
+  /**
+   * 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 true
+   */
+  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 true
+   */
+  components?: boolean | Options$1;
+  /**
+   * https://router.vuejs.org/guide/file-based-routing.html
+   * 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 true
+   */
+  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 configuration override
-     *
-     * @default {}
-     */
-    vite?: UserConfig;
+interface OptionsConfig extends CommonPluginOptions, AppPluginOptions {
+  /**
+   * Whether to build for production
+   *
+   * @default auto-detect based on `command === 'build'`
+   */
+  isBuild?: boolean;
+  /**
+   * 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 configuration override
+   *
+   * @default {}
+   */
+  vite?: UserConfig;
 }
 interface ConditionPlugin {
-    condition?: boolean;
-    plugins: () => PluginOption[] | PromiseLike<PluginOption[]>;
+  condition?: boolean;
+  plugins: () => PluginOption[] | PromiseLike<PluginOption[]>;
 }
 type ResolvedOptions<T> = T extends boolean ? never : NonNullable<T>;
-
-declare function defineConfig(options: OptionsConfig): vite.UserConfigFnPromise;
-
-export { defineConfig };
-export type { AppPluginOptions, CommonPluginOptions, ConditionPlugin, LibPluginOptions, OptionsConfig, OptionsVue, ProjectType, ResolvedOptions };
+//#endregion
+//#region src/index.d.ts
+declare function defineConfig(options: OptionsConfig): import("vite").UserConfigFnPromise;
+//#endregion
+export { AppPluginOptions, CommonPluginOptions, ConditionPlugin, OptionsConfig, OptionsVue, ResolvedOptions, defineConfig };