JSPM

@semibran/patch

1.0.0
  • ESM via JSPM
  • ES Module Entrypoint
  • Export Map
  • Keywords
  • License
  • Repository URL
  • TypeScript Types
  • README
  • Created
  • Published
  • Downloads 1
  • Score
    100M100P100Q15425F
  • License MIT

efficient patch operation for HTML elements

Package Exports

  • @semibran/patch

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (@semibran/patch) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

patch

efficient patch operation for HTML elements

let element = document.createElement("h1")
element.innerText = "hello world"
document.body.appendChild(element)

patch(element, {
  tag: "h1",
  attributes: {},
  children: [ "goodbye world" ]
})

usage

npm badge

To use this module in your project, package your code together using a bundler like rollup together with rollup-plugin-node-resolve.

result = patch(element, node)

Alters the properties of element to match those specified by node, and returns result.

  • element: the HTMLElement to be patched
  • node: a virtual node of the structure { tag, attributes, children } against which element is compared

Note that if element.tagName and node.tag are different, result will be a brand new element. This behavior is caused by an interesting property of the HTMLElement interface that prevents an element's tag from being changed once it is created. The only workaround is to instantiate a new element to replace the old one, meaning that you may want to reset element to the return value of the patch function every time it is called if there is any chance of node.tag being changed. Otherwise, you run the risk of "jamming" the element in question, reaching a state in which any changes made to element are no longer reflected onscreen.