How to use the @cycle/history.makeServerHistoryDriver function in @cycle/history

To help you get started, we’ve selected a few @cycle/history examples, based on popular ways it is used in public projects.

Secure your code as it's written. Use Snyk Code to scan source code in minutes - no build needed - and fix issues immediately.

github SkaterDad / cycle-snabbdom-examples / src / server / ssr.js View on Github external
//TODO: Add some of this information to the route definitions, then read them here.
  const ssrOptions = {
    domToTake: 1,
    httpToTake: 1, //potentially tie this to route defs.  some routes don't have HTTP
    isDevMode: process.env.NODE_ENV !== 'production',
  }

  let wrappedAppFn = wrapAppResultWithBoilerplate(app, ssrOptions)

  console.log('Server rendering!')

  //Run the Cycle app.
  let cycleApp = Cycle.run(wrappedAppFn, {
    DOM: makeHTMLDriver(),
    HTTP: makeHTTPDriver(),
    History: makeServerHistoryDriver({pathname: req.url}),
  })
  let sources = cycleApp.sources

  //Subscribe to the HTML Driver events
  //HTML driver returns a string representation of the vTree
  //When the string is emitted, send the HTML response to the client.
  let html$ = sources.DOM.map(prependHTML5Doctype)
  html$.subscribe(appHTML => {
    //As if by magic, this knows when your DOM is done being updated.
    //To illustrate this, the repo-list.js component emmits the DOM 4 times.
    //This log message only happens once, after all the DOM updates are done!
    //I made the HTTP request delayed by 1000ms, and this still only replied at the end.
    console.log(`${new Date().toString()} - Sending HTML reply!`)
    res.send(appHTML)
  })
}

@cycle/history

The standard history driver for Cycle.js

MIT
Latest version published 3 years ago

Package Health Score

65 / 100
Full package analysis

Similar packages