Merge pull request #270 from mermaid-js/develop

fix: mermaid import

.husky/pre-commit

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

cypress/integration/loadSite.spec.ts

@@ -34,7 +34,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);
@@ -43,7 +43,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

@@ -7,7 +7,7 @@ module.exports = {
       "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]\",\"mermaid\":\"{\\n  \\\"theme\\\": \\\"default\\\"\\n}\",\"updateEditor\":false,\"autoSync\":true,\"updateDiagram\":false}"
     }
   },
-  "__version": "7.5.0",
+  "__version": "8.1.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,20 +9,22 @@
 		"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",
+		"@sveltejs/adapter-static": "1.0.0-next.13",
+		"@sveltejs/kit": "1.0.0-next.138",
 		"@types/mermaid": "^8.2.7",
 		"@typescript-eslint/eslint-plugin": "^4.28.3",
 		"@typescript-eslint/parser": "^4.28.3",
 		"autoprefixer": "^10.3.1",
 		"chai": "^4.3.4",
-		"cssnano": "^5.0.6",
-		"cypress": "^7.7.0",
-		"cypress-localstorage-commands": "^1.4.5",
+		"cssnano": "^5.0.7",
+		"cypress": "8.1.0",
+		"cypress-localstorage-commands": "^1.5.0",
 		"eslint": "^7.30.0",
 		"eslint-config-prettier": "^8.1.0",
 		"eslint-plugin-cypress": "^2.11.3",
@@ -33,13 +35,13 @@
 		"husky": "^7.0.1",
 		"lint-staged": "^11.0.1",
 		"mocha": "^9.0.2",
-		"postcss": "^8.3.5",
+		"postcss": "^8.3.6",
 		"postcss-load-config": "^3.1.0",
 		"prettier": "~2.3.2",
 		"prettier-plugin-svelte": "^2.3.1",
-		"svelte": "^3.38.3",
+		"svelte": "^3.41.0",
 		"svelte-preprocess": "^4.7.4",
-		"tailwindcss": "^2.2.4",
+		"tailwindcss": "^2.2.7",
 		"tslib": "^2.3.0",
 		"typescript": "^4.3.5"
 	},
@@ -47,9 +49,9 @@
 	"dependencies": {
 		"@analytics/google-analytics": "^0.5.3",
 		"@macfja/svelte-persistent-store": "^1.1.1",
-		"analytics": "^0.7.5",
+		"analytics": "^0.7.10",
 		"js-base64": "^3.6.1",
-		"mermaid": "^8.11.0",
+		"mermaid": "^8.11.2",
 		"moment": "^2.29.1",
 		"monaco-editor": "^0.25.2",
 		"random-word-slugs": "^0.0.2"

src/app.html

@@ -19,11 +19,6 @@
 			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.11.0/dist/mermaid.min.js"
-			integrity="sha256-sVAx+v/Q7v0Q2xm5vN7h5ccSna6gaLREhG9sF8pKT6I="
-			crossorigin="anonymous"
-		></script>
 		<link
 			rel="stylesheet"
 			href="https://cdnjs.cloudflare.com/ajax/libs/monaco-editor/0.25.2/min/vs/editor/editor.main.min.css"

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'] }
+		}
 	}
 };