Skip to content

Instantly share code, notes, and snippets.

View developit's full-sized avatar
🦊
write, the codes

Jason Miller developit

🦊
write, the codes
View GitHub Profile
@developit
developit / *tiny-array-flat-polyfill.md
Last active April 11, 2020 23:59
140b polyfill for Array.prototype.flat() and Array.prototype.flatMap(). https://npm.im/tiny-array-flat-polyfill

140b polyfill for [].flat() & [].flatMap()

Install: npm i tiny-array-flat-polyfill

Usage:

import 'tiny-array-flat-polyfill';

const ARR = [1, [2, [3]], [[[4]]], 5]
@developit
developit / *object-diff-patch.md
Last active August 20, 2021 15:03
Compute an object diff, then apply it as a patch to an existing object. https://npm.im/object-diff-patch

object-diff-patch

// on the main thread
import { apply } from 'object-diff-patch/apply';

import createWorker from 'workerize-loader!./worker.js';
const worker = createWorker();

const CACHE = new Map();
@developit
developit / *constant-locals-loader.md
Last active February 4, 2022 17:15
Inline Webpack CSS Modules classNames, reducing bundle size. https://npm.im/constant-locals-loader

constant-locals-loader for Webpack

This loader optimizes the output of mini-css-extract-plugin and/or css-loader, entirely removing the potentially large CSS classname mappings normally inlined into your bundle when using CSS Modules.

Run npm install constant-locals-loader, then make these changes in your Webpack config:

module.exports = {
 module: {
@marvinhagemeister
marvinhagemeister / little-vdom-decompiled.js
Created March 8, 2020 14:13
Jason little-vdom decompiled
/* eslint-disable no-unused-vars */
/* eslint-disable no-else-return */
// JSX constructor, similar to createElement()
export const h = (type, props, ...children) => {
return {
type,
// Props will be an object for components and DOM nodes, but a string for
// text nodes
props,
export const h=(t,p,...c)=>({t,p,c,k:p&&p.key})
export const render=(e,d,t=d.t||(d.t={}),p,r,c,m,y)=>
// arrays
e.map?e.map((e,p)=>render(e,d,t.o&&t.o[p])):
// components
e.t.call?(e.i=render((render.c=e).t(Object.assign({children:e.c},e.p),e.s=t.s||{},t=>
render(Object.assign(e.s,t)&&e,d,e)),t.i||d,t&&t.i||{}),d.t=t=e):(
// create notes
m=t.d||(e.t?document.createElement(e.t):new Text(e.p)),
// diff props
var s;
function supportsModuleWorkers() {
if (s==null) {
s = false;
try {
new Worker('data:,', Object.defineProperty({}, 'type', {
get() { s = true; }
})).terminate();
} catch (e) {}
}

resolve(), with Conditional Export Maps

This is a version of the resolve module that is extended with support for Conditional Export Maps, including Package Exports as shipped in Node.

The resolve module powers module resolution in Webpack, Rollup and Browserify.

API

The module maintains the same API and functionality as the original resolve() module.

babel-plugin-transform-mui-imports npm

A plugin to make authoring with MUI components efficient, both for humans and bundlers.

Here's why:

finally-polyfill

A tiny ~150-byte polyfill for Promise.prototype.finally.

Useful for browsers that support Promise but not the .finally() method.

Usage

npm install finally-polyfill

@porfirioribeiro
porfirioribeiro / Composition.md
Created January 6, 2020 23:04
Preact Composition API

Preact Composition API

  • Toughts and doubts
  • Reactivity
  • Current implementation
  • Component based implementation

Toughts and doubts

  • displayName