Try-defer NPM | npm.io

try-defer

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

npm i -S try-defer

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)
  })

})

babel-core chai fire-hydrant serialize-javascript

@infinitebrahmanuniverse/nolb-try @everything-registry/sub-chunk-2975 universal-styles gridiron-example

7 years ago

8 years ago

8 years ago

8 years ago

8 years ago