@vctqs1/nav-progress-bar-react 0.0.2-4 → 0.1.0

package/README.md

@@ -4,6 +4,20 @@ React wrapper for [`@vctqs1/nav-progress-bar`](https://www.npmjs.com/package/@vc
 
 This package provides a thin React component that renders the `<vctqs1-nav-progress-bar>` custom element with proper TypeScript JSX types and SSR support via Declarative Shadow DOM.
 
+## Table of Contents
+
+- [Installation](#installation)
+- [Peer Dependencies](#peer-dependencies)
+- [Quick Start](#quick-start)
+  - [Next.js App Router](#nextjs-app-router-recommended-setup)
+  - [Custom color](#custom-color)
+  - [React SPA (Vite, CRA, etc.)](#react-spa-vite-cra-etc)
+- [Props](#props)
+- [How SSR Works](#how-ssr-works)
+- [Why a Separate Package?](#why-a-separate-package)
+- [Related](#related)
+- [License](#license)
+
 ## Installation
 
 ```bash
@@ -19,7 +33,7 @@ pnpm add @vctqs1/nav-progress-bar @vctqs1/nav-progress-bar-react
 | `react` | `>=18.0.0` |
 | `@vctqs1/nav-progress-bar` | `>=1.0.0` |
 
-## Usage
+## Quick Start
 
 ### Next.js App Router (recommended setup)
 
@@ -55,19 +69,11 @@ export function onRouterTransitionStart(
 }
 ```
 
-**3. Enable instrumentation** in `next.config.ts`:
-
-```ts
-const nextConfig = {
-  experimental: {
-    instrumentationHook: true,
-  },
-};
+That's it. The bar starts on every route departure and finishes automatically when the new page commits.
 
-export default nextConfig;
-```
+> 🎬 **Demo** — watch the bar in action with Next.js App Router:
 
-That's it. The bar starts on every route departure and finishes automatically when the new page commits.
+<video src="https://github.com/user-attachments/assets/4144ed95-8c25-4aa9-b804-905ac24805b4" controls width="100%"></video>
 
 ---
 

package/dist/index.cjs

@@ -0,0 +1 @@
+let e=require("react/jsx-runtime");function t({primary:t=`#006bde`}){return(0,e.jsx)(`vctqs1-nav-progress-bar`,{primary:t})}module.exports=t;var n=require("@vctqs1/nav-progress-bar");Object.keys(n).forEach(function(e){e!==`default`&&!Object.prototype.hasOwnProperty.call(exports,e)&&Object.defineProperty(exports,e,{enumerable:!0,get:function(){return n[e]}})});

package/dist/index.d.ts

@@ -1,3 +1,3 @@
-export * from './lib/nav-progress-bar-react';
+export { default } from './lib/nav-progress-bar-react';
 export * from '@vctqs1/nav-progress-bar';
 //# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,8BAA8B,CAAC;AAC7C,cAAc,0BAA0B,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,8BAA8B,CAAC;AACvD,cAAc,0BAA0B,CAAA"}

package/dist/index.js

@@ -1,112 +1,8 @@
-import "react/jsx-runtime";
-//#region ../nav-progress-bar/dist/index.js
-function e() {
-	let e = globalThis.navigation;
-	if (!(!e || typeof e != "object") && !(!("addEventListener" in e) || !("removeEventListener" in e))) return e;
-}
-var t = class extends HTMLElement {
-	_layoutSheet = void 0;
-	_sheet = void 0;
-	_progressSheet = void 0;
-	_autoTimer = void 0;
-	_startTime = void 0;
-	_options;
-	static get observedAttributes() {
-		return ["primary"];
-	}
-	constructor(e = {}) {
-		super(), this._options = e;
-	}
-	_onNavigateSuccess = () => this.finish();
-	_onNavigate = () => this.start();
-	connectedCallback() {
-		this._render();
-		let t = e();
-		t && (t.addEventListener("navigate", this._onNavigate), t.addEventListener("navigatesuccess", this._onNavigateSuccess));
-	}
-	disconnectedCallback() {
-		let t = e();
-		t && (t.removeEventListener("navigate", this._onNavigate), t.removeEventListener("navigatesuccess", this._onNavigateSuccess)), this._clearTimer();
-	}
-	attributeChangedCallback() {
-		this._sheet && this._applyColorSheet();
-	}
-	_resolveColor(e, t, n) {
-		let r = e ?? t;
-		return r ? r.startsWith("--") ? `var(${r}, ${n})` : r : n;
-	}
-	_buildColorSheet() {
-		let e = this._resolveColor(this.getAttribute("primary"), this._options.primary, "#006bde"), t = new CSSStyleSheet();
-		return t.insertRule(`
-      .bar {
-        height: 3px;
-        background: ${e};
-        opacity: 0;
-        transition: width 0.3s ease, opacity 0.4s ease;
-        box-shadow: 0 0 8px color-mix(in srgb, ${e} 53%, transparent);
-      }
-    `), t.insertRule(".bar.active { opacity: 1; }"), t.insertRule("\n      .bar.complete {\n        opacity: 0;\n        transition: width 0.2s ease, opacity 0.5s ease 0.2s;\n      }\n    "), t;
-	}
-	_applyColorSheet() {
-		!this.shadowRoot || !this._layoutSheet || !this._progressSheet || (this._sheet = this._buildColorSheet(), this.shadowRoot.adoptedStyleSheets = [
-			this._layoutSheet,
-			this._sheet,
-			this._progressSheet
-		]);
-	}
-	_render() {
-		let e = this.shadowRoot ?? this.attachShadow({ mode: "open" }), t = new CSSStyleSheet();
-		t.insertRule("\n      :host {\n        position: fixed;\n        top: 0;\n        left: 0;\n        width: 100%;\n        z-index: 9999;\n        pointer-events: none;\n      }\n    "), this._layoutSheet = t;
-		let n = new CSSStyleSheet();
-		if (n.insertRule(".bar { width: 0%; }"), this._progressSheet = n, this._sheet = this._buildColorSheet(), e.adoptedStyleSheets = [
-			this._layoutSheet,
-			this._sheet,
-			this._progressSheet
-		], !e.querySelector(".bar")) {
-			let t = document.createElement("div");
-			t.className = "bar", e.append(t);
-		}
-	}
-	_setWidth(e) {
-		this._progressSheet && this._progressSheet.replaceSync(`.bar { width: ${e}%; }`);
-	}
-	start() {
-		this._clearTimer(), this._setWidth(0), this._applyActive(!0);
-		let e = 0;
-		return this._autoTimer = setInterval(() => {
-			e += (85 - e) * .08, this._setWidth(Math.min(e, 85));
-		}, 200), this;
-	}
-	finish() {
-		this._clearTimer();
-		let e = this.shadowRoot?.querySelector(".bar");
-		return e ? (e.classList.remove("active"), e.classList.add("complete"), this._setWidth(100), setTimeout(() => {
-			e.classList.remove("complete"), this._setWidth(0), this._applyActive(!1);
-		}, 700), this) : this;
-	}
-	_applyActive(e) {
-		let t = this.shadowRoot?.querySelector(".bar");
-		if (t && (t.classList.toggle("active", e), e && this._startTime === void 0 && (this._startTime = performance.now()), !e && this._startTime !== void 0)) {
-			let e = performance.now() - this._startTime;
-			console.log(`[top-loading-bar] navigation took ${e.toFixed(0)}ms`), this._startTime = void 0;
-		}
-	}
-	_clearTimer() {
-		this._autoTimer !== void 0 && (clearInterval(this._autoTimer), this._autoTimer = void 0);
-	}
-}, n = "vctqs1-nav-progress-bar";
-function r(r) {
-	if (!(typeof customElements > "u") && e() && !customElements.get("vctqs1-nav-progress-bar")) {
-		class e extends t {
-			constructor() {
-				super(r);
-			}
-		}
-		customElements.define(n, e);
-	}
-}
-function i() {
-	return document.querySelector(n);
+import { jsx as e } from "react/jsx-runtime";
+export * from "@vctqs1/nav-progress-bar";
+//#region src/lib/nav-progress-bar-react.tsx
+function t({ primary: t = "#006bde" }) {
+	return /* @__PURE__ */ e("vctqs1-nav-progress-bar", { primary: t });
 }
 //#endregion
-export { t as NavProgressBar, n as TAG_NAME, i as getNavProgressBar, r as registerNavProgressBar };
+export { t as default };

package/package.json

@@ -1,6 +1,7 @@
 {
   "name": "@vctqs1/nav-progress-bar-react",
-  "version": "0.0.2-4",
+  "version": "0.1.0",
+  "repository": "https://github.com/vctqs1/nav-progress-bar",
   "type": "module",
   "main": "./dist/index.js",
   "module": "./dist/index.js",
@@ -20,6 +21,7 @@
   ],
   "license": "MIT",
   "keywords": [
+    "toploader",
     "progress-bar",
     "navigation",
     "react",
@@ -35,7 +37,7 @@
     "access": "public"
   },
   "dependencies": {
-    "@vctqs1/nav-progress-bar": "0.0.2-4"
+    "@vctqs1/nav-progress-bar": "0.1.0"
   },
   "nx": {
     "name": "@vctqs1/nav-progress-bar-react",