chore: revert to non-react

Author: tomcru

README.md

@@ -15,7 +15,7 @@ Also check out [Holy Time](https://github.com/badosz0/holy-time), yet another (t
 
 - Easy to integrate with any React application.
 - Highly customizable with sensible defaults.
-- Utilizes NProgress for smooth, aesthetic progress indications.
+- Utilizes a custom implementation for smooth, aesthetic progress indications.
 - Supports dynamic configuration for color, height, speed, easing, and more.
 
 ## Installation
@@ -97,13 +97,11 @@ onClick={(e) => {
 
 ## API
 
-Holy Loader accepts the following props for customization:
+`<HolyLoader />` accepts the following props for customization:
 
 - `color` (string): Specifies the color of the top-loading bar. Default: "#59a2ff" (a shade of blue).
 - `initialPosition` (number): Sets the initial position of the top-loading bar as a percentage of the total width. Default: 0.08 (8% of the total width).
-- `trickleSpeed` (number): Determines the delay speed for the incremental movement of the top-loading bar, in milliseconds. Default: 200 milliseconds.
 - `height` (number | string): Defines the height of the top-loading bar in pixels or css unit. Default: 4 pixels.
-- `trickle` (boolean): Enables or disables the automatic incremental movement of the top-loading bar. Default: true (enabled).
 - `easing` (string): Specifies the easing function to use for the loading animation. Accepts any valid CSS easing string. Default: "ease".
 - `speed` (number): Sets the animation speed of the top-loading bar in milliseconds. Default: 200 milliseconds.
 - `zIndex` (number): Defines the z-index property of the top-loading bar, controlling its stacking order. Default: 2147483647.

package-lock.json

@@ -1,6 +1,6 @@
 {
   "name": "holy-loader",
-  "version": "2.1.0",
+  "version": "2.2.0",
   "description": "Holy Loader is a lightweight, customizable top-loading progress bar component for React applications.",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
@@ -27,7 +27,7 @@
     "single-page-application"
   ],
   "scripts": {
-    "build": "tsup && sed -i '' '1s/^/\"use client\";/' dist/index.js",
+    "build": "tsup",
     "lint:fix": "eslint --ignore-path .eslintignore --fix --ext .js,.ts . && npm run format:fix",
     "format:fix": "prettier --ignore-path .gitignore --write \"src/**/*.{ts,tsx}\"",
     "test": "vitest -c ./vitest.config.ts"

package.json

@@ -17,18 +17,6 @@ type HolyProgressProps = {
    */
   speed: number;
 
-  /**
-   * Specifies if the bar should increment automatically.
-   * Default: true
-   */
-  trickle: boolean;
-
-  /**
-   * Specifies the speed of the automatic incrementation.
-   * Default: 200
-   */
-  trickleSpeed: number;
-
   /**
    * Specifies the color of the progress bar.
    * Default: '#59a2ff'
@@ -77,8 +65,6 @@ export class HolyProgress {
       initialPosition: 0.08,
       easing: 'linear',
       speed: 200,
-      trickle: true,
-      trickleSpeed: 200,
       color: '#59a2ff',
       height: 4,
       zIndex: 2147483647,
@@ -192,27 +178,25 @@ export class HolyProgress {
       this.setTo(0);
     }
 
-    if (this.settings.trickle) {
-      this.startTrickle();
-    }
+    this.startTrickle();
 
     return this;
   };
 
   /**
    * Performs automatic incrementation of the progress bar.
-   * This function is recursive and continues to increment the progress at intervals defined by `trickleSpeed`.
+   * This function is recursive and continues to increment the progress at intervals defined by `sppeed`.
    * @private
    */
   private readonly startTrickle = (): void => {
     const run = (): void => {
       if (this.status === null) return;
 
       this.increment();
-      setTimeout(run, this.settings.trickleSpeed);
+      setTimeout(run, this.settings.speed);
     };
 
-    setTimeout(run, this.settings.trickleSpeed);
+    setTimeout(run, this.settings.speed);
   };
 
   /**

src/HolyProgress.ts

@@ -1,9 +1,7 @@
 export const DEFAULTS = {
   color: '#59a2ff',
   initialPosition: 0.08,
-  trickleSpeed: 200,
   height: 4,
-  trickle: true,
   easing: 'ease',
   speed: 200,
   zIndex: 2147483647,

src/constants.ts

@@ -1,3 +1,5 @@
+'use client';
+
 import * as React from 'react';
 import { HolyProgress } from './HolyProgress';
 import { DEFAULTS } from './constants';
@@ -15,24 +17,12 @@ export interface HolyLoaderProps {
    */
   initialPosition?: number;
 
-  /**
-   * Determines the delay speed for the incremental movement of the top-loading bar, in milliseconds.
-   * Default: 200 milliseconds
-   */
-  trickleSpeed?: number;
-
   /**
    * Specifies the height of the top-loading bar in either pixels (number) or css unit (string).
    * Default: 4 pixels
    */
   height?: number | string;
 
-  /**
-   * Enables or disables the automatic incremental movement of the top-loading bar.
-   * Default: true (enabled)
-   */
-  trickle?: boolean;
-
   /**
    * Specifies the easing function to use for the loading animation. Accepts any valid CSS easing string.
    * Default: "ease"
@@ -110,9 +100,7 @@ export const isSameHost = (currentUrl: string, newUrl: string): boolean => {
 const HolyLoader = ({
   color = DEFAULTS.color,
   initialPosition = DEFAULTS.initialPosition,
-  trickleSpeed = DEFAULTS.trickleSpeed,
   height = DEFAULTS.height,
-  trickle = DEFAULTS.trickle,
   easing = DEFAULTS.easing,
   speed = DEFAULTS.speed,
   zIndex = DEFAULTS.zIndex,
@@ -181,8 +169,6 @@ const HolyLoader = ({
       holyProgress = new HolyProgress({
         color,
         height,
-        trickleSpeed,
-        trickle,
         initialPosition,
         easing,
         speed,