Universal JavaScript

Lancer's flagship feature is being as close to plain HTML as possible, allowing you to learn and rely on knowledge you can use anywhere. However, sometimes you just need a fancy UI with dynamic API querying, and plain HTML just won't cut it.

Fortunately, Lancer has a great solution. It turns out the <include> tag has a second, more advanced usage: JavaScript SSR & hydration!

Let's say you have an html file that looks like this:

<page title="Universal JavaScript Example">
<h1>Hello!</h1>
<include src="greeter.js" args="{ name: 'Alice' }">

Notice how we're using <include> for a .js file instead of a .html file! And also note how we're passing in data via the args attribute.

Now let's look at client/greeter.js, the file we're including:

import m from 'mithril'

const MyComponent = {
  view({ attrs }) {
    return m('div', `Welcome, ${attrs.name}!`)
  }
}

// The cool stuff!
export default function mount({ dom, args }) {
  if (dom) {
    m.mount(dom, MyComponent)
  }
  else {
    return m(MyComponent, { name: args.name })
  }
}

And that's it! Lancer will run your .js file twice:

1. On the server to generate HTML (this is when dom in function mount is null)
2. On the client via a generated script tag to run on page load for user interactivity 😎 (this is when dom in function mount is present)

---

Next: Markdown Support