Sapper nested component semantics

From sveltejs/sapper#262 (comment)

Doesn't actually support any props yet though, not sure how I want to set those up just yet.

src/app.html

@@ -1,50 +1,18 @@
-
 <a href="#HOME" use:link>home</a>
 <a href="#ONE" use:link>one</a>
 <a href="#TWO" use:link>two</a>
 <a href="#THREE" use:link>three</a>
 
-<svelte:component this={pages[page]} {children} />
+<svelte:component this={page.child} {...page.props} />
 
 <script>
     import link from "./link.js";
 
-    import state from "./state.js";
-
-    import Home from "./home.html";
-    import One from "./one.html";
-    import Two from "./two.html";
-    import Three from "./three.html";
-
-    const capitalize = (str) => str.slice(0, 1).toUpperCase() + str.slice(1);
-
     export default {
         actions : {
             link
         },
 
-        data : () => ({
-            page     : capitalize(state.state.slice(1)),
-            children : null,
-            pages    : {
-                Home,
-                One,
-                Two,
-                Three
-            }
-        }),
-
-        oncreate() {
-            state.on("enter", ({ curr }) => {
-                const [ , ...parts ] = curr.state.split("/");
-
-                return this.set({
-                    page : capitalize(parts[0]),
-                    children : parts.slice(1)
-                });
-            });
-        },
-
         onstate : console.log.bind(console, "onstate")
     };
 </script>

src/index.js

@@ -1,5 +1,62 @@
+import state from "./state.js";
+
 import App from "./app.html";
 
-new App({
-    target : document.body,
+let app;
+
+state.on("enter", ({ curr }) => {
+    // TODO: Assumes single-level component at the root
+    if(!app) {
+        app = new App({
+            target : document.body,
+            data   : {
+                page : {
+                    child : curr.component,
+                    props : {},
+                },
+            },
+        });
+
+        return;
+    }
+
+    // Single level component
+    if(!curr.parent) {
+        app.set({
+            page : {
+                child : curr.component,
+                props : {},
+            },
+        });
+
+        return;
+    }
+
+    // Create the list of nested components
+    const components = [];
+    let step = curr;
+
+    while(step.parent) {
+        components.push(step);
+
+        step = state.get(step.parent);
+    }
+
+    components.push(step);
+
+    // Create nested data structure to represent the component tree
+    const data = {};
+
+    components.reverse().reduce((prev, component) => {
+        prev.page = {
+            child : component.component,
+            props : {},
+        };
+
+        return prev.page.props;
+    }, data);
+
+    app.set(data);
 });
+
+state.start();

src/one.html

@@ -4,40 +4,14 @@ <h1>ONE</h1>
 <a href="#SUBTWO" use:link>subtwo</a>
 <a href="#SUBTHREE" use:link>subthree</a>
 
-<svelte:component this={pages[child]} />
+<svelte:component this={page.child} {...page.props} />
 
 <script>
     import link from "./link.js";
 
-    import Subone from "./subone.html";
-    import Subtwo from "./subtwo.html";
-    import Subthree from "./subthree.html";
-
     export default {
         actions : {
             link
         },
-
-        data : () => ({
-            children : [],
-
-            pages : {
-                subone : Subone,
-                subtwo : Subtwo,
-                subthree : Subthree
-            }
-        }),
-
-        computed : {
-            child({ children }) {
-                return children.length ? children[0] : ""
-            }
-        },
-
-        oncreate() {
-            console.log(arguments);
-        },
-
-        onstate : console.log.bind(console, "one onstate")
     }
 </script>