Merge pull request #87 from mermaid-js/sidharthv96/cleanup

Housekeeping
mgenereu · Jan 30, 2021 · 4594446 · 4594446
2 parents a581b93 + 4c6bdf9
commit 4594446
Show file tree

Hide file tree

Showing 11 changed files with 81 additions and 212 deletions.
diff --git a/src/code-error-store.js b/src/code-error-store.js
diff --git a/src/components/Config.svelte b/src/components/Config.svelte
@@ -1,19 +1,13 @@
 <script>
   import { codeStore, updateConfig } from '../code-store.js';
-  import { configErrorStore } from '../config-error-store.js';
+  import { configErrorStore } from '../error-store.js';
   import { onMount } from 'svelte';
-
   import Error from './Error.svelte';
   import { getResizeHandler, initEditor } from './editor-utils';
   import { watchResize } from 'svelte-watch-resize';
-  import 'monaco-editor/esm/vs/editor/browser/controller/coreCommands.js';
-  import 'monaco-editor/esm/vs/editor/contrib/find/findController.js';
   import * as monaco from 'monaco-editor/esm/vs/editor/editor.api.js';
 
-  export let error = false;
-
   let edit;
-  let editorElem = null;
 
   let resizeHandler = () => {};
 
@@ -25,15 +19,7 @@
     updateConfig(conf, false);
     configErrorStore.set(undefined);
   };
-
-  const unsubscribeError = configErrorStore.subscribe((_error) => {
-    // console.log('Error ideintified' + _error.toString());
-    if (_error) {
-      error = _error.toString();
-    } else {
-      error = false;
-    }
-  });
+  
 
   const unsubscribe = codeStore.subscribe((state) => {
     console.log(state.mermaid, state.updateEditor);
@@ -44,7 +30,7 @@
 
   onMount(async () => {
     console.log('Mounting config');
-    editorElem = document.getElementById('editor-conf');
+    const editorElem = document.getElementById('editor-conf');
     edit = monaco.editor.create(editorElem, {
       value: '',
       theme: 'myCoolTheme',
@@ -55,9 +41,9 @@
       try {
         const conf = JSON.parse(edit.getValue());
         handleConfUpdate(conf, false);
-      } catch (e) {
-        console.log('Error in parsed', e);
-        configErrorStore.set(e);
+      } catch (err) {
+        console.log('Error in parsed', err);
+        configErrorStore.set(err);
       }
     });
 
@@ -76,7 +62,5 @@
 
 <div id="editor-container">
   <div id="editor-conf" use:watchResize={resizeHandler} />
-  {#if error}
-    <Error errorText={error} />
-  {/if}
+  <Error errorStore={configErrorStore} />
 </div>
diff --git a/src/components/Editor.svelte b/src/components/Editor.svelte
@@ -1,16 +1,14 @@
 <script>
   import { codeStore, updateCode } from '../code-store.js';
-  import { codeErrorStore } from '../code-error-store.js';
+  import { codeErrorStore } from '../error-store.js';
   import { onMount } from 'svelte';
-  // import mermaid from '@mermaid-js/mermaid';
   import mermaid from '@mermaid';
   import Error from './Error.svelte';
   import { getResizeHandler, initEditor } from './editor-utils';
   import * as monaco from 'monaco-editor';
   import { watchResize } from 'svelte-watch-resize';
 
   let edit;
-  export let error = false;
 
   const decArr = [];
   let editorElem = null;
@@ -29,27 +27,25 @@
       updateCode(updatedCode, false);
       codeErrorStore.set(undefined);
     } catch (e) {
-      if (e) {
-        codeErrorStore.set(e);
-        console.log('Error in parsed', e.hash);
-        const l = e.hash.line;
-        decArr.push(
-          edit.deltaDecorations(
-            [],
-            [
-              {
-                range: new monaco.Range(
-                  e.hash.loc.first_line,
-                  e.hash.loc.last_line,
-                  e.hash.loc.first_column,
-                  e.hash.loc.last_column
-                ),
-                options: { inlineClassName: 'myInlineDecoration' },
-              },
-            ]
-          )
-        );
-      }
+      codeErrorStore.set('Syntax Error');
+      console.log('Error in parsed', e.hash);
+      const l = e.hash.line;
+      decArr.push(
+        edit.deltaDecorations(
+          [],
+          [
+            {
+              range: new monaco.Range(
+                e.hash.loc.first_line,
+                e.hash.loc.last_line,
+                e.hash.loc.first_column,
+                e.hash.loc.last_column
+              ),
+              options: { inlineClassName: 'myInlineDecoration' },
+            },
+          ]
+        )
+      );
     }
   };
 
@@ -72,13 +68,7 @@
       handleCodeUpdate(edit.getValue(), false);
     });
 
-    const unsubscribeError = codeErrorStore.subscribe((_error) => {
-      if (_error) {
-        error = true;
-      } else {
-        error = false;
-      }
-    });
+    initEditor(monaco);
   });
 </script>
 
@@ -93,7 +83,5 @@
 
 <div id="editor-container">
   <div id="editor" use:watchResize={resizeHandler} />
-  {#if error}
-    <Error errorText="Syntax Error" />
-  {/if}
+  <Error errorStore={codeErrorStore} />
 </div>
diff --git a/src/components/Error.svelte b/src/components/Error.svelte
@@ -1,33 +1,14 @@
 <script>
-  import { codeErrorStore } from '../code-error-store.js';
-  import { onMount } from 'svelte';
-
-  onMount(async () => {});
-
-  // export let code = '';
   export let classes = '';
-
-  // export let error = {};
-  // export let token = '';
-  // export let expected = '';
-
-  // export let params = {}
-  export let errorText = '';
-
-  // const unsubscribeError = codeErrorStore.subscribe( _error => {
-  // 		if(typeof _error === 'undefined') {
-  // 			classes = 'invisible';
-  // 			error = {};
-  // 			token='';
-  // 			expected='';
-  // 		} else {
-  // 			classes = 'visible';
-  // 			error = _error;
-  // 			console.log('error: ',  _error);
-  // 			token = error.hash.token;
-  // 			expected = error.hash.expected.join(' ');;
-  // 		}
-  // 	});
+  export let errorStore;
+  let error;
+  errorStore.subscribe((_error) => {
+    if (_error) {
+      error = _error.toString();
+    } else {
+      error = false;
+    }
+  });
 </script>
 
 <style>
@@ -36,7 +17,6 @@
     color: white;
     flex: 1;
     padding: 10px;
-    /* position: absolute; */
   }
   .invisible {
     display: none;
@@ -46,4 +26,6 @@
   }
 </style>
 
-<div id="error" class={classes}>{errorText}</div>
+{#if error}
+  <div id="error" class={classes}>{error}</div>
+{/if}
diff --git a/src/components/Links.svelte b/src/components/Links.svelte
@@ -1,5 +1,4 @@
 <script>
-  import { link } from 'svelte-spa-router';
   import { Base64 } from 'js-base64';
   import moment from 'moment';
   import { codeStore } from '../code-store.js';
@@ -91,7 +90,7 @@
     document.execCommand('Copy');
   };
 
-  let url = '/mermaid-live-editor/#/view';
+  let url;
   let b64Code;
   let iUrl;
   let svgUrl;
@@ -102,7 +101,7 @@
 
   const unsubscribe = codeStore.subscribe((state) => {
     b64Code = Base64.encodeURI(JSON.stringify(state));
-    url = `/mermaid-live-editor/#/view/${b64Code}`;
+    url = `${window.location.pathname.split("#")[0]}#/view/${b64Code}`;
     iUrl = `https://mermaid.ink/img/${b64Code}`;
     svgUrl = `https://mermaid.ink/svg/${b64Code}`;
     mdCode = `[![](${iUrl})](${window.location.protocol}//${window.location.host}${window.location.pathname}#/edit/${b64Code})`;
@@ -171,7 +170,7 @@
     </a>
   </button>
   <button class="button-style">
-    <a class="link-style" href={url} use:link>Link to view</a>
+    <a class="link-style" href={url}>Link to view</a>
   </button>
   <button class="button-style">
     <a class="link-style" href={url} download="" on:click={onDownloadSVG}>

diff --git a/src/components/Tag.svelte b/src/components/Tag.svelte
@@ -1,11 +1,3 @@
-<script>
-  export let noPadding = false;
-  let contentClass = 'padding';
-  if (noPadding) {
-    contentClass = '';
-  }
-</script>
-
 <style>
   #tag {
     height: auto;
@@ -18,7 +10,6 @@
     border-radius: 4px;
     cursor: default;
     font-size: smaller;
-    /* padding: 8px; */
     color: #52c41a;
     background: #f6ffed;
     border-color: #b7eb8f;

diff --git a/src/components/View.svelte b/src/components/View.svelte
@@ -1,9 +1,7 @@
 <script>
   import { codeStore } from '../code-store.js';
-  import { codeErrorStore } from '../code-error-store.js';
-  import { configErrorStore } from '../config-error-store.js';
+  import { codeErrorStore, configErrorStore } from '../error-store.js';
   import { onMount } from 'svelte';
-  // import mermaid from '@mermaid-js/mermaid';
   import mermaid from '@mermaid';
 
   const detectType = (text) => {
@@ -53,21 +51,21 @@
     }, 5000);
   };
 
-  let element;
   let container;
+
+  export let code = '';
+  export let configClasses = '';
+  export let codeClasses = '';
+
   onMount(async () => {
-    element = document.querySelector('graph-div');
     const unsubscribe = codeStore.subscribe((state) => {
       try {
         if (container && state) {
-          code = state.code;
 
           // Replacing special characters '<' and '>' with encoded '&lt;' and '&gt;'
-          let _code = code;
-          _code = _code.replace(/</g, '&lt;');
-          _code = _code.replace(/>/g, '&gt;');
+          code = state.code.replace(/</g, '&lt;').replace(/>/g, '&gt;');
 
-          container.innerHTML = _code;
+          container.innerHTML = code;
           saveStatistcs(detectType(code));
           delete container.dataset.processed;
           mermaid.initialize(Object.assign({}, state.mermaid));
@@ -96,13 +94,8 @@
     });
   });
 
-  let insertSvg = function (svgCode, bindFunctions) {
-    // element.innerHTML = svgCode;
-  };
+  let insertSvg = function (svgCode, bindFunctions) {};
 
-  export let code = '';
-  export let configClasses = '';
-  export let codeClasses = '';
 </script>
 
 <style>

diff --git a/src/config-error-store.js → src/error-store.js b/src/config-error-store.js → src/error-store.js
@@ -1,3 +1,4 @@
 import { writable } from 'svelte/store';
 
+export const codeErrorStore = writable(undefined);
 export const configErrorStore = writable(undefined);
diff --git a/src/main.js b/src/main.js
@@ -2,9 +2,7 @@ import App from './App.svelte';
 
 const app = new App({
   target: document.body,
-  props: {
-    name: 'world',
-  },
+  props: {},
 });
 
 window.app = app;