gruujs-router/playground.js

Routing utility library for Gruu

const page = text => Gruu.createComponent({
  _type: 'span',
  textContent: text
})

const routerComp = Gruu.createComponent({
  _type: 'div',
  children: [
    {
      children: [
        GruuRouter.route('/examples/playground$', page('main')),
        {
          _type: 'div',
          children: [
            GruuRouter.route('/examples/playground/page1$', page('page1'))
          ]
        },
        page('page3'),
        GruuRouter.route('/examples/playground/page2$', page('page2'))
      ]
    }
  ]
})

const button = path => Gruu.createComponent({
  _type: 'button',
  textContent: path,
  onclick () {
    GruuRouter.router.goTo(path)
  }
})

const container = document.querySelector('#root')
Gruu.renderApp(container, [
  routerComp,
  button('/examples/playground'),
  button('/examples/playground/page1'),
  button('/examples/playground/page2')
])

// const ul = Gruu.createComponent({
//   _type: 'ul',
//   children: [
//     { _type: 'li', children: [{ _type: 'text', textContent: 1 }] },
//     {
//       children: [
//         { _type: 'li', children: [{ _type: 'text', textContent: 2 }] },
//         { _type: 'li', children: [{ _type: 'text', textContent: 3 }] }
//       ]
//     },
//     { _type: 'li', children: [{ _type: 'text', textContent: 4 }] }
//   ]
// })
//
// const container = document.querySelector('#root')
// Gruu.renderApp(container, [ul])
//
// // const timer = () => new Promise(resolve => setTimeout(resolve))
//
// async function run () {
//   ul.children = [
//     {
//       children: [
//         { _type: 'li', children: [{ _type: 'text', textContent: 9 }] },
//         { _type: 'li', children: [{ _type: 'text', textContent: 8 }] }
//       ]
//     },
//     { _type: 'li', children: [{ _type: 'text', textContent: 7 }] },
//     { _type: 'li', children: [{ _type: 'text', textContent: 6 }] }
//   ]
// }
//
// run()