From b0cb4e6a0e9e943454af88887db1449b8ed388d5 Mon Sep 17 00:00:00 2001 From: Sidharth Vinod Date: Tue, 18 Jan 2022 11:21:57 +0530 Subject: [PATCH 01/11] Revert "Revert "Use `monaco-mermaid`"" --- package.json | 1 + src/lib/components/{editor => }/editor.svelte | 2 +- src/lib/components/editor/util.ts | 552 ------------------ src/routes/edit.svelte | 2 +- yarn.lock | 5 + 5 files changed, 8 insertions(+), 554 deletions(-) rename src/lib/components/{editor => }/editor.svelte (98%) delete mode 100644 src/lib/components/editor/util.ts diff --git a/package.json b/package.json index 5754c843e..e8ba77a56 100644 --- a/package.json +++ b/package.json @@ -57,6 +57,7 @@ "mermaid": "8.13.8", "moment": "^2.29.1", "monaco-editor": "^0.31.1", + "monaco-mermaid": "^1.0.1", "random-word-slugs": "^0.1.6" }, "lint-staged": { diff --git a/src/lib/components/editor/editor.svelte b/src/lib/components/editor.svelte similarity index 98% rename from src/lib/components/editor/editor.svelte rename to src/lib/components/editor.svelte index 949ad6546..536bb427a 100644 --- a/src/lib/components/editor/editor.svelte +++ b/src/lib/components/editor.svelte @@ -4,7 +4,7 @@ import { themeStore } from '$lib/util/theme'; import type monaco from 'monaco-editor'; import { createEventDispatcher, onMount } from 'svelte'; - import { initEditor } from './util'; + import initEditor from 'monaco-mermaid'; let divEl: HTMLDivElement = null; let editor: monaco.editor.IStandaloneCodeEditor; diff --git a/src/lib/components/editor/util.ts b/src/lib/components/editor/util.ts deleted file mode 100644 index c6a652d64..000000000 --- a/src/lib/components/editor/util.ts +++ /dev/null @@ -1,552 +0,0 @@ -/* eslint-disable @typescript-eslint/no-unsafe-assignment */ -/* eslint-disable @typescript-eslint/no-unsafe-call */ -/* eslint-disable @typescript-eslint/no-unsafe-member-access */ -// eslint-disable-next-line @typescript-eslint/explicit-module-boundary-types -export const initEditor = (monacoEditor): void => { - monacoEditor.languages.register({ id: 'mermaid' }); - - const requirementDiagrams = [ - 'requirement', - 'functionalRequirement', - 'interfaceRequirement', - 'performanceRequirement', - 'physicalRequirement', - 'designConstraint' - ]; - - const keywords: { - [key: string]: { - typeKeywords: string[]; - blockKeywords: string[]; - keywords: string[]; - }; - } = { - flowchart: { - typeKeywords: ['flowchart', 'flowchart-v2', 'graph'], - blockKeywords: ['subgraph', 'end'], - keywords: [ - 'TB', - 'TD', - 'BT', - 'RL', - 'LR', - 'click', - 'call', - 'href', - '_self', - '_blank', - '_parent', - '_top', - 'linkStyle', - 'style', - 'classDef', - 'class', - 'direction', - 'interpolate' - ] - }, - sequenceDiagram: { - typeKeywords: ['sequenceDiagram'], - blockKeywords: ['alt', 'par', 'and', 'loop', 'else', 'end', 'rect', 'opt', 'alt', 'rect'], - keywords: [ - 'participant', - 'as', - 'Note', - 'note', - 'right of', - 'left of', - 'over', - 'activate', - 'deactivate', - 'autonumber', - 'title', - 'actor' - ] - }, - classDiagram: { - typeKeywords: ['classDiagram', 'classDiagram-v2'], - blockKeywords: ['class'], - keywords: [ - 'link', - 'click', - 'callback', - 'call', - 'href', - 'cssClass', - 'direction', - 'TB', - 'BT', - 'RL', - 'LR' - ] - }, - stateDiagram: { - typeKeywords: ['stateDiagram', 'stateDiagram-v2'], - blockKeywords: ['state', 'note', 'end'], - keywords: ['state', 'as', 'hide empty description', 'direction', 'TB', 'BT', 'RL', 'LR'] - }, - erDiagram: { - typeKeywords: ['erDiagram'], - blockKeywords: [], - keywords: [] - }, - journey: { - typeKeywords: ['journey'], - blockKeywords: ['section'], - keywords: ['title'] - }, - info: { - typeKeywords: ['info'], - blockKeywords: [], - keywords: ['showInfo'] - }, - gantt: { - typeKeywords: ['gantt'], - blockKeywords: [], - keywords: [ - 'title', - 'dateFormat', - 'axisFormat', - 'todayMarker', - 'section', - 'excludes', - 'inclusiveEndDates' - ] - }, - requirementDiagram: { - typeKeywords: ['requirement', 'requirementDiagram'], - blockKeywords: requirementDiagrams.concat('element'), - keywords: [] - }, - gitGraph: { - typeKeywords: ['gitGraph'], - blockKeywords: [], - keywords: ['commit', 'branch', 'merge', 'reset', 'checkout', 'LR', 'BT'] - }, - pie: { - typeKeywords: ['pie'], - blockKeywords: [], - keywords: ['title', 'showData'] - } - }; - - // Register a tokens provider for the mermaid language - monacoEditor.languages.setMonarchTokensProvider('mermaid', { - ...Object.entries(keywords) - .map((entry) => - Object.fromEntries( - Object.entries(entry[1]).map((deepEntry) => [ - entry[0] + deepEntry[0][0].toUpperCase() + deepEntry[0].slice(1), - deepEntry[1] - ]) - ) - ) - .reduce((overallKeywords, nextKeyword) => ({ ...overallKeywords, ...nextKeyword }), {}), - tokenizer: { - root: [ - [/%%(?=.*%%$)/, { token: 'string', nextEmbedded: 'json' }], - [/%%$/, { token: 'string', nextEmbedded: '@pop' }], - [/^\s*gitGraph/m, 'typeKeyword', 'gitGraph'], - [/^\s*info/m, 'typeKeyword', 'info'], - [/^\s*pie/m, 'typeKeyword', 'pie'], - [/^\s*(flowchart|flowchart-v2|graph)/m, 'typeKeyword', 'flowchart'], - [/^\s*sequenceDiagram/, 'typeKeyword', 'sequenceDiagram'], - [/^\s*classDiagram(-v2)?/, 'typeKeyword', 'classDiagram'], - [/^\s*journey/, 'typeKeyword', 'journey'], - [/^\s*gantt/, 'typeKeyword', 'gantt'], - [/^\s*stateDiagram(-v2)?/, 'typeKeyword', 'stateDiagram'], - [/^\s*erDiagram/, 'typeKeyword', 'erDiagram'], - [/^\s*requirement(Diagram)?/, 'typeKeyword', 'requirementDiagram'], - [/%%[^$]([^%]*(?!%%$)%?)*$/, 'comment'] - ], - gitGraph: [ - [/option(?=s)/, { token: 'typeKeyword', next: 'optionsGitGraph' }], - [/(^\s*branch|reset|merge|checkout)(.*$)/, ['keyword', 'variable']], - [ - /[a-zA-Z][\w$]*/, - { - cases: { - '@gitGraphBlockKeywords': 'typeKeyword', - '@gitGraphKeywords': 'keyword' - } - } - ], - [/%%[^$]([^%]*(?!%%$)%?)*$/, 'comment'], - [/".*?"/, 'string'], - [/\^/, 'delimiter.bracket'] - ], - optionsGitGraph: [ - [/s$/, { token: 'typeKeyword', nextEmbedded: 'json', matchOnlyAtLineStart: false }], - ['end', { token: 'typeKeyword', next: '@pop', nextEmbedded: '@pop' }] - ], - info: [ - [ - /[a-zA-Z][\w$]*/, - { - cases: { - '@infoBlockKeywords': 'typeKeyword', - '@infoKeywords': 'keyword' - } - } - ] - ], - pie: [ - [/(title)(.*$)/, ['keyword', 'string']], - [ - /[a-zA-Z][\w$]*/, - { - cases: { - '@pieBlockKeywords': 'typeKeyword', - '@pieKeywords': 'keyword' - } - } - ], - [/".*?"/, 'string'], - [/\s*\d+/, 'number'], - [/:/, 'delimiter.bracket'], - [/%%[^$]([^%]*(?!%%$)%?)*$/, 'comment'] - ], - flowchart: [ - [/[ox]?(--+|==+)[ox]/, 'transition'], - [ - /[a-zA-Z][\w$]*/, - { - cases: { - '@flowchartBlockKeywords': 'typeKeyword', - '@flowchartKeywords': 'keyword', - '@default': 'variable' - } - } - ], - [/\|+.+?\|+/, 'string'], - [/\[+(\\.+?[\\/]|\/.+?[/\\])\]+/, 'string'], - [/[[>]+[^\]|[]+?\]+/, 'string'], - [/{+.+?}+/, 'string'], - [/\(+.+?\)+/, 'string'], - [/-\.+->?/, 'transition'], - [/(-[-.])([^->]+?)(-{3,}|-{2,}>|\.-+>)/, ['transition', 'string', 'transition']], - [/(==+)([^=]+?)(={3,}|={2,}>)/, ['transition', 'string', 'transition']], - [/|===+|---+/, 'transition'], - [/:::/, 'transition'], - [/[;&]/, 'delimiter.bracket'], - [/".*?"/, 'string'], - [/%%[^$]([^%]*(?!%%$)%?)*$/, 'comment'] - ], - sequenceDiagram: [ - [ - /[a-zA-Z][\w$]*/, - { - cases: { - '@sequenceDiagramBlockKeywords': 'typeKeyword', - '@sequenceDiagramKeywords': 'keyword', - '@default': 'variable' - } - } - ], - [/(--?>?>|--?[)x])[+-]?/, 'transition'], - [/(:)([^:\n]*?$)/, ['delimiter.bracket', 'string']], - [/%%[^$]([^%]*(?!%%$)%?)*$/, 'comment'] - ], - classDiagram: [ - [/(?!class\s)([a-zA-Z]+)(\s+[a-zA-Z]+)/, ['type', 'variable']], - [/(\*|<\|?|o)?(--|\.\.)(\*|\|?>|o)?/, 'transition'], - [/^\s*class\s(?!.*\{)/, 'keyword'], - [ - /[a-zA-Z][\w$]*/, - { - cases: { - '@classDiagramBlockKeywords': 'typeKeyword', - '@classDiagramKeywords': 'keyword', - '@default': 'variable' - } - } - ], - [/%%[^$]([^%]*(?!%%$)%?)*$/, 'comment'], - [/(<<)(.+?)(>>)/, ['delimiter.bracket', 'annotation', 'delimiter.bracket']], - [/".*?"/, 'string'], - [/:::/, 'transition'], - [/:|\+|-|#|~|\*\s*$|\$\s*$|\(|\)|{|}/, 'delimiter.bracket'] - ], - journey: [ - [/(title)(.*)/, ['keyword', 'string']], - [/(section)(.*)/, ['typeKeyword', 'string']], - [ - /[a-zA-Z][\w$]*/, - { - cases: { - '@journeyBlockKeywords': 'typeKeyword', - '@journeyKeywords': 'keyword', - '@default': 'variable' - } - } - ], - [ - /(^\s*.+?)(:)(.*?)(:)(.*?)([,$])/, - [ - 'string', - 'delimiter.bracket', - 'number', - 'delimiter.bracket', - 'variable', - 'delimiter.bracket' - ] - ], - [/,/, 'delimiter.bracket'], - [/(^\s*.+?)(:)([^:]*?)$/, ['string', 'delimiter.bracket', 'variable']], - [/%%[^$]([^%]*(?!%%$)%?)*$/, 'comment'] - ], - gantt: [ - [/(title)(.*)/, ['keyword', 'string']], - [/(section)(.*)/, ['typeKeyword', 'string']], - [ - /[a-zA-Z][\w$]*/, - { - cases: { - '@ganttBlockKeywords': 'typeKeyword', - '@ganttKeywords': 'keyword' - } - } - ], - [/(^\s*.*?)(:)/, ['string', 'delimiter.bracket']], - [/%%[^$]([^%]*(?!%%$)%?)*$/, 'comment'], - [/:/, 'delimiter.bracket'] - ], - stateDiagram: [ - [/note[^:]*$/, { token: 'typeKeyword', next: 'stateDiagramNote' }], - ['hide empty description', 'keyword'], - [/^\s*state\s(?!.*\{)/, 'keyword'], - [/(<<)(fork|join|choice)(>>)/, 'annotation'], - [/(\[\[)(fork|join|choice)(]])/, ['delimiter.bracket', 'annotation', 'delimiter.bracket']], - [ - /[a-zA-Z][\w$]*/, - { - cases: { - '@stateDiagramBlockKeywords': 'typeKeyword', - '@stateDiagramKeywords': 'keyword', - '@default': 'variable' - } - } - ], - [/".*?"/, 'string'], - [/(:)([^:\n]*?$)/, ['delimiter.bracket', 'string']], - [/{|}/, 'delimiter.bracket'], - [/%%[^$]([^%]*(?!%%$)%?)*$/, 'comment'], - [/-->/, 'transition'], - [/\[.*?]/, 'string'] - ], - stateDiagramNote: [ - [/^\s*end note$/, { token: 'typeKeyword', next: '@pop' }], - [/.*/, 'string'] - ], - erDiagram: [ - [/[}|][o|](--|\.\.)[o|][{|]/, 'transition'], - [/".*?"/, 'string'], - [/(:)(.*?$)/, ['delimiter.bracket', 'string']], - [/:|{|}/, 'delimiter.bracket'], - [/([a-zA-Z]+)(\s+[a-zA-Z]+)/, ['type', 'variable']], - [/%%[^$]([^%]*(?!%%$)%?)*$/, 'comment'], - [/[a-zA-Z_-][\w$]*/, 'variable'] - ], - requirementDiagram: [ - [/->|<-|-/, 'transition'], - [/(\d+\.)*\d+/, 'number'], - [ - /[a-zA-Z_-][\w$]*/, - { - cases: { - '@requirementDiagramBlockKeywords': 'typeKeyword', - '@default': 'variable' - } - } - ], - [/:|{|}|\//, 'delimiter.bracket'], - [/%%[^$]([^%]*(?!%%$)%?)*$/, 'comment'], - [/".*?"/, 'string'] - ] - } - }); - - monacoEditor.editor.defineTheme('mermaid-dark', { - base: 'vs-dark', - inherit: true, - rules: [ - { token: 'typeKeyword', foreground: '9650c8', fontStyle: 'bold' }, - { token: 'transition', foreground: '008800', fontStyle: 'bold' } - ], - colors: {} - }); - - monacoEditor.editor.defineTheme('mermaid', { - base: 'vs', - inherit: true, - rules: [ - { token: 'typeKeyword', foreground: '9650c8', fontStyle: 'bold' }, - { token: 'keyword', foreground: '649696' }, - { token: 'custom-error', foreground: 'ff0000', fontStyle: 'bold' }, - { token: 'string', foreground: 'AA8500' }, - { token: 'transition', foreground: '008800', fontStyle: 'bold' }, - { token: 'delimiter.bracket', foreground: '000000', fontStyle: 'bold' }, - { token: 'annotation', foreground: '4b4b96' }, - { token: 'number', foreground: '4b4b96' }, - { token: 'comment', foreground: '888c89' }, - { token: 'variable', foreground: 'A22889' }, - { token: 'type', foreground: '2BDEA8' } - ], - colors: {} - }); - - // Register a completion item provider for the mermaid language - monacoEditor.languages.registerCompletionItemProvider('mermaid', { - provideCompletionItems: () => { - const suggestions = [ - { - label: 'loop', - kind: monacoEditor.languages.CompletionItemKind.Snippet, - insertText: ['loop ${1:Loop text}', '\t$0', 'end'].join('\n'), - insertTextRules: monacoEditor.languages.CompletionItemInsertTextRule.InsertAsSnippet, - documentation: 'Sequence Diagram Loops' - }, - { - label: 'alt', - kind: monacoEditor.languages.CompletionItemKind.Snippet, - insertText: ['alt ${1:Describing text}', '\t$0', 'else', '\t', 'end'].join('\n'), - insertTextRules: monacoEditor.languages.CompletionItemInsertTextRule.InsertAsSnippet, - documentation: 'Alternative Path' - }, - { - label: 'opt', - kind: monacoEditor.languages.CompletionItemKind.Snippet, - insertText: ['opt ${1:Describing text}', '\t$0', 'end'].join('\n'), - insertTextRules: monacoEditor.languages.CompletionItemInsertTextRule.InsertAsSnippet, - documentation: 'Optional Path' - }, - { - label: 'par', - kind: monacoEditor.languages.CompletionItemKind.Snippet, - insertText: [ - 'par ${1:[Action 1]}', - '\t$0', - 'and ${2:[Action 2]}', - '\t', - 'and ${3:[Action 3]}', - '\t', - 'end' - ].join('\n'), - insertTextRules: monacoEditor.languages.CompletionItemInsertTextRule.InsertAsSnippet, - documentation: 'Parallel Actions' - }, - { - label: 'rect', - kind: monacoEditor.languages.CompletionItemKind.Snippet, - insertText: ['rect ${1:rgb(0, 255, 0)}', '\t$0', 'end'].join('\n'), - insertTextRules: monacoEditor.languages.CompletionItemInsertTextRule.InsertAsSnippet, - documentation: 'Background Color' - }, - { - label: 'subgraph', - kind: monacoEditor.languages.CompletionItemKind.Snippet, - insertText: ['subgraph ${1:title}', '\t$0', 'end'].join('\n'), - insertTextRules: monacoEditor.languages.CompletionItemInsertTextRule.InsertAsSnippet, - documentation: 'Subgraph' - }, - { - label: 'class', - kind: monacoEditor.languages.CompletionItemKind.Snippet, - insertText: ['class ${1:className} {', '\t$0', '}'].join('\n'), - insertTextRules: monacoEditor.languages.CompletionItemInsertTextRule.InsertAsSnippet, - documentation: 'Class' - }, - { - label: 'state', - kind: monacoEditor.languages.CompletionItemKind.Snippet, - insertText: ['state ${1:stateName} {', '\t$0', '}'].join('\n'), - insertTextRules: monacoEditor.languages.CompletionItemInsertTextRule.InsertAsSnippet, - documentation: 'State' - }, - { - label: 'note', - kind: monacoEditor.languages.CompletionItemKind.Snippet, - insertText: ['note ${1:right of State1}', '\t$0', 'end note'].join('\n'), - insertTextRules: monacoEditor.languages.CompletionItemInsertTextRule.InsertAsSnippet, - documentation: 'State' - }, - { - label: 'section', - kind: monacoEditor.languages.CompletionItemKind.Snippet, - insertText: ['section ${1:Go to work}', '\t$0'].join('\n'), - insertTextRules: monacoEditor.languages.CompletionItemInsertTextRule.InsertAsSnippet, - documentation: 'User-journey Section' - }, - { - label: 'element', - kind: monacoEditor.languages.CompletionItemKind.Snippet, - insertText: ['element ${1:test_entity} {', '\t$0', '}'].join('\n'), - insertTextRules: monacoEditor.languages.CompletionItemInsertTextRule.InsertAsSnippet, - documentation: 'Requirement Diagram Element' - }, - { - label: 'options', - kind: monacoEditor.languages.CompletionItemKind.Snippet, - insertText: ['options', '{', ' $0', '}', 'end'].join('\n'), - insertTextRules: monacoEditor.languages.CompletionItemInsertTextRule.InsertAsSnippet, - documentation: 'Git Graph Options' - }, - ...requirementDiagrams.map((requirementDiagramType) => ({ - label: requirementDiagramType, - kind: monacoEditor.languages.CompletionItemKind.Snippet, - insertText: [ - requirementDiagramType + ' ${1:test_req} {', - '\tid: 1', - '\ttext: the test text.', - '\trisk: high', - '\tverifyMethod: test', - '}' - ].join('\n'), - insertTextRules: monacoEditor.languages.CompletionItemInsertTextRule.InsertAsSnippet, - documentation: requirementDiagramType - .split(/(?=[A-Z])/) - .map((part) => part[0].toUpperCase() + part.slice(1)) - .join(' ') - })), - ...[ - ...new Set( - Object.values(keywords) - .map((diagramKeywords) => - Object.entries(diagramKeywords) - .filter((keywordType) => keywordType[0] !== 'annotations') - .map((entry) => entry[1]) - ) - .flat(2) - ) - ].map((keyword) => ({ - label: keyword, - kind: monacoEditor.languages.CompletionItemKind.Keyword, - insertText: keyword - })) - ]; - return { suggestions: suggestions }; - } - }); - - monacoEditor.languages.setLanguageConfiguration('mermaid', { - autoClosingPairs: [ - { - open: '(', - close: ')' - }, - { - open: '{', - close: '}' - }, - { - open: '[', - close: ']' - } - ], - brackets: [ - ['(', ')'], - ['{', '}'], - ['[', ']'] - ] - }); -}; diff --git a/src/routes/edit.svelte b/src/routes/edit.svelte index 341a75e9a..aadcbbc9b 100644 --- a/src/routes/edit.svelte +++ b/src/routes/edit.svelte @@ -1,5 +1,5 @@ @@ -194,8 +165,8 @@ -
diff --git a/src/lib/util/state.ts b/src/lib/util/state.ts index 7d3599082..a124eb2e0 100644 --- a/src/lib/util/state.ts +++ b/src/lib/util/state.ts @@ -1,9 +1,10 @@ import { writable, get, derived } from 'svelte/store'; import type { Readable } from 'svelte/store'; -import { toBase64, fromBase64 } from 'js-base64'; +import { fromBase64, toUint8Array, fromUint8Array } from 'js-base64'; import { persist, localStorage } from '@macfja/svelte-persistent-store'; import type { State } from '$lib/types'; import { saveStatistics } from './stats'; +import pako from 'pako'; export const defaultState: State = { code: `graph TD @@ -36,15 +37,38 @@ const urlParseFailedState = `graph TD G --> |"No :("| H(Try using the Timeline tab in History
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"`; +const textEncode = (str: string) => { + return new TextEncoder().encode(str); +}; + +export const compressString = (source: string): string => { + const data = textEncode(source); + const compressed = pako.deflate(data, { level: 9 }); + const result = fromUint8Array(compressed, true); + return result; +}; + +const decompressString = (source: string): string => { + const data = toUint8Array(source); + const decompressed = pako.inflate(data, { to: 'string' }); + return decompressed; +}; + export const codeStore = persist(writable(defaultState), localStorage(), 'codeStore'); -export const base64State: Readable = derived([codeStore], ([code], set) => { - set(toBase64(JSON.stringify(code), true)); +export const compressedState: Readable = derived([codeStore], ([code], set) => { + set(compressString(JSON.stringify(code))); }); export const loadState = (data: string): void => { let state: State; + console.log('Loading', data); try { - const stateStr = fromBase64(data); + let stateStr: string; + if (data.startsWith('eyJ')) { + stateStr = fromBase64(data); + } else { + stateStr = decompressString(data); + } console.log(`Trying to load state: ${stateStr}`); state = JSON.parse(stateStr); const mermaidConfig = @@ -116,7 +140,7 @@ export const toggleDarkTheme = (dark: boolean): void => { }; export const initURLSubscription = (): void => { - base64State.subscribe((state: string) => { + compressedState.subscribe((state: string) => { history.replaceState(undefined, undefined, `#${state}`); }); }; diff --git a/src/routes/edit.svelte b/src/routes/edit.svelte index 341a75e9a..5e6e3f0e9 100644 --- a/src/routes/edit.svelte +++ b/src/routes/edit.svelte @@ -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, compressedState } 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? + compressedState; // Weird fix for error > compressedState is not defined. Treeshaking? let selectedMode = 'code'; const languageMap = { code: 'mermaid', @@ -96,7 +96,7 @@ }; const viewDiagram = () => { - window.open(`${base}/view#${$base64State}`, '_blank').focus(); + window.open(`${base}/view#${$compressedState}`, '_blank').focus(); }; onMount(async () => { diff --git a/tsconfig.json b/tsconfig.json index e82fd2974..0f97b2a3e 100644 --- a/tsconfig.json +++ b/tsconfig.json @@ -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" ] } diff --git a/yarn.lock b/yarn.lock index 6bf5fd81d..5e201dc31 100644 --- a/yarn.lock +++ b/yarn.lock @@ -250,6 +250,11 @@ resolved "https://registry.npmjs.org/@types/node/-/node-14.17.0.tgz" integrity sha512-w8VZUN/f7SSbvVReb9SWp6cJFevxb4/nkG65yLAya//98WgocKm5PLDAtSs5CtJJJM+kHmJjO/6mmYW4MHShZA== +"@types/pako@^1.0.3": + version "1.0.3" + resolved "https://registry.yarnpkg.com/@types/pako/-/pako-1.0.3.tgz#2e61c2b02020b5f44e2e5e946dfac74f4ec33c58" + integrity sha512-EDxOsHAD5dqjbjEUM1xwa7rpKPFb8ECBE5irONTQU7/OsO3thI5YrNEWSPNMvYmvFM0l/OLQJ6Mgw7PEdXSjhg== + "@types/parse-json@^4.0.0": version "4.0.0" resolved "https://registry.npmjs.org/@types/parse-json/-/parse-json-4.0.0.tgz" @@ -3411,10 +3416,10 @@ p-map@^4.0.0: dependencies: aggregate-error "^3.0.0" -pako@1.0.10: - version "1.0.10" - resolved "https://registry.yarnpkg.com/pako/-/pako-1.0.10.tgz#4328badb5086a426aa90f541977d4955da5c9732" - integrity sha512-0DTvPVU3ed8+HNXOu5Bs+o//Mbdj9VNQMUOe9oKCwh8l0GNwpTDMKCWbRjgtD291AWnkAgkqA/LOnQS8AmS1tw== +pako@^2.0.4: + version "2.0.4" + resolved "https://registry.yarnpkg.com/pako/-/pako-2.0.4.tgz#6cebc4bbb0b6c73b0d5b8d7e8476e2b2fbea576d" + integrity sha512-v8tweI900AUkZN6heMU/4Uy4cXRc2AYNRggVmTR+dEncawDJgCdLMximOVA2p4qO57WMynangsfGRb5WD6L1Bg== parent-module@^1.0.0: version "1.0.1" From b52f2c42205751893f8279d7c4bd623b82dec76e Mon Sep 17 00:00:00 2001 From: Sidharth Vinod Date: Thu, 20 Jan 2022 18:08:53 +0530 Subject: [PATCH 03/11] Serdes --- .vscode/settings.json | 3 ++ cypress/integration/loadSite.spec.ts | 8 +++- src/lib/components/actions.svelte | 7 ++-- src/lib/util/serde.ts | 57 ++++++++++++++++++++++++++++ src/lib/util/state.ts | 35 +++-------------- src/routes/edit.svelte | 6 +-- 6 files changed, 78 insertions(+), 38 deletions(-) create mode 100644 .vscode/settings.json create mode 100644 src/lib/util/serde.ts diff --git a/.vscode/settings.json b/.vscode/settings.json new file mode 100644 index 000000000..1295ee63d --- /dev/null +++ b/.vscode/settings.json @@ -0,0 +1,3 @@ +{ + "editor.formatOnSave": true +} diff --git a/cypress/integration/loadSite.spec.ts b/cypress/integration/loadSite.spec.ts index 6043f8e3c..aa939cc4b 100644 --- a/cypress/integration/loadSite.spec.ts +++ b/cypress/integration/loadSite.spec.ts @@ -103,15 +103,19 @@ describe('Site Loads', () => { '/edit#eyJjb2RlIjoiY2xhc3NEaWFncmFtXG4gICAgQW5pbWFsIDx8LS0gRHVja1xuICAgIEFuaW1hbCA8fC0tIEZpc2hcbiAgICBBbmltYWwgPHwtLSBaZWJyYVxuICAgIEFuaW1hbCA6ICtpbnQgYWdlXG4gICAgQW5pbWFsIDogK1N0cmluZyBnZW5kZXJcbiAgICBBbmltYWw6ICtpc01hbW1hbCgpXG4gICAgQW5pbWFsOiArbWF0ZSgpXG4gICAgY2xhc3MgRHVja3tcbiAgICAgICtTdHJpbmcgYmVha0NvbG9yXG4gICAgICArc3dpbSgpXG4gICAgICArcXVhY2soKVxuICAgIH1cbiAgICBjbGFzcyBGaXNoe1xuICAgICAgLWludCBzaXplSW5GZWV0XG4gICAgICAtY2FuRWF0KClcbiAgICB9XG4gICAgY2xhc3MgWmVicmF7XG4gICAgICArYm9vbCBpc193aWxkXG4gICAgICArcnVuKClcbiAgICB9XG4gICAgICAgICAgICAiLCJtZXJtYWlkIjoie1xuICBcInRoZW1lXCI6IFwiZGFya1wiXG59IiwidXBkYXRlRWRpdG9yIjpmYWxzZSwiYXV0b1N5bmMiOnRydWUsInVwZGF0ZURpYWdyYW0iOmZhbHNlfQ' ); cy.contains('Animal'); + cy.visit( + '/edit/#base64:eyJjb2RlIjoiZ3JhcGggVERcbiAgICBBW05ldyBZZWFyXSAtLT58R2V0IG1vbmV5fCBCKEdvIHNob3BwaW5nKVxuICAgIEIgLS0-IEN7TGV0IG1lIHRoaW5rfVxuICAgIEMgLS0-fE9uZXwgRFtMYXB0b3BdXG4gICAgQyAtLT58VHdvfCBFW2lQaG9uZV1cbiAgICBDIC0tPnxUaHJlZXwgRltmYTpmYS1jYXIgQ2FyXSIsIm1lcm1haWQiOiJ7XG4gIFwidGhlbWVcIjogXCJkZWZhdWx0XCJcbn0iLCJ1cGRhdGVFZGl0b3IiOmZhbHNlLCJhdXRvU3luYyI6dHJ1ZSwidXBkYXRlRGlhZ3JhbSI6ZmFsc2V9' + ); + cy.contains('New Year'); }); it('should load compressed URL', () => { cy.visit( - '/edit#eNpVkM2KwkAQhF-l6dMK5gVyEDRxvYi7sF6WjIcm0zqDzg_jBJEk725Hd2G3Tw31VVFUj23QjCWeEkUD-1p5kFs2O77BN1M6QFEshg1ncMHzfYDV2ybA1YQYrT_NXvhqgqDqtxPGkI315_ElVU__h-cB6mZLMYd4-Kvsb2GAdWM_jcT_V0xicb03RyqPVLSUoJI-OEfHyZHV0rqfDAqzYccKS3k1pbNC5Ufhuqgp81rbHBJKxuXKc6Quh6-7b7HMqeNfqLYkC7gfanwAlW1ZvQ' + '/edit#pako:eNpVkM2KwkAQhF-l6dMK5gVyEDRxvYi7sF6WjIcm0zqDzg_jBJEk725Hd2G3Tw31VVFUj23QjCWeEkUD-1p5kFs2O77BN1M6QFEshg1ncMHzfYDV2ybA1YQYrT_NXvhqgqDqtxPGkI315_ElVU__h-cB6mZLMYd4-Kvsb2GAdWM_jcT_V0xicb03RyqPVLSUoJI-OEfHyZHV0rqfDAqzYccKS3k1pbNC5Ufhuqgp81rbHBJKxuXKc6Quh6-7b7HMqeNfqLYkC7gfanwAlW1ZvQ' ); cy.contains('New Year'); cy.visit( - '/edit#eNptkU1PwzAMhv9K5BOI9Q9EXBDbJA477YYqITcxndV8QD40weh_Jy1rGR0-OY_tV2_sEyivCSQogzGuGduAtnaixINji0bcf1WVWGfVXdMtx8M1faYm4B8sxR27JLClJd6nwK4VLTlN4bI4jMQd2pLe3C4KFhNNcLQ92jv9ADGLNoTdozc-zIV4ZDsNlud7RtVN7_5Sb_jYrFcN3iN_0pPbEqUZK3QbTP_Ojyv4NdR4bwTHlyMbPcOQ3WJ2CliBpWCRdbnLqFJDOpClGmRJNYauhtr1pS-_6bKMjebkA8hXNJFWgDn5_YdTIFPINDWdb3vu6r8BaWOZRQ' + '/edit#pako:eNptkU1PwzAMhv9K5BOI9Q9EXBDbJA477YYqITcxndV8QD40weh_Jy1rGR0-OY_tV2_sEyivCSQogzGuGduAtnaixINji0bcf1WVWGfVXdMtx8M1faYm4B8sxR27JLClJd6nwK4VLTlN4bI4jMQd2pLe3C4KFhNNcLQ92jv9ADGLNoTdozc-zIV4ZDsNlud7RtVN7_5Sb_jYrFcN3iN_0pPbEqUZK3QbTP_Ojyv4NdR4bwTHlyMbPcOQ3WJ2CliBpWCRdbnLqFJDOpClGmRJNYauhtr1pS-_6bKMjebkA8hXNJFWgDn5_YdTIFPINDWdb3vu6r8BaWOZRQ' ); cy.reload(); cy.contains('Animal'); diff --git a/src/lib/components/actions.svelte b/src/lib/components/actions.svelte index 13d13ec49..4b527d855 100644 --- a/src/lib/components/actions.svelte +++ b/src/lib/components/actions.svelte @@ -3,7 +3,8 @@ import Card from '$lib/components/card/card.svelte'; import { krokiRendererUrl, rendererUrl } from '$lib/util/env'; - import { compressedState, codeStore, compressString } from '$lib/util/state'; + import { pakoSerde } from '$lib/util/serde'; + import { serializedState, codeStore } from '$lib/util/state'; import { toBase64 } from 'js-base64'; import moment from 'moment'; @@ -138,10 +139,10 @@ if (browser && ['mermaid.live', 'netlify'].some((path) => window.location.host.includes(path))) { isNetlify = true; } - compressedState.subscribe((encodedState: string) => { + serializedState.subscribe((encodedState: string) => { iUrl = `${rendererUrl}/img/${encodedState}`; svgUrl = `${rendererUrl}/svg/${encodedState}`; - krokiUrl = `${krokiRendererUrl}/mermaid/svg/${compressString($codeStore.code)}`; + krokiUrl = `${krokiRendererUrl}/mermaid/svg/${pakoSerde.serialize($codeStore.code)}`; mdCode = `[![](${iUrl})](${window.location.protocol}//${window.location.host}${window.location.pathname}#${encodedState})`; }); diff --git a/src/lib/util/serde.ts b/src/lib/util/serde.ts new file mode 100644 index 000000000..d70ea3c1a --- /dev/null +++ b/src/lib/util/serde.ts @@ -0,0 +1,57 @@ +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; +} + +enum SerdeType { + Base64 = 'base64', + Pako = 'pako' +} + +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: Record = { + [SerdeType.Base64]: base64Serde, + [SerdeType.Pako]: pakoSerde +}; + +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: string, serialized: string; + if (state.includes(':')) { + [type, serialized] = state.split(':'); + } else { + type = SerdeType.Base64; + serialized = state; + } + const json = serdes[type].deserialize(serialized); + return JSON.parse(json); +}; diff --git a/src/lib/util/state.ts b/src/lib/util/state.ts index a124eb2e0..fb1900492 100644 --- a/src/lib/util/state.ts +++ b/src/lib/util/state.ts @@ -1,10 +1,9 @@ import { writable, get, derived } from 'svelte/store'; import type { Readable } from 'svelte/store'; -import { fromBase64, toUint8Array, fromUint8Array } from 'js-base64'; import { persist, localStorage } from '@macfja/svelte-persistent-store'; import type { State } from '$lib/types'; import { saveStatistics } from './stats'; -import pako from 'pako'; +import { serializeState, deserializeState } from './serde'; export const defaultState: State = { code: `graph TD @@ -37,40 +36,16 @@ const urlParseFailedState = `graph TD G --> |"No :("| H(Try using the Timeline tab in History
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"`; -const textEncode = (str: string) => { - return new TextEncoder().encode(str); -}; - -export const compressString = (source: string): string => { - const data = textEncode(source); - const compressed = pako.deflate(data, { level: 9 }); - const result = fromUint8Array(compressed, true); - return result; -}; - -const decompressString = (source: string): string => { - const data = toUint8Array(source); - const decompressed = pako.inflate(data, { to: 'string' }); - return decompressed; -}; - export const codeStore = persist(writable(defaultState), localStorage(), 'codeStore'); -export const compressedState: Readable = derived([codeStore], ([code], set) => { - set(compressString(JSON.stringify(code))); +export const serializedState: Readable = derived([codeStore], ([code], set) => { + set(serializeState(code)); }); export const loadState = (data: string): void => { let state: State; console.log('Loading', data); try { - let stateStr: string; - if (data.startsWith('eyJ')) { - stateStr = fromBase64(data); - } else { - stateStr = decompressString(data); - } - console.log(`Trying to load state: ${stateStr}`); - state = JSON.parse(stateStr); + state = deserializeState(data); const mermaidConfig = typeof state.mermaid === 'string' ? JSON.parse(state.mermaid) : state.mermaid; if ( @@ -140,7 +115,7 @@ export const toggleDarkTheme = (dark: boolean): void => { }; export const initURLSubscription = (): void => { - compressedState.subscribe((state: string) => { + serializedState.subscribe((state: string) => { history.replaceState(undefined, undefined, `#${state}`); }); }; diff --git a/src/routes/edit.svelte b/src/routes/edit.svelte index 5e6e3f0e9..aa21f82ae 100644 --- a/src/routes/edit.svelte +++ b/src/routes/edit.svelte @@ -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, compressedState } 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'; - compressedState; // Weird fix for error > compressedState is not defined. Treeshaking? + serializedState; // Weird fix for error > serializedState is not defined. Treeshaking? let selectedMode = 'code'; const languageMap = { code: 'mermaid', @@ -96,7 +96,7 @@ }; const viewDiagram = () => { - window.open(`${base}/view#${$compressedState}`, '_blank').focus(); + window.open(`${base}/view#${$serializedState}`, '_blank').focus(); }; onMount(async () => { From aee44604585500241a6def9c65280f183aa3d37d Mon Sep 17 00:00:00 2001 From: Sidharth Vinod Date: Thu, 20 Jan 2022 18:46:00 +0530 Subject: [PATCH 04/11] Fix types --- src/lib/util/serde.ts | 14 +++++++------- src/lib/util/state.ts | 2 +- 2 files changed, 8 insertions(+), 8 deletions(-) diff --git a/src/lib/util/serde.ts b/src/lib/util/serde.ts index d70ea3c1a..7f56ab250 100644 --- a/src/lib/util/serde.ts +++ b/src/lib/util/serde.ts @@ -32,15 +32,15 @@ export const pakoSerde: Serde = { return inflate(data, { to: 'string' }); } }; -const serdes: Record = { - [SerdeType.Base64]: base64Serde, - [SerdeType.Pako]: pakoSerde -}; +const serdes: Map = new Map([ + [SerdeType.Base64, base64Serde], + [SerdeType.Pako, pakoSerde] +]); export const serializeState = (state: State): string => { const json = JSON.stringify(state); const defaultSerde = SerdeType.Pako; - const serialized = serdes[defaultSerde].serialize(json); + const serialized = serdes.get(defaultSerde).serialize(json); return `${defaultSerde}:${serialized}`; }; @@ -52,6 +52,6 @@ export const deserializeState = (state: string): State => { type = SerdeType.Base64; serialized = state; } - const json = serdes[type].deserialize(serialized); - return JSON.parse(json); + const json = serdes.get(type).deserialize(serialized); + return JSON.parse(json) as State; }; diff --git a/src/lib/util/state.ts b/src/lib/util/state.ts index fb1900492..73157a543 100644 --- a/src/lib/util/state.ts +++ b/src/lib/util/state.ts @@ -46,7 +46,7 @@ export const loadState = (data: string): void => { console.log('Loading', data); try { state = deserializeState(data); - const mermaidConfig = + const mermaidConfig: { [key: string]: string } = typeof state.mermaid === 'string' ? JSON.parse(state.mermaid) : state.mermaid; if ( mermaidConfig.securityLevel && From 9fb7c4a17618fb80cadbea53ae37d59cd77ca1c0 Mon Sep 17 00:00:00 2001 From: Sidharth Vinod Date: Fri, 21 Jan 2022 00:41:24 +0530 Subject: [PATCH 05/11] fix: Types --- .vscode/settings.json | 3 ++- src/lib/components/actions.svelte | 4 ++-- src/lib/util/env.ts | 6 ++++-- src/lib/util/serde.ts | 34 +++++++++++++++++-------------- src/routes/edit.svelte | 2 +- 5 files changed, 28 insertions(+), 21 deletions(-) diff --git a/.vscode/settings.json b/.vscode/settings.json index 1295ee63d..cd3023f66 100644 --- a/.vscode/settings.json +++ b/.vscode/settings.json @@ -1,3 +1,4 @@ { - "editor.formatOnSave": true + "editor.formatOnSave": true, + "cSpell.words": ["pako", "Serde", "serdes"] } diff --git a/src/lib/components/actions.svelte b/src/lib/components/actions.svelte index 4b527d855..b3c411fa7 100644 --- a/src/lib/components/actions.svelte +++ b/src/lib/components/actions.svelte @@ -18,7 +18,7 @@ } const svgString = svg.outerHTML .replaceAll('
', '
') - .replaceAll(/]*)>/g, (m, g) => ``); + .replaceAll(/]*)>/g, (m, g: string) => ``); 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({ diff --git a/src/lib/util/env.ts b/src/lib/util/env.ts index f5e22f308..128761f2a 100644 --- a/src/lib/util/env.ts +++ b/src/lib/util/env.ts @@ -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'; diff --git a/src/lib/util/serde.ts b/src/lib/util/serde.ts index 7f56ab250..1f7540fc8 100644 --- a/src/lib/util/serde.ts +++ b/src/lib/util/serde.ts @@ -7,11 +7,6 @@ interface Serde { deserialize: (state: string) => string; } -enum SerdeType { - Base64 = 'base64', - Pako = 'pako' -} - const base64Serde: Serde = { serialize: (state: string): string => { return toBase64(state, true); @@ -32,26 +27,35 @@ export const pakoSerde: Serde = { return inflate(data, { to: 'string' }); } }; -const serdes: Map = new Map([ - [SerdeType.Base64, base64Serde], - [SerdeType.Pako, pakoSerde] -]); + +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.get(defaultSerde).serialize(json); + const defaultSerde: SerdeType = 'pako'; + const serialized = serdes[defaultSerde].serialize(json); return `${defaultSerde}:${serialized}`; }; export const deserializeState = (state: string): State => { - let type: string, serialized: string; + let type: SerdeType, serialized: string; if (state.includes(':')) { - [type, serialized] = state.split(':'); + let tempType: string; + [tempType, serialized] = state.split(':'); + if (tempType in serdes) { + type = tempType; + } else { + throw new Error(`Unknown serde type: ${tempType}`); + } } else { - type = SerdeType.Base64; + type = 'base64'; serialized = state; } - const json = serdes.get(type).deserialize(serialized); + const json = serdes[type].deserialize(serialized); return JSON.parse(json) as State; }; diff --git a/src/routes/edit.svelte b/src/routes/edit.svelte index aa21f82ae..afdd0f9a0 100644 --- a/src/routes/edit.svelte +++ b/src/routes/edit.svelte @@ -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); From b5f90ba2b18c23b219c789aec8f6a3fe2548d893 Mon Sep 17 00:00:00 2001 From: "dependabot[bot]" <49699333+dependabot[bot]@users.noreply.github.com> Date: Fri, 21 Jan 2022 07:03:03 +0000 Subject: [PATCH 06/11] chore(deps-dev): bump lint-staged from 12.2.1 to 12.2.2 Bumps [lint-staged](https://github.com/okonet/lint-staged) from 12.2.1 to 12.2.2. - [Release notes](https://github.com/okonet/lint-staged/releases) - [Commits](https://github.com/okonet/lint-staged/compare/v12.2.1...v12.2.2) --- updated-dependencies: - dependency-name: lint-staged dependency-type: direct:development update-type: version-update:semver-patch ... Signed-off-by: dependabot[bot] --- package.json | 2 +- yarn.lock | 16 ++++++++-------- 2 files changed, 9 insertions(+), 9 deletions(-) diff --git a/package.json b/package.json index 7ac30771d..599f91f47 100644 --- a/package.json +++ b/package.json @@ -34,7 +34,7 @@ "eslint-plugin-svelte3": "^3.4.0", "eslint-plugin-tailwindcss": "^3.3.0", "husky": "^7.0.4", - "lint-staged": "^12.2.1", + "lint-staged": "^12.2.2", "mocha": "^9.1.4", "node-html-parser": "^5.2.0", "postcss": "^8.4.5", diff --git a/yarn.lock b/yarn.lock index 67bf2ea40..1ab8e5dd8 100644 --- a/yarn.lock +++ b/yarn.lock @@ -2911,10 +2911,10 @@ lines-and-columns@^1.1.6: resolved "https://registry.npmjs.org/lines-and-columns/-/lines-and-columns-1.1.6.tgz" integrity sha1-HADHQ7QzzQpOgHWPe2SldEDZ/wA= -lint-staged@^12.2.1: - version "12.2.1" - resolved "https://registry.yarnpkg.com/lint-staged/-/lint-staged-12.2.1.tgz#e37b5a81deaabf5823f43b3aa903a70c15c9d0b3" - integrity sha512-VCVcA9C2Vt5HHxSR4EZVZFJcQRJH984CGBeY+cJ/xed4mBd+JidbM/xbKcCq5ASaygAV0iITtdsCTnID7h/1OQ== +lint-staged@^12.2.2: + version "12.2.2" + resolved "https://registry.yarnpkg.com/lint-staged/-/lint-staged-12.2.2.tgz#e03d93b41092316e0f38b37c9630da807aae3cca" + integrity sha512-bcHEoM1M/f+K1BYdHcEuIn8K+zMOSJR3mkny6PAuQiTgcSUcRbUWaUD6porAYypxF4k1vYZZ2HutZt1p94Z1jQ== dependencies: cli-truncate "^3.1.0" colorette "^2.0.16" @@ -3150,10 +3150,10 @@ monaco-editor@^0.31.1: resolved "https://registry.yarnpkg.com/monaco-editor/-/monaco-editor-0.31.1.tgz#67f597b3e45679d1f551237e12a3a42c4438b97b" integrity sha512-FYPwxGZAeP6mRRyrr5XTGHD9gRXVjy7GUzF4IPChnyt3fS5WrNxIkS8DNujWf6EQy0Zlzpxw8oTVE+mWI2/D1Q== -monaco-mermaid@^1.0.1: - version "1.0.1" - resolved "https://registry.yarnpkg.com/monaco-mermaid/-/monaco-mermaid-1.0.1.tgz#1dc8b2f4bb96f84358b42e2c04099378450594eb" - integrity sha512-S+6VM0LcfcZJfacunK1r/4bQS9QL0TSc+lMG2yyQpaJo7LCk77k12E3MO2iOs560KkGIoOru5nOjNIe5CYCrTQ== +monaco-mermaid@^1.0.2: + version "1.0.2" + resolved "https://registry.yarnpkg.com/monaco-mermaid/-/monaco-mermaid-1.0.2.tgz#a96d2c5dfbf9fc591cb7c61dff40a3d188021337" + integrity sha512-H0waK3QyTklsE3hKW4bvDFt+8Wcfghszi125wQVS89gzlHZMxZh5w1RqQe85d4FSmjwc3t1o71pCkyEYiZJiXg== mri@^1.1.0: version "1.1.6" From db1cba2a8dc8b687e0705e24b8b4f0a9ad1c1e72 Mon Sep 17 00:00:00 2001 From: "dependabot[bot]" <49699333+dependabot[bot]@users.noreply.github.com> Date: Fri, 21 Jan 2022 07:03:37 +0000 Subject: [PATCH 07/11] chore(deps): bump monaco-mermaid from 1.0.1 to 1.0.2 Bumps monaco-mermaid from 1.0.1 to 1.0.2. --- updated-dependencies: - dependency-name: monaco-mermaid dependency-type: direct:production update-type: version-update:semver-patch ... Signed-off-by: dependabot[bot] --- yarn.lock | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/yarn.lock b/yarn.lock index 67bf2ea40..ee027cc72 100644 --- a/yarn.lock +++ b/yarn.lock @@ -3150,10 +3150,10 @@ monaco-editor@^0.31.1: resolved "https://registry.yarnpkg.com/monaco-editor/-/monaco-editor-0.31.1.tgz#67f597b3e45679d1f551237e12a3a42c4438b97b" integrity sha512-FYPwxGZAeP6mRRyrr5XTGHD9gRXVjy7GUzF4IPChnyt3fS5WrNxIkS8DNujWf6EQy0Zlzpxw8oTVE+mWI2/D1Q== -monaco-mermaid@^1.0.1: - version "1.0.1" - resolved "https://registry.yarnpkg.com/monaco-mermaid/-/monaco-mermaid-1.0.1.tgz#1dc8b2f4bb96f84358b42e2c04099378450594eb" - integrity sha512-S+6VM0LcfcZJfacunK1r/4bQS9QL0TSc+lMG2yyQpaJo7LCk77k12E3MO2iOs560KkGIoOru5nOjNIe5CYCrTQ== +monaco-mermaid@^1.0.2: + version "1.0.2" + resolved "https://registry.yarnpkg.com/monaco-mermaid/-/monaco-mermaid-1.0.2.tgz#a96d2c5dfbf9fc591cb7c61dff40a3d188021337" + integrity sha512-H0waK3QyTklsE3hKW4bvDFt+8Wcfghszi125wQVS89gzlHZMxZh5w1RqQe85d4FSmjwc3t1o71pCkyEYiZJiXg== mri@^1.1.0: version "1.1.6" From 84261b40bc25e78f4758d0adc987462125bd3bdd Mon Sep 17 00:00:00 2001 From: "dependabot[bot]" <49699333+dependabot[bot]@users.noreply.github.com> Date: Fri, 21 Jan 2022 07:09:14 +0000 Subject: [PATCH 08/11] chore(deps): bump EndBug/add-and-commit from 7 to 8 Bumps [EndBug/add-and-commit](https://github.com/EndBug/add-and-commit) from 7 to 8. - [Release notes](https://github.com/EndBug/add-and-commit/releases) - [Changelog](https://github.com/EndBug/add-and-commit/blob/main/CHANGELOG.md) - [Commits](https://github.com/EndBug/add-and-commit/compare/v7...v8) --- updated-dependencies: - dependency-name: EndBug/add-and-commit dependency-type: direct:production update-type: version-update:semver-major ... Signed-off-by: dependabot[bot] --- .github/workflows/update-browserlist.yml | 2 +- .github/workflows/update-monaco-editor.yml | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/.github/workflows/update-browserlist.yml b/.github/workflows/update-browserlist.yml index 5ad70a9f5..be811d6d4 100644 --- a/.github/workflows/update-browserlist.yml +++ b/.github/workflows/update-browserlist.yml @@ -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 diff --git a/.github/workflows/update-monaco-editor.yml b/.github/workflows/update-monaco-editor.yml index 394fd4b24..045828424 100644 --- a/.github/workflows/update-monaco-editor.yml +++ b/.github/workflows/update-monaco-editor.yml @@ -13,7 +13,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 From 6689df1cb99ea62fe8f62359412f184c63fe3589 Mon Sep 17 00:00:00 2001 From: "dependabot[bot]" <49699333+dependabot[bot]@users.noreply.github.com> Date: Fri, 21 Jan 2022 07:09:15 +0000 Subject: [PATCH 09/11] chore(deps): bump node from 17.3.1 to 17.4.0 Bumps node from 17.3.1 to 17.4.0. --- updated-dependencies: - dependency-name: node dependency-type: direct:production update-type: version-update:semver-minor ... Signed-off-by: dependabot[bot] --- Dockerfile | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/Dockerfile b/Dockerfile index 686d37939..2b07d510f 100644 --- a/Dockerfile +++ b/Dockerfile @@ -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.4.0 as mermaid-live-editor-builder COPY --chown=node:node . /home WORKDIR /home RUN yarn install From 571b3452659c88c0b3c36e2defd186937d4ddfbe Mon Sep 17 00:00:00 2001 From: "dependabot[bot]" <49699333+dependabot[bot]@users.noreply.github.com> Date: Fri, 21 Jan 2022 08:15:07 +0000 Subject: [PATCH 10/11] chore(deps-dev): bump typescript from 4.5.4 to 4.5.5 Bumps [typescript](https://github.com/Microsoft/TypeScript) from 4.5.4 to 4.5.5. - [Release notes](https://github.com/Microsoft/TypeScript/releases) - [Commits](https://github.com/Microsoft/TypeScript/compare/v4.5.4...v4.5.5) --- updated-dependencies: - dependency-name: typescript dependency-type: direct:development update-type: version-update:semver-patch ... Signed-off-by: dependabot[bot] --- package.json | 2 +- yarn.lock | 16 ++++++++-------- 2 files changed, 9 insertions(+), 9 deletions(-) diff --git a/package.json b/package.json index 4be5e76e6..c98a1aafa 100644 --- a/package.json +++ b/package.json @@ -46,7 +46,7 @@ "svelte-preprocess": "^4.10.2", "tailwindcss": "^3.0.13", "tslib": "^2.3.1", - "typescript": "^4.5.4" + "typescript": "^4.5.5" }, "type": "module", "dependencies": { diff --git a/yarn.lock b/yarn.lock index 1a8cadf5a..081aa0e08 100644 --- a/yarn.lock +++ b/yarn.lock @@ -3155,10 +3155,10 @@ monaco-editor@^0.31.1: resolved "https://registry.yarnpkg.com/monaco-editor/-/monaco-editor-0.31.1.tgz#67f597b3e45679d1f551237e12a3a42c4438b97b" integrity sha512-FYPwxGZAeP6mRRyrr5XTGHD9gRXVjy7GUzF4IPChnyt3fS5WrNxIkS8DNujWf6EQy0Zlzpxw8oTVE+mWI2/D1Q== -monaco-mermaid@^1.0.1: - version "1.0.1" - resolved "https://registry.yarnpkg.com/monaco-mermaid/-/monaco-mermaid-1.0.1.tgz#1dc8b2f4bb96f84358b42e2c04099378450594eb" - integrity sha512-S+6VM0LcfcZJfacunK1r/4bQS9QL0TSc+lMG2yyQpaJo7LCk77k12E3MO2iOs560KkGIoOru5nOjNIe5CYCrTQ== +monaco-mermaid@^1.0.2: + version "1.0.2" + resolved "https://registry.yarnpkg.com/monaco-mermaid/-/monaco-mermaid-1.0.2.tgz#a96d2c5dfbf9fc591cb7c61dff40a3d188021337" + integrity sha512-H0waK3QyTklsE3hKW4bvDFt+8Wcfghszi125wQVS89gzlHZMxZh5w1RqQe85d4FSmjwc3t1o71pCkyEYiZJiXg== mri@^1.1.0: version "1.1.6" @@ -4404,10 +4404,10 @@ type-fest@^0.21.3: resolved "https://registry.npmjs.org/type-fest/-/type-fest-0.21.3.tgz" integrity sha512-t0rzBq87m3fVcduHDUFhKmyyX+9eo6WQjZvf51Ea/M0Q7+T374Jp1aUiyUl0GKxp8M/OETVHSDvmkyPgvX+X2w== -typescript@^4.5.4: - version "4.5.4" - resolved "https://registry.yarnpkg.com/typescript/-/typescript-4.5.4.tgz#a17d3a0263bf5c8723b9c52f43c5084edf13c2e8" - integrity sha512-VgYs2A2QIRuGphtzFV7aQJduJ2gyfTljngLzjpfW9FoYZF6xuw1W0vW9ghCKLfcWrCFxK81CSGRAvS1pn4fIUg== +typescript@^4.5.5: + version "4.5.5" + resolved "https://registry.yarnpkg.com/typescript/-/typescript-4.5.5.tgz#d8c953832d28924a9e3d37c73d729c846c5896f3" + integrity sha512-TCTIul70LyWe6IJWT8QSYeA54WQe8EjQFU4wY52Fasj5UKx88LNYKCgBEHcOMOrFF1rKGbD8v/xcNWVUq9SymA== universal-analytics@^0.4.20: version "0.4.23" From 4c7cc04ec3453cd55064aff4ffe419631abcf0f4 Mon Sep 17 00:00:00 2001 From: Sidharth Vinod Date: Fri, 21 Jan 2022 13:48:48 +0530 Subject: [PATCH 11/11] fix: hook --- package.json | 2 +- src/hooks.ts | 4 ++-- yarn.lock | 16 ++++++++-------- 3 files changed, 11 insertions(+), 11 deletions(-) diff --git a/package.json b/package.json index 4be5e76e6..0c6c3f660 100644 --- a/package.json +++ b/package.json @@ -16,7 +16,7 @@ "devDependencies": { "@cypress/snapshot": "^2.1.7", "@sveltejs/adapter-static": "1.0.0-next.26", - "@sveltejs/kit": "1.0.0-next.232", + "@sveltejs/kit": "1.0.0-next.236", "@types/mermaid": "^8.2.7", "@types/pako": "^1.0.3", "@typescript-eslint/eslint-plugin": "^4.33.0", diff --git a/src/hooks.ts b/src/hooks.ts index eff8dfade..6eba0ddab 100644 --- a/src/hooks.ts +++ b/src/hooks.ts @@ -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 }); diff --git a/yarn.lock b/yarn.lock index 1a8cadf5a..e560a3507 100644 --- a/yarn.lock +++ b/yarn.lock @@ -204,10 +204,10 @@ dependencies: tiny-glob "^0.2.9" -"@sveltejs/kit@1.0.0-next.232": - version "1.0.0-next.232" - resolved "https://registry.yarnpkg.com/@sveltejs/kit/-/kit-1.0.0-next.232.tgz#a8879e331d37259d99f72cbcffa00d177106b896" - integrity sha512-STQ0hnJozIop8k9I313nwVasBIQ45Z2K1pUOkDVjCSOGijgsj+De5q0prQBtL1ZlqqisfkYlOf8W9gvDSyTLEA== +"@sveltejs/kit@1.0.0-next.236": + version "1.0.0-next.236" + resolved "https://registry.yarnpkg.com/@sveltejs/kit/-/kit-1.0.0-next.236.tgz#d0742b68cf2441a241732e461d64a4ae11e9dbb2" + integrity sha512-V/K6KZwZlfM2jDiL7luisRkPujf/pAT2SUpgOEONk44WwUwYwd928qN2u0Z6SAfQFCDAxUI8pMHP2OC1bm352Q== dependencies: "@sveltejs/vite-plugin-svelte" "^1.0.0-next.32" sade "^1.7.4" @@ -3155,10 +3155,10 @@ monaco-editor@^0.31.1: resolved "https://registry.yarnpkg.com/monaco-editor/-/monaco-editor-0.31.1.tgz#67f597b3e45679d1f551237e12a3a42c4438b97b" integrity sha512-FYPwxGZAeP6mRRyrr5XTGHD9gRXVjy7GUzF4IPChnyt3fS5WrNxIkS8DNujWf6EQy0Zlzpxw8oTVE+mWI2/D1Q== -monaco-mermaid@^1.0.1: - version "1.0.1" - resolved "https://registry.yarnpkg.com/monaco-mermaid/-/monaco-mermaid-1.0.1.tgz#1dc8b2f4bb96f84358b42e2c04099378450594eb" - integrity sha512-S+6VM0LcfcZJfacunK1r/4bQS9QL0TSc+lMG2yyQpaJo7LCk77k12E3MO2iOs560KkGIoOru5nOjNIe5CYCrTQ== +monaco-mermaid@^1.0.2: + version "1.0.2" + resolved "https://registry.yarnpkg.com/monaco-mermaid/-/monaco-mermaid-1.0.2.tgz#a96d2c5dfbf9fc591cb7c61dff40a3d188021337" + integrity sha512-H0waK3QyTklsE3hKW4bvDFt+8Wcfghszi125wQVS89gzlHZMxZh5w1RqQe85d4FSmjwc3t1o71pCkyEYiZJiXg== mri@^1.1.0: version "1.1.6"