(
4 | prevProps: T,
5 | nextProps: T,
6 | ignoreKeys: string[] = [],
7 | ): boolean {
8 | const prevKeys = Object.keys(prevProps).filter(
9 | (key) => !ignoreKeys.includes(key),
10 | );
11 | const nextKeys = Object.keys(nextProps).filter(
12 | (key) => !ignoreKeys.includes(key),
13 | );
14 |
15 | if (prevKeys.length !== nextKeys.length) {
16 | return false;
17 | }
18 |
19 | for (const key of prevKeys) {
20 | if (prevProps[key as keyof T] !== nextProps[key as keyof T]) {
21 | return false;
22 | }
23 | }
24 | return true;
25 | }
26 |
27 | export function withMemo<
28 | P extends { memo?: boolean; shouldCompareComplexProps?: boolean },
29 | >(
30 | Component: React.ComponentType,
31 | ignoreKeys: string[] = ['memo', 'shouldCompareComplexProps'],
32 | ) {
33 | return memo(Component, (prevProps, nextProps) => {
34 | if (nextProps.memo === false) return false;
35 | if (!nextProps.shouldCompareComplexProps) return true;
36 | return shallowCompareProps(prevProps, nextProps, ignoreKeys);
37 | });
38 | }
39 |
--------------------------------------------------------------------------------
/packages/react/src/utils/with-suspense.tsx:
--------------------------------------------------------------------------------
1 | import React, { ComponentType, Suspense } from 'react';
2 |
3 | export function withSuspense
(Component: ComponentType
) {
4 | return function WithSuspenseComponent(props: P) {
5 | return (
6 |
7 |
8 |
9 | );
10 | };
11 | }
12 |
--------------------------------------------------------------------------------
/packages/react/tsconfig.json:
--------------------------------------------------------------------------------
1 | {
2 | "compilerOptions": {
3 | "outDir": "dist",
4 | "module": "esnext",
5 | "target": "es5",
6 | "lib": ["es6", "dom", "es2016", "es2017"],
7 | "sourceMap": true,
8 | "allowJs": false,
9 | "jsx": "react",
10 | "allowSyntheticDefaultImports": true,
11 | "declaration": true,
12 | "moduleResolution": "node",
13 | "forceConsistentCasingInFileNames": true,
14 | "noImplicitReturns": true,
15 | "noImplicitThis": true,
16 | "noImplicitAny": true,
17 | "strictNullChecks": true,
18 | "esModuleInterop": true,
19 | "noUnusedLocals": true,
20 | "noUnusedParameters": true,
21 | "types": ["jest", "@testing-library/jest-dom", "node"]
22 | },
23 | "include": ["src", "__tests__"],
24 | "exclude": ["node_modules", "dist", "example", "tsup.config.js"]
25 | }
--------------------------------------------------------------------------------
/packages/react/tsup.config.ts:
--------------------------------------------------------------------------------
1 | import { defineConfig } from "tsup";
2 |
3 | export default defineConfig({
4 | entry: ["src/index.tsx"],
5 | sourcemap: true,
6 | clean: true,
7 | dts: true,
8 | format: ["esm", "cjs"],
9 | external: ["react", "react-dom", "@bprogress/core"],
10 | });
11 |
--------------------------------------------------------------------------------
/packages/remix/.gitignore:
--------------------------------------------------------------------------------
1 | node_modules
2 | .npmrc
3 | .DS_Store
--------------------------------------------------------------------------------
/packages/remix/.npmignore:
--------------------------------------------------------------------------------
1 | *
2 | !dist/
3 | !README.md
4 | !LICENSE
5 | !package.json
--------------------------------------------------------------------------------
/packages/remix/CHANGELOG.md:
--------------------------------------------------------------------------------
1 | # @bprogress/remix
2 |
3 | ## 1.0.19
4 |
5 | ### Patch Changes
6 |
7 | - chore: change repo link
8 | - chore: upgrade to `@bprogress/core@1.3.4`
9 | - chore: upgrade to `@bprogress/react@1.2.7`
10 |
11 | ## 1.0.18
12 |
13 | ### Patch Changes
14 |
15 | - chore: upgrade to `@bprogress/react@1.2.6`
16 | - add `delay` and `stopDelay` options to router options
17 | - use `disableSameURL`, `startPosition`, `delay` and `stopDelay` from the Provider props by default
18 |
19 | ## 1.0.17
20 |
21 | ### Patch Changes
22 |
23 | - chore: upgrade to `@bprogress/react@1.2.5`
24 |
25 | ## 1.0.16
26 |
27 | ### Patch Changes
28 |
29 | - chore: add `.cjs` build
30 | - chore: upgrade to `@bprogress/core@1.3.3` and `@bprogress/react@1.2.4`
31 |
32 | ## 1.0.15
33 |
34 | ### Patch Changes
35 |
36 | - chore: upgrade to `@bprogress/core@1.3.2` and `@bprogress/react@1.2.3`
37 |
38 | ## 1.0.14
39 |
40 | ### Patch Changes
41 |
42 | - chore: upgrade to `@bprogress/react@1.2.2`
43 |
44 | ## 1.0.13
45 |
46 | ### Patch Changes
47 |
48 | - chore: upgrade to `@bprogress/core@1.3.1` and `@bprogress/react@1.2.1`
49 |
50 | ## 1.0.12
51 |
52 | ### Patch Changes
53 |
54 | - chore: upgrade to `@bprogress/core@1.3.0` and `@bprogress/react@1.2.0`
55 |
56 | ## 1.0.10
57 |
58 | ### Patch Changes
59 |
60 | - chore: improve `package.json` description
61 |
62 | ## 1.0.9
63 |
64 | ### Patch Changes
65 |
66 | - chore: upgrade to `@bprogress/core@1.2.3` and `@bprogress/react@1.1.7`
67 |
68 | ## 1.0.8
69 |
70 | ### Patch Changes
71 |
72 | - chore: upgrade to `@bprogress/core@1.2.1` and `@bprogress/react@1.1.6`
73 |
74 | ## 1.0.7
75 |
76 | ### Patch Changes
77 |
78 | - chore: upgrade to `@bprogress/core@1.2.0` and `@bprogress/react@1.1.5`
79 |
--------------------------------------------------------------------------------
/packages/remix/LICENSE:
--------------------------------------------------------------------------------
1 | MIT License
2 |
3 | Copyright (c) 2025 Elliot Sutton
4 |
5 | Permission is hereby granted, free of charge, to any person obtaining a copy
6 | of this software and associated documentation files (the "Software"), to deal
7 | in the Software without restriction, including without limitation the rights
8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 |
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 |
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21 | SOFTWARE.
22 |
--------------------------------------------------------------------------------
/packages/remix/eslint.config.js:
--------------------------------------------------------------------------------
1 | import { config } from "@workspace/eslint-config/react-internal"
2 |
3 | /** @type {import("eslint").Linter.Config} */
4 | export default config
5 |
--------------------------------------------------------------------------------
/packages/remix/src/components/remix-progress.tsx:
--------------------------------------------------------------------------------
1 | import { useLocation } from '@remix-run/react';
2 | import { useAnchorProgress, withMemo } from '@bprogress/react';
3 | import type { RemixProgressProps } from '../types';
4 |
5 | const RemixProgressComponent = (props: RemixProgressProps) => {
6 | const routerLocation = useLocation();
7 |
8 | useAnchorProgress(
9 | {
10 | ...props,
11 | forcedStopDelay: 500,
12 | },
13 | [routerLocation],
14 | );
15 |
16 | return null;
17 | };
18 |
19 | export const RemixProgress = withMemo(RemixProgressComponent);
20 |
21 | RemixProgress.displayName = 'RemixProgress';
22 |
--------------------------------------------------------------------------------
/packages/remix/src/index.tsx:
--------------------------------------------------------------------------------
1 | export { RemixProgressProvider as ProgressProvider } from './providers/remix-progress-provider';
2 | export {
3 | useProgress,
4 | Progress,
5 | Bar,
6 | Peg,
7 | Spinner,
8 | SpinnerIcon,
9 | Indeterminate,
10 | } from '@bprogress/react';
11 | export * from './hooks/use-navigate';
12 | export type {
13 | SpinnerPosition,
14 | ProgressContextValue,
15 | ProgressComponentProps,
16 | ProgressProps,
17 | BarProps,
18 | PegProps,
19 | SpinnerProps,
20 | SpinnerIconProps,
21 | IndeterminateProps,
22 | } from '@bprogress/react';
23 | export type * from './types';
24 | export type { BProgressOptions } from '@bprogress/core';
25 |
--------------------------------------------------------------------------------
/packages/remix/src/providers/remix-progress-provider.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import { ProgressProvider } from '@bprogress/react';
3 | import { RemixProgress } from '../components/remix-progress';
4 | import type { RemixProgressProviderProps } from '../types';
5 |
6 | export const RemixProgressProvider = ({
7 | children,
8 | color,
9 | height,
10 | options,
11 | spinnerPosition,
12 | style,
13 | disableStyle,
14 | nonce,
15 | ...props
16 | }: RemixProgressProviderProps) => {
17 | return (
18 |
27 |
28 | {children}
29 |
30 | );
31 | };
32 |
--------------------------------------------------------------------------------
/packages/remix/src/types.ts:
--------------------------------------------------------------------------------
1 | import type {
2 | AnchorProgressProps,
3 | AnchorProgressProviderProps,
4 | } from '@bprogress/react';
5 | import type { NavigateFunction, Path } from '@remix-run/react';
6 |
7 | export interface RemixProgressProps extends AnchorProgressProps {}
8 | export interface RemixProgressProviderProps
9 | extends AnchorProgressProviderProps {}
10 |
11 | /**
12 | * @param showProgress Show the progress bar. @default true
13 | * @param startPosition The position of the progress bar at the start of the page load - @default 0
14 | * @param disableSameURL Disable triggering progress bar on the same URL - @default true
15 | */
16 | export interface NavigateActionsProgressOptions {
17 | showProgress?: boolean;
18 | startPosition?: number;
19 | disableSameURL?: boolean;
20 | delay?: number;
21 | stopDelay?: number;
22 | }
23 |
24 | /**
25 | * @param customNavigate Custom navigate - @default undefined
26 | */
27 | export interface NavigateProgressOptions
28 | extends NavigateActionsProgressOptions {
29 | customNavigate?: () => NavigateFunction;
30 | }
31 |
32 | // We need to copy the NavigateOptions type from Remix's source code
33 | // because it's not exported in the package's public API.
34 | type NavigateOptions = {
35 | replace?: boolean;
36 | // eslint-disable-next-line @typescript-eslint/no-explicit-any
37 | state?: any;
38 | preventScrollReset?: boolean;
39 | relative?: 'route' | 'path';
40 | flushSync?: boolean;
41 | viewTransition?: boolean;
42 | };
43 |
44 | type To = string | Partial;
45 |
46 | // Enhanced NavigateFunction that supports progress options.
47 | export interface ProgressNavigateFunction {
48 | (
49 | to: To,
50 | options?: NavigateOptions,
51 | progressOptions?: NavigateActionsProgressOptions,
52 | ): void;
53 | (delta: number, progressOptions?: NavigateActionsProgressOptions): void;
54 | }
55 |
--------------------------------------------------------------------------------
/packages/remix/tsconfig.json:
--------------------------------------------------------------------------------
1 | {
2 | "compilerOptions": {
3 | "outDir": "dist",
4 | "module": "esnext",
5 | "target": "es5",
6 | "lib": ["es6", "dom", "es2016", "es2017"],
7 | "sourceMap": true,
8 | "allowJs": false,
9 | "jsx": "react",
10 | "allowSyntheticDefaultImports": true,
11 | "declaration": true,
12 | "moduleResolution": "node",
13 | "forceConsistentCasingInFileNames": true,
14 | "noImplicitReturns": true,
15 | "noImplicitThis": true,
16 | "noImplicitAny": true,
17 | "strictNullChecks": true,
18 | "noUnusedLocals": true,
19 | "noUnusedParameters": true
20 | },
21 | "include": ["src"],
22 | "exclude": ["node_modules", "dist", "example", "tsup.config.js"]
23 | }
--------------------------------------------------------------------------------
/packages/remix/tsup.config.ts:
--------------------------------------------------------------------------------
1 | import { defineConfig } from "tsup";
2 |
3 | export default defineConfig({
4 | entry: ["src/index.tsx"],
5 | sourcemap: true,
6 | clean: true,
7 | dts: true,
8 | format: ["esm", "cjs"],
9 | external: [
10 | "react",
11 | "react-dom",
12 | "@remix-run/react",
13 | "@bprogress/core",
14 | "@bprogress/react",
15 | ],
16 | });
17 |
--------------------------------------------------------------------------------
/packages/typescript-config/README.md:
--------------------------------------------------------------------------------
1 | # `@workspace/typescript-config`
2 |
3 | Shared typescript configuration for the workspace.
4 |
--------------------------------------------------------------------------------
/packages/typescript-config/base.json:
--------------------------------------------------------------------------------
1 | {
2 | "$schema": "https://json.schemastore.org/tsconfig",
3 | "display": "Default",
4 | "compilerOptions": {
5 | "declaration": true,
6 | "declarationMap": true,
7 | "esModuleInterop": true,
8 | "incremental": false,
9 | "isolatedModules": true,
10 | "lib": ["es2022", "DOM", "DOM.Iterable"],
11 | "module": "NodeNext",
12 | "moduleDetection": "force",
13 | "moduleResolution": "NodeNext",
14 | "noUncheckedIndexedAccess": true,
15 | "resolveJsonModule": true,
16 | "skipLibCheck": true,
17 | "strict": true,
18 | "target": "ES2022"
19 | }
20 | }
21 |
--------------------------------------------------------------------------------
/packages/typescript-config/nextjs.json:
--------------------------------------------------------------------------------
1 | {
2 | "$schema": "https://json.schemastore.org/tsconfig",
3 | "display": "Next.js",
4 | "extends": "./base.json",
5 | "compilerOptions": {
6 | "plugins": [{ "name": "next" }],
7 | "module": "ESNext",
8 | "moduleResolution": "Bundler",
9 | "allowJs": true,
10 | "jsx": "preserve",
11 | "noEmit": true
12 | }
13 | }
14 |
--------------------------------------------------------------------------------
/packages/typescript-config/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "@workspace/typescript-config",
3 | "version": "0.0.0",
4 | "private": true,
5 | "license": "PROPRIETARY",
6 | "publishConfig": {
7 | "access": "public"
8 | }
9 | }
10 |
--------------------------------------------------------------------------------
/packages/typescript-config/react-library.json:
--------------------------------------------------------------------------------
1 | {
2 | "$schema": "https://json.schemastore.org/tsconfig",
3 | "display": "React Library",
4 | "extends": "./base.json",
5 | "compilerOptions": {
6 | "jsx": "react-jsx",
7 | }
8 | }
9 |
--------------------------------------------------------------------------------
/packages/ui/components.json:
--------------------------------------------------------------------------------
1 | {
2 | "$schema": "https://ui.shadcn.com/schema.json",
3 | "style": "default",
4 | "rsc": true,
5 | "tsx": true,
6 | "tailwind": {
7 | "config": "tailwind.config.ts",
8 | "css": "src/styles/globals.css",
9 | "baseColor": "neutral",
10 | "cssVariables": true
11 | },
12 | "iconLibrary": "lucide",
13 | "aliases": {
14 | "components": "@workspace/ui/components",
15 | "utils": "@workspace/ui/lib/utils",
16 | "hooks": "@workspace/ui/hooks",
17 | "lib": "@workspace/ui/lib",
18 | "ui": "@workspace/ui/components"
19 | }
20 | }
21 |
--------------------------------------------------------------------------------
/packages/ui/eslint.config.js:
--------------------------------------------------------------------------------
1 | import { config } from "@workspace/eslint-config/react-internal"
2 |
3 | /** @type {import("eslint").Linter.Config} */
4 | export default config
5 |
--------------------------------------------------------------------------------
/packages/ui/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "@workspace/ui",
3 | "version": "0.0.0",
4 | "type": "module",
5 | "private": true,
6 | "scripts": {
7 | "lint": "eslint . --max-warnings 0"
8 | },
9 | "dependencies": {
10 | "@radix-ui/react-slot": "^1.1.2",
11 | "@radix-ui/react-switch": "^1.1.3",
12 | "class-variance-authority": "^0.7.0",
13 | "clsx": "^2.1.1",
14 | "framer-motion": "^12.4.3",
15 | "fumadocs-ui": "14.6.0",
16 | "lucide-react": "0.456.0",
17 | "mini-svg-data-uri": "^1.4.4",
18 | "next-themes": "^0.4.3",
19 | "react": "^19.0.0",
20 | "react-dom": "^19.0.0",
21 | "tailwind-merge": "^2.5.4",
22 | "tailwindcss-animate": "^1.0.7",
23 | "zod": "^3.23.8"
24 | },
25 | "devDependencies": {
26 | "@turbo/gen": "^2.2.3",
27 | "@types/node": "^22.9.0",
28 | "@types/react": "^19.0.1",
29 | "@types/react-dom": "^19.0.2",
30 | "@workspace/eslint-config": "workspace:*",
31 | "@workspace/typescript-config": "workspace:*",
32 | "autoprefixer": "^10.4.20",
33 | "postcss": "^8.4.47",
34 | "tailwindcss": "^3.4.14",
35 | "typescript": "^5.6.3",
36 | "eslint": "^9.19.0"
37 | },
38 | "exports": {
39 | "./globals.css": "./src/styles/globals.css",
40 | "./postcss.config": "./postcss.config.mjs",
41 | "./tailwind.config": "./tailwind.config.ts",
42 | "./lib/*": "./src/lib/*.ts",
43 | "./components/*": "./src/components/*.tsx",
44 | "./hooks/*": "./src/hooks/*.ts"
45 | }
46 | }
47 |
--------------------------------------------------------------------------------
/packages/ui/postcss.config.mjs:
--------------------------------------------------------------------------------
1 | /** @type {import('postcss-load-config').Config} */
2 | const config = {
3 | plugins: {
4 | tailwindcss: {},
5 | autoprefixer: {},
6 | },
7 | };
8 |
9 | export default config;
10 |
--------------------------------------------------------------------------------
/packages/ui/src/lib/utils.ts:
--------------------------------------------------------------------------------
1 | import { clsx, type ClassValue } from "clsx"
2 | import { twMerge } from "tailwind-merge"
3 |
4 | export function cn(...inputs: ClassValue[]) {
5 | return twMerge(clsx(inputs))
6 | }
7 |
--------------------------------------------------------------------------------
/packages/ui/tsconfig.json:
--------------------------------------------------------------------------------
1 | {
2 | "extends": "@workspace/typescript-config/react-library.json",
3 | "compilerOptions": {
4 | //"outDir": "dist"
5 | "baseUrl": ".",
6 | "paths": {
7 | "@workspace/ui/*": ["./src/*"]
8 | }
9 | },
10 | "include": ["."],
11 | "exclude": ["node_modules", "dist"]
12 | }
13 |
--------------------------------------------------------------------------------
/packages/ui/tsconfig.lint.json:
--------------------------------------------------------------------------------
1 | {
2 | "extends": "@workspace/typescript-config/react-library.json",
3 | "compilerOptions": {
4 | "outDir": "dist"
5 | },
6 | "include": ["src", "turbo"],
7 | "exclude": ["node_modules", "dist"]
8 | }
9 |
--------------------------------------------------------------------------------
/packages/vue/CHANGELOG.md:
--------------------------------------------------------------------------------
1 | # @bprogress/vue
2 |
3 | ## 1.1.5
4 |
5 | ### Patch Changes
6 |
7 | - chore: change repo link
8 | - chore: upgrade to `@bprogress/core@1.3.4`
9 |
10 | ## 1.1.4
11 |
12 | ### Patch Changes
13 |
14 | - feat: add auto stop control
15 | - chore: upgrade to `@bprogress/core@1.3.3`
16 |
17 | ## 1.1.3
18 |
19 | ### Patch Changes
20 |
21 | - chore: upgrade to `@bprogress/core@1.3.2`
22 |
23 | ## 1.1.2
24 |
25 | ### Patch Changes
26 |
27 | - fix: prevent progress when the link has a `download` attribute
28 |
29 | ## 1.1.1
30 |
31 | ### Patch Changes
32 |
33 | - chore: upgrade to `@bprogress/core@1.3.1`
34 |
35 | ## 1.1.0
36 |
37 | ### Minor Changes
38 |
39 | - feat: add `dec` method to `ProgressProvider`
40 | - feat: add `Indeterminate` component
41 | - chore: upgrade to `@bprogress/core@1.3.0`
42 |
43 | ## 1.0.1
44 |
45 | ### Patch Changes
46 |
47 | - chore: improve `package.json` description
48 |
49 | ## 1.0.0
50 |
51 | ### Major Changes
52 |
53 | - feat: create `@bprogress/vue` package
54 |
--------------------------------------------------------------------------------
/packages/vue/LICENSE:
--------------------------------------------------------------------------------
1 | MIT License
2 |
3 | Copyright (c) 2025 Elliot Sutton
4 |
5 | Permission is hereby granted, free of charge, to any person obtaining a copy
6 | of this software and associated documentation files (the "Software"), to deal
7 | in the Software without restriction, including without limitation the rights
8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 |
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 |
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21 | SOFTWARE.
22 |
--------------------------------------------------------------------------------
/packages/vue/README.md:
--------------------------------------------------------------------------------
1 | # BProgress for Vue
2 |
3 | Create your own **progress bar** with **Vue**
4 |
5 | ## Import
6 |
7 | ```tsx
8 | import { ProgressProvider } from '@bprogress/vue';
9 | ```
10 |
11 | The `@bprogress/vue` package is a **utility** that lets you easily manage a progress bar, while remaining flexible with regard to the router you're using. **It doesn't automatically start the progress bar when browsing**, so you'll have to manage this logic yourself, unless you're using one of the integrations below.
12 |
13 | ### Vue Frameworks Integrations
14 |
15 | - Soon...
16 |
17 | ## Usage
18 |
19 | ```vue
20 | ...
21 | ```
22 |
23 | ## Example
24 |
25 | ```vue title="src/Root.vue"
26 |
30 |
31 |
32 |
33 |
34 |
35 |
36 | ```
37 |
38 | ```ts title="src/main.ts"
39 | import { createApp } from 'vue';
40 | import Root from './Root.vue';
41 |
42 | createApp(Root).mount('#app');
43 | ```
44 |
45 | ```vue title="src/App.vue"
46 |
51 |
52 |
53 |
54 |
55 |
56 |
57 |
58 | ```
59 |
60 | ## More information on documentation
61 |
62 | Go to the [documentation](https://bprogress.vercel.app/docs/vue/installation) to learn more about BProgress.
63 |
64 | ## Issues
65 |
66 | If you encounter any problems, do not hesitate to [open an issue](https://github.com/imskyleen/bprogress/issues) or make a PR [here](https://github.com/imskyleen/bprogress).
67 |
68 | ## LICENSE
69 |
70 | MIT
71 |
--------------------------------------------------------------------------------
/packages/vue/__tests__/utils/classnames.test.ts:
--------------------------------------------------------------------------------
1 | import { classNames } from '../../src/utils/classnames';
2 |
3 | describe('classNames', () => {
4 | it("renvoie une chaîne vide lorsqu'aucun argument n'est fourni", () => {
5 | expect(classNames()).toBe('');
6 | });
7 |
8 | it("renvoie le nom de classe unique lorsqu'un seul argument est fourni", () => {
9 | expect(classNames('foo')).toBe('foo');
10 | });
11 |
12 | it('concatène plusieurs noms de classe avec un espace', () => {
13 | expect(classNames('foo', 'bar', 'baz')).toBe('foo bar baz');
14 | });
15 |
16 | it('ignore les valeurs falsy (undefined, null, false)', () => {
17 | expect(classNames('foo', undefined, null, false, 'bar')).toBe('foo bar');
18 | });
19 |
20 | it('ignore les chaînes vides et concatène le reste avec des espaces', () => {
21 | expect(classNames('foo', '', 'bar')).toBe('foo bar');
22 | });
23 |
24 | it('fonctionne avec une combinaison de valeurs valides et invalides', () => {
25 | expect(classNames('', 'foo', null, 'bar', undefined, false, 'baz')).toBe(
26 | 'foo bar baz',
27 | );
28 | });
29 |
30 | it('gère les tableaux de noms de classe', () => {
31 | expect(classNames(['foo', 'bar'])).toBe('foo bar');
32 | expect(classNames('foo', ['bar', 'baz'])).toBe('foo bar baz');
33 | });
34 |
35 | it('gère les objets avec des valeurs booléennes', () => {
36 | expect(classNames({ foo: true, bar: false, baz: true })).toBe('foo baz');
37 | });
38 |
39 | it('gère une combinaison de chaînes, tableaux et objets', () => {
40 | expect(
41 | classNames('foo', ['bar', 'baz'], { qux: true, quux: false }, undefined, [
42 | 'corge',
43 | { grault: true, garply: false },
44 | ]),
45 | ).toBe('foo bar baz qux corge grault');
46 | });
47 | });
48 |
--------------------------------------------------------------------------------
/packages/vue/eslint.config.js:
--------------------------------------------------------------------------------
1 | import { config } from '@workspace/eslint-config/vue';
2 |
3 | /** @type {import("eslint").Linter.Config} */
4 | export default [
5 | ...config,
6 | {
7 | files: ['**/__tests__/**/*.{ts,js,vue}'],
8 | rules: {
9 | '@typescript-eslint/no-explicit-any': 'off',
10 | 'vue/one-component-per-file': 'off',
11 | 'vue/order-in-components': 'off',
12 | },
13 | },
14 | ];
15 |
--------------------------------------------------------------------------------
/packages/vue/jest.config.ts:
--------------------------------------------------------------------------------
1 | import type { JestConfigWithTsJest } from 'ts-jest';
2 |
3 | const config: JestConfigWithTsJest = {
4 | preset: 'ts-jest',
5 | testEnvironment: 'jsdom',
6 | transform: {
7 | '^.+\\.(ts)$': 'ts-jest',
8 | '.*\\.(vue)$': './vue3JestHack.js',
9 | },
10 | moduleFileExtensions: ['vue', 'ts', 'js', 'json'],
11 | moduleNameMapper: {
12 | '^@/(.*)$': '/src/$1',
13 | '\\.(css)$': '/test/mocks/emptyMock.js',
14 | '^@vue/test-utils':
15 | '/node_modules/@vue/test-utils/dist/vue-test-utils.cjs.js',
16 | },
17 | modulePathIgnorePatterns: ['node_modules'],
18 | testEnvironmentOptions: {
19 | customExportConditions: ['node', 'node-addons'],
20 | },
21 | setupFilesAfterEnv: ['/jest.setup.ts'],
22 | silent: true,
23 | };
24 |
25 | export default config;
26 |
--------------------------------------------------------------------------------
/packages/vue/jest.setup.ts:
--------------------------------------------------------------------------------
1 | import '@testing-library/jest-dom';
2 |
--------------------------------------------------------------------------------
/packages/vue/shims-vue.d.ts:
--------------------------------------------------------------------------------
1 | declare module '*.vue' {
2 | import Vue from 'vue';
3 | export default Vue;
4 | }
5 |
--------------------------------------------------------------------------------
/packages/vue/src/components/bar.vue:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
19 |
--------------------------------------------------------------------------------
/packages/vue/src/components/indeterminate.vue:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
8 |
20 |
--------------------------------------------------------------------------------
/packages/vue/src/components/index.ts:
--------------------------------------------------------------------------------
1 | export { default as Progress } from './progress.vue';
2 | export { default as Bar } from './bar.vue';
3 | export { default as Peg } from './peg.vue';
4 | export { default as Spinner } from './spinner.vue';
5 | export { default as SpinnerIcon } from './spinner-icon.vue';
6 | export { default as Indeterminate } from './indeterminate.vue';
7 |
--------------------------------------------------------------------------------
/packages/vue/src/components/peg.vue:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
19 |
--------------------------------------------------------------------------------
/packages/vue/src/components/progress.vue:
--------------------------------------------------------------------------------
1 |
2 |
8 |
9 |
10 |
11 |
12 |
13 |
14 |
15 |
16 |
17 |
18 |
19 |
46 |
--------------------------------------------------------------------------------
/packages/vue/src/components/spinner-icon.vue:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
19 |
--------------------------------------------------------------------------------
/packages/vue/src/components/spinner.vue:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
19 |
--------------------------------------------------------------------------------
/packages/vue/src/composables/index.ts:
--------------------------------------------------------------------------------
1 | export * from './use-progress';
2 | export * from './use-anchor-progress';
3 |
--------------------------------------------------------------------------------
/packages/vue/src/composables/use-progress.ts:
--------------------------------------------------------------------------------
1 | import { inject } from 'vue';
2 | import type { ProgressContextValue } from '../types';
3 |
4 | const progressSymbol = Symbol('ProgressContext');
5 |
6 | export function useProgress(): ProgressContextValue {
7 | const context = inject(progressSymbol);
8 | if (!context) {
9 | throw new Error('useProgress must be used within a ProgressProvider');
10 | }
11 | return context;
12 | }
13 |
14 | export { progressSymbol };
15 |
--------------------------------------------------------------------------------
/packages/vue/src/index.ts:
--------------------------------------------------------------------------------
1 | export { default as ProgressProvider } from './providers/progress-provider.vue';
2 | export * from './composables';
3 | export * from './components';
4 | export type * from './types';
5 |
--------------------------------------------------------------------------------
/packages/vue/src/utils/classnames.ts:
--------------------------------------------------------------------------------
1 | import { ClassValue } from '../types';
2 |
3 | export function classNames(
4 | ...classes: (ClassValue | undefined | null | false)[]
5 | ): string {
6 | const result: string[] = [];
7 |
8 | const process = (input: ClassValue | undefined | null | false): void => {
9 | if (!input) return;
10 | if (typeof input === 'string') {
11 | if (input.trim()) result.push(input);
12 | } else if (Array.isArray(input)) {
13 | input.forEach((item) => process(item));
14 | } else if (typeof input === 'object') {
15 | for (const key in input) {
16 | if (Object.prototype.hasOwnProperty.call(input, key) && input[key]) {
17 | result.push(key);
18 | }
19 | }
20 | }
21 | };
22 |
23 | classes.forEach((item) => process(item));
24 | return result.join(' ');
25 | }
26 |
--------------------------------------------------------------------------------
/packages/vue/tsconfig.json:
--------------------------------------------------------------------------------
1 | {
2 | "compilerOptions": {
3 | "types": ["node", "jest", "@testing-library/jest-dom"],
4 | "target": "ESNext",
5 | "module": "ESNext",
6 | "moduleResolution": "node",
7 | "strict": true,
8 | "jsx": "preserve",
9 | "importHelpers": true,
10 | "esModuleInterop": true,
11 | "allowSyntheticDefaultImports": true,
12 | "skipLibCheck": true,
13 | "forceConsistentCasingInFileNames": true,
14 | "declaration": true,
15 | "declarationDir": "dist/types",
16 | "sourceMap": true,
17 | "baseUrl": ".",
18 | "paths": {
19 | "@/*": ["src/*"]
20 | },
21 | },
22 | "include": ["src/**/*.ts", "src/**/*.d.ts", "src/**/*.tsx", "src/**/*.vue", "__tests__", "shims-vue.d.ts"],
23 | "exclude": ["node_modules", "dist"]
24 | }
25 |
--------------------------------------------------------------------------------
/packages/vue/vite.config.ts:
--------------------------------------------------------------------------------
1 | import { defineConfig } from 'vite';
2 | import vue from '@vitejs/plugin-vue';
3 | import dts from 'vite-plugin-dts';
4 | import path from 'path';
5 |
6 | export default defineConfig({
7 | plugins: [
8 | vue(),
9 | dts({
10 | insertTypesEntry: true,
11 | exclude: ['**/__tests__/**/*', '**/*.test.*'],
12 | }),
13 | ],
14 | build: {
15 | lib: {
16 | entry: path.resolve(__dirname, 'src/index.ts'),
17 | name: 'BProgressVue',
18 | fileName: (format) => `index.${format}.js`,
19 | },
20 | rollupOptions: {
21 | external: ['vue', '@bprogress/core'],
22 | output: {
23 | globals: {
24 | vue: 'Vue',
25 | '@bprogress/core': 'BProgressCore',
26 | },
27 | },
28 | },
29 | },
30 | });
31 |
--------------------------------------------------------------------------------
/packages/vue/vue3JestHack.js:
--------------------------------------------------------------------------------
1 | import { registerTS } from '@vue/compiler-sfc';
2 | import * as ts from 'typescript';
3 |
4 | registerTS(() => ts);
5 |
6 | import vueJest from '@vue/vue3-jest';
7 | export default vueJest;
8 |
--------------------------------------------------------------------------------
/pnpm-workspace.yaml:
--------------------------------------------------------------------------------
1 | packages:
2 | - "apps/*"
3 | - "packages/*"
4 |
--------------------------------------------------------------------------------
/tsconfig.json:
--------------------------------------------------------------------------------
1 | {
2 | "extends": "@workspace/typescript-config/base.json"
3 | }
4 |
5 |
--------------------------------------------------------------------------------
/turbo.json:
--------------------------------------------------------------------------------
1 | {
2 | "$schema": "https://turbo.build/schema.json",
3 | "ui": "tui",
4 | "tasks": {
5 | "build": {
6 | "dependsOn": ["^build"],
7 | "inputs": ["$TURBO_DEFAULT$", ".env*"],
8 | "outputs": [".next/**", "dist/**", "!.next/cache/**"]
9 | },
10 | "lint": {
11 | "dependsOn": ["^lint"]
12 | },
13 | "test": {
14 | "dependsOn": ["^test"]
15 | },
16 | "check-types": {
17 | "dependsOn": ["^check-types"]
18 | },
19 | "dev": {
20 | "cache": false,
21 | "persistent": true
22 | }
23 | }
24 | }
25 |
--------------------------------------------------------------------------------