cytoscape-popper - npm Package Compare versions

Comparing version 1.0.7 to 2.0.0

cytoscape-popper.js

 (function webpackUniversalModuleDefinition(root, factory) {
 	if(typeof exports === 'object' && typeof module === 'object')
-		module.exports = factory(require("popper.js"));
+		module.exports = factory(require("@popperjs/core"));
 	else if(typeof define === 'function' && define.amd)
-		define(["popper.js"], factory);
+		define(["@popperjs/core"], factory);
 	else if(typeof exports === 'object')
-		exports["cytoscapePopper"] = factory(require("popper.js"));
+		exports["cytoscapePopper"] = factory(require("@popperjs/core"));
 	else
@@ -114,22 +114,12 @@ root["cytoscapePopper"] = factory(root["Popper"]);
 
-// Create a popper reference object
-// https://popper.js.org/popper-documentation.html#referenceObject
+// Create a popper virtual element (aka popper v1 reference object)
+// https://popper.js.org/docs/v2/virtual-elements/
 
 
 function getRef(target, opts) {
-  var renderedDimensions = opts.renderedDimensions;
 
   //Define popper reference object and cy reference  object
-
   var refObject = {
     getBoundingClientRect: function getBoundingClientRect() {
       return getBoundingBox(target, opts);
-    },
-
-    get clientWidth() {
-      return renderedDimensions(target).w;
-    },
-
-    get clientHeight() {
-      return renderedDimensions(target).h;
     }
@@ -160,10 +150,8 @@ };
 
-//Fix Popper.js webpack import conflict (Use .default if using webpack)
-var Popper = __webpack_require__(8);
-var EsmWebpackPopper = Popper.default;
-if (EsmWebpackPopper != null && EsmWebpackPopper.Defaults != null) {
-  Popper = Popper.default;
-}
+var _require3 = __webpack_require__(8),
+    createPopper = _require3.createPopper;
 
 // Create a new popper object for a core or element target
+
+
 function getPopper(target, opts) {
@@ -174,3 +162,3 @@ var refObject = getRef(target, opts);
 
-  return new Popper(refObject, content, popperOpts);
+  return createPopper(refObject, content, popperOpts);
 }
@@ -299,3 +287,3 @@
     },
-    redneredPosition: function redneredPosition() {
+    renderedPosition: function renderedPosition() {
       return { x: 0, y: 0 };
@@ -302,0 +290,0 @@ },

package.json

 {
   "name": "cytoscape-popper",
-  "version": "1.0.7",
+  "version": "2.0.0",
   "description": "A Cytoscape.js extension for Popper.js",
@@ -54,4 +54,4 @@ "main": "cytoscape-popper.js",
   "dependencies": {
-    "popper.js": "^1.0.0"
+    "@popperjs/core": "^2.0.0"
   }
 }

README.md

@@ -15,3 +15,3 @@ cytoscape-popper
  * Cytoscape.js ^3.2.0
- * Popper.js ^1.12.0
+ * Popper.js ^2.0.0
 
@@ -56,3 +56,2 @@
 
-
 ## API
@@ -64,5 +63,5 @@
 
-`cy.popper( options )` or `ele.popper( options )` : Get a [Popper](https://popper.js.org/popper-documentation.html#Popper) object for the specified core Cytoscape instance or the specified element.  This is useful for positioning a div relative to or on top of a core instance or element.
+`cy.popper( options )` or `ele.popper( options )` : Get a [Popper Instance](https://popper.js.org/docs/v2/constructors/) for the specified core Cytoscape instance or the specified element.  This is useful for positioning a div relative to or on top of a core instance or element.
 
-`cy.popperRef( options )` or `ele.popperRef( options )` : Get a [Popper reference object](https://popper.js.org/popper-documentation.html#referenceObject) for the specified core Cytoscape instance or the specified element.  A Popper reference object is useful only for positioning, as it represent the target rather than the content.  This is useful for cases where you want to create a `new Popper()` manually or where you need to pass a `popperRef` object to another library like Tippy.js.
+`cy.popperRef( options )` or `ele.popperRef( options )` : Get a [Popper virtual element](https://popper.js.org/docs/v2/virtual-elements/) (aka `Popper reference object` in Popper v1) for the specified core Cytoscape instance or the specified element.  A Popper virtual element is useful only for positioning, as it represent the target rather than the content.  This is useful for cases where you want to create a new Popper instance manually via Popper constructor `createPopper()` or where you need to pass a `popperRef` object to another library like Tippy.js.
 
@@ -73,3 +72,3 @@ - `options`
    - `renderedDimensions` : A function that can be used to override the [rendered](http://js.cytoscape.org/#notation/position) Cytoscape [bounding box dimensions](http://js.cytoscape.org/#eles.renderedBoundingBox) considered for the popper target (i.e. `cy` or `ele`).  It defines only the effective width and height (`bb.w` and `bb.h`) of the Popper target.   This option is more often useful for elements rather than for the core.
-   - `popper` : The Popper [options object](https://popper.js.org/popper-documentation.html#new_Popper_new).  You may use this to override Popper options.
+   - `popper` : The Popper [options object](https://popper.js.org/docs/v2/constructors/#options).  You may use this to override Popper options.
 
@@ -115,3 +114,3 @@ ### `popper()` example
 
-// create a basic popper on the core
+// create a basic popper ref on the core
 let popperRef2 = cy.popperRef({
@@ -140,3 +139,3 @@ renderedPosition: () => ({ x: 200, y: 300 })
 let update = () => {
-  popper.scheduleUpdate();
+  popper.update();
 };
@@ -148,11 +147,9 @@
 ```
-
+Note that for Popper v2 the update method is asynchronous and returns a promise. See [Manual update](https://popper.js.org/docs/v2/lifecycle/#manual-update).
 ### Usage with Tippy.js
 
-This extension can also be used to enable [Tippy.js](https://atomiks.github.io/tippyjs/v5/) tooltip functionality with Cytoscape.  Any version of Tippy that is compatible with Popper v1 is compatible with this extension.  As of this writing, the latest compatible version of Tippy.js is v5.2.1.
+This extension can also be used to enable [Tippy.js](https://github.com/atomiks/tippyjs) tooltip functionality with Cytoscape.  Any version of Tippy that is compatible with Popper v2 is compatible with this extension.
 
-> :warning: Tippy.js v6+ is **not** compatible with Popper v1 (see [this](https://github.com/atomiks/tippyjs/blob/master/MIGRATION_GUIDE.md#5x-to-6x)). As such, the latest (major) version of Tippy you can use is v5.
+The creation of many `Tippy` instances at once has performance implications, especially for large graphs.  Create each instance on demand, e.g. on `tap`.  Use [`destroy()`](https://atomiks.github.io/tippyjs/v6/methods/#destroy) instead of `hide()` where possible.
 
-The creation of many `Tippy` instances at once has performance implications, especially for large graphs.  Create each instance on demand, e.g. on `tap`.  Use [`destroy()`](https://atomiks.github.io/tippyjs/v5/methods/#destroy) instead of `hide()` where possible.
-
 ```js
@@ -163,22 +160,19 @@ let node = cy.nodes().first();
 
-// unfortunately, a dummy element must be passed as tippy only accepts a dom element as the target
-// https://github.com/atomiks/tippyjs/issues/661
+// A dummy element must be passed as tippy only accepts dom element(s) as the target
+// https://atomiks.github.io/tippyjs/v6/constructor/#target-types
 let dummyDomEle = document.createElement('div');
 
-// using tippy@^5.2.1
-let tip = new Tippy(dummyDomEle, { // tippy options:
-  // mandatory:
-  trigger: 'manual', // call show() and hide() yourself
-  lazy: false, // needed for onCreate()
-  onCreate: instance => { instance.popperInstance.reference = ref; }, // needed for `ref` positioning
+let tip = new Tippy(dummyDomEle, { // tippy props:
+   getReferenceClientRect: ref.getBoundingClientRect, // https://atomiks.github.io/tippyjs/v6/all-props/#getreferenceclientrect
+   trigger: 'manual', // mandatory, we cause the tippy to show programmatically.
+   
+   // your own custom props
+   // content prop can be used when the target is a single element https://atomiks.github.io/tippyjs/v6/constructor/#prop
+   content: () => {
+      let content = document.createElement('div');
 
-  // your custom options follow:
+      content.innerHTML = 'Tippy content';
 
-  content: () => {
-    let content = document.createElement('div');
-
-    content.innerHTML = 'Tippy content';
-
-    return content;
-  }
+      return content;
+   }
 });
@@ -189,5 +183,8 @@
 
-Refer to [Tippy.js](https://atomiks.github.io/tippyjs/v5) documentation for more details.
+Refer to [Tippy.js](https://atomiks.github.io/tippyjs/) documentation for more details.
 
+## v2 changes
+This version of cytoscape-popper has been updated to use Popper 2 and be compatible with Tippy 6. Thus, it is no longer compatible with Popper v1/Tippy v5. If your application needs Popper v1/Tippy v5, use the latest v1 version of cytoscape-popper instead. Cytoscape-popper v1 dependencies are Cytoscape.js ^3.2.0 and Popper.js ^1.12.0.
 
+The cytoscape-popper api has not changed in v2, but you may need to update your code if it references Popper/Tippy. See [Migrating to Popper 2](https://popper.js.org/docs/v2/migration-guide/) and [Tippy Migration Guide](https://github.com/atomiks/tippyjs/blob/master/MIGRATION_GUIDE.md#5x-to-6x).
 
@@ -194,0 +191,0 @@ ## Build targets

src/core.js

@@ -26,3 +26,3 @@ const assign = require('./assign');
     renderedDimensions : () => ({w: 3, h: 3}),
-    redneredPosition : () => ({x : 0, y : 0}),
+    renderedPosition : () => ({x : 0, y : 0}),
     popper : {},
@@ -29,0 +29,0 @@ cy : target

src/popper.js

@@ -7,8 +7,3 @@ const assign = require('./assign');
 
-//Fix Popper.js webpack import conflict (Use .default if using webpack)
-let Popper = require('popper.js');
-let EsmWebpackPopper = Popper.default;
-if (EsmWebpackPopper != null && EsmWebpackPopper.Defaults != null) {
-  Popper = Popper.default;
-}
+const {createPopper} = require('@popperjs/core');
 
@@ -21,5 +16,5 @@ // Create a new popper object for a core or element target
 
-  return new Popper(refObject, content, popperOpts);
+  return createPopper(refObject, content, popperOpts);
 }
 
 module.exports = { getPopper };

src/ref.js

 const { getBoundingBox } = require('./bb');
 
-// Create a popper reference object
-// https://popper.js.org/popper-documentation.html#referenceObject
+// Create a popper virtual element (aka popper v1 reference object)
+// https://popper.js.org/docs/v2/virtual-elements/
 function getRef(target, opts) {
-  let { renderedDimensions } = opts;
 
@@ -12,11 +11,3 @@ //Define popper reference object and cy reference  object
       return getBoundingBox(target, opts);
-    },
-
-    get clientWidth() {
-      return renderedDimensions(target).w;
-    },
-
-    get clientHeight() {
-      return renderedDimensions(target).h;
-    },
+    }
   };
@@ -23,0 +14,0 @@

webpack.config.js

@@ -26,6 +26,6 @@ const path = require('path');
   externals: {
-    "popper.js" : {
-      commonjs: "popper.js",
-      commonjs2: "popper.js",
-      amd: "popper.js",
+    "@popperjs/core" : {
+      commonjs: "@popperjs/core",
+      commonjs2: "@popperjs/core",
+      amd: "@popperjs/core",
       root: "Popper"
@@ -32,0 +32,0 @@ }

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

34971

decreased by-1.39%

Lines of code

541

decreased by-4.08%

Number of lines in readme file

204

decreased by-1.45%

Dependency changes

• + Added@popperjs/core@^2.0.0

• + Added@popperjs/core@2.11.8(transitive)

• - Removedpopper.js@^1.0.0

• - Removedpopper.js@1.16.1(transitive)