choo-content/example/index.js at master · dbtek/choo-content · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
var choo = require('choo')
var html = require('choo/html')
var css = require('sheetify')

var List = require('../list')

// add tailwind
css('tailwindcss/dist/tailwind.css')

var app = choo()
// init component preview
app.use(require('choo-component-preview')())

// store
app.use((state, emitter) => {
  state.users = [{
    id: 1,
    name: 'Jane Doe'
  }, {
    id: 2,
    name: 'Selin Ruhle'
  }]
})

// User list component
class UsersList extends List {
  static identity () {
    return 'users-list' // should be unique within components
  }

  getItems () {
    return this.state.users
  }

  header () {
    return super.header('Users')
  }
}

var layout = (view) => (s, e, r) => html `
  <body class="max-w-md mx-auto py-2">
    <div class="bg-indigo p-4 rounded text-white">
      <span>Choo Content</span>
    </div>
    <main class="py-2">
      ${view(s, e, r)}
    </main>
  </body>
`

// bind a component to a route
app.route('/users', layout((state, emit, render) => render(UsersList)))


// main route
app.route('/', layout(() => html `
  <ul>
    <li><a href="/users">Users</a></li>
  </li>
`))


// bootstrap app
app.mount(document.body)