External view files

Hello there!

First of all i’d like to say that i’m super excited with this project! It’s by far the most awesome front-end framework that i’ve seen in a long time!

I come from a backend background and i usually don’t play nice with frontend standards, but i’m getting used to it…

I’d like to know how to use a separated .html file from the view, cause i can’t deal with html and js in the same file, seems so dirty… 😦

What i’m looking for would be something like:

app.js

const choo = require('choo')
const app = choo()

app.model({
  state: { title: 'Set the title' },
  reducers: {
    update: (action, state) => ({ title: action.value })
  }
})

const mainTemplate = require('./template.html');
const mainView = (params, state, send) => choo.view(mainTemplate)

app.router((route) => [
  route('/', mainView)
])

const tree = app.start()
document.body.appendChild(tree)

template.html

<main>
    <h1>${state.title}</h1>
    <input
      type="text"
      oninput=${(e) => send('update', { value: e.target.value })}>
 </main>

is there anything similar to this?

best, rafa

[timwis]

@rafaelamorim Believe me I know the feeling - there’s some really awful code out there where JS generates HTML markdown and it starts to feel really unmaintainable. But here are some things to consider:

1. It’s actually completely valid vanilla javascript - there is no magical transpilation happening like with JSX
2. You can put your view function in its own file and think of it as your template file, just with a different file extension, and a module.exports = (params, state, send) => {} wrapper around it
3. All the cool kids are doing it

[rafaismyname]

YEP! it’s a “get used to that kid” case 😉 Thanks to everyone that helped me out on that.

Keep on the awesome work guys! You guys rock!

Best, Rafa