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

mattmccray

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

// MUTT - Micro Unit Testing Tool (for browsers)

let _testDepth = 0;

export function test(name, suite) {
  const title = `🐶 ${name}`;
  const ctx = {
    count: 0,
    failed: 0
  };