How to use used-styles - 6 common examples

To help you get started, we’ve selected a few used-styles 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 / stream-server / interleaved-middleware.js View on Github external
const readable = () => {
  const s = new Readable();
  s._read = () => true;
  return s;
};

const readableString = string => {
  const s = new Readable();
  s.push(string);
  s.push(null);
  s._read = () => true;
  return s;
};

let projectStyles = {};
getProjectStyles(__dirname + '/../client').then(x => {
  projectStyles = x;
  console.log(x);
});

const manifect = JSON.parse(fs.readFileSync(__dirname + '/../client/parcel-manifest.json'));

export default function middleware(req, res) {
  // Generate the server-rendered HTML using the appropriate router
  const context = {};

  let streamUID = 0;
  const htmlStream = ReactDOM.renderToNodeStream(
     streamUID = uid}>
github theKashey / react-imported-component / examples / SSR / parcel-react-ssr / server / middleware.js View on Github external
// Middleware for the server-rendering

import {printDrainHydrateMarks} from 'react-imported-component';
import React from 'react';
import ReactDOM from 'react-dom/server';
import {StaticRouter} from 'react-router-dom';

import App from '../app/App';
import generateHtml from './generateHtml';
import {getProjectStyles, getUsedStyles} from 'used-styles';

let projectStyles;
getProjectStyles(__dirname+'/../client').then(x => {
  projectStyles = x;
  console.log(x);
});

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);
github theKashey / react-imported-component / examples / SSR / parcel-react-ssr / stream-server / middleware.js View on Github external
const readable = () => {
  const s = new Readable();
  s._read = () => true;
  return s;
};

const readableString = string => {
  const s = new Readable();
  s.push(string);
  s.push(null);
  s._read = () => true;
  return s;
};

let projectStyles = {};
getProjectStyles(__dirname + '/../client').then(x => {
  projectStyles = x;
  console.log(x);
});

const manifect = JSON.parse(fs.readFileSync(__dirname + '/../client/parcel-manifest.json'));

export default function middleware(req, res) {
  // Generate the server-rendered HTML using the appropriate router
  const context = {};

  let streamUID = 0;
  const htmlStream = ReactDOM.renderToNodeStream(
     streamUID = uid}>
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
);

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

  // create a "header" stream
  const headerStream = readable();

  // create a style steam
  const styledStream = createStyleStream(projectStyles, (style) =&gt; {
    // emit a line to header Stream
    headerStream.push(`\n`);
  });

  // allow client to start loading js bundle
  res.write(``);

  const middleStream = readableString('<div id="app">');
  const endStream = readableString('</div>');

  const streams = [
    headerStream,
    middleStream,
    styledStream,
    endStream,
  ];
github theKashey / react-imported-component / examples / SSR / parcel-react-ssr / stream-server / interleaved-middleware.js View on Github external
let streamUID = 0;
  const htmlStream = ReactDOM.renderToNodeStream(
     streamUID = uid}&gt;
      
        
      
    
  );

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

  // create a style steam
  const styledStream = createStyleStream(projectStyles, (style) =&gt; (
    // just return it
    createLink(`dist/${style}`)
  ));

  // allow client to start loading js bundle
  res.write(`<div id="app">`);

  const endStream = readableString('');

  const streams = [
    styledStream,
    endStream,
  ];

  MultiStream(streams).pipe(res);
</div>

used-styles

Collect styles used on to create a page

MIT
Latest version published 5 months ago

Package Health Score

65 / 100
Full package analysis