catalyst-core-internal 0.0.1-beta.35 → 0.0.1-beta.37
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/AssetsCache.js
ADDED
|
@@ -0,0 +1,114 @@
|
|
|
1
|
+
class AssetsCache {
|
|
2
|
+
constructor() {
|
|
3
|
+
this.cssCache = new Map()
|
|
4
|
+
this.preloadJSLinkCache = new Map()
|
|
5
|
+
}
|
|
6
|
+
|
|
7
|
+
async cacheCss(key, data) {
|
|
8
|
+
let pageCss = ""
|
|
9
|
+
let listOfCachedAssets = new Map()
|
|
10
|
+
if (Array.isArray(data)) {
|
|
11
|
+
try {
|
|
12
|
+
if (process.env.NODE_ENV === "production") {
|
|
13
|
+
data.map((assetChunk) => {
|
|
14
|
+
const assetPathArr = assetChunk.key.split("/")
|
|
15
|
+
const assetName = assetPathArr[assetPathArr.length - 1]
|
|
16
|
+
const ext = path.extname(assetName)
|
|
17
|
+
|
|
18
|
+
if (ext === ".css") {
|
|
19
|
+
// if css file has not already been cached, add the content of this CSS file in pageCSS
|
|
20
|
+
if (
|
|
21
|
+
!listOfCachedAssets.get(assetName) &&
|
|
22
|
+
!this.cssCache.get(key)?.listOfCachedAssets?.get(assetName)
|
|
23
|
+
) {
|
|
24
|
+
pageCss += fs.readFileSync(
|
|
25
|
+
path.resolve(
|
|
26
|
+
process.env.src_path,
|
|
27
|
+
`${process.env.BUILD_OUTPUT_PATH}/public`,
|
|
28
|
+
assetName
|
|
29
|
+
)
|
|
30
|
+
)
|
|
31
|
+
listOfCachedAssets.set(assetName, true)
|
|
32
|
+
}
|
|
33
|
+
}
|
|
34
|
+
})
|
|
35
|
+
} else {
|
|
36
|
+
const cssRequests = data.map((file) => {
|
|
37
|
+
const ext = path.extname(file.key)
|
|
38
|
+
if (ext === ".css") {
|
|
39
|
+
return getAssetFromWebpackDevServer(file.key)
|
|
40
|
+
}
|
|
41
|
+
})
|
|
42
|
+
const resolvedCss = await Promise.all(cssRequests)
|
|
43
|
+
resolvedCss.forEach((cssContent) => {
|
|
44
|
+
pageCss += cssContent
|
|
45
|
+
})
|
|
46
|
+
}
|
|
47
|
+
} catch (error) {
|
|
48
|
+
if (process.env.NODE_ENV == "development") {
|
|
49
|
+
console.log(
|
|
50
|
+
"Error While Extracting The Chunk: ",
|
|
51
|
+
path.resolve(process.env.src_path, `${process.env.BUILD_OUTPUT_PATH}/public`)
|
|
52
|
+
)
|
|
53
|
+
}
|
|
54
|
+
}
|
|
55
|
+
}
|
|
56
|
+
// if css cache exists for a route and there are some uncached css, add that css to the cache
|
|
57
|
+
// this will run on subsequent hits and will add css of uncached widgets to the cache
|
|
58
|
+
if (process.cssCache[key]) {
|
|
59
|
+
if (pageCss !== "") {
|
|
60
|
+
let existingListOfCachedAssets = process.cssCache[key].listOfCachedAssets
|
|
61
|
+
const newPageCSS = process.cssCache[key].pageCss + pageCss
|
|
62
|
+
let newListOfCachedAssets = { ...existingListOfCachedAssets, ...listOfCachedAssets }
|
|
63
|
+
process.cssCache[key] = { pageCss: newPageCSS, listOfCachedAssets: newListOfCachedAssets }
|
|
64
|
+
}
|
|
65
|
+
} else {
|
|
66
|
+
// create css cache for a page. This will run on the first hit.
|
|
67
|
+
this.cssCache.set(key, { pageCss, listOfCachedAssets })
|
|
68
|
+
}
|
|
69
|
+
}
|
|
70
|
+
|
|
71
|
+
fetchCss(key) {
|
|
72
|
+
return this.cssCache.get(key).pageCss
|
|
73
|
+
}
|
|
74
|
+
|
|
75
|
+
cachePreloadJSLinks(key, data) {
|
|
76
|
+
let preloadJSLinks = []
|
|
77
|
+
if (Array.isArray(data)) {
|
|
78
|
+
try {
|
|
79
|
+
preloadJSLinks = data.filter((asset) => asset?.props?.as === "script")
|
|
80
|
+
} catch (error) {
|
|
81
|
+
console.dir({
|
|
82
|
+
service_name: `pwa-${process.env.APPLICATION}-node-server`,
|
|
83
|
+
loglevel: "error",
|
|
84
|
+
version: "v2",
|
|
85
|
+
message: "\n \n =====> Error While Extracting The Chunk: \n ",
|
|
86
|
+
traceback: error,
|
|
87
|
+
})
|
|
88
|
+
}
|
|
89
|
+
}
|
|
90
|
+
console.dir({
|
|
91
|
+
service_name: "pwa-node-server",
|
|
92
|
+
loglevel: "info",
|
|
93
|
+
version: "v2",
|
|
94
|
+
message: `\n========= Cached For preloadJSLinkCache: ${key} ============\n`,
|
|
95
|
+
})
|
|
96
|
+
this.preloadJSLinkCache.set(key, preloadJSLinks)
|
|
97
|
+
}
|
|
98
|
+
|
|
99
|
+
fetchPreloadJSLinks(key) {
|
|
100
|
+
return this.preloadJSLinkCache.get(key)
|
|
101
|
+
}
|
|
102
|
+
|
|
103
|
+
async getAssetFromWebpackDevServer(assetPath = "") {
|
|
104
|
+
try {
|
|
105
|
+
if (process.env.NODE_ENV !== "production") {
|
|
106
|
+
const response = await fetch(assetPath)
|
|
107
|
+
const textContent = await response.text()
|
|
108
|
+
return textContent
|
|
109
|
+
}
|
|
110
|
+
} catch (error) {
|
|
111
|
+
console.log("Unable to fetch asset from webpack dev server", error)
|
|
112
|
+
}
|
|
113
|
+
}
|
|
114
|
+
}
|
|
@@ -3,10 +3,9 @@
|
|
|
3
3
|
* @param {object} jsx - page jsx code
|
|
4
4
|
* @param {object} initialState - initial state object for redux store
|
|
5
5
|
* @param {object} firstFoldCss - style elements extracted for initial page load
|
|
6
|
-
* @param {object} firstFoldJS - javascript elements extracted for initial page load
|
|
7
6
|
* @param {object} fetcherData - contains data from executing serverFetcher function
|
|
8
7
|
* @param {object} children - contains any child elements defined within the component
|
|
9
|
-
*/function Body(props){const{jsx="",initialState={},
|
|
8
|
+
*/function Body(props){const{jsx="",initialState={},fetcherData={},children}=props;return/*#__PURE__*/_react.default.createElement("body",null,jsx,/*#__PURE__*/_react.default.createElement("script",{/* eslint-disable */dangerouslySetInnerHTML:{__html:`
|
|
10
9
|
window.__INITIAL_STATE__ = ${JSON.stringify(initialState)}
|
|
11
10
|
window.__ROUTER_INITIAL_DATA__ = ${JSON.stringify(fetcherData)}
|
|
12
|
-
`}}),children);}Body.propTypes={initialState:_propTypes.default.object,
|
|
11
|
+
`}}),children);}Body.propTypes={initialState:_propTypes.default.object,jsx:_propTypes.default.any,fetcherData:_propTypes.default.object,children:_propTypes.default.node};
|
|
@@ -1,18 +1,13 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,"__esModule",{value:true});exports.cacheCSS=cacheCSS;exports.cachePreloadJSLinks=cachePreloadJSLinks;exports.default=_default;var _path=_interopRequireDefault(require("path"));var _fs=_interopRequireDefault(require("fs"));function _interopRequireDefault(obj){return obj&&obj.__esModule?obj:{default:obj};}function
|
|
2
|
-
// if (asset?.props?.as === "script") {
|
|
3
|
-
// preloadJSLinks.push(`<link ${propsToString(asset, asset.props)}>`)
|
|
4
|
-
// }
|
|
5
|
-
// })
|
|
6
|
-
}catch(error){console.dir({service_name:`pwa-${process.env.APPLICATION}-node-server`,loglevel:"error",version:"v2",message:"\n \n =====> Error While Extracting The Chunk: \n ",traceback:error});}}console.dir({service_name:"pwa-node-server",loglevel:"info",version:"v2",message:`\n========= Cached For preloadJSLinkCache: ${key} ============\n`});// process.preloadJSLinkCache[key] = preloadJSLinks.join("\n")
|
|
1
|
+
"use strict";Object.defineProperty(exports,"__esModule",{value:true});exports.cacheAndFetchAssets=void 0;exports.cacheCSS=cacheCSS;exports.cachePreloadJSLinks=cachePreloadJSLinks;exports.default=_default;var _path=_interopRequireDefault(require("path"));var _fs=_interopRequireDefault(require("fs"));function _interopRequireDefault(obj){return obj&&obj.__esModule?obj:{default:obj};}function cachePreloadJSLinks(key,data){if(!process.preloadJSLinkCache){process.preloadJSLinkCache={};}let preloadJSLinks=[];if(Array.isArray(data)){try{preloadJSLinks=data.filter(asset=>asset?.props?.as==="script");}catch(error){console.dir({service_name:`pwa-${process.env.APPLICATION}-node-server`,loglevel:"error",version:"v2",message:"\n \n =====> Error While Extracting The Chunk: \n ",traceback:error});}}console.dir({service_name:"pwa-node-server",loglevel:"info",version:"v2",message:`\n========= Cached For preloadJSLinkCache: ${key} ============\n`});// process.preloadJSLinkCache[key] = preloadJSLinks.join("\n")
|
|
7
2
|
process.preloadJSLinkCache[key]=preloadJSLinks;}/**
|
|
8
3
|
* Stores css chunks styles into cache in string format
|
|
9
4
|
* @param {string} key - router path
|
|
10
5
|
* @param {object} data - css elements array extracted through loadable chunk extracter
|
|
11
|
-
*/function cacheCSS(key,data){if(!process.cssCache){process.cssCache={};}let pageCss="";let listOfCachedAssets={};if(Array.isArray(data)){try{data.map(assetChunk=>{const assetPathArr=assetChunk.key.split("/");const assetName=assetPathArr[assetPathArr.length-1];const ext=_path.default.extname(assetName);if(ext===".css"){// if css file has not already been cached, add the content of this CSS file in pageCSS
|
|
12
|
-
if(!listOfCachedAssets[assetName]&&!process.cssCache?.[key]?.listOfCachedAssets?.[assetName]){pageCss+=_fs.default.readFileSync(_path.default.resolve(process.env.src_path,`${process.env.BUILD_OUTPUT_PATH}/public`,assetName));listOfCachedAssets[assetName]=true;}}});}catch(error){if(process.env.NODE_ENV=="development"){console.log("Error While Extracting The Chunk: ",_path.default.resolve(process.env.src_path,`${process.env.BUILD_OUTPUT_PATH}/public`));}}}// if css cache exists for a route and there are some uncached css, add that css to the cache
|
|
6
|
+
*/function cacheCSS(key,data){if(!process.cssCache){process.cssCache={};}let pageCss="";let listOfCachedAssets={};if(Array.isArray(data)){try{if(process.env.NODE_ENV==="production"){data.map(assetChunk=>{const assetPathArr=assetChunk.key.split("/");const assetName=assetPathArr[assetPathArr.length-1];const ext=_path.default.extname(assetName);if(ext===".css"){// if css file has not already been cached, add the content of this CSS file in pageCSS
|
|
7
|
+
if(!listOfCachedAssets[assetName]&&!process.cssCache?.[key]?.listOfCachedAssets?.[assetName]){pageCss+=_fs.default.readFileSync(_path.default.resolve(process.env.src_path,`${process.env.BUILD_OUTPUT_PATH}/public`,assetName));listOfCachedAssets[assetName]=true;}}});}}catch(error){if(process.env.NODE_ENV=="development"){console.log("Error While Extracting The Chunk: ",_path.default.resolve(process.env.src_path,`${process.env.BUILD_OUTPUT_PATH}/public`));}}}// if css cache exists for a route and there are some uncached css, add that css to the cache
|
|
13
8
|
// this will run on subsequent hits and will add css of uncached widgets to the cache
|
|
14
9
|
if(process.cssCache[key]){if(pageCss!==""){let existingListOfCachedAssets=process.cssCache[key].listOfCachedAssets;const newPageCSS=process.cssCache[key].pageCss+pageCss;let newListOfCachedAssets={...existingListOfCachedAssets,...listOfCachedAssets};process.cssCache[key]={pageCss:newPageCSS,listOfCachedAssets:newListOfCachedAssets};}}else{// create css cache for a page. This will run on the first hit.
|
|
15
|
-
process.cssCache[key]={pageCss,listOfCachedAssets};}}/**
|
|
10
|
+
process.cssCache[key]={pageCss,listOfCachedAssets};}return pageCss;}/**
|
|
16
11
|
* returns cached css
|
|
17
12
|
* @param {string} key - router path
|
|
18
13
|
* @return {string} - cached css
|
|
@@ -20,4 +15,14 @@ process.cssCache[key]={pageCss,listOfCachedAssets};}}/**
|
|
|
20
15
|
* stores css and js in cache
|
|
21
16
|
* @param {object} res - response object
|
|
22
17
|
* @param {string} route - route path
|
|
23
|
-
*/function _default(res,route){try{const requestPath=route.path;const cachedCss=fetchCachedCSS(requestPath);const cachedPreloadJSLinks=fetchPreloadJSLinkCache(requestPath);if(cachedCss||cachedPreloadJSLinks){res.locals.pageCss=cachedCss;res.locals.preloadJSLinks=cachedPreloadJSLinks;return;}}catch(error){console.log("Error while caching your assets.");}}
|
|
18
|
+
*/function _default(res,route){try{const requestPath=route.path;const cachedCss=fetchCachedCSS(requestPath);const cachedPreloadJSLinks=fetchPreloadJSLinkCache(requestPath);if(cachedCss||cachedPreloadJSLinks){res.locals.pageCss=cachedCss;res.locals.preloadJSLinks=cachedPreloadJSLinks;return;}}catch(error){console.log("Error while caching your assets.");}}const cacheAndFetchAssets=({webExtractor,res,isBot})=>{// For bot first fold css and js would become complete page css and js
|
|
19
|
+
let firstFoldCss="";let firstFoldJS="";const isProd=process.env.NODE_ENV==="production";const{routePath,preloadJSLinks}=res.locals;const linkElements=webExtractor.getLinkElements();// We want to cache/or check for update css on every call
|
|
20
|
+
// We want to extract script tags for every call that will get added to body.
|
|
21
|
+
// Their corresponding preloaded link script tags are already present in head.
|
|
22
|
+
if(routePath){if(!isBot){if(isProd){firstFoldCss=cacheCSS(routePath,linkElements);firstFoldCss=`<style>${firstFoldCss}</style>`;}else{cacheCSS(routePath,linkElements);firstFoldCss=webExtractor.getStyleTags();}}// firstFoldJS = webExtractor.getScriptTags({ nonce: cspNonce })
|
|
23
|
+
firstFoldJS=webExtractor.getScriptTags();}// This block will run for the first time and cache preloaded JS Links for second render
|
|
24
|
+
// firstFoldJS ->scripts gets inject in body
|
|
25
|
+
// firstFoldCss -> Inline css gets injected in body only for the first render
|
|
26
|
+
if(!isProd||isBot||routePath&&!preloadJSLinks){// For production, we inject link tags with preload/prefetch using getLinkElements and inlining them via file reads
|
|
27
|
+
// For local, given we have assets in memory we dont read from file rather directly inject via link elements returned without preload/prefetch
|
|
28
|
+
!isBot&&cachePreloadJSLinks(routePath,linkElements);}return{firstFoldCss,firstFoldJS};};exports.cacheAndFetchAssets=cacheAndFetchAssets;
|
|
@@ -1,11 +1,10 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,"__esModule",{value:true});exports.default=_default;var _fs=_interopRequireDefault(require("fs"));var _path=_interopRequireDefault(require("path"));var _react=_interopRequireDefault(require("react"));var
|
|
2
|
-
const getMatchRoutes=(routes,req,res,store,context,fetcherData,basePath="",webExtractor)=>{return routes.reduce((matches,route)=>{const{path}=route;const match=(0,_router.matchPath)({path:`${basePath}/${path}`,caseSensitive:false,end:true},req.baseUrl||"/");if(match){if(
|
|
1
|
+
"use strict";Object.defineProperty(exports,"__esModule",{value:true});exports.default=_default;var _fs=_interopRequireDefault(require("fs"));var _path=_interopRequireDefault(require("path"));var _react=_interopRequireDefault(require("react"));var _extract=_interopRequireWildcard(require("./extract"));var _reactRedux=require("react-redux");var _document=require("./document");var _server=require("react-router-dom/server");var _ServerRouter=_interopRequireDefault(require("@catalyst/router/ServerRouter.js"));var _index=_interopRequireDefault(require("@catalyst/template/src/js/containers/App/index.js"));var _server2=require("@loadable/server");var _server3=require("react-dom/server");var _userAgentUtil=require("@catalyst/server/utils/userAgentUtil");var _router=require("@tata1mg/router");var _validator=require("@catalyst/server/utils/validator");var _document2=_interopRequireDefault(require("@catalyst/template/server/document.js"));var _utils=require("@catalyst/template/src/js/routes/utils.js");function _getRequireWildcardCache(e){if("function"!=typeof WeakMap)return null;var r=new WeakMap(),t=new WeakMap();return(_getRequireWildcardCache=function(e){return e?t:r;})(e);}function _interopRequireWildcard(e,r){if(!r&&e&&e.__esModule)return e;if(null===e||"object"!=typeof e&&"function"!=typeof e)return{default:e};var t=_getRequireWildcardCache(r);if(t&&t.has(e))return t.get(e);var n={__proto__:null},a=Object.defineProperty&&Object.getOwnPropertyDescriptor;for(var u in e)if("default"!==u&&Object.prototype.hasOwnProperty.call(e,u)){var i=a?Object.getOwnPropertyDescriptor(e,u):null;i&&(i.get||i.set)?Object.defineProperty(n,u,i):n[u]=e[u];}return n.default=e,t&&t.set(e,n),n;}function _interopRequireDefault(obj){return obj&&obj.__esModule?obj:{default:obj};}const storePath=_path.default.resolve(`${process.env.src_path}/src/js/store/index.js`);let createStore;if(_fs.default.existsSync(storePath)){try{const{default:configureStore}=require(`${process.env.src_path}/src/js/store/index.js`);createStore=configureStore;}catch(error){createStore=()=>{return{getState:()=>{}};};}}else{createStore=()=>{return{getState:()=>{}};};}const isProduction=process.env.NODE_ENV==="production";// matches request route with routes defined in the application.
|
|
2
|
+
const getMatchRoutes=(routes,req,res,store,context,fetcherData,basePath="",webExtractor)=>{return routes.reduce((matches,route)=>{const{path}=route;const match=(0,_router.matchPath)({path:`${basePath}/${path}`,caseSensitive:false,end:true},req.baseUrl||"/");if(match){if(!res.locals.pageCss&&!res.locals.preloadJSLinks&&!res.locals.routePath){res.locals.routePath=path;(0,_extract.default)(res,route);}if(!res.locals.pageCss&&!res.locals.preloadJSLinks){//moving routing logic outside of the App and using ServerRoutes for creating routes on server instead
|
|
3
3
|
(0,_server3.renderToString)(/*#__PURE__*/_react.default.createElement(_server2.ChunkExtractorManager,{extractor:webExtractor},/*#__PURE__*/_react.default.createElement(_reactRedux.Provider,{store:store},/*#__PURE__*/_react.default.createElement(_server.StaticRouter,{context:context,location:req.originalUrl},/*#__PURE__*/_react.default.createElement(_ServerRouter.default,{store:store,intialData:fetcherData})))));}const wc=route.component;matches.push({route,match,serverSideFunction:wc&&wc.serverSideFunction||(()=>Promise.resolve())});}if(!match&&route.children){// recursively try to match nested routes
|
|
4
4
|
const nested=getMatchRoutes(route.children,req,res,store,context,fetcherData,`${basePath}/${path}`,webExtractor);if(nested.length){matches=matches.concat(nested);}}return matches;},[]);};// Preloads chunks required for rendering document
|
|
5
5
|
const getComponent=(store,context,req,fetcherData)=>{return/*#__PURE__*/_react.default.createElement("div",{id:"app"},/*#__PURE__*/_react.default.createElement(_reactRedux.Provider,{store:store},/*#__PURE__*/_react.default.createElement(_server.StaticRouter,{context:context,location:req.originalUrl},/*#__PURE__*/_react.default.createElement(_ServerRouter.default,{store:store,intialData:fetcherData}))));};// sends document after rendering
|
|
6
|
-
const renderMarkUp=async(errorCode,req,res,metaTags,fetcherData,store,matches,context,webExtractor)=>{const deviceDetails=(0,_userAgentUtil.getUserAgentDetails)(req.headers["user-agent"]||"");const isBot=deviceDetails.googleBot?true:false
|
|
7
|
-
const
|
|
8
|
-
const shellEnd=_render.default.renderEnd(webExtractor,state,res,jsx,errorCode,fetcherData,isBot,res.locals.cspNonce);const finalProps={...shellStart,...shellEnd,jsx:jsx,req,res};let CompleteDocument=()=>{if((0,_validator.validateCustomDocument)(_document2.default)){return(0,_document2.default)(finalProps);}else{return/*#__PURE__*/_react.default.createElement("html",{lang:finalProps.lang},/*#__PURE__*/_react.default.createElement(_document.Head,{isBot:finalProps.isBot,preloadJSLinks:finalProps.preloadJSLinks,pageCss:finalProps.pageCss,fetcherData:finalProps.fetcherData,metaTags:finalProps.metaTags,publicAssetPath:finalProps.publicAssetPath}),/*#__PURE__*/_react.default.createElement(_document.Body,{initialState:finalProps.initialState,firstFoldCss:finalProps.firstFoldCss,firstFoldJS:finalProps.firstFoldJS,jsx:finalProps.jsx,fetcherData:finalProps.fetcherData}));}};try{let status=matches.length&&matches[0].match.path==="*"?404:200;res.set({"content-type":"text/html; charset=utf-8"});res.status(status);const{pipe}=(0,_server3.renderToPipeableStream)(/*#__PURE__*/_react.default.createElement(CompleteDocument,null),{onShellReady(){res.setHeader("content-type","text/html");pipe(res);res.end();},onAllReady(){_render.default.renderEnd(webExtractor,state,res,jsx,errorCode,fetcherData,isBot,res.locals.cspNonce);},onError(error){logger.error({message:`\n Error while renderToPipeableStream : ${error.toString()}`});}});}catch(error){logger.error("Error in rendering document on server:"+error);}};/**
|
|
6
|
+
const renderMarkUp=async(errorCode,req,res,metaTags,fetcherData,store,matches,context,webExtractor)=>{const deviceDetails=(0,_userAgentUtil.getUserAgentDetails)(req.headers["user-agent"]||"");const isBot=deviceDetails.googleBot?true:false;let state=store.getState();const jsx=webExtractor.collectChunks(getComponent(store,context,req,fetcherData));const{IS_DEV_COMMAND,WEBPACK_DEV_SERVER_HOSTNAME,WEBPACK_DEV_SERVER_PORT}=process.env;let publicAssetPath=`${process.env.PUBLIC_STATIC_ASSET_URL}${process.env.PUBLIC_STATIC_ASSET_PATH}`;// serves assets from localhost on running devBuild and devServe command
|
|
7
|
+
if(JSON.parse(IS_DEV_COMMAND)){publicAssetPath=`http://${WEBPACK_DEV_SERVER_HOSTNAME}:${WEBPACK_DEV_SERVER_PORT}/assets/`;}const finalProps={req,res,lang:"en",pageCss:res.locals.pageCss,preloadJSLinks:res.locals.preloadJSLinks,metaTags,isBot,publicAssetPath,jsx,initialState:state,fetcherData};let CompleteDocument=()=>{if((0,_validator.validateCustomDocument)(_document2.default)){return(0,_document2.default)(finalProps);}else{return/*#__PURE__*/_react.default.createElement("html",{lang:finalProps.lang},/*#__PURE__*/_react.default.createElement(_document.Head,{isBot:finalProps.isBot,pageCss:finalProps.pageCss,metaTags:finalProps.metaTags,preloadJSLinks:finalProps.preloadJSLinks,publicAssetPath:finalProps.publicAssetPath}),/*#__PURE__*/_react.default.createElement(_document.Body,{jsx:finalProps.jsx,fetcherData:finalProps.fetcherData,initialState:finalProps.initialState}));}};try{let status=matches.length&&matches[0].match.path==="*"?404:200;res.set({"content-type":"text/html; charset=utf-8"});res.status(status);const{pipe}=(0,_server3.renderToPipeableStream)(/*#__PURE__*/_react.default.createElement(CompleteDocument,null),{onShellReady(){res.setHeader("content-type","text/html");pipe(res);},onAllReady(){const{firstFoldCss,firstFoldJS}=(0,_extract.cacheAndFetchAssets)({webExtractor,res,isBot});res.write(firstFoldCss);res.write(firstFoldJS);res.end();},onError(error){logger.error({message:`\n Error while renderToPipeableStream : ${error.toString()}`});}});}catch(error){logger.error("Error in rendering document on server:"+error);}};/**
|
|
9
8
|
* middleware for document handling
|
|
10
9
|
* @param {object} req - request object
|
|
11
10
|
* @param {object} res - response object
|
package/package.json
CHANGED
|
@@ -1,27 +0,0 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,"__esModule",{value:true});exports.default=void 0;var _fs=_interopRequireDefault(require("fs"));var _path=_interopRequireDefault(require("path"));var _extract=require("./extract");function _interopRequireDefault(obj){return obj&&obj.__esModule?obj:{default:obj};}/**
|
|
2
|
-
* returns data which will be used in Head component for page rendering
|
|
3
|
-
* @param {string} pageCss - cached styles for page
|
|
4
|
-
* @param {string} preloadJSLinks - cached javscript elements for page
|
|
5
|
-
* @param {function} metaTagFunction - user defined function which returns meta tags in array
|
|
6
|
-
* @param {boolean} isBot - checks if request is made by bot
|
|
7
|
-
* @param {object} fetcherData - router fetched data
|
|
8
|
-
*/const renderStart=(pageCss,preloadJSLinks,metaTags,isBot,fetcherData)=>{const{IS_DEV_COMMAND,WEBPACK_DEV_SERVER_HOSTNAME,WEBPACK_DEV_SERVER_PORT}=process.env;let publicAssetPath=`${process.env.PUBLIC_STATIC_ASSET_URL}${process.env.PUBLIC_STATIC_ASSET_PATH}`;// serves assets from localhost on running devBuild and devServe command
|
|
9
|
-
if(JSON.parse(IS_DEV_COMMAND)){publicAssetPath=`http://${WEBPACK_DEV_SERVER_HOSTNAME}:${WEBPACK_DEV_SERVER_PORT}/assets/`;}return{pageCss,preloadJSLinks,metaTags,isBot,publicAssetPath,fetcherData};};const extractCss=data=>{let pageCss="";if(Array.isArray(data)){try{data.map(assetChunk=>{const assetPathArr=assetChunk.key.split("/");const assetName=assetPathArr[assetPathArr.length-1];const ext=_path.default.extname(assetName);if(ext===".css")pageCss+=_fs.default.readFileSync(_path.default.resolve(process.env.src_path,`${process.env.BUILD_OUTPUT_PATH}/public`,assetName));});}catch(error){console.dir({service_name:`pwa-${process.env.APPLICATION}-node-server`,loglevel:"error",version:"v2",message:"\n \n =====> Error While Extracting The Chunk: \n ",traceback:error});}}return pageCss;};/**
|
|
10
|
-
* returns data which will be used in body component for page rendering
|
|
11
|
-
* @param {object} webExtractor - loadable object which holds chunking function
|
|
12
|
-
* @param {string} initialState - reducer initial state
|
|
13
|
-
* @param {function} res - response object
|
|
14
|
-
* @param {boolean} jsx - jsx which needs to be render on server side
|
|
15
|
-
* @param {string|number|null} errorCode - error code
|
|
16
|
-
* @param {object} fetcherData - router fetched data
|
|
17
|
-
*/const renderEnd=(webExtractor,initialState={},res,jsx,errorCode,fetcherData,isBot,cspNonce)=>{// For bot first fold css and js would become complete page css and js
|
|
18
|
-
let firstFoldCss="";let firstFoldJS="";const isProd=process.env.NODE_ENV==="production";const{routePath,preloadJSLinks}=res.locals;const linkElements=webExtractor.getLinkElements();// We want to cache/or check for update css on every call
|
|
19
|
-
// We want to extract script tags for every call that will get added to body.
|
|
20
|
-
// Their corresponding preloaded link script tags are already present in head.
|
|
21
|
-
if(routePath){!isBot&&(0,_extract.cacheCSS)(routePath,linkElements);// firstFoldJS = webExtractor.getScriptTags({ nonce: cspNonce })
|
|
22
|
-
firstFoldJS=webExtractor.getScriptElements();}// This block will run for the first time and cache preloaded JS Links for second render
|
|
23
|
-
// firstFoldJS ->scripts gets inject in body
|
|
24
|
-
// firstFoldCss -> Inline css gets injected in body only for the first render
|
|
25
|
-
if(!isProd||isBot||routePath&&!preloadJSLinks){// For production, we inject link tags with preload/prefetch using getLinkElements and inlining them via file reads
|
|
26
|
-
// For local, given we have assets in memory we dont read from file rather directly inject via link elements returned without preload/prefetch
|
|
27
|
-
firstFoldCss=isProd?extractCss(linkElements):webExtractor.getStyleElements();!isBot&&(0,_extract.cachePreloadJSLinks)(routePath,linkElements);}return{initialState,firstFoldCss,firstFoldJS,jsx,errorCode,fetcherData};};var _default=exports.default={renderStart,renderEnd};
|