mattmccray

@media (hover: hover) {
  /* Enable CSS tooltips in a parent element */
  .enable-css-tooltips {
    [data-tooltip] {
      position: relative !important;
    }

    [data-tooltip]:hover::after,
    [data-tooltip]:focus::after {
      contain: paint;

mattmccray

import { useEffect, useMemo } from "react" // or "preact/hooks"

type ConstructorParams<T extends new (...args: any) => any> = T extends new (
  ...args: infer P
) => any
  ? P
  : never

/**
 * A simple view controller react hook. This hook will create a new

mattmccray

css.js

A CSS in JS micro-tool that's < 1kb (gzipped).

Usage:

const MyComponent = (props) => {
 return (

mattmccray

interface PathProvider {
  getPath(): string
  setPath(path: string): void
  onPathChange(callback: (path: string) => void): void
}

interface CurrentMatch {
  path: string
  route: Route | null
  params: Record<string, string>

mattmccray

type LogEntry = {
  messages: any[],
  level: 'pass' | 'fail' | 'error'
}

class Logger {
  messages: LogEntry[] = []

  get total() {
    return this.messages.length

mattmccray

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

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

interface IConfiguration {
  append: 'each' | 'batch'
  debug: boolean
  appendTo: Element
  replaceRegExp: RegExp
}

let _namePrefix = 'css'
let _pendingStyles: string | null = null
let _config: IConfiguration = {

mattmccray

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
}

/**

mattmccray

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> {