tokimon / vanillajs-browser-helpers Goto Github PK

Store data associated with the element, that is not compatible with the 'data-' attribute.
Like jQuery.

(could be used by eventPlus)

Should create a new element of the desired tag, but should also create it from given CSS selector string (like jQuery)

Run npm run missing to see list of missing unit tests

https://developer.mozilla.org/en-US/docs/Web/API/Fullscreen_API

"siblings" should include methods to fetch all preceding and succeeding elements

La fonction inView vérifie si l'élément est dans le viewport. Il serais intéressant d'avoir une option pour savoir si l’élément est dans la vue et est visible (exemple dans un div avec overflow:hidden, inView renvoi true car l'élément est dans le viewport mais il n'est pas visible)

in a usage I had to hack the type a bit to make TS accept e.delegateTarget:

const onClick = delegateHandler(`.${fileTileContainer}`, (e: Event) => {
  const { delegateTarget: thumb } = e as Event & { delegateTarget: Element };
  dispatch('thumbclick', { thumb });
});

to wrap an element in given HTML:

function findEmptyElm (elm) {
  const child = elm && elm.firstElementChild
  return child ? findEmptyElm(next) : elm
}

export default (elm, html) => {
  elm.insertAdjacentHTML('afterend', html)
  const insertElm = findEmptyElm(elm.nextElementSibling)
  insertElm && insertElm.appendChild(elm)
}

I am having issues getting the module to work. I ran the install code and it installed correctly; however, I can't seem to get the code to work in my browser.

Notification.js
`
import inView from 'vanillajs-browser-helpers/es5/inView.js'; //I tried these classes and the es6 varient
import addClass from 'vanillajs-browser-helpers/es5/addClass.js';
import removeClass from 'vanillajs-browser-helpers/es5/removeClass.js';

let notification = document.getElementById('notification');
let notificationTrigger = document.getElementById('notification-trigger');

if (notification != null && notificationTrigger != null) {

if (inView(notificationTrigger) != true) {
	removeClass(notification, "visible",);
} else {
	addClass(notification, "visible",);
}

}
But when I have<Script src="notification.js" type="module"> </script>` I get an error in the console about relative paths. Maybe it's my limited exposure to javascript or limited understanding of node. But could you build a short sample website to help clarify how to get it running beyond just NPM install?

According to this article there might be a problem with the toDOM method.
Additional tests for the elements is needed and possibly an improvement to the script.

Like in jQuery

Appveyor: https://ci.appveyor.com/
Example: https://ci.appveyor.com/project/bcoe/yargs-ljwvf

Add a visibility change event and a method to detect document visibility.
With fallback to focus/blur if the other event is not supported

Either by using form.elements or maybe by utilizing the FormData object

Function to add data linked to dom element (like jQuery.data()):

const _cache = new WeakMap()

function elmData (elm, key, data) {
  let elmCache = _cache.get(elm)

  if (!key) { return elmCache }

  if (data) {
    if (!elmCache) {
      elmCache = {}
      _cache.set(elm, elmCache)
    }

    elmCache[key] = data
  }

  return elmCache && elmCache[key]
}

export default elmData

Optimize by using requestAnimationFrame and by taking idle time into account (cancelling the polling after a certain time)

karma-benchmark?

Use requestAnimationFrame to optimize the resize reaction time and with a idle timer (cancelling the polling)

Once a CJS file is transpiled all references of vanillajs-helpers will still use the es6 version, thus not avoiding the need for transpilation.

eg for isString the compiled output is:

var _isString = require('vanillajs-helpers/isString');

But optimally it should be

var _isString = require('vanillajs-helpers/cjs/isString').default;

A simpler way to avoid this problem needs to be found.

When I tried to import addClass(import addClass from 'vanillajs-browser-helpers/addClass';), I get this error: ParseError: 'import' and 'export' may appear only with 'sourceType: module with browserify/babel.

Right now the found delegation target is give via this but this is impractical if arrow functions are used. One way could to override currentTarget fx.

Enables to replace a given class name with another (remove class a -> add class b)

Tools to look into these tools

• Turborepo
• NX
• Lerna
• NPM Workspaces

The 'defaults' Babel helper is used more than once in your code. It's strongly recommended that you use the "external-helpers" plugin or the "es2015-rollup" preset. See https://github.com/rollup/rollup-plugin-babel#configuring-babel for more information