diff --git a/.env b/.env new file mode 100644 index 00000000..5d946ab4 --- /dev/null +++ b/.env @@ -0,0 +1,2 @@ + MERMAID_DOMAIN="mermaid.live" + MERMAID_ANALYTICS_URL="https://p.mermaid.live" diff --git a/.eslintrc.cjs b/.eslintrc.cjs index af91af2d..65ff1269 100644 --- a/.eslintrc.cjs +++ b/.eslintrc.cjs @@ -7,17 +7,11 @@ module.exports = { // 'plugin:@typescript-eslint/recommended-requiring-type-checking', 'plugin:@typescript-eslint/strict', 'plugin:unicorn/recommended', + 'plugin:svelte/recommended', + 'plugin:svelte/prettier', 'prettier' ], - plugins: [ - 'svelte3', - 'tailwindcss', - '@typescript-eslint', - 'es', - 'vitest', - 'no-only-tests', - 'unicorn' - ], + plugins: ['tailwindcss', '@typescript-eslint', 'es', 'vitest', 'no-only-tests', 'unicorn'], ignorePatterns: [ 'docs/*', '*.cjs', @@ -30,7 +24,13 @@ module.exports = { 'tsconfig.json' ], overrides: [ - { files: ['*.svelte'], processor: 'svelte3/svelte3' }, + { + files: ['*.svelte'], + parser: 'svelte-eslint-parser', + parserOptions: { + parser: '@typescript-eslint/parser' + } + }, { files: ['*.ts'], extends: [ @@ -42,16 +42,12 @@ module.exports = { ] } ], - settings: { - 'svelte3/typescript': () => require('typescript') - }, parserOptions: { sourceType: 'module', ecmaVersion: 2020, tsconfigRootDir: __dirname, - project: ['./tsconfig.json'], - extraFileExtensions: ['.svelte'], - allowAutomaticSingleRunInference: true + project: './tsconfig.json', + extraFileExtensions: ['.svelte'] }, env: { browser: true, @@ -76,6 +72,7 @@ module.exports = { case: 'camelCase' } ], + 'unicorn/filename-case': 'off', 'unicorn/prevent-abbreviations': [ 'error', { diff --git a/.github/workflows/deploy.yml b/.github/workflows/deploy.yml index fcdc4c04..87b64abc 100644 --- a/.github/workflows/deploy.yml +++ b/.github/workflows/deploy.yml @@ -20,6 +20,9 @@ jobs: cache: yarn - name: Build & Deploy + env: + MERMAID_DOMAIN: 'mermaid.live' + MERMAID_ANALYTICS_URL: 'https://p.mermaid.live' run: | export DEPLOY=true [ "$GITHUB_EVENT_NAME" != "pull_request" ] && rm -rf docs/_app/ diff --git a/.node-version b/.node-version new file mode 100644 index 00000000..25bf17fc --- /dev/null +++ b/.node-version @@ -0,0 +1 @@ +18 \ No newline at end of file diff --git a/.prettierrc b/.prettierrc index ab65daf2..e0366fc9 100644 --- a/.prettierrc +++ b/.prettierrc @@ -3,5 +3,7 @@ "svelteSortOrder": "options-scripts-markup-styles", "bracketSameLine": true, "trailingComma": "none", - "printWidth": 100 + "printWidth": 100, + "tailwindConfig": "./tailwind.config.cjs", + "plugins": ["prettier-plugin-svelte", "prettier-plugin-tailwindcss"] } diff --git a/.vscode/settings.json b/.vscode/settings.json index 71acc20d..5d2cb867 100644 --- a/.vscode/settings.json +++ b/.vscode/settings.json @@ -9,11 +9,16 @@ "cssnano", "daisyui", "esserializer", + "gantt", + "gitgraph", "KROKI", "localstorage", "mermaidchart", "mindmap", + "Pageview", "pako", + "panzoom", + "pzoom", "Serde", "serdes", "tailwindcss", diff --git a/Dockerfile b/Dockerfile index c8ab6c84..b400b6a7 100644 --- a/Dockerfile +++ b/Dockerfile @@ -16,6 +16,8 @@ FROM mermaid-live-editor-dependencies AS mermaid-live-editor-builder ARG MERMAID_RENDERER_URL ARG MERMAID_KROKI_RENDERER_URL +ARG MERMAID_ANALYTICS_URL +ARG MERMAID_DOMAIN COPY . ./ diff --git a/README.md b/README.md index 5c18f655..a9656501 100644 --- a/README.md +++ b/README.md @@ -37,6 +37,12 @@ Default is `https://mermaid.ink` When building set the MERMAID_KROKI_RENDERER_URL build argument to your Kroki instance. Default is `https://kroki.io` +### To configure Analytics + +When building set the MERMAID_ANALYTICS_URL build argument to your plausible instance, and MERMAID_DOMAIN to your domain. + +Default is empty, disabling analytics. + ### Development ```bash diff --git a/cypress.config.js b/cypress.config.js index 7ebe9ef4..8b8edd92 100644 --- a/cypress.config.js +++ b/cypress.config.js @@ -1,6 +1,6 @@ import { defineConfig } from 'cypress'; import fs from 'fs'; -import { isFileExist, findFiles } from 'cy-verify-downloads'; +import path from 'path'; export default defineConfig({ projectId: '2ckppp', viewportWidth: 1440, @@ -15,17 +15,19 @@ export default defineConfig({ e2e: { setupNodeEvents(on, config) { on('task', { - isFileExist, - findFiles, - deleteFile(path) { - fs.rmSync(path); - return null; - }, - readFileMaybe(filename) { - if (fs.existsSync(filename)) { - return fs.readFileSync(filename, 'utf8'); + readAndDeleteFile({ fileNamePattern, folder, mode }) { + const fileNameRegex = new RegExp(fileNamePattern); + const files = fs.readdirSync(folder); + const filename = files.find((file) => file.match(fileNameRegex)); + const filePath = path.join(folder, filename); + try { + if (mode === 'size') { + return fs.statSync(filePath).size; + } + return fs.readFileSync(filePath, 'utf8'); + } finally { + fs.rmSync(filePath); } - return null; } }); }, diff --git a/cypress/e2e/actions.spec.ts b/cypress/e2e/actions.spec.ts index 4206f022..24d8d1b1 100644 --- a/cypress/e2e/actions.spec.ts +++ b/cypress/e2e/actions.spec.ts @@ -26,8 +26,6 @@ describe('Check actions', () => { }); it('should download png and svg', () => { - cy.clock(new Date(2022, 0, 1).getTime()); - cy.get(`#downloadPNG`).click(); verifyFileSizeGreaterThan('diagram', 'png', 34_000); @@ -43,7 +41,5 @@ describe('Check actions', () => { cy.get(`#downloadSVG`).click(); verifyFileSizeGreaterThan('diagram', 'svg', 11_000); - - cy.clock().invoke('restore'); }); }); diff --git a/cypress/e2e/diagramUpdate.spec.ts b/cypress/e2e/diagramUpdate.spec.ts index d2ca433c..b8326bc3 100644 --- a/cypress/e2e/diagramUpdate.spec.ts +++ b/cypress/e2e/diagramUpdate.spec.ts @@ -50,6 +50,24 @@ describe('Auto sync tests', () => { cy.getLocalStorage('codeStore').snapshot(); }); + it('should automatically defer rendering when complex diagrams are edited', () => { + cy.get('#view').should('not.have.class', 'outOfSync'); + typeInEditor(` +A & B & C & D & E --> F & G & K & Z & i +A & B & C & D & E --> F & G & K & Z & i +A & B & C & D & E --> F & G & K & Z & i +A & B & C & D & E --> F & G & K & Z & i +A & B & C & D & E --> F & G & K & Z & i +A & B & C & D & E --> F & G & K & Z & i +A & B & C & D & E --> F & G & K & Z & i +A & B & C & D & E --> F & G & K & Z & i +A & B & C & D & E --> F & G & K & Z & i`); + cy.get('#view').should('have.class', 'outOfSync'); + cy.get('#errorContainer').should('contain.text', 'It will be updated automatically.'); + // The class should be removed automatically after 1 second. + cy.get('#view').should('not.have.class', 'outOfSync'); + }); + it('supports commenting code out/in', () => { cy.get('#editor').contains('Car').click(); cy.get('#editor').get('textarea').type(`${cmd}/`, { force: true }); diff --git a/cypress/e2e/util.ts b/cypress/e2e/util.ts index 57a9f54b..2f76f625 100644 --- a/cypress/e2e/util.ts +++ b/cypress/e2e/util.ts @@ -11,7 +11,7 @@ export const typeInEditor = ( ) => { cy.window().should('have.property', 'editorLoaded', true); cy.get('#editor').click(); - cy.get('#editor').within(($editor) => { + cy.get('#editor').within(() => { if (bottom) { cy.get('textarea').type('{pageDown}', { force: true }); } @@ -29,17 +29,15 @@ export const verifyFileSizeGreaterThan = ( extension: string, size: number ) => { - const fileName = `mermaid-${fileType}-2022-01-01-000000.${extension}`; - const filePath = `${downloadsFolder}/${fileName}`; - // eslint-disable-next-line @typescript-eslint/no-unsafe-call - cy.verifyDownload(fileName); - cy.readFile(filePath, null, { - log: false - }).then((buffer: ArrayBuffer) => { - expect(buffer.byteLength).to.be.gt(size); - expect(buffer.byteLength).to.be.lt(size * 1.3); + cy.get('#view').should('not.have.class', 'outOfSync'); + cy.task('readAndDeleteFile', { + folder: downloadsFolder, + fileNamePattern: `^mermaid-${fileType}-.*.${extension}$`, + mode: 'size' + }).then((fileSize: number) => { + expect(fileSize).to.be.gt(size); + expect(fileSize).to.be.lt(size * 1.3); }); - cy.task('deleteFile', filePath); }; export const verifyFileSnapshot = ( @@ -47,14 +45,11 @@ export const verifyFileSnapshot = ( extension: string, content: string ) => { - const fileName = `mermaid-${fileType}-2022-01-01-000000.${extension}`; - const filePath = `${downloadsFolder}/${fileName}`; - // eslint-disable-next-line @typescript-eslint/no-unsafe-call - cy.verifyDownload(fileName); - cy.readFile(filePath, null, { - log: false - }).then((buffer: ArrayBuffer) => - expect(new TextDecoder('utf8').decode(buffer)).to.contain(content) - ); - cy.task('deleteFile', filePath); + cy.task('readAndDeleteFile', { + folder: downloadsFolder, + fileNamePattern: `^mermaid-${fileType}-.*.${extension}$`, + mode: 'content' + }).then((fileContent: number) => { + expect(fileContent).to.contain(content); + }); }; diff --git a/cypress/support/e2e.js b/cypress/support/e2e.js index d9401131..4ef4ffaa 100644 --- a/cypress/support/e2e.js +++ b/cypress/support/e2e.js @@ -15,7 +15,6 @@ // Import commands.js using ES2015 syntax: import './commands'; -require('cy-verify-downloads').addCustomCommand(); // Alternatively you can use CommonJS syntax: // require('./commands') diff --git a/cypress/tsconfig.json b/cypress/tsconfig.json index edd14f8b..e9f59358 100644 --- a/cypress/tsconfig.json +++ b/cypress/tsconfig.json @@ -1,7 +1,7 @@ { "compilerOptions": { "allowJs": true, - "types": ["cypress", "cypress-localstorage-commands", "cy-verify-downloads", "node"] + "types": ["cypress", "cypress-localstorage-commands", "node"] }, "include": ["**/*.ts"] } diff --git a/netlify.toml b/netlify.toml new file mode 100644 index 00000000..4b646fa7 --- /dev/null +++ b/netlify.toml @@ -0,0 +1,3 @@ +[build.environment] + MERMAID_ANALYTICS_URL = 'https://p.mermaid.live' + MERMAID_DOMAIN = 'mermaid.live' diff --git a/package.json b/package.json index 809976e8..98189021 100644 --- a/package.json +++ b/package.json @@ -9,9 +9,9 @@ "dev:test": "yarn dev", "build": "vite build", "preview": "vite preview", - "lint": "prettier --check --cache --plugin-search-dir=. .;eslint --ignore-path .gitignore .", - "lint:fix": "prettier --write --cache --plugin-search-dir=. .;eslint --fix --ignore-path .gitignore .", - "format": "prettier --write --cache --plugin-search-dir=. .", + "lint": "prettier --check --cache . && eslint --ignore-path .gitignore .", + "lint:fix": "prettier --write --cache . && eslint --fix --ignore-path .gitignore .", + "format": "prettier --write --cache .", "pre-commit": "lint-staged", "postinstall": "husky install && svelte-kit sync && (git config blame.ignoreRevsFile .git-blame-ignore-revs || true)", "test:unit": "vitest", @@ -23,59 +23,60 @@ }, "devDependencies": { "@cypress/snapshot": "2.1.7", - "@sveltejs/adapter-static": "2.0.3", - "@sveltejs/kit": "1.27.6", - "@testing-library/jest-dom": "5.17.0", - "@testing-library/svelte": "3.2.2", + "@sveltejs/adapter-static": "3.0.1", + "@sveltejs/kit": "2.4.3", + "@sveltejs/vite-plugin-svelte": "^3.0.1", + "@testing-library/svelte": "4.0.5", + "@types/lodash-es": "^4.17.12", "@types/pako": "2.0.3", "@types/uuid": "9.0.7", - "@typescript-eslint/eslint-plugin": "5.62.0", - "@typescript-eslint/parser": "5.62.0", - "@vitest/ui": "^0.34.0", + "@typescript-eslint/eslint-plugin": "6.19.1", + "@typescript-eslint/parser": "6.19.1", + "@vitest/ui": "^1.1.3", "autoprefixer": "^10.4.14", "c8": "7.14.0", "chai": "^4.3.7", "cssnano": "^6.0.0", - "cy-verify-downloads": "0.2.2", "cypress": "12.17.4", "cypress-localstorage-commands": "2.2.5", - "eslint": "8.54.0", - "eslint-config-prettier": "8.10.0", + "eslint": "8.56.0", + "eslint-config-prettier": "9.1.0", "eslint-plugin-cypress": "2.15.1", - "eslint-plugin-es": "4.1.0", + "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.13.0", - "eslint-plugin-unicorn": "^46.0.0", - "eslint-plugin-vitest": "^0.3.0", - "esserializer": "1.3.11", - "font-awesome": "^4.7.0", + "eslint-plugin-postcss-modules": "^2.0.0", + "eslint-plugin-svelte": "^2.35.1", + "eslint-plugin-tailwindcss": "^3.13.1", + "eslint-plugin-unicorn": "^50.0.1", + "eslint-plugin-vitest": "^0.3.20", + "esserializer": "^1.3.11", "husky": "^8.0.3", - "jsdom": "21.1.2", - "lint-staged": "13.3.0", + "jsdom": "^21.1.2", + "lint-staged": "^15.2.0", "node-html-parser": "^6.1.5", - "postcss": "^8.4.21", - "postcss-load-config": "4.0.2", - "prettier": "2.8.8", - "prettier-plugin-svelte": "^2.10.0", - "svelte": "3.59.2", - "svelte-preprocess": "5.1.1", - "tailwindcss": "^3.3.1", - "tslib": "^2.5.0", - "typescript": "5.3.2", - "vite": "^4.5.1", - "vitest": "^0.34.0" + "postcss": "^8.4.33", + "postcss-load-config": "5.0.2", + "prettier": "^3.1.0", + "prettier-plugin-svelte": "^3.1.2", + "prettier-plugin-tailwindcss": "^0.5.11", + "svelte": "^4.2.8", + "svelte-preprocess": "^5.1.3", + "tailwindcss": "^3.4.1", + "tslib": "^2.6.2", + "typescript": "^5.3.3", + "vite": "^5.0.11", + "vitest": "^1.1.3", + "vitest-dom": "^0.1.1" }, "dependencies": { - "analytics": "0.8.9", - "analytics-plugin-plausible": "0.0.6", "daisyui": "2.52.0", "dayjs": "^1.11.7", - "js-base64": "3.7.5", - "mermaid": "10.6.1", - "monaco-editor": "0.44.0", + "js-base64": "3.7.6", + "lodash-es": "^4.17.21", + "mermaid": "10.7.0", + "monaco-editor": "0.45.0", "pako": "2.1.0", + "plausible-tracker": "^0.3.8", "random-word-slugs": "0.1.7", "svg-pan-zoom": "3.6.1", "uuid": "9.0.1" @@ -87,7 +88,7 @@ ] }, "volta": { - "node": "18.18.2", + "node": "18.19.0", "yarn": "1.22.21" }, "engines": { diff --git a/src/app.html b/src/app.html index e2469685..6be3e1b8 100644 --- a/src/app.html +++ b/src/app.html @@ -1,4 +1,4 @@ - + @@ -17,8 +17,8 @@ %sveltekit.head% diff --git a/src/app.postcss b/src/app.postcss index 888c737e..73ce33f0 100644 --- a/src/app.postcss +++ b/src/app.postcss @@ -3,7 +3,7 @@ @tailwind utilities; .input { - @apply flex-1 border-primary border-solid border-2 rounded; + @apply flex-1 rounded border-2 border-solid border-primary; } .action-btn { @apply btn btn-primary; diff --git a/src/env.d.ts b/src/env.d.ts index 3bdd9740..ec4a2ff4 100644 --- a/src/env.d.ts +++ b/src/env.d.ts @@ -3,6 +3,8 @@ interface ImportMetaEnv { readonly MERMAID_RENDERER_URL?: string; readonly MERMAID_KROKI_RENDERER_URL?: string; + readonly MERMAID_ANALYTICS_URL?: string; + readonly MERMAID_DOMAIN?: string; // more env variables... } diff --git a/src/global.d.ts b/src/global.d.ts index 95ecd6a0..63908c66 100644 --- a/src/global.d.ts +++ b/src/global.d.ts @@ -1,16 +1 @@ -/* eslint-disable @typescript-eslint/no-empty-interface */ -/* eslint-disable @typescript-eslint/ban-types */ -/* eslint-disable @typescript-eslint/no-unused-vars */ - /// -import type { TestingLibraryMatchers } from '@testing-library/jest-dom/matchers'; - -declare global { - namespace jest { - interface Matchers - // eslint-disable-next-line @typescript-eslint/ban-ts-comment - // @ts-expect-error - // eslint-disable-next-line no-undef - extends TestingLibraryMatchers {} - } -} diff --git a/src/lib/components/Actions.svelte b/src/lib/components/Actions.svelte index 7b1b9578..3cd45914 100644 --- a/src/lib/components/Actions.svelte +++ b/src/lib/components/Actions.svelte @@ -1,18 +1,19 @@ -
+
{#if isClipboardAvailable()} -
+
PNG size
-
+
-
+
{#if isNetlify} -
- +
+ This site is powered by Netlify
diff --git a/src/lib/components/Card/Card.svelte b/src/lib/components/Card/Card.svelte index 38098eb6..3e107487 100644 --- a/src/lib/components/Card/Card.svelte +++ b/src/lib/components/Card/Card.svelte @@ -11,20 +11,22 @@ $: isTabsShown = isOpen && tabs.length > 0; -
+