How to use the react-imported-component.printDrainHydrateMarks function in react-imported-component

To help you get started, we’ve selected a few react-imported-component 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 theKashey / react-imported-component / examples / SSR / parcel-react-ssr / server / middleware.js View on Github external
export default function middleware(req, res) {
  // Generate the server-rendered HTML using the appropriate router
  const context = {};
  const markup = ReactDOM.renderToString(
    
      
    
  ) + printDrainHydrateMarks();

  // If react-router is redirecting, do it on the server side
  if (context.url) {
    return res.redirect(301, context.url);
  }

  const usedStyles = getUsedStyles(markup, projectStyles);
  console.log('used styles', usedStyles);
  // Format the HTML using the template and send the result
  const html = generateHtml('JS will start in ~2s<br>' + markup, usedStyles);
  res.send(html);
}
github theKashey / react-imported-component / examples / SSR / parcel-react-ssr / stream-server / middleware.js View on Github external
htmlStream.on('end', () => {
    // push loaded chunks information
    headerStream.push(printDrainHydrateMarks(streamUID));
    // kill header stream on the main stream end
    headerStream.push(null);
    styledStream.end();
  });
}
github patrickleet / streaming-ssr-react-styled-components / server / lib / ssr.js View on Github external
export const ssr = getApplicationStream => (req, res) => {
  try {
    // If you were using Apollo, you could fetch data with this
    // await getDataFromTree(app);

    const context = {}
    const stream = getApplicationStream(req.originalUrl, context)

    if (context.url) {
      return res.redirect(301, context.url)
    }

    const [startingHTMLFragment, endingHTMLFragment] = getHTMLFragments({
      drainHydrateMarks: printDrainHydrateMarks()
    })

    res.status(200)
    res.write(startingHTMLFragment)
    stream.pipe(through(write, end(endingHTMLFragment))).pipe(res)
  } catch (e) {
    log.error(e)
    res.status(500)
    res.end()
  }
}
github theKashey / react-imported-component / examples / SSR / typescript-react / server / generateHtml.ts View on Github external
export default function generateHtml(markup, state, getStream) {
  // Get the serer-rendering values for the 
  const helmet = Helmet.renderStatic();

  const $template = cheerio.load(HTML_TEMPLATE);
  $template("head").append(
    helmet.title.toString() + helmet.meta.toString() + helmet.link.toString()
  );
  $template("head").append(
    ``
  );
  $template("head").append(printDrainHydrateMarks(getStream()));
  $template("#app").html(markup);

  return $template.html();
}
github theKashey / react-imported-component / examples / SSR / parcel-react-ssr / stream-server / interleaved-middleware.js View on Github external
styledStream.on('end', () =&gt; {
    res.write('');
    // push loaded chunks information
    res.write(printDrainHydrateMarks(streamUID));
    res.write('');
    res.end();
  });
}
github theKashey / react-imported-component / examples / react-hot-loader / src / App.js View on Github external
setTimeout(() => console.log('marks', printDrainHydrateMarks()), 1000);