chore: clean up code

increase package version

package.json

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

src/Console.svelte

@@ -2,10 +2,10 @@
 	import Result from './Result.svelte';
 	import { onMount } from 'svelte';
 
-  export let output;
+  import { code } from './stores.js'
 
   let message = '';
-	$: if(output) {
+	$: if($code) {
 		message = `
 		document.body.innerHTML = '';
     var consoleOutput = '';
@@ -17,7 +17,7 @@
         consoleOutput += message + '<br />';
       }
     };
-		${output}
+		${$code}
 		document.body.innerHTML = '';
     document.body.innerHTML = consoleOutput;
 		`

src/ViewerConsole.svelte

@@ -30,7 +30,7 @@
       <Viewer />
     </div>
     <div class:hidden="{tab != 'console'}" class="{cssStyles.console}">
-      <Console output={$code}/>
+      <Console />
     </div>
   </div>
 </div>

src/layouts/Default.svelte

@@ -1,49 +1,28 @@
 <script>
   import {
     files,
-    currentFileIndex 
+    currentFileIndex
   } from './../stores.js'
 
   export let cssStyles;
 
-  //maybe add the file change here
   function showFile(fileIndex) {
-    //currentFile.content = currentContent;
     currentFileIndex.set(fileIndex);
   }
 </script>
 
-<style>
-  .hidden {
-    visibility: hidden;
-  }
-  .content-container {
-    transition-property: all;
-    transition-duration: .5s;
-    transition-timing-function: cubic-bezier(0, 1, 0.5, 1);
-  }
-  .hide-content .content-container{
-    max-width: 0;
-    overflow-x: hidden;
-  }
-  .hide-content .result-container {
-    width: 95%;
-  }
-</style>
-
 <div class="{cssStyles.container}" >
   <div class="result-container {cssStyles.resultContainer}">
-      <div class="{cssStyles.editor}">
-          <div class="{cssStyles.editorActions.container}">
-            {#each $files as { name }, i}
-              <div class="{cssStyles.editorActions.tabItem}">
-                <a class:active="{$currentFileIndex == i}" class="{cssStyles.editorActions.link}" on:click="{() => showFile(i)}">{name}</a>
-              </div>
-            {/each}
+    <div class="{cssStyles.editor}">
+      <div class="{cssStyles.editorActions.container}">
+        {#each $files as { name }, i}
+          <div class="{cssStyles.editorActions.tabItem}">
+            <a class:active="{$currentFileIndex == i}" class="{cssStyles.editorActions.link}" on:click="{() => showFile(i)}">{name}</a>
           </div>
-        <slot name="editor">
-        </slot>
+        {/each}
       </div>
+      <slot name="editor"></slot>
+    </div>
     <slot name="viewer-console"></slot>
   </div>
 </div>

src/layouts/MinimalReverse.svelte

@@ -1,7 +1,5 @@
 <script>
   export let cssStyles;
-  export let showEditor;
-  export let tab;
 </script>
 
 <div class="{cssStyles.container}" >