driver.js - npm Package Compare versions

Comparing version 0.9.8 to 1.0.0-next.0

package.json

 {
   "name": "driver.js",
-  "version": "0.9.8",
-  "description": "A light-weight, no-dependency, vanilla JavaScript library to drive the user's focus across the page",
-  "main": "dist/driver.min.js",
-  "types": "types/index.d.ts",
+  "private": false,
+  "version": "1.0.0-next.0",
+  "main": "./dist/driver.js.cjs",
+  "module": "./dist/driver.js.mjs",
+  "exports": {
+    ".": {
+      "require": "./dist/driver.js.cjs",
+      "import": "./dist/driver.js.mjs"
+    }
+  },
   "scripts": {
-    "start": "node server.js",
-    "build-demo": "NODE_ENV=production webpack --config config/webpack.config.demo.js",
-    "build": "webpack --config config/webpack.config.prod.js",
-    "deploy-demo": "NODE_DEBUG=gh-pages gh-pages -d dist/demo"
+    "dev": "vite --host",
+    "build": "tsc && vite build && dts-bundle-generator --config ./dts-bundle-generator.config.ts",
+    "test": "vitest",
+    "format": "prettier . --write"
   },
-  "bugs": {
-    "url": "https://github.com/kamranahmedse/driver.js/issues"
-  },
-  "homepage": "https://github.com/kamranahmedse/driver.js#readme",
-  "repository": "https://github.com/kamranahmedse/driver.js",
-  "author": "Kamran Ahmed <[e-mail]>",
-  "license": "MIT",
+  "files": [
+    "!tests/**/*",
+    "dist/**/*",
+    "!dist/**/*.js.map"
+  ],
   "devDependencies": {
-    "@babel/core": "^7.4.5",
-    "@babel/plugin-proposal-object-rest-spread": "^7.4.4",
-    "@babel/preset-env": "^7.4.5",
-    "babel-eslint": "^10.0.1",
-    "babel-loader": "^8.0.6",
-    "copy-webpack-plugin": "^5.0.3",
-    "css-loader": "^3.0.0",
-    "cssnano": "^4.1.10",
-    "eslint": "^5.16.0",
-    "eslint-config-airbnb-base": "^13.1.0",
-    "eslint-loader": "^2.1.2",
-    "eslint-plugin-import": "^2.17.3",
-    "eslint-plugin-node": "^9.1.0",
-    "extract-loader": "^3.1.0",
-    "extract-text-webpack-plugin": "next",
-    "file-loader": "^4.0.0",
-    "gh-pages": "^2.0.1",
-    "html-webpack-plugin": "^3.2.0",
-    "node-sass": "^4.12.0",
-    "opn": "^6.0.0",
-    "optimize-css-assets-webpack-plugin": "^5.0.1",
-    "postcss-loader": "^3.0.0",
-    "sass-loader": "^7.1.0",
-    "style-loader": "^0.23.1",
-    "webpack": "^4.34.0",
-    "webpack-cli": "^3.3.4",
-    "webpack-dev-server": "^3.7.1"
-  },
-  "dependencies": {}
+    "@types/jsdom": "^21.1.1",
+    "@types/node": "^20.3.0",
+    "@vitest/coverage-c8": "^0.32.0",
+    "dts-bundle-generator": "^8.0.1",
+    "postcss": "^8.4.24",
+    "postcss-scss": "^4.0.6",
+    "prettier": "^2.8.8",
+    "ts-node": "^10.9.1",
+    "typescript": "^5.1.3",
+    "vite": "^4.3.9",
+    "vitest": "^0.32.0"
+  }
 }

readme.md

@@ -1,2 +0,2 @@
-<h1 align="center"><img height="150" src="./demo/images/driver.png" /><br> Driver.js</h1>
+<h1 align="center"><img height="150" src="./.github/images/driver.svg" /><br> Driver.js</h1>
 
@@ -11,3 +11,3 @@ <p align="center">
   <a href="https://npmjs.org/package/driver.js">
-    <img src="https://img.shields.io/npm/dm/driver.js.svg" alt="downloads" />
+    <img src="https://img.shields.io/npm/dt/driver.js.svg" alt="downloads" />
   </a>
@@ -17,4 +17,4 @@ </p>
 <p align="center">
-  <b>Powerful yet light-weight, vanilla JavaScript engine to drive the user's focus across the page</b></br>
-  <sub>Only ~4kb, no external dependency, supports all major browsers and highly customizable <sub>
+  <b>Powerful, highly customizable vanilla JavaScript engine to drive the user's focus across the page</b></br>
+  <sub>No external dependencies, supports all major browsers and highly customizable <sub>
 </p>
@@ -24,11 +24,10 @@
 
-* **Simple**: is simple to use and has no external dependency at all
-* **Light-weight**: ~4kb in size, vanilla JavaScript and no external dependency
-* **Highly customizable**: has a powerful API and can be used however you want
-* **Highlight anything**: highlight any (literally any) element on page
-* **Feature introductions**: create powerful feature introductions for your web applications
-* **Focus shifters**: add focus shifters for users
-* **User friendly**: Everything is controllable by keyboard
-* **Consistent behavior**: usable across all browsers (including in-famous IE)
-* **MIT Licensed**: free for personal and commercial use
+- **Simple**: is simple to use and has no external dependency at all
+- **Highly customizable**: has a powerful API and can be used however you want
+- **Highlight anything**: highlight any (literally any) element on page
+- **Feature introductions**: create powerful feature introductions for your web applications
+- **Focus shifters**: add focus shifters for users
+- **User friendly**: Everything is controllable by keyboard
+- **Consistent behavior**: usable across all browsers (including in-famous IE)
+- **MIT Licensed**: free for personal and commercial use
 
@@ -53,6 +52,8 @@ ![](./demo/images/split.png)
 ```
+
 Or include it using CDN. If you want a specific version, put it as `driver.js@0.5` in the name
+
 ```html
 <script src="https://unpkg.com/driver.js/dist/driver.min.js"></script>
-<link rel="stylesheet" href="https://unpkg.com/driver.js/dist/driver.min.css">
+<link rel="stylesheet" href="https://unpkg.com/driver.js/dist/driver.min.css" />
 ```
@@ -63,3 +64,3 @@
 ```html
-<link rel="stylesheet" href="/dist/driver.min.css">
+<link rel="stylesheet" href="/dist/driver.min.css" />
 <script src="/dist/driver.min.js"></script>
@@ -75,5 +76,6 @@ ```
 ```javascript
-import Driver from 'driver.js';
-import 'driver.js/dist/driver.min.css';
+import Driver from "driver.js";
+import "driver.js/dist/driver.min.css";
 ```
+
 otherwise use the `script` and `link` tags to import the JavaScript and CSS files.
@@ -89,4 +91,5 @@
 const driver = new Driver();
-driver.highlight('#create-post');
+driver.highlight("#create-post");
 ```
+
 A real world usage example for this is: using it to dim the background and highlight the required element e.g. the way Facebook does it when creating a post.
@@ -101,7 +104,7 @@
 driver.highlight({
-  element: '#some-element',
+  element: "#some-element",
   popover: {
-    title: 'Title for the Popover',
-    description: 'Description for it',
-  }
+    title: "Title for the Popover",
+    description: "Description for it",
+  },
 });
@@ -119,11 +122,11 @@ ```
 driver.highlight({
-  element: '#some-element',
+  element: "#some-element",
   popover: {
-    title: 'Title for the Popover',
-    description: 'Description for it',
+    title: "Title for the Popover",
+    description: "Description for it",
     // position can be left, left-center, left-bottom, top,
     // top-center, top-right, right, right-center, right-bottom,
     // bottom, bottom-center, bottom-right, mid-center
-    position: 'left',
-  }
+    position: "left",
+  },
 });
@@ -137,11 +140,11 @@ ```
 driver.highlight({
-  element: '#some-element',
+  element: "#some-element",
   popover: {
-    title: 'Title for the Popover',
-    description: 'Description for it',
-    position: 'bottom',
+    title: "Title for the Popover",
+    description: "Description for it",
+    position: "bottom",
     // Will show it 20 pixels away from the actual position of popover
     // You may also provide the negative values
     offset: 20,
-  }
+  },
 });
@@ -160,25 +163,25 @@ ```
   {
-    element: '#first-element-introduction',
+    element: "#first-element-introduction",
     popover: {
-      className: 'first-step-popover-class',
-      title: 'Title on Popover',
-      description: 'Body of the popover',
-      position: 'left'
-    }
+      className: "first-step-popover-class",
+      title: "Title on Popover",
+      description: "Body of the popover",
+      position: "left",
+    },
   },
   {
-    element: '#second-element-introduction',
+    element: "#second-element-introduction",
     popover: {
-      title: 'Title on Popover',
-      description: 'Body of the popover',
-      position: 'top'
-    }
+      title: "Title on Popover",
+      description: "Body of the popover",
+      position: "top",
+    },
   },
   {
-    element: '#third-element-introduction',
+    element: "#third-element-introduction",
     popover: {
-      title: 'Title on Popover',
-      description: 'Body of the popover',
-      position: 'right'
-    }
+      title: "Title on Popover",
+      description: "Body of the popover",
+      position: "right",
+    },
   },
@@ -190,2 +193,3 @@ ]);
 ```
+
 You can also hide the buttons and control the introductions programmatically by using the API methods listed below.
@@ -205,15 +209,15 @@
   {
-    element: '#first-element-introduction',
+    element: "#first-element-introduction",
     popover: {
-      title: 'Title on Popover',
-      description: 'Body of the popover',
-      position: 'left'
-    }
+      title: "Title on Popover",
+      description: "Body of the popover",
+      position: "left",
+    },
   },
   {
-    element: '#second-element-introduction',
+    element: "#second-element-introduction",
     popover: {
-      title: 'Title on Popover',
-      description: 'Body of the popover',
-      position: 'top'
+      title: "Title on Popover",
+      description: "Body of the popover",
+      position: "top",
     },
@@ -223,3 +227,3 @@ onNext: () => {
       driver.preventMove();
-      
+
       // Perform some action or create the element to move to
@@ -230,11 +234,11 @@ // And then move to that element
       }, 4000);
-    }
+    },
   },
   {
-    element: '#third-element-introduction',
+    element: "#third-element-introduction",
     popover: {
-      title: 'Title on Popover',
-      description: 'Body of the popover',
-      position: 'right'
-    }
+      title: "Title on Popover",
+      description: "Body of the popover",
+      position: "right",
+    },
   },
@@ -246,2 +250,3 @@ ]);
 ```
+
 You can also hide the buttons and control the introductions programmatically by using the API methods listed below.
@@ -261,24 +266,25 @@
 const driver = new Driver({
-  className: 'scoped-class',        // className to wrap driver.js popover
-  animate: true,                    // Whether to animate or not
-  opacity: 0.75,                    // Background opacity (0 means only popovers and without overlay)
-  padding: 10,                      // Distance of element from around the edges
-  allowClose: true,                 // Whether the click on overlay should close or not
-  overlayClickNext: false,          // Whether the click on overlay should move next
-  doneBtnText: 'Done',              // Text on the final button
-  closeBtnText: 'Close',            // Text on the close button for this step
-  stageBackground: '#ffffff',       // Background color for the staged behind highlighted element
-  nextBtnText: 'Next',              // Next button text for this step
-  prevBtnText: 'Previous',          // Previous button text for this step
-  showButtons: false,               // Do not show control buttons in footer
-  keyboardControl: true,            // Allow controlling through keyboard (escape to close, arrow keys to move)
-  scrollIntoViewOptions: {},        // We use `scrollIntoView()` when possible, pass here the options for it if you want any
-  onHighlightStarted: (Element) => {}, // Called when element is about to be highlighted
-  onHighlighted: (Element) => {},      // Called when element is fully highlighted
-  onDeselected: (Element) => {},       // Called when element has been deselected
-  onReset: (Element) => {},            // Called when overlay is about to be cleared
-  onNext: (Element) => {},                    // Called when moving to next step on any step
-  onPrevious: (Element) => {},                // Called when moving to previous step on any step
+  className: "scoped-class", // className to wrap driver.js popover
+  animate: true, // Whether to animate or not
+  opacity: 0.75, // Background opacity (0 means only popovers and without overlay)
+  padding: 10, // Distance of element from around the edges
+  allowClose: true, // Whether the click on overlay should close or not
+  overlayClickNext: false, // Whether the click on overlay should move next
+  doneBtnText: "Done", // Text on the final button
+  closeBtnText: "Close", // Text on the close button for this step
+  stageBackground: "#ffffff", // Background color for the staged behind highlighted element
+  nextBtnText: "Next", // Next button text for this step
+  prevBtnText: "Previous", // Previous button text for this step
+  showButtons: false, // Do not show control buttons in footer
+  keyboardControl: true, // Allow controlling through keyboard (escape to close, arrow keys to move)
+  scrollIntoViewOptions: {}, // We use `scrollIntoView()` when possible, pass here the options for it if you want any
+  onHighlightStarted: Element => {}, // Called when element is about to be highlighted
+  onHighlighted: Element => {}, // Called when element is fully highlighted
+  onDeselected: Element => {}, // Called when element has been deselected
+  onReset: Element => {}, // Called when overlay is about to be cleared
+  onNext: Element => {}, // Called when moving to next step on any step
+  onPrevious: Element => {}, // Called when moving to previous step on any step
 });
 ```
+
 Note that all the button options that you provide in the driver definition can be overridden for a specific step by giving them in the step definition
@@ -292,16 +298,17 @@
 const stepDefinition = {
-  element: '#some-item',        // Query selector string or Node to be highlighted
-  stageBackground: '#ffffff',   // This will override the one set in driver
-  popover: {                    // There will be no popover if empty or not given
-    className: 'popover-class', // className to wrap this specific step popover in addition to the general className in Driver options
-    title: 'Title',             // Title on the popover
-    description: 'Description', // Body of the popover
-    showButtons: false,         // Do not show control buttons in footer
-    doneBtnText: 'Done',        // Text on the last button
-    closeBtnText: 'Close',      // Text on the close button
-    nextBtnText: 'Next',        // Next button text
-    prevBtnText: 'Previous',    // Previous button text
+  element: "#some-item", // Query selector string or Node to be highlighted
+  stageBackground: "#ffffff", // This will override the one set in driver
+  popover: {
+    // There will be no popover if empty or not given
+    className: "popover-class", // className to wrap this specific step popover in addition to the general className in Driver options
+    title: "Title", // Title on the popover
+    description: "Description", // Body of the popover
+    showButtons: false, // Do not show control buttons in footer
+    doneBtnText: "Done", // Text on the last button
+    closeBtnText: "Close", // Text on the close button
+    nextBtnText: "Next", // Next button text
+    prevBtnText: "Previous", // Previous button text
   },
-  onNext: () => {},             // Called when moving to next step from current step
-  onPrevious: () => {},         // Called when moving to previous step from current step
+  onNext: () => {}, // Called when moving to next step from current step
+  onPrevious: () => {}, // Called when moving to previous step from current step
 };
@@ -321,8 +328,3 @@ ```
 const driver = new Driver(driverOptions);
-driver.defineSteps([
-    stepDefinition1,
-    stepDefinition2,
-    stepDefinition3,
-    stepDefinition4,
-]);
+driver.defineSteps([stepDefinition1, stepDefinition2, stepDefinition3, stepDefinition4]);
 ```
@@ -339,12 +341,12 @@
 if (driver.isActivated) {
-    console.log('Driver is active');
+  console.log("Driver is active");
 }
 
 // In case of the steps guide, you can call below methods
-driver.defineSteps([ stepDefinition1, stepDefinition2, stepDefinition3 ]);
-driver.start(stepNumber = 0);  // Starts driving through the defined steps
-driver.moveNext();             // Moves to next step in the steps list
-driver.movePrevious();         // Moves to previous step in the steps list
-driver.hasNextStep();          // Checks if there is next step to move to
-driver.hasPreviousStep();      // Checks if there is previous step to move to
+driver.defineSteps([stepDefinition1, stepDefinition2, stepDefinition3]);
+driver.start((stepNumber = 0)); // Starts driving through the defined steps
+driver.moveNext(); // Moves to next step in the steps list
+driver.movePrevious(); // Moves to previous step in the steps list
+driver.hasNextStep(); // Checks if there is next step to move to
+driver.hasPreviousStep(); // Checks if there is previous step to move to
 
@@ -356,3 +358,3 @@ // Prevents the current move. Useful in `onNext` or `onPrevious` if you want to
 // Highlights the element using query selector or the step definition
-driver.highlight(string|stepDefinition);
+driver.highlight(string | stepDefinition);
 
@@ -369,7 +371,7 @@ // Reposition the popover and highlighted element
 // a different instance of driver while one was running
-driver.reset(clearImmediately = false);
+driver.reset((clearImmediately = false));
 
 // Checks if there is any highlighted element
-if(driver.hasHighlightedElement()) {
-    console.log('There is an element highlighted');
+if (driver.hasHighlightedElement()) {
+  console.log("There is an element highlighted");
 }
@@ -385,6 +387,6 @@
 activeElement.getCalculatedPosition(); // Gets screen co-ordinates of the active element
-activeElement.hidePopover();           // Hide the popover
-activeElement.showPopover();           // Show the popover
+activeElement.hidePopover(); // Hide the popover
+activeElement.showPopover(); // Show the popover
 
-activeElement.getNode();  // Gets the DOM Element behind this element
+activeElement.getNode(); // Gets the DOM Element behind this element
 ```
@@ -411,3 +413,1 @@
 MIT &copy; [Kamran Ahmed](https://twitter.com/kamranahmedse)
-
-

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

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

Found 1 instance in 1 package

No contributors or author data

Maintenance

Package does not specify a list of contributors or an author in package.json.

Found 1 instance in 1 package

No bug tracker

Maintenance

Package does not have a linked bug tracker in package.json.

Found 1 instance in 1 package

No repository

Supply chain risk

Package does not have a linked source code repository. Without this field, a package will have no reference to the location of the source code use to generate the package.

Found 1 instance in 1 package

No website

Quality

Package does not have a website.

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

Improved metrics

Dev dependency count

11

decreased by-59.26%

Worsened metrics

Total package byte prevSize

77727

decreased by-47.7%

Number of package files

8

decreased by-52.94%

Lines of code

807

decreased by-67.07%

Number of low maintenance alerts

2

increased byInfinity%

Number of low quality alerts

2

increased by100%

Number of medium supply chain risk alerts

1

increased byInfinity%

No dependency changes