JSFiddle - React, Tailwind, and code Playground

by Danny Michaelis

HTML

<div id="render-anchor">Broken</div>

Babel + JSX

const explination = `components have a render function.
that render function is really a template tag function
the tag function will render the string as usual, but it will also go through the values and test everything to see if it is a typeof component class and it will then build that component as expected calling its render and passing data to it

all components will be 
class X extends component {}
so that typeof will pick up component and handle it properly`

class component {
	constructor(id) {
  	this.id = id
  }
  render() {
  	return false;
  }
  tag(strings, ...values) {
  	console.log('str', strings);
    console.log('val', values);
    for(const index in values) {
    	console.log(values[index], values[index] instanceof component)
    }
    return `<div>canary</div>`;
  }
  generate(htmlData) {
		//  	const htmlData = this.render();
    if(htmlData && typeof htmlData === 'string') {
    	document.getElementById('render-anchor').innerHTML = this.tag(htmlData);
    }
  }
}


class message extends component {
	constructor(id, text) {
	  super(id);
    this.text = text
  }
  render () {
  	this.tag`<div>${this.text}</div>`
  }
}

class test extends component {
	constructor(id) {
	  super(id);
  }
  render () {
  	this.tag`<div>${new message(1, 'working')}</div>`
  }
}

const t = new test(0);
t.render()