Update deploy.yml

2022-02-25 11:30:04 +01:00 · 2022-02-25 11:27:46 +01:00 · 2022-02-25 11:24:57 +01:00 · 2022-02-25 11:18:30 +01:00 · 2022-02-25 11:07:00 +01:00 · 2022-02-25 11:05:55 +01:00
20 changed files with 710 additions and 590 deletions
@@ -11,24 +11,13 @@ jobs:
  build:
    runs-on: ubuntu-latest
    steps:
-      - uses: actions/setup-node@v2
-        with:
-          node-version: '16'
-
      - 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-cache
+      - uses: actions/setup-node@v3
        with:
-          path: ${{ steps.yarn-cache-dir-path.outputs.dir }}
-          key: ${{ runner.os }}-yarn-${{ hashFiles('**/yarn.lock') }}
-          restore-keys: |
-            ${{ runner.os }}-yarn-
+          node-version: '16'
+          cache: yarn

      - name: Build & Deploy
        run: |
@@ -9,7 +9,7 @@ jobs:
      - uses: actions/checkout@v2
      - run: npx browserslist@latest --update-db
      - name: Commit changes
-        uses: EndBug/add-and-commit@v7
+        uses: EndBug/add-and-commit@v8
        with:
          author_name: ${{ github.actor }}
          author_email: ${{ github.actor }}@users.noreply.github.com
@@ -1,8 +1,7 @@
 name: Update Monaco-editor
 on:
  workflow_dispatch:
-  pull_request:
-    types: [opened]
+  push:
    branches:
      - 'dependabot/npm_and_yarn/develop/monaco-editor-**'

@@ -13,7 +12,7 @@ jobs:
      - uses: actions/checkout@v2
      - run: ./bin/update-monaco
      - name: Commit changes
-        uses: EndBug/add-and-commit@v7
+        uses: EndBug/add-and-commit@v8
        with:
          author_name: ${{ github.actor }}
          author_email: ${{ github.actor }}@users.noreply.github.com
@@ -0,0 +1,4 @@
+{
+	"editor.formatOnSave": true,
+	"cSpell.words": ["pako", "Serde", "serdes"]
+}
@@ -6,7 +6,7 @@
 # Stop               : press ctrl + c 
 #                                     or 
 #                                        docker stop mermaid-live-editor
-FROM node:17.3.1 as mermaid-live-editor-builder 
+FROM node:17.6.0 as mermaid-live-editor-builder 
 COPY --chown=node:node . /home
 WORKDIR /home
 RUN yarn install
@@ -30,4 +30,14 @@ describe('Auto sync tests', () => {
 		cy.get('#view').should('not.have.class', 'outOfSync');
 		cy.getLocalStorage('codeStore').snapshot();
 	});
+
+	it('supports commenting code out/in', () => {
+		const cmd = Cypress.platform === 'darwin' ? 'meta' : 'ctrl';
+
+		cy.get('#editor').type(`{uparrow}{${cmd}}/`);
+		cy.get('#view').contains('Car').should('not.exist');
+
+		cy.get('#editor').type(`{uparrow}{${cmd}}/`);
+		cy.get('#view').contains('Car').should('exist');
+	});
 });
@@ -46,7 +46,9 @@ describe('Save History', () => {
 		cy.get('#historyList').contains('No items in History');
 	});

-	it('should auto save history', () => {
+	// TODO: Fix #639
+	// eslint-disable-next-line mocha/no-skipped-tests
+	xit('should auto save history', () => {
 		cy.get('#editor').type('  C --> HistoryTest');
 		cy.tick(70000);
 		cy.contains('Timeline').click();
@@ -93,4 +93,31 @@ describe('Site Loads', () => {
 		cy.visit('/#/edit/eyJjb2RlIjoiZ3JhcGggVERcbiAg');
 		cy.contains('Please Click here to Raise an issue in github.');
 	});
+
+	it('should load uncompressed URL', () => {
+		cy.visit(
+			'/edit/#eyJjb2RlIjoiZ3JhcGggVERcbiAgICBBW05ldyBZZWFyXSAtLT58R2V0IG1vbmV5fCBCKEdvIHNob3BwaW5nKVxuICAgIEIgLS0-IEN7TGV0IG1lIHRoaW5rfVxuICAgIEMgLS0-fE9uZXwgRFtMYXB0b3BdXG4gICAgQyAtLT58VHdvfCBFW2lQaG9uZV1cbiAgICBDIC0tPnxUaHJlZXwgRltmYTpmYS1jYXIgQ2FyXSIsIm1lcm1haWQiOiJ7XG4gIFwidGhlbWVcIjogXCJkZWZhdWx0XCJcbn0iLCJ1cGRhdGVFZGl0b3IiOmZhbHNlLCJhdXRvU3luYyI6dHJ1ZSwidXBkYXRlRGlhZ3JhbSI6ZmFsc2V9'
+		);
+		cy.contains('New Year');
+		cy.visit(
+			'/edit#eyJjb2RlIjoiY2xhc3NEaWFncmFtXG4gICAgQW5pbWFsIDx8LS0gRHVja1xuICAgIEFuaW1hbCA8fC0tIEZpc2hcbiAgICBBbmltYWwgPHwtLSBaZWJyYVxuICAgIEFuaW1hbCA6ICtpbnQgYWdlXG4gICAgQW5pbWFsIDogK1N0cmluZyBnZW5kZXJcbiAgICBBbmltYWw6ICtpc01hbW1hbCgpXG4gICAgQW5pbWFsOiArbWF0ZSgpXG4gICAgY2xhc3MgRHVja3tcbiAgICAgICtTdHJpbmcgYmVha0NvbG9yXG4gICAgICArc3dpbSgpXG4gICAgICArcXVhY2soKVxuICAgIH1cbiAgICBjbGFzcyBGaXNoe1xuICAgICAgLWludCBzaXplSW5GZWV0XG4gICAgICAtY2FuRWF0KClcbiAgICB9XG4gICAgY2xhc3MgWmVicmF7XG4gICAgICArYm9vbCBpc193aWxkXG4gICAgICArcnVuKClcbiAgICB9XG4gICAgICAgICAgICAiLCJtZXJtYWlkIjoie1xuICBcInRoZW1lXCI6IFwiZGFya1wiXG59IiwidXBkYXRlRWRpdG9yIjpmYWxzZSwiYXV0b1N5bmMiOnRydWUsInVwZGF0ZURpYWdyYW0iOmZhbHNlfQ'
+		);
+		cy.contains('Animal');
+		cy.visit(
+			'/edit/#base64:eyJjb2RlIjoiZ3JhcGggVERcbiAgICBBW05ldyBZZWFyXSAtLT58R2V0IG1vbmV5fCBCKEdvIHNob3BwaW5nKVxuICAgIEIgLS0-IEN7TGV0IG1lIHRoaW5rfVxuICAgIEMgLS0-fE9uZXwgRFtMYXB0b3BdXG4gICAgQyAtLT58VHdvfCBFW2lQaG9uZV1cbiAgICBDIC0tPnxUaHJlZXwgRltmYTpmYS1jYXIgQ2FyXSIsIm1lcm1haWQiOiJ7XG4gIFwidGhlbWVcIjogXCJkZWZhdWx0XCJcbn0iLCJ1cGRhdGVFZGl0b3IiOmZhbHNlLCJhdXRvU3luYyI6dHJ1ZSwidXBkYXRlRGlhZ3JhbSI6ZmFsc2V9'
+		);
+		cy.contains('New Year');
+	});
+
+	it('should load compressed URL', () => {
+		cy.visit(
+			'/edit#pako:eNpVkM2KwkAQhF-l6dMK5gVyEDRxvYi7sF6WjIcm0zqDzg_jBJEk725Hd2G3Tw31VVFUj23QjCWeEkUD-1p5kFs2O77BN1M6QFEshg1ncMHzfYDV2ybA1YQYrT_NXvhqgqDqtxPGkI315_ElVU__h-cB6mZLMYd4-Kvsb2GAdWM_jcT_V0xicb03RyqPVLSUoJI-OEfHyZHV0rqfDAqzYccKS3k1pbNC5Ufhuqgp81rbHBJKxuXKc6Quh6-7b7HMqeNfqLYkC7gfanwAlW1ZvQ'
+		);
+		cy.contains('New Year');
+		cy.visit(
+			'/edit#pako:eNptkU1PwzAMhv9K5BOI9Q9EXBDbJA477YYqITcxndV8QD40weh_Jy1rGR0-OY_tV2_sEyivCSQogzGuGduAtnaixINji0bcf1WVWGfVXdMtx8M1faYm4B8sxR27JLClJd6nwK4VLTlN4bI4jMQd2pLe3C4KFhNNcLQ92jv9ADGLNoTdozc-zIV4ZDsNlud7RtVN7_5Sb_jYrFcN3iN_0pPbEqUZK3QbTP_Ojyv4NdR4bwTHlyMbPcOQ3WJ2CliBpWCRdbnLqFJDOpClGmRJNYauhtr1pS-_6bKMjebkA8hXNJFWgDn5_YdTIFPINDWdb3vu6r8BaWOZRQ'
+		);
+		cy.reload();
+		cy.contains('Animal');
+	});
 });
@@ -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": "9.1.1",
+  "__version": "9.3.1",
  "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}"
@@ -15,49 +15,50 @@
 	},
 	"devDependencies": {
 		"@cypress/snapshot": "^2.1.7",
-		"@sveltejs/adapter-static": "1.0.0-next.26",
-		"@sveltejs/kit": "1.0.0-next.232",
+		"@sveltejs/adapter-static": "1.0.0-next.28",
+		"@sveltejs/kit": "1.0.0-next.278",
 		"@types/mermaid": "^8.2.7",
+		"@types/pako": "^1.0.3",
 		"@typescript-eslint/eslint-plugin": "^4.33.0",
 		"@typescript-eslint/parser": "^4.33.0",
 		"autoprefixer": "^10.4.2",
-		"chai": "^4.3.4",
-		"cssnano": "^5.0.15",
-		"cypress": "9.3.1",
-		"cypress-localstorage-commands": "^1.6.1",
+		"chai": "^4.3.6",
+		"cssnano": "^5.0.17",
+		"cypress": "9.5.0",
+		"cypress-localstorage-commands": "^1.7.0",
 		"eslint": "^7.32.0",
-		"eslint-config-prettier": "^8.1.0",
+		"eslint-config-prettier": "^8.4.0",
 		"eslint-plugin-cypress": "^2.12.1",
 		"eslint-plugin-es": "^4.1.0",
 		"eslint-plugin-mocha": "^10.0.3",
 		"eslint-plugin-postcss-modules": "^2.0.0",
-		"eslint-plugin-svelte3": "^3.4.0",
-		"eslint-plugin-tailwindcss": "^3.3.0",
+		"eslint-plugin-svelte3": "^3.4.1",
+		"eslint-plugin-tailwindcss": "^3.5.0",
 		"husky": "^7.0.4",
-		"lint-staged": "^12.2.1",
-		"mocha": "^9.1.4",
+		"lint-staged": "^12.3.4",
+		"mocha": "^9.2.1",
 		"node-html-parser": "^5.2.0",
-		"postcss": "^8.4.5",
-		"postcss-load-config": "^3.1.1",
+		"postcss": "^8.4.7",
+		"postcss-load-config": "^3.1.3",
 		"prettier": "~2.5.1",
 		"prettier-plugin-svelte": "^2.6.0",
-		"svelte": "^3.46.2",
-		"svelte-preprocess": "^4.10.2",
-		"tailwindcss": "^3.0.13",
+		"svelte": "^3.46.4",
+		"svelte-preprocess": "^4.10.4",
+		"tailwindcss": "^3.0.21",
 		"tslib": "^2.3.1",
-		"typescript": "^4.5.4"
+		"typescript": "^4.5.5"
 	},
 	"type": "module",
 	"dependencies": {
 		"@analytics/google-analytics": "^0.5.3",
 		"@macfja/svelte-persistent-store": "^1.2.0",
-		"analytics": "^0.7.21",
-		"daisyui": "1.24.3",
+		"analytics": "^0.8.0",
+		"daisyui": "2.2.2",
 		"js-base64": "^3.7.2",
-		"mermaid": "8.13.9",
+		"mermaid": "8.14.0",
 		"moment": "^2.29.1",
-		"monaco-editor": "^0.31.1",
-		"monaco-mermaid": "^1.0.2",
+		"monaco-editor": "^0.32.1",
+		"monaco-mermaid": "^1.0.3",
 		"pako": "2.0.4",
 		"random-word-slugs": "^0.1.6"
 	},
@@ -18,24 +18,24 @@
 			href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.2/css/all.min.css" />
 		<link
 			rel="stylesheet"
-			href="https://cdnjs.cloudflare.com/ajax/libs/monaco-editor/0.31.1/min/vs/editor/editor.main.min.css"
+			href="https://cdnjs.cloudflare.com/ajax/libs/monaco-editor/0.32.1/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.31.1/min/vs' }
+				paths: { vs: 'https://cdnjs.cloudflare.com/ajax/libs/monaco-editor/0.32.1/min/vs' }
 			};
 		</script>
 		<script
-			src="https://cdnjs.cloudflare.com/ajax/libs/monaco-editor/0.31.1/min/vs/loader.min.js"
+			src="https://cdnjs.cloudflare.com/ajax/libs/monaco-editor/0.32.1/min/vs/loader.min.js"
 			crossorigin="anonymous"
 			referrerpolicy="no-referrer"></script>
 		<script
-			src="https://cdnjs.cloudflare.com/ajax/libs/monaco-editor/0.31.1/min/vs/editor/editor.main.nls.min.js"
+			src="https://cdnjs.cloudflare.com/ajax/libs/monaco-editor/0.32.1/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.31.1/min/vs/editor/editor.main.js"
+			src="https://cdnjs.cloudflare.com/ajax/libs/monaco-editor/0.32.1/min/vs/editor/editor.main.js"
 			crossorigin="anonymous"
 			referrerpolicy="no-referrer"></script>

@@ -1,7 +1,7 @@
 import type { Handle } from '@sveltejs/kit/types/hooks';

-export const handle: Handle = async ({ request, resolve }) => {
-	const response = await resolve(request, {
+export const handle: Handle = async ({ event, resolve }) => {
+	const response = await resolve(event, {
 		ssr: false
 	});

@@ -2,11 +2,11 @@
 	import { browser } from '$app/env';

 	import Card from '$lib/components/card/card.svelte';
-	import { rendererUrl, krokiRendererUrl } from '$lib/util/env';
-	import { base64State, codeStore } from '$lib/util/state';
-	import { toBase64, btoa as jsbtoa } from 'js-base64';
+	import { krokiRendererUrl, rendererUrl } from '$lib/util/env';
+	import { pakoSerde } from '$lib/util/serde';
+	import { serializedState, codeStore } from '$lib/util/state';
+	import { toBase64 } from 'js-base64';
 	import moment from 'moment';
-	import pako from 'pako';

 	type Exporter = (context: CanvasRenderingContext2D, image: HTMLImageElement) => () => void;

@@ -18,7 +18,7 @@
 		}
 		const svgString = svg.outerHTML
 			.replaceAll('<br>', '<br/>')
-			.replaceAll(/<img([^>]*)>/g, (m, g) => `<img ${g} />`);
+			.replaceAll(/<img([^>]*)>/g, (m, g: string) => `<img ${g} />`);
 		return toBase64(svgString);
 	};

@@ -79,7 +79,7 @@
 			canvas.toBlob((blob) => {
 				try {
 					// @ts-ignore: https://github.com/microsoft/TypeScript-DOM-lib-generator/pull/1004/files
-					navigator.clipboard.write([
+					void navigator.clipboard.write([
 						/* eslint-disable no-undef */
 						// @ts-ignore: https://github.com/microsoft/TypeScript/issues/43821
 						new ClipboardItem({
@@ -109,7 +109,7 @@
 	};

 	const onCopyMarkdown = () => {
-		document.getElementById('markdown').select();
+		(document.getElementById('markdown') as HTMLInputElement).select();
 		document.execCommand('Copy');
 	};

@@ -128,33 +128,9 @@
 		window.location.href = `${window.location.pathname}?gist=${gistURL}`;
 	};

-	const textEncode = (str) => {
-		if (window.TextEncoder) {
-			return new TextEncoder('utf-8').encode(str);
-		}
-		let utf8 = unescape(encodeURIComponent(str));
-		let result = new Uint8Array(utf8.length);
-		for (let i = 0; i < utf8.length; i++) {
-			result[i] = utf8.charCodeAt(i);
-		}
-		return result;
-	};
-
-	const onKrokiClick = () => {
-		const krokiCode = getKrokiCode($codeStore.code);
-		const krokiUrl = `${krokiRendererUrl}/mermaid/svg/${krokiCode}`;
-		return window.open(krokiUrl, '_blank');
-	};
-
-	const getKrokiCode = (source) => {
-		const data = textEncode(source);
-		const compressed = pako.deflate(data, { level: 9, to: 'string' });
-		let result = jsbtoa(compressed).replace(/\+/g, '-').replace(/\//g, '_');
-		return result;
-	};
-
 	let iUrl: string;
 	let svgUrl: string;
+	let krokiUrl: string;
 	let mdCode: string;
 	let imagemodeselected = 'auto';
 	let userimagesize = 1080;
@@ -163,14 +139,10 @@
 	if (browser && ['mermaid.live', 'netlify'].some((path) => window.location.host.includes(path))) {
 		isNetlify = true;
 	}
-	base64State.subscribe((encodedState: string) => {
-		const stateCopy = JSON.parse(JSON.stringify($codeStore));
-		if (typeof stateCopy.mermaid === 'string') {
-			stateCopy.mermaid = JSON.parse(stateCopy.mermaid);
-		}
-		const b64Code = toBase64(JSON.stringify(stateCopy), true);
-		iUrl = `${rendererUrl}/img/${b64Code}`;
-		svgUrl = `${rendererUrl}/svg/${b64Code}`;
+	serializedState.subscribe((encodedState: string) => {
+		iUrl = `${rendererUrl}/img/${encodedState}`;
+		svgUrl = `${rendererUrl}/svg/${encodedState}`;
+		krokiUrl = `${krokiRendererUrl}/mermaid/svg/${pakoSerde.serialize($codeStore.code)}`;
 		mdCode = `[![](${iUrl})](${window.location.protocol}//${window.location.host}${window.location.pathname}#${encodedState})`;
 	});
 </script>
@@ -194,8 +166,8 @@
 		<button class="action-btn flex-auto">
 			<a target="_blank" href={svgUrl}><i class="fas fa-external-link-alt mr-2" /> SVG</a>
 		</button>
-		<button class="action-btn flex-auto" on:click={onKrokiClick}>
-			<i class="fas fa-external-link-alt mr-2" /> Kroki
+		<button class="action-btn flex-auto">
+			<a target="_blank" href={krokiUrl}><i class="fas fa-external-link-alt mr-2" /> Kroki</a>
 		</button>

 		<div class="flex gap-2 items-center">
@@ -1,2 +1,4 @@
-export const rendererUrl = import.meta.env.MERMAID_RENDERER_URL ?? 'https://mermaid.ink';
-export const krokiRendererUrl = import.meta.env.MERMAID_KROKI_RENDERER_URL ?? 'https://kroki.io';
+export const rendererUrl: string =
+	(import.meta.env.MERMAID_RENDERER_URL as string) ?? 'https://mermaid.ink';
+export const krokiRendererUrl: string =
+	(import.meta.env.MERMAID_KROKI_RENDERER_URL as string) ?? 'https://kroki.io';
@@ -0,0 +1,61 @@
+import { deflate, inflate } from 'pako';
+import { toUint8Array, fromUint8Array, toBase64, fromBase64 } from 'js-base64';
+import type { State } from '$lib/types';
+
+interface Serde {
+	serialize: (state: string) => string;
+	deserialize: (state: string) => string;
+}
+
+const base64Serde: Serde = {
+	serialize: (state: string): string => {
+		return toBase64(state, true);
+	},
+	deserialize: (state: string): string => {
+		return fromBase64(state);
+	}
+};
+
+export const pakoSerde: Serde = {
+	serialize: (state: string): string => {
+		const data = new TextEncoder().encode(state);
+		const compressed = deflate(data, { level: 9 });
+		return fromUint8Array(compressed, true);
+	},
+	deserialize: (state: string): string => {
+		const data = toUint8Array(state);
+		return inflate(data, { to: 'string' });
+	}
+};
+
+const serdes: { [key: string]: Serde } = {
+	base64: base64Serde,
+	pako: pakoSerde
+};
+
+type SerdeType = keyof typeof serdes;
+
+export const serializeState = (state: State): string => {
+	const json = JSON.stringify(state);
+	const defaultSerde: SerdeType = 'pako';
+	const serialized = serdes[defaultSerde].serialize(json);
+	return `${defaultSerde}:${serialized}`;
+};
+
+export const deserializeState = (state: string): State => {
+	let type: SerdeType, serialized: string;
+	if (state.includes(':')) {
+		let tempType: string;
+		[tempType, serialized] = state.split(':');
+		if (tempType in serdes) {
+			type = tempType;
+		} else {
+			throw new Error(`Unknown serde type: ${tempType}`);
+		}
+	} else {
+		type = 'base64';
+		serialized = state;
+	}
+	const json = serdes[type].deserialize(serialized);
+	return JSON.parse(json) as State;
+};
@@ -1,9 +1,9 @@
 import { writable, get, derived } from 'svelte/store';
 import type { Readable } from 'svelte/store';
-import { toBase64, fromBase64 } from 'js-base64';
 import { persist, localStorage } from '@macfja/svelte-persistent-store';
 import type { State } from '$lib/types';
 import { saveStatistics } from './stats';
+import { serializeState, deserializeState } from './serde';

 export const defaultState: State = {
 	code: `graph TD
@@ -37,17 +37,16 @@ const urlParseFailedState = `graph TD
    click D href "https://github.com/mermaid-js/mermaid-live-editor/issues/new?assignees=&labels=bug&template=bug_report.md&title=Broken%20link" "Raise issue"`;

 export const codeStore = persist(writable(defaultState), localStorage(), 'codeStore');
-export const base64State: Readable<string> = derived([codeStore], ([code], set) => {
-	set(toBase64(JSON.stringify(code), true));
+export const serializedState: Readable<string> = derived([codeStore], ([code], set) => {
+	set(serializeState(code));
 });

 export const loadState = (data: string): void => {
 	let state: State;
+	console.log('Loading', data);
 	try {
-		const stateStr = fromBase64(data);
-		console.log(`Trying to load state: ${stateStr}`);
-		state = JSON.parse(stateStr);
-		const mermaidConfig =
+		state = deserializeState(data);
+		const mermaidConfig: { [key: string]: string } =
 			typeof state.mermaid === 'string' ? JSON.parse(state.mermaid) : state.mermaid;
 		if (
 			mermaidConfig.securityLevel &&
@@ -116,7 +115,7 @@ export const toggleDarkTheme = (dark: boolean): void => {
 };

 export const initURLSubscription = (): void => {
-	base64State.subscribe((state: string) => {
+	serializedState.subscribe((state: string) => {
 		history.replaceState(undefined, undefined, `#${state}`);
 	});
 };
@@ -6,7 +6,7 @@
 	import View from '$lib/components/view.svelte';
 	import Card from '$lib/components/card/card.svelte';
 	import History from '$lib/components/history/history.svelte';
-	import { updateCode, updateConfig, codeStore, base64State } from '$lib/util/state';
+	import { updateCode, updateConfig, codeStore, serializedState } from '$lib/util/state';
 	import { initHandler, syncDiagram } from '$lib/util/util';
 	import { errorStore } from '$lib/util/error';
 	import { onMount } from 'svelte';
@@ -15,7 +15,7 @@
 	import type { EditorUpdateEvent, State, Tab } from '$lib/types';
 	import { base } from '$app/paths';

-	base64State; // Weird fix for error > base64State is not defined. Treeshaking?
+	serializedState; // Weird fix for error > serializedState is not defined. Treeshaking?
 	let selectedMode = 'code';
 	const languageMap = {
 		code: 'mermaid',
@@ -82,7 +82,7 @@
 					startLineNumber: e.hash.loc.first_line,
 					startColumn: e.hash.loc.first_column,
 					endLineNumber: e.hash.loc.last_line,
-					endColumn: e.hash.loc.last_column + 1,
+					endColumn: (e.hash.loc.last_column as number) + 1,
 					message: e.str
 				};
 				errorMarkers.push(marker);
@@ -96,7 +96,7 @@
 	};

 	const viewDiagram = () => {
-		window.open(`${base}/view#${$base64State}`, '_blank').focus();
+		window.open(`${base}/view#${$serializedState}`, '_blank').focus();
 	};

 	onMount(async () => {
@@ -19,8 +19,6 @@ const config = {
 					base: `/mermaid-live-editor${process.env['BETA'] ? '/beta' : ''}`
 			  }
 			: {},
-		// hydrate the <div id="svelte"> element in src/app.html
-		target: '#svelte',
 		trailingSlash: 'ignore',
 		vite: {
 			envPrefix: 'MERMAID_',
@@ -2,7 +2,7 @@
 	"compilerOptions": {
 		"moduleResolution": "node",
 		"module": "es2020",
-		"lib": ["es2020", "ESNext", "DOM.Iterable"],
+		"lib": ["es2020", "ESNext", "DOM.Iterable", "DOM"],
 		"target": "es2019",
 		/**
 			svelte-preprocess cannot figure out whether you have a value or a type, so tell TypeScript
@@ -33,6 +33,7 @@
 		"src/**/*.svelte",
 		"cypress/**/*.ts",
 		"cypress/**/*.js",
-		"static/**/*.js"
+		"static/**/*.js",
+		"src/pako.mts"
 	]
 }