@vuepress/plugin-nprogress - npm Package Compare versions

Comparing version 2.0.0-rc.41 to 2.0.0-rc.42

lib/client/nprogress.d.ts

@@ -5,16 +5,4 @@ /**
  */
-interface NProgressOptions {
-    minimum: number;
-    template: string;
-    easing: string;
-    speed: number;
-    trickle: boolean;
-    trickleRate: number;
-    trickleSpeed: number;
-    parent: string;
-    barSelector: string;
-}
 interface NProgress {
-    settings: NProgressOptions;
-    status: number | null;
+    percent: number | null;
     set(number: number): NProgress;
@@ -24,3 +12,3 @@ isStarted(): boolean;
     done(force?: boolean): NProgress;
-    inc(amount?: number): NProgress;
+    increase(amount?: number): NProgress;
     trickle(): NProgress;
@@ -27,0 +15,0 @@ render(fromStart?: boolean): HTMLDivElement;

lib/client/nprogress.js

@@ -5,34 +5,102 @@ /**
  */
+import { isDef } from '@vuepress/helper/client';
+// Forked and modified from nprogress v0.2.0
+const addClass = (element, name) => {
+    element.classList.add(name);
+};
+const removeClass = (element, name) => {
+    element.classList.remove(name);
+};
+const removeElement = (element) => {
+    element?.parentNode?.removeChild(element);
+};
+const clamp = (n, min, max) => {
+    if (n < min)
+        return min;
+    if (n > max)
+        return max;
+    return n;
+};
+const toBarPercent = (n) => (-1 + n) * 100;
+const queue = (() => {
+    const pending = [];
+    const nextStep = () => {
+        const fn = pending.shift();
+        if (fn) {
+            fn(nextStep);
+        }
+    };
+    return (fn) => {
+        pending.push(fn);
+        if (pending.length === 1)
+            nextStep();
+    };
+})();
+const camelCase = (content) => content
+    .replace(/^-ms-/, 'ms-')
+    .replace(/-([\da-z])/gi, (_, letter) => letter.toUpperCase());
+const addStyle = (() => {
+    const cssPrefixes = ['Webkit', 'O', 'Moz', 'ms'];
+    const cssProps = {};
+    const getVendorProp = (name) => {
+        const { style } = document.body;
+        if (name in style)
+            return name;
+        const capName = name.charAt(0).toUpperCase() + name.slice(1);
+        let index = cssPrefixes.length;
+        while (index--) {
+            const vendorName = `${cssPrefixes[index]}${capName}`;
+            if (vendorName in style)
+                return vendorName;
+        }
+        return name;
+    };
+    const getStyleProp = (name) => {
+        const finalizedName = camelCase(name);
+        // eslint-disable-next-line no-return-assign
+        return (cssProps[finalizedName] ??= getVendorProp(finalizedName));
+    };
+    const applyCss = (element, prop, value) => {
+        element.style[getStyleProp(prop)] = value;
+    };
+    return (element, properties) => {
+        for (const prop in properties) {
+            const value = properties[prop];
+            if (Object.hasOwn(properties, prop) && isDef(value))
+                applyCss(element, prop, value);
+        }
+    };
+})();
+const SETTINGS = {
+    minimum: 0.08,
+    easing: 'ease',
+    speed: 200,
+    trickle: true,
+    trickleRate: 0.02,
+    trickleSpeed: 800,
+    barSelector: '[role="bar"]',
+    parent: 'body',
+    template: '<div class="bar" role="bar"></div>',
+};
 export const nprogress = {
-    settings: {
-        minimum: 0.08,
-        easing: 'ease',
-        speed: 200,
-        trickle: true,
-        trickleRate: 0.02,
-        trickleSpeed: 800,
-        barSelector: '[role="bar"]',
-        parent: 'body',
-        template: '<div class="bar" role="bar"></div>',
-    },
-    status: null,
-    set: (n) => {
-        const started = nprogress.isStarted();
-        n = clamp(n, nprogress.settings.minimum, 1);
-        nprogress.status = n === 1 ? null : n;
-        const progress = nprogress.render(!started);
-        const bar = progress.querySelector(nprogress.settings.barSelector);
-        const speed = nprogress.settings.speed;
-        const ease = nprogress.settings.easing;
+    percent: null,
+    isRendered: () => Boolean(document.getElementById('nprogress')),
+    set: (progress) => {
+        const { speed, easing } = SETTINGS;
+        const inProgress = nprogress.isStarted();
+        const newPercent = clamp(progress, SETTINGS.minimum, 1);
+        nprogress.percent = newPercent === 1 ? null : newPercent;
+        const nprogressElement = nprogress.render(!inProgress);
+        const barElement = nprogressElement.querySelector(SETTINGS.barSelector);
         // eslint-disable-next-line @typescript-eslint/no-unused-expressions
-        progress.offsetWidth; /* Repaint */
+        nprogressElement.offsetWidth; /* Repaint */
         queue((next) => {
             // Add transition
-            css(bar, {
-                transform: 'translate3d(' + toBarPerc(n) + '%,0,0)',
-                transition: 'all ' + speed + 'ms ' + ease,
+            addStyle(barElement, {
+                transform: `translate3d(${toBarPercent(newPercent)}%,0,0)`,
+                transition: `all ${speed}ms ${easing}`,
             });
-            if (n === 1) {
+            if (newPercent === 1) {
                 // Fade out
-                css(progress, {
+                addStyle(nprogressElement, {
                     transition: 'none',
@@ -42,6 +110,6 @@ opacity: '1',
                 // eslint-disable-next-line @typescript-eslint/no-unused-expressions
-                progress.offsetWidth; /* Repaint */
+                nprogressElement.offsetWidth; /* Repaint */
                 setTimeout(() => {
-                    css(progress, {
-                        transition: 'all ' + speed + 'ms linear',
+                    addStyle(nprogressElement, {
+                        transition: `all ${speed}ms linear`,
                         opacity: '0',
@@ -56,3 +124,5 @@ });
             else {
-                setTimeout(() => next(), speed);
+                setTimeout(() => {
+                    next();
+                }, speed);
             }
@@ -62,15 +132,15 @@ });
     },
-    isStarted: () => typeof nprogress.status === 'number',
+    isStarted: () => typeof nprogress.percent === 'number',
     start: () => {
-        if (!nprogress.status)
+        if (!nprogress.percent)
             nprogress.set(0);
         const work = () => {
             setTimeout(() => {
-                if (!nprogress.status)
+                if (!nprogress.percent)
                     return;
                 nprogress.trickle();
                 work();
-            }, nprogress.settings.trickleSpeed);
+            }, SETTINGS.trickleSpeed);
         };
-        if (nprogress.settings.trickle)
+        if (SETTINGS.trickle)
             work();
@@ -80,18 +150,18 @@ return nprogress;
     done: (force) => {
-        if (!force && !nprogress.status)
+        if (!force && !nprogress.percent)
             return nprogress;
-        return nprogress.inc(0.3 + 0.5 * Math.random()).set(1);
+        return nprogress.increase(0.3 + 0.5 * Math.random()).set(1);
     },
-    inc: (amount) => {
-        let n = nprogress.status;
-        if (!n) {
+    increase: (amount) => {
+        let { percent } = nprogress;
+        if (!percent) {
             return nprogress.start();
         }
-        if (typeof amount !== 'number') {
-            amount = (1 - n) * clamp(Math.random() * n, 0.1, 0.95);
-        }
-        n = clamp(n + amount, 0, 0.994);
-        return nprogress.set(n);
+        percent = clamp(percent +
+            (typeof amount === 'number'
+                ? amount
+                : (1 - percent) * clamp(Math.random() * percent, 0.1, 0.95)), 0, 0.994);
+        return nprogress.set(percent);
     },
-    trickle: () => nprogress.inc(Math.random() * nprogress.settings.trickleRate),
+    trickle: () => nprogress.increase(Math.random() * SETTINGS.trickleRate),
     render: (fromStart) => {
@@ -102,112 +172,25 @@ if (nprogress.isRendered()) {
         addClass(document.documentElement, 'nprogress-busy');
-        const progress = document.createElement('div');
-        progress.id = 'nprogress';
-        progress.innerHTML = nprogress.settings.template;
-        const bar = progress.querySelector(nprogress.settings.barSelector);
-        const perc = fromStart ? '-100' : toBarPerc(nprogress.status || 0);
-        const parent = document.querySelector(nprogress.settings.parent);
-        css(bar, {
+        const nprogressElement = document.createElement('div');
+        nprogressElement.id = 'nprogress';
+        nprogressElement.innerHTML = SETTINGS.template;
+        const barElement = nprogressElement.querySelector(SETTINGS.barSelector);
+        const parentElement = document.querySelector(SETTINGS.parent);
+        const percent = fromStart ? '-100' : toBarPercent(nprogress.percent ?? 0);
+        addStyle(barElement, {
             transition: 'all 0 linear',
-            transform: 'translate3d(' + perc + '%,0,0)',
+            transform: `translate3d(${percent}%,0,0)`,
         });
-        if (parent !== document.body) {
-            addClass(parent, 'nprogress-custom-parent');
+        if (parentElement) {
+            if (parentElement !== document.body) {
+                addClass(parentElement, 'nprogress-custom-parent');
+            }
+            parentElement.appendChild(nprogressElement);
         }
-        parent?.appendChild(progress);
-        return progress;
+        return nprogressElement;
     },
     remove: () => {
         removeClass(document.documentElement, 'nprogress-busy');
-        removeClass(document.querySelector(nprogress.settings.parent), 'nprogress-custom-parent');
-        const progress = document.getElementById('nprogress');
-        progress && removeElement(progress);
+        removeClass(document.querySelector(SETTINGS.parent), 'nprogress-custom-parent');
+        removeElement(document.getElementById('nprogress'));
     },
-    isRendered: () => !!document.getElementById('nprogress'),
 };
-const clamp = (n, min, max) => {
-    if (n < min)
-        return min;
-    if (n > max)
-        return max;
-    return n;
-};
-const toBarPerc = (n) => (-1 + n) * 100;
-const queue = (function () {
-    const pending = [];
-    function next() {
-        const fn = pending.shift();
-        if (fn) {
-            fn(next);
-        }
-    }
-    return function (fn) {
-        pending.push(fn);
-        if (pending.length === 1)
-            next();
-    };
-})();
-const css = (function () {
-    const cssPrefixes = ['Webkit', 'O', 'Moz', 'ms'];
-    const cssProps = {};
-    function camelCase(string) {
-        return string
-            .replace(/^-ms-/, 'ms-')
-            .replace(/-([\da-z])/gi, function (match, letter) {
-            return letter.toUpperCase();
-        });
-    }
-    function getVendorProp(name) {
-        const style = document.body.style;
-        if (name in style)
-            return name;
-        let i = cssPrefixes.length;
-        const capName = name.charAt(0).toUpperCase() + name.slice(1);
-        let vendorName;
-        while (i--) {
-            vendorName = cssPrefixes[i] + capName;
-            if (vendorName in style)
-                return vendorName;
-        }
-        return name;
-    }
-    function getStyleProp(name) {
-        name = camelCase(name);
-        return (cssProps[name] ??= getVendorProp(name));
-    }
-    function applyCss(element, prop, value) {
-        prop = getStyleProp(prop);
-        element.style[prop] = value;
-    }
-    return function (element, properties) {
-        for (const prop in properties) {
-            const value = properties[prop];
-            if (value !== undefined &&
-                Object.prototype.hasOwnProperty.call(properties, prop))
-                applyCss(element, prop, value);
-        }
-    };
-})();
-const hasClass = (element, name) => {
-    const list = typeof element === 'string' ? element : classList(element);
-    return list.indexOf(' ' + name + ' ') >= 0;
-};
-const addClass = (element, name) => {
-    const oldList = classList(element);
-    const newList = oldList + name;
-    if (hasClass(oldList, name))
-        return;
-    element.className = newList.substring(1);
-};
-const removeClass = (element, name) => {
-    const oldList = classList(element);
-    if (!hasClass(element, name))
-        return;
-    const newList = oldList.replace(' ' + name + ' ', ' ');
-    element.className = newList.substring(1, newList.length - 1);
-};
-const classList = (element) => {
-    return (' ' + (element.className || '') + ' ').replace(/\s+/gi, ' ');
-};
-const removeElement = (element) => {
-    element && element.parentNode && element.parentNode.removeChild(element);
-};

package.json

 {
   "name": "@vuepress/plugin-nprogress",
-  "version": "2.0.0-rc.41",
+  "version": "2.0.0-rc.42",
   "description": "VuePress plugin - nprogress",
@@ -34,6 +34,7 @@ "keywords": [
   "dependencies": {
-    "vue": "^3.4.37"
+    "@vuepress/helper": "2.0.0-rc.42",
+    "vue": "^3.4.38"
   },
   "peerDependencies": {
-    "vuepress": "2.0.0-rc.14"
+    "vuepress": "2.0.0-rc.15"
   },
@@ -43,3 +44,3 @@ "publishConfig": {
   },
-  "gitHead": "7382aceb24df0b09f36ddd603dd4a00597343651"
+  "gitHead": "66e494405a7fbb02f6d46d7be670ec69605b7606"
 }

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Worsened metrics

Total package byte prevSize

11564

decreased by-5.07%

Dependency count

3

increased by50%

Lines of code

282

decreased by-9.32%

Dependency changes

• + Added@vuepress/helper@2.0.0-rc.42

• + Added@vuepress/cli@2.0.0-rc.15(transitive)

• + Added@vuepress/client@2.0.0-rc.15(transitive)

• + Added@vuepress/core@2.0.0-rc.15(transitive)

• + Added@vuepress/helper@2.0.0-rc.42(transitive)

• + Added@vuepress/markdown@2.0.0-rc.15(transitive)

• + Added@vuepress/shared@2.0.0-rc.15(transitive)

• + Added@vuepress/utils@2.0.0-rc.15(transitive)

• + Addedboolbase@1.0.0(transitive)

• + Addedcheerio@1.0.0(transitive)

• + Addedcheerio-select@2.1.0(transitive)

• + Addedcss-select@5.1.0(transitive)

• + Addedcss-what@6.1.0(transitive)

• + Addeddom-serializer@2.0.0(transitive)

• + Addeddomelementtype@2.3.0(transitive)

• + Addeddomhandler@5.0.3(transitive)

• + Addeddomutils@3.1.0(transitive)

• + Addedencoding-sniffer@0.2.0(transitive)

• + Addedfflate@0.8.2(transitive)

• + Addedhtmlparser2@9.1.0(transitive)

• + Addediconv-lite@0.6.3(transitive)

• + Addednth-check@2.1.1(transitive)

• + Addedparse5@7.1.2(transitive)

• + Addedparse5-htmlparser2-tree-adapter@7.0.0(transitive)

• + Addedparse5-parser-stream@7.1.2(transitive)

• + Addedsafer-buffer@2.1.2(transitive)

• + Addedundici@6.19.8(transitive)

• + Addedvuepress@2.0.0-rc.15(transitive)

• + Addedwhatwg-encoding@3.1.1(transitive)

• + Addedwhatwg-mimetype@4.0.0(transitive)

• - Removed@vuepress/cli@2.0.0-rc.14(transitive)

• - Removed@vuepress/client@2.0.0-rc.14(transitive)

• - Removed@vuepress/core@2.0.0-rc.14(transitive)

• - Removed@vuepress/markdown@2.0.0-rc.14(transitive)

• - Removed@vuepress/shared@2.0.0-rc.14(transitive)

• - Removed@vuepress/utils@2.0.0-rc.14(transitive)

• - Removedvuepress@2.0.0-rc.14(transitive)

• Updatedvue@^3.4.38