@octohash/vite-config 0.4.0 → 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>