orta

title	layout	permalink	oneline
Creating .d.ts Files from .js files	docs	/docs/handbook/declaration-files/dts-from-js.html	How to add d.ts generation to JavaScript projects

With TypeScript 3.7, TypeScript added support for generating .d.ts files from JavaScript using JSDoc syntax.

developit

Standalone forwardRef

import { forwardRef } from 'preact-forwardref';

const Foo = forwardRef((props, ref) => {
  return <div ref={ref} />
});

render( console.log(div)} /&gt;, document.body);

nsivertsen

{
	"imports": {
		"htm": "https://unpkg.com/[email protected]/dist/htm.module.js",
		"htm/preact": "https://unpkg.com/[email protected]/preact/index.module.js",
		"preact": "https://unpkg.com/[email protected]/dist/preact.module.js",
		"preact-render-to-string": "https://unpkg.com/[email protected]/dist/index.module.js"
	}
}

JoviDeCroock

Strict-equality

When creating elements and passing them as children we can have scenario's where we don't have to diff the children because it will still be the same vnode.

Imagine the following scenario:

const context = createContext(null);
const App = () => (

developit

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

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

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

/* 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,

developit

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

developit

var s;
function supportsModuleWorkers() {
  if (s==null) {
    s = false;
    try {
      new Worker('data:,', Object.defineProperty({}, 'type', {
        get() { s = true; }
      })).terminate();
    } catch (e) {}
  }