Skip to content

Instantly share code, notes, and snippets.

View zaceno's full-sized avatar

Zacharias Enochsson zaceno

35 followers · 1 following
View GitHub Profile
@zaceno
zaceno / app-tester.js
Created February 6, 2023 09:22
Utility for testing app logic
/**
* Utility for testing hyperapp app/state logic. Pass it an init parameter
* and an effectHandler - a function that will replace every effecter used
* it will be called with (originalEffecter, payload) every time an effect
* is used allowing you to ovverride it and test that the right effecter
* was called, et c.
*
* Returns an object with some useful functions: getState allows you to
* inspect the state at any time, stop stops the app. dispatch dispatches
* actions.
@zaceno
zaceno / switch-vs-nested-ternary.js
Created September 20, 2021 08:15
switch-vs-nested-ternary.js
//COMPARE:
let page;
switch (hash) {
case '#about':
page = 'about'
break;
case '#photos':
page = 'photos'
@zaceno
zaceno / html.js
Created September 18, 2021 21:51
Functions for creating element vnodes in hyperapp
import { h } from "hyperapp"
/** @template S @typedef {import('hyperapp').VNode<S>} VNode */
/** @template S @typedef {import('hyperapp').MaybeVNode<S>} MaybeVNode */
/** @template S @typedef {import('hyperapp').ElementVNode<S>} ElementVNode */
/** @template S @typedef {MaybeVNode<S> | MaybeVNode<S>[]} Content */
/** @template S @typedef {import('hyperapp').Props<S>} Props */
/** @template S,X @typedef {import('hyperapp').CustomPayloads<S,X>} CustomPayloads */
/** @type {<S>(props: (Props<S> | Content<S>)) => props is Props<S>} */
@zaceno
zaceno / persistence.js
Last active September 14, 2021 13:52
persistence middleware for hyperapp
/*
When you are developing using a live-reloading server, it can be
annoying when the state keeps resetting. This middleware (just
meant for debugging) persists state across reloads so you see
immediate changes on what you were workig on, without extra steps
over and over to get back to where you were.
Usage:
@zaceno
zaceno / hats-examples.md
Last active June 23, 2021 01:06
Typescript + Hyperapp examples

Hello World

import {h, text, app} from "hyperapp"

app({
  view: () => h('main', {}, text('text')),
  // cast to Node only if you're sure it exists
  node: document.getElementById('app') as Node,
})
@zaceno
zaceno / script.js
Created December 5, 2020 22:15
advent of code, day4 part 2
/*
Apparently this script produces too high number of valid passports. Unclear why
*/
const required = ['byr','iyr','eyr','hgt','hcl','ecl','pid']
const byrValid = x => {
if (!x.match(/^\d{4}$/)) return false
if (+x > 2002) return false
if (+x < 1920) return false
@zaceno
zaceno / index.html
Created June 6, 2020 21:52
helper to benchmark old & new hyperlit vs plain h
<!DOCTYPE html>
<html>
<head>
<script type="module">
/*
Plain h - 33.4 fps
hyperlit@0.1.2 - 30.0 fps (10% slower) – 825 bytes
hyperlit@0.0.4 - 28.5 fps (15% slower) – 674 bytes
*/
@zaceno
zaceno / fx.js
Last active April 13, 2020 19:27
define effect creator for hyperapp
export default (g => f => (...a) => [g, { f, a }])((d, { f, a }) => f(d, ...a))
/*
Usage like:
import fx from 'fx.js'
const jsonLoader = fx((dispatch, url, then) =>
fetch(url)
@zaceno
zaceno / add-stylesheet.js
Created March 27, 2020 15:44
Add scoped css directives from javascript
/*
Usage:
import addStyleSheet from 'add-stylesheet.js'
export const view = () => (
<div class="container">
<h1>Hello</h1>
<p>World</p>
</div>
)
@zaceno
zaceno / step.js
Last active March 21, 2020 19:46
chain nested setTimeout calls
/*
If you ever end up writing deep sideways pyramids of
setTimeouts, you can use this utility to sequentialize
them.
step(a).step(b).step(c)
is equivalent to