share modal behaviur; add route run; codeService

src/app.config.mjs

@@ -1,4 +1,5 @@
 
+export const APP_URL = 'https://instacode.app';
 export const MAX_DATA_SIZE = 1e5;
 export const ERROR_MAX_DATA_SIZE = 'Error: Output exceeded maximum size allowed';
 export const WELCOME_CODE = `
@@ -17,3 +18,5 @@ for (let i = 0; i < 42; ++i) {
 // storage unique keys:
 export const STORAGE_KEY_CODE = 'code';
 export const STORAGE_KEY_SETTINGS = 'settings';
+
+export const SHARE_CODE_ROUTE_NAME = 'run';

src/assets/main.scss

@@ -1,6 +1,7 @@
 @import 'normalize.css';
 // @import 'primeicons/primeicons.css';
 @import 'primevue/resources/primevue.min.css';
+@import 'primeicons/primeicons.css';
 
 @import 'primevue/resources/themes/bootstrap4-dark-blue/theme.css';
 // @import 'primevue/resources/themes/bootstrap4-light-blue/theme.css';

src/components/CodeEditor.vue

@@ -5,11 +5,10 @@ import { Codemirror } from 'vue-codemirror'
 import { javascript } from '@codemirror/lang-javascript'
 import { oneDark } from '@codemirror/theme-one-dark'
 
+import codeService from '../services/codeService';
+
 export default defineComponent({
   name: 'CodeEditor',
-  props: {
-    code: String,
-  },
   components: {
     Codemirror,
   },
@@ -37,8 +36,14 @@ export default defineComponent({
     return {
       extensions,
       handleReady,
+      code: codeService.get(),
     }
   },
+  methods: {
+    change(code) {
+      codeService.change(code);
+    },
+  }
 });
 </script>
 
@@ -59,7 +64,7 @@ export default defineComponent({
       :tab-size="2"
       :extensions="extensions"
       @ready="handleReady"
-      @change="$emit('change', $event)"
+      @change="change($event)"
     />
   </div>
 </template>

src/components/ShareModal.vue

@@ -1,6 +1,14 @@
 <script>
 import { defineComponent } from 'vue';
+
+import InputText from 'primevue/inputtext';
+import PrimeButton from 'primevue/button';
+
+import copy from 'copy-to-clipboard';
+
+import { APP_URL, SHARE_CODE_ROUTE_NAME } from '../app.config';
 import ModalWindow from './ModalWindow.vue';
+import codeService from '../services/codeService';
 
 export default defineComponent({
   name: 'ShareModal',
@@ -9,39 +17,35 @@ export default defineComponent({
   },
   components: {
     ModalWindow,
+    InputText,
+    PrimeButton,
+  },
+  data() {
+    return {
+      code: '',
+    };
+  },
+  methods: {
+    encode(code) {
+      return [APP_URL, SHARE_CODE_ROUTE_NAME, btoa(code)].join('/');
+    },
+    copy() {
+      copy(this.encode(this.code));
+      this.$emit('close');
+    },
+  },
+  watch: {
+    visible(visible) {
+      if (!visible) return;
+      this.code = codeService.get();
+    },
   },
 });
 </script>
 
 <style lang="scss" scoped>
-ul {
-  list-style-type: none;
-  padding: 0;
-
-  li {
-    display: flex;
-    flex: 1 1 0px;
-    flex-wrap: nowrap;
-
-    * {
-      width: 50%;
-    }
-
-    b {
-      padding-right: 4px;
-      white-space: nowrap;
-      text-align: right;
-    }
-    span {
-      padding-left: 4px;
-      white-space: nowrap;
-      text-align: left;
-    }
-  }
-}
-
-b {
-  color: #8f8;
+.p-inputgroup {
+  width: 320px;
 }
 </style>
 
@@ -52,7 +56,10 @@ b {
         <h3>Share Code</h3>
       </template>
       <template #body>
-        <pre>Code goes here...</pre>
+        <div class="p-inputgroup">
+          <InputText :modelValue="encode(code)" readonly />
+          <PrimeButton icon="pi pi-copy" class="p-button-info" @click="copy()" />
+        </div>
       </template>
       <!-- <template #footer>
         <button @click="showModal = false">close</button>

src/router/index.js

@@ -2,6 +2,9 @@ import { createRouter, createWebHistory } from 'vue-router';
 import HomeView from '../views/HomeView.vue';
 import SettingsView from '../views/SettingsView.vue';
 
+import codeService from '../services/codeService';
+import { SHARE_CODE_ROUTE_NAME } from '../app.config';
+
 const router = createRouter({
   history: createWebHistory(import.meta.env.BASE_URL),
   routes: [
@@ -15,6 +18,14 @@ const router = createRouter({
       name: 'settings',
       component: SettingsView,
     },
+    {
+      path: `/${SHARE_CODE_ROUTE_NAME}/:encoded`,
+      name: SHARE_CODE_ROUTE_NAME,
+      redirect: to => {
+        codeService.setFromUrl(to.params.encoded);
+        return { name: 'home' };
+      },
+    },
     {
       path: '/about',
       name: 'about',

src/services/codeService.mjs

@@ -0,0 +1,35 @@
+
+import {
+  WELCOME_CODE,
+  STORAGE_KEY_CODE,
+} from '../app.config';
+import EventEmitter from 'eventemitter3';
+
+const ee = new EventEmitter();
+let code;
+
+const init = () => {
+  const lsCode = localStorage.getItem(STORAGE_KEY_CODE);
+  console.log('code', lsCode);
+  code = lsCode ? lsCode : WELCOME_CODE;
+};
+
+const codeService = {
+  get() {
+    return code;
+  },
+  change(_code) {
+    code = _code;
+    console.log('save', _code)
+    localStorage.setItem(STORAGE_KEY_CODE, code);
+    ee.emit('change', code);
+  },
+  setFromUrl(_encoded) {
+    this.change(atob(_encoded));
+  },
+  ee,
+};
+
+export default codeService;
+
+init();

src/views/HomeView.vue

@@ -1,9 +1,9 @@
 <script>
 
-import { WELCOME_CODE, STORAGE_KEY_CODE } from '../app.config';
 import ResultCode from '../components/ResultCode.vue';
 import CodeEditor from '../components/CodeEditor.vue';
 import settingsService from '../services/settingsService';
+import codeService from '../services/codeService';
 
 import Worker from '../file.worker.js?worker';
 
@@ -20,28 +20,13 @@ export default defineComponent({
     ResultCode, CodeEditor,
   },
   data() {
-    const lsCode = localStorage.getItem(STORAGE_KEY_CODE);
-    // const code = { value: lsCode ? lsCode : WELCOME_CODE };
-    const code = lsCode ? lsCode : WELCOME_CODE;
-
+    codeService.ee.on('change', code => this.run(code));
     return {
-      code,
       worker: null,
       result: '',
     }
   },
-  mounted() {
-    // this.run(this.code.value);
-    this.run(this.code);
-  },
   methods: {
-    save(code) {
-      localStorage.setItem(STORAGE_KEY_CODE, code);
-    },
-    change(code) {
-      this.run(code);
-      setTimeout(() => this.save(code), 1);
-    },
     run(code) {
       this.terminate();
       this.result = '';
@@ -103,7 +88,7 @@ main {
   <main>
     <Splitter style="height: 100%" :step="50" :gutterSize="8" layout="horizontal">
       <SplitterPanel class="left-pane">
-        <CodeEditor :code="code" @change="change($event)"/>
+        <CodeEditor/>
       </SplitterPanel>
       <SplitterPanel class="right-pane">
         <ResultCode :data="result"/>