JSFiddle - React, Tailwind, and code Playground

by lega911

HTML

<script src="https://angularlight.org/bin/alight_1.0.alpha.last.js"></script>
<b>{{ctx.href()}}</b>
<br/>
<button @click="ctx.go('/modal?1')">go 1</button>
<button @click="ctx.go('/modal?2')">go 2</button>

<div al-if="ctx.route('/modal') && ctx.search() == '1'">
First div
</div>
<div al-else-if="ctx.route('/modal') && ctx.search() == '2'">
Second div
</div>
<div al-else>
Some div
</div>

CSS

div {
  border: 1px solid blue;
  padding: 5px;
}

JavaScript

var app = {
	ctx: {
  	href: () => document.location.href,
    path: () => document.location.pathname,
    search: () => document.location.search.slice(1),
    go: (path) => history.pushState(null, null, path),
    route: (path) => path == app.ctx.path()
  }
};

var render = alight('body', app);

window.onpopstate = () => render.scan()  // redraw