Merge pull request #1193 from mermaid-js/develop

10.1.0
mermaid-js · Apr 13, 2023 · db55060 · db55060
2 parents f634434 + a12efbc
commit db55060
Show file tree

Hide file tree

Showing 10 changed files with 1,126 additions and 836 deletions.
diff --git a/.vscode/settings.json b/.vscode/settings.json
@@ -1,8 +1,10 @@
 {
   "editor.formatOnSave": true,
+  "cSpell.blockCheckingWhenLineLengthGreaterThan": 150,
   "cSpell.words": [
     "asyncable",
     "Browserslist",
+    "ckppp",
     "corg",
     "cssnano",
     "daisyui",
@@ -14,7 +16,8 @@
     "pako",
     "Serde",
     "serdes",
-    "tailwindcss"
+    "tailwindcss",
+    "uparrow"
   ],
   "vitest.commandLine": "yarn test:unit",
   "vitest.enable": true,

diff --git a/cypress.config.js b/cypress.config.js
@@ -6,10 +6,10 @@ export default defineConfig({
   viewportWidth: 1440,
   viewportHeight: 768,
   snapshotFileName: './cypress/snapshots.js',
-  defaultCommandTimeout: 16000,
-  requestTimeout: 16000,
+  defaultCommandTimeout: 5000,
+  requestTimeout: 5000,
   retries: {
-    runMode: 4,
+    runMode: 2,
     openMode: 0
   },
   e2e: {

diff --git a/cypress/e2e/actions.spec.ts b/cypress/e2e/actions.spec.ts
@@ -1,4 +1,4 @@
-import { verifyFileSizeGreaterThan } from './util';
+import { typeInEditor, verifyFileSizeGreaterThan } from './util';
 describe('Check actions', () => {
   beforeEach(() => {
     cy.clearLocalStorage();
@@ -10,7 +10,7 @@ describe('Check actions', () => {
     cy.get('#markdown')
       .invoke('val')
       .then((oldText) => {
-        cy.get('#editor').click('bottom').type('{enter}C --> HistoryTest');
+        typeInEditor('C --> HistoryTest', { bottom: true, newline: true });
         cy.get('#markdown')
           .invoke('val')
           .then((newText) => {
@@ -29,7 +29,7 @@ describe('Check actions', () => {
     cy.clock(new Date(2022, 0, 1).getTime());
 
     cy.get(`#downloadPNG`).click();
-    verifyFileSizeGreaterThan('diagram', 'png', 35_000);
+    verifyFileSizeGreaterThan('diagram', 'png', 34_000);
 
     cy.get(`#downloadSVG`).click();
     verifyFileSizeGreaterThan('diagram', 'svg', 10_000);

diff --git a/cypress/e2e/diagramUpdate.spec.ts b/cypress/e2e/diagramUpdate.spec.ts
@@ -1,16 +1,17 @@
-import { getEditor, cmd } from './util';
+import { typeInEditor, cmd } from './util';
 
 describe('Auto sync tests', () => {
   beforeEach(() => {
     cy.clearLocalStorage();
     cy.visit('/');
+    cy.url().should('contain', '/edit#pako');
   });
 
   it('should dim diagram when code is edited', () => {
     cy.contains('Auto sync').click();
     cy.get('#view').should('not.have.class', 'outOfSync');
     cy.get('#errorContainer').should('not.exist');
-    getEditor({ bottom: true, newline: true }).type('  C --> Test');
+    typeInEditor('  C --> Test', { bottom: true });
     cy.get('#view').should('have.class', 'outOfSync');
     cy.get('#errorContainer').should('contain.text', 'Diagram out of sync.');
     cy.getLocalStorage('codeStore').snapshot();
@@ -19,10 +20,10 @@ describe('Auto sync tests', () => {
   it('should update diagram when shortcut is used', () => {
     cy.contains('Auto sync').click();
     cy.get('#view').should('not.have.class', 'outOfSync');
-    getEditor().type('  C --> Test');
+    typeInEditor('  C --> Test');
     cy.get('#view').should('have.class', 'outOfSync');
     cy.get('#errorContainer').should('contain.text', 'Diagram out of sync.');
-    getEditor().type(`${cmd}{enter}`);
+    typeInEditor(`${cmd}{enter}`);
     cy.get('#errorContainer').should('not.exist');
     cy.get('#view').should('not.have.class', 'outOfSync');
   });
@@ -38,21 +39,22 @@ describe('Auto sync tests', () => {
   it('should not dim diagram when code is in sync', () => {
     cy.contains('Auto sync').click();
     cy.get('#view').should('not.have.class', 'outOfSync');
-    getEditor().type('  C --> Test');
+    typeInEditor('  C --> Test');
     cy.get('#view').should('have.class', 'outOfSync');
     cy.get('[data-cy=sync]').click();
     cy.get('#view').should('not.have.class', 'outOfSync');
     cy.get('#autoSync').check();
-    getEditor().type('ing');
+    typeInEditor('ing');
     cy.get('#view').should('not.have.class', 'outOfSync');
     cy.getLocalStorage('codeStore').snapshot();
   });
 
   it('supports commenting code out/in', () => {
-    getEditor({ bottom: true, newline: false }).type(`{uparrow}${cmd}/`);
+    cy.get('#editor').contains('Car').click();
+    cy.focused().type(`${cmd}/`);
     cy.get('#view').contains('Car').should('not.exist');
 
-    getEditor().type(`{uparrow}${cmd}/`);
+    typeInEditor(`{uparrow}${cmd}/`);
     cy.get('#view').contains('Car').should('exist');
   });
 
@@ -61,7 +63,7 @@ describe('Auto sync tests', () => {
       '/edit#pako:eNpljjEKwzAMRa8SNOcEnlt6gK5eVFvYJsgOqkwpIXevg9smEE1PnyfxF3DFExgISW-CczQ2D21cYU7a-SGYXRwyvTp9jUhuKlVP-eHy7zA-leQsMEmg_QOM0BLG5FujZVMsaCQmC6ahR5ks2Lw2r84ela4-aREwKpVGwKrl_s7ut3fnkjAIcg_XDzuaUhs'
     );
     cy.get('#errorContainer').should('not.exist');
-    getEditor({ newline: true }).type(`branch test`);
+    typeInEditor(`branch test`, { bottom: true, newline: true });
     cy.get('#editor').contains('branch test').should('exist');
     cy.get('#errorContainer')
       .contains(
@@ -72,9 +74,9 @@ describe('Auto sync tests', () => {
 
   it('should update diagram after entire text is removed', () => {
     // https://github.com/mermaid-js/mermaid-live-editor/issues/1102
-    getEditor().type(`${cmd} a {backspace}`);
-    getEditor().type('graph LR');
-    getEditor().type(' {enter}  A-->Car');
+    typeInEditor(`${cmd} a {backspace}`);
+    typeInEditor('graph LR');
+    typeInEditor(' {enter}  A-->Car');
     cy.get('#view').contains('Car').should('exist');
   });
 });

diff --git a/cypress/e2e/history.spec.ts b/cypress/e2e/history.spec.ts
@@ -1,4 +1,4 @@
-import { getEditor, verifyFileSnapshot } from './util';
+import { typeInEditor, verifyFileSnapshot } from './util';
 
 describe('Save History', () => {
   beforeEach(() => {
@@ -51,14 +51,14 @@ describe('Save History', () => {
       expect(str).to.equal('State already saved.');
     });
     cy.on('window:confirm', () => true);
-    getEditor().type('  C --> HistoryTest');
+    typeInEditor('  C --> HistoryTest');
     cy.get('#saveHistory').click();
     cy.get('#historyList').find('li').should('have.length', 2);
   });
 
   it('should be able to restore and delete', () => {
     cy.get('#saveHistory').click();
-    getEditor().type('  C --> HistoryTest');
+    typeInEditor('  C --> HistoryTest');
     cy.get('#historyList').find('No items in History').should('not.exist');
     cy.get('#historyList').find('li').should('have.length', 1);
     cy.contains('HistoryTest');
@@ -68,7 +68,7 @@ describe('Save History', () => {
     cy.get('#historyList').find('li').should('have.length', 0);
     cy.get('#historyList').contains('No items in History');
     cy.get('#saveHistory').click();
-    getEditor().type('  C --> HistoryTest');
+    typeInEditor('  C --> HistoryTest');
     cy.get('#saveHistory').click();
     cy.get('#editor').type('ing');
     cy.get('#clearHistory').click();
@@ -81,7 +81,7 @@ describe('Save History', () => {
 
   // TODO: Fix #639
   xit('should auto save history', () => {
-    getEditor().type('  C --> HistoryTest');
+    typeInEditor('  C --> HistoryTest');
     cy.tick(70_000);
     cy.contains('Timeline').click();
     cy.get('#historyList').find('li').should('have.length', 1);

diff --git a/cypress/e2e/loadSite.spec.ts b/cypress/e2e/loadSite.spec.ts
@@ -4,6 +4,7 @@ describe('Site Loads', () => {
   beforeEach(() => {
     cy.clearLocalStorage();
     cy.visit('/');
+    cy.url().should('include', '/edit#pako');
   });
 
   it('Check Home page load', () => {
@@ -93,7 +94,9 @@ describe('Site Loads', () => {
     cy.reload(true);
     cy.contains('Please Click here to Raise an issue in github.');
   });
+});
 
+describe('Verify types of URLs', () => {
   it('should load compressed URL', () => {
     cy.visit(
       '/edit#pako:eNpVkM2KwkAQhF-l6dMK5gVyEDRxvYi7sF6WjIcm0zqDzg_jBJEk725Hd2G3Tw31VVFUj23QjCWeEkUD-1p5kFs2O77BN1M6QFEshg1ncMHzfYDV2ybA1YQYrT_NXvhqgqDqtxPGkI315_ElVU__h-cB6mZLMYd4-Kvsb2GAdWM_jcT_V0xicb03RyqPVLSUoJI-OEfHyZHV0rqfDAqzYccKS3k1pbNC5Ufhuqgp81rbHBJKxuXKc6Quh6-7b7HMqeNfqLYkC7gfanwAlW1ZvQ'
@@ -105,18 +108,23 @@ describe('Site Loads', () => {
     cy.contains('Animal');
   });
 
-  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');
+  describe('Uncompressed URLs', () => {
+    it('should load URL without specifier', () => {
+      cy.visit(
+        '/edit/#eyJjb2RlIjoiZ3JhcGhcbiAgICBUZXN0TGFiZWwiLCJtZXJtYWlkIjoie1xuICBcInRoZW1lXCI6IFwiZGVmYXVsdFwiXG59IiwidXBkYXRlRWRpdG9yIjpmYWxzZSwiYXV0b1N5bmMiOnRydWUsInVwZGF0ZURpYWdyYW0iOmZhbHNlfQ'
+      );
+      cy.contains('TestLabel');
+      cy.visit(
+        '/edit#eyJjb2RlIjoiY2xhc3NEaWFncmFtXG4gICAgQW5pbWFsIDx8LS0gRHVja1xuICAgIEFuaW1hbCA8fC0tIEZpc2hcbiAgICBBbmltYWwgPHwtLSBaZWJyYVxuICAgIEFuaW1hbCA6ICtpbnQgYWdlXG4gICAgQW5pbWFsIDogK1N0cmluZyBnZW5kZXJcbiAgICBBbmltYWw6ICtpc01hbW1hbCgpXG4gICAgQW5pbWFsOiArbWF0ZSgpXG4gICAgY2xhc3MgRHVja3tcbiAgICAgICtTdHJpbmcgYmVha0NvbG9yXG4gICAgICArc3dpbSgpXG4gICAgICArcXVhY2soKVxuICAgIH1cbiAgICBjbGFzcyBGaXNoe1xuICAgICAgLWludCBzaXplSW5GZWV0XG4gICAgICAtY2FuRWF0KClcbiAgICB9XG4gICAgY2xhc3MgWmVicmF7XG4gICAgICArYm9vbCBpc193aWxkXG4gICAgICArcnVuKClcbiAgICB9XG4gICAgICAgICAgICAiLCJtZXJtYWlkIjoie1xuICBcInRoZW1lXCI6IFwiZGFya1wiXG59IiwidXBkYXRlRWRpdG9yIjpmYWxzZSwiYXV0b1N5bmMiOnRydWUsInVwZGF0ZURpYWdyYW0iOmZhbHNlfQ'
+      );
+      cy.contains('Animal');
+    });
+
+    it('should load URL with "base64" specifier', () => {
+      cy.visit(
+        '/edit/#base64:eyJjb2RlIjoiZ3JhcGhcbiAgICBUZXN0TGFiZWwiLCJtZXJtYWlkIjoie1xuICBcInRoZW1lXCI6IFwiZGVmYXVsdFwiXG59IiwidXBkYXRlRWRpdG9yIjpmYWxzZSwiYXV0b1N5bmMiOnRydWUsInVwZGF0ZURpYWdyYW0iOmZhbHNlfQ'
+      );
+      cy.contains('TestLabel');
+    });
   });
 });
diff --git a/cypress/e2e/util.ts b/cypress/e2e/util.ts
@@ -1,12 +1,23 @@
 export const cmd = `{${Cypress.platform === 'darwin' ? 'meta' : 'ctrl'}}`;
 
-export const getEditor = ({ bottom = true, newline = false } = {}) =>
-  cy
-    .get('#editor textarea:first')
-    .click()
-    .focused()
-    .type(`${bottom ? '{pageDown}' : cmd}`)
-    .type(`${newline ? '{enter}' : cmd}`);
+interface EditorOptions {
+  bottom?: boolean;
+  newline?: boolean;
+}
+
+export const typeInEditor = (
+  text: string,
+  { bottom = true, newline = false }: EditorOptions = {}
+) => {
+  cy.get('#editor textarea:first').click();
+  if (bottom) {
+    cy.focused().type('{pageDown}');
+  }
+  if (newline) {
+    cy.focused().type('{enter}');
+  }
+  cy.focused().type(text);
+};
 
 const downloadsFolder = Cypress.config('downloadsFolder');
 

diff --git a/cypress/snapshots.js b/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}\",\"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": "11.2.0",
+  "__version": "12.9.0",
   "Auto sync tests": {
     "should dim diagram when code is edited": {
       "1": "{\"code\":\"flowchart 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}\",\"autoSync\":false,\"updateDiagram\":false}"

diff --git a/package.json b/package.json
@@ -23,61 +23,61 @@
   },
   "devDependencies": {
     "@cypress/snapshot": "2.1.7",
-    "@sveltejs/adapter-static": "1.0.6",
-    "@sveltejs/kit": "1.5.0",
+    "@sveltejs/adapter-static": "2.0.2",
+    "@sveltejs/kit": "1.15.4",
     "@testing-library/jest-dom": "5.16.5",
     "@testing-library/svelte": "3.2.2",
     "@types/pako": "2.0.0",
-    "@types/uuid": "8.3.4",
-    "@typescript-eslint/eslint-plugin": "5.51.0",
-    "@typescript-eslint/parser": "5.51.0",
-    "@vitest/ui": "^0.28.0",
-    "autoprefixer": "^10.4.13",
-    "c8": "7.12.0",
+    "@types/uuid": "9.0.1",
+    "@typescript-eslint/eslint-plugin": "5.58.0",
+    "@typescript-eslint/parser": "5.58.0",
+    "@vitest/ui": "^0.30.1",
+    "autoprefixer": "^10.4.14",
+    "c8": "7.13.0",
     "chai": "^4.3.7",
-    "cssnano": "^5.1.14",
-    "cy-verify-downloads": "0.1.11",
-    "cypress": "11.2.0",
-    "cypress-localstorage-commands": "2.2.2",
-    "eslint": "8.33.0",
-    "eslint-config-prettier": "8.6.0",
-    "eslint-plugin-cypress": "2.12.1",
+    "cssnano": "^6.0.0",
+    "cy-verify-downloads": "0.1.14",
+    "cypress": "12.9.0",
+    "cypress-localstorage-commands": "2.2.3",
+    "eslint": "8.38.0",
+    "eslint-config-prettier": "8.8.0",
+    "eslint-plugin-cypress": "2.13.2",
     "eslint-plugin-es": "4.1.0",
     "eslint-plugin-no-only-tests": "^3.1.0",
     "eslint-plugin-postcss-modules": "2.0.0",
     "eslint-plugin-svelte3": "4.0.0",
-    "eslint-plugin-tailwindcss": "3.8.3",
-    "eslint-plugin-unicorn": "^45.0.0",
-    "eslint-plugin-vitest": "^0.0.32",
+    "eslint-plugin-tailwindcss": "3.11.0",
+    "eslint-plugin-unicorn": "^46.0.0",
+    "eslint-plugin-vitest": "^0.1.4",
     "esserializer": "1.3.10",
     "font-awesome": "^4.7.0",
-    "husky": "^8.0.2",
+    "husky": "^8.0.3",
     "jsdom": "20.0.3",
-    "lint-staged": "13.1.1",
-    "node-html-parser": "^6.1.4",
-    "postcss": "^8.4.19",
+    "lint-staged": "13.2.1",
+    "node-html-parser": "^6.1.5",
+    "postcss": "^8.4.21",
     "postcss-load-config": "4.0.1",
-    "prettier": "2.8.3",
-    "prettier-plugin-svelte": "^2.8.1",
-    "svelte": "3.55.1",
-    "svelte-preprocess": "4.10.7",
-    "tailwindcss": "^3.2.4",
-    "tslib": "^2.4.1",
-    "typescript": "4.9.5",
-    "vite": "^4.0.1",
-    "vitest": "^0.28.0"
+    "prettier": "2.8.7",
+    "prettier-plugin-svelte": "^2.10.0",
+    "svelte": "3.58.0",
+    "svelte-preprocess": "5.0.3",
+    "tailwindcss": "^3.3.1",
+    "tslib": "^2.5.0",
+    "typescript": "5.0.4",
+    "vite": "^4.2.1",
+    "vitest": "^0.30.1"
   },
   "dependencies": {
     "analytics": "0.8.1",
     "analytics-plugin-plausible": "0.0.6",
-    "daisyui": "2.50.0",
+    "daisyui": "2.51.5",
     "dayjs": "^1.11.7",
-    "js-base64": "3.7.4",
-    "mermaid": "10.0.0",
-    "monaco-editor": "0.34.1",
+    "js-base64": "3.7.5",
+    "mermaid": "10.1.0",
+    "monaco-editor": "0.37.1",
     "monaco-mermaid": "1.0.8",
     "pako": "2.1.0",
-    "random-word-slugs": "0.1.6",
+    "random-word-slugs": "0.1.7",
     "svg-pan-zoom": "3.6.1",
     "uuid": "9.0.0"
   },