Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More →
nanocomponent
Advanced tools
nanocomponent - npm Package Compare versions
Comparing version 6.0.0-0 to 6.0.0-1
104
CHANGELOG.md
@@ -13,11 +13,12 @@ # nanocomponent Change Log | ||
| `nanocomponent@6` is mostly the same as `cache-component@5` except for the following: | ||
| `nanocomponent@6` is mostly the same as `cache-component@5` except a few methods are renamed and everything you interact with has had the `_` prefix removed. | ||
| - **Breaking**: The `_element` [getter][getter] is renamed to `element`. | ||
| - **Breaking**: `_willMount` is renamed to `_willRender` because DOM mounting can't be guaranteed from the perspective of a component. | ||
| - **Breaking**: `_didMount` is removed. Consider using `_load` instead now. If you want this on-load free hook still, you can just call `window.requestAnimationFrame` from `_willRender`. | ||
| - **Breaking**: `_willUpdate` is removed. Anything you can do in `_willUpdate` you can just move to `_update`. | ||
| - **Breaking**: `_update` should always be implemented. Instead of the old default shallow compare, not implementing `_update` throws. You can `require('nanocomponent/compare')` to implement the shallow compare if you want that still. See below. | ||
| - **Changed**: `_didUpdate()` now receives an element argument `el` e.g. `_didUpdate(el)`. This makes it's argument signature consistent with the other life-cycle methods. | ||
| - **Added**: Added [on-load][ol] hooks `_load` and `_unload`. [on-load][ol] listeners only get added when one or both of the hooks are implemented on a component making the mutation observers optional. | ||
| - **Breaking**: `_willMount` is renamed to `beforerender` because DOM mounting can't be guaranteed from the perspective of a component. | ||
| - **Breaking**: `_didMount` is removed. Consider using `load` instead now. | ||
| - **Breaking**: `_update` is renamed to `update` and should always be implemented. Instead of the old default shallow compare, not implementing `update` throws. You can `require('nanocomponent/compare')` to implement the shallow compare if you want that still. See below. | ||
| - **Breaking**: `_args` is removed. `arguments` in `createElement` and `update` are already "sliced", so you can simply capture a copy in `update` and `createElement` and use it for comparison at a later time. | ||
| - **Breaking**: `_willUpdate` is removed. Anything you could do in `_willUpdate` you can just move to `update`. | ||
| - **Changed**: `_didUpdate` is renamed to `afterupdate`. It also receives an element argument `el` e.g. `afterupdate(el)`. This makes its argument signature consistent with the other life-cycle methods. | ||
| - **Added**: Added [on-load][ol] hooks `load` and `unload`. [on-load][ol] listeners only get added when one or both of the hooks are implemented on a component making the mutation observers optional. | ||
@@ -27,4 +28,4 @@ | ||
| - No changes nessisary to `_render` | ||
| - You must implement `_update` now. Here is an example of doing shallow compare on components that didn't implement their own update function previously: | ||
| - Renamed `_render` to `createElement`. | ||
| - You must implement `update` now. Rename existing `_update` method to `update`. Here is an example of doing shallow compare on components that didn't implement their own update function previously: | ||
@@ -40,11 +41,7 @@ ```js | ||
| this._title = null | ||
| this._artist = null | ||
| this._album = null | ||
| this.arguments = [] | ||
| } | ||
| _render (title, artist, album) { | ||
| this._title = title || '--' | ||
| this._artist = artist || '--' | ||
| this._album = album || '--' | ||
| createElement (title, artist, album) { | ||
| this.arguments = arguments // cache a copy of arguments | ||
@@ -62,5 +59,5 @@ return html` | ||
| // Implement this to recreate cache-component@5 | ||
| // behavior when _update was not implemented | ||
| _update () { | ||
| return compare(arguments, this._args) | ||
| // behavior when update was not implemented | ||
| update () { | ||
| return compare(arguments, this.arguments) | ||
| } | ||
@@ -71,9 +68,9 @@ } | ||
| - Rename components with `_willMount` to `_willRender` | ||
| - Move any `_didMount` implementations into `_load` or a `window.requestAnmimationFrame` inside of `_willRender`. | ||
| - Move any `_willUpdate` implementations into `_update`. | ||
| - `_didUpdate` remains the same. | ||
| - Take advantage of `_load` and `_unload` for DOM insertion aware node interactions 🙌 | ||
| - Rename components with `_willMount` to `beforerender` | ||
| - Move any `_didMount` implementations into `load` or a `window.requestAnmimationFrame` inside of `beforerender`. | ||
| - Move any `_willUpdate` implementations into `update`. | ||
| - Rename `_didUpdate` to `afterupdate`. | ||
| - Take advantage of `load` and `unload` for DOM insertion aware node interactions 🙌 | ||
| ### Changes since nanocomponent@5 | ||
| ### Changes since `nanocomponent@5` | ||
@@ -83,9 +80,8 @@ `nanocomponent@6` has some subtle but important differences from `nanocompnent@5`. Be sure to read the README and check out the examples to get an understanding of the new API. | ||
| - **Breaking**: The `_element` property is removed. A [getter][getter] called `element` is now used instead. Since this is now a read-only getter, you must not assign anything to this property or else bad things will happen. The `element` getter returns the component's DOM node if mounted in the page, and `undefined` otherwise. You are allowed to mutate that DOM node by hand however. Just don't reassign the property on the component instance. | ||
| - **Changed**: `render` can now handle being removed and re-rendered into the DOM. It can also handle rendering two instances of components in two different views over each other. | ||
| - **Breaking**: `_render` must now return a DOM node always. In earlier versions you could get away with not returning from `_render` and assigning nodes to `_element`. No longer! Also, you should move your DOM mutations into `_update`. | ||
| - **Changed**: Update still works the same way: return true to run `_render` or return false to skip a call to `_render` when `render` is called. If you decide to mutate `element` "by hand" on updates, do that here (rather than conditional paths inside `_render`). | ||
| - **Changed**: `_load` and `_unload` have always been optional, but now the mutation observers are only added if at least one of these methods are implemented prior to component instantiation. | ||
| - **Added**: `_willRender` lifecycle hook. Its similar to `_load` but runs before mounting. | ||
| - **Added**: `_didUpdate` runs after `_update` returns true and the results of `_render` is mutated over the mounted component. Useful for adjusting scroll position. | ||
| - **Fixed**: More robust unmount and remounting behavior. | ||
| - **Fixed**: Components can gracefully be removed, re-ordered and remounted between views. You can even mutate the same component over individual instances. This is an improvement over `nanocomponent@5`. | ||
| - **Breaking**: `_render` is renamed to `createElement` and must now return a DOM node always. In earlier versions you could get away with not returning from `_render` and assigning nodes to `_element`. No longer! Also, you should move your DOM mutations into `update`. | ||
| - **Changed**: Update still works the same way: return true to run `createElement` or return false to skip a call to `createElement` when `render` is called. If you decide to mutate `element` "by hand" on updates, do that here (rather than conditional paths inside `createElement`). | ||
| - **Changed**: `_load` and `_unload` renamed to `load` and `unload`. They have always been optional, but now the mutation observers are only added if at least one of these methods are implemented prior to component instantiation. | ||
| - **Added**: `beforerender` lifecycle hook. Its similar to `load` but runs before the function call to `render` returns on unmounted component instances. This is where the [on-load][ol] listeners are added and is a good opportunity to add any other lifecycle hooks. | ||
| - **Added**: `afterupdate` runs after `update` returns true and the results of `createElement` is mutated over the mounted component. Useful for adjusting scroll position. | ||
@@ -95,41 +91,13 @@ #### `nanocomponent@5` to `nanocomponent@6` upgrade guide: | ||
| - Read through the new leaflet example to get an idea of the differences between the old and new API. 🗺 | ||
| - Move any DOM mutation code from `_render` into `_update`. | ||
| - Ensure `_render` returns a DOM node always. (You will get warnings if you don't and it probably won't work) | ||
| - Consider moving any `_load` actions into `_willRender` if they don't depend on the newly rendered node being mounted in a DOM tree yet. | ||
| - Take advantage of `_didUpdate` allowing you to interact with your component after `_render` is called on mounted components 🙌 | ||
| - Renamed `_render` to `createElement` and `_update` to `update`. | ||
| - Move any DOM mutation code from `createElement` into `update`. | ||
| - Ensure `createElement` returns a DOM node always. (You will get warnings if you don't and it probably won't work) | ||
| - Rename `_load` and `_unload` to `load` and `unload`. | ||
| - Consider moving any `load` actions into `beforerender` if they don't depend on the newly rendered node being mounted in a DOM tree yet. | ||
| - Take advantage of `afterupdate` allowing you to interact with your component after `createElement` is called on mounted components 🙌 | ||
| ## 5.2.0 | ||
| * Added more lifecycle hooks: `_willMount`, `_didMount`, `_willUpdate` in addition to `_didUpdate`. | ||
| ## 5.1.0 | ||
| * Update [nanomorph](http://ghub.io/nanomorph) to `^5.1.2`. This adds the new child-reordering algorithm so we get a minor version bump. Keep an eye out for weird ness and report broken corner cases 🙏 | ||
| ## 5.0.1 | ||
| * Fix proxy leak by resetting proxy node ID after DOM removal is detected. | ||
| ## 5.0.0 | ||
| * Update [bel](http://ghub.io/bel) to ^5.0.0 | ||
| ## 5.0.0-1 - 2017-05-16 | ||
| * Beta release! Please let me know if there is anything wrong with this! | ||
| * **Breaking**: Remove `on-load` and use a new DOM ID based DOM tracking system. Requires ES5 support for getters. | ||
| * **Breaking**: Remove `_load` and `_unload` methods. You have to wrap instances of `cache-component` with `on-load` on your own now. | ||
| * **Added**: Add `_didUpdate` hook so you can call DOM methods after the component updates. Handy for updating a scroll position. | ||
| ## 4.0.2 - 2017-05-05 | ||
| * Run _unload before we clear internal references, allowing you to clean up event listeners on `this._element` and anything else you want to do. | ||
| ## 4.0.1 - 2017-04-10 | ||
| * Fix instance clobbering bug. This bug showed up when you had two instances of the same component morphing over each other. This would cause the real DOM reference to get lost between the internal _element references of the two instances. The work around was the introduction of ccId which is a unique ID to prevent this. | ||
| ## 4.0.0 - 2017-04-10 | ||
| * use [on-load](https://github.com/shama/on-load) to invalidate `this._element`. Fixes component rendering when they get completely removed from the DOM. | ||
| * added `_load` and `_unload` methods to allow you to run code when the DOM is mounted and unmounted. | ||
| * handle morphing internally, and ALWAYSE return a proxy node. There is no other way. | ||
| ## 3.0.0 - 2017-04-10 | ||
| * initial release | ||
| [ol]: https://github.com/shama/on-load | ||
| [cc]: https://github.com/hypermodules/cache-component | ||
| [bel]: http://ghub.io/bel | ||
| [nm]: http://ghub.io/nanomorph | ||
| [getter]: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/get |
@@ -21,3 +21,3 @@ // // adapted from https://github.com/timwis/choo-leaflet-demo/blob/master/src/map.js | ||
| Leaflet.prototype._render = function (coords) { | ||
| Leaflet.prototype.createElement = function (coords) { | ||
| this.coords = coords | ||
@@ -31,3 +31,3 @@ return html` | ||
| Leaflet.prototype._update = function (coords) { | ||
| Leaflet.prototype.update = function (coords) { | ||
| if (!this.map) return this._log.warn('missing map', 'failed to update') | ||
@@ -45,3 +45,3 @@ if (coords[0] !== this.coords[0] || coords[1] !== this.coords[1]) { | ||
| Leaflet.prototype._willRender = function (el) { | ||
| Leaflet.prototype.beforerender = function (el) { | ||
| var coords = this.coords | ||
@@ -61,3 +61,3 @@ this._log.info('create-map', coords) | ||
| Leaflet.prototype._load = function () { | ||
| Leaflet.prototype.load = function () { | ||
| this._log.info('load') | ||
@@ -67,3 +67,3 @@ this.map.invalidateSize() | ||
| Leaflet.prototype._unload = function () { | ||
| Leaflet.prototype.unload = function () { | ||
| this._log.info('unload') | ||
@@ -70,0 +70,0 @@ |
32
index.js
@@ -17,4 +17,4 @@ var document = require('global/document') | ||
| this._proxy = null | ||
| this._args = [] | ||
| this._loaded = false // Used to debounce on-load when child-reordering | ||
| this._rootNodeName = null | ||
@@ -39,9 +39,8 @@ this._handleLoad = this._handleLoad.bind(this) | ||
| if (!this._hasWindow) { | ||
| return this._render.apply(this, args) | ||
| return this.createElement.apply(this, args) | ||
| } else if (this.element) { | ||
| var shouldUpdate = this._update.apply(this, args) | ||
| var shouldUpdate = this.update.apply(this, args) | ||
| if (shouldUpdate) { | ||
| this._args = args | ||
| morph(this.element, this._handleRender(args)) | ||
| if (this._didUpdate) window.requestAnimationFrame(function () { self._didUpdate(self.element) }) | ||
| if (this.afterupdate) window.requestAnimationFrame(function () { self.afterupdate(self.element) }) | ||
| } | ||
@@ -52,7 +51,6 @@ if (!this._proxy) { this._proxy = this._createProxy() } | ||
| this._ncID = makeID() | ||
| this._args = args | ||
| this._proxy = null | ||
| var el = this._handleRender(args) | ||
| if (this._willRender) this._willRender(el) | ||
| if (this._load || this._unload) { | ||
| if (this.beforerender) this.beforerender(el) | ||
| if (this.load || this.unload) { | ||
| onload(el, this._handleLoad, this._handleUnload, this) | ||
@@ -65,4 +63,6 @@ } | ||
| Nanocomponent.prototype._handleRender = function (args) { | ||
| var el = this._render.apply(this, args) | ||
| assert(el instanceof window.HTMLElement, 'nanocomponent: _render should return a DOM node') | ||
| var el = this.createElement.apply(this, args) | ||
| if (!this._rootNodeName) this._rootNodeName = el.nodeName | ||
| assert(el instanceof window.HTMLElement, 'nanocomponent: createElement should return a DOM node') | ||
| assert.equal(this._rootNodeName, el.nodeName, 'nanocomponent: root node types cannot differ between re-renders') | ||
| return this._brandNode(this._ensureID(el)) | ||
@@ -97,3 +97,3 @@ } | ||
| this._loaded = true | ||
| if (this._load) window.requestAnimationFrame(function () { self._load() }) | ||
| if (this.load) window.requestAnimationFrame(function () { self.load() }) | ||
| } | ||
@@ -105,11 +105,11 @@ | ||
| this._loaded = false | ||
| if (this._unload) window.requestAnimationFrame(function () { self._unload() }) | ||
| if (this.unload) window.requestAnimationFrame(function () { self.unload() }) | ||
| } | ||
| Nanocomponent.prototype._render = function () { | ||
| throw new Error('nanocomponent: _render should be implemented!') | ||
| Nanocomponent.prototype.createElement = function () { | ||
| throw new Error('nanocomponent: createElement should be implemented!') | ||
| } | ||
| Nanocomponent.prototype._update = function () { | ||
| throw new Error('nanocomponent: _update should be implemented!') | ||
| Nanocomponent.prototype.update = function () { | ||
| throw new Error('nanocomponent: update should be implemented!') | ||
| } |
| { | ||
| "name": "nanocomponent", | ||
| "version": "6.0.0-0", | ||
| "version": "6.0.0-1", | ||
| "description": "Native DOM components that pair nicely with DOM diffing algorithms", | ||
| "main": "index.js", | ||
| "scripts": { | ||
| "deps": "dependency-check . && dependency-check . --extra --no-dev", | ||
| "test": "standard *.js && npm run deps && NODE_ENV=test node test | tap-format-spec", | ||
| "test": "run-s test:*", | ||
| "test:deps": "dependency-check . && dependency-check . --extra --no-dev", | ||
| "test:node": "NODE_ENV=test node test/node.js | tap-format-spec", | ||
| "test:browser": "browserify test/browser.js | tape-run | tap-format-spec", | ||
| "test:lint": "standard *.js", | ||
| "start": "bankai start example" | ||
@@ -45,2 +48,3 @@ }, | ||
| "bel": "^5.0.0", | ||
| "browserify": "^14.4.0", | ||
| "choo": "^5.6.2", | ||
@@ -51,8 +55,10 @@ "choo-log": "^7.0.1", | ||
| "leaflet": "^1.1.0", | ||
| "microbounce": "^1.0.0", | ||
| "nanologger": "^1.2.0", | ||
| "npm-run-all": "^4.0.2", | ||
| "on-idle": "^3.1.0", | ||
| "standard": "^10.0.0", | ||
| "tape": "^4.6.0", | ||
| "microbounce": "^1.0.0" | ||
| "tape": "^4.7.0", | ||
| "tape-run": "^3.0.0" | ||
| } | ||
| } |
113
README.md
@@ -24,3 +24,3 @@ # nanocomponent [![stability][0]][1] | ||
| if (!(this instanceof Button)) return new Button() | ||
| this._color = null | ||
| this.color = null | ||
| Nanocomponent.call(this) | ||
@@ -30,4 +30,4 @@ } | ||
| Button.prototype._render = function (color) { | ||
| this._color = color | ||
| Button.prototype.createElement = function (color) { | ||
| this.color = color | ||
| return html` | ||
@@ -40,5 +40,5 @@ <button style="background-color: ${color}"> | ||
| // Override default shallow compare _update function | ||
| Button.prototype._update = function (newColor) { | ||
| return newColor !== this._color | ||
| // Implement conditional rendering | ||
| Button.prototype.update = function (newColor) { | ||
| return newColor !== this.color | ||
| } | ||
@@ -106,13 +106,19 @@ ``` | ||
| // Bind the method so it can be passed around | ||
| this._handleClick = this._handleClick.bind(this) | ||
| this.handleClick = this.handleClick.bind(this) | ||
| } | ||
| Component.prototype = Object.create(Nanocomponent.prototype) | ||
| Component.prototype._handleClick = function () { | ||
| Component.prototype.handleClick = function (ev) { | ||
| console.log('element is', this.element) | ||
| } | ||
| Component.prototype._render = function () { | ||
| return html`<div>My component</div>` | ||
| Component.prototype.createElement = function () { | ||
| return html`<button onClick=${this.handleClick}> | ||
| My component | ||
| </button>` | ||
| } | ||
| Component.prototype.update = function () { | ||
| return false // Never re-render | ||
| } | ||
| ``` | ||
@@ -132,7 +138,7 @@ | ||
| super() | ||
| this._color = null | ||
| this.color = null | ||
| } | ||
| _render (color) { | ||
| this._color = color | ||
| createElement (color) { | ||
| this.color = color | ||
| return html` | ||
@@ -145,4 +151,4 @@ <div style="background-color: ${color}"> | ||
| _update (newColor) { | ||
| return newColor !== this._color | ||
| update (newColor) { | ||
| return newColor !== this.color | ||
| } | ||
@@ -164,20 +170,20 @@ } | ||
| Nanocomponent.call(this) | ||
| this._text = '' | ||
| this.text = '' | ||
| } | ||
| Component.prototype = Object.create(Nanocomponent.prototype) | ||
| Component.prototype._render = function (text) { | ||
| this._text = text | ||
| Component.prototype.createElement = function (text) { | ||
| this.text = text | ||
| return html`<h1>${text}</h1>` | ||
| } | ||
| Component.prototype._update = function (text) { | ||
| if (text !== this._text) { | ||
| this._text = text | ||
| this.element.innerText = this._text // Directly update the element | ||
| Component.prototype.update = function (text) { | ||
| if (text !== this.text) { | ||
| this.text = text | ||
| this.element.innerText = this.text // Directly update the element | ||
| } | ||
| return false // Don't call _render again | ||
| return false // Don't call createElement again | ||
| } | ||
| Component.prototype._unload = function (text) { | ||
| Component.prototype.unload = function (text) { | ||
| console.log('No longer mounted on the DOM!') | ||
@@ -200,15 +206,15 @@ } | ||
| Nanocomponent.call(this) | ||
| this._button1 = new Button () | ||
| this._button2 = new Button () | ||
| this._button3 = new Button () | ||
| this.button1 = new Button () | ||
| this.button2 = new Button () | ||
| this.button3 = new Button () | ||
| } | ||
| Component.prototype = Object.create(Nanocomponent.prototype) | ||
| Component.prototype._render = function (state) { | ||
| var colorArray = this._shapeData(state) | ||
| Component.prototype.createElement = function (state) { | ||
| var colorArray = shapeData(state) | ||
| return html` | ||
| <div> | ||
| ${this._button1.render(colorArray[0])} | ||
| ${this._button2.render(colorArray[1])} | ||
| ${this._button3.render(colorArray[2])} | ||
| ${this.button1.render(colorArray[0])} | ||
| ${this.button2.render(colorArray[1])} | ||
| ${this.button3.render(colorArray[2])} | ||
| </div> | ||
@@ -218,11 +224,12 @@ ` | ||
| Component.prototype._update = function (state) { | ||
| var colorArray = this._shapeData(state) // process app specific data in a container | ||
| this._button1.render(colorArray[0]) // pass processed data to owned children components | ||
| this._button2.render(colorArray[1]) | ||
| this._button3.render(colorArray[2]) | ||
| Component.prototype.update = function (state) { | ||
| var colorArray = shapeData(state) // process app specific data in a container | ||
| this.button1.render(colorArray[0]) // pass processed data to owned children components | ||
| this.button2.render(colorArray[1]) | ||
| this.button3.render(colorArray[2]) | ||
| return false // always return false when mounted | ||
| } | ||
| Component.prototype._shapeData = function (state) { | ||
| // Some arbitrary data shaping function | ||
| function shapeData (state) { | ||
| return [state.colors.color1, state.colors.color2, state.colors.color3] | ||
@@ -284,3 +291,3 @@ } | ||
| ### `component.render([…arguments])` | ||
| ### `component.render([arguments…])` | ||
| Render the component. Returns a proxy node if already mounted on the DOM. Proxy | ||
@@ -294,29 +301,29 @@ nodes make it so DOM diffing algorithms leave the element alone when diffing. | ||
| ### `DOMNode = Nanocomponent.prototype._render([arguments…])` | ||
| ### `DOMNode = Nanocomponent.prototype.createElement([arguments…])` | ||
| __Must be implemented.__ Component specific render function. Optionally cache | ||
| argument values here. Run anything here that needs to run along side node | ||
| rendering. Must return a DOMNode. Use `_willRender` to run code after | ||
| `_render` when the component is unmounted. | ||
| rendering. Must return a DOMNode. Use `beforerender` to run code after | ||
| `createElement` when the component is unmounted. Previously named `_render`. Arguments that passed to `render` are passed to `createElement`. Elements returned from `createElement` must always return the same root node type. | ||
| ### `Boolean = Nanocomponent.prototype._update([arguments…])` | ||
| ### `Boolean = Nanocomponent.prototype.update([arguments…])` | ||
| __Must be implemented.__ Return a boolean to determine if | ||
| `prototype._render()` should be called. The `_update` method is analogous to | ||
| `prototype.createElement()` should be called. The `update` method is analogous to | ||
| React's `shouldComponentUpdate`. Called only when the component is mounted in | ||
| the DOM tree. | ||
| the DOM tree. Arguments passed to `render` are passed to `update`. | ||
| ### `Nanocomponent.prototype._willRender(el)` | ||
| A function called right after `_render` returns with `el`, but before the fully rendered | ||
| element is returned to the `render` caller. Run any first render hooks here. The `_load` and | ||
| `_unload` hooks are added at this stage. | ||
| ### `Nanocomponent.prototype.beforerender(el)` | ||
| A function called right after `createElement` returns with `el`, but before the fully rendered | ||
| element is returned to the `render` caller. Run any first render hooks here. The `load` and | ||
| `unload` hooks are added at this stage. | ||
| ### `Nanocomponent.prototype._load(el)` | ||
| ### `Nanocomponent.prototype.load(el)` | ||
| Called when the component is mounted on the DOM. Uses [on-load][onload] under | ||
| the hood. | ||
| ### `Nanocomponent.prototype._unload(el)` | ||
| ### `Nanocomponent.prototype.unload(el)` | ||
| Called when the component is removed from the DOM. Uses [on-load][onload] under | ||
| the hood. | ||
| ### `Nanocomponent.prototype._didUpdate(el)` | ||
| Called after a mounted component updates (e.g. `_update` returns true). You can use this hook to call | ||
| ### `Nanocomponent.prototype.afterupdate(el)` | ||
| Called after a mounted component updates (e.g. `update` returns true). You can use this hook to call | ||
| `element.scrollIntoView` or other dom methods on the mounted component. | ||
@@ -323,0 +330,0 @@ |
Sorry, the diff of this file is not supported yet
New alerts
License Policy Violation
LicenseThis 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
LicenseThis 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 riskPackage 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
New author
Supply chain riskA new npm collaborator published a version of the package for the first time. New collaborators are usually benign additions to a project, but do indicate a change to the security surface area of a package.
Found 1 instance in 1 package
Improved metrics
- Number of package files
- increased by9.09%
12
- Lines of code
- increased by3.21%
257
- Number of lines in readme file
- increased by1.97%
363
- Number of medium supply chain risk alerts
- decreased by-100%
0
Worsened metrics
- Total package byte prevSize
- decreased by-0.63%
29431
- Dev dependency count
- increased by23.08%
16
No dependency changes