Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More
Socket
Sign inDemoInstall
Socket

nanocomponent

Package Overview
Dependencies
Maintainers
3
Versions
44
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

nanocomponent - npm Package Versions

1245

6.1.0

Diff

Changelog

Source

6.1.0 - 2017-08-14

  • Added: nanotiming timings. You can name component instances and it will emit timing information. See nanocomponent/pull/47
bret
published 6.0.0 •

Changelog

Source

6.0.0 - 2017-08-09

🎉 nanocomponent and [cache-component][cc] are merged into one module: nanocomponent@6.0.0 🎉.

Be sure to read the README so that you get an understanding of the new API, but here is a quick summary of what has changed from the perspective of both modules:

Changes since cache-component@5

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 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.
cache-component@5 to nanocomponent@6 upgrade guide:
  • 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:
var html = require('choo/html')
var Component = require('nanocomponent')
var compare = require('nanocomponent/compare')

class Meta extends Component {
  constructor () {
    super()

    this.arguments = []
  }

  createElement (title, artist, album) {
    this.arguments = arguments // cache a copy of arguments

    return html`
      <div>
        <p>${title}</p>
        <p>
          ${artist} - ${album}
        </p>
      </div>
    `
  }

  // Implement this to recreate cache-component@5
  // behavior when update was not implemented
  update () {
    return compare(arguments, this.arguments)
  }
}

  • 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

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.
  • 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.
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. 🗺
  • 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 🙌
bret
published 6.0.0-1 •

bret
published 6.0.0-0 •

yoshuawuyts
published 5.0.3 •

juliangruber
published 5.0.2 •

juliangruber
published 5.0.1 •

juliangruber
published 5.0.0 •

juliangruber
published 4.0.3 •

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

Packages

npm

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc