Merge pull request #31 from milafrerichs/be-just-a-repl

Be just a repl

example/App.svelte

@@ -29,7 +29,7 @@
   }
 </style>
 <script>
-	import Tutorials from '../src/Tutorials.svelte';
+	import Repl from '../src/Repl.svelte';
 	let chapters = [
 		{
       title: 'Entry',
@@ -69,8 +69,20 @@
 			prev: 'prev'
     }
   }
+  let files = [
+    {
+      name: 'index.html',
+      content: '<h1>Test</h1>',
+      type: 'html'
+    },
+    {
+      name: 'index.js',
+      content: '',
+      type: 'js'
+    }
+  ];
 
 </script>
 
-<Tutorials {chapters} />
+<Repl {files} />
 

package.json

@@ -1,8 +1,8 @@
 {
-  "name": "svelte-javascript-tutorials",
-  "svelte": "src/Tutorials.svelte",
+  "name": "javascript-repl",
+  "svelte": "src/Repl.svelte",
   "module": "index.mjs",
-  "version": "0.1.2",
+  "version": "0.2.0",
   "description": "",
   "main": "index.js",
   "author": "Mila Frerichs <[email protected]>",

rollup.config.js

@@ -10,7 +10,7 @@ const name = pkg.name
 	.replace(/-\w/g, m => m[1].toUpperCase());
 
 export default {
-  input: 'src/Tutorials.svelte',
+  input: 'src/Repl.svelte',
 	output: [
 		{ file: pkg.module, 'format': 'es' },
 		{ file: pkg.main, 'format': 'umd', name }

src/Repl.svelte

@@ -0,0 +1,135 @@
+<script>
+  import Viewer from './Viewer.svelte';
+  import Editor from './Editor.svelte';
+  import Console from './Console.svelte';
+
+  let ready = false;
+  let editor;
+  let manualUpdates = false;
+  let tab = 'viewer';
+  let currentFile = {};
+  let currentFileIndex = 0;
+  let currentContent = '';
+  let code = '';
+  let html = '';
+  export let viewOnly = false;
+  export let files = [];
+  export let injectedLibraries = [];
+  export let injectedJS = '';
+  export let cssStyles = {
+    container: 'container',
+    resultContainer: 'result-container',
+    viewerContainer: 'viewer-container',
+    viewerConsoleContainer: 'viewer-console-container',
+    editorActions: {
+      container: '',
+      tabItem: '',
+      link: ''
+    },
+    viewerActions: {
+      container: '',
+      tabItem: '',
+      link: ''
+    },
+    editor: 'editor',
+    viewer: 'viewer',
+  };
+
+  function changeCode(event) {
+    currentContent = event.detail.value;
+    manualUpdates = true;
+    if (currentFile.type === 'js') {
+      code = currentContent;
+    } else {
+      html = currentContent.replace(/\n/g,'');
+    }
+  }
+
+
+  function getContentForType(type = 'js') {
+    return files.reduce((content, file) => {
+      if(file.type === type) {
+        return content + file.content;
+      }
+      return content;
+    }, '');
+  }
+
+  $: currentFile = files[currentFileIndex]
+
+  $: if(editor && currentFile) {
+    editor.update(currentFile.content);
+  }
+
+  $: if(ready && !manualUpdates) {
+    code = getContentForType('js')
+    html = getContentForType('html')
+    if(!html) html = '';
+    if(editor) {
+      editor.update(currentFile.content);
+    }
+  }
+  function showFile(fileIndex) {
+    currentFile.content = currentContent;
+    currentFileIndex = fileIndex;
+  }
+  function showConsole() {
+    tab = 'console';
+  }
+  function showResult() {
+    tab = 'viewer';
+  }
+</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}">
+    {#if !viewOnly }
+      <div class:hidden="{viewOnly}" 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>
+        <Editor bind:this={editor} on:change={changeCode}/>
+      </div>
+    {/if}
+    <div class:view-only="{viewOnly}" class="{cssStyles.viewerContainer}">
+      <div class="{cssStyles.viewerActions.container}">
+        <div class="{cssStyles.viewerActions.tabItem}">
+          <a class:active="{tab == 'viewer'}" class="{cssStyles.viewerActions.link}" on:click="{() => showResult()}">Result</a>
+        </div>
+        <div class="{cssStyles.viewerActions.tabItem}">
+          <a class:active="{tab == 'console'}" class="{cssStyles.viewerActions.link}" on:click="{() => showConsole()}">Console</a>
+        </div>
+      </div>
+      <div class="{cssStyles.viewerConsoleContainer}">
+        <div class:hidden="{tab != 'viewer'}" class="{cssStyles.viewer}">
+          <Viewer bind:ready {code} {injectedLibraries} {html} {injectedJS} />
+        </div>
+        <div class:hidden="{tab != 'console'}" class="{cssStyles.console}">
+          <Console bind:ready output={code} />
+        </div>
+      </div>
+    </div>
+  </div>
+</div>