Adding preview version of mermaid and stats collection

package.json

@@ -1,6 +1,7 @@
 {
   "name": "mermaid-live-editor",
   "version": "1.0.0",
+  "license": "MIT",
   "devDependencies": {
     "cross-env": "^5.2.0",
     "css-loader": "^2.1.1",
@@ -21,7 +22,7 @@
     "js-base64": "^2.5.1",
     "json-lint": "^0.1.0",
     "jsonlint": "^1.6.3",
-    "mermaid": "^8.4.2",
+    "@mermaid-js/mermaid": "8.4.3-preview.795",
     "moment": "^2.24.0",
     "monaco-editor": "0.18.1",
     "svelte-routing": "^1.4.0",

public/index.html

@@ -4,11 +4,23 @@
 	<meta charset='utf8'>
 	<meta name='viewport' content='width=device-width'>
 
-	<title>Svelte app</title>
+	<title>Mermaid live editor</title>
 
 	<link rel='icon' type='image/png' href='favicon.png'>
 	<link rel='stylesheet' href='styles.css'>
 	<link rel='stylesheet' href='bundle.css'>
+<!-- Google Analytics -->
+<script>
+	(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
+	(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
+	m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
+	})(window,document,'script','https://www.google-analytics.com/analytics.js','ga');
+
+	ga('create', 'UA-153180559-1', 'auto');
+	ga('send', 'pageview');
+	</script>
+	<!-- End Google Analytics -->
+
 	<style>
 		.myInlineDecoration {
 			/* cursor: pointer; */

src/code-store.js

@@ -1,5 +1,5 @@
 import { writable } from 'svelte/store';
-import mermaid from 'mermaid';
+import mermaid from '@mermaid-js/mermaid';
 import { Base64 } from 'js-base64'
 import {push, pop, replace} from 'svelte-spa-router'
 

src/components/Config.svelte

@@ -4,7 +4,7 @@ import { configStore } from '../config-store.js';
 import { onMount } from 'svelte';
 import {push, pop, replace} from 'svelte-spa-router'
 import { Base64 } from 'js-base64'
-import mermaid from 'mermaid';
+import mermaid from '@mermaid-js/mermaid';
 import Error from './Error.svelte';
 import { initEditor } from './editor-utils';
 

src/components/Editor.svelte

@@ -4,7 +4,7 @@ import { errorStore } from '../error-store.js';
 import { onMount } from 'svelte';
 import {push, pop, replace} from 'svelte-spa-router'
 import { Base64 } from 'js-base64'
-import mermaid from 'mermaid';
+import mermaid from '@mermaid-js/mermaid';
 import Error from './Error.svelte';
 import { initEditor } from './editor-utils';
 import 'monaco-editor/esm/vs/editor/browser/controller/coreCommands.js';

src/components/View.svelte

@@ -3,7 +3,54 @@ import { codeStore } from '../code-store.js';
 import { errorStore } from '../error-store.js';
 import { configStore } from '../config-store.js';
 import { onMount } from 'svelte';
-import mermaid from 'mermaid';
+import mermaid from '@mermaid-js/mermaid';
+
+const detectType = text => {
+  text = text.replace(/^\s*%%.*\n/g, '\n');
+  console.debug('Detecting diagram type based on the text ' + text);
+  if (text.match(/^\s*sequenceDiagram/)) {
+    return 'sequence';
+  }
+
+  if (text.match(/^\s*gantt/)) {
+    return 'gantt';
+  }
+
+  if (text.match(/^\s*classDiagram/)) {
+    return 'class';
+  }
+
+  if (text.match(/^\s*stateDiagram/)) {
+    return 'state';
+  }
+
+  if (text.match(/^\s*gitGraph/)) {
+    return 'git';
+  }
+
+  if (text.match(/^\s*info/)) {
+    return 'info';
+  }
+  if (text.match(/^\s*pie/)) {
+    return 'pie';
+  }
+
+  return 'flowchart';
+};
+
+// manual debounce
+let timeout;
+const saveStatistcs = graphType => {
+	clearTimeout(timeout);
+	// Only save statistcs after a 5 sec delay
+	timeout = setTimeout(
+		function() {
+			console.log('ga:', 'send', 'event', 'render', graphType, graphType);
+			ga('send', 'event', 'render', graphType, graphType);
+		},
+		5000);
+};
+
 
 let element;
 let container;
@@ -23,6 +70,7 @@ let insertSvg = function(svgCode, bindFunctions){
 			if(container && state) {
 				code = state.code;
 				container.innerHTML = code;
+				saveStatistcs(detectType(code));
 				delete container.dataset.processed
 				mermaid.initialize(state.mermaid)
 				mermaid.init(undefined, container)