Skip to content

Instantly share code, notes, and snippets.

Avatar
⚛️
Reconciling

Alexis H. Munsayac LXSMNSYC

⚛️
Reconciling
View GitHub Profile
@LXSMNSYC
LXSMNSYC / styletron.ts
Created Mar 3, 2020
Styletron SSR Setup wtih TypeScript
View styletron.ts
import { Client, Server } from 'styletron-engine-atomic';
import { DebugEngine } from 'styletron-react';
function getHydratedClass(): HTMLStyleElement[] {
const els = document.getElementsByClassName('_styletron_hydrate_');
const newEls = [];
for (let i = 0; i < els.length; i += 1) {
const el: Element = els[i];
View string-shuffle.js
function shuffle(str) {
let out = "";
while (str.length > 0) {
const index = (str.length * Math.random()) | 0;
out += str[index];
str = str.substr(0, index) + str.substr(index + 1);
}
return out;
}
View cooperative-scheduling.js
/**
* @license
* MIT License
*
* Copyright (c) 2020 Alexis Munsayac
* Permission is hereby granted, free of charge, to any person obtaining a copy
* of this software and associated documentation files (the "Software"), to deal
* in the Software without restriction, including without limitation the rights
* to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
* copies of the Software, and to permit persons to whom the Software is
View simple-router.js
/**
* @license
* MIT License
*
* Copyright (c) 2020 Alexis Munsayac
* Permission is hereby granted, free of charge, to any person obtaining a copy
* of this software and associated documentation files (the "Software"), to deal
* in the Software without restriction, including without limitation the rights
* to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
* copies of the Software, and to permit persons to whom the Software is
View useValidState.tsx
export default function useValidState(validator, initialState) {
const [state, setState] = useState(initialState);
const [error, setError] = useState();
const set = useCallback((action) => {
setState((prev) => {
const value = typeof action === 'function'
? action(prev)
: action;
View content-ranking.js
function createNode() {
return {
score: 1,
incoming: [],
outgoing: [],
total: 0,
};
}
function getIncomingEdge(node, toMatch) {
@LXSMNSYC
LXSMNSYC / string-interpolation.ts
Last active Sep 30, 2020
string-interpolation.ts
View string-interpolation.ts
export function interpolate(template: string, ...replacements: string[]): string {
return template.replace(/{([^{}]*)}/g, (match, point) => replacements[point] ?? match);
}
export function keyedInterpolate(template: string, replacements: Record<string, string>): string {
return template.replace(/{([^{}]*)}/g, (match, point) => replacements[point] ?? match);
}
View debounce-async.ts
export type AsyncCallback<T extends any[]> = (...args: T) => Promise<void>;
export type DebouncedAsync<T extends any[]> = (...args: T) => void;
export function debounceAsync<T extends any[]>(callback: AsyncCallback<T>, duration: number): DebouncedAsync<T> {
let lifecycle: PromiseLifecycle;
let timeout: number;
function control(...args: T) {
if (timeout) {
lifecycle.alive = false;
View useContainerQuery.tsx
import { MutableRefObject } from 'react';
import useIsomorphicEffect from './useIsomorphicEffect';
export type ContainerQuery =
| 'width'
| 'height'
| 'max-width'
| 'max-height'
| 'aspect-ratio'
| 'orientation';
View useDispose.tsx
import { useEffect } from 'react';
export type Dispose = () => void;
export default function useDispose(dispose: Dispose): void {
const timeout = setTimeout(dispose, 64);
useEffect(() => {
clearTimeout(timeout);
}, [timeout]);