From 4ed673018daf1b54fd918409c99d6ff7364ed8de Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=C3=98yvind=20Saltvik?= Date: Tue, 13 Oct 2020 19:56:07 +0200 Subject: [PATCH] fix(examples): update more examples to use new assets manifest --- examples/with-all-experimental/src/server.js | 30 +++++++++++-------- .../with-custom-babel-config/src/server.js | 25 ++++++++++++---- .../with-custom-webpack-config/src/server.js | 24 +++++++++++---- .../with-experimental-refresh/src/server.js | 24 +++++++++++---- .../with-firebase-functions/src/server.js | 24 +++++++++++---- examples/with-heroku/src/server.js | 26 +++++++++++----- 6 files changed, 110 insertions(+), 43 deletions(-) diff --git a/examples/with-all-experimental/src/server.js b/examples/with-all-experimental/src/server.js index 44958958b..ef73a0207 100644 --- a/examples/with-all-experimental/src/server.js +++ b/examples/with-all-experimental/src/server.js @@ -4,7 +4,22 @@ import express from 'express'; import { renderToString } from 'react-dom/server'; import { StaticRouter } from 'react-router-dom'; -const chunks = require(process.env.RAZZLE_CHUNKS_MANIFEST); +const assets = require(process.env.RAZZLE_ASSETS_MANIFEST); + +const cssLinksFromAssets = (assets, entrypoint) => { + return assets.entrypoints[entrypoint] ? assets.entrypoints[entrypoint].css ? + assets.entrypoints[entrypoint].css.map(asset=> + `` + ).join('') : '' : ''; +}; + + +const jsScriptTagsFromAssets = (assets, entrypoint, extra = '') => { + return assets.entrypoints[entrypoint] ? assets.entrypoints[entrypoint].js ? + assets.entrypoints[entrypoint].js.map(asset=> + `` + ).join('') : '' : ''; +}; const server = express(); @@ -25,20 +40,11 @@ export const renderApp = (req, res) => { Welcome to Razzle - ${ - chunks.client.css - ? chunks.client.css.map(css=>``).join('') - : '' - } + ${cssLinksFromAssets(assets, 'client')}
${markup}
- ${ - chunks.client.js - ? chunks.client.js.filter(js=>/\.js$/.test(js)) - .map(js=>``).join('') - : '' - } + ${jsScriptTagsFromAssets(assets, 'client', ' defer crossorigin')} `; diff --git a/examples/with-custom-babel-config/src/server.js b/examples/with-custom-babel-config/src/server.js index ddd421ca3..f189819ab 100644 --- a/examples/with-custom-babel-config/src/server.js +++ b/examples/with-custom-babel-config/src/server.js @@ -7,6 +7,21 @@ import { renderToString } from 'react-dom/server'; const assets = require(process.env.RAZZLE_ASSETS_MANIFEST); +const cssLinksFromAssets = (assets, entrypoint) => { + return assets.entrypoints[entrypoint] ? assets.entrypoints[entrypoint].css ? + assets.entrypoints[entrypoint].css.map(asset=> + `` + ).join('') : '' : ''; +}; + +const jsScriptTagsFromAssets = (assets, entrypoint, extra = '') => { + return assets.entrypoints[entrypoint] ? assets.entrypoints[entrypoint].js ? + assets.entrypoints[entrypoint].js.map(asset=> + `` + ).join('') : '' : ''; +}; + + const server = express(); server .disable('x-powered-by') @@ -30,15 +45,13 @@ server Welcome to Razzle - ${assets.client.css - ? `` - : ''} - ${process.env.NODE_ENV === 'production' - ? `` - : ``} + ${cssLinksFromAssets(assets, 'client')}
${markup}
+ ${process.env.NODE_ENV === 'production' + ? jsScriptTagsFromAssets(assets, 'client', ' defer') + : jsScriptTagsFromAssets(assets, 'client', ' defer crossorigin')} ` ); diff --git a/examples/with-custom-webpack-config/src/server.js b/examples/with-custom-webpack-config/src/server.js index 1d61e8f94..bd738dd62 100644 --- a/examples/with-custom-webpack-config/src/server.js +++ b/examples/with-custom-webpack-config/src/server.js @@ -5,6 +5,20 @@ import { renderToString } from 'react-dom/server'; const assets = require(process.env.RAZZLE_ASSETS_MANIFEST); +const cssLinksFromAssets = (assets, entrypoint) => { + return assets.entrypoints[entrypoint] ? assets.entrypoints[entrypoint].css ? + assets.entrypoints[entrypoint].css.map(asset=> + `` + ).join('') : '' : ''; +}; + +const jsScriptTagsFromAssets = (assets, entrypoint, extra = '') => { + return assets.entrypoints[entrypoint] ? assets.entrypoints[entrypoint].js ? + assets.entrypoints[entrypoint].js.map(asset=> + `` + ).join('') : '' : ''; +}; + const server = express(); server @@ -20,15 +34,13 @@ server Welcome to Razzle - ${assets.client.css - ? `` - : ''} - ${process.env.NODE_ENV === 'production' - ? `` - : ``} + ${cssLinksFromAssets(assets, 'client')}
${markup}
+ ${process.env.NODE_ENV === 'production' + ? jsScriptTagsFromAssets(assets, 'client', ' defer') + : jsScriptTagsFromAssets(assets, 'client', ' defer crossorigin')} ` ); diff --git a/examples/with-experimental-refresh/src/server.js b/examples/with-experimental-refresh/src/server.js index 382a784e4..ec3adad78 100644 --- a/examples/with-experimental-refresh/src/server.js +++ b/examples/with-experimental-refresh/src/server.js @@ -5,6 +5,20 @@ import { renderToString } from 'react-dom/server'; const assets = require(process.env.RAZZLE_ASSETS_MANIFEST); +const cssLinksFromAssets = (assets, entrypoint) => { + return assets.entrypoints[entrypoint] ? assets.entrypoints[entrypoint].css ? + assets.entrypoints[entrypoint].css.map(asset=> + `` + ).join('') : '' : ''; +}; + +const jsScriptTagsFromAssets = (assets, entrypoint, extra = '') => { + return assets.entrypoints[entrypoint] ? assets.entrypoints[entrypoint].js ? + assets.entrypoints[entrypoint].js.map(asset=> + `` + ).join('') : '' : ''; +}; + const server = express(); server @@ -21,15 +35,13 @@ server Welcome to Razzle - ${ - assets.client.css - ? `` - : '' - } + ${cssLinksFromAssets(assets, 'client')}
${markup}
- + ${process.env.NODE_ENV === 'production' + ? jsScriptTagsFromAssets(assets, 'client', ' defer') + : jsScriptTagsFromAssets(assets, 'client', ' defer crossorigin')} ` ); diff --git a/examples/with-firebase-functions/src/server.js b/examples/with-firebase-functions/src/server.js index 08aa210d7..bd738dd62 100644 --- a/examples/with-firebase-functions/src/server.js +++ b/examples/with-firebase-functions/src/server.js @@ -5,6 +5,20 @@ import { renderToString } from 'react-dom/server'; const assets = require(process.env.RAZZLE_ASSETS_MANIFEST); +const cssLinksFromAssets = (assets, entrypoint) => { + return assets.entrypoints[entrypoint] ? assets.entrypoints[entrypoint].css ? + assets.entrypoints[entrypoint].css.map(asset=> + `` + ).join('') : '' : ''; +}; + +const jsScriptTagsFromAssets = (assets, entrypoint, extra = '') => { + return assets.entrypoints[entrypoint] ? assets.entrypoints[entrypoint].js ? + assets.entrypoints[entrypoint].js.map(asset=> + `` + ).join('') : '' : ''; +}; + const server = express(); server @@ -20,15 +34,13 @@ server Welcome to Razzle - ${assets.client.css - ? `` - : ''} - ${process.env.NODE_ENV === 'production' - ? `` - : ``} + ${cssLinksFromAssets(assets, 'client')}
${markup}
+ ${process.env.NODE_ENV === 'production' + ? jsScriptTagsFromAssets(assets, 'client', ' defer') + : jsScriptTagsFromAssets(assets, 'client', ' defer crossorigin')} ` ); diff --git a/examples/with-heroku/src/server.js b/examples/with-heroku/src/server.js index b0067e1d0..4e53233b9 100644 --- a/examples/with-heroku/src/server.js +++ b/examples/with-heroku/src/server.js @@ -5,6 +5,20 @@ import { renderToString } from 'react-dom/server'; const assets = require(process.env.RAZZLE_ASSETS_MANIFEST); +const cssLinksFromAssets = (assets, entrypoint) => { + return assets.entrypoints[entrypoint] ? assets.entrypoints[entrypoint].css ? + assets.entrypoints[entrypoint].css.map(asset=> + `` + ).join('') : '' : ''; +}; + +const jsScriptTagsFromAssets = (assets, entrypoint, extra = '') => { + return assets.entrypoints[entrypoint] ? assets.entrypoints[entrypoint].js ? + assets.entrypoints[entrypoint].js.map(asset=> + `` + ).join('') : '' : ''; +}; + const server = express(); server @@ -21,15 +35,13 @@ server Welcome to Razzle - ${ - assets.client.css - ? `` - : '' - } + ${cssLinksFromAssets(assets, 'client')} -
${markup}
- +
${markup}
+ ${process.env.NODE_ENV === 'production' + ? jsScriptTagsFromAssets(assets, 'client', ' defer') + : jsScriptTagsFromAssets(assets, 'client', ' defer crossorigin')} ` );