Adjust starter for content-driven comps + fix var eval (#20).

plentico · Dec 8, 2020 · e9852fa · e9852fa
1 parent 229fdeb
commit e9852fa
Show file tree

Hide file tree

Showing 7 changed files with 79 additions and 57 deletions.
diff --git a/cmd/build/client.go b/cmd/build/client.go
@@ -255,8 +255,9 @@ 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}")
+	reAllComponentsBracket := regexp.MustCompile(`allComponents\[\"?(.*)\"?\]`)
+	//ssrStr = reAllComponentsBracket.ReplaceAllString(ssrStr, "eval(${1})")
+	ssrStr = reAllComponentsBracket.ReplaceAllString(ssrStr, "globalThis[${1}]")
 
 	// Add component to context so it can be used to render HTML in data_source.go.
 	_, addSSRCompErr := SSRctx.RunScript(ssrStr, "create_ssr")

diff --git a/defaults/content/blog/components.json b/defaults/content/blog/components.json
@@ -0,0 +1,26 @@
+{
+    "title": "Dynamic components example",
+    "body": [
+        "You can load components from your JSON data source without explicitly",
+        "importing each template using the <b>allComponents</b> helper. This is an",
+        "object that holds a reference to each '.svelte' file in your project. To pull a",
+        "template out of allComponents, you need to use a <em>component signature</em>.",
+        "Luckily they are easy to figure out, just convert '/' and '.' characters to '_'",
+        "in your layout path, so for example layout/components/template.svelte becomes",
+        "layout_components_template_svelte."
+    ],
+	"components": [
+		{
+            "title": "For example we could grab the 'template' component again:",
+			"component": "layout_components_template_svelte",
+			"fields": {"type": "index"}
+		},
+		{
+            "title": "Or we could grab the 'incrementer':",
+			"component": "layout_components_incrementer_svelte",
+			"fields": {}
+		}
+	],
+    "author": "Jim Fisk",
+    "date": "8/25/2020"
+}
diff --git a/defaults/content/index.json b/defaults/content/index.json
@@ -4,11 +4,5 @@
 		"Take a look around to see how things work.",
 		"The bottom of each page will tell you where to find the corresponding template in your project.",
 		"If you get stuck, check out our <a href='https://plenti.co/docs' target='blank' rel='noopener noreferrer'>docs</a>. If you need extra help, <a href='https://github.com/plentico/plenti/issues/new' target='blank' rel='noopener noreferrer'>let us know</a>! Enjoy :)"
-	],
-	"components": [
-		{
-			"component": "template",
-			"fields": {"type": "index"}
-		}
 	]
 }
diff --git a/defaults/layout/content/blog.svelte b/defaults/layout/content/blog.svelte
@@ -10,6 +10,9 @@
   const unsubscribe = count.subscribe(value => {
     count_value = value;
   });
+
+  // Content driven dynamic components example:
+  export let components, allComponents;
 </script>
 
 <h1>{title}</h1>
@@ -30,4 +33,11 @@
 
 <Uses type="blog" />
 
+{#if components}
+	{#each components as { title, component, fields }}
+    {title}
+		<svelte:component this="{allComponents[component]}" {...fields} />
+	{/each}
+{/if}
+
 <p><a href="/">Back home</a></p>
diff --git a/defaults/layout/content/index.svelte b/defaults/layout/content/index.svelte
@@ -1,7 +1,7 @@
 <script>
 	export let title, intro, components, allContent;
 	import Grid from '../components/grid.svelte';
-	import { loadComponent } from '../scripts/load_component.svelte';
+  	import Uses from "../components/template.svelte";
 </script>
 
 <h1>{title}</h1>
@@ -18,14 +18,4 @@
 	<br />
 </div>
 
-{#if components}
-	{#each components as { component, fields }}
-		{#await loadComponent(component)}
-			loading component...
-		{:then compClass}
-			<svelte:component this="{compClass}" {...fields} />
-		{:catch error}
-			{console.log(error.message)}
-		{/await}
-	{/each}
-{/if}
+<Uses type="index" />
diff --git a/defaults/layout/scripts/load_component.svelte b/defaults/layout/scripts/load_component.svelte
diff --git a/generated/defaults.go b/generated/defaults.go
@@ -29,6 +29,32 @@ node_modules`),
     "body": ["text"],
     "author": "text",
     "date": "date"
+}`),
+	"/content/blog/components.json": []byte(`{
+    "title": "Dynamic components example",
+    "body": [
+        "You can load components from your JSON data source without explicitly",
+        "importing each template using the <b>allComponents</b> helper. This is an",
+        "object that holds a reference to each '.svelte' file in your project. To pull a",
+        "template out of allComponents, you need to use a <em>component signature</em>.",
+        "Luckily they are easy to figure out, just convert '/' and '.' characters to '_'",
+        "in your layout path, so for example layout/components/template.svelte becomes",
+        "layout_components_template_svelte."
+    ],
+	"components": [
+		{
+            "title": "For example we could grab the 'template' component again:",
+			"component": "layout_components_template_svelte",
+			"fields": {"type": "index"}
+		},
+		{
+            "title": "Or we could grab the 'incrementer':",
+			"component": "layout_components_incrementer_svelte",
+			"fields": {}
+		}
+	],
+    "author": "Jim Fisk",
+    "date": "8/25/2020"
 }`),
 	"/content/blog/perry.json": []byte(`{
     "title": "Customize your Planarian",
@@ -64,12 +90,6 @@ node_modules`),
 		"Take a look around to see how things work.",
 		"The bottom of each page will tell you where to find the corresponding template in your project.",
 		"If you get stuck, check out our <a href='https://plenti.co/docs' target='blank' rel='noopener noreferrer'>docs</a>. If you need extra help, <a href='https://github.com/plentico/plenti/issues/new' target='blank' rel='noopener noreferrer'>let us know</a>! Enjoy :)"
-	],
-	"components": [
-		{
-			"component": "template",
-			"fields": {"type": "index"}
-		}
 	]
 }`),
 	"/content/pages/_blueprint.json": []byte(`{
@@ -219,6 +239,9 @@ node_modules`),
   const unsubscribe = count.subscribe(value => {
     count_value = value;
   });
+
+  // Content driven dynamic components example:
+  export let components, allComponents;
 </script>
 
 <h1>{title}</h1>
@@ -239,12 +262,19 @@ node_modules`),
 
 <Uses type="blog" />
 
+{#if components}
+	{#each components as { title, component, fields }}
+    {title}
+		<svelte:component this="{allComponents[component]}" {...fields} />
+	{/each}
+{/if}
+
 <p><a href="/">Back home</a></p>
 `),
 	"/layout/content/index.svelte": []byte(`<script>
 	export let title, intro, components, allContent;
 	import Grid from '../components/grid.svelte';
-	import { loadComponent } from '../scripts/load_component.svelte';
+  	import Uses from "../components/template.svelte";
 </script>
 
 <h1>{title}</h1>
@@ -261,17 +291,7 @@ node_modules`),
 	<br />
 </div>
 
-{#if components}
-	{#each components as { component, fields }}
-		{#await loadComponent(component)}
-			loading component...
-		{:then compClass}
-			<svelte:component this="{compClass}" {...fields} />
-		{:catch error}
-			{console.log(error.message)}
-		{/await}
-	{/each}
-{/if}`),
+<Uses type="index" />`),
 	"/layout/content/pages.svelte": []byte(`<script>
   export let title, description;
   import Uses from "../components/template.svelte";
@@ -442,16 +462,6 @@ node_modules`),
     margin-right: 10px;
   }
 </style>
-`),
-	"/layout/scripts/load_component.svelte": []byte(`<script context="module">
-  export const loadComponent = component => {
-    let compClassPromise = import("../components/" + component + ".svelte").then(res => res.default);
-    // Fix "Unhandled promise rejection" error.
-    // See: https://github.com/sveltejs/sapper/issues/487#issuecomment-529145749
-    compClassPromise.catch(err => null)
-    return compClassPromise;
-  }
-</script>
 `),
 	"/layout/scripts/make_title.svelte": []byte(`<script context="module">
   export const makeTitle = filename => {