❤
npm
Sign UpSign In

try-defer

0.16.3 • Public • Published

try-defer

Composes a function that will try logic and accumulate failures to be retried at a deferred time.

npm i -S try-defer

Build Status codecov

NPM

Why?

I built this library to solve the many issues surrounding server-side rendering of css (specifically within library projects for my use case). With this project, I can attempt to run a bunch of unknown code, and if it fails, serialize the failures to a string to be executed on the browser.

Usage

import tryDefer from 'try-defer'
 
const [ inBrowser, defer ] = tryDefer(() => typeof window === 'object')
 
const alert = inBrowser((...args) => window.alert(`ONLY RUN ON BROWSER => ${JSON.stringify(args)}`))
const setBG = inBrowser((color) => document.body.style.backgroundColor = color)
 
/** This may or may not work. If it is bypassed or causes an error, it will be accumulated in the replay event to be executed at a deferred time.
alert(1, 2, 3)
setBG('yellow')
alert('deffferrrrr')
alert('this is in browser')
setBG('blue')
 
// ...
 
/**
 * replay
 * reruns all of the failed calls in order.
 * any failures will be repeated again on future replays.
 */
defer.replay()

OR - if you want to have the replay embedded into the server rendered page and run on the client:

/**
 * serialize
 * serializes the replay event into a script tag that will be run when the client loads.
 */
const html = `<!doctype html>
<html>
  <head>
    ${defer.serialize()}
  </head>
  <body>
    ${content}
  </body>
</html>

OR - if you are in a React project attempting server rendering:

import React from 'react'
import { renderToString } from 'react-dom/server'
import { createMemoryHistory, match, RouterContext } from 'react-router'
import { Provider } from 'react-redux'
import { syncHistoryWithStore } from 'react-router-redux'
 
//....
 
router.use((req, res, next) => {
  let memoryHistory = createMemoryHistory(req.path)
  let store = configureStore(memoryHistory)
  let history = syncHistoryWithStore(memoryHistory, store)
 
  /* react router match history */
  match({ history, routes, location: req.url }, (error, redirectLocation, renderProps) => {
    const content = renderToString(<Provider store={store}><RouterContext {...renderProps} /></Provider>)
 
    /** Returns a component that reruns the logic in a browser environment. */
    const Replay = defer.reactReplay(React)
 
    const html = `<!doctype html>
    ${renderToString((
      <html>
        <head>
          <Replay />
        </head>
        <body>
          {content}
        </body>
      </html>
    )}`
 
    res.send(html)
  })
 
})

Readme

Keywords

none

Package Sidebar

Install

npm i try-defer

Repository

github.com/noderaider/try-defer

Homepage

try-defer.js.org

Weekly Downloads

20

Version

0.16.3

License

MIT

Last publish

Collaborators

  • cchamberlain
Try on RunKit
Report malware