Create allComponents for content driven SSR (#20).

plentico · Dec 7, 2020 · 229fdeb · 229fdeb
1 parent 6182d6d
commit 229fdeb
Show file tree

Hide file tree

Showing 6 changed files with 34 additions and 10 deletions.
diff --git a/cmd/build/client.go b/cmd/build/client.go
@@ -26,6 +26,9 @@ func Client(buildPath string, tempBuildDir string, ejectedPath string) {
 
 	stylePath := buildPath + "/spa/bundle.css"
 
+	// Initialize string for layout.js component list.
+	var allComponentsStr string
+
 	// Set up counter for logging output.
 	compiledComponentCounter := 0
 
@@ -93,6 +96,11 @@ func Client(buildPath string, tempBuildDir string, ejectedPath string) {
 
 				compileSvelte(ctx, SSRctx, layoutPath, destFile, stylePath)
 
+				// Create entry for layout.js.
+				layoutSignature := strings.ReplaceAll(strings.ReplaceAll((layoutPath), "/", "_"), ".", "_")
+				destLayoutPath := strings.TrimPrefix(layoutPath, "layout/")
+				allComponentsStr = allComponentsStr + "export {default as " + layoutSignature + "} from '../" + destLayoutPath + "';\n"
+
 				compiledComponentCounter++
 
 			}
@@ -103,6 +111,12 @@ func Client(buildPath string, tempBuildDir string, ejectedPath string) {
 		fmt.Printf("Could not get layout file: %s", layoutFilesErr)
 	}
 
+	// Write layout.js to filesystem.
+	compWriteErr := ioutil.WriteFile(buildPath+"/spa/ejected/layout.js", []byte(allComponentsStr), os.ModePerm)
+	if compWriteErr != nil {
+		fmt.Printf("Unable to write layout.js file: %v\n", compWriteErr)
+	}
+
 	Log("Number of components compiled: " + strconv.Itoa(compiledComponentCounter))
 }
 
@@ -238,6 +252,12 @@ func compileSvelte(ctx *v8go.Context, SSRctx *v8go.Context, layoutPath string, d
 		}
 	}
 
+	// Remove allComponents object (leaving just componentSignature) for SSR.
+	reAllComponentsDot := regexp.MustCompile(`allComponents\.`)
+	ssrStr = reAllComponentsDot.ReplaceAllString(ssrStr, "")
+	reAllComponentsBracket := regexp.MustCompile(`allComponents\[\"(.*)\"\]`)
+	ssrStr = reAllComponentsBracket.ReplaceAllString(ssrStr, "${1}")
+
 	// Add component to context so it can be used to render HTML in data_source.go.
 	_, addSSRCompErr := SSRctx.RunScript(ssrStr, "create_ssr")
 	if addSSRCompErr != nil {

diff --git a/defaults/layout/global/html.svelte b/defaults/layout/global/html.svelte
@@ -4,7 +4,7 @@
   import Footer from './footer.svelte';
   import { makeTitle } from '../scripts/make_title.svelte';
 
-  export let route, content, allContent;
+  export let route, content, allContent, allComponents;
 </script>
 
 <html lang="en">
@@ -13,7 +13,7 @@
   <Nav />
   <main>
     <div class="container">
-      <svelte:component this={route} {...content.fields} {allContent} />
+      <svelte:component this={route} {...content.fields} {allContent} {allComponents} />
       <br />
     </div>
   </main>

diff --git a/ejected/main.js b/ejected/main.js
@@ -1,5 +1,6 @@
 import Router from './router.svelte';
 import contentSource from './content.js';
+import * as allComponents from './layout.js';
 
 let uri = location.pathname;
 let route, content, allContent;
@@ -20,7 +21,8 @@ import('../content/' + content.type + '.js').then(r => {
       uri: uri,
       route: route,
       content: content,
-      allContent: allContent
+      allContent: allContent,
+      allComponents: allComponents
     }
   });
 }).catch(e => console.log(e));
diff --git a/ejected/router.svelte b/ejected/router.svelte
@@ -1,11 +1,11 @@
-<Html {route} {content} {allContent} />
+<Html {route} {content} {allContent} {allComponents} />
 
 <script>
   import Navaid from 'navaid';
   import contentSource from './content.js';
   import Html from '../global/html.svelte';
 
-  export let uri, route, content, allContent;
+  export let uri, route, content, allContent, allComponents;
 
   const getContent = (uri, trailingSlash = "") => {
     return contentSource.find(content => content.path + trailingSlash == uri);

diff --git a/generated/defaults.go b/generated/defaults.go
@@ -343,7 +343,7 @@ node_modules`),
   import Footer from './footer.svelte';
   import { makeTitle } from '../scripts/make_title.svelte';
 
-  export let route, content, allContent;
+  export let route, content, allContent, allComponents;
 </script>
 
 <html lang="en">
@@ -352,7 +352,7 @@ node_modules`),
   <Nav />
   <main>
     <div class="container">
-      <svelte:component this={route} {...content.fields} {allContent} />
+      <svelte:component this={route} {...content.fields} {allContent} {allComponents} />
       <br />
     </div>
   </main>

diff --git a/generated/ejected.go b/generated/ejected.go
@@ -108,6 +108,7 @@ staticBuildStr.forEach(arg => {
 });`),
 	"/main.js": []byte(`import Router from './router.svelte';
 import contentSource from './content.js';
+import * as allComponents from './layout.js';
 
 let uri = location.pathname;
 let route, content, allContent;
@@ -128,18 +129,19 @@ import('../content/' + content.type + '.js').then(r => {
       uri: uri,
       route: route,
       content: content,
-      allContent: allContent
+      allContent: allContent,
+      allComponents: allComponents
     }
   });
 }).catch(e => console.log(e));`),
-	"/router.svelte": []byte(`<Html {route} {content} {allContent} />
+	"/router.svelte": []byte(`<Html {route} {content} {allContent} {allComponents} />
 
 <script>
   import Navaid from 'navaid';
   import contentSource from './content.js';
   import Html from '../global/html.svelte';
 
-  export let uri, route, content, allContent;
+  export let uri, route, content, allContent, allComponents;
 
   const getContent = (uri, trailingSlash = "") => {
     return contentSource.find(content => content.path + trailingSlash == uri);