JSFiddle - React, Tailwind, and code Playground

by authman2

HTML

<html>
  <div id='root'>
    <script src='https://unpkg.com/@authman2/mosaic@latest/dist/index.js'></script>
    <script src='./index.js'></script>
  </div>
</html>

JavaScript

// Create the router.
const router = new Mosaic.Router('#root');

// Make some components.
const home = new Mosaic({
  router,
  actions: {
   go() {
     this.router.send('/contact');
   }
  },
  view() {
    return html`<div>
      <h1>Home Page!</h1>
      <button onclick=${this.actions.go}>Go to Contact</button>
    </div>`;
  }
});
const contact = new Mosaic({
  router,
  actions: {
   go() {
     this.router.send('/');
   }
  },
  view() {
    return html`<div>
      <h1>Contact Page!</h1>
      <button onclick=${this.actions.go}>Go to Home</button>
    </div>`;
  }
});

// Add some routes.
router.addRoute('/', home);
router.addRoute('/contact', contact);

// Paint the router!
router.paint();