minimalist virtual dom library

Overview

petit-dom

A minimalist virtual DOM library.

  • Supports HTML & SVG elements.
  • Supports Render functions and Fragments.
  • Custom components allows to build your own abstraction around DOM elements.
  • Directives allows you to attach custom behavior to DOM elements.

Installation

The library is provided as a set of ES modules. You can install using npm or yarn and then import from petit-dom (see example below).

$ npm install --save petit-dom

or

$ yarn add petit-dom

Note however no transpiled build is provided. The library will work with all recent versions of Node and major browsers. If you're targeting older platforms, make sure to transpile to the desired ES version.

To run the examples, you can run a local web server (like npm http-server module) from the root folder of the project. Since all example use ES6 modules, you can simply navigate to the example you want and load the desired HTML file.

Usage

If you're using Babel you can use JSX syntax by configuring the jsx runtime

{
  "presets": [
    [
      "@babel/preset-react",
      { "runtime": "automatic", "importSource": "petit-dom" }
    ]
  ]
}
import { render } from "petit-dom";

//  assuming your HTML contains a node with "root" id
const parentNode = document.getElementById("root");

// mount
render(<h1>Hello world!</h1>, parentNode);

// patch
render(<h1>Hello again</h1>, parentNode);

Alternatively you can use the classic Babel transform via /* @jsx h */ on the top. You can also use the raw h function calls if you want, see examples folder for usage.

petit-dom also supports render functions

import { render } from "petit-dom";

function Box(props) {
  return (
    <div>
      <h1>{props.title}</h1>
      <p>{props.children}</p>
    </div>
  );
}

render(<Box title="Fancy box">Put your content here</Box>, parentNode);

render functions behave like React pure components. Patching with the same arguments will not cause any re-rendering. You can also attach a shouldUpdate function to the render function to customize the re-rendering behavior (By default props are tested for shallow equality).

Custom components

Besides HTML/SVG tag names, fragments and render fucntions, the h function also accepts any object with the following signature

{
  mount(self);
  patch(self);
  unmount(self);
}

Each of the 3 functions will be called by the library at the moment suggested by its name.

The self argument which is an aboject holding the following properties:

  • render(...): To create/update DOM content for the component
  • props: the current props passed to the JSX element (or h function)
  • oldProps: the previous props, it's value is undefined inside mount

You can also attach arbitrary properties to the object, they will persist between different invocations.

See examples folder for how to define some custom components.

Directives

You can also attach custom behaviors to DOM nodes. Directives allows you to obtain references to DOM nodes and manage their lifecycle.

A directive is an object with the current interface

{
  mount(domElement, value);
  patch(domElement, newValue, oldValue);
  unmount(element, lastValue);
}

There's an example of a simple log directive in the examples folder.

API

h(type, props, ...children)

Creates a virtual node.

  • type: a string (HTML or SVG tag name), or a custom component (see above)

  • props: in the case of HTML/SVG tags, this corresponds to the attributes/properties to be set in the real DOM node. In the case of components, { ...props, children } is passed to the appropriate component function (mount or patch).

render(vnode, parentDom, options = {})

renders a virtual node into the DOM. The function will initially create a DOM node as specified the virtual node vnode and append it to the children ofparentDOM. Subsequent calls will update the previous DOM node (or replace it if it's a different tag).

Optionally, you can use options to pass custom directives, for example:

  let log = { ... }, // defines a log directive
  render(<Something />, parent, { directives: { log } });
Comments
  • Custom attributes doesn't work

    Custom attributes doesn't work

    Custom attributes such as inline string events and data attributes doesn't work.

    vnode = h('div', { className:123, 'data-columns':123, onclick:"function(){alert('hello')}"}, ['text'])

    https://developer.mozilla.org/en-US/docs/Learn/HTML/Howto/Use_data_attributes

    Also using the word class is fine if it's inside an object, for instance https://github.com/picodom/picodom doesn't use className.

    enhancement 
    opened by cjh9 9
  • Rendering array of vnodes

    Rendering array of vnodes

    Thanks for this great work! Is this the fastest virtual dom on the web? :)

    Is there an easy way to render an array of vnodes straight to document.body for example? Or does this require separate mounting of each element?

    enhancement 
    opened by luwes 9
  • keep input-cursor position between patches?

    keep input-cursor position between patches?

    Please see this example on codepen: https://codepen.io/zaceno/pen/BxaENr?editors=0010

    I'm rendering a plain text-input, and expect to capture the value every oninput. Each time I update (patch) the ui. (A quite normal scenario, I think. For every input, you want to do some validation, helpful formatting, et c. Hence: update the ui).

    It works fine except when you try to enter something in the middle or beginning of the input. In that case, the cursor jumps to the end of the input. Not entirely unexpected, since I'm rerendering and the previous cursor position isn't kept track of anywhere.

    So, I could correct for this by using a custom component class where I can store the cursor position in the component state between renders. But that seems like overkill for something so trivial.

    Is there some simpler way I could handle this, so I can still use a plain h('input', {...}) without making a component? If not, may I suggest keeping track of cursor position as a feature-request?

    enhancement 
    opened by zaceno 5
  • Cannot read property 'childNodes' of undefined

    Cannot read property 'childNodes' of undefined

    Consider this runnable example:

    <body>
    <div id="root"></div>
    <script type="module">
        
    import {h, patch, mount} from 'https://unpkg.com/petit-dom?module'
    
    var oldVnode = h('div', {}, [null,null,null,h('style', {}, []),h('div', {}, [h('div', {}, [h('div', {}, [h('div', {}, []),h('div', {}, [])]),h('div', {}, [h('div', {}, []),h('div', {}, [])]),h('div', {}, [h('div', {}, []),h('div', {}, [])])]),h('div', {}, [h('div', {}, [null]),null,null,h('div', {}, [null])])])])
    
    var newVnode = h('div', {}, [null,null,null,h('style', {}, []),h('div', {}, [h('div', {}, [h('div', {}, [h('div', {}, []),h('div', {}, [])]),h('div', {}, [h('div', {}, []),h('div', {}, [])]),h('div', {}, [h('div', {}, []),h('div', {}, [])])]),h('div', {}, [h('div', {}, [null]),null,null,h('div', {}, [null])])])])
    
    var root = document.getElementById('root')
    root.appendChild(mount(oldVnode))
    patch(newVnode, oldVnode, root)
    
    </script>
    </body>
    

    Output

    vdom.js?module:238 Uncaught TypeError: Cannot read property 'childNodes' of undefined
        at patchChildren (vdom.js?module:238)
        at patch (vdom.js?module:85)
        at patchInPlace (vdom.js?module:216)
        at patchChildren (vdom.js?module:255)
        at patch (vdom.js?module:85)
        at bugProgramTemplatePatchFalied.html:12
    
    opened by cjh9 4
  • Support for JSX Fragment

    Support for JSX Fragment

    Is there a way to use fragments with petit-dom?

    export default <>
      <h1></h1>
      <h2></h2>
    </>;
    

    I'm trying to use petit-dom to render into a shadow-dom, and it works great, but having a single parent is not ideal because my shadow dom ends up having an unnecessary wrapper element. I know other vdom libraries support this, but I'm not sure about the tradeoffs, if any.

    opened by elclanrs 3
  • Null doesn't remove previous node

    Null doesn't remove previous node

    Consider this runnable example:

    <body>
    <div id="root"></div>
    <script type="module">
        
    import {h, patch, mount} from 'https://unpkg.com/petit-dom?module'
    
    var oldVnode = h('div', {}, ['Hello there!'])
    var newVnode = h('div', {}, [null])
    
    var mounted = mount(oldVnode)
    var root = document.getElementById('root')
    root.appendChild(mounted)
    
    patch(newVnode, oldVnode, mounted)
    
    </script>
    </body>
    

    Output

    <div id="root"><div>Hello there!</div></div>
    

    Shouldn't this remove the textnode? So you can do isSomething ? Vdom() : null

    opened by cjh9 3
  • Lifecycle and conditional rendering

    Lifecycle and conditional rendering

    • Optionally patch and mount with lifecycle events directly on each dom element to allow for more complex animations within components.
    • Allow conditional rendering for text like list.length && ''+list.length

    If a dom element has an onremoved function attached, it will get called when the element is about to be removed. You have to manually call done when the transition has finished in order to remove the element. It will recursively check if any of the descendants have onremove methods, and you can optionally transition out them as well.

    opened by cjh9 3
  • broken vdom indexOf ?

    broken vdom indexOf ?

    The following would log -1 in console, instead of 6:

    function indexOf(a, suba, aStart, aEnd, subaStart, subaEnd, eq) {
      var j = subaStart,
        k = -1;
      var subaLen = subaEnd - subaStart + 1;
      while (aStart <= aEnd && aEnd - aStart + 1 >= subaLen) {
        if (eq(a[aStart], suba[j])) {
          if (k < 0) k = aStart;
          j++;
          if (j > subaEnd) return k;
        } else {
          k = -1;
          j = subaStart;
        }
        aStart++;
      }
      return -1;
    }
    
    var slong = 'happy cat in the black';
    var sshort = 'cat in the';
    
    indexOf(
      slong,
      sshort,
      0,
      slong.length - 1,
      0,
      sshort.length - 1,
      (a, b) => a === b
    );
    

    However, with slong = 'cat in the' and sshort = 'in' the result is 4.

    The reason is that the char by char parse stops when a match is found but, while keep looping, aEnd - aStart + 1 >= subaLen becomes false so that last part of the string is never checked if the right boundary is not as long as the searched string itself.

    Is this meant to behave this way? If that's the case, wouldn't be wiser to call the function halfIndexOf ?

    Thanks for any sort of clarification

    bug 
    opened by WebReflection 3
  • Unmount of component not called?

    Unmount of component not called?

    Hi!

    See here: https://codepen.io/zaceno/pen/WJwmge

    I'm essentially trying to define a component <FadeOut> which ... you guessed it: fades out it's content.

    My idea was to make a basic "pass-through" component like this:

    class FadeOut {
        mount(_, child) {
            this.vnode = child
            return mount(child)
        }
        patch (_, __, ___, child) {
            var oldVNode = this.vnode
            this.vnode = child
            return patch(this.vnode, oldVNode)
        }
        unmount (el) {
            console.log('UNMOUNTING', this)
        }
    }
    
    

    ...And then (hopefully) I would somehow be able to access the element of the child (perhaps by capturing it earlier in mount or patch) so I could fade it out slowly before removing it for real.

    But apparently unmount is not even called! Is this a bug, or am I missing something?

    bug 
    opened by zaceno 3
  • Receive old props and content in component patch method

    Receive old props and content in component patch method

    It seems that the only way to keep track of changes to props in component (e.i. why patch was called) is to put old data on DOM object custom property, which seems wrong.

    Would it makes sense to pass old props / content to patch method of custom component? Something like componentInstance.patch(domNode, newProps, newContent, oldProps, oldContent). This way developer could figure out what exactly has changed and apply targeted patch on DOM.

    I realize this leads to a wider topic of component internal state, which defeats the purpose of micro library. You probably want to keep it simple. On the other hand old props and content are available when patch is called anyway, so why not?

    I could make a PR if you think this is a good idea.

    enhancement 
    opened by andriichumak 3
  • Why remove O (nlogn) algorithm?

    Why remove O (nlogn) algorithm?

    I see that the new version has become o (n) algorithm. Why?

    In the past, I always thought that the advantage of Petit is that it uses the algorithm of the longest common subsequence, why to remove it?

    What is the trade-off, or is there any benchmark for you to do so?

    question 
    opened by yisar 2
  • Bump qs from 6.5.2 to 6.5.3

    Bump qs from 6.5.2 to 6.5.3

    Bumps qs from 6.5.2 to 6.5.3.

    Changelog

    Sourced from qs's changelog.

    6.5.3

    • [Fix] parse: ignore __proto__ keys (#428)
    • [Fix] utils.merge: avoid a crash with a null target and a truthy non-array source
    • [Fix] correctly parse nested arrays
    • [Fix] stringify: fix a crash with strictNullHandling and a custom filter/serializeDate (#279)
    • [Fix] utils: merge: fix crash when source is a truthy primitive & no options are provided
    • [Fix] when parseArrays is false, properly handle keys ending in []
    • [Fix] fix for an impossible situation: when the formatter is called with a non-string value
    • [Fix] utils.merge: avoid a crash with a null target and an array source
    • [Refactor] utils: reduce observable [[Get]]s
    • [Refactor] use cached Array.isArray
    • [Refactor] stringify: Avoid arr = arr.concat(...), push to the existing instance (#269)
    • [Refactor] parse: only need to reassign the var once
    • [Robustness] stringify: avoid relying on a global undefined (#427)
    • [readme] remove travis badge; add github actions/codecov badges; update URLs
    • [Docs] Clean up license text so it’s properly detected as BSD-3-Clause
    • [Docs] Clarify the need for "arrayLimit" option
    • [meta] fix README.md (#399)
    • [meta] add FUNDING.yml
    • [actions] backport actions from main
    • [Tests] always use String(x) over x.toString()
    • [Tests] remove nonexistent tape option
    • [Dev Deps] backport from main
    Commits
    • 298bfa5 v6.5.3
    • ed0f5dc [Fix] parse: ignore __proto__ keys (#428)
    • 691e739 [Robustness] stringify: avoid relying on a global undefined (#427)
    • 1072d57 [readme] remove travis badge; add github actions/codecov badges; update URLs
    • 12ac1c4 [meta] fix README.md (#399)
    • 0338716 [actions] backport actions from main
    • 5639c20 Clean up license text so it’s properly detected as BSD-3-Clause
    • 51b8a0b add FUNDING.yml
    • 45f6759 [Fix] fix for an impossible situation: when the formatter is called with a no...
    • f814a7f [Dev Deps] backport from main
    • Additional commits viewable in compare view

    Dependabot compatibility score

    Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.


    Dependabot commands and options

    You can trigger Dependabot actions by commenting on this PR:

    • @dependabot rebase will rebase this PR
    • @dependabot recreate will recreate this PR, overwriting any edits that have been made to it
    • @dependabot merge will merge this PR after your CI passes on it
    • @dependabot squash and merge will squash and merge this PR after your CI passes on it
    • @dependabot cancel merge will cancel a previously requested merge and block automerging
    • @dependabot reopen will reopen this PR if it is closed
    • @dependabot close will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually
    • @dependabot ignore this major version will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this minor version will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)
    • @dependabot use these labels will set the current labels as the default for future PRs for this repo and language
    • @dependabot use these reviewers will set the current reviewers as the default for future PRs for this repo and language
    • @dependabot use these assignees will set the current assignees as the default for future PRs for this repo and language
    • @dependabot use this milestone will set the current milestone as the default for future PRs for this repo and language

    You can disable automated security fix PRs for this repo from the Security Alerts page.

    dependencies 
    opened by dependabot[bot] 0
  • Bump minimatch from 3.0.4 to 3.1.2

    Bump minimatch from 3.0.4 to 3.1.2

    Bumps minimatch from 3.0.4 to 3.1.2.

    Commits

    Dependabot compatibility score

    Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.


    Dependabot commands and options

    You can trigger Dependabot actions by commenting on this PR:

    • @dependabot rebase will rebase this PR
    • @dependabot recreate will recreate this PR, overwriting any edits that have been made to it
    • @dependabot merge will merge this PR after your CI passes on it
    • @dependabot squash and merge will squash and merge this PR after your CI passes on it
    • @dependabot cancel merge will cancel a previously requested merge and block automerging
    • @dependabot reopen will reopen this PR if it is closed
    • @dependabot close will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually
    • @dependabot ignore this major version will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this minor version will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)
    • @dependabot use these labels will set the current labels as the default for future PRs for this repo and language
    • @dependabot use these reviewers will set the current reviewers as the default for future PRs for this repo and language
    • @dependabot use these assignees will set the current assignees as the default for future PRs for this repo and language
    • @dependabot use this milestone will set the current milestone as the default for future PRs for this repo and language

    You can disable automated security fix PRs for this repo from the Security Alerts page.

    dependencies 
    opened by dependabot[bot] 0
  • Bump jsdom from 15.2.1 to 16.5.0

    Bump jsdom from 15.2.1 to 16.5.0

    Bumps jsdom from 15.2.1 to 16.5.0.

    Release notes

    Sourced from jsdom's releases.

    Version 16.5.0

    • Added window.queueMicrotask().
    • Added window.event.
    • Added inputEvent.inputType. (diegohaz)
    • Removed ondragexit from Window and friends, per a spec update.
    • Fixed the URL of about:blank iframes. Previously it was getting set to the parent's URL. (SimonMueller)
    • Fixed the loading of subresources from the filesystem when they had non-ASCII filenames.
    • Fixed the hidden="" attribute to cause display: none per the user-agent stylesheet. (ph-fritsche)
    • Fixed the new File() constructor to no longer convert / to :, per a pending spec update.
    • Fixed mutation observer callbacks to be called with the MutationObserver instance as their this value.
    • Fixed <input type=checkbox> and <input type=radio> to be mutable even when disabled, per a spec update.
    • Fixed XMLHttpRequest to not fire a redundant final progress event if a progress event was previously fired with the same loaded value. This would usually occur with small files.
    • Fixed XMLHttpRequest to expose the Content-Length header on cross-origin responses.
    • Fixed xhr.response to return null for failures that occur during the middle of the download.
    • Fixed edge cases around passing callback functions or event handlers. (ExE-Boss)
    • Fixed edge cases around the properties of proxy-like objects such as localStorage or dataset. (ExE-Boss)
    • Fixed a potential memory leak with custom elements (although we could not figure out how to trigger it). (soncodi)

    Version 16.4.0

    • Added a not-implemented warning if you try to use the second pseudo-element argument to getComputedStyle(), unless you pass a ::part or ::slotted pseudo-element, in which case we throw an error per the spec. (ExE-Boss)
    • Improved the performance of repeated access to el.tagName, which also indirectly improves performance of selector matching and style computation. (eps1lon)
    • Fixed form.elements to respect the form="" attribute, so that it can contain non-descendant form controls. (ccwebdesign)
    • Fixed el.focus() to do nothing on disconnected elements. (eps1lon)
    • Fixed el.focus() to work on SVG elements. (zjffun)
    • Fixed removing the currently-focused element to move focus to the <body> element. (eps1lon)
    • Fixed imgEl.complete to return true for <img> elements with empty or unset src="" attributes. (strager)
    • Fixed imgEl.complete to return true if an error occurs loading the <img>, when canvas is enabled. (strager)
    • Fixed imgEl.complete to return false if the <img> element's src="" attribute is reset. (strager)
    • Fixed the valueMissing validation check for <input type="radio">. (zjffun)
    • Fixed translate="" and draggable="" attribute processing to use ASCII case-insensitivity, instead of Unicode case-insensitivity. (zjffun)

    Version 16.3.0

    • Added firing of focusin and focusout when using el.focus() and el.blur(). (trueadm)
    • Fixed elements with the contenteditable="" attribute to be considered as focusable. (jamieliu386)
    • Fixed window.NodeFilter to be per-Window, instead of shared across all Windows. (ExE-Boss)
    • Fixed edge-case behavior involving use of objects with handleEvent properties as event listeners. (ExE-Boss)
    • Fixed a second failing image load sometimes firing a load event instead of an error event, when the canvas package is installed. (strager)
    • Fixed drawing an empty canvas into another canvas. (zjffun)

    Version 16.2.2

    • Updated StyleSheetList for better spec compliance; notably it no longer inherits from Array.prototype. (ExE-Boss)
    • Fixed requestAnimationFrame() from preventing process exit. This likely regressed in v16.1.0.
    • Fixed setTimeout() to no longer leak the closures passed in to it. This likely regressed in v16.1.0. (AviVahl)
    • Fixed infinite recursion that could occur when calling click() on a <label> element, or one of its descendants.
    • Fixed getComputedStyle() to consider inline style="" attributes. (eps1lon)
    • Fixed several issues with <input type="number">'s stepUp() and stepDown() functions to be properly decimal-based, instead of floating point-based.
    • Fixed various issues where updating selectEl.value would not invalidate properties such as selectEl.selectedOptions. (ExE-Boss)
    • Fixed <input>'s src property, and <ins>/<del>'s cite property, to properly reflect as URLs.
    • Fixed window.addEventLister, window.removeEventListener, and window.dispatchEvent to properly be inherited from EventTarget, instead of being distinct functions. (ExE-Boss)
    • Fixed errors that would occur if attempting to use a DOM object, such as a custom element, as an argument to addEventListener.

    ... (truncated)

    Changelog

    Sourced from jsdom's changelog.

    16.5.0

    • Added window.queueMicrotask().
    • Added window.event.
    • Added inputEvent.inputType. (diegohaz)
    • Removed ondragexit from Window and friends, per a spec update.
    • Fixed the URL of about:blank iframes. Previously it was getting set to the parent's URL. (SimonMueller)
    • Fixed the loading of subresources from the filesystem when they had non-ASCII filenames.
    • Fixed the hidden="" attribute to cause display: none per the user-agent stylesheet. (ph-fritsche)
    • Fixed the new File() constructor to no longer convert / to :, per a pending spec update.
    • Fixed mutation observer callbacks to be called with the MutationObserver instance as their this value.
    • Fixed <input type=checkbox> and <input type=radio> to be mutable even when disabled, per a spec update.
    • Fixed XMLHttpRequest to not fire a redundant final progress event if a progress event was previously fired with the same loaded value. This would usually occur with small files.
    • Fixed XMLHttpRequest to expose the Content-Length header on cross-origin responses.
    • Fixed xhr.response to return null for failures that occur during the middle of the download.
    • Fixed edge cases around passing callback functions or event handlers. (ExE-Boss)
    • Fixed edge cases around the properties of proxy-like objects such as localStorage or dataset. (ExE-Boss)
    • Fixed a potential memory leak with custom elements (although we could not figure out how to trigger it). (soncodi)

    16.4.0

    • Added a not-implemented warning if you try to use the second pseudo-element argument to getComputedStyle(), unless you pass a ::part or ::slotted pseudo-element, in which case we throw an error per the spec. (ExE-Boss)
    • Improved the performance of repeated access to el.tagName, which also indirectly improves performance of selector matching and style computation. (eps1lon)
    • Fixed form.elements to respect the form="" attribute, so that it can contain non-descendant form controls. (ccwebdesign)
    • Fixed el.focus() to do nothing on disconnected elements. (eps1lon)
    • Fixed el.focus() to work on SVG elements. (zjffun)
    • Fixed removing the currently-focused element to move focus to the <body> element. (eps1lon)
    • Fixed imgEl.complete to return true for <img> elements with empty or unset src="" attributes. (strager)
    • Fixed imgEl.complete to return true if an error occurs loading the <img>, when canvas is enabled. (strager)
    • Fixed imgEl.complete to return false if the <img> element's src="" attribute is reset. (strager)
    • Fixed the valueMissing validation check for <input type="radio">. (zjffun)
    • Fixed translate="" and draggable="" attribute processing to use ASCII case-insensitivity, instead of Unicode case-insensitivity. (zjffun)

    16.3.0

    • Added firing of focusin and focusout when using el.focus() and el.blur(). (trueadm)
    • Fixed elements with the contenteditable="" attribute to be considered as focusable. (jamieliu386)
    • Fixed window.NodeFilter to be per-Window, instead of shared across all Windows. (ExE-Boss)
    • Fixed edge-case behavior involving use of objects with handleEvent properties as event listeners. (ExE-Boss)
    • Fixed a second failing image load sometimes firing a load event instead of an error event, when the canvas package is installed. (strager)
    • Fixed drawing an empty canvas into another canvas. (zjffun)

    16.2.2

    • Updated StyleSheetList for better spec compliance; notably it no longer inherits from Array.prototype. (ExE-Boss)
    • Fixed requestAnimationFrame() from preventing process exit. This likely regressed in v16.1.0.
    • Fixed setTimeout() to no longer leak the closures passed in to it. This likely regressed in v16.1.0. (AviVahl)
    • Fixed infinite recursion that could occur when calling click() on a <label> element, or one of its descendants.
    • Fixed getComputedStyle() to consider inline style="" attributes. (eps1lon)
    • Fixed several issues with <input type="number">'s stepUp() and stepDown() functions to be properly decimal-based, instead of floating point-based.

    ... (truncated)

    Commits
    • 2d82763 Version 16.5.0
    • 9741311 Fix loading of subresources with Unicode filenames
    • 5e46553 Use domenic's ESLint config as the base
    • 19b35da Fix the URL of about:blank iframes
    • 017568e Support inputType on InputEvent
    • 29f4fdf Upgrade dependencies
    • e2f7639 Refactor create‑event‑accessor.js to remove code duplication
    • ff69a75 Convert JSDOM to use callback functions
    • 19df6bc Update links in contributing guidelines
    • 1e34ff5 Test triage
    • Additional commits viewable in compare view

    Dependabot compatibility score

    Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.


    Dependabot commands and options

    You can trigger Dependabot actions by commenting on this PR:

    • @dependabot rebase will rebase this PR
    • @dependabot recreate will recreate this PR, overwriting any edits that have been made to it
    • @dependabot merge will merge this PR after your CI passes on it
    • @dependabot squash and merge will squash and merge this PR after your CI passes on it
    • @dependabot cancel merge will cancel a previously requested merge and block automerging
    • @dependabot reopen will reopen this PR if it is closed
    • @dependabot close will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually
    • @dependabot ignore this major version will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this minor version will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)
    • @dependabot use these labels will set the current labels as the default for future PRs for this repo and language
    • @dependabot use these reviewers will set the current reviewers as the default for future PRs for this repo and language
    • @dependabot use these assignees will set the current assignees as the default for future PRs for this repo and language
    • @dependabot use this milestone will set the current milestone as the default for future PRs for this repo and language

    You can disable automated security fix PRs for this repo from the Security Alerts page.

    dependencies 
    opened by dependabot[bot] 0
  • Bump path-parse from 1.0.6 to 1.0.7

    Bump path-parse from 1.0.6 to 1.0.7

    Bumps path-parse from 1.0.6 to 1.0.7.

    Commits

    Dependabot compatibility score

    Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.


    Dependabot commands and options

    You can trigger Dependabot actions by commenting on this PR:

    • @dependabot rebase will rebase this PR
    • @dependabot recreate will recreate this PR, overwriting any edits that have been made to it
    • @dependabot merge will merge this PR after your CI passes on it
    • @dependabot squash and merge will squash and merge this PR after your CI passes on it
    • @dependabot cancel merge will cancel a previously requested merge and block automerging
    • @dependabot reopen will reopen this PR if it is closed
    • @dependabot close will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually
    • @dependabot ignore this major version will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this minor version will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)
    • @dependabot use these labels will set the current labels as the default for future PRs for this repo and language
    • @dependabot use these reviewers will set the current reviewers as the default for future PRs for this repo and language
    • @dependabot use these assignees will set the current assignees as the default for future PRs for this repo and language
    • @dependabot use this milestone will set the current milestone as the default for future PRs for this repo and language

    You can disable automated security fix PRs for this repo from the Security Alerts page.

    dependencies 
    opened by dependabot[bot] 0
  • Bump ws from 7.4.4 to 7.4.6

    Bump ws from 7.4.4 to 7.4.6

    Bumps ws from 7.4.4 to 7.4.6.

    Release notes

    Sourced from ws's releases.

    7.4.6

    Bug fixes

    • Fixed a ReDoS vulnerability (00c425ec).

    A specially crafted value of the Sec-Websocket-Protocol header could be used to significantly slow down a ws server.

    for (const length of [1000, 2000, 4000, 8000, 16000, 32000]) {
      const value = 'b' + ' '.repeat(length) + 'x';
      const start = process.hrtime.bigint();
    

    value.trim().split(/ *, */);

    const end = process.hrtime.bigint();

    console.log('length = %d, time = %f ns', length, end - start); }

    The vulnerability was responsibly disclosed along with a fix in private by Robert McLaughlin from University of California, Santa Barbara.

    In vulnerable versions of ws, the issue can be mitigated by reducing the maximum allowed length of the request headers using the --max-http-header-size=size and/or the maxHeaderSize options.

    7.4.5

    Bug fixes

    • UTF-8 validation is now done even if utf-8-validate is not installed (23ba6b29).
    • Fixed an edge case where websocket.close() and websocket.terminate() did not close the connection (67e25ff5).
    Commits
    • f5297f7 [dist] 7.4.6
    • 00c425e [security] Fix ReDoS vulnerability
    • 990306d [lint] Fix prettier error
    • 32e3a84 [security] Remove reference to Node Security Project
    • 8c914d1 [minor] Fix nits
    • fc7e27d [ci] Test on node 16
    • 587c201 [ci] Do not test on node 15
    • f672710 [dist] 7.4.5
    • 67e25ff [fix] Fix case where abortHandshake() does not close the connection
    • 23ba6b2 [fix] Make UTF-8 validation work even if utf-8-validate is not installed
    • Additional commits viewable in compare view

    Dependabot compatibility score

    Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.


    Dependabot commands and options

    You can trigger Dependabot actions by commenting on this PR:

    • @dependabot rebase will rebase this PR
    • @dependabot recreate will recreate this PR, overwriting any edits that have been made to it
    • @dependabot merge will merge this PR after your CI passes on it
    • @dependabot squash and merge will squash and merge this PR after your CI passes on it
    • @dependabot cancel merge will cancel a previously requested merge and block automerging
    • @dependabot reopen will reopen this PR if it is closed
    • @dependabot close will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually
    • @dependabot ignore this major version will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this minor version will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)
    • @dependabot use these labels will set the current labels as the default for future PRs for this repo and language
    • @dependabot use these reviewers will set the current reviewers as the default for future PRs for this repo and language
    • @dependabot use these assignees will set the current assignees as the default for future PRs for this repo and language
    • @dependabot use this milestone will set the current milestone as the default for future PRs for this repo and language

    You can disable automated security fix PRs for this repo from the Security Alerts page.

    dependencies 
    opened by dependabot[bot] 0
Releases(v0.2.2)
Owner
Yassine Elouafi
Yassine Elouafi
Atomico a micro-library for creating webcomponents using only functions, hooks and virtual-dom.

Atomico simplifies learning, workflow and maintenance when creating webcomponents. Scalable and reusable interfaces: with Atomico the code is simpler

Atomico 898 Dec 31, 2022
A Fast & Light Virtual DOM Alternative

hyper(HTML) ?? Community Announcement Please ask questions in the dedicated discussions repository, to help the community around this project grow ♥ A

Andrea Giammarchi 3k Dec 30, 2022
Builds components using a simple and explicit API around virtual-dom

Etch is a library for writing HTML-based user interface components that provides the convenience of a virtual DOM, while at the same time striving to

Atom 553 Dec 15, 2022
Component oriented framework with Virtual dom (fast, stable, with tooling)

Bobril Main site bobril.com Changelog of npm version: https://github.com/Bobris/Bobril/blob/master/CHANGELOG.md Component oriented framework inspired

Boris Letocha 359 Dec 4, 2022
Million is a lightweight (<1kb) Virtual DOM. It's really fast and makes it easy to create user interfaces.

?? Watch Video ?? Read the docs ?? Join our Discord What is Million? Million is a lightweight (<1kb) Virtual DOM. It's really fast and makes it easy t

Derek Jones 5 Aug 24, 2022
An extension of DOM-testing-library to provide hooks into the shadow dom

Why? Currently, DOM-testing-library does not support checking shadow roots for elements. This can be troublesome when you're looking for something wit

Konnor Rogers 28 Dec 13, 2022
Custom Vitest matchers to test the state of the DOM, forked from jest-dom.

vitest-dom Custom Vitest matchers to test the state of the DOM This library is a fork of @testing-library/jest-dom. It shares that library's implement

Chance Strickland 14 Dec 16, 2022
A minimalist Javascript library to perform AJAX POST and GET Request.

minAjax.js A minimalist Javascript library to perform AJAX POST and GET Request. #Check Pretty Documentation http://flouthoc.github.io/minAjax.js/ #Us

null 6 Apr 27, 2021
Zepto.js is a minimalist JavaScript library for modern browsers, with a jQuery-compatible API

Zepto.js – a minimalist JavaScript library Zepto is a minimalist JavaScript library for modern browsers with a largely jQuery-compatible API. If you u

Thomas Fuchs 15k Dec 31, 2022
Minimalist dependancy free Masonry layout library

MiniMasonry.js Minimalist dependency free Masonry layout library MiniMasonry is a lightweight dependency free Masonry layout. It will compute elements

Spope 343 Dec 4, 2022
A regular table library, for async and virtual data models.

A Javascript library for the browser, regular-table exports a custom element named <regular-table>, which renders a regular HTML <table> to a sticky p

J.P. Morgan Chase & Co. 285 Dec 16, 2022
A small javascript DOM manipulation library based on Jquery's syntax. Acts as a small utility library with the most common functions.

Quantdom JS Quantdom is a very small (about 600 bytes when ran through terser & gzipped) dom danipulation library that uuses a Jquery like syntax and

Sean McQuaid 7 Aug 16, 2022
A minimalist web app for the daily morning and night athkar.

Morning & Night Athkar | أذكار الصباح والمساء Local Development Recommended: Use nvm to manage npm dependencies and versions. This app uses node versi

Mohammed Amarnah 4 Dec 2, 2022
Sharerbox - Free, minimalist and lightweight JavaScript-based social-media sharer for websites

Sharerbox Free minimalist and lightweight JavaScript-based social-media sharer for websites. Version: 0.8.1 Description SharerBox is a free, minimalis

Juan Astudillo 3 Aug 22, 2022
This is a basic website Todo Application that displays a list that looks and behaves like the part of minimalist project.

To-Do-list-microverse Description This is a basic website; a Todo Application that displays a list that looks and behaves like the part of minimalist

Dennis Akagha 7 Feb 3, 2022
Minimalist Web XR Location Based Markers for A-Frame 1.3.0

LBAR.js “I understand how the engines work now. It came to me in a dream. The engines don't move the ship at all. The ship stays where it is and the e

Media Engineering Institute 9 Dec 3, 2022
A minimalist ToDo list app to add, update and remove tasks easily

To-do list is a tool that helps to organize your day. It simply lists the things that you need to do and allows you to mark them as complete. We will build a simple website that allows for doing that, and we will do it using ES6 and Webpack!

Oybek Kayumov 14 Jun 23, 2022
"To Do List" is a minimalist project that displays a list of task and allows you to add and remove task from that list. Built with JavaScript

To Do List Structure Solo programming project for module 2 week 2 of the Microverse Program. Live Demo Live Demo Link "To Do List" is a minimalist pro

Yersel Hurtado 7 Mar 5, 2022
This is a To-Do List. It shows a minimalist design with the next features: Add new tasks, edit tasks, markup completed tasks, and erase all completed tasks. Built with JavaScript.

Project Name To Do List Built With HTML CSS JavaScript Live Demo To do List Live Demo Link Getting Started This is a To Do List. It shows a minimalist

Santiago Cárdenas 6 Jun 9, 2022