barneycarroll

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
  Array.prototype.forEach.call(original.attributes, ({name, value}) => {
    replacement.setAttribute(name, value)
  })
  
  // Persist contents

barneycarroll

// Determine whether or not we need to run fallback code by testing for `:target` support.
var targetSupport = ( function targetSupport(){
    var iframe = document.createElement( 'iframe' );
    var body   = document.getElementsByTagName( 'body' )[ 0 ];
    var doc;
    var outcome;

    iframe.tabindex      = -1;
    iframe.style.display = 'none';

barneycarroll

var animating = false;

// Define an animator consisting of optional incoming and outgoing animations. 
// alwaysAnimate is false unless specified as true: false means an incoming animation will only trigger if an outgoing animation is also in progress.
// forcing dontClone to true means the outward animation will use the original element rather than a clone. This could improve performance by recycling elements, but can lead to trouble: clones have the advantage of being stripped of all event listeners.
function animator( incoming, outgoing, alwaysAnimate, dontClone ){
	// The resulting animator can be applied to any number of components
	return function animate( x, y, z ){
		var config;
		var parent;

barneycarroll

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

[STEPS!](https://flems.io/#0=N4IgzgxgTg9gNnEAuA2gBgDQA4DsBGAXQxADMBLOAUzGRVADsBDAW0uRGYFcAXATwCYAdACsaxCDHrdKU9hPphuAAi7cy1JQF4l9SgHclAZUrcAOvXMQ4jMGCUBZHryWUAHtPoATO4+6M1kgDyAEZglFAAbuFKwOZKSjCh4VEAFACUsfTx8arqYIKMnp4p3AAWZGBpcdnV8WCcAA7hgolhkZQpgl2MUADmnKxSldUAvubVnhXyuhDc6ZnZKjx5gp6UVNIl5cMWWdn1TVCrU5Izc10FfQMy3DvxY-QP5m4NMFDKaySMnHDKIcKUWYFWxkXr0FLVEiceizMiSJZ8FIwBoBBRaBG8FoouEKDBKPx9Ex4iCMBDBRgQADWGVqSnkiiUFQAglAoIxnOiWWzMczWeykdjJHdsvTlBVDNwoGR6L10XwmjASAlBWjNGqlAByRRSmUa8Z7eJkEgpXncpQAMnNytR+SoMrKWnVeAtVuRNvQBEd2g1GqqBuyKWAbpxYGJpLg5KpI3Rql4ftp6zCjON4sl0tlAB8M4ywFz2TT-YaU2AJTren7Fotg0L0ShqwoCNVafF63ZtAtK-F-GngjwNJWkPioJxKBhm9lu1Le9IAGIUaRQJSD1tjwtKB7xcdGlIAQgJvRMFc71pDgnqwUllEocuHlFpG6UtO3e56B+4R8W+5M6M8MAg1ykJt-W3EkyQpalxygExOCgLJpkBOZQIjcCP0ff1EzvNcoO4GC4NOBDaVpKEYVROl8NmFIkMjSkYycQQqJQjtFlFBIknaRdtF0AxfF4Sjw2oo9x1aZJmmE9oSlfIkTyFQSsOg2DWLaKIoHvUZV2qJjpIUQdNK7bgez7Oxj0WQdJRHVdO0nMhp0oQI4E8AA1UkRwHIdzPHCBSh6CkFwAEX8RhjKXNzRw8ry2VmcJ-L8OzHOc69TNvCzK08ihPAAGQqZQguyRL3LXc9L2vHKTJC5L7nKtDP0k7hB1-f9Bm4dT-Q

barneycarroll

const {addEventListener} = EventTarget.prototype

export default function EventListenerListener({
    blocking = false, 
    removing = true, 
    visitor  = Function.prototype,
  } = {}){
  if(this instanceof EventListenerListener){}
  else return new EventListenerListener(...arguments)
  

barneycarroll

const muties = new Set

class Muty extends MutationObserver {
  observe(){
    muties.add(this)
    
    super.observe(...arguments)
  }

  disconnect(){

barneycarroll

Amok is a live editing tool for javascript development. It is beyond awesome. It is the future of javascript development.

Mithril is a javascript framework for building brilliant applications.

This simple test case shows how we can use Amok's event handlers to trigger redraws as and when code is dynamically recompiled in the browser. It's a little taste of the awesome to come.

To use this demo:

1. Install Amok
2. You'll need Node

barneycarroll

// 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
  
  style({
    transition : 'none',

barneycarroll

customElements.define('life-cycle', class LifeCycle extends HTMLElement {
  constructor(){
    super()
  }
  
  connected(){}
  connectedCallback(){
    this.style.display = 'contents'
    
    this.connected(...arguments)