Skip to content

Instantly share code, notes, and snippets.

Working on Mithril type stuff

Barney Carroll barneycarroll

Working on Mithril type stuff
View GitHub Profile
barneycarroll / cor.js
Created Oct 26, 2021
Generators as generic sub-routines
View cor.js
barneycarroll / changeTag.js
Created Aug 3, 2021
Replace an element with a new one that has a different tagName
View changeTag.js
export default function changeTag(original, tagName){
// Create a replacement tag of the desired type
const replacement = document.createElement(tagName)
// Grab all of the original's attributes, and pass them to the replacement, ({name, value}) => {
replacement.setAttribute(name, value)
// Persist contents
barneycarroll / ui_io.js
Created May 23, 2021
User Interface Input / Output is a tool for observing all event triggers (UI input) & DOM mutations (UI output). Initialised with an optional callback function which receives all such entries in format {type: 'mutation' || 'event', time:, data: originalEventOrMutationRecords}, the returned instance exposes {logs, next, disconne…
View ui_io.js
import muty from 'muty'
export default function ui_io(callback = Function.prototype){
const {addEventListener} = EventTarget.prototype
const promises = []
const listeners = []
const logs = []
function register(entry){
barneycarroll / eventListenerListener.js
Created May 12, 2021
Intercept & release / remove all event listeners. Partially as an easy way to make Mithril router single-SPA compliant.
View eventListenerListener.js
const {addEventListener} = EventTarget.prototype
export default function EventListenerListener({
blocking = false,
removing = true,
visitor = Function.prototype,
} = {}){
if(this instanceof EventListenerListener){}
else return new EventListenerListener(...arguments)
View Muty.2.js
const muties = new Set
class Muty extends MutationObserver {
barneycarroll / .js
Last active Mar 31, 2021
Simple CSS-in-JS via speculative 'MFX' idiom. MFX inverts the typical convenience component interface for Mithril: 1) no opportunity to return virtual DOM; 2) completely flexible input signature; 3) executes on every render; 4) returns a lifecycle dictionary. The mechanism is a very simple wrapper for a lifecycled fragment which always produces …
View .js
import css from './css.js'
let color = 'red'
let fontFamily = 'sans-serif'
m.mount(document.body, {
view: () => [
color: ${ color };
barneycarroll / mithril.steps.js
Created Mar 26, 2021
What if we could yield & await as discrete mechanisms for stepping through lifecycle?
View mithril.steps.js
// Async generators don't actually work this way: all yields implictly mandate asynchronous (non-synchronously-blocking) resolution under the hood; so in practice it's probably better to be honest and make this unambiguously wasteful & imprecise and have all steps as explicit awaits. 🙄
const KitchenSink = steps(async function * ($){
$.view(v =>
m('p.counter', $.attrs.value, '!')
yield $.create
transition : 'none',
barneycarroll / life-cycle.js
Last active Mar 14, 2021
A generic lifecycle custom element for use in frameworks that don't implement lifecycle
View life-cycle.js
customElements.define('life-cycle', class LifeCycle extends HTMLElement {
connectedCallback(){ = 'contents'
View Table.js
export default class Table {
this._is = a => b =>
fields.every(field => a[field] === b[field])
_entries = []
get size(){
return this._entries.length