William Wong compulim

A full stack and full spectrum developer. 👨🏻‍💻☕🍺🍶🍣🎮🎤🗾🏂♨️🏕🎧🎸

compulim / createDeferred.ts

Created July 31, 2017 17:57

Deferred in ES6 Promise

	interface IDeferred<T> {
	promise: () => Promise<T>,
	resolve: (result: T) => void,
	reject: (error: Error) => void
	}

	function createDeferred<T>(): Promise<IDeferred<T>> {
	return new Promise<IDeferred<T>>(resolveCreate => {
	const promise = new Promise<T>(function (resolve, reject) {
	resolveCreate({ promise: () => promise, resolve, reject });

compulim / asyncToDone.ts

Created July 31, 2017 17:58

ES6 Promise to Mocha/Jasmine done

	function asyncToDone(task: () => Promise<any>) {
	return function (done: (err?: Error) => void) {
	task().then(() => done(), done);
	}
	}

compulim / index.js

Created December 21, 2018 07:49

Demo: HTTP/2 + Server-Sent Events

	const http2 = require('http2');

	function main() {
	const server = http2.createSecureServer({
	cert: CERTIFICATE,
	key: PRIVATE_KEY
	});

	server.on('error', err => console.error(err));

compulim / executePromiseScript.js

Last active July 8, 2019 19:42

selenium-webdriver.executePromiseScript

	// executeAsyncScript is not running a Promise function and is not able to deal with errors.
	// https://seleniumhq.github.io/selenium/docs/api/javascript/module/selenium-webdriver/index_exports_WebDriver.html#executeAsyncScript
	// This function will use executeAsyncScript to run a Promise function in an async fashion.

	export default async function executePromiseScript(driver, fn, ...args) {
	const { error, result } = await driver.executeAsyncScript((fn, args, callback) => {
	eval(`(${fn})`).apply(null, args).then(result => callback({ result }), error => callback({ error }));
	}, fn + '', args);

	if (error) {

compulim / index.html

Created August 26, 2019 01:46

Render SVG to download as PNG

	<!DOCTYPE html>
	<!-- Very unpolished, just for the very short purpose -->
	<html lang="en-US">
	<head>
	<title>Render logo</title>
	<script type="text/javascript">
	(async function () {
	'use strict';

	const SIZE = 192;

compulim / useLayoutEffectDebug.js

Created November 2, 2019 20:14

Debug which props changed for React Hooks

	function useLayoutEffectDebug(fn, deps) {
	const [lastDeps, setLastDeps] = useState([]);

	useLayoutEffect(() => {
	console.log({ lastDeps, deps });

	lastDeps && console.log(deps.findIndex((value, index) => value !== lastDeps[index]));

	setLastDeps(deps);

compulim / index.js

Created December 2, 2019 03:12

Turns location.search into a JS object

const searchParams = Array.from(new URLSearchParams(location.search).entries()).reduce((result, [key, value]) => ({ ...result, [key]: value }), {});

compulim / createMemoizedFetchCredentials.js

Created December 2, 2019 07:51

Create memoized fetch credentials

	const TOKEN_EXPIRE_AFTER = 300000;

	// This function will create a memoized fetchCredentials function and reduce the call to the function.
	// The memoized result is time-sensitive and will be invalidated after 5 minutes (specified in TOKEN_EXPIRE_AFTER).
	const createMemoizedFetchCredentials = () => {
	let lastFetch = 0;
	let lastPromise;

	return () => {
	const now = Date.now();

compulim / useDetectDepsChange.js

Created December 3, 2019 01:20

Detect deps change in React

	export default function useDetectDepsChange(deps) {
	const prevDeps = useRef([]);

	deps.forEach((value, index) => {
	if (prevDeps.current[index] !== value) {
	console.log('Dep changed', { index, dep, prevDep: prevDeps.current[index] });
	}
	});

	prevDeps.current = [...deps];

compulim / useDebugDeps.js

Last active February 19, 2020 10:17

Track changes on every render via React hooks

	import { useRef } from 'react';

	export default function useDebugDeps(depsMap, name) {
	const lastDepsMapRef = useRef({});

	const { current: lastDepsMap } = lastDepsMapRef;
	const keys = new Set([...Object.keys(depsMap), ...Object.keys(lastDepsMap)]);
	const keysChanged = Array.from(keys).filter(key => !Object.is(depsMap[key], lastDepsMap[key]));

	if (keysChanged.length) {