developit

'oncopy oncut onpaste onabort onblur oncancel onchange onclick onclose oncontextmenu ondblclick ondrag ondragend ondragenter ondragleave ondragover ondragstart ondrop ondurationchange onemptied onended onerror onfocus oninput oninvalid onkeydown onkeypress onkeyup onload onloadeddata onloadedmetadata onloadstart onmousedown onmouseenter onmouseleave onmousemove onmouseout onmouseover onmouseup onmousewheel onpause onprogress onreset onresize onscroll onselect onstalled onsubmit onsuspend ontoggle onwaiting onwheel onpointerdown onpointermove onpointerup onpointercancel onpointerover onpointerout onpointerenter onpointerleave onselectstart onselectionchange onbeforecopy onbeforecut onbeforepaste onsearch onfullscreenchange onfullscreenerror'
  .split(' ')
  .map(e => {
    Element.prototype[e] = null;
  });

developit

respond

this isn't a library, don't use this.

it's a 1.5kb react-ey thing but using HTML instead of VDOM. diffing done via a hacked up version of set-dom.

Important Counter Demo

// this is a standard react component, except render() returns an HTML string

developit

module.exports = require('preact/compat');

developit

/**
 *  The Identity Component is a component that does nothing but render its child/children.
 */
export default (props) => props.children;

developit

function serialize(node) {
  if (node.nodeType === 3) {
    return node.data;
  }
  else if (node.nodeType === 8) {
    return '<!--' + node.data + '-->';
  }
  else if (node.nodeType === 1 || node.nodeType === 9) {
    let str = '<' + node.nodeName;
    const attrs = [];

developit

webpack-size

Weigh current module:

npx webpack-size

Weigh the size of a specific module entry:

developit

@developit/replaceall

~80b ponyfill for String.prototype.replaceAll() with good performance.

Why ponyfill? Because this is a proposal for a spec, and polyfilling it in-place before it gets solidified could break code that relies on an incorrect implementation.

Alternate Version

developit

import { Component } from 'preact';

/** Example:
 *    componentWillUnmount(){ uncache(this) }
 */
export function uncache(component) {
	setTimeout(() => {
		component.__b = component.nextBase = null;
	})
}

developit

Proposal: Importable Constructable Stylesheets

We're getting Constructable Stylesheets. This seems like an intuitive value to obtain when importing CSS from JavaScript, since it's the DOM's representation of a Stylesheet:

import stylesheet from './style.css';
console.log(stylesheet);  // CSSStyleSheet

No such system is in place to allow this to work (see [whatwg/loader]), however frontend build tooling has congregated around this approach as a mechanism for bringing CSS assets into the JavaScript module graph. There are many benefits to be obtained from moving CSS into this graph, however the most important is that imported CSS can be attributed to the consuming JS Module. This allows it to be bundled, optimized, and potentially dead-code-eliminated leveraging static analysis performed on the surrounding module graph.

developit

var xhr2 = false;
try { xhr2 = 'useCredentials' in new XMLHttpRequest; } catch (e) {}
var old = window.XMLHttpRequest;
function XMLHttpRequest() {
  if (xhr2) return new old();
}
XMLHttpRequest.prototype.open = function(method, url, async, user, pass) {
  var pageOrigin = location.protocol + ':' + location.host;
  var self = this;
  function wrap(m) {