How to use the emotion-server.renderStylesToNodeStream function in emotion-server

To help you get started, we’ve selected a few emotion-server 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 emotion-js / emotion / packages / emotion-server / types / tests.tsx View on Github external
// $ExpectError
extractCritical(renderedString, undefined as any)

// $ExpectType string
renderStylesToString(renderedString)
// $ExpectError
renderStylesToString()
// $ExpectError
renderStylesToString(renderedString, undefined as any)

// $ExpectType ReadWriteStream
renderStylesToNodeStream()
// $ExpectError
renderStylesToNodeStream(undefined as any)

renderedNodeStream.pipe(renderStylesToNodeStream())
github gourmetjs / gourmet-ssr / contrib / emotion-renderer / gmsrc / getEmotionServerRenderer.js View on Github external
renderToMedium(gmctx, element) {
      element = super.renderToMedium(gmctx, element);

      if (element) {
        if (typeof element === "string") {
          return renderStylesToString(element);
        } else {
          const output = renderStylesToNodeStream();
          return pump(element, output, err => {
            // `pump` doesn't forward the error from source to output stream
            // (perhaps) per Node's default behavior. It just silently destroys
            // the output stream to make sure no leak occurs.
            if (err)
              output.destroy(err);
          });
        }
      } else {
        return element;
      }
    }
  };
github SubstraFoundation / substra-frontend / src / server / render.js View on Github external
const renderStreamed = async (ctx, path, clientStats, outputPath) => {
    // Grab the CSS from our sheetsRegistry.
    clearChunks();

    const store = await configureStore(ctx);

    if (!store) return; // no store means redirect was already served
    const stateJson = JSON.stringify(store.getState());

    const {css} = flushChunks(clientStats, {outputPath});

    const chunkNames = [];
    const app = createApp(App, store, chunkNames);

    const stream = renderToNodeStream(app).pipe(renderStylesToNodeStream());

    // flush the head with css & js resource tags first so the download starts immediately
    const early = earlyChunk(css, stateJson);


    // DO not use redis cache on dev
    let mainStream;
    if (process.env.NODE_ENV === 'development') {
        mainStream = ctx.body;
    }
    else {
        mainStream = createCacheStream(path);
        mainStream.pipe(ctx.body);
    }

    mainStream.write(early);
github lskjs / lskjs / packages / reactapp / src / ReactApp.server.js View on Github external
async renderToNodeStream({ res, render, component }) {
    const delemitter = ``;
    const content = await render(delemitter);
    const [before, after] = content.split(delemitter);
    res.write(before);
    const stream = renderToNodeStream(component).pipe(renderStylesToNodeStream());
    stream.pipe(res, { end: false });
    stream.on('end', () => {
      res.write(after);
      res.end();
    });
  }
github staylor / graphql-wordpress / packages / draft / src / server / router / serve.js View on Github external
console.log(e);
  }

  const state = client.cache.extract();

  const [header, footer] = template({
    helmet: res.locals.helmetContext.helmet,
    stylesheets,
    state,
    assets,
  });

  res.status(200);
  res.write(header);
  renderToNodeStream(app)
    .pipe(renderStylesToNodeStream())
    .pipe(
      through(
        function write(data) {
          this.queue(data);
        },
        function end() {
          this.queue(footer);
          this.queue(null);
        }
      )
    )
    .pipe(res);
};
github contentz-tech / contentz / packages / social / src / lib / generate-og.js View on Github external
return new Promise(resolve => {
    let html = "";
    const stream = renderToStaticNodeStream(ui).pipe(
      renderStylesToNodeStream()
    );
    stream.on("data", chunk => {
      html += chunk;
    });
    stream.on("end", () => {
      resolve(html);
    });
  });
}
github contentz-tech / contentz / packages / core / src / lib / render-content.js View on Github external
return new Promise(resolve => {
    let html = "";
    const stream = renderToStaticNodeStream(ui).pipe(
      renderStylesToNodeStream()
    );
    stream.on("data", chunk => {
      html += chunk;
    });
    stream.on("end", () => {
      resolve(html);
    });
  });
}
github qiwi / pijma / packages / app / src / server.tsx View on Github external
const device = devices[req.device.type]

    const props = {
      scripts: clientStats[device]
        .chunks
        .filter(chunk => chunk.initial)
        .reduce((files, chunk) => files.concat(`${clientStats[device].publicPath}${chunk.files[0]}`), []),
    }

    res.status(200)
    res.contentType('text/html; charset=utf-8')
    res.write('')

    const Server = servers[req.device.type]

    const stream = renderToNodeStream().pipe(renderStylesToNodeStream())

    stream.pipe(res, {end: false})
    stream.on('end', () => res.end())

  }
github bs32g1038 / node-blog / react-blog / src / server.tsx View on Github external
}

            
            
                <div id="root">`
        );
        const stream = renderToNodeStream(
            
                
                    
                
             as any
        );
        stream.pipe(renderStylesToNodeStream());
        stream.pipe(res, { end: false });
        return stream.on('end', () =&gt; {
            res.write(`</div>
                ${
                process.env.NODE_ENV === 'production'
                    ? ``
                    : ``
                }
                
                `);
            return res.end();
        });
    });
};

emotion-server

Extract and inline critical css with emotion for server side rendering.

MIT
Latest version published 3 years ago

Package Health Score

78 / 100
Full package analysis