Munawwar

Chill Pill - Relax React!

A component model that makes React react less!

Overview

Chill Pill provides a simpler way to write React components without the complexity of hooks like useCallback, useMemo, and dealing with stale closures.

Example

Munawwar

// Test this file by running:
// npx tsc --noEmit test/node/pattern-match.types.ts

export type RoutePropsForPath<Path extends string> = Path extends '*'
	? { params: {}; rest: string }

	: Path extends `:${infer placeholder}?/${infer rest}`
	? { [k in placeholder]?: string } & { params: RoutePropsForPath<rest>['params'] & { [k in placeholder]?: string } } & Omit<RoutePropsForPath<rest>, 'params'>

	: Path extends `:${infer placeholder}/${infer rest}`

Munawwar

// Run program: javac PreactIsoUrlPattern.java && java PreactIsoUrlPattern

import java.util.Arrays;
import java.util.List;
import java.util.regex.Matcher;
import java.util.regex.Pattern;
import java.util.stream.Collectors;

public class PreactIsoUrlPattern {

Munawwar

Create a bookmark with the contents of bookmarklet.js. And then when you are on an distracting page, click the bookmark and poof .. clean page to read.

I used https://caiorss.github.io/bookmarklet-maker/ to convert source.js to be bookmark compatible.

Munawwar

Execution time on my Intel Core i7-1165G7 (11th Gen, 4 cores / 8 threads Base: 2.80GHz, Boost: up to 4.70GHz)

> go run quickjs.go
Execution time: 6 ms
> php quickjs.php
Execution time: 6.38 ms
> python3 quickjs.py
Execution time: 8.48 ms
> ruby quickjs.rb

Munawwar

/*
 * This function was created with a realization that once you override a method for mocking
 * and run a test, you can't undo the override, because shared code (test runner without
 * test isolation) will hold on to closures to the overridden function.
 *
 * So a solution it to intercept once before all tests, mock for a test and "undoMock()" at
 * end of a test will cause the intercept to "proxy" future calls to the original method.
 */

const mocked = new Set();

Munawwar

It "types" the contents of the clipboard.

Why can't you just paste the contents you ask? Sometimes pasting just doesn't work.

• One example is in system password fields on OSX.
• Sometimes you're working in a VM and the clipboard isn't shared.
• Other times you're working via Remote Desktop and again, the clipboard doesn't work in password boxes such as the system login prompts.
• Connected via RDP and clipboard sharing is disabled and so is mounting of local drives. If the system doesn't have internet access there's no easy way to get things like payloads or Powershell scripts onto it... until now.

Windows

The Windows version is written in AutoHotKey and easily compiles to an executable. It's a single line script that maps Ctrl-Shift-V to type the clipboard.

Munawwar

Problem: Say you have a function that takes a parent node and HTML string, which then renders the HTML as child nodes. On the next render, how would you know how much of the previous HTML was in the new HTML without having to parse the new HTML / create DOM nodes?

Another way to define the problem: I do a DOM diff for rendering HTML into a node. Think of it as a more efficient innerHTML update. However I am normally forced to parse the full HTML before even doing the diff. Even if html.startsWith() 90% of the previous HTML used. DOM creation is slower than string comparisons if and when possible.

E.g. Say the first HTML rendered was <b>1</b> and 2nd HTML rendered is <b>1</b><b>2</b>. Clearly <b>1</b> is already in the DOM and dont need an update. It is a substring of the previous HTML. Ideally we don't even need to create the DOM for diffing purpose.

Potential solution:

Munawwar

/*
 * The smallest html sax parser - 0.5kb gzipped
 * 
 * Usage: Find the comments/jsdoc of export below.
 */

// Regular Expressions for parsing tags and attributes
let startTagRegex = /(?:<([a-zA-Z][^\s\/>]*)(?:\s+[^\s\/>"'=]+(?:\s*=\s*(?:(?:"[^"]*")|(?:'[^']*')|[^>\s]+))?)*\s*(\/?)\s*>)|(?:<\/\s*([a-zA-Z][^\s\/>]*)>)|(?:<!--(.+?)-->)|(?:<!\[CDATA\[([^>]+)\]\]>)/ig,
		// Void Tags - HTML 5
		voidTags = new Set('area,base,br,col,embed,hr,img,input,keygen,link,meta,param,source,track,wbr'.split(',')),

Munawwar

const htm = require('htm');
const { default: satori } = require('satori');
const { Resvg } = require('@resvg/resvg-js')
const { promises } = require('node:fs');
const { join } = require('node:path')

const html = htm.bind(function jsxToObject(type, props, ...children) {
  return {
    type,
    props: {