Merge branch 'master' of https://github.com/mermaid-js/mermaid-live-editor into gists

* 'master' of https://github.com/mermaid-js/mermaid-live-editor: (50 commits)
  chore: update deps
  chore: update deps
  chore: update deps
  update cache logic
  fix: remove yarn cache
  chore: update deps
  chore: update deps
  chore: update deps
  chore: update deps
  fix: editor undefined issue
  Upgrade of Mermaid to version 8.11.4
  Update mermaid 8.11.3
  Update
  Fix tests
  Update mermaid
  Update deps
  fix: mermaid import
  Typo fix
  Bump autoprefixer from 10.3.0 to 10.3.1
  Bump eslint from 7.29.0 to 7.30.0
  ...

.github/workflows/deploy.yml

@@ -17,14 +17,17 @@ jobs:
       - name: Checkout
         uses: actions/checkout@v2
 
+      - name: Get yarn cache directory path
+        id: yarn-cache-dir-path
+        run: echo "::set-output name=dir::$(yarn cache dir)"
+
       - uses: actions/cache@v2
-        id: yarn-and-build-cache
+        id: yarn-cache
         with:
-          path: |
-            node_modules
-          key: ${{ runner.os }}-node_modules-build-deploy-${{ hashFiles('**/yarn.lock') }}
+          path: ${{ steps.yarn-cache-dir-path.outputs.dir }}
+          key: ${{ runner.os }}-yarn-${{ hashFiles('**/yarn.lock') }}
           restore-keys: |
-            ${{ runner.os }}-node_modules-build-deploy-
+            ${{ runner.os }}-yarn-
 
       - name: Build & Deploy
         run: |

.husky/pre-commit

@@ -1,4 +1,4 @@
 #!/bin/sh
 . "$(dirname "$0")/_/husky.sh"
 
-npm run pre-commit
+yarn pre-commit

README.md

@@ -31,7 +31,7 @@ Then open http://localhost:8000
 
 [Volta](https://volta.sh) is used for managing node and yarn versions.
 
-This project is set up using [Yarn](https://classic.yarnpkg.com/en/docs/getting-started). :
+This project is set up using [Yarn](https://classic.yarnpkg.com/en/docs/getting-started):
 
 ```
 yarn install

cypress/integration/loadSite.spec.ts

@@ -61,7 +61,7 @@ describe('Site Loads', () => {
 
 	it('should prevent setting the "securityLevel" option via URL', () => {
 		const b64State = toBase64(
-			`{"code":"graph TD\\nA[\\"<img src='https://via.placeholder.com/64' width=64/>\\"]","mermaid":"{\\"securityLevel\\": \\"loose\\", \\"theme\\": \\"forest\\"}","updateEditor":true,"autoSync":true,"updateDiagram":true}`,
+			`{"code":"graph TD\\nA[\\"<img src='https://via.placeholder.com/64' width=64 />\\"]","mermaid":"{\\"securityLevel\\": \\"loose\\", \\"theme\\": \\"forest\\"}","updateEditor":true,"autoSync":true,"updateDiagram":true}`,
 			true
 		);
 		cy.on('window:confirm', () => true);
@@ -70,7 +70,8 @@ describe('Site Loads', () => {
 		cy.contains('forest');
 		cy.contains('securityLevel').should('not.exist');
 		cy.get('#view').find('img').should('not.exist');
-		cy.get('#view').contains('<img src');
+		cy.get('#view').contains('<img');
+		cy.get('#view').contains('src="https://via.placeholder.com/64"');
 	});
 
 	it('should allow persisting "securityLevel" using confirm dialogue', () => {

cypress/snapshots.js

@@ -16,7 +16,7 @@ module.exports = {
       "1": "{\"code\":\"graph TD\\n    A[Party] -->|Get money| B(Go shopping!!)\\n    \",\"mermaid\":\"{\\n  \\\"theme\\\": \\\"forest\\\",\\n  \\\"test\\\": \\\"hello world\\\"\\n}\",\"updateEditor\":false,\"autoSync\":true,\"updateDiagram\":true,\"loader\":{\"type\":\"files\",\"config\":{\"codeURL\":\"https://gist.githubusercontent.com/sidharthv96/6268a23e673a533dcb198f241fd7012a/raw/4eb03887e6a41397e80bdcdbf94017c498f8f1e2/code.mmd\",\"configURL\":\"https://gist.githubusercontent.com/sidharthv96/6268a23e673a533dcb198f241fd7012a/raw/4eb03887e6a41397e80bdcdbf94017c498f8f1e2/config.json\"}}}"
     }
   },
-  "__version": "7.5.0",
+  "__version": "8.2.0",
   "Auto sync tests": {
     "should dim diagram when code is edited": {
       "1": "{\"code\":\"graph TD\\n    A[Christmas] -->|Get money| B(Go shopping)\\n    B --> C{Let me think}\\n    C -->|One| D[Laptop]\\n    C -->|Two| E[iPhone]\\n    C -->|Three| F[fa:fa-car Car]\\n    C --> Test\",\"mermaid\":\"{\\n  \\\"theme\\\": \\\"default\\\"\\n}\",\"updateEditor\":false,\"autoSync\":false,\"updateDiagram\":false}"

package.json

@@ -9,50 +9,52 @@
 		"lint:fix": "prettier --write --plugin-search-dir=. . && eslint --fix --ignore-path .gitignore .",
 		"format": "prettier --write --plugin-search-dir=. .",
 		"pre-commit": "lint-staged",
-		"postinstall": "husky install"
+		"postinstall": "husky install",
+		"test": "cypress run",
+		"cy": "cypress open"
 	},
 	"devDependencies": {
 		"@cypress/snapshot": "^2.1.7",
-		"@sveltejs/adapter-static": "1.0.0-next.11",
-		"@sveltejs/kit": "^1.0.0-next.109",
-		"@types/mermaid": "^8.2.6",
-		"@typescript-eslint/eslint-plugin": "^4.26.1",
-		"@typescript-eslint/parser": "^4.26.1",
-		"autoprefixer": "^10.2.6",
+		"@sveltejs/adapter-static": "1.0.0-next.16",
+		"@sveltejs/kit": "1.0.0-next.147",
+		"@types/mermaid": "^8.2.7",
+		"@typescript-eslint/eslint-plugin": "^4.29.1",
+		"@typescript-eslint/parser": "^4.29.1",
+		"autoprefixer": "^10.3.1",
 		"chai": "^4.3.4",
-		"cssnano": "^5.0.6",
-		"cypress": "^7.5.0",
-		"cypress-localstorage-commands": "^1.4.5",
-		"eslint": "^7.28.0",
+		"cssnano": "^5.0.7",
+		"cypress": "8.2.0",
+		"cypress-localstorage-commands": "^1.5.0",
+		"eslint": "^7.32.0",
 		"eslint-config-prettier": "^8.1.0",
 		"eslint-plugin-cypress": "^2.11.3",
 		"eslint-plugin-mocha": "^9.0.0",
 		"eslint-plugin-postcss-modules": "^1.2.1",
 		"eslint-plugin-svelte3": "^3.2.0",
-		"eslint-plugin-tailwindcss": "^1.13.2",
-		"husky": "^6.0.0",
-		"lint-staged": "^11.0.0",
-		"mocha": "^9.0.0",
-		"postcss": "^8.3.2",
-		"postcss-load-config": "^3.0.1",
-		"prettier": "~2.3.1",
-		"prettier-plugin-svelte": "^2.3.0",
-		"svelte": "^3.34.0",
-		"svelte-preprocess": "^4.7.1",
-		"tailwindcss": "^2.1.4",
-		"tslib": "^2.3.0",
-		"typescript": "^4.3.2"
+		"eslint-plugin-tailwindcss": "^1.14.1",
+		"husky": "^7.0.1",
+		"lint-staged": "^11.1.2",
+		"mocha": "^9.0.2",
+		"postcss": "^8.3.6",
+		"postcss-load-config": "^3.1.0",
+		"prettier": "~2.3.2",
+		"prettier-plugin-svelte": "^2.3.1",
+		"svelte": "^3.42.1",
+		"svelte-preprocess": "^4.7.4",
+		"tailwindcss": "^2.2.7",
+		"tslib": "^2.3.1",
+		"typescript": "^4.3.5"
 	},
 	"type": "module",
 	"dependencies": {
 		"@analytics/google-analytics": "^0.5.3",
 		"@macfja/svelte-persistent-store": "^1.1.1",
-		"analytics": "^0.7.5",
+		"analytics": "^0.7.13",
 		"js-base64": "^3.6.1",
-		"mermaid": "^8.10.2",
+		"mermaid": "^8.11.4",
 		"moment": "^2.29.1",
-		"monaco-editor": "^0.25.0",
-		"random-word-slugs": "^0.0.2"
+		"monaco-editor": "^0.25.2",
+		"random-word-slugs": "^0.0.5"
 	},
 	"lint-staged": {
 		"*.{ts,svelte,js,css,md,json}": [

src/app.html

@@ -19,38 +19,29 @@
 			rel="stylesheet"
 			href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.2/css/all.min.css"
 		/>
-		<script
-			src="https://cdn.jsdelivr.net/npm/mermaid@8.10.2/dist/mermaid.min.js"
-			integrity="sha256-VCwgPHytr103lKi7COURCy056chJehHMLqvOVKGXBIc="
-			crossorigin="anonymous"
-		></script>
 		<link
 			rel="stylesheet"
-			href="https://cdnjs.cloudflare.com/ajax/libs/monaco-editor/0.25.0/min/vs/editor/editor.main.min.css"
-			integrity="sha512-WPobWFyITzoqT5htKutcqZ5EdjusQccR2Nrx/jzLtQsAO0H7wUYTkHr66woHsxH5kGIRGYl6wU1Gz1OEGoPpAg=="
+			href="https://cdnjs.cloudflare.com/ajax/libs/monaco-editor/0.25.2/min/vs/editor/editor.main.min.css"
 			crossorigin="anonymous"
 			referrerpolicy="no-referrer"
 		/>
 		<script>
 			var require = {
-				paths: { vs: 'https://cdnjs.cloudflare.com/ajax/libs/monaco-editor/0.25.0/min/vs' }
+				paths: { vs: 'https://cdnjs.cloudflare.com/ajax/libs/monaco-editor/0.25.2/min/vs' }
 			};
 		</script>
 		<script
-			src="https://cdnjs.cloudflare.com/ajax/libs/monaco-editor/0.25.0/min/vs/loader.min.js"
-			integrity="sha512-SExj71Cw3B9C9EE8BC/ad3AKia5zQXDj/2SM4THgkeKh5GIFZhKM/R3uclUG8YZwJrjcVhydAlIHmfNvsBCKZA=="
+			src="https://cdnjs.cloudflare.com/ajax/libs/monaco-editor/0.25.2/min/vs/loader.min.js"
 			crossorigin="anonymous"
 			referrerpolicy="no-referrer"
 		></script>
 		<script
-			src="https://cdnjs.cloudflare.com/ajax/libs/monaco-editor/0.25.0/min/vs/editor/editor.main.nls.min.js"
-			integrity="sha512-/Lpr8XyEnghf+eu5/ytlh92qc6gEWUodmPjmxRFKqBG1ZzS0Qif87TFRnRy7BMf6epqv2NdE13JYvnvrSPVAvQ=="
+			src="https://cdnjs.cloudflare.com/ajax/libs/monaco-editor/0.25.2/min/vs/editor/editor.main.nls.min.js"
 			crossorigin="anonymous"
 			referrerpolicy="no-referrer"
 		></script>
 		<script
-			src="https://cdnjs.cloudflare.com/ajax/libs/monaco-editor/0.25.0/min/vs/editor/editor.main.js"
-			integrity="sha512-dkAg1SPTZ4Aw4iUXFUHr0+kVw3MYthWZ8Tu36Ki6aMGb5Uo90it+WogNG05as93dZ0TQhUcPKnYhvGjDikfOew=="
+			src="https://cdnjs.cloudflare.com/ajax/libs/monaco-editor/0.25.2/min/vs/editor/editor.main.js"
 			crossorigin="anonymous"
 			referrerpolicy="no-referrer"
 		></script>

src/lib/components/editor/editor.svelte

@@ -23,7 +23,7 @@
 	};
 	export let errorMarkers: monaco.editor.IMarkerData[] = [];
 	let oldText = text;
-	$: Monaco?.editor.setModelLanguage(editor.getModel(), language);
+	$: editor && Monaco?.editor.setModelLanguage(editor.getModel(), language);
 	$: {
 		if (text !== oldText) {
 			if ($codeStore.updateEditor) {
@@ -31,7 +31,7 @@
 			}
 			oldText = text;
 		}
-		Monaco?.editor.setModelMarkers(editor.getModel(), 'test', errorMarkers);
+		editor && Monaco?.editor.setModelMarkers(editor.getModel(), 'test', errorMarkers);
 	}
 
 	const dispatch = createEventDispatcher<EditorEvents>();

src/lib/components/view.svelte

@@ -3,9 +3,8 @@
 
 	import { codeStore } from '$lib/util/state';
 	import { onMount } from 'svelte';
-	import type { Mermaid } from 'mermaid';
+	import * as mermaid from 'mermaid';
 
-	const mermaid: Mermaid = window.mermaid as unknown as Mermaid;
 	let code = '';
 	let config = '';
 	let container: HTMLDivElement;

src/routes/edit.svelte

@@ -10,13 +10,11 @@
 	import { initHandler, syncDiagram } from '$lib/util/util';
 	import { errorStore } from '$lib/util/error';
 	import { onMount } from 'svelte';
+	import * as mermaid from 'mermaid';
 	import type monaco from 'monaco-editor';
-	import type { Mermaid } from 'mermaid';
 	import type { EditorUpdateEvent, State, Tab } from '$lib/types';
 	import { base } from '$app/paths';
 
-	const mermaid: Mermaid = window.mermaid as unknown as Mermaid;
-
 	let selectedMode = 'code';
 	const languageMap = {
 		code: 'mermaid',

svelte.config.js

@@ -10,7 +10,6 @@ const config = {
 			postcss: true
 		})
 	],
-
 	kit: {
 		adapter: adapter({
 			pages: `docs${process.env['BETA'] ? '/beta' : ''}`
@@ -23,7 +22,10 @@ const config = {
 		ssr: false,
 		// hydrate the <div id="svelte"> element in src/app.html
 		target: '#svelte',
-		trailingSlash: 'ignore'
+		trailingSlash: 'ignore',
+		vite: {
+			optimizeDeps: { include: ['mermaid'] }
+		}
 	}
 };