JSFiddle - React, Tailwind, and code Playground

by Kris Zyp

HTML

<script src="https://rawgit.com/kriszyp/alkali/master/dist/index.js"></script>
<div id='target'></div>

CSS

.my-link {
  text-decoration: none;
}

JavaScript

let { Anchor, Variable, Span, Div } = alkali;
class MyLink extends Anchor('.my-link', {
	domain: Variable,
  path: Variable,
  description: Variable,
  *href() { // defines the href for the <a> element
		return `https://${yield this.domain}/${yield this.path}`
	},
  *title() {
    return yield this.description
  }
}) {
	created(properties) {
  	if (!properties.domain || properties.domain.valueOf().indexOf('.') === -1) {
    	properties.content = 'Invalid domain'
    }
	}
}
MyLink.children = [
  Span(['Link to: ', MyLink.path, ' ']),
  Div(MyLink.description)	
];

let link = new MyLink({
	domain: 'github.com',
  path: 'kriszyp/alkali',
  description: 'Lightweight, fast reactivity'
});

document.getElementById('target').appendChild(link);