Compare commits
1
Commits
| Author | SHA1 | Date | |
|---|---|---|---|
 Sidharth Vinod
|
00955e3c81 |
+3
-2
@@ -25,7 +25,7 @@ module.exports = {
|
||||
},
|
||||
parserOptions: {
|
||||
sourceType: 'module',
|
||||
ecmaVersion: 2020,
|
||||
ecmaVersion: 2019,
|
||||
tsconfigRootDir: __dirname,
|
||||
project: ['./tsconfig.json'],
|
||||
extraFileExtensions: ['.svelte'],
|
||||
@@ -33,7 +33,8 @@ module.exports = {
|
||||
},
|
||||
env: {
|
||||
browser: true,
|
||||
es2020: true
|
||||
es2017: true,
|
||||
node: true
|
||||
},
|
||||
rules: {
|
||||
'@typescript-eslint/ban-ts-comment': [
|
||||
|
||||
@@ -13,8 +13,8 @@ jobs:
|
||||
repo-token: ${{ secrets.GITHUB_TOKEN }}
|
||||
exempt-issue-labels: 'retained'
|
||||
exempt-pr-labels: 'retained'
|
||||
stale-issue-message: 'This issue is stale because it has been open 90 days with no activity. Remove stale label or comment or this will be closed in 30 days'
|
||||
stale-pr-message: 'This pr is stale because it has been open 90 days with no activity. Remove stale label or comment or this will be closed in 30 days'
|
||||
stale-issue-message: 'This issue is stale because it has been open 90 days with no activity. Remove stale label or comment or this will be closed in 14 days'
|
||||
stale-pr-message: 'This pr is stale because it has been open 90 days with no activity. Remove stale label or comment or this will be closed in 14 days'
|
||||
days-before-stale: 90
|
||||
days-before-close: 30
|
||||
days-before-close: 14
|
||||
days-before-pr-close: -1
|
||||
|
||||
@@ -9,11 +9,6 @@ on:
|
||||
jobs:
|
||||
cypress-run:
|
||||
runs-on: ubuntu-latest
|
||||
strategy:
|
||||
fail-fast: false
|
||||
matrix:
|
||||
# run 3 copies of the current job in parallel
|
||||
containers: [1, 2, 3]
|
||||
|
||||
steps:
|
||||
- name: Checkout
|
||||
@@ -35,6 +30,12 @@ jobs:
|
||||
node-version: 16
|
||||
cache: 'yarn'
|
||||
|
||||
- name: Lint & Test
|
||||
run: |
|
||||
yarn install
|
||||
yarn lint
|
||||
yarn test:unit
|
||||
|
||||
# Install NPM dependencies, cache them correctly
|
||||
# and run all Cypress tests
|
||||
- name: Cypress run
|
||||
@@ -45,7 +46,5 @@ jobs:
|
||||
wait-on: 'http://localhost:3000'
|
||||
record: true
|
||||
headless: true
|
||||
parallel: true
|
||||
env:
|
||||
CYPRESS_RECORD_KEY: ${{ secrets.CYPRESS_RECORD_KEY }}
|
||||
MERMAID_DISABLE_DEBOUNCE: 'true'
|
||||
|
||||
@@ -1,36 +0,0 @@
|
||||
name: Unit Tests
|
||||
|
||||
on:
|
||||
pull_request:
|
||||
branches:
|
||||
- master
|
||||
- develop
|
||||
|
||||
jobs:
|
||||
unit-tests:
|
||||
runs-on: ubuntu-latest
|
||||
|
||||
steps:
|
||||
- name: Checkout
|
||||
uses: actions/checkout@v3
|
||||
|
||||
- uses: actions/cache@v3
|
||||
id: yarn-and-build-cache
|
||||
with:
|
||||
path: |
|
||||
build
|
||||
node_modules
|
||||
key: ${{ runner.os }}-node_modules-build-${{ hashFiles('**/yarn.lock') }}
|
||||
restore-keys: |
|
||||
${{ runner.os }}-node_modules-build-
|
||||
|
||||
- uses: actions/setup-node@v3
|
||||
with:
|
||||
node-version: 16
|
||||
cache: 'yarn'
|
||||
|
||||
- name: Lint & Test
|
||||
run: |
|
||||
yarn install
|
||||
yarn lint
|
||||
yarn test:unit
|
||||
Vendored
+1
-5
@@ -1,8 +1,4 @@
|
||||
{
|
||||
"editor.formatOnSave": true,
|
||||
"cSpell.words": ["pako", "Serde", "serdes"],
|
||||
"vitest.commandLine": "yarn test:unit",
|
||||
"vitest.enable": true,
|
||||
"testing.autoRun.mode": "rerun",
|
||||
"svelte.enable-ts-plugin": true
|
||||
"cSpell.words": ["pako", "Serde", "serdes"]
|
||||
}
|
||||
|
||||
+1
-1
@@ -6,7 +6,7 @@
|
||||
# Stop : press ctrl + c
|
||||
# or
|
||||
# docker stop mermaid-live-editor
|
||||
FROM node:18.8.0 as mermaid-live-editor-builder
|
||||
FROM node:18.6.0 as mermaid-live-editor-builder
|
||||
COPY --chown=node:node . /home
|
||||
WORKDIR /home
|
||||
RUN yarn install
|
||||
|
||||
+1
-5
@@ -8,10 +8,6 @@ export default defineConfig({
|
||||
snapshotFileName: './cypress/snapshots.js',
|
||||
defaultCommandTimeout: 16000,
|
||||
requestTimeout: 16000,
|
||||
retries: {
|
||||
runMode: 4,
|
||||
openMode: 0
|
||||
},
|
||||
e2e: {
|
||||
setupNodeEvents(on, config) {
|
||||
on('task', {
|
||||
@@ -30,6 +26,6 @@ export default defineConfig({
|
||||
});
|
||||
},
|
||||
baseUrl: 'http://localhost:3000',
|
||||
specPattern: 'cypress/e2e/**/*.spec.ts'
|
||||
specPattern: 'cypress/e2e/**/*.{js,jsx,ts,tsx}'
|
||||
}
|
||||
});
|
||||
|
||||
+17
-11
@@ -1,4 +1,3 @@
|
||||
import { verifyFileSize } from './util';
|
||||
describe('Check actions', () => {
|
||||
beforeEach(() => {
|
||||
cy.clearLocalStorage();
|
||||
@@ -25,23 +24,30 @@ describe('Check actions', () => {
|
||||
});
|
||||
|
||||
it('should download png and svg', () => {
|
||||
cy.clock(new Date(2022, 0, 1).getTime());
|
||||
const now = new Date(2022, 0, 1).getTime();
|
||||
cy.clock(now);
|
||||
const downloadsFolder = Cypress.config('downloadsFolder');
|
||||
|
||||
cy.get(`#downloadPNG`).click();
|
||||
verifyFileSize('diagram', 'png', 21_000);
|
||||
const verifyFileSize = (fileType: string, size: number) => {
|
||||
cy.get(`#download${fileType.toUpperCase()}`).click();
|
||||
const fileName = `mermaid-diagram-2022-01-01-000000.${fileType}`;
|
||||
const filePath = `${downloadsFolder}/${fileName}`;
|
||||
cy.verifyDownload(fileName);
|
||||
cy.readFile(filePath, null, {
|
||||
log: false
|
||||
}).then((buffer) => expect((buffer as ArrayBuffer).byteLength).to.be.gt(size));
|
||||
cy.task('deleteFile', filePath);
|
||||
};
|
||||
|
||||
cy.get(`#downloadSVG`).click();
|
||||
verifyFileSize('diagram', 'svg', 10_000);
|
||||
verifyFileSize('png', 21_000);
|
||||
verifyFileSize('svg', 11_000);
|
||||
|
||||
// Verify downloaded file is different for different diagrams
|
||||
cy.contains('Sample Diagrams').click();
|
||||
cy.contains('ER Diagram').click();
|
||||
|
||||
cy.get(`#downloadPNG`).click();
|
||||
verifyFileSize('diagram', 'png', 46_000);
|
||||
|
||||
cy.get(`#downloadSVG`).click();
|
||||
verifyFileSize('diagram', 'svg', 12_000);
|
||||
verifyFileSize('png', 46_000);
|
||||
verifyFileSize('svg', 12_000);
|
||||
|
||||
cy.clock().invoke('restore');
|
||||
});
|
||||
|
||||
@@ -1,6 +1,13 @@
|
||||
import { getEditor, cmd } from './util';
|
||||
|
||||
describe('Auto sync tests', () => {
|
||||
const cmd = Cypress.platform === 'darwin' ? 'meta' : 'ctrl';
|
||||
const getEditor = ({ bottom = true, newline = false } = {}) =>
|
||||
cy
|
||||
.get('#editor textarea:first')
|
||||
.click()
|
||||
.focused()
|
||||
.type(`${bottom ? '{pageDown}' : `{${cmd}}`}`)
|
||||
.type(`${newline ? '{enter}' : `{${cmd}}`}`);
|
||||
|
||||
beforeEach(() => {
|
||||
cy.clearLocalStorage();
|
||||
cy.visit('/');
|
||||
@@ -14,15 +21,6 @@ describe('Auto sync tests', () => {
|
||||
cy.getLocalStorage('codeStore').snapshot();
|
||||
});
|
||||
|
||||
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');
|
||||
cy.get('#view').should('have.class', 'outOfSync');
|
||||
getEditor().type(`${cmd}{enter}`);
|
||||
cy.get('#view').should('not.have.class', 'outOfSync');
|
||||
});
|
||||
|
||||
it('should show/hide sync button with auto sync', () => {
|
||||
cy.get('[data-cy=sync]').should('not.exist');
|
||||
cy.contains('Auto sync').click();
|
||||
@@ -45,10 +43,10 @@ describe('Auto sync tests', () => {
|
||||
});
|
||||
|
||||
it('supports commenting code out/in', () => {
|
||||
getEditor().type(`{uparrow}${cmd}/`);
|
||||
getEditor().type(`{uparrow}{${cmd}}/`);
|
||||
cy.get('#view').contains('Car').should('not.exist');
|
||||
|
||||
getEditor().type(`{uparrow}${cmd}/`);
|
||||
getEditor().type(`{uparrow}{${cmd}}/`);
|
||||
cy.get('#view').contains('Car').should('exist');
|
||||
});
|
||||
|
||||
@@ -66,17 +64,3 @@ describe('Auto sync tests', () => {
|
||||
.should('exist');
|
||||
});
|
||||
});
|
||||
|
||||
describe.only('Pan and Zoom', () => {
|
||||
beforeEach(() => {
|
||||
cy.clearLocalStorage();
|
||||
cy.visit('/');
|
||||
});
|
||||
it('should toggle pan and zoom', () => {
|
||||
cy.get('#svg-pan-zoom-reset-pan-zoom').should('not.exist');
|
||||
cy.contains('Pan & Zoom').click();
|
||||
cy.get('#svg-pan-zoom-reset-pan-zoom').should('exist');
|
||||
cy.contains('Pan & Zoom').click();
|
||||
cy.get('#svg-pan-zoom-reset-pan-zoom').should('not.exist');
|
||||
});
|
||||
});
|
||||
|
||||
@@ -1,47 +1,12 @@
|
||||
import { getEditor, verifyFileSnapshot } from './util';
|
||||
|
||||
describe('Save History', () => {
|
||||
beforeEach(() => {
|
||||
cy.clock(new Date(2022, 0, 1).getTime());
|
||||
cy.clock();
|
||||
cy.clearLocalStorage();
|
||||
cy.visit('/edit');
|
||||
|
||||
cy.contains('Actions').click();
|
||||
cy.contains('History').click();
|
||||
});
|
||||
|
||||
afterEach(() => {
|
||||
cy.clock().invoke('restore');
|
||||
});
|
||||
|
||||
it('should load history from localstorage', () => {
|
||||
cy.setLocalStorage(
|
||||
'manualHistoryStore',
|
||||
'[{"state":{"code":"graph TD\\n A[Halloween] -->|Get money| B(Go shopping)","mermaid":"{\\n \\"theme\\": \\"dark\\"\\n}","autoSync":true,"updateDiagram":false},"time":0,"type":"manual","id":"d7ea820e-21dd-418a-b984-fd58acde09df","name":"hollow-art"},{"state":{"code":"graph TD\\n A[Christmas] -->|Get money| B(Go shopping)","mermaid":"{\\n \\"theme\\": \\"dark\\"\\n}","autoSync":true,"updateDiagram":true},"time":0,"type":"manual","id":"b749ffc6-522b-4a44-86cf-7c1ffc3146b3","name":"helpful-ocean"}]'
|
||||
);
|
||||
cy.setLocalStorage(
|
||||
'autoHistoryStore',
|
||||
'[{"state":{"code":"graph TD\\n A[New Year] -->|Get money| B(Go shopping)","mermaid":"{\\n \\"theme\\": \\"dark\\"\\n}","autoSync":true,"updateDiagram":false},"time":0,"type":"auto","id":"69ea820e-522b-4a44-86cf-fd58acde09df","name":"barking-dog"},{"state":{"code":"graph TD\\n A[Christmas] -->|Get money| B(Go shopping)","mermaid":"{\\n \\"theme\\": \\"dark\\"\\n}","autoSync":true,"updateDiagram":true},"time":0,"type":"manual","id":"x749ffc6-21dd-418a-b984-7c1ffc3146b3","name":"needy-mosquito"}]'
|
||||
);
|
||||
cy.reload();
|
||||
cy.contains('Actions').click();
|
||||
cy.contains('History').click();
|
||||
cy.get('#historyList').find('li').should('have.length', 2);
|
||||
cy.get('#historyList').find('No items in History').should('not.exist');
|
||||
cy.get('#historyList').contains('helpful-ocean');
|
||||
cy.get('#historyList').contains('hollow-art');
|
||||
cy.contains('Restore').click();
|
||||
cy.contains('Halloween');
|
||||
cy.contains('Timeline').click();
|
||||
|
||||
cy.get('#historyList').find('li').should('have.length', 2);
|
||||
cy.get('#historyList').find('No items in History').should('not.exist');
|
||||
cy.get('#historyList').contains('needy-mosquito');
|
||||
cy.get('#historyList').contains('barking-dog');
|
||||
cy.contains('Restore').click();
|
||||
cy.contains('New Year');
|
||||
});
|
||||
|
||||
it('should save when clicked', () => {
|
||||
cy.get('#historyList').find('li').should('have.length', 0);
|
||||
cy.get('#historyList').contains('No items in History');
|
||||
@@ -53,14 +18,14 @@ describe('Save History', () => {
|
||||
expect(str).to.equal('State already saved.');
|
||||
});
|
||||
cy.on('window:confirm', () => true);
|
||||
getEditor().type(' C --> HistoryTest');
|
||||
cy.get('#editor').type(' 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');
|
||||
cy.get('#editor').type(' 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');
|
||||
@@ -70,7 +35,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');
|
||||
cy.get('#editor').type(' C --> HistoryTest');
|
||||
cy.get('#saveHistory').click();
|
||||
cy.get('#editor').type('ing');
|
||||
cy.get('#clearHistory').click();
|
||||
@@ -83,7 +48,7 @@ describe('Save History', () => {
|
||||
|
||||
// TODO: Fix #639
|
||||
xit('should auto save history', () => {
|
||||
getEditor().type(' C --> HistoryTest');
|
||||
cy.get('#editor').type(' C --> HistoryTest');
|
||||
cy.tick(70000);
|
||||
cy.contains('Timeline').click();
|
||||
cy.get('#historyList').find('li').should('have.length', 1);
|
||||
@@ -96,10 +61,4 @@ describe('Save History', () => {
|
||||
}
|
||||
cy.get('#historyList').find('li').should('have.length', 30);
|
||||
});
|
||||
|
||||
it('should download history', () => {
|
||||
cy.get('#saveHistory').click();
|
||||
cy.get(`#downloadHistory`).click();
|
||||
verifyFileSnapshot('history', 'json', 'A[Christmas] -->|Get money| B(Go shopping)');
|
||||
});
|
||||
});
|
||||
|
||||
@@ -3,9 +3,9 @@ import { toBase64 } from 'js-base64';
|
||||
describe('Site Loads', () => {
|
||||
beforeEach(() => {
|
||||
cy.clearLocalStorage();
|
||||
cy.visit('/');
|
||||
});
|
||||
it('Check Home page load', () => {
|
||||
cy.visit('/');
|
||||
cy.url().should('include', '/edit');
|
||||
cy.contains('History').click();
|
||||
cy.getLocalStorage('codeStore').snapshot();
|
||||
@@ -15,7 +15,12 @@ describe('Site Loads', () => {
|
||||
cy.visit(
|
||||
'/#/edit/eyJjb2RlIjoiZ3JhcGggVERcbiAgICBBW0NocmlzdG1hc10gLS0-fEdldCBtb25leXwgQihHbyBzaG9wcGluZylcbiAgICBCIC0tPiBDe0xldCBtZSB0aGlua31cbiAgICBDIC0tPnxPbmV8IERbTGFwdG9wXVxuICAgIEMgLS0-fFR3b3wgRVtpUGhvbmVdXG4gICAgQyAtLT58VGhyZWV8IEZbZmE6ZmEtY2FyIENhcl0iLCJtZXJtYWlkIjp7InRoZW1lIjoiZGVmYXVsdCJ9LCJ1cGRhdGVFZGl0b3IiOmZhbHNlfQ'
|
||||
);
|
||||
cy.url().should('include', '/edit#pako:eNp');
|
||||
cy.url().should(
|
||||
'include',
|
||||
'/edit#pako:eNpVkM1qw0AMhF9F6NRC_AI-FBo7zSXQQHLz-iC8cnZJ9oe1TAm2373rmkKrk9B8MwyasAuascRbomjgWisPed6byiQ7iKOhhaJ4m48s4ILn5wz7l2OAwYQYrb-9bvx-haCaTivGIMb6-7JJ1Y__0_MMdXOiKCG2f5XrV5jh0NizyfH_FZM4uz6ansqeio4SVJRa3KHj5MjqXHtaDQrFsGOFZV419zQ-RKHyS0bHqEn4oK2EhDnmMfAOaZRwefoOS0kj_0K1pfwFtx2XbzAdW4g'
|
||||
);
|
||||
cy.contains('History').click();
|
||||
cy.getLocalStorage('codeStore').snapshot();
|
||||
});
|
||||
|
||||
it('should load sample diagrams when clicked', () => {
|
||||
@@ -58,7 +63,7 @@ describe('Site Loads', () => {
|
||||
// Disabled temporarily. Should be enabled after the issue is fixed in Mermaid.
|
||||
// it('should prevent setting the "securityLevel" option via URL', () => {
|
||||
// const b64State = toBase64(
|
||||
// `{"code":"graph TD\\nA[\\"<img src='https://via.placeholder.com/64' width=64 />\\"]","mermaid":"{\\"securityLevel\\": \\"loose\\", \\"theme\\": \\"forest\\"}","autoSync":true,"updateDiagram":true}`,
|
||||
// `{"code":"graph TD\\nA[\\"<img src='https://via.placeholder.com/64' width=64 />\\"]","mermaid":"{\\"securityLevel\\": \\"loose\\", \\"theme\\": \\"forest\\"}","updateEditor":true,"autoSync":true,"updateDiagram":true}`,
|
||||
// true
|
||||
// );
|
||||
// cy.on('window:confirm', () => true);
|
||||
@@ -73,7 +78,7 @@ describe('Site Loads', () => {
|
||||
|
||||
it('should allow persisting "securityLevel" using confirm dialogue', () => {
|
||||
const b64State = toBase64(
|
||||
`{"code":"graph TD\\nA[\\"<img src='https://dummyimage.com/64' width=64/>\\"]","mermaid":"{\\"securityLevel\\": \\"loose\\", \\"theme\\": \\"forest\\"}","autoSync":true,"updateDiagram":true}`,
|
||||
`{"code":"graph TD\\nA[\\"<img src='https://via.placeholder.com/64' width=64/>\\"]","mermaid":"{\\"securityLevel\\": \\"loose\\", \\"theme\\": \\"forest\\"}","updateEditor":true,"autoSync":true,"updateDiagram":true}`,
|
||||
true
|
||||
);
|
||||
cy.on('window:confirm', () => false);
|
||||
@@ -86,7 +91,6 @@ describe('Site Loads', () => {
|
||||
|
||||
it('should show troubleshooting steps if loading fails', () => {
|
||||
cy.visit('/#/edit/eyJjb2RlIjoiZ3JhcGggVERcbiAg');
|
||||
cy.reload(true);
|
||||
cy.contains('Please Click here to Raise an issue in github.');
|
||||
});
|
||||
|
||||
@@ -113,6 +117,7 @@ describe('Site Loads', () => {
|
||||
cy.visit(
|
||||
'/edit#pako:eNptkU1PwzAMhv9K5BOI9Q9EXBDbJA477YYqITcxndV8QD40weh_Jy1rGR0-OY_tV2_sEyivCSQogzGuGduAtnaixINji0bcf1WVWGfVXdMtx8M1faYm4B8sxR27JLClJd6nwK4VLTlN4bI4jMQd2pLe3C4KFhNNcLQ92jv9ADGLNoTdozc-zIV4ZDsNlud7RtVN7_5Sb_jYrFcN3iN_0pPbEqUZK3QbTP_Ojyv4NdR4bwTHlyMbPcOQ3WJ2CliBpWCRdbnLqFJDOpClGmRJNYauhtr1pS-_6bKMjebkA8hXNJFWgDn5_YdTIFPINDWdb3vu6r8BaWOZRQ'
|
||||
);
|
||||
cy.reload();
|
||||
cy.contains('Animal');
|
||||
});
|
||||
});
|
||||
|
||||
@@ -1,41 +0,0 @@
|
||||
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}`);
|
||||
|
||||
const downloadsFolder = Cypress.config('downloadsFolder');
|
||||
|
||||
export const verifyFileSize = (
|
||||
fileType: 'history' | 'diagram',
|
||||
extension: string,
|
||||
size: number
|
||||
) => {
|
||||
const fileName = `mermaid-${fileType}-2022-01-01-000000.${extension}`;
|
||||
const filePath = `${downloadsFolder}/${fileName}`;
|
||||
cy.verifyDownload(fileName);
|
||||
cy.readFile(filePath, null, {
|
||||
log: false
|
||||
}).then((buffer) => expect((buffer as ArrayBuffer).byteLength).to.be.gt(size));
|
||||
cy.task('deleteFile', filePath);
|
||||
};
|
||||
|
||||
export const verifyFileSnapshot = (
|
||||
fileType: 'history' | 'diagram',
|
||||
extension: string,
|
||||
content: string
|
||||
) => {
|
||||
const fileName = `mermaid-${fileType}-2022-01-01-000000.${extension}`;
|
||||
const filePath = `${downloadsFolder}/${fileName}`;
|
||||
cy.verifyDownload(fileName);
|
||||
cy.readFile(filePath, null, {
|
||||
log: false
|
||||
}).then((buffer) =>
|
||||
expect(new TextDecoder('utf-8').decode(buffer as ArrayBuffer)).to.contain(content)
|
||||
);
|
||||
cy.task('deleteFile', filePath);
|
||||
};
|
||||
@@ -1,28 +1,28 @@
|
||||
module.exports = {
|
||||
"Site Loads": {
|
||||
"Check Home page load": {
|
||||
"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 \",\"mermaid\":\"{\\n \\\"theme\\\": \\\"default\\\"\\n}\",\"autoSync\":true,\"updateDiagram\":true}"
|
||||
"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 \",\"mermaid\":\"{\\n \\\"theme\\\": \\\"default\\\"\\n}\",\"updateEditor\":true,\"autoSync\":true,\"updateDiagram\":true}"
|
||||
},
|
||||
"Check Redirect from old URL": {
|
||||
"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]\",\"mermaid\":\"{\\n \\\"theme\\\": \\\"default\\\"\\n}\",\"autoSync\":true,\"updateDiagram\":true}"
|
||||
"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]\",\"mermaid\":\"{\\n \\\"theme\\\": \\\"default\\\"\\n}\",\"updateEditor\":false,\"autoSync\":true,\"updateDiagram\":true}"
|
||||
},
|
||||
"should load diagram from gist": {
|
||||
"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\":\"gist\",\"config\":{\"url\":\"https://gist.github.com/sidharthv96/6268a23e673a533dcb198f241fd7012a\"}}}"
|
||||
"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\":\"gist\",\"config\":{\"url\":\"https://gist.github.com/sidharthv96/6268a23e673a533dcb198f241fd7012a\"}}}"
|
||||
},
|
||||
"should load diagram from gist revision": {
|
||||
"1": "{\"code\":\"graph TD\\n A[Party] -->|Get money| B(Go shopping)\\n \",\"mermaid\":\"{\\n \\\"theme\\\": \\\"forest\\\",\\n \\\"test\\\": \\\"hello\\\"\\n}\",\"autoSync\":true,\"updateDiagram\":true,\"loader\":{\"type\":\"gist\",\"config\":{\"url\":\"https://gist.github.com/sidharthv96/6268a23e673a533dcb198f241fd7012a/ec9b4ab0e41e4ff6287326cd3cb47affd7851e19\"}}}"
|
||||
"1": "{\"code\":\"graph TD\\n A[Party] -->|Get money| B(Go shopping)\\n \",\"mermaid\":\"{\\n \\\"theme\\\": \\\"forest\\\",\\n \\\"test\\\": \\\"hello\\\"\\n}\",\"updateEditor\":false,\"autoSync\":true,\"updateDiagram\":true,\"loader\":{\"type\":\"gist\",\"config\":{\"url\":\"https://gist.github.com/sidharthv96/6268a23e673a533dcb198f241fd7012a/ec9b4ab0e41e4ff6287326cd3cb47affd7851e19\"}}}"
|
||||
},
|
||||
"should load diagram from raw files": {
|
||||
"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\"}}}"
|
||||
"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": "10.6.0",
|
||||
"__version": "10.3.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}\",\"autoSync\":false,\"updateDiagram\":false}"
|
||||
"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}"
|
||||
},
|
||||
"should not dim diagram when code is in sync": {
|
||||
"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 --> Testing\",\"mermaid\":\"{\\n \\\"theme\\\": \\\"default\\\"\\n}\",\"autoSync\":true,\"updateDiagram\":false}"
|
||||
"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 --> Testing\",\"mermaid\":\"{\\n \\\"theme\\\": \\\"default\\\"\\n}\",\"updateEditor\":false,\"autoSync\":true,\"updateDiagram\":false}"
|
||||
}
|
||||
},
|
||||
"Test themes": {
|
||||
|
||||
+28
-32
@@ -4,15 +4,14 @@
|
||||
"type": "module",
|
||||
"license": "MIT",
|
||||
"scripts": {
|
||||
"dev": "vite dev",
|
||||
"dev:test": "MERMAID_DISABLE_DEBOUNCE=true yarn dev",
|
||||
"dev": "vite dev --host 0.0.0.0",
|
||||
"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=. .",
|
||||
"pre-commit": "lint-staged",
|
||||
"postinstall": "husky install; svelte-kit sync",
|
||||
"postinstall": "husky install; cypress cache prune; svelte-kit sync",
|
||||
"test:unit": "vitest",
|
||||
"test:ui": "vitest --ui",
|
||||
"test:coverage": "vitest run --coverage",
|
||||
@@ -22,62 +21,59 @@
|
||||
},
|
||||
"devDependencies": {
|
||||
"@cypress/snapshot": "2.1.7",
|
||||
"@sveltejs/adapter-static": "1.0.0-next.41",
|
||||
"@sveltejs/kit": "1.0.0-next.463",
|
||||
"@testing-library/jest-dom": "5.16.5",
|
||||
"@testing-library/svelte": "3.2.1",
|
||||
"@sveltejs/adapter-static": "1.0.0-next.38",
|
||||
"@sveltejs/kit": "1.0.0-next.390",
|
||||
"@testing-library/jest-dom": "5.16.4",
|
||||
"@testing-library/svelte": "3.1.3",
|
||||
"@types/mermaid": "8.2.9",
|
||||
"@types/pako": "1.0.3",
|
||||
"@types/uuid": "^8.3.4",
|
||||
"@typescript-eslint/eslint-plugin": "5.35.1",
|
||||
"@typescript-eslint/parser": "5.36.1",
|
||||
"@vitest/ui": "0.22.1",
|
||||
"autoprefixer": "10.4.8",
|
||||
"@typescript-eslint/eslint-plugin": "5.30.7",
|
||||
"@typescript-eslint/parser": "5.30.7",
|
||||
"@vitest/ui": "0.18.1",
|
||||
"autoprefixer": "10.4.7",
|
||||
"c8": "7.12.0",
|
||||
"chai": "4.3.6",
|
||||
"cssnano": "5.1.13",
|
||||
"cssnano": "5.1.12",
|
||||
"cy-verify-downloads": "0.1.8",
|
||||
"cypress": "10.7.0",
|
||||
"cypress-localstorage-commands": "2.2.0",
|
||||
"eslint": "8.23.0",
|
||||
"cypress": "10.3.1",
|
||||
"cypress-localstorage-commands": "2.1.0",
|
||||
"eslint": "8.20.0",
|
||||
"eslint-config-prettier": "8.5.0",
|
||||
"eslint-plugin-cypress": "2.12.1",
|
||||
"eslint-plugin-es": "4.1.0",
|
||||
"eslint-plugin-postcss-modules": "2.0.0",
|
||||
"eslint-plugin-svelte3": "4.0.0",
|
||||
"eslint-plugin-tailwindcss": "3.6.1",
|
||||
"eslint-plugin-tailwindcss": "3.6.0",
|
||||
"eslint-plugin-vitest": "0.0.8",
|
||||
"esserializer": "^1.3.2",
|
||||
"husky": "8.0.1",
|
||||
"jsdom": "20.0.0",
|
||||
"lint-staged": "13.0.3",
|
||||
"node-html-parser": "5.4.2",
|
||||
"postcss": "8.4.16",
|
||||
"node-html-parser": "5.3.3",
|
||||
"postcss": "8.4.14",
|
||||
"postcss-load-config": "4.0.1",
|
||||
"prettier": "2.7.1",
|
||||
"prettier-plugin-svelte": "2.7.0",
|
||||
"svelte": "3.49.0",
|
||||
"svelte-preprocess": "4.10.7",
|
||||
"tailwindcss": "3.1.8",
|
||||
"tailwindcss": "3.1.6",
|
||||
"tslib": "2.4.0",
|
||||
"typescript": "4.8.2",
|
||||
"vite": "3.1.0-beta.2",
|
||||
"vitest": "0.22.1"
|
||||
"typescript": "4.7.4",
|
||||
"vite": "^3.0.2",
|
||||
"vitest": "0.18.1",
|
||||
"vitest-svelte-kit": "0.0.6"
|
||||
},
|
||||
"dependencies": {
|
||||
"@analytics/google-analytics": "1.0.3",
|
||||
"@analytics/google-analytics": "1.0.2",
|
||||
"@macfja/svelte-persistent-store": "1.3.0",
|
||||
"analytics": "0.8.1",
|
||||
"analytics-plugin-plausible": "^0.0.6",
|
||||
"daisyui": "2.24.0",
|
||||
"daisyui": "2.19.1",
|
||||
"js-base64": "3.7.2",
|
||||
"mermaid": "9.1.6",
|
||||
"mermaid": "9.1.3",
|
||||
"moment": "2.29.4",
|
||||
"monaco-editor": "0.34.0",
|
||||
"monaco-editor": "0.33.0",
|
||||
"monaco-mermaid": "1.0.6",
|
||||
"pako": "2.0.4",
|
||||
"random-word-slugs": "0.1.6",
|
||||
"svg-pan-zoom": "^3.6.1",
|
||||
"uuid": "^8.3.2"
|
||||
"random-word-slugs": "0.1.6"
|
||||
},
|
||||
"lint-staged": {
|
||||
"*.{ts,svelte,js,css,md,json}": [
|
||||
|
||||
+9
-9
@@ -21,30 +21,30 @@
|
||||
referrerpolicy="no-referrer" />
|
||||
<link
|
||||
rel="stylesheet"
|
||||
href="https://cdnjs.cloudflare.com/ajax/libs/monaco-editor/0.34.0/min/vs/editor/editor.main.min.css"
|
||||
integrity="sha512-iQEIc0rsSDujsfjtD+lfyJ1W23Bh/lbgriubKDAym6VlEIDRj9rrbSIyJRyshOrl8s0yRcQ0+gyrZfSLyjJGWQ=="
|
||||
href="https://cdnjs.cloudflare.com/ajax/libs/monaco-editor/0.33.0/min/vs/editor/editor.main.min.css"
|
||||
integrity="sha512-633RnebxsjmF57QUx9c85T6XILSAuJFzKnN5dVsUQ3nsc7c0bW649fCj1Z8ZkAbo5vAHnKZIsGqDokJRiABupA=="
|
||||
crossorigin="anonymous"
|
||||
referrerpolicy="no-referrer" />
|
||||
<script>
|
||||
var require = {
|
||||
paths: {
|
||||
vs: "https://cdnjs.cloudflare.com/ajax/libs/monaco-editor/0.34.0/min/vs",
|
||||
vs: "https://cdnjs.cloudflare.com/ajax/libs/monaco-editor/0.33.0/min/vs",
|
||||
},
|
||||
};
|
||||
</script>
|
||||
<script
|
||||
src="https://cdnjs.cloudflare.com/ajax/libs/monaco-editor/0.34.0/min/vs/loader.min.js"
|
||||
integrity="sha512-6bIYsGqvLpAiEBXPdRQeFf5cueeBECtAKJjIHer3BhBZNTV3WLcLA8Tm3pDfxUwTMIS+kAZwTUvJ1IrMdX8C5w=="
|
||||
src="https://cdnjs.cloudflare.com/ajax/libs/monaco-editor/0.33.0/min/vs/loader.min.js"
|
||||
integrity="sha512-O9SYDgWAM3bEzit1z6mkFd+dxKUplO/oB8UwYGAkg2Zy/WzDUQ2mYA/ysk3c0CxiXAN4u8T9JeZ0Ahk2Jj/33Q=="
|
||||
crossorigin="anonymous"
|
||||
referrerpolicy="no-referrer"></script>
|
||||
<script
|
||||
src="https://cdnjs.cloudflare.com/ajax/libs/monaco-editor/0.34.0/min/vs/editor/editor.main.nls.min.js"
|
||||
integrity="sha512-CCv+DKWw+yZhxf4Z+ExT6HC5G+3S45TeMTYcJyYbdrv4BpK2vyALJ4FoVR/KGWDIPu7w4tNCOC9MJQIkYPR5FA=="
|
||||
src="https://cdnjs.cloudflare.com/ajax/libs/monaco-editor/0.33.0/min/vs/editor/editor.main.nls.min.js"
|
||||
integrity="sha512-TShm8t61Zg9dutpJGD4KMy+VO4yVW0pgvHfeFjovzp+kBcSpblO7mBGSbL2ncApu0FfiqHiygwcef65+qiLRxg=="
|
||||
crossorigin="anonymous"
|
||||
referrerpolicy="no-referrer"></script>
|
||||
<script
|
||||
src="https://cdnjs.cloudflare.com/ajax/libs/monaco-editor/0.34.0/min/vs/editor/editor.main.js"
|
||||
integrity="sha512-TTPQbVI87mnVMV+1KbkKJ8vdQ4QqqbKyuTtJ9wQD8CqnwQLSQgXH7MWOQ88VO7pRzxWhqI1vYDeEV651sAH4ig=="
|
||||
src="https://cdnjs.cloudflare.com/ajax/libs/monaco-editor/0.33.0/min/vs/editor/editor.main.js"
|
||||
integrity="sha512-7p8WMGQI2IAHj9dn6uYYQYGsHNlpMp8Wv4Q1M0SNxM+8Rd16sHL7gXmktieLjh1iyWl41doD6NOiId7e+XCw6Q=="
|
||||
crossorigin="anonymous"
|
||||
referrerpolicy="no-referrer"></script>
|
||||
%sveltekit.head%
|
||||
|
||||
+4
-1
@@ -1,6 +1,9 @@
|
||||
import type { Handle } from '@sveltejs/kit';
|
||||
|
||||
export const handle: Handle = async ({ event, resolve }) => {
|
||||
const response = await resolve(event, {});
|
||||
const response = await resolve(event, {
|
||||
ssr: false
|
||||
});
|
||||
|
||||
return response;
|
||||
};
|
||||
|
||||
@@ -1,10 +1,10 @@
|
||||
<script lang="ts">
|
||||
import { browser } from '$app/environment';
|
||||
import { browser } from '$app/env';
|
||||
|
||||
import Card from '$lib/components/card/card.svelte';
|
||||
import { krokiRendererUrl, rendererUrl } from '$lib/util/env';
|
||||
import { pakoSerde } from '$lib/util/serde';
|
||||
import { stateStore } from '$lib/util/state';
|
||||
import { logEvent } from '$lib/util/stats';
|
||||
import { toBase64 } from 'js-base64';
|
||||
import moment from 'moment';
|
||||
|
||||
@@ -115,27 +115,19 @@
|
||||
|
||||
const onCopyClipboard = (event: Event) => {
|
||||
exportImage(event, clipboardCopy);
|
||||
void logEvent('copyClipboard');
|
||||
};
|
||||
|
||||
const onDownloadPNG = (event: Event) => {
|
||||
exportImage(event, downloadImage);
|
||||
void logEvent('download', {
|
||||
type: 'png'
|
||||
});
|
||||
};
|
||||
|
||||
const onDownloadSVG = () => {
|
||||
simulateDownload(getFileName('svg'), `data:image/svg+xml;base64,${getBase64SVG()}`);
|
||||
void logEvent('download', {
|
||||
type: 'svg'
|
||||
});
|
||||
};
|
||||
|
||||
const onCopyMarkdown = () => {
|
||||
(document.getElementById('markdown') as HTMLInputElement).select();
|
||||
document.execCommand('Copy');
|
||||
void logEvent('copyMarkdown');
|
||||
};
|
||||
|
||||
let gistURL = '';
|
||||
@@ -151,7 +143,6 @@
|
||||
alert('Please enter a Gist URL first');
|
||||
}
|
||||
window.location.href = `${window.location.pathname}?gist=${gistURL}`;
|
||||
void logEvent('loadGist');
|
||||
};
|
||||
|
||||
let iUrl: string;
|
||||
|
||||
@@ -5,7 +5,6 @@
|
||||
export let isCloseable = true;
|
||||
export let isOpen = true;
|
||||
export let tabs: Tab[] = [];
|
||||
export let activeTabID: string = '';
|
||||
export let title: string;
|
||||
$: isOpen = isCloseable ? isOpen : true;
|
||||
$: isTabsShown = isOpen && tabs.length > 0;
|
||||
@@ -16,7 +15,7 @@
|
||||
class="bg-primary p-2 {isTabsShown ? 'pb-0' : ''} flex-none cursor-pointer"
|
||||
on:click={() => (isOpen = !isOpen)}>
|
||||
<div class="flex justify-between">
|
||||
<Tabs on:select {tabs} bind:isOpen {title} {isCloseable} {activeTabID} />
|
||||
<Tabs on:select {tabs} bind:isOpen {title} {isCloseable} />
|
||||
<div class="flex gap-x-4 items-center {isTabsShown ? '-mt-2' : ''}">
|
||||
<slot name="actions" />
|
||||
</div>
|
||||
|
||||
@@ -3,14 +3,12 @@
|
||||
import { createEventDispatcher } from 'svelte';
|
||||
import { fade } from 'svelte/transition';
|
||||
export let isCloseable = true;
|
||||
export let tabs: Tab[];
|
||||
export let tabs: Tab[] = [];
|
||||
export let title: string;
|
||||
export let isOpen = false;
|
||||
export let activeTabID: string;
|
||||
|
||||
if (!activeTabID && tabs.length > 0) {
|
||||
activeTabID = tabs[0].id;
|
||||
}
|
||||
$: activeTabID = tabs[0]?.id;
|
||||
|
||||
const dispatch = createEventDispatcher<TabEvents>();
|
||||
const toggleTabs = (tab: Tab) => {
|
||||
activeTabID = tab.id;
|
||||
|
||||
@@ -1,106 +1,70 @@
|
||||
<script lang="ts">
|
||||
import type { EditorMode } from '$lib/types';
|
||||
import { stateStore, updateCode, updateConfig } from '$lib/util/state';
|
||||
import type { EditorEvents } from '$lib/types';
|
||||
import { stateStore } from '$lib/util/state';
|
||||
import { themeStore } from '$lib/util/theme';
|
||||
import { syncDiagram } from '$lib/util/util';
|
||||
import type monaco from 'monaco-editor';
|
||||
import { onMount } from 'svelte';
|
||||
import { createEventDispatcher, onMount } from 'svelte';
|
||||
import initEditor from 'monaco-mermaid';
|
||||
import { logEvent } from '$lib/util/stats';
|
||||
import { debounceEnabled } from '$lib/util/env';
|
||||
|
||||
let divEl: HTMLDivElement = null;
|
||||
let editor: monaco.editor.IStandaloneCodeEditor;
|
||||
let Monaco: typeof monaco;
|
||||
let editorOptions: monaco.editor.IStandaloneEditorConstructionOptions = {
|
||||
let Monaco;
|
||||
|
||||
export let text: string;
|
||||
export let language: string;
|
||||
export let editorOptions: monaco.editor.IStandaloneEditorConstructionOptions = {
|
||||
value: text,
|
||||
language: language,
|
||||
minimap: {
|
||||
enabled: false
|
||||
},
|
||||
theme: 'mermaid',
|
||||
overviewRulerLanes: 0
|
||||
};
|
||||
let text = '';
|
||||
|
||||
stateStore.subscribe(({ errorMarkers, editorMode, code, mermaid }) => {
|
||||
if (!editor) return;
|
||||
|
||||
// Update editor text if it's different
|
||||
const newText = editorMode === 'code' ? code : mermaid;
|
||||
if (newText !== text) {
|
||||
editor.setValue(newText);
|
||||
text = newText;
|
||||
let oldText = text;
|
||||
$: editor && Monaco?.editor.setModelLanguage(editor.getModel(), language);
|
||||
$: {
|
||||
if (text !== oldText) {
|
||||
if ($stateStore.updateEditor) {
|
||||
editor?.setValue(text);
|
||||
}
|
||||
oldText = text;
|
||||
}
|
||||
|
||||
// Update editor mode if it's different
|
||||
const language = editorMode === 'code' ? 'mermaid' : 'json';
|
||||
if (editor.getModel().getLanguageId() !== language) {
|
||||
Monaco?.editor.setModelLanguage(editor.getModel(), language);
|
||||
}
|
||||
|
||||
// Display errors if present
|
||||
if (errorMarkers.length > 0) {
|
||||
Monaco?.editor.setModelMarkers(editor.getModel(), 'test', errorMarkers);
|
||||
}
|
||||
});
|
||||
editor && Monaco?.editor.setModelMarkers(editor.getModel(), 'test', $stateStore.errorMarkers);
|
||||
}
|
||||
|
||||
themeStore.subscribe(({ isDark }) => {
|
||||
editor && Monaco?.editor.setTheme(isDark ? 'mermaid-dark' : 'mermaid');
|
||||
});
|
||||
|
||||
const handleUpdate = (text: string, mode: EditorMode) => {
|
||||
if (mode === 'code') {
|
||||
updateCode(text);
|
||||
} else {
|
||||
updateConfig(text);
|
||||
}
|
||||
};
|
||||
|
||||
// Debounce state updates to avoid performance issues
|
||||
let debounce: { [key: string]: number } = {};
|
||||
const updateHandler = (newText: string) => {
|
||||
text = newText;
|
||||
const mode = $stateStore.editorMode;
|
||||
if (debounceEnabled) {
|
||||
clearTimeout(debounce[mode]);
|
||||
debounce[mode] = window.setTimeout(() => {
|
||||
handleUpdate(text, mode);
|
||||
}, 300);
|
||||
} else {
|
||||
handleUpdate(text, mode);
|
||||
}
|
||||
};
|
||||
|
||||
const dispatch = createEventDispatcher<EditorEvents>();
|
||||
const loadMonaco = async () => {
|
||||
let i = 0;
|
||||
while (i++ < 500) {
|
||||
while (i++ < 10) {
|
||||
try {
|
||||
// @ts-ignore : This is a hack to handle a svelte-kit error when importing monaco.
|
||||
Monaco = window.monaco;
|
||||
Monaco = monaco;
|
||||
return;
|
||||
} catch {
|
||||
await new Promise((r) => setTimeout(r, 100));
|
||||
await new Promise((r) => setTimeout(r, 500));
|
||||
}
|
||||
}
|
||||
alert('Loading Monaco Editor failed. Please try refreshing the page.');
|
||||
};
|
||||
|
||||
onMount(async () => {
|
||||
await loadMonaco(); // Fix https://github.com/mermaid-js/mermaid-live-editor/issues/175
|
||||
try {
|
||||
// @ts-ignore : This is a hack to handle a svelte-kit error when importing monaco.
|
||||
Monaco = monaco;
|
||||
} catch {
|
||||
await loadMonaco(); // Fix https://github.com/mermaid-js/mermaid-live-editor/issues/175
|
||||
}
|
||||
initEditor(Monaco);
|
||||
editor = Monaco.editor.create(divEl, editorOptions);
|
||||
editor.onDidChangeModelContent(() => {
|
||||
updateHandler(editor.getValue());
|
||||
});
|
||||
editor.addAction({
|
||||
id: 'mermaid-render-diagram',
|
||||
label: 'Render Diagram',
|
||||
keybindings: [Monaco.KeyMod.CtrlCmd | Monaco.KeyCode.Enter],
|
||||
run: function () {
|
||||
syncDiagram();
|
||||
void logEvent('renderDiagram', {
|
||||
method: 'keyboadShortcut'
|
||||
});
|
||||
}
|
||||
text = editor.getValue();
|
||||
dispatch('update', {
|
||||
text
|
||||
});
|
||||
});
|
||||
Monaco?.editor.setTheme($themeStore.isDark ? 'mermaid-dark' : 'mermaid');
|
||||
const resizeObserver = new ResizeObserver((entries) => {
|
||||
|
||||
@@ -7,15 +7,12 @@
|
||||
clearHistoryData,
|
||||
getPreviousState,
|
||||
historyStore,
|
||||
loaderHistoryStore,
|
||||
restoreHistory
|
||||
loaderHistoryStore
|
||||
} from './history';
|
||||
import { notify, prompt } from '$lib/util/notify';
|
||||
import { onMount } from 'svelte';
|
||||
import { get } from 'svelte/store';
|
||||
import moment from 'moment';
|
||||
import type { HistoryType, State, Tab } from '$lib/types';
|
||||
import { logEvent } from '$lib/util/stats';
|
||||
|
||||
const HISTORY_SAVE_INTERVAL = 60000;
|
||||
|
||||
@@ -35,39 +32,6 @@
|
||||
}
|
||||
];
|
||||
|
||||
const downloadHistory = () => {
|
||||
const data = get(historyStore);
|
||||
const blob = new Blob([JSON.stringify(data)], { type: 'application/json' });
|
||||
const url = URL.createObjectURL(blob);
|
||||
const a = document.createElement('a');
|
||||
a.href = url;
|
||||
a.download = `mermaid-history-${moment().format('YYYY-MM-DD-HHmmss')}.json`;
|
||||
a.click();
|
||||
URL.revokeObjectURL(url);
|
||||
logEvent('history', {
|
||||
action: 'download'
|
||||
});
|
||||
};
|
||||
|
||||
const uploadHistory = () => {
|
||||
const input = document.createElement('input');
|
||||
input.type = 'file';
|
||||
input.accept = 'application/json';
|
||||
input.addEventListener('change', ({ target }: Event) => {
|
||||
const file = (<HTMLInputElement>target).files[0];
|
||||
if (!file) {
|
||||
return;
|
||||
}
|
||||
const reader = new FileReader();
|
||||
reader.onload = (e) => {
|
||||
const data = JSON.parse(e.target.result as string);
|
||||
restoreHistory(data);
|
||||
};
|
||||
reader.readAsText(file);
|
||||
});
|
||||
input.click();
|
||||
};
|
||||
|
||||
const saveHistory = (auto = false) => {
|
||||
const currentState: string = getStateString();
|
||||
const previousState: string = getPreviousState(auto);
|
||||
@@ -82,15 +46,15 @@
|
||||
}
|
||||
};
|
||||
|
||||
const clearHistory = (id?: string): void => {
|
||||
if (!id && !prompt('Clear all saved items?')) {
|
||||
const clearHistory = (date?: number): void => {
|
||||
if (!date && !prompt('Clear all saved items?')) {
|
||||
return;
|
||||
}
|
||||
clearHistoryData(id);
|
||||
clearHistoryData(date);
|
||||
};
|
||||
|
||||
const restoreHistoryItem = (state: State): void => {
|
||||
inputStateStore.set({ ...state, updateDiagram: true });
|
||||
const restoreHistory = (state: State): void => {
|
||||
inputStateStore.set({ ...state, updateEditor: true, updateDiagram: true });
|
||||
};
|
||||
|
||||
const relativeTime = (time: number) => {
|
||||
@@ -124,19 +88,6 @@
|
||||
|
||||
<Card on:select={tabSelectHandler} bind:isOpen {tabs} title="History">
|
||||
<div slot="actions">
|
||||
<button
|
||||
id="uploadHistory"
|
||||
class="btn btn-xs btn-secondary w-12"
|
||||
on:click|stopPropagation={() => uploadHistory()}
|
||||
title="Upload history"><i class="fa fa-upload" /></button>
|
||||
{#if $historyStore.length > 0}
|
||||
<button
|
||||
id="downloadHistory"
|
||||
class="btn btn-xs btn-secondary w-12"
|
||||
on:click|stopPropagation={() => downloadHistory()}
|
||||
title="Download history"><i class="fa fa-download" /></button>
|
||||
{/if}
|
||||
|
|
||||
<button
|
||||
id="saveHistory"
|
||||
class="btn btn-xs btn-success w-12"
|
||||
@@ -152,7 +103,7 @@
|
||||
</div>
|
||||
<ul class="p-2 space-y-2 overflow-auto h-56" id="historyList">
|
||||
{#if $historyStore.length > 0}
|
||||
{#each $historyStore as { id, state, time, name, url, type }}
|
||||
{#each $historyStore as { state, time, name, url, type }}
|
||||
<li class="rounded p-2 shadow flex-col">
|
||||
<div class="flex">
|
||||
<div class="flex-1">
|
||||
@@ -170,10 +121,10 @@
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex gap-2 content-center">
|
||||
<button class="btn btn-success" on:click={() => restoreHistoryItem(state)}
|
||||
<button class="btn btn-success" on:click={() => restoreHistory(state)}
|
||||
><i class="fas fa-undo mr-1" />Restore</button>
|
||||
{#if type !== 'loader'}
|
||||
<button class="btn btn-error" on:click={() => clearHistory(id)}
|
||||
<button class="btn btn-error" on:click={() => clearHistory(time)}
|
||||
><i class="fas fa-trash-alt mr-1" />Delete</button>
|
||||
{/if}
|
||||
</div>
|
||||
|
||||
@@ -1,120 +0,0 @@
|
||||
import type { HistoryEntry } from '$lib/types';
|
||||
import { describe, it, expect } from 'vitest';
|
||||
import {
|
||||
addHistoryEntry,
|
||||
injectHistoryIDs,
|
||||
clearHistoryData,
|
||||
historyModeStore,
|
||||
historyStore
|
||||
} from './history';
|
||||
import { defaultState } from '../../util/state';
|
||||
import { get } from 'svelte/store';
|
||||
|
||||
describe('history', () => {
|
||||
it('should handle saving individual history entry', () => {
|
||||
expect(window.localStorage.getItem('manualHistoryStore')).toBe('[]');
|
||||
expect(window.localStorage.getItem('autoHistoryStore')).toBe('[]');
|
||||
|
||||
addHistoryEntry({
|
||||
state: defaultState,
|
||||
time: 12345,
|
||||
type: 'manual'
|
||||
});
|
||||
|
||||
const [manualEntry]: HistoryEntry[] = JSON.parse(
|
||||
window.localStorage.getItem('manualHistoryStore')
|
||||
);
|
||||
|
||||
expect(manualEntry.time).toBe(12345);
|
||||
expect(manualEntry.type).toBe('manual');
|
||||
expect(manualEntry.name).not.toBeNull();
|
||||
expect(manualEntry.state).not.toBeNull();
|
||||
|
||||
addHistoryEntry({
|
||||
state: defaultState,
|
||||
time: 54321,
|
||||
type: 'auto'
|
||||
});
|
||||
|
||||
const [autoEntry]: HistoryEntry[] = JSON.parse(window.localStorage.getItem('autoHistoryStore'));
|
||||
|
||||
expect(autoEntry.time).toBe(54321);
|
||||
expect(autoEntry.type).toBe('auto');
|
||||
expect(autoEntry.name).not.toBeNull();
|
||||
expect(autoEntry.state).not.toBeNull();
|
||||
|
||||
historyModeStore.set('manual');
|
||||
clearHistoryData();
|
||||
historyModeStore.set('auto');
|
||||
clearHistoryData();
|
||||
expect(window.localStorage.getItem('manualHistoryStore')).toBe('[]');
|
||||
expect(window.localStorage.getItem('autoHistoryStore')).toBe('[]');
|
||||
});
|
||||
|
||||
it('should clear history entries', () => {
|
||||
addHistoryEntry({
|
||||
state: defaultState,
|
||||
time: 12345,
|
||||
type: 'manual'
|
||||
});
|
||||
addHistoryEntry({
|
||||
state: { ...defaultState, code: 'graph TD\\n A[Christmas] -->|Get money| B(Go shopping)' },
|
||||
time: 123456,
|
||||
type: 'manual'
|
||||
});
|
||||
|
||||
historyModeStore.set('manual');
|
||||
const store: HistoryEntry[] = get(historyStore);
|
||||
expect(store.length).toBe(2);
|
||||
clearHistoryData(store[1].id);
|
||||
expect(get(historyStore).length).toBe(1);
|
||||
clearHistoryData();
|
||||
expect(get(historyStore).length).toBe(0);
|
||||
|
||||
historyModeStore.set('auto');
|
||||
addHistoryEntry({
|
||||
state: defaultState,
|
||||
time: 54321,
|
||||
type: 'auto'
|
||||
});
|
||||
addHistoryEntry({
|
||||
state: { ...defaultState, code: 'graph TD\\n A[Christmas] -->|Get money| B(Go shopping)' },
|
||||
time: 654321,
|
||||
type: 'auto'
|
||||
});
|
||||
expect(get(historyStore).length).toBe(2);
|
||||
clearHistoryData();
|
||||
expect(get(historyStore).length).toBe(0);
|
||||
// Test calling when history is empty
|
||||
clearHistoryData();
|
||||
expect(get(historyStore).length).toBe(0);
|
||||
});
|
||||
});
|
||||
|
||||
describe('history migration', () => {
|
||||
it('should inject history IDs as migration', () => {
|
||||
window.localStorage.setItem(
|
||||
'manualHistoryStore',
|
||||
'[{"state":{"code":"graph TD\\n A[Halloween] -->|Get money| B(Go shopping)","mermaid":"{\\n \\"theme\\": \\"dark\\"\\n}","autoSync":true,"updateDiagram":false},"time":0,"type":"manual","name":"hollow-art"},{"state":{"code":"graph TD\\n A[Christmas] -->|Get money| B(Go shopping)","mermaid":"{\\n \\"theme\\": \\"dark\\"\\n}","autoSync":true,"updateDiagram":true},"time":0,"type":"manual","name":"helpful-ocean"}]'
|
||||
);
|
||||
window.localStorage.setItem(
|
||||
'autoHistoryStore',
|
||||
'[{"state":{"code":"graph TD\\n A[New Year] -->|Get money| B(Go shopping)","mermaid":"{\\n \\"theme\\": \\"dark\\"\\n}","autoSync":true,"updateDiagram":false},"time":0,"type":"auto","name":"barking-dog"},{"state":{"code":"graph TD\\n A[Christmas] -->|Get money| B(Go shopping)","mermaid":"{\\n \\"theme\\": \\"dark\\"\\n}","autoSync":true,"updateDiagram":true},"time":0,"type":"manual","name":"needy-mosquito"}]'
|
||||
);
|
||||
let manualHistoryStore: HistoryEntry[] = JSON.parse(
|
||||
window.localStorage.getItem('manualHistoryStore')
|
||||
);
|
||||
let autoHistoryStore: HistoryEntry[] = JSON.parse(
|
||||
window.localStorage.getItem('autoHistoryStore')
|
||||
);
|
||||
expect(manualHistoryStore.every(({ id }) => id !== undefined)).toBe(false);
|
||||
expect(autoHistoryStore.every(({ id }) => id !== undefined)).toBe(false);
|
||||
|
||||
injectHistoryIDs();
|
||||
|
||||
manualHistoryStore = JSON.parse(window.localStorage.getItem('manualHistoryStore'));
|
||||
autoHistoryStore = JSON.parse(window.localStorage.getItem('autoHistoryStore'));
|
||||
expect(manualHistoryStore.every(({ id }) => id !== undefined)).toBe(true);
|
||||
expect(autoHistoryStore.every(({ id }) => id !== undefined)).toBe(true);
|
||||
});
|
||||
});
|
||||
@@ -1,10 +1,8 @@
|
||||
import { derived, writable, get } from 'svelte/store';
|
||||
import type { Readable, Writable } from 'svelte/store';
|
||||
import { persist, localStorage } from '$lib/util/persist';
|
||||
import { persist, localStorage } from '@macfja/svelte-persistent-store';
|
||||
import { generateSlug } from 'random-word-slugs';
|
||||
import type { HistoryEntry, HistoryType, Optional } from '$lib/types';
|
||||
import { v4 as uuidV4 } from 'uuid';
|
||||
import { logEvent } from '$lib/util/stats';
|
||||
import type { HistoryEntry, HistoryType } from '$lib/types';
|
||||
|
||||
const MAX_AUTO_HISTORY_LENGTH = 30;
|
||||
|
||||
@@ -43,39 +41,28 @@ export const historyStore: Readable<HistoryEntry[]> = derived(
|
||||
}
|
||||
);
|
||||
|
||||
export const addHistoryEntry = (entryToAdd: Optional<HistoryEntry, 'id'>): void => {
|
||||
const entry: HistoryEntry = {
|
||||
...entryToAdd,
|
||||
id: uuidV4()
|
||||
};
|
||||
|
||||
export const addHistoryEntry = (entry: HistoryEntry): void => {
|
||||
if (entry.type === 'loader') {
|
||||
loaderHistoryStore.update((entries) => [entry, ...entries]);
|
||||
return;
|
||||
}
|
||||
|
||||
if (!entry.name) {
|
||||
entry.name = generateSlug(2);
|
||||
}
|
||||
|
||||
if (entry.type === 'auto') {
|
||||
autoHistoryStore.update((entries) => {
|
||||
if (entries.length >= MAX_AUTO_HISTORY_LENGTH) {
|
||||
entries = entries.slice(0, MAX_AUTO_HISTORY_LENGTH - 1);
|
||||
}
|
||||
return [entry, ...entries];
|
||||
});
|
||||
} else if (entry.type === 'manual') {
|
||||
entry.name = generateSlug(2);
|
||||
if (entry.type !== 'auto') {
|
||||
manualHistoryStore.update((entries) => [entry, ...entries]);
|
||||
logEvent('history', { action: 'save' });
|
||||
return;
|
||||
}
|
||||
autoHistoryStore.update((entries) => {
|
||||
if (entries.length === MAX_AUTO_HISTORY_LENGTH) {
|
||||
entries.pop();
|
||||
}
|
||||
return [entry, ...entries];
|
||||
});
|
||||
};
|
||||
|
||||
export const clearHistoryData = (idToClear?: string): void => {
|
||||
export const clearHistoryData = (time?: number): void => {
|
||||
(get(historyModeStore) === 'auto' ? autoHistoryStore : manualHistoryStore).update((entries) => {
|
||||
if (get(historyModeStore) !== 'loader') {
|
||||
entries = entries.filter(({ id }) => idToClear && id != idToClear);
|
||||
logEvent('history', { action: 'clear', type: idToClear ? 'single' : 'all' });
|
||||
entries = entries.filter((entry) => time && entry.time != time);
|
||||
}
|
||||
return entries;
|
||||
});
|
||||
@@ -88,54 +75,3 @@ export const getPreviousState = (auto: boolean): string => {
|
||||
}
|
||||
return '';
|
||||
};
|
||||
|
||||
export const restoreHistory = (data: HistoryEntry[]) => {
|
||||
const entries = data.filter(validateEntry);
|
||||
const invalidEntryCount = data.length - entries.length;
|
||||
if (invalidEntryCount > 0) {
|
||||
console.error(`${invalidEntryCount} invalid history entries were removed.`);
|
||||
console.error(data);
|
||||
}
|
||||
if (entries.length > 0) {
|
||||
let entryCount = 0;
|
||||
(entries[0].type === 'auto' ? autoHistoryStore : manualHistoryStore).update((existing) => {
|
||||
const existingIDs = new Set(existing.map(({ id }) => id));
|
||||
const newEntries = entries.filter(({ id }) => !existingIDs.has(id));
|
||||
entryCount = newEntries.length;
|
||||
const combined = [...existing, ...newEntries];
|
||||
combined.sort((a, b) => b.time - a.time);
|
||||
return combined;
|
||||
});
|
||||
|
||||
alert(
|
||||
`${entryCount} entries restored. ${invalidEntryCount} invalid, ${
|
||||
entries.length - entryCount
|
||||
} duplicates.`
|
||||
);
|
||||
logEvent('history', {
|
||||
action: 'restore',
|
||||
success: entryCount,
|
||||
invalid: invalidEntryCount,
|
||||
duplicates: entries.length - entryCount
|
||||
});
|
||||
} else {
|
||||
alert('No valid entries found.');
|
||||
}
|
||||
};
|
||||
|
||||
export const injectHistoryIDs = (): void => {
|
||||
const setIDs = (entries: HistoryEntry[]) => {
|
||||
for (const entry of entries) {
|
||||
if (!entry.id) {
|
||||
entry.id = uuidV4();
|
||||
}
|
||||
}
|
||||
return entries;
|
||||
};
|
||||
autoHistoryStore.update(setIDs);
|
||||
manualHistoryStore.update(setIDs);
|
||||
};
|
||||
|
||||
const validateEntry = (entry: HistoryEntry): boolean => {
|
||||
return entry.type && entry.state && entry.time && true;
|
||||
};
|
||||
|
||||
@@ -1,7 +1,6 @@
|
||||
<script lang="ts">
|
||||
import { updateCode } from '$lib/util/state';
|
||||
import Card from '$lib/components/card/card.svelte';
|
||||
import { logEvent } from '$lib/util/stats';
|
||||
|
||||
const samples = {
|
||||
'Flow Chart': `graph TD
|
||||
@@ -98,9 +97,8 @@
|
||||
const loadSampleDiagram = (diagramType: string): void => {
|
||||
updateCode(samples[diagramType], {
|
||||
updateDiagram: true,
|
||||
resetPanZoom: true
|
||||
updateEditor: true
|
||||
});
|
||||
void logEvent('loadSampleDiagram', { diagramType });
|
||||
};
|
||||
</script>
|
||||
|
||||
|
||||
@@ -1,10 +1,7 @@
|
||||
<script lang="ts">
|
||||
import { inputStateStore, stateStore, updateCodeStore } from '$lib/util/state';
|
||||
import { inputStateStore, stateStore } from '$lib/util/state';
|
||||
import { onMount } from 'svelte';
|
||||
import mermaid from 'mermaid';
|
||||
import panzoom from 'svg-pan-zoom';
|
||||
import type { State } from '$lib/types';
|
||||
import { logEvent } from '$lib/util/stats';
|
||||
|
||||
let code = '';
|
||||
let config = '';
|
||||
@@ -12,47 +9,7 @@
|
||||
let view: HTMLDivElement;
|
||||
let error = false;
|
||||
let outOfSync = false;
|
||||
let hide = false;
|
||||
let manualUpdate = true;
|
||||
let panZoomEnabled = $stateStore.panZoom;
|
||||
let pzoom: SvgPanZoom.Instance;
|
||||
let debounce: number;
|
||||
|
||||
const handlePanZoomChange = () => {
|
||||
const pan = pzoom.getPan();
|
||||
const zoom = pzoom.getZoom();
|
||||
clearTimeout(debounce);
|
||||
debounce = window.setTimeout(() => {
|
||||
updateCodeStore({ pan, zoom });
|
||||
void logEvent('panZoom');
|
||||
}, 200);
|
||||
};
|
||||
|
||||
const handlePanZoom = (state: State) => {
|
||||
if (!state.panZoom) {
|
||||
return;
|
||||
}
|
||||
hide = true;
|
||||
pzoom?.destroy();
|
||||
pzoom = undefined;
|
||||
Promise.resolve().then(() => {
|
||||
const graphDiv = document.getElementById('graph-div');
|
||||
pzoom = panzoom(graphDiv, {
|
||||
onPan: handlePanZoomChange,
|
||||
onZoom: handlePanZoomChange,
|
||||
controlIconsEnabled: true,
|
||||
fit: true,
|
||||
center: true
|
||||
});
|
||||
const { pan, zoom } = state;
|
||||
if (pan !== undefined && zoom !== undefined && Number.isFinite(zoom)) {
|
||||
pzoom.zoom(zoom);
|
||||
pzoom.pan(pan);
|
||||
}
|
||||
hide = false;
|
||||
});
|
||||
};
|
||||
|
||||
onMount(() => {
|
||||
stateStore.subscribe((state) => {
|
||||
if (state.error !== undefined) {
|
||||
@@ -67,42 +24,31 @@
|
||||
}
|
||||
outOfSync = false;
|
||||
manualUpdate = true;
|
||||
if (code === state.code && config === state.mermaid && panZoomEnabled === state.panZoom) {
|
||||
// Do not render if there is no change in Code/Config/PanZoom
|
||||
if (code === state.code && config === state.mermaid) {
|
||||
// Do not render if there is no change in Code/Config
|
||||
return;
|
||||
}
|
||||
code = state.code;
|
||||
config = state.mermaid;
|
||||
panZoomEnabled = state.panZoom;
|
||||
const scroll = view.parentElement.scrollTop;
|
||||
delete container.dataset.processed;
|
||||
mermaid.initialize(Object.assign({}, JSON.parse(state.mermaid)));
|
||||
mermaid.render('graph-div', code, (svgCode) => {
|
||||
if (svgCode.length > 0) {
|
||||
handlePanZoom(state);
|
||||
console.log(svgCode);
|
||||
container.innerHTML = svgCode;
|
||||
const graphDiv = document.getElementById('graph-div');
|
||||
graphDiv.setAttribute('height', '100%');
|
||||
graphDiv.style.maxWidth = '100%';
|
||||
}
|
||||
});
|
||||
view.parentElement.scrollTop = scroll;
|
||||
error = false;
|
||||
} else if (manualUpdate) {
|
||||
manualUpdate = false;
|
||||
} else if (code !== state.code || config !== state.mermaid) {
|
||||
} else {
|
||||
outOfSync = true;
|
||||
}
|
||||
} catch (e) {
|
||||
console.error('view fail', e);
|
||||
console.log('view fail', e);
|
||||
error = true;
|
||||
}
|
||||
});
|
||||
window.addEventListener('resize', () => {
|
||||
if ($stateStore.panZoom && pzoom) {
|
||||
pzoom.resize();
|
||||
}
|
||||
});
|
||||
});
|
||||
</script>
|
||||
|
||||
@@ -110,25 +56,16 @@
|
||||
<div class="p-2 text-red-600" id="errorContainer">{$stateStore.error}</div>
|
||||
{/if}
|
||||
|
||||
<div id="view" bind:this={view} class="p-2 h-full" class:error class:outOfSync>
|
||||
<div id="container" bind:this={container} class="h-full overflow-auto" class:hide />
|
||||
<div id="view" bind:this={view} class="p-2" class:error class:outOfSync>
|
||||
<div id="container" bind:this={container} class="flex-1 overflow-auto" />
|
||||
</div>
|
||||
|
||||
<style>
|
||||
#view {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
#container {
|
||||
transition: visibility 0.3s;
|
||||
}
|
||||
|
||||
.error,
|
||||
.outOfSync {
|
||||
opacity: 0.5;
|
||||
}
|
||||
|
||||
.hide {
|
||||
visibility: hidden;
|
||||
}
|
||||
</style>
|
||||
|
||||
Vendored
+15
-18
@@ -16,6 +16,13 @@ export interface MarkerData {
|
||||
endColumn: number;
|
||||
}
|
||||
|
||||
export interface EditorUpdateEvent {
|
||||
text: string;
|
||||
}
|
||||
export interface EditorEvents {
|
||||
update: EditorUpdateEvent;
|
||||
}
|
||||
|
||||
export interface TabEvents {
|
||||
select: Tab;
|
||||
}
|
||||
@@ -29,17 +36,13 @@ export interface Tab {
|
||||
export interface State {
|
||||
code: string;
|
||||
mermaid: string;
|
||||
updateEditor: boolean;
|
||||
updateDiagram: boolean;
|
||||
autoSync: boolean;
|
||||
editorMode?: EditorMode;
|
||||
panZoom?: boolean;
|
||||
pan?: { x: number; y: number };
|
||||
zoom?: number;
|
||||
loader?: LoaderConfig;
|
||||
}
|
||||
|
||||
export interface ValidatedState extends State {
|
||||
editorMode: EditorMode;
|
||||
error: unknown;
|
||||
errorMarkers: MarkerData[];
|
||||
serialized: string;
|
||||
@@ -62,16 +65,13 @@ export interface LoaderConfig {
|
||||
config: GistLoaderConfig | FileLoaderConfig;
|
||||
}
|
||||
export type HistoryType = 'auto' | 'manual' | 'loader';
|
||||
export type HistoryEntry = { id: string; state: State; time: number; url?: string } & (
|
||||
| {
|
||||
type: 'loader';
|
||||
name: string;
|
||||
}
|
||||
| {
|
||||
type: HistoryType;
|
||||
name?: string;
|
||||
}
|
||||
);
|
||||
export interface HistoryEntry {
|
||||
state: State;
|
||||
time: number;
|
||||
name?: string;
|
||||
type: HistoryType;
|
||||
url?: string;
|
||||
}
|
||||
|
||||
export interface DocConfig {
|
||||
[key: string]: {
|
||||
@@ -80,7 +80,4 @@ export interface DocConfig {
|
||||
};
|
||||
}
|
||||
|
||||
export type EditorMode = 'code' | 'config';
|
||||
|
||||
export type Loader = (url: string) => Promise<State>;
|
||||
export type Optional<T, K extends keyof T> = Pick<Partial<T>, K> & Omit<T, K>;
|
||||
|
||||
@@ -2,4 +2,3 @@ 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';
|
||||
export const debounceEnabled: boolean = import.meta.env.MERMAID_DISABLE_DEBOUNCE !== 'true';
|
||||
|
||||
@@ -7,7 +7,7 @@ const loaders: Record<string, Loader> = {
|
||||
|
||||
export const loadDataFromUrl = async (): Promise<void> => {
|
||||
const searchParams = new URLSearchParams(window.location.search);
|
||||
let state: Partial<State> = defaultState;
|
||||
let state: State = defaultState;
|
||||
let code: string, config: string;
|
||||
let loaded = false;
|
||||
const codeURL: string = searchParams.get('code');
|
||||
@@ -48,12 +48,13 @@ export const loadDataFromUrl = async (): Promise<void> => {
|
||||
configURL
|
||||
}
|
||||
}
|
||||
};
|
||||
} as State;
|
||||
}
|
||||
loaded &&
|
||||
updateCodeStore({
|
||||
...state,
|
||||
autoSync: true,
|
||||
updateDiagram: true
|
||||
updateDiagram: true,
|
||||
updateEditor: true
|
||||
});
|
||||
};
|
||||
|
||||
@@ -1,34 +0,0 @@
|
||||
import type { HistoryEntry } from '$lib/types';
|
||||
import { describe, it, expect, beforeEach } from 'vitest';
|
||||
|
||||
describe('migrations', () => {
|
||||
beforeEach(() => {
|
||||
window.localStorage.setItem(
|
||||
'manualHistoryStore',
|
||||
'[{"state":{"code":"graph TD\\n A[Halloween] -->|Get money| B(Go shopping)","mermaid":"{\\n \\"theme\\": \\"dark\\"\\n}","autoSync":true,"updateDiagram":false},"time":0,"type":"manual","name":"hollow-art"},{"state":{"code":"graph TD\\n A[Christmas] -->|Get money| B(Go shopping)","mermaid":"{\\n \\"theme\\": \\"dark\\"\\n}","autoSync":true,"updateDiagram":true},"time":0,"type":"manual","name":"helpful-ocean"}]'
|
||||
);
|
||||
window.localStorage.setItem(
|
||||
'autoHistoryStore',
|
||||
'[{"state":{"code":"graph TD\\n A[New Year] -->|Get money| B(Go shopping)","mermaid":"{\\n \\"theme\\": \\"dark\\"\\n}","autoSync":true,"updateDiagram":false},"time":0,"type":"auto","name":"barking-dog"},{"state":{"code":"graph TD\\n A[Christmas] -->|Get money| B(Go shopping)","mermaid":"{\\n \\"theme\\": \\"dark\\"\\n}","autoSync":true,"updateDiagram":true},"time":0,"type":"manual","name":"needy-mosquito"}]'
|
||||
);
|
||||
});
|
||||
|
||||
it('should migrate from v0 to v1', async () => {
|
||||
const { applyMigrations } = await import('./migrations');
|
||||
let manualHistoryStore: HistoryEntry[] = JSON.parse(
|
||||
window.localStorage.getItem('manualHistoryStore')
|
||||
);
|
||||
let autoHistoryStore: HistoryEntry[] = JSON.parse(
|
||||
window.localStorage.getItem('autoHistoryStore')
|
||||
);
|
||||
expect(manualHistoryStore.every(({ id }) => id !== undefined)).toBe(false);
|
||||
expect(autoHistoryStore.every(({ id }) => id !== undefined)).toBe(false);
|
||||
|
||||
applyMigrations();
|
||||
|
||||
manualHistoryStore = JSON.parse(window.localStorage.getItem('manualHistoryStore'));
|
||||
autoHistoryStore = JSON.parse(window.localStorage.getItem('autoHistoryStore'));
|
||||
expect(manualHistoryStore.every(({ id }) => id !== undefined)).toBe(true);
|
||||
expect(autoHistoryStore.every(({ id }) => id !== undefined)).toBe(true);
|
||||
});
|
||||
});
|
||||
@@ -1,35 +0,0 @@
|
||||
import { writable, get, type Writable } from 'svelte/store';
|
||||
import { persist, localStorage } from '$lib/util/persist';
|
||||
import { injectHistoryIDs } from '$lib/components/history/history';
|
||||
import { logEvent } from './stats';
|
||||
|
||||
interface MigrationState {
|
||||
version: number;
|
||||
}
|
||||
|
||||
const migrations: { [key: string]: () => void } = {
|
||||
injectHistoryIDs
|
||||
};
|
||||
|
||||
const migrationStore: Writable<MigrationState> = persist(
|
||||
writable({ version: -1 }),
|
||||
localStorage(),
|
||||
'migrations'
|
||||
);
|
||||
|
||||
export const applyMigrations = (): void => {
|
||||
const { version }: MigrationState = get(migrationStore);
|
||||
const allMigrations = Object.entries(migrations);
|
||||
if (version === allMigrations.length - 1) {
|
||||
return;
|
||||
}
|
||||
console.log(`Current migration version: v${version}. Migrating to v${allMigrations.length - 1}.`);
|
||||
for (let i = version + 1; i < allMigrations.length; i++) {
|
||||
const [key, fn] = allMigrations[i];
|
||||
console.log(`Applying migration ${i}: ${key}.`);
|
||||
fn();
|
||||
logEvent('migration', { key });
|
||||
migrationStore.set({ version: i });
|
||||
}
|
||||
logEvent('migration', { status: 'complete', from: version, to: allMigrations.length - 1 });
|
||||
};
|
||||
@@ -1,265 +0,0 @@
|
||||
/* eslint-disable @typescript-eslint/no-explicit-any */
|
||||
// Copied from https://github.com/MacFJA/svelte-persistent-store
|
||||
// # The MIT License (MIT)
|
||||
|
||||
// Copyright (c) 2021 [MacFJA](https://github.com/MacFJA)
|
||||
|
||||
// > Permission is hereby granted, free of charge, to any person obtaining a copy
|
||||
// > of this software and associated documentation files (the "Software"), to deal
|
||||
// > in the Software without restriction, including without limitation the rights
|
||||
// > to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
|
||||
// > copies of the Software, and to permit persons to whom the Software is
|
||||
// > furnished to do so, subject to the following conditions:
|
||||
// >
|
||||
// > The above copyright notice and this permission notice shall be included in
|
||||
// > all copies or substantial portions of the Software.
|
||||
// >
|
||||
// > THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
|
||||
// > IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
|
||||
// > FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
|
||||
// > AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
|
||||
// > LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
|
||||
// > OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
|
||||
// > THE SOFTWARE.
|
||||
|
||||
import ESSerializer from 'esserializer';
|
||||
import type { Writable } from 'svelte/store';
|
||||
|
||||
/**
|
||||
* Disabled warnings about missing/unavailable storages
|
||||
*/
|
||||
export function disableWarnings(): void {
|
||||
noWarnings = true;
|
||||
}
|
||||
/**
|
||||
* If set to true, no warning will be emitted if the requested Storage is not found.
|
||||
* This option can be useful when the lib is used on a server.
|
||||
*/
|
||||
let noWarnings = false;
|
||||
/**
|
||||
* List of storages where the warning have already been displayed.
|
||||
*/
|
||||
const alreadyWarnFor: Array<string> = [];
|
||||
|
||||
/**
|
||||
* Add a log to indicate that the requested Storage have not been found.
|
||||
* @param {string} storageName
|
||||
*/
|
||||
const warnStorageNotFound = (storageName) => {
|
||||
const isProduction = typeof process !== 'undefined' && process.env?.NODE_ENV === 'production';
|
||||
|
||||
if (!noWarnings && alreadyWarnFor.indexOf(storageName) === -1 && !isProduction) {
|
||||
let message = `Unable to find the ${storageName}. No data will be persisted.`;
|
||||
if (typeof window === 'undefined') {
|
||||
message +=
|
||||
'\n' +
|
||||
'Are you running on a server? Most of storages are not available while running on a server.';
|
||||
}
|
||||
console.warn(message);
|
||||
alreadyWarnFor.push(storageName);
|
||||
}
|
||||
};
|
||||
|
||||
const allowedClasses = [];
|
||||
/**
|
||||
* Add a class to the allowed list of classes to be serialized
|
||||
* @param classDef The class to add to the list
|
||||
*/
|
||||
export const addSerializableClass = (classDef: () => unknown): void => {
|
||||
allowedClasses.push(classDef);
|
||||
};
|
||||
|
||||
const serialize = (value: unknown): string => ESSerializer.serialize(value);
|
||||
const deserialize = (value: string): unknown => {
|
||||
// @TODO: to remove in the next major
|
||||
if (value === 'undefined') {
|
||||
return undefined;
|
||||
}
|
||||
|
||||
if (value !== null && value !== undefined) {
|
||||
try {
|
||||
return ESSerializer.deserialize(value, allowedClasses);
|
||||
} catch (e) {
|
||||
// Do nothing
|
||||
// use the value "as is"
|
||||
}
|
||||
try {
|
||||
return JSON.parse(value);
|
||||
} catch (e) {
|
||||
// Do nothing
|
||||
// use the value "as is"
|
||||
}
|
||||
}
|
||||
return value;
|
||||
};
|
||||
|
||||
/**
|
||||
* A store that keep it's value in time.
|
||||
*/
|
||||
export interface PersistentStore<T> extends Writable<T> {
|
||||
/**
|
||||
* Delete the store value from the persistent storage
|
||||
*/
|
||||
delete(): void;
|
||||
}
|
||||
|
||||
/**
|
||||
* Storage interface
|
||||
*/
|
||||
export interface StorageInterface<T> {
|
||||
/**
|
||||
* Get a value from the storage.
|
||||
*
|
||||
* If the value doesn't exists in the storage, `null` should be returned.
|
||||
* This method MUST be synchronous.
|
||||
* @param key The key/name of the value to retrieve
|
||||
*/
|
||||
getValue(key: string): T | null;
|
||||
|
||||
/**
|
||||
* Save a value in the storage.
|
||||
* @param key The key/name of the value to save
|
||||
* @param value The value to save
|
||||
*/
|
||||
setValue(key: string, value: T): void;
|
||||
|
||||
/**
|
||||
* Remove a value from the storage
|
||||
* @param key The key/name of the value to remove
|
||||
*/
|
||||
deleteValue(key: string): void;
|
||||
}
|
||||
|
||||
export interface SelfUpdateStorageInterface<T> extends StorageInterface<T> {
|
||||
/**
|
||||
* Add a listener to the storage values changes
|
||||
* @param {string} key The key to listen
|
||||
* @param {(newValue: T) => void} listener The listener callback function
|
||||
*/
|
||||
addListener(key: string, listener: (newValue: T) => void): void;
|
||||
/**
|
||||
* Remove a listener from the storage values changes
|
||||
* @param {string} key The key that was listened
|
||||
* @param {(newValue: T) => void} listener The listener callback function to remove
|
||||
*/
|
||||
removeListener(key: string, listener: (newValue: T) => void): void;
|
||||
}
|
||||
|
||||
/**
|
||||
* Make a store persistent
|
||||
* @param {Writable<*>} store The store to enhance
|
||||
* @param {StorageInterface} storage The storage to use
|
||||
* @param {string} key The name of the data key
|
||||
*/
|
||||
export function persist<T>(
|
||||
store: Writable<T>,
|
||||
storage: StorageInterface<T>,
|
||||
key: string
|
||||
): PersistentStore<T> {
|
||||
const initialValue = storage.getValue(key);
|
||||
|
||||
if (null !== initialValue) {
|
||||
store.set(initialValue);
|
||||
}
|
||||
|
||||
if ((storage as SelfUpdateStorageInterface<T>).addListener) {
|
||||
(storage as SelfUpdateStorageInterface<T>).addListener(key, (newValue) => {
|
||||
store.set(newValue);
|
||||
});
|
||||
}
|
||||
|
||||
store.subscribe((value) => {
|
||||
storage.setValue(key, value);
|
||||
});
|
||||
|
||||
return {
|
||||
...store,
|
||||
delete() {
|
||||
storage.deleteValue(key);
|
||||
}
|
||||
};
|
||||
}
|
||||
|
||||
function getBrowserStorage(
|
||||
browserStorage: Storage,
|
||||
listenExternalChanges = false
|
||||
): SelfUpdateStorageInterface<any> {
|
||||
const listeners: Array<{ key: string; listener: (newValue: any) => void }> = [];
|
||||
const listenerFunction = (event: StorageEvent) => {
|
||||
const eventKey = event.key;
|
||||
if (event.storageArea === browserStorage) {
|
||||
listeners
|
||||
.filter(({ key }) => key === eventKey)
|
||||
.forEach(({ listener }) => {
|
||||
listener(deserialize(event.newValue));
|
||||
});
|
||||
}
|
||||
};
|
||||
const connect = () => {
|
||||
if (listenExternalChanges && typeof window !== 'undefined' && window?.addEventListener) {
|
||||
window.addEventListener('storage', listenerFunction);
|
||||
}
|
||||
};
|
||||
const disconnect = () => {
|
||||
if (listenExternalChanges && typeof window !== 'undefined' && window?.removeEventListener) {
|
||||
window.removeEventListener('storage', listenerFunction);
|
||||
}
|
||||
};
|
||||
|
||||
return {
|
||||
addListener(key: string, listener: (newValue: any) => void) {
|
||||
listeners.push({ key, listener });
|
||||
if (listeners.length === 1) {
|
||||
connect();
|
||||
}
|
||||
},
|
||||
removeListener(key: string, listener: (newValue: any) => void) {
|
||||
const index = listeners.indexOf({ key, listener });
|
||||
if (index !== -1) {
|
||||
listeners.splice(index, 1);
|
||||
}
|
||||
if (listeners.length === 0) {
|
||||
disconnect();
|
||||
}
|
||||
},
|
||||
getValue(key: string): any | null {
|
||||
const value = browserStorage.getItem(key);
|
||||
return deserialize(value);
|
||||
},
|
||||
deleteValue(key: string) {
|
||||
browserStorage.removeItem(key);
|
||||
},
|
||||
setValue(key: string, value: any) {
|
||||
browserStorage.setItem(key, serialize(value));
|
||||
}
|
||||
};
|
||||
}
|
||||
|
||||
/**
|
||||
* Storage implementation that use the browser local storage
|
||||
* @param {boolean} listenExternalChanges - Update the store if the localStorage is updated from another page
|
||||
*/
|
||||
export function localStorage<T>(listenExternalChanges = false): StorageInterface<T> {
|
||||
if (typeof window !== 'undefined' && window?.localStorage) {
|
||||
return getBrowserStorage(window.localStorage, listenExternalChanges);
|
||||
}
|
||||
warnStorageNotFound('window.localStorage');
|
||||
return noopStorage();
|
||||
}
|
||||
|
||||
/**
|
||||
* Storage implementation that do nothing
|
||||
*/
|
||||
export function noopStorage(): StorageInterface<any> {
|
||||
return {
|
||||
getValue(): null {
|
||||
return null;
|
||||
},
|
||||
deleteValue() {
|
||||
// Do nothing
|
||||
},
|
||||
setValue() {
|
||||
// Do nothing
|
||||
}
|
||||
};
|
||||
}
|
||||
@@ -13,19 +13,19 @@ describe('Serde tests', () => {
|
||||
|
||||
it('should serialize and deserialize with default serde', () => {
|
||||
expect(verifySerde(defaultState)).toMatchInlineSnapshot(
|
||||
'"pako:eNpVj81qw0AMhF9F6NRC_AI-BGK7zSXQQHLz5iBsObuk-8Naphjb7551fEl1EjPfiNGEjW8Zc7xHChqulXKQ5lCXOppeLPU3yLL9fGQB6x2PMxQfRw-99iEYd__c-GKFoJxOK8Yg2rjHslnlK__jeIaqPlEQH27vzvXPz_BVm7NO5_87OnJKfdcd5R1lDUUoKb4Q3KHlaMm0qfq0KgpFs2WFeVpb7mj4FYXKLQmlQfxldA3mEgfe4RBaEq4MpaftJi5PNtJU8w"'
|
||||
'"pako:eNpVkM1qw0AMhF9F6JRC_AI-FBo7ySXQQnPz5iC8cnZp9oe1TAm2373rmEKik5j5ZhAasQ2ascRromjgXCsPeT6ayiTbi6P-AkXxPh1ZwAXP9wl2m2OA3oQYrb--rfxugaAaTwvGIMb6n3m1qkf-0_MEdXOiKCFenp3zb5hg39gvk-tfHZM4pw5NR2VHRUsJKkoPBLfoODmyOp8-LopCMexYYZlXzR0NN1Go_JzRIWoS3msrIWGuuvW8RRokfN99i6Wkgf-h2lL-hFvF-Q9-YFyS"'
|
||||
);
|
||||
});
|
||||
|
||||
it('should serialize and deserialize with base64 serde', () => {
|
||||
expect(verifySerde(defaultState, 'base64')).toMatchInlineSnapshot(
|
||||
'"base64:eyJjb2RlIjoiZ3JhcGggVERcbiAgICBBW0NocmlzdG1hc10gLS0-fEdldCBtb25leXwgQihHbyBzaG9wcGluZylcbiAgICBCIC0tPiBDe0xldCBtZSB0aGlua31cbiAgICBDIC0tPnxPbmV8IERbTGFwdG9wXVxuICAgIEMgLS0-fFR3b3wgRVtpUGhvbmVdXG4gICAgQyAtLT58VGhyZWV8IEZbZmE6ZmEtY2FyIENhcl1cbiAgIiwibWVybWFpZCI6IntcbiAgXCJ0aGVtZVwiOiBcImRlZmF1bHRcIlxufSIsImF1dG9TeW5jIjp0cnVlLCJ1cGRhdGVEaWFncmFtIjp0cnVlfQ"'
|
||||
'"base64:eyJjb2RlIjoiZ3JhcGggVERcbiAgICBBW0NocmlzdG1hc10gLS0-fEdldCBtb25leXwgQihHbyBzaG9wcGluZylcbiAgICBCIC0tPiBDe0xldCBtZSB0aGlua31cbiAgICBDIC0tPnxPbmV8IERbTGFwdG9wXVxuICAgIEMgLS0-fFR3b3wgRVtpUGhvbmVdXG4gICAgQyAtLT58VGhyZWV8IEZbZmE6ZmEtY2FyIENhcl1cbiAgIiwibWVybWFpZCI6IntcbiAgXCJ0aGVtZVwiOiBcImRlZmF1bHRcIlxufSIsInVwZGF0ZUVkaXRvciI6ZmFsc2UsImF1dG9TeW5jIjp0cnVlLCJ1cGRhdGVEaWFncmFtIjp0cnVlfQ"'
|
||||
);
|
||||
});
|
||||
|
||||
it('should serialize and deserialize with pako serde', () => {
|
||||
expect(verifySerde(defaultState, 'pako')).toMatchInlineSnapshot(
|
||||
'"pako:eNpVj81qw0AMhF9F6NRC_AI-BGK7zSXQQHLz5iBsObuk-8Naphjb7551fEl1EjPfiNGEjW8Zc7xHChqulXKQ5lCXOppeLPU3yLL9fGQB6x2PMxQfRw-99iEYd__c-GKFoJxOK8Yg2rjHslnlK__jeIaqPlEQH27vzvXPz_BVm7NO5_87OnJKfdcd5R1lDUUoKb4Q3KHlaMm0qfq0KgpFs2WFeVpb7mj4FYXKLQmlQfxldA3mEgfe4RBaEq4MpaftJi5PNtJU8w"'
|
||||
'"pako:eNpVkM1qw0AMhF9F6JRC_AI-FBo7ySXQQnPz5iC8cnZp9oe1TAm2373rmEKik5j5ZhAasQ2ascRromjgXCsPeT6ayiTbi6P-AkXxPh1ZwAXP9wl2m2OA3oQYrb--rfxugaAaTwvGIMb6n3m1qkf-0_MEdXOiKCFenp3zb5hg39gvk-tfHZM4pw5NR2VHRUsJKkoPBLfoODmyOp8-LopCMexYYZlXzR0NN1Go_JzRIWoS3msrIWGuuvW8RRokfN99i6Wkgf-h2lL-hFvF-Q9-YFyS"'
|
||||
);
|
||||
});
|
||||
|
||||
|
||||
+13
-23
@@ -1,8 +1,7 @@
|
||||
import { writable, get, derived } from 'svelte/store';
|
||||
import { persist, localStorage } from './persist';
|
||||
import { persist, localStorage } from '@macfja/svelte-persistent-store';
|
||||
import { saveStatistics } from './stats';
|
||||
import { serializeState, deserializeState } from './serde';
|
||||
import { cmdKey } from './util';
|
||||
import mermaid from 'mermaid';
|
||||
|
||||
import type { Readable } from 'svelte/store';
|
||||
@@ -23,6 +22,7 @@ export const defaultState: State = {
|
||||
null,
|
||||
2
|
||||
),
|
||||
updateEditor: false,
|
||||
autoSync: true,
|
||||
updateDiagram: true
|
||||
};
|
||||
@@ -47,10 +47,8 @@ export const stateStore: Readable<ValidatedState> = derived([inputStateStore], (
|
||||
...state,
|
||||
serialized: '',
|
||||
errorMarkers: [],
|
||||
error: undefined,
|
||||
editorMode: state.editorMode ?? 'code'
|
||||
error: undefined
|
||||
};
|
||||
|
||||
// No changes should be done to fields part of `state`.
|
||||
try {
|
||||
processed.serialized = serializeState(state);
|
||||
@@ -80,7 +78,7 @@ export const stateStore: Readable<ValidatedState> = derived([inputStateStore], (
|
||||
|
||||
export const loadState = (data: string): void => {
|
||||
let state: State;
|
||||
console.log(`Loading '${data}'`);
|
||||
console.log('Loading', data);
|
||||
try {
|
||||
state = deserializeState(data);
|
||||
const mermaidConfig: { [key: string]: string } =
|
||||
@@ -103,12 +101,11 @@ export const loadState = (data: string): void => {
|
||||
state.mermaid = defaultState.mermaid;
|
||||
}
|
||||
}
|
||||
updateCodeStore({ ...state });
|
||||
updateCodeStore({ ...state, updateEditor: true });
|
||||
};
|
||||
|
||||
export const updateCodeStore = (newState: Partial<State>): void => {
|
||||
export const updateCodeStore = (newState: State): void => {
|
||||
inputStateStore.update((state) => {
|
||||
// console.log({ newState, state });
|
||||
return { ...state, ...newState };
|
||||
});
|
||||
};
|
||||
@@ -116,38 +113,31 @@ export const updateCodeStore = (newState: Partial<State>): void => {
|
||||
let prompted = false;
|
||||
export const updateCode = (
|
||||
code: string,
|
||||
{
|
||||
updateDiagram = false,
|
||||
resetPanZoom = false
|
||||
}: { updateDiagram?: boolean; resetPanZoom?: boolean } = {}
|
||||
{ updateEditor, updateDiagram = false }: { updateEditor: boolean; updateDiagram?: boolean }
|
||||
): void => {
|
||||
saveStatistics(code);
|
||||
const lines = (code.match(/\n/g) || '').length + 1;
|
||||
|
||||
if (lines > 50 && !prompted && get(stateStore).autoSync) {
|
||||
const turnOff = confirm(
|
||||
`Long diagram detected. Turn off Auto Sync? Use ${cmdKey} + Enter or click the sync logo to manually sync.`
|
||||
'Long diagram detected. Turn off Auto Sync? Click the sync logo to manually sync.'
|
||||
);
|
||||
prompted = true;
|
||||
if (turnOff) {
|
||||
updateCodeStore({
|
||||
autoSync: false
|
||||
});
|
||||
} as State);
|
||||
}
|
||||
}
|
||||
|
||||
inputStateStore.update((state) => {
|
||||
if (resetPanZoom) {
|
||||
state.pan = undefined;
|
||||
state.zoom = undefined;
|
||||
}
|
||||
return { ...state, code, updateDiagram };
|
||||
return { ...state, code, updateEditor, updateDiagram };
|
||||
});
|
||||
};
|
||||
|
||||
export const updateConfig = (config: string): void => {
|
||||
export const updateConfig = (config: string, updateEditor: boolean): void => {
|
||||
inputStateStore.update((state) => {
|
||||
return { ...state, mermaid: config };
|
||||
return { ...state, mermaid: config, updateEditor };
|
||||
});
|
||||
};
|
||||
|
||||
@@ -158,7 +148,7 @@ export const toggleDarkTheme = (dark: boolean): void => {
|
||||
config.theme = dark ? 'dark' : 'default';
|
||||
}
|
||||
|
||||
return { ...state, mermaid: JSON.stringify(config, null, 2) };
|
||||
return { ...state, mermaid: JSON.stringify(config, null, 2), updateEditor: true };
|
||||
});
|
||||
};
|
||||
|
||||
|
||||
+11
-24
@@ -1,4 +1,4 @@
|
||||
import { browser } from '$app/environment';
|
||||
import { browser } from '$app/env';
|
||||
import type { AnalyticsInstance } from 'analytics';
|
||||
|
||||
export let analytics: AnalyticsInstance;
|
||||
@@ -8,28 +8,18 @@ export const initAnalytics = async (): Promise<void> => {
|
||||
try {
|
||||
const { Analytics } = await import('analytics');
|
||||
// eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
|
||||
const googleAnalytics = (await import('@analytics/google-analytics')).default;
|
||||
const plausible = (await import('analytics-plugin-plausible')).default;
|
||||
const googleAnalytics = await import('@analytics/google-analytics');
|
||||
analytics = Analytics({
|
||||
app: 'mermaid-live-editor',
|
||||
// eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
|
||||
plugins: [
|
||||
// eslint-disable-next-line @typescript-eslint/no-unsafe-call, @typescript-eslint/no-unsafe-member-access
|
||||
googleAnalytics({
|
||||
measurementIds: ['UA-153180559-1']
|
||||
}),
|
||||
// eslint-disable-next-line @typescript-eslint/ban-ts-comment
|
||||
// @ts-ignore
|
||||
plausible({
|
||||
domain: 'mermaid.live',
|
||||
hashMode: false,
|
||||
trackLocalhost: false, // By default 'false'
|
||||
apiHost: 'https://plausible.io'
|
||||
googleAnalytics.init({
|
||||
trackingId: 'UA-153180559-1'
|
||||
})
|
||||
]
|
||||
});
|
||||
} catch (e) {
|
||||
console.log(e);
|
||||
} catch {
|
||||
console.info('Analytics blocked ;)');
|
||||
}
|
||||
}
|
||||
@@ -43,20 +33,17 @@ const detectType = (text: string): string => {
|
||||
};
|
||||
|
||||
// manual debounce
|
||||
let timeout: number;
|
||||
let timeout;
|
||||
export const saveStatistics = (graph: string): void => {
|
||||
if (analytics) {
|
||||
clearTimeout(timeout);
|
||||
// Only save statistics after a 5 sec delay
|
||||
timeout = window.setTimeout(() => {
|
||||
timeout = setTimeout(function () {
|
||||
const graphType = detectType(graph);
|
||||
console.debug(`ga: send event: render ${graphType}`);
|
||||
void logEvent('render', { graphType });
|
||||
console.debug('ga:', 'send', 'event', 'render', graphType);
|
||||
void analytics.track('render', {
|
||||
graphType
|
||||
});
|
||||
}, 5000);
|
||||
}
|
||||
};
|
||||
|
||||
// eslint-disable-next-line @typescript-eslint/no-explicit-any
|
||||
export const logEvent = async (name: string, data?: any): Promise<void> => {
|
||||
await analytics?.track(name, data);
|
||||
};
|
||||
|
||||
@@ -1,7 +1,6 @@
|
||||
import { writable } from 'svelte/store';
|
||||
import type { Writable } from 'svelte/store';
|
||||
import { persist, localStorage } from '$lib/util/persist';
|
||||
import { logEvent } from './stats';
|
||||
import { persist, localStorage } from '@macfja/svelte-persistent-store';
|
||||
|
||||
export interface ThemeConfig {
|
||||
isDark: boolean;
|
||||
@@ -34,5 +33,4 @@ export const setTheme = (theme: string): void => {
|
||||
const isDark = darkThemes.includes(theme);
|
||||
console.log('Setting theme', theme);
|
||||
themeStore.set({ theme, isDark });
|
||||
void logEvent('themeChange', { theme, isDark });
|
||||
};
|
||||
|
||||
@@ -1,8 +1,8 @@
|
||||
import type { State } from '$lib/types';
|
||||
import { initURLSubscription, loadState, updateCodeStore } from './state';
|
||||
import { analytics, initAnalytics } from './stats';
|
||||
import { loadDataFromUrl } from './fileLoaders/loader';
|
||||
import { initLoading } from './loading';
|
||||
import { applyMigrations } from './migrations';
|
||||
|
||||
export const loadStateFromURL = (): void => {
|
||||
loadState(window.location.hash.slice(1));
|
||||
@@ -11,11 +11,10 @@ export const loadStateFromURL = (): void => {
|
||||
export const syncDiagram = (): void => {
|
||||
updateCodeStore({
|
||||
updateDiagram: true
|
||||
});
|
||||
} as State);
|
||||
};
|
||||
|
||||
export const initHandler = async (): Promise<void> => {
|
||||
applyMigrations();
|
||||
loadStateFromURL();
|
||||
await initLoading('Loading Gist...', loadDataFromUrl().catch(console.error));
|
||||
syncDiagram();
|
||||
@@ -23,6 +22,3 @@ export const initHandler = async (): Promise<void> => {
|
||||
await initAnalytics();
|
||||
analytics?.page();
|
||||
};
|
||||
|
||||
export const isMac = navigator.platform.toUpperCase().indexOf('MAC') >= 0;
|
||||
export const cmdKey = isMac ? 'Cmd' : 'Ctrl';
|
||||
|
||||
@@ -1,3 +0,0 @@
|
||||
export const prerender = true;
|
||||
export const csr = true;
|
||||
export const ssr = false;
|
||||
@@ -0,0 +1,2 @@
|
||||
import { GET as manifestGet } from '../manifest.json';
|
||||
export const GET = manifestGet;
|
||||
@@ -5,14 +5,10 @@
|
||||
import { loadingStateStore } from '$lib/util/loading';
|
||||
import { setTheme, themeStore } from '$lib/util/theme';
|
||||
import { toggleDarkTheme } from '$lib/util/state';
|
||||
import { initHandler } from '$lib/util/util';
|
||||
|
||||
// This can be removed once https://github.com/sveltejs/kit/issues/1612 is fixed.
|
||||
// Then move it into src and vite will bundle it automatically.
|
||||
onMount(() => {
|
||||
window.addEventListener('hashchange', async (ev) => {
|
||||
await initHandler();
|
||||
});
|
||||
if ('serviceWorker' in navigator) {
|
||||
navigator.serviceWorker
|
||||
.register(`${base}/service-worker.js`, {
|
||||
@@ -6,12 +6,20 @@
|
||||
import View from '$lib/components/view.svelte';
|
||||
import Card from '$lib/components/card/card.svelte';
|
||||
import History from '$lib/components/history/history.svelte';
|
||||
import { inputStateStore, stateStore, updateCodeStore } from '$lib/util/state';
|
||||
import { cmdKey, initHandler, syncDiagram } from '$lib/util/util';
|
||||
import { updateCode, updateConfig, inputStateStore, stateStore } from '$lib/util/state';
|
||||
import { initHandler, syncDiagram } from '$lib/util/util';
|
||||
import { onMount } from 'svelte';
|
||||
import type { Tab, DocConfig, EditorMode, ValidatedState } from '$lib/types';
|
||||
import type { EditorUpdateEvent, State, Tab, DocConfig } from '$lib/types';
|
||||
import { base } from '$app/paths';
|
||||
|
||||
type Modes = 'code' | 'config';
|
||||
type Languages = 'mermaid' | 'json';
|
||||
|
||||
let selectedMode: Modes = 'code';
|
||||
const languageMap: { [key in Modes]: Languages } = {
|
||||
code: 'mermaid',
|
||||
config: 'json'
|
||||
};
|
||||
const docURLBase = 'https://mermaid-js.github.io/mermaid';
|
||||
const docMap: DocConfig = {
|
||||
graph: {
|
||||
@@ -52,23 +60,33 @@
|
||||
config: '/#/gitgraph?id=gitgraph-specific-configuration-options'
|
||||
}
|
||||
};
|
||||
let text = '';
|
||||
let docURL = docURLBase;
|
||||
let activeTabID = 'code';
|
||||
stateStore.subscribe(({ code, editorMode }: ValidatedState) => {
|
||||
activeTabID = editorMode;
|
||||
const codeTypeMatch = /([\S]+)[\s\n]/.exec(code);
|
||||
let language: Languages = 'mermaid';
|
||||
$: language = languageMap[selectedMode];
|
||||
$: {
|
||||
if (selectedMode === 'code') {
|
||||
text = $stateStore.code;
|
||||
} else {
|
||||
text = $stateStore.mermaid;
|
||||
}
|
||||
}
|
||||
|
||||
stateStore.subscribe((state: State) => {
|
||||
if (state.updateEditor) {
|
||||
text = selectedMode === 'code' ? state.code : state.mermaid;
|
||||
}
|
||||
const codeTypeMatch = /([\S]+)[\s\n]/.exec(state.code);
|
||||
if (codeTypeMatch && codeTypeMatch.length > 1) {
|
||||
const docKey = codeTypeMatch[1];
|
||||
const docConfig = docMap[docKey] ?? { code: '' };
|
||||
docURL = docURLBase + (docConfig[editorMode] ?? docConfig.code ?? '');
|
||||
docURL = docURLBase + (docConfig[selectedMode] ?? docConfig.code ?? '');
|
||||
}
|
||||
});
|
||||
|
||||
const tabSelectHandler = (message: CustomEvent<Tab>) => {
|
||||
const editorMode: EditorMode = message.detail.id === 'code' ? 'code' : 'config';
|
||||
updateCodeStore({ editorMode });
|
||||
selectedMode = message.detail.id === 'code' ? 'code' : 'config';
|
||||
$inputStateStore.updateEditor = true;
|
||||
};
|
||||
|
||||
const tabs: Tab[] = [
|
||||
{
|
||||
id: 'code',
|
||||
@@ -82,6 +100,17 @@
|
||||
}
|
||||
];
|
||||
|
||||
const updateHandler = (message: CustomEvent<EditorUpdateEvent>) => {
|
||||
const code = message.detail.text;
|
||||
if (selectedMode === 'code') {
|
||||
updateCode(code, {
|
||||
updateEditor: false
|
||||
});
|
||||
} else {
|
||||
updateConfig(code, false);
|
||||
}
|
||||
};
|
||||
|
||||
onMount(async () => {
|
||||
await initHandler();
|
||||
const resizer = document.getElementById('resizeHandler');
|
||||
@@ -108,33 +137,35 @@
|
||||
<Navbar />
|
||||
<div class="flex-1 flex overflow-hidden">
|
||||
<div class="hidden md:flex flex-col" id="editorPane" style="width: 40%">
|
||||
<Card on:select={tabSelectHandler} {tabs} isCloseable={false} {activeTabID} title="Mermaid">
|
||||
<div slot="actions" class="flex flex-row items-center">
|
||||
<div class="form-control flex-row items-center">
|
||||
<label class="cursor-pointer label" for="autoSync">
|
||||
<span> Auto sync</span>
|
||||
<input
|
||||
type="checkbox"
|
||||
class="toggle {$stateStore.autoSync ? 'btn-secondary' : 'toggle-primary'} ml-1"
|
||||
id="autoSync"
|
||||
bind:checked={$inputStateStore.autoSync} />
|
||||
</label>
|
||||
<Card on:select={tabSelectHandler} {tabs} isCloseable={false} title="Mermaid">
|
||||
<div slot="actions">
|
||||
<div class="flex flex-row items-center">
|
||||
<div class="form-control flex-row items-center">
|
||||
<label class="cursor-pointer label" for="autoSync">
|
||||
<span> Auto sync</span>
|
||||
<input
|
||||
type="checkbox"
|
||||
class="toggle {$stateStore.autoSync ? 'btn-secondary' : 'toggle-primary'} ml-1"
|
||||
id="autoSync"
|
||||
bind:checked={$inputStateStore.autoSync} />
|
||||
</label>
|
||||
</div>
|
||||
|
||||
{#if !$stateStore.autoSync}
|
||||
<button
|
||||
class="btn btn-secondary btn-xs mr-1"
|
||||
title="Sync Diagram"
|
||||
data-cy="sync"
|
||||
on:click={syncDiagram}><i class="fas fa-sync" /></button>
|
||||
{/if}
|
||||
|
||||
<button class="btn btn-secondary btn-xs" title="View documentation">
|
||||
<a target="_blank" href={docURL} data-cy="docs"><i class="fas fa-book mr-1" />Docs</a>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{#if !$stateStore.autoSync}
|
||||
<button
|
||||
class="btn btn-secondary btn-xs mr-1"
|
||||
title="Sync Diagram ({cmdKey} + Enter)"
|
||||
data-cy="sync"
|
||||
on:click={syncDiagram}><i class="fas fa-sync" /></button>
|
||||
{/if}
|
||||
|
||||
<button class="btn btn-secondary btn-xs" title="View documentation">
|
||||
<a target="_blank" href={docURL} data-cy="docs"><i class="fas fa-book mr-1" />Docs</a>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<Editor />
|
||||
<Editor on:update={updateHandler} {language} bind:text />
|
||||
</Card>
|
||||
|
||||
<div class="-mt-2">
|
||||
@@ -146,22 +177,13 @@
|
||||
<div id="resizeHandler" class="hidden md:block" />
|
||||
<div class="flex-1 flex flex-col overflow-hidden">
|
||||
<Card title="Diagram" isCloseable={false}>
|
||||
<div slot="actions" class="flex flex-row items-center">
|
||||
<label class="cursor-pointer label py-0" for="panZoom">
|
||||
<span>Pan & Zoom</span>
|
||||
<input
|
||||
type="checkbox"
|
||||
class="toggle {$stateStore.panZoom ? 'btn-secondary' : 'toggle-primary'} ml-1"
|
||||
id="panZoom"
|
||||
bind:checked={$inputStateStore.panZoom} />
|
||||
</label>
|
||||
<a
|
||||
href={`${base}/view#${$stateStore.serialized}`}
|
||||
target="_blank"
|
||||
class="btn btn-secondary btn-xs"
|
||||
title="View diagram in new page"
|
||||
><i class="fas fa-external-link-alt mr-1" />Full screen</a>
|
||||
</div>
|
||||
<a
|
||||
href={`${base}/view#${$stateStore.serialized}`}
|
||||
target="_blank"
|
||||
slot="actions"
|
||||
class="btn btn-secondary btn-xs"
|
||||
title="View diagram in new page"
|
||||
><i class="fas fa-external-link-alt mr-1" />Full screen</a>
|
||||
|
||||
<div class="flex-1 overflow-auto">
|
||||
<View />
|
||||
@@ -0,0 +1,28 @@
|
||||
import { base } from '$app/paths';
|
||||
export const GET = (): { body: unknown } => {
|
||||
return {
|
||||
body: {
|
||||
short_name: 'Mermaid',
|
||||
name: 'Mermaid Live Editor',
|
||||
icons: [
|
||||
{
|
||||
src: `${base}/icon-192.png`,
|
||||
type: 'image/png',
|
||||
sizes: '192x192'
|
||||
},
|
||||
{
|
||||
src: `${base}/icon-512.png`,
|
||||
type: 'image/png',
|
||||
sizes: '512x512'
|
||||
}
|
||||
],
|
||||
start_url: `${base}/edit/`,
|
||||
background_color: '#6366F1',
|
||||
display: 'standalone',
|
||||
scope: `${base}/edit/`,
|
||||
theme_color: '#6366F1',
|
||||
description: 'FlowChart & Diagrams Editor.',
|
||||
orientation: 'landscape'
|
||||
}
|
||||
};
|
||||
};
|
||||
+1
-8
@@ -1,11 +1,4 @@
|
||||
import matchers from '@testing-library/jest-dom/matchers';
|
||||
import { expect, beforeAll, vi } from 'vitest';
|
||||
import { expect } from 'vitest';
|
||||
|
||||
expect.extend(matchers);
|
||||
|
||||
// TODO: Remove once https://github.com/sveltejs/kit/issues/6259 is closed.
|
||||
beforeAll(() => {
|
||||
vi.mock('$app/environment', () => ({
|
||||
browser: 'window' in globalThis
|
||||
}));
|
||||
});
|
||||
|
||||
@@ -1,23 +0,0 @@
|
||||
{
|
||||
"short_name": "Mermaid",
|
||||
"name": "Mermaid Live Editor",
|
||||
"icons": [
|
||||
{
|
||||
"src": "/icon-192.png",
|
||||
"type": "image/png",
|
||||
"sizes": "192x192"
|
||||
},
|
||||
{
|
||||
"src": "/icon-512.png",
|
||||
"type": "image/png",
|
||||
"sizes": "512x512"
|
||||
}
|
||||
],
|
||||
"start_url": "/edit/",
|
||||
"background_color": "#6366F1",
|
||||
"display": "standalone",
|
||||
"scope": "/edit/",
|
||||
"theme_color": "#6366F1",
|
||||
"description": "FlowChart & Diagrams Editor.",
|
||||
"orientation": "landscape"
|
||||
}
|
||||
+4
-1
@@ -19,7 +19,10 @@ const config = {
|
||||
base: `/mermaid-live-editor`
|
||||
}
|
||||
: {},
|
||||
trailingSlash: 'ignore'
|
||||
trailingSlash: 'ignore',
|
||||
prerender: {
|
||||
default: true
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
|
||||
+1
-2
@@ -5,8 +5,7 @@
|
||||
"src/**/*.svelte",
|
||||
"cypress/**/*.ts",
|
||||
"cypress/**/*.js",
|
||||
"static/**/*.js",
|
||||
"static/**/*.json"
|
||||
"static/**/*.js"
|
||||
],
|
||||
"compilerOptions": {
|
||||
"resolveJsonModule": true,
|
||||
|
||||
+3
-5
@@ -4,13 +4,11 @@ const config = {
|
||||
plugins: [sveltekit()],
|
||||
envPrefix: 'MERMAID_',
|
||||
optimizeDeps: { include: ['mermaid'] },
|
||||
server: {
|
||||
port: 3000,
|
||||
host: true
|
||||
ssr: {
|
||||
noExternal: ['@macfja/svelte-persistent-store']
|
||||
},
|
||||
preview: {
|
||||
port: 3000,
|
||||
host: true
|
||||
port: 3000
|
||||
},
|
||||
test: {
|
||||
environment: 'jsdom',
|
||||
|
||||
Reference in New Issue
Block a user