Merge pull request #86 from milafrerichs/fix-layout-changes

fix: layout changes should not result in failure

Changelog.md

@@ -1,3 +1,7 @@
+# v0.4.4
+##Fixed
+Changing the layout should not break the code. And the iframes should now always be available when we post messages to them.
+
 # v0.3.0
 ## Added
 New `mode` prop

example/App.svelte

@@ -1,7 +1,10 @@
 <style>
+  :global(.container) {
+    height: 100vh;
+  }
   :global(.tutorial-container) {
     width: 100%;
-    height: 100%;
+    height: 100vh;
     display: flex;
   }
   :global(.content-container) {
@@ -81,11 +84,16 @@
       type: 'js'
     }
   ];
+  let layout = 'default'
   function changedCode() {
     console.log('changed the code')
   }
+  function changeLayout() {
+    layout = (layout === 'default' ? 'view' : 'default');
+  }
 
 </script>
 
-<Repl layout={'default'} {files} />
+<a href="javascript:;" on:click={changeLayout}>Change Layout</a>
+<Repl  {layout} {files} />
 

package.json

@@ -2,7 +2,7 @@
   "name": "javascript-repl",
   "svelte": "src/Repl.svelte",
   "module": "index.mjs",
-  "version": "0.4.3",
+  "version": "0.4.4",
   "description": "",
   "main": "index.js",
   "author": "Mila Frerichs <[email protected]>",

src/Console.svelte

@@ -26,4 +26,4 @@
 		`
 	}
 </script>
-<Result {width} {height} html={''} code={message} />
+<Result name={'console'} {width} {height} html={''} code={message} />

src/Repl.svelte

@@ -1,4 +1,6 @@
 <script>
+	import { onMount, onDestroy } from 'svelte';
+
   import Viewer from './Viewer.svelte';
   import ViewerConsole from './ViewerConsole.svelte';
   import Editor from './Editor.svelte';
@@ -11,7 +13,7 @@
   import {
     code,
     html,
-    ready,
+    iframeReady,
     files as file_store,
     injectedJS as injectedJS_store,
     injectedLibraries as injectedLibraries_store,
@@ -20,6 +22,7 @@
 
   let editor;
   let manualUpdates = false;
+  let layoutiFrameReady = false;
   let currentContent = '';
   let width;
   let height;
@@ -30,6 +33,12 @@
     [ 'minimal', Minimal ],
     [ 'view', View ]
   ]);
+  const iframeLayouts = new Map([
+    [ 'default', ['viewer', 'console']],
+    [ 'minimal-reverse', ['viewer']],
+    [ 'minimal', ['viewer']],
+    [ 'view', ['viewer']]
+  ]);
 
   export let layout = 'default';
   export let changedCode = () => {};
@@ -56,6 +65,15 @@
     viewer: 'viewer',
   };
 
+	onMount(() => {
+    iframeReady.subscribe((value) => {
+      const iframes = iframeLayouts.get(layout || 'default')
+      layoutiFrameReady = iframes.reduce((s, v) => (value[v] || false) && s, true)
+    })
+	});
+	onDestroy(() => {
+	});
+
   const debounce = (func, delay) => {
     let inDebounce
     return function() {
@@ -112,12 +130,12 @@
     editor.update($currentFile.content);
   }
 
-  $: if(files && $ready) {
+  $: if(files && layoutiFrameReady) {
     manualUpdates = false;
     update();
   }
 
-  $: if($ready && !manualUpdates) {
+  $: if(layoutiFrameReady && !manualUpdates) {
     update();
   }
 

src/Result.svelte

@@ -1,11 +1,11 @@
 <script>
 	import srcdoc from './srcdoc/index.js';
-	import { onMount } from 'svelte';
+	import { onMount, onDestroy } from 'svelte';
 
   import {
-    ready,
     injectedJS,
-    injectedLibraries
+    injectedLibraries,
+    iframeReady
   } from './stores.js'
 
 	let iframe;
@@ -14,14 +14,25 @@
   export let height;
   export let code;
   export let html;
+  export let name = 'viewer';
+  let ready = false;
 
 	let message = '';
+
+  const setReady = () => {
+    iframeReady.setReady(true, name)
+    iframeReady.subscribe((value) => {
+      ready = value[name] || false;
+    })
+  }
 	onMount(() => {
-		iframe.addEventListener('load', () => {
-			ready.set(true);
-		});
+		iframe.addEventListener('load', setReady);
+	});
+	onDestroy(() => {
+    iframeReady.setReady(false, name)
+		iframe.removeEventListener('load', setReady);
 	});
-	$: if($ready && (code || html)) {
+	$: if(ready && iframe && (code || html)) {
 		message = `
     ${$injectedJS}
     ${styles}

src/Viewer.svelte

@@ -7,4 +7,4 @@
 
 </script>
 
-<Result {width} {height} code={$code} html={$html} />
+<Result name={'viewer'} {width} {height} code={$code} html={$html} />

src/stores.js

@@ -1,6 +1,5 @@
 import { writable, derived } from 'svelte/store';
 
-export const ready = writable(false);
 export const code = writable('');
 export const html = writable('');
 export const tab = writable('viewer');
@@ -15,3 +14,18 @@ export const currentFile = derived(
   [files, currentFileIndex],
   ([$files, $currentFileIndex]) => $files[$currentFileIndex]
 );
+
+const createIframe = () => {
+  const { subscribe, set, update } = writable({});
+
+  return {
+    subscribe,
+    setReady: (ready, name) => {
+      return update((n) => {
+        n[name] = ready;
+        return n;
+      })
+    }
+  }
+}
+export const iframeReady = createIframe();