Scope IDs to an element by rewriting them to be globally unique

Last update: Nov 2, 2021

element-scope-ids

Build Status NPM Version

NAME

element-scope-ids - scope IDs to an element by rewriting them to be globally unique

INSTALLATION

$ npm install element-scope-ids

SYNOPSIS

import { scopeIds } from 'element-scope-ids'

for (const el of document.querySelectorAll('.tabs')) {
    scopeIds(el)
}

before:

...
...
"> 
<div class="tabs">
    <ul role="tablist">
        <li id="foo-tab" role="tab" aria-controls="foo-panel">Fooli>
        <li id="bar-tab" role="tab" aria-controls="bar-panel">Barli>
    ul>
    <div id="foo-panel" role="tabpanel">...div>
    <div id="bar-panel" role="tabpanel">...div>
div>

after:

...
...
"> 
<div class="tabs">
    <ul role="tablist">
        <li id="foo-tab-123" role="tab" aria-controls="foo-panel-234">Fooli>
        <li id="bar-tab-345" role="tab" aria-controls="bar-panel-456">Barli>
    ul>
    <div id="foo-panel-234" role="tabpanel">...div>
    <div id="bar-panel-456" role-"tabpanel">...div>
div>

DESCRIPTION

This module exports a class (and helper functions which wrap an instance of the class) which rewrites IDs within elements so that they're safe to compose with other elements on the page which use the same IDs. This is done by rewriting each ID to be globally unique (while preserving any internal references). This is similar to the technique used to transpile scoped CSS (e.g. CSS modules) by PostCSS, Angular etc.

WHY?

IDs are the natural way to declare relationships between elements in various HTML components, e.g.:

This approach works well for simple, static pages — e.g. if there's only one accordion or form on a page — but quickly becomes cumbersome in situations where there's more than one such component, e.g. in SPAs where many components of the same type may be embedded in the DOM at the same time. It can also be tedious and error prone even in multi-page apps simply because IDs are names, and naming things is hard: decomposing a page into reusable components can make it difficult to keep track of which IDs are safe to use where, and this can be compounded in apps which pull in third-party components.

One solution is to use another attribute, e.g. data-id, but these remain unique IDs in everything but name, and they still need to be translated back into actual IDs for ARIA/form elements etc., so this does little more than move the problem sideways.

A better solution is to keep using IDs but to make them safe to compose and reuse — in the same manner as class names in scoped CSS (and local variable names in most programming languages). This is done by making each ID globally unique (with an escape hatch for shared/global IDs).

TYPES

The following types are referenced in the descriptions below:

IdAttrs

An array (or other iterable collection) of attribute names to look for IDs in or a function which returns the names.

type IdAttrs = Iterable<string> | (idAttrs: Iterable<string>) => Iterable<string>

Options

An options object which can be passed to the Scoper constructor and its scopeIds and scopeOwnIds methods.

type Options = {
    exclude?: (HTMLElement, id: { name: string, value: string }, next: (typeof exclude)) => boolean | string;
    idAttrs?: IdAttrs;
}

EXPORTS

Scoper (default)

Instances of this class can be used to rewrite IDs within DOM elements so that they can safely be composed with other elements which use the same IDs. This is done by rewriting the IDs to be globally unique, while preserving internal links.

Type: Scoper(options?: Options)

import Scoper from 'element-scope-ids'

const scoper = new Scoper()

scoper.on('id', (element, id) => {
    element.setAttribute(`data-original-${id.name}`, id.old)
})

for (const el of document.querySelectorAll('.tabs')) {
    scoper.scopeIds(el)
}

Events

Scoper implements the EventEmitter interface. The following events are supported:

id

Type: (el: HTMLElement, { name: string, old: string, new: string }) → void

Fired each time an ID-like attribute is changed. As well as the id attribute itself, this also includes ARIA attributes such as aria-controls and the for attribute on LABEL elements. The listener is passed the element and a delta object which contains the old ID and the new ID.

scoper.on('id', (element, id) => {
    element.setAttribute(`data-original-${id.name}`, id.old)
})

Note that an event is fired for each ID rather than each attribute. This distinction is important for attributes which may take multiple IDs, e.g. aria-labelledby.

ids

Type: (el: HTMLElement, { [name: string]: { old: string, new: string } }) → void

Fired after all IDs have been replaced in an element. Passed the element and an object whose keys are the names of modified attributes and whose values are delta objects with the old and new values for the attribute, e.g.:

scoper.on('ids', (element, ids) => {
    element.setAttribute('data-scoped-attributes', Object.keys(ids).join(' '))
})

Options

The constructor takes an optional Options object with the following (optional) fields:

exclude

Type: (el: HTMLElement, id: { name: string, value: string }, next: (typeof exclude)) → boolean | string

A function which is used to prevent an ID being scoped. Called once for each ID in each ID-like attribute (as defined by idAttrs) in each target element. If supplied, the function can veto scoping (i.e. renaming) the ID by returning true. Alternatively, it can veto scoping by returning a replacement ID.

The next value in the final parameter is a reference to the default exclude function. There can be up to three exclude functions (built-in, constructor option, method option) and each one after the built-in can delegate to the one it's overriding, passing the decision back from the method option (if supplied) to the constructor option (if supplied) to the default implementation.

If the next function is called with no arguments, it is passed the original arguments. Otherwise the supplied arguments are passed to the previous exclude.

const scoper = new Scoper({
    exclude (element, id, next) {
        // next() (no arguments) is the same as next(...arguments)
        return (element.dataset.scopeIds || '') === 'false' ? true : next()
    }
})

exclude can be used to filter by type, e.g. the default implementation restricts the for attribute to LABEL elements:

const scoper = new Scoper({
    exclude (element, id, next) {
        return id.name === 'for' ? element.tagName !== 'LABEL' : next()
    }
})

It can also be used to exclude global IDs.

idAttrs

Type: IdAttrs

A list (e.g. array) of attribute names to treat as "ID-like" i.e. the names of attributes IDs should be replaced in.

To add attributes to the default list, or exclude attributes, a function can be supplied which receives the default list as an argument. The function's return value is used as the new list:

const scoper = new Scoper({
    idAttrs (defaultIdAttrs) {
        return defaultIdAttrs.concat(['contextmenu'])
    }
})

Methods

scopeIds

Type: (el: T, options?: Options) → T

Takes a DOM element and rewrites any IDs found in its child/descendant elements so that they are globally unique, and thus safe to combine on a page with another element which uses the same IDs.

If the options parameter is supplied, its values override the corresponding options passed to the constructor for the scope of the call.

scopeOwnIds

Type: (el: T, options?: Options) → T

Takes a DOM element and rewrites any IDs found in the element itself (i.e. not in its descendants) so that they are globally unique, and thus safe to combine on a page with another element which uses the same IDs.

If the options parameter is supplied, its values override the corresponding options passed to the constructor for the scope of the call.

scopeIds

Type: (el: HTMLElement, options?: Options) → void

A functional wrapper around the scopeIds method of an instance of the Scoper class created with the default options i.e. this:

import { scopeIds } from 'element-scope-ids'

for (const el of document.querySelectorAll('.tabs')) {
    scopeIds(el)
}

is equivalent to:

import Scoper from 'element-scope-ids'

const scoper = new Scoper()

for (const el of document.querySelectorAll('.tabs')) {
    scoper.scopeIds(el)
}

scopeOwnIds

Type: (el: HTMLElement, options?: Options) → void

A functional wrapper around the scopeOwnIds method of an instance of the Scoper class created with the default options.

Uses the same default instance of the Scoper class as scopeIds.

EXAMPLES

Debugging

To log what IDs have been changed where, intercept one of the events (to veto a change, see exclude), e.g.:

const scoper = new Scoper()

scoper.on('id', (element, id) => {
    console.log(`${element.tagName}[${id.name}]: ${id.old} => ${id.new}`)
})

Exclude global IDs

This can be done by supplying an exclude constructor/method option which identifies and optionally transforms global IDs, e.g.:

function isGlobal (el, { value }, next) {
    return (value[0] === '/') ? value.substr(1) : next()
}

const scoper = new Scoper({ exclude: isGlobal })

for (const el of document.querySelectorAll('[data-scope-ids="true"]')) {
    scoper.scopeIds(el)
    el.setAttribute('data-scope-ids', 'done')
}

before:

"> 
<div data-scope-ids="true">
    <span id="foo">span>
    <span id="/bar">span>
    <span id="/baz">span>
    <span id="quux">span>
div>

after:

"> 
<div data-scope-ids="done">
    <span id="foo-123">span>
    <span id="bar">span>
    <span id="baz">span>
    <span id="quux-234">span>
div>

Use with jQuery

element-scope-ids doesn't depend on jQuery, but it can easily be integrated with it, or any other front-end library or framework.

In this example, we mount a Tabs controller object on each tabs widget after its IDs have been scoped.

import 'jquery-initialize'
import Tablist from '@accede-web/tablist'

// scope IDs in every current and future element which has data-scope-ids="true"
$.initialize('[data-scope-ids="true"]', function () {
    scopeIds(this)
    $(this).attr('data-scope-ids', 'done') // mark the IDs as scoped
})

// don't process tabs until their IDs have been scoped
$.initialize('[data-scope-ids="done"] [role="tablist"]', function () {
    new Tablist(this).mount()
})

DEVELOPMENT

NPM Scripts

The following NPM scripts are available:

  • build - compile the library and package it for release
  • bundle - package the compiled source code for CommonJS, ESM etc.
  • clean - remove temporary files and build artifacts
  • compile - compile the source code ready for bundling

COMPATIBILITY

  • > 1% of browsers
  • IE 11
  • not Opera Mini

SEE ALSO

IDs

ARIA widgets

Scoped CSS

VERSION

0.1.1

AUTHOR

chocolateboy

COPYRIGHT AND LICENSE

Copyright © 2018-2021 by chocolateboy.

This is free software; you can redistribute it and/or modify it under the terms of the MIT license.

GitHub

https://github.com/chocolateboy/element-scope-ids
Comments

  • 1. [Security] Bump color-string from 1.5.3 to 1.5.5

    Bumps color-string from 1.5.3 to 1.5.5. This update includes a security fix.

    Vulnerabilities fixed

    Sourced from The GitHub Security Advisory Database.

    Regular Expression Denial of Service (ReDOS) A Regular Expression Denial of Service (ReDOS) vulnerability was discovered in Color-String version 1.5.5 and below which occurs when the application is provided and checks a crafted invalid HWB string.

    Affected versions: < 1.5.5

    Release notes

    Sourced from color-string's releases.

    1.5.5 (Patch/Security Release) - hwb() ReDos patch (low-severity)

    Release notes copied verbatim from the commit message, which can be found here: 0789e21284c33d89ebc4ab4ca6f759b9375ac9d3

    Discovered by Yeting Li, c/o Colin Ife via Snyk.io.

    A ReDos (Regular Expression Denial of Service) vulnerability
was responsibly disclosed to me via email by Colin on
Mar 5 2021 regarding an exponential time complexity for
linearly increasing input lengths for hwb() color strings.
    

    Strings reaching more than 5000 characters would see several
milliseconds of processing time; strings reaching more than
50,000 characters began seeing 1500ms (1.5s) of processing time.
    

    The cause was due to a the regular expression that parses
hwb() strings - specifically, the hue value - where
the integer portion of the hue value used a 0-or-more quantifier
shortly thereafter followed by a 1-or-more quantifier.
    

    This caused excessive backtracking and a cartesian scan,
resulting in exponential time complexity given a linear
increase in input length.
    

    Thank you Yeting Li and Colin Ife for bringing this to my
attention in a secure, responsible and professional manner.
    

    A CVE will not be assigned for this vulnerability.

    1.5.4 (Patch Release)

    • Removes rounding of alpha values in RGBA hex (#rrggbbaa) and condensed-hex (#rgba) parsers, which caused certain unique inputs to result in identical outputs (see https://github.com/qix-/color/issues/174).
    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
    • @dependabot badge me will comment on this PR with code to add a "Dependabot enabled" badge to your readme

    Additionally, you can set the following in your Dependabot dashboard:

    • Update frequency (including time of day and day of week)
    • Pull request limits (per update run and/or open at any time)
    • Automerge options (never/patch/minor, and dev/runtime dependencies)
    • Out-of-range updates (receive only lockfile updates, if desired)
    • Security updates (receive only security updates, if desired)
    Reviewed by dependabot-preview[bot] at 2021-06-22 05:30

  • 2. [Security] Bump lodash from 4.17.11 to 4.17.15

    Bumps lodash from 4.17.11 to 4.17.15. This update includes security fixes.

    Vulnerabilities fixed

    Sourced from The GitHub Security Advisory Database.

    High severity vulnerability that affects lodash, lodash-es, lodash-amd, lodash.template, lodash.merge, lodash.mergewith, and lodash.defaultsdeep Affected versions of lodash are vulnerable to Prototype Pollution. The function defaultsDeep could be tricked into adding or modifying properties of Object.prototype using a constructor payload.

    Affected versions: < 4.17.13

    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.

    Note: This repo was added to Dependabot recently, so you'll receive a maximum of 5 PRs for your first few update runs. Once an update run creates fewer than 5 PRs we'll remove that limit.

    You can always request more updates by clicking Bump now in your Dependabot dashboard.

    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 ignore this [patch|minor|major] version will close this PR and stop Dependabot creating any more for this minor/major version (unless you reopen the PR or upgrade to it). To ignore the version in this PR you can just close it
    • @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
    • @dependabot badge me will comment on this PR with code to add a "Dependabot enabled" badge to your readme

    Additionally, you can set the following in your Dependabot dashboard:

    • Update frequency (including time of day and day of week)
    • Automerge options (never/patch/minor, and dev/runtime dependencies)
    • Pull request limits (per update run and/or open at any time)
    • Out-of-range updates (receive only lockfile updates, if desired)
    • Security updates (receive only security updates, if desired)

    Finally, you can contact us by mentioning @dependabot.

    Reviewed by dependabot-preview[bot] at 2019-07-19 06:04

  • 3. [Security] Bump lodash from 4.17.11 to 4.17.14

    Bumps lodash from 4.17.11 to 4.17.14. This update includes security fixes.

    Vulnerabilities fixed

    Sourced from The GitHub Security Advisory Database.

    High severity vulnerability that affects lodash, lodash-es, lodash-amd, lodash.template, lodash.merge, lodash.mergewith, and lodash.defaultsdeep Affected versions of lodash are vulnerable to Prototype Pollution. The function defaultsDeep could be tricked into adding or modifying properties of Object.prototype using a constructor payload.

    Affected versions: < 4.17.13

    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 ignore this [patch|minor|major] version will close this PR and stop Dependabot creating any more for this minor/major version (unless you reopen the PR or upgrade to it). To ignore the version in this PR you can just close it
    • @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
    • @dependabot badge me will comment on this PR with code to add a "Dependabot enabled" badge to your readme

    Additionally, you can set the following in your Dependabot dashboard:

    • Update frequency (including time of day and day of week)
    • Automerge options (never/patch/minor, and dev/runtime dependencies)
    • Pull request limits (per update run and/or open at any time)
    • Out-of-range updates (receive only lockfile updates, if desired)
    • Security updates (receive only security updates, if desired)

    Finally, you can contact us by mentioning @dependabot.

    Reviewed by dependabot-preview[bot] at 2019-07-11 02:43

  • 4. [Security] Bump color-string from 1.5.3 to 1.6.0

    Bumps color-string from 1.5.3 to 1.6.0. This update includes a security fix.

    Vulnerabilities fixed

    Sourced from The GitHub Security Advisory Database.

    Regular Expression Denial of Service (ReDOS) A Regular Expression Denial of Service (ReDOS) vulnerability was discovered in Color-String version 1.5.5 and below which occurs when the application is provided and checks a crafted invalid HWB string.

    Affected versions: < 1.5.5

    Release notes

    Sourced from color-string's releases.

    1.6.0

    Minor release 1.6.0

    • #55 - Add support for space-separated HSL

    Thanks @​htunnicliff for the contribution :)

    1.5.5 (Patch/Security Release) - hwb() ReDos patch (low-severity)

    Release notes copied verbatim from the commit message, which can be found here: 0789e21284c33d89ebc4ab4ca6f759b9375ac9d3

    Discovered by Yeting Li, c/o Colin Ife via Snyk.io.

    A ReDos (Regular Expression Denial of Service) vulnerability
was responsibly disclosed to me via email by Colin on
Mar 5 2021 regarding an exponential time complexity for
linearly increasing input lengths for hwb() color strings.
    

    Strings reaching more than 5000 characters would see several
milliseconds of processing time; strings reaching more than
50,000 characters began seeing 1500ms (1.5s) of processing time.
    

    The cause was due to a the regular expression that parses
hwb() strings - specifically, the hue value - where
the integer portion of the hue value used a 0-or-more quantifier
shortly thereafter followed by a 1-or-more quantifier.
    

    This caused excessive backtracking and a cartesian scan,
resulting in exponential time complexity given a linear
increase in input length.
    

    Thank you Yeting Li and Colin Ife for bringing this to my
attention in a secure, responsible and professional manner.
    

    A CVE will not be assigned for this vulnerability.

    1.5.4 (Patch Release)

    • Removes rounding of alpha values in RGBA hex (#rrggbbaa) and condensed-hex (#rgba) parsers, which caused certain unique inputs to result in identical outputs (see https://github.com/qix-/color/issues/174).
    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
    • @dependabot badge me will comment on this PR with code to add a "Dependabot enabled" badge to your readme

    Additionally, you can set the following in your Dependabot dashboard:

    • Update frequency (including time of day and day of week)
    • Pull request limits (per update run and/or open at any time)
    • Automerge options (never/patch/minor, and dev/runtime dependencies)
    • Out-of-range updates (receive only lockfile updates, if desired)
    • Security updates (receive only security updates, if desired)
    Reviewed by dependabot-preview[bot] at 2021-07-19 05:31

  • 5. [Security] Bump set-getter from 0.1.0 to 0.1.1

    Bumps set-getter from 0.1.0 to 0.1.1. This update includes a security fix.

    Vulnerabilities fixed

    Sourced from The GitHub Security Advisory Database.

    Prototype Pollution Prototype pollution vulnerability in ‘set-getter’ version 0.1.0 allows an attacker to cause a denial of service and may lead to remote code execution.

    Affected versions: < 0.1.1

    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
    • @dependabot badge me will comment on this PR with code to add a "Dependabot enabled" badge to your readme

    Additionally, you can set the following in your Dependabot dashboard:

    • Update frequency (including time of day and day of week)
    • Pull request limits (per update run and/or open at any time)
    • Automerge options (never/patch/minor, and dev/runtime dependencies)
    • Out-of-range updates (receive only lockfile updates, if desired)
    • Security updates (receive only security updates, if desired)
    Reviewed by dependabot-preview[bot] at 2021-06-22 05:31

  • 6. [Security] Bump browserslist from 4.13.0 to 4.16.6

    Bumps browserslist from 4.13.0 to 4.16.6. This update includes a security fix.

    Vulnerabilities fixed

    Sourced from The GitHub Security Advisory Database.

    Regular Expression Denial of Service in browserslist The package browserslist from 4.0.0 and before 4.16.5 are vulnerable to Regular Expression Denial of Service (ReDoS) during parsing of queries.

    Affected versions: >= 4.0.0 < 4.16.5

    Changelog

    Sourced from browserslist's changelog.

    4.16.6

    • Fixed npm-shrinkwrap.json support in --update-db (by Geoff Newman).

    4.16.5

    • Fixed unsafe RegExp (by Yeting Li).

    4.16.4

    • Fixed unsafe RegExp.
    • Added artifactory support to --update-db (by Ittai Baratz).

    4.16.3

    • Fixed --update-db.

    4.16.2

    4.16.1

    • Fixed Chrome 4 with mobileToDesktop (by Aron Woost).

    4.16

    • Add browserslist config query.

    4.15

    • Add TypeScript types (by Dmitry Semigradsky).

    4.14.7

    • Fixed Yarn Workspaces support to --update-db (by Fausto Núñez Alberro).
    • Added browser changes to --update-db (by @​AleksandrSl).
    • Added color output to --update-db.
    • Updated package.funding to have link to our Open Collective.

    4.14.6

    • Fixed Yarn support in --update-db (by Ivan Storck).
    • Fixed npm 7 support in --update-db.

    4.14.5

    • Fixed last 2 electron versions query (by Sergey Melyukov).

    4.14.4

    • Fixed Unknown version 59 of op_mob error.

    4.14.3

    • Update Firefox ESR.

    4.14.2

    • Fixed --update-db on Windows (by James Ross).
    • Improved --update-db output.

    4.14.1

    • Added --update-db explanation (by Justin Zelinsky).

    ... (truncated)

    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
    • @dependabot badge me will comment on this PR with code to add a "Dependabot enabled" badge to your readme

    Additionally, you can set the following in your Dependabot dashboard:

    • Update frequency (including time of day and day of week)
    • Pull request limits (per update run and/or open at any time)
    • Automerge options (never/patch/minor, and dev/runtime dependencies)
    • Out-of-range updates (receive only lockfile updates, if desired)
    • Security updates (receive only security updates, if desired)
    Reviewed by dependabot-preview[bot] at 2021-05-25 05:18

  • 7. [Security] Bump hosted-git-info from 2.8.8 to 2.8.9

    Bumps hosted-git-info from 2.8.8 to 2.8.9. This update includes a security fix.

    Vulnerabilities fixed

    Sourced from The GitHub Security Advisory Database.

    Regular Expression Denial of Service in hosted-git-info The npm package hosted-git-info before 3.0.8 are vulnerable to Regular Expression Denial of Service (ReDoS) via regular expression shortcutMatch in the fromUrl function in index.js. The affected regular expression exhibits polynomial worst-case time complexity

    Affected versions: < 2.8.9

    Changelog

    Sourced from hosted-git-info's changelog.

    2.8.9 (2021-04-07)

    Bug Fixes

    Commits
    Maintainer changes

    This version was pushed to npm by nlf, a new releaser for hosted-git-info since your current version.


    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
    • @dependabot badge me will comment on this PR with code to add a "Dependabot enabled" badge to your readme

    Additionally, you can set the following in your Dependabot dashboard:

    • Update frequency (including time of day and day of week)
    • Pull request limits (per update run and/or open at any time)
    • Automerge options (never/patch/minor, and dev/runtime dependencies)
    • Out-of-range updates (receive only lockfile updates, if desired)
    • Security updates (receive only security updates, if desired)
    Reviewed by dependabot-preview[bot] at 2021-05-07 17:45

  • 8. [Security] Bump lodash from 4.17.19 to 4.17.21

    Bumps lodash from 4.17.19 to 4.17.21. This update includes a security fix.

    Vulnerabilities fixed

    Sourced from The GitHub Security Advisory Database.

    Command Injection in lodash lodash versions prior to 4.17.21 are vulnerable to Command Injection via the template function.

    Affected versions: < 4.17.21

    Commits
    • f299b52 Bump to v4.17.21
    • c4847eb Improve performance of toNumber, trim and trimEnd on large input strings
    • 3469357 Prevent command injection through _.template's variable option
    • ded9bc6 Bump to v4.17.20.
    • 63150ef Documentation fixes.
    • 00f0f62 test.js: Remove trailing comma.
    • 846e434 Temporarily use a custom fork of lodash-cli.
    • 5d046f3 Re-enable Travis tests on 4.17 branch.
    • aa816b3 Remove /npm-package.
    • See full diff in compare view
    Maintainer changes

    This version was pushed to npm by bnjmnt4n, a new releaser for lodash since your current version.


    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
    • @dependabot badge me will comment on this PR with code to add a "Dependabot enabled" badge to your readme

    Additionally, you can set the following in your Dependabot dashboard:

    • Update frequency (including time of day and day of week)
    • Pull request limits (per update run and/or open at any time)
    • Automerge options (never/patch/minor, and dev/runtime dependencies)
    • Out-of-range updates (receive only lockfile updates, if desired)
    • Security updates (receive only security updates, if desired)
    Reviewed by dependabot-preview[bot] at 2021-05-06 16:33
Related tags
Miscellaneous css html modular dom aria css-modules scoped id wai-aria ids scope html-modules
tsParticles - Easily create highly customizable particles animations and use them as animated backgrounds for your website. Ready to use components available for React, Vue.js (2.x and 3.x), Angular, Svelte, jQuery, Preact, Inferno.
 tsParticles - Easily create highly customizable particles animations and use them as animated backgrounds for your website. Ready to use components available for React, Vue.js (2.x and 3.x), Angular, Svelte, jQuery, Preact, Inferno.

tsParticles - TypeScript Particles A lightweight TypeScript library for creating particles. Dependency free (*) and browser ready! Particles.js conver

Jun 30, 2022
Scan your vaccination, test and recovery certificates in QR code representation and save them to your Apple Wallet
 Scan your vaccination, test and recovery certificates in QR code representation and save them to your Apple Wallet

This web application offers the possibility to scan the EU-wide vaccination, test and recovery certificates (namely EU Digital COVID Certificate) as Q

Apr 5, 2022
A platform collecting facts --data and evidence-- and presenting them AS IT IS in the useful way. No prejudice!
 A platform collecting facts --data and evidence-- and presenting them AS IT IS in the useful way. No prejudice!

FactFinder.app @factfinderbot " Only Facts We Trust, No Prejudice! " Live (Release): https://factfinder.app Preview (Dev): https://fact-finder.vercel.

Aug 30, 2021
VueJS project for puling countries from rest api and display them

Live Demo https://shafeequeom.github.io/vue-world/ Run Project Locally 1. git cl

Mar 22, 2022
Design and visualize microtonal scales and play them in your web browser

Design and visualize microtonal scales and play them in your web browser. Export your scales for use with VST instruments. Convert Scala files to various tuning formats.

Jun 22, 2022
A Vue.js plugin that affixes an element on the window while scrolling based on a relative element

Affixes an element on the screen based on a relative element Unlike other plugins, this Vue 2 component will make it easy to affix any element while s

Jun 29, 2022
Cron Generator Implemented by Vue.js and Element-ui(基于Vue&Element-UI构建的在线Cron表达式生成器)

vue-cron-generator a project using vue,element-ui to generate cron expression 中文 Online demo Used by ?? Attemper: A distributed,multi-tenancy,job-flow

Jun 10, 2022
Vue.js (2+) directive that clamps the content of an element by adding an ellipsis to it if the content inside is too long.

vue-clampy Vue.js (2+) directive that clamps the content of an element by adding an ellipsis to it if the content inside is too long. It uses @clampy-

May 13, 2022
A Vue.js directive for animating an element from height: auto; to height: 0px; and vice-versa.

v-show-slide A Vue.js directive for animating an element from height: auto to height: 0px and vice-versa. ?? 3kb (1kb gzipped) ?? No dependencies ?? T

Mar 29, 2022
A vue directive which automatically resize font size based on element width.
 A vue directive which automatically resize font size based on element width.

Vue Resize Text A vue directive which automatically resize font size based on element width. It makes the font-size flexible on fluid or responsive la

Jan 10, 2022
⬜️ Vue directive to blur an element dynamically
 ⬜️ Vue directive to blur an element dynamically

v-blur Vue directive to blur an element dynamically. Useful to partially hide elements, use it with a spinner when content is not ready among other th

May 19, 2022
基于vue-element-admin做的一个企业OA管理系统

vue-admin-template 这是一个极简的 vue admin 管理后台。它只包含了 Element UI & axios & iconfont & permission control & lint，这些搭建后台必要的东西。 线上地址 国内访问 目前版本为 v4.0+ 基于 vue-cl

Mar 28, 2022
Vue.js directive for setting visibility of an element

v-visible Vue.js directive for setting visibility of an element v-visible Installation Via NPM Via Yarn Directly in browser Initialization As a global

Oct 31, 2021
A vue2 Passenger guiding platform(vue2+vue-router+axios+element-ui+sass)

A vue2 Passenger guiding platform(vue2+vue-router+axios+element-ui+sass)

Oct 19, 2020
Vue component to trap the focus within a DOM element

focus-trap-vue Vue component to trap the focus within a DOM element Installation For Vue 2 npm install focus-trap focus-trap-vue For Vue 3 npm install

Jun 27, 2022
Vue Element Resize Detector Wrapper

vue-element-resize-detector Vue Directive to detect resize events on elements or components. Uses element Resize Detector under the hood ⚙️ Installati

Mar 31, 2022
A tiny, SSR-safe directive for binding random data to an element.

1️⃣ vue-bind-once A tiny, SSR-safe directive for binding random data to an element. A tiny, SSR-safe directive for binding random data to an element.

Jun 21, 2022
Enable tap, swipe, touch, hold, mouse down, mouse up events on any HTML DOM Element in vue.js 3.x.
 Enable tap, swipe, touch, hold, mouse down, mouse up events on any HTML DOM Element in vue.js 3.x.

vue3-touch-events Enable tap, swipe, touch, hold, mouse down, mouse up events on any HTML DOM Element in vue.js 3.x. The easiest way to make your inte

Jun 29, 2022
VueJS mixin plugin for creating element size queries in components

VueJS mixin plugin for creating element size queries in components.

Jan 17, 2022