Merge pull request #202 from shogunpurple/screenslot

show screenslot and layout together

packages/builder/src/components/userInterface/CurrentItemPreview.svelte

@@ -29,10 +29,12 @@
     [map(s => `<link rel="stylesheet" href="${s}"/>`), join("\n")]
   )
 
+  $: screensExist = $store.currentPreviewItem._screens && $store.currentPreviewItem._screens.length > 0 
+
   $: frontendDefinition = {
     componentLibraries: $store.loadLibraryUrls($store.currentPageName),
     page: $store.currentPreviewItem,
-    screens: [{
+    screens: screensExist ? $store.currentPreviewItem._screens : [{
       name: "Screen Placeholder",
       route: "*",
       props: {

packages/client/src/createApp.js

@@ -34,9 +34,9 @@ export const createApp = (
         routeTo,
         appRootPath: frontendDefinition.appRootPath,
       })
-      const getAttchChildrenParams = attachChildrenParams(stateManager)
+      const getAttachChildrenParams = attachChildrenParams(stateManager)
       screenSlotNode.props._children = [screen.props]
-      const initialiseChildParams = getAttchChildrenParams(screenSlotNode)
+      const initialiseChildParams = getAttachChildrenParams(screenSlotNode)
       attachChildren(initialiseChildParams)(screenSlotNode.rootElement, {
         hydrate: true,
         force: true,
@@ -102,6 +102,7 @@ export const createApp = (
 
     return rootTreeNode
   }
+
   return {
     initialisePage,
     screenStore: () => screenStateManager.store,

packages/client/src/render/screenRouter.js

@@ -44,11 +44,9 @@ export const screenRouter = (screens, onScreenSelected, appRootPath) => {
     storeInitial["##routeParams"] = params
     const store = writable(storeInitial)
 
-    if (current !== -1) {
-      onScreenSelected(screens[current], store, _url)
-    } else {
-      onScreenSelected(screens[fallback], store, _url)
-    }
+    const screenIndex = current !== -1 ? current : fallback;
+
+    onScreenSelected(screens[screenIndex], store, _url)
 
     try {
       !url.state && history.pushState(_url, null, _url)