JSFiddle - React, Tailwind, and code Playground

by Danny Michaelis

Babel + JSX

/* use Foo without calling new
const _Foo = Foo;
  Foo = function(...args) {
    return new _Foo(...args);
  };
  Foo.prototype = _Foo.prototype;
*/

class Component {
	constructor(id=0) {
  	this.id = id;
    this.children = {}    
  }  
  use (cmp, id, ...args){
  	if (!this.children[id]) {
    	this.children[id] = new cmp;
    }
    return this.children[id].render(args)
  }
  render() {}
  
  tag(strings, ...values) {
  	log(values)
  	for (const index in values) {
    	if (values[index] instanceof Component) {
      	console.log(typeof values[index])
      }
    }
  	return `<div>working</div>`
  }
}

class ListItem extends Component {
	constructor (id = 0) {
  	super(id);
  }  
  render (number) {
  	return `<li>${number}</li>`
  }
}

class List extends Component {
	constructor (id = 0) {
  	super(id);
  }  
  render (...args) {
  	return `<ul id="list-id" class="list-class" onclick="alert('test')" data-fake-attr data-fake-attr-with-value="val">
      	${
					args.map( (number, index)  => {
          	return  this.use(ListItem, this.id+index, number)
          }).join('')
        }
      </ul>`
  }
}

function log(value) {
	console.log('log', JSON.stringify(value, null, 2));
}

const list = new List();
const listString = list.render(1, 2, 3)
const genEl = document.createElement('div');
genEl.innerHTML = listString;
console.log(genEl)
console.log(genEl.childNodes)
console.log(genEl.childNodes[0])
console.log(genEl.childNodes[0].attributes)