live-elements-web-server: Added route style prerendering for CSR routes.

Author: dinusv

packages/live-elements-web-server/lib/routes.mjs

@@ -67,6 +67,7 @@ export class ServerViewRoute extends ServerRoute{
         this._page         = page
         this._renders      = []
         this._scripts      = []
+        this._styles       = []
         this._bundleScript = null
     }
 
@@ -76,8 +77,10 @@ export class ServerViewRoute extends ServerRoute{
     get data(){ return this._data }
     get page(){ return this._page }
     get scripts(){ return this._scripts }
+    get styles(){ return this._styles }
     get bundleScript(){ return this._bundleScript }
 
+    addStyle(style){ this._styles.push(style) }
     addScript(script){ this._scripts.push(script) }
     setBundleScript(script){ this._bundleScript = script }
 

packages/live-elements-web-server/lib/web-server.mjs

@@ -259,6 +259,7 @@ export default class WebServer extends EventEmitter{
 
         const placementSource = '[' + viewLoaderData.placements.map(p => `{ module: import("${p.url}"), name: "${p.name}" }`).join(',') + ']'
         const viewAssignmentsSource = JSON.stringify(viewLoaderData.assignments)
+        const viewAssignmentsStyles = viewLoaderData.assignments.scopedStyleLinks
 
         const clientLoader = ClassInfo.extends(view, ComponentRegistry.Components.PageView) ? clientPageViewLoader : clientApplicationLoader
         const moduleVirtualLoader = path.join(path.dirname(viewLoaderData.path), bundleName + '.loader.mjs')
@@ -453,7 +454,9 @@ export default class WebServer extends EventEmitter{
         if ( !route.pageDOM ){
             page.entryScript = '/scripts/' + route.bundleScript
             route.pageDOM = page.captureDOM(this._domEmulator)
+            route.pageContent = this._domEmulator.serializeDOM(route.pageDOM)
         }
+        let pageContent = route.pageContent
         if ( route.data ){
             let data = null
             if ( typeof route.data === 'function' ){
@@ -481,13 +484,15 @@ export default class WebServer extends EventEmitter{
                 scriptEl.text = scriptContent
                 route.pageDOM.window.document.head.appendChild(scriptEl)
             }
-            route.pageContent = this._domEmulator.serializeDOM(route.pageDOM)
-        } else {
-            if ( !route.pageContent )
-                route.pageContent = this._domEmulator.serializeDOM(route.pageDOM)
+            pageContent = this._domEmulator.serializeDOM(route.pageDOM)
+        }
+        if ( route.styles.length ){
+            const location = pageContent.indexOf('</head>')
+            const insertString = route.styles.map(s => `<link rel="stylesheet" data-purpose="scoped" type="text/css" href="${s}" />`)
+            pageContent = pageContent.slice(0, location) + insertString + pageContent.slice(location)
         }
 
-        res.send(route.pageContent)
+        res.send(pageContent)
         res.end()
     }