Skip to content

Instantly share code, notes, and snippets.

Avatar

Matt McCray mattmccray

  • Elucidata unLTD
  • Dallas, TX
View GitHub Profile
@mattmccray
mattmccray / test.ts
Last active Apr 10, 2022
🧪 Tiny Browser Unit Testing (<1kb gzipped)
View test.ts
type LogEntry = {
messages: any[],
level: 'pass' | 'fail' | 'error'
}
class Logger {
messages: LogEntry[] = []
get total() {
return this.messages.length
@mattmccray
mattmccray / css-component.tsx
Last active Jan 27, 2022
Simple Component wrapper for use with SolidJS and ./css.ts
View css-component.tsx
import { createMemo, JSX, splitProps } from "solid-js"
import { Dynamic } from 'solid-js/web'
type CssComponent<T extends keyof JSX.IntrinsicElements> = (props: JSX.IntrinsicElements[T]) => JSX.Element
export function component(styles: string): (props: JSX.IntrinsicElements['div']) => JSX.Element
export function component<T extends keyof JSX.IntrinsicElements>(tag: T | string | CssComponent<any>, styles: string): (props: JSX.IntrinsicElements[T]) => JSX.Element
export function component<T extends keyof JSX.IntrinsicElements>(tag?: string | T | CssComponent<any>, styles?: string): CssComponent<any> {
let extraClassNames = ''
if (!styles) {
@mattmccray
mattmccray / css-component.tsx
Created Jan 25, 2022
Simple Component wrapper for use with SolidJS and ./css.ts
View css-component.tsx
import { JSX } from "solid-js"
import { Dynamic } from 'solid-js/web'
export interface ComponentProps { children?: any, className?: string, [attr: string]: any }
export type CssComponent = (props: ComponentProps) => JSX.Element
export function component(styles: string): CssComponent
export function component(tag: string | CssComponent, styles: string): CssComponent
export function component(tag?: string | CssComponent, styles?: string): CssComponent {
let extraClassNames = ''
@mattmccray
mattmccray / css.ts
Last active Nov 28, 2021
Simple and tiny CSS in JS
View css.ts
interface IConfiguration {
append: 'each' | 'batch'
debug: boolean
appendTo: Element
replaceRegExp: RegExp
}
let _namePrefix = 'css'
let _pendingStyles: string | null = null
let _config: IConfiguration = {
View use-controller.ts
import { useEffect, useMemo, useRef } from "preact/hooks"
type PropsChangeMode = 'notify' | 'recycle' | 'smart'
interface IControllerClass<T, P> {
new(props: P): T
dispose?: () => void
propsDidChange?: (props: P) => void
}
/**
View use-promise.ts
import { useEffect, useRef, useState } from "preact/hooks"; // Or 'react'
interface PromiseResult<T> {
isResolved: boolean
value?: T
error?: any
}
export function usePromise<T>(builder: (...params: any[]) => Promise<T>, params: any[] = []): PromiseResult<T> {
@mattmccray
mattmccray / StateManager.ts
Last active May 30, 2021
Simple state manager using react and immer.
View StateManager.ts
import React from 'react'
import { Patch, produceWithPatches } from 'immer'
export interface StateManager<T = {}> {
handle<P>(signal: Signal<P>, callback: (state: T, event: P) => void): () => void
getState(): T
onStateChanged: Signal<{ state: T, changes: Patch[] }>
}
@mattmccray
mattmccray / mutt.js
Last active Jan 15, 2021
MUTT - Micro Unit Testing Tool (for browsers)
View mutt.js
// MUTT - Micro Unit Testing Tool (for browsers)
let _testDepth = 0;
export function test(name, suite) {
const title = `🐶 ${name}`;
const ctx = {
count: 0,
failed: 0
};
@mattmccray
mattmccray / ObservableUndoController.ts
Last active Sep 6, 2020
Simple Observable Undo Controller
View ObservableUndoController.ts
import { observable, computed, runInAction } from 'mobx'
import uid from './uid'
type UndoFn = () => void
type Command = () => UndoFn | Promise<UndoFn>
interface UndoContext {
id: string
label: string
command: Command
@mattmccray
mattmccray / UndoManager.ts
Last active Sep 6, 2020
Super Simple Undo Manager
View UndoManager.ts
type UndoFn = () => void
type Command = () => UndoFn | Promise<UndoFn>
interface UndoContext {
command: Command
revert: UndoFn | Promise<UndoFn>
}
export class UndoManager {
undoStack: UndoContext[] = []