Remove jit mode from tailwind config

Develop

.github/dependabot.yml

@@ -6,15 +6,18 @@ updates:
     schedule:
       interval: weekly
       day: friday
+      time: '07:00'
   - package-ecosystem: github-actions
     directory: /
     target-branch: develop
     schedule:
       interval: weekly
       day: friday
+      time: '07:00'
   - package-ecosystem: npm
     directory: /
     target-branch: develop
     schedule:
       interval: weekly
       day: friday
+      time: '07:00'

.github/workflows/update-browserlist.yml

@@ -0,0 +1,16 @@
+name: Update Browserslist
+on:
+  workflow_dispatch:
+
+jobs:
+  build:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v2
+      - run: npx browserslist@latest --update-db
+      - name: Commit changes
+        uses: EndBug/add-and-commit@v7
+        with:
+          author_name: ${{ github.actor }}
+          author_email: ${{ github.actor }}@users.noreply.github.com
+          message: 'Update Browserslist'

.github/workflows/update-monaco-editor.yml

@@ -0,0 +1,20 @@
+name: Update Monaco-editor
+on:
+  workflow_dispatch:
+  pull_request:
+    types: [opened]
+    branches:
+      - 'dependabot/npm_and_yarn/develop/monaco-editor-**'
+
+jobs:
+  build:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v2
+      - run: ./bin/update-monaco
+      - name: Commit changes
+        uses: EndBug/add-and-commit@v7
+        with:
+          author_name: ${{ github.actor }}
+          author_email: ${{ github.actor }}@users.noreply.github.com
+          message: 'Update Monaco-editor'

.prettierrc

@@ -1,7 +1,7 @@
 {
 	"singleQuote": true,
 	"svelteSortOrder": "options-scripts-markup-styles",
-	"svelteBracketNewLine": false,
+	"bracketSameLine": true,
 	"useTabs": true,
 	"trailingComma": "none",
 	"printWidth": 100

Dockerfile

@@ -6,7 +6,7 @@
 # Stop               : press ctrl + c 
 #                                     or 
 #                                        docker stop mermaid-live-editor
-FROM node:16.10.0 as mermaid-live-editor-builder 
+FROM node:17.2.0 as mermaid-live-editor-builder 
 COPY --chown=node:node . /home
 WORKDIR /home
 RUN yarn install

Dockerfile.dev

@@ -1,4 +1,4 @@
-FROM node:16
+FROM node:17
 WORKDIR /app
 COPY package.json .
 COPY yarn.lock .

cypress/integration/loadSite.spec.ts

@@ -17,9 +17,8 @@ describe('Site Loads', () => {
 		);
 		cy.url().should(
 			'include',
-			'/edit/eyJjb2RlIjoiZ3JhcGggVERcbiAgICBBW0NocmlzdG1hc10gLS0-fEdldCBtb25leXwgQihHbyBzaG9wcGluZylcbiAgICBCIC0tPiBDe0xldCBtZSB0aGlua31cbiAgICBDIC0tPnxPbmV8IERbTGFwdG9wXVxuICAgIEMgLS0-fFR3b3wgRVtpUGhvbmVdXG4gICAgQyAtLT58VGhyZWV8IEZbZmE6ZmEtY2FyIENhcl0iLCJtZXJtYWlkIjp7InRoZW1lIjoiZGVmYXVsdCJ9LCJ1cGRhdGVFZGl0b3IiOmZhbHNlfQ'
+			'/edit#eyJjb2RlIjoiZ3JhcGggVERcbiAgICBBW0NocmlzdG1hc10gLS0-fEdldCBtb25leXwgQihHbyBzaG9wcGluZylcbiAgICBCIC0tPiBDe0xldCBtZSB0aGlua31cbiAgICBDIC0tPnxPbmV8IERbTGFwdG9wXVxuICAgIEMgLS0-fFR3b3wgRVtpUGhvbmVdXG4gICAgQyAtLT58VGhyZWV8IEZbZmE6ZmEtY2FyIENhcl0iLCJtZXJtYWlkIjp7InRoZW1lIjoiZGVmYXVsdCJ9LCJ1cGRhdGVFZGl0b3IiOmZhbHNlfQ'
 		);
-
 		cy.contains('History').click();
 		cy.getLocalStorage('codeStore').snapshot();
 	});
@@ -88,4 +87,9 @@ describe('Site Loads', () => {
 		cy.contains('securityLevel');
 		cy.get('#view').find('img').should('be.visible');
 	});
+
+	it('should show troubleshooting steps if loading fails', () => {
+		cy.visit('/#/edit/eyJjb2RlIjoiZ3JhcGggVERcbiAg');
+		cy.contains('Please Click here to Raise an issue in github.');
+	});
 });

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": "8.4.1",
+  "__version": "8.5.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

@@ -15,49 +15,49 @@
 	},
 	"devDependencies": {
 		"@cypress/snapshot": "^2.1.7",
-		"@sveltejs/adapter-static": "1.0.0-next.20",
-		"@sveltejs/kit": "1.0.0-next.173",
+		"@sveltejs/adapter-static": "1.0.0-next.22",
+		"@sveltejs/kit": "1.0.0-next.202",
 		"@types/mermaid": "^8.2.7",
-		"@typescript-eslint/eslint-plugin": "^4.31.2",
-		"@typescript-eslint/parser": "^4.31.2",
-		"autoprefixer": "^10.3.5",
+		"@typescript-eslint/eslint-plugin": "^4.33.0",
+		"@typescript-eslint/parser": "^4.33.0",
+		"autoprefixer": "^10.4.0",
 		"chai": "^4.3.4",
-		"cssnano": "^5.0.8",
-		"cypress": "8.4.1",
-		"cypress-localstorage-commands": "^1.5.0",
+		"cssnano": "^5.0.13",
+		"cypress": "9.1.1",
+		"cypress-localstorage-commands": "^1.6.1",
 		"eslint": "^7.32.0",
 		"eslint-config-prettier": "^8.1.0",
 		"eslint-plugin-cypress": "^2.12.1",
 		"eslint-plugin-es": "^4.1.0",
-		"eslint-plugin-mocha": "^9.0.0",
-		"eslint-plugin-postcss-modules": "^1.2.1",
+		"eslint-plugin-mocha": "^10.0.3",
+		"eslint-plugin-postcss-modules": "^2.0.0",
 		"eslint-plugin-svelte3": "^3.2.1",
-		"eslint-plugin-tailwindcss": "^1.15.0",
-		"husky": "^7.0.2",
-		"lint-staged": "^11.1.2",
-		"mocha": "^9.1.1",
-		"node-html-parser": "^4.1.5",
-		"postcss": "^8.3.8",
+		"eslint-plugin-tailwindcss": "^1.17.2",
+		"husky": "^7.0.4",
+		"lint-staged": "^12.1.2",
+		"mocha": "^9.1.3",
+		"node-html-parser": "^5.1.0",
+		"postcss": "^8.4.5",
 		"postcss-load-config": "^3.1.0",
-		"prettier": "~2.4.1",
-		"prettier-plugin-svelte": "^2.4.0",
-		"svelte": "^3.43.0",
-		"svelte-preprocess": "^4.9.5",
-		"tailwindcss": "^2.2.15",
+		"prettier": "~2.5.1",
+		"prettier-plugin-svelte": "^2.5.1",
+		"svelte": "^3.44.3",
+		"svelte-preprocess": "^4.10.0",
+		"tailwindcss": "^3.0.5",
 		"tslib": "^2.3.1",
-		"typescript": "^4.4.3"
+		"typescript": "^4.5.4"
 	},
 	"type": "module",
 	"dependencies": {
 		"@analytics/google-analytics": "^0.5.3",
 		"@macfja/svelte-persistent-store": "^1.2.0",
-		"analytics": "^0.7.14",
-		"daisyui": "^1.14.1",
+		"analytics": "^0.7.19",
+		"daisyui": "1.16.5",
 		"js-base64": "^3.7.2",
-		"mermaid": "git+https://github.com/sidharthv96/mermaid.git#esm",
+		"mermaid": "8.13.5",
 		"moment": "^2.29.1",
-		"monaco-editor": "^0.28.1",
-		"random-word-slugs": "^0.0.5"
+		"monaco-editor": "^0.31.1",
+		"random-word-slugs": "^0.1.6"
 	},
 	"lint-staged": {
 		"*.{ts,svelte,js,css,md,json}": [

src/app.html

@@ -6,45 +6,38 @@
 		<title>Online FlowChart &amp; Diagrams Editor - Mermaid Live Editor</title>
 		<meta
 			name="og:image"
-			content="https://github.com/mermaid-js/mermaid/raw/develop/img/header.png"
-		/>
+			content="https://github.com/mermaid-js/mermaid/raw/develop/img/header.png" />
 		<link rel="canonical" href="https://mermaid.live" />
 		<meta
 			name="description"
-			content="Simplify documentation and avoid heavy tools. Open source Visio Alternative. Commonly used for explaining your code! Mermaid is a simple markdown-like script language for generating charts from text via javascript."
-		/>
+			content="Simplify documentation and avoid heavy tools. Open source Visio Alternative. Commonly used for explaining your code! Mermaid is a simple markdown-like script language for generating charts from text via javascript." />
 		<link rel="icon" type="image/png" href="favicon.png" />
 		<link rel="manifest" href="manifest.json" />
 		<link
 			rel="stylesheet"
-			href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.2/css/all.min.css"
-		/>
+			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.28.1/min/vs/editor/editor.main.min.css"
+			href="https://cdnjs.cloudflare.com/ajax/libs/monaco-editor/0.31.1/min/vs/editor/editor.main.min.css"
 			crossorigin="anonymous"
-			referrerpolicy="no-referrer"
-		/>
+			referrerpolicy="no-referrer" />
 		<script>
 			var require = {
-				paths: { vs: 'https://cdnjs.cloudflare.com/ajax/libs/monaco-editor/0.28.1/min/vs' }
+				paths: { vs: 'https://cdnjs.cloudflare.com/ajax/libs/monaco-editor/0.31.1/min/vs' }
 			};
 		</script>
 		<script
-			src="https://cdnjs.cloudflare.com/ajax/libs/monaco-editor/0.28.1/min/vs/loader.min.js"
+			src="https://cdnjs.cloudflare.com/ajax/libs/monaco-editor/0.31.1/min/vs/loader.min.js"
 			crossorigin="anonymous"
-			referrerpolicy="no-referrer"
-		></script>
+			referrerpolicy="no-referrer"></script>
 		<script
-			src="https://cdnjs.cloudflare.com/ajax/libs/monaco-editor/0.28.1/min/vs/editor/editor.main.nls.min.js"
+			src="https://cdnjs.cloudflare.com/ajax/libs/monaco-editor/0.31.1/min/vs/editor/editor.main.nls.min.js"
 			crossorigin="anonymous"
-			referrerpolicy="no-referrer"
-		></script>
+			referrerpolicy="no-referrer"></script>
 		<script
-			src="https://cdnjs.cloudflare.com/ajax/libs/monaco-editor/0.28.1/min/vs/editor/editor.main.js"
+			src="https://cdnjs.cloudflare.com/ajax/libs/monaco-editor/0.31.1/min/vs/editor/editor.main.js"
 			crossorigin="anonymous"
-			referrerpolicy="no-referrer"
-		></script>
+			referrerpolicy="no-referrer"></script>
 
 		%svelte.head%
 	</head>

src/lib/components/editor/util.ts

@@ -372,7 +372,8 @@ export const initEditor = (monacoEditor): void => {
 		rules: [
 			{ token: 'typeKeyword', foreground: '9650c8', fontStyle: 'bold' },
 			{ token: 'transition', foreground: '008800', fontStyle: 'bold' }
-		]
+		],
+		colors: {}
 	});
 
 	monacoEditor.editor.defineTheme('mermaid', {
@@ -390,7 +391,8 @@ export const initEditor = (monacoEditor): void => {
 			{ token: 'comment', foreground: '888c89' },
 			{ token: 'variable', foreground: 'A22889' },
 			{ token: 'type', foreground: '2BDEA8' }
-		]
+		],
+		colors: {}
 	});
 
 	// Register a completion item provider for the mermaid language

src/lib/util/state.ts

@@ -25,6 +25,17 @@ export const defaultState: State = {
 	updateDiagram: true
 };
 
+const urlParseFailedState = `graph TD
+    A[Loading URL failed. We can try to figure out why.] -->|Decode JSON| B(Please check the console to see the JSON and error details.)
+    B --> C{Is the JSON correct?}
+    C -->|Yes| D(Please Click here to Raise an issue in github.<br/>Including the broken link in the issue <br/> will speed up the fix.)
+    C -->|No| E{Did someone <br/>send you this link?}
+    E -->|Yes| F[Ask them to send <br/>you the complete link]
+    E -->|No| G{Did you copy <br/> the complete URL?}
+    G --> |Yes| D
+    G --> |"No :("| H(Try using the Timeline tab in History <br/>from same browser you used to create the diagram.)
+    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));
@@ -50,11 +61,11 @@ export const loadState = (data: string): void => {
 
 		state.mermaid = JSON.stringify(mermaidConfig, null, 2);
 	} catch (e) {
+		state = get(codeStore);
 		if (data) {
 			console.error('Init error', e);
+			state.code = urlParseFailedState;
 		}
-		state = get(codeStore);
-		console.log(state);
 	}
 	updateCodeStore({ ...state, updateEditor: true });
 };

tailwind.config.cjs

@@ -1,7 +1,6 @@
 module.exports = {
-	mode: 'jit',
 	plugins: [require('daisyui')],
-	purge: ['./src/**/*.{html,js,svelte,ts}'],
+	content: ['./src/**/*.{html,js,svelte,ts}'],
 	theme: {
 		extend: {}
 	},