import Rill from 'rill'
import page from '@rill/page'
import renderer from '@rill/svelte'
import HomeView from './home.html'
// Create a rill app.
const app = Rill()
// Setup the document template.
app.get(page
  .html({ lang: 'en' })
  .meta({ charset: 'utf8' })
  .title('My Svelte App')
  .meta({ name: 'author', content: 'Dylan Piercey' })
  .meta({ name: 'descripton', content: 'Universal JS is awesome' })
  .link({ rel: 'stylesheet', href: 'index.css' })
  .script({ src: 'index.js', async: true })
)
// Setup svelte middleware.
app.get(renderer())
// Render a Svelte template.
app.get('/home', ({ res, locals }) => {
  // Set locals passed in as data.
  locals.title = '@rill/svelte'
  // Set a svelte component as the body to render it.
  res.body = HomeView
})

// Use a query selector to set the root element.
app.use(renderer({ target: '#my-element' }))