Merge pull request mermaid-js#166 from sidharthv96/master

Live editor V2

.eslintrc.cjs

@@ -0,0 +1,28 @@
+module.exports = {
+	root: true,
+	parser: '@typescript-eslint/parser',
+	extends: ['eslint:recommended', 'plugin:@typescript-eslint/recommended', 'prettier'],
+	plugins: ['svelte3', 'tailwindcss', '@typescript-eslint'],
+	ignorePatterns: ['docs/*', '*.cjs', 'snapshots.js'],
+	overrides: [{ files: ['*.svelte'], processor: 'svelte3/svelte3' }],
+	settings: {
+		'svelte3/typescript': () => require('typescript')
+	},
+	parserOptions: {
+		sourceType: 'module',
+		ecmaVersion: 2019
+	},
+	env: {
+		browser: true,
+		es2017: true,
+		node: true
+	},
+	rules: {
+		'@typescript-eslint/ban-ts-comment': [
+			'error',
+			{
+				'ts-ignore': 'allow-with-description'
+			}
+		]
+	}
+};

.github/codeql/config.yml

@@ -0,0 +1,7 @@
+name: 'Mermaid CodeQL config'
+
+paths:
+  - src
+paths-ignore:
+  - node_modules
+  - '**/*.spec.js'

.github/workflows/codeql-analysis.yml

@@ -9,14 +9,14 @@
 # the `language` matrix defined below to confirm you have the correct set of
 # supported CodeQL languages.
 #
-name: "CodeQL"
+name: 'CodeQL'
 
 on:
   push:
-    branches: [ master ]
+    branches: [master]
   pull_request:
     # The branches below must be a subset of the branches above
-    branches: [ master ]
+    branches: [master]
   schedule:
     - cron: '36 1 * * 2'
 
@@ -28,40 +28,41 @@ jobs:
     strategy:
       fail-fast: false
       matrix:
-        language: [ 'javascript' ]
+        language: ['javascript']
         # CodeQL supports [ 'cpp', 'csharp', 'go', 'java', 'javascript', 'python' ]
         # Learn more:
         # https://docs.github.com/en/free-pro-team@latest/github/finding-security-vulnerabilities-and-errors-in-your-code/configuring-code-scanning#changing-the-languages-that-are-analyzed
 
     steps:
-    - name: Checkout repository
-      uses: actions/checkout@v2
+      - name: Checkout repository
+        uses: actions/checkout@v2
 
-    # Initializes the CodeQL tools for scanning.
-    - name: Initialize CodeQL
-      uses: github/codeql-action/init@v1
-      with:
-        languages: ${{ matrix.language }}
-        # If you wish to specify custom queries, you can do so here or in a config file.
-        # By default, queries listed here will override any specified in a config file.
-        # Prefix the list here with "+" to use these queries and those in the config file.
-        # queries: ./path/to/local/query, your-org/your-repo/queries@main
+      # Initializes the CodeQL tools for scanning.
+      - name: Initialize CodeQL
+        uses: github/codeql-action/init@v1
+        with:
+          config-file: ./.github/codeql/config.yml
+          languages: ${{ matrix.language }}
+          # If you wish to specify custom queries, you can do so here or in a config file.
+          # By default, queries listed here will override any specified in a config file.
+          # Prefix the list here with "+" to use these queries and those in the config file.
+          # queries: ./path/to/local/query, your-org/your-repo/queries@main
 
-    # Autobuild attempts to build any compiled languages  (C/C++, C#, or Java).
-    # If this step fails, then you should remove it and run the build manually (see below)
-    - name: Autobuild
-      uses: github/codeql-action/autobuild@v1
+      # Autobuild attempts to build any compiled languages  (C/C++, C#, or Java).
+      # If this step fails, then you should remove it and run the build manually (see below)
+      # - name: Autobuild
+      #   uses: github/codeql-action/autobuild@v1
 
-    # ℹ️ Command-line programs to run using the OS shell.
-    # 📚 https://git.io/JvXDl
+      # ℹ️ Command-line programs to run using the OS shell.
+      # 📚 https://git.io/JvXDl
 
-    # ✏️ If the Autobuild fails above, remove it and uncomment the following three lines
-    #    and modify them (or add more) to build your code if your project
-    #    uses a compiled language
+      # ✏️ If the Autobuild fails above, remove it and uncomment the following three lines
+      #    and modify them (or add more) to build your code if your project
+      #    uses a compiled language
 
-    #- run: |
-    #   make bootstrap
-    #   make release
+      #- run: |
+      #   make bootstrap
+      #   make release
 
-    - name: Perform CodeQL Analysis
-      uses: github/codeql-action/analyze@v1
+      - name: Perform CodeQL Analysis
+        uses: github/codeql-action/analyze@v1

.github/workflows/cypress.yml

@@ -0,0 +1,37 @@
+name: Cypress Tests
+
+on: [push]
+
+jobs:
+  cypress-run:
+    runs-on: ubuntu-latest
+    container: cypress/browsers:node14.16.0-chrome90-ff88
+
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v2
+
+      - uses: actions/cache@v2
+        id: yarn-and-build-cache
+        with:
+          path: |
+            ~/.cache/Cypress
+            build
+            node_modules
+          key: ${{ runner.os }}-node_modules-build-${{ hashFiles('**/yarn.lock') }}
+          restore-keys: |
+            ${{ runner.os }}-node_modules-build-
+
+      # Install NPM dependencies, cache them correctly
+      # and run all Cypress tests
+      - name: Cypress run
+        uses: cypress-io/github-action@v2
+        with:
+          build: yarn build
+          start: yarn preview
+          wait-on: 'http://localhost:3000'
+          wait-on-timeout: 120
+          record: true
+          headless: true
+        env:
+          CYPRESS_RECORD_KEY: ${{ secrets.CYPRESS_RECORD_KEY }}

.github/workflows/deploy.yml

@@ -14,14 +14,29 @@ jobs:
       - name: Checkout
         uses: actions/checkout@v2
 
+      - uses: actions/cache@v2
+        id: yarn-and-build-cache
+        with:
+          path: |
+            node_modules
+          key: ${{ runner.os }}-node_modules-build-deploy-${{ hashFiles('**/yarn.lock') }}
+          restore-keys: |
+            ${{ runner.os }}-node_modules-build-deploy-
+
       - name: Build & Deploy
         run: |
           npm i -g yarn
+          export DEPLOY=true
+          rm -rf docs/_app
           yarn install
-          yarn version --patch --no-git-tag-version
-          yarn release
+          # yarn run lint
+          version=$(yarn version --patch --no-git-tag-version | grep "New version" | cut -d':' -f 2)
+          yarn build
+          cd bin
+          ./fix-path
+          cd ..
           git config user.name github-actions
           git config user.email github-actions@github.com
           git add .
-          git commit -m "Release $(yarn version --version)"
+          git commit -m "Release $version"
           git push

.gitignore

@@ -4,4 +4,10 @@ coverage/
 build/
 yarn-error.log
 .npmrc
-*node_modules*
+.DS_Store
+/.svelte-kit
+/build
+/functions
+/snapshots.js
+/cypress/videos
+/cypress/screenshots

.npmrc

@@ -0,0 +1 @@
+engine-strict=true

.prettierignore

@@ -1 +1,6 @@
-dist/
+docs/**
+.svelte-kit/**
+static/**
+build/**
+node_modules/**
+snapshots.js

.prettierrc

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

Dockerfile

@@ -7,7 +7,6 @@
 #                                     or 
 #                                        docker stop mermaid-live-editor
 
-
 FROM node:14.16.0-alpine3.13 as mermaid-live-editor-builder
 COPY --chown=node:node . /home
 WORKDIR /home

README.md

@@ -46,11 +46,10 @@ registry=https://registry.npmjs.com/
 ## Development
 
 ```
-yarn dev
-open http://localhost:8080
+yarn dev -- --open
 ```
 
-This app is created with Svelte + svelte-spa-router.
+This app is created with Svelte Kit.
 
 ## Release
 

bin/fix-path

@@ -0,0 +1,6 @@
+#!/bin/bash
+pushd ../docs
+# find ./ -type f -exec sed -i 's/service-worker.js/mermaid-live-editor\/service-worker.js/g' {} \;
+find ./ -type f -exec sed -i 's/manifest.json/\/mermaid-live-editor\/manifest.json/g' {} \;
+find ./ -type f -exec sed -i 's/favicon.png/\/mermaid-live-editor\/favicon.png/g' {} \;
+popd

cypress.json

@@ -0,0 +1,11 @@
+{
+	"projectId": "2ckppp",
+	"$schema": "https://on.cypress.io/cypress.schema.json",
+	"baseUrl": "http://localhost:3000",
+	"pluginsFile": "./cypress/plugins/index.cjs",
+	"viewportWidth": 1440,
+	"viewportHeight": 768,
+	"snapshotFileName": "./cypress/snapshots.js",
+	"defaultCommandTimeout": 16000,
+	"requestTimeout": 16000
+}

cypress/.eslintrc

@@ -0,0 +1,12 @@
+{
+	"plugins": ["cypress", "mocha"],
+	"extends": ["plugin:cypress/recommended", "plugin:mocha/recommended"],
+	"rules": {
+		"jest/expect-expect": "off",
+		"mocha/no-mocha-arrows": "off"
+	},
+	"env": {
+		"cypress/globals": true,
+		"mocha": true
+	}
+}

cypress/fixtures/example.json

@@ -0,0 +1,5 @@
+{
+	"name": "Using fixtures to represent data",
+	"email": "hello@cypress.io",
+	"body": "Fixtures are a great way to mock data for responses to routes"
+}

cypress/integration/actions.spec.ts

@@ -0,0 +1,20 @@
+describe('Check actions', () => {
+	// eslint-disable-next-line mocha/no-hooks-for-single-case
+	beforeEach(() => {
+		cy.clearLocalStorage();
+		cy.visit('/edit');
+		cy.contains('Actions').click();
+	});
+	it('should update markdown code', () => {
+		cy.get('#markdown')
+			.invoke('val')
+			.then((oldText) => {
+				cy.get('#editor').click('bottom').type('{enter}C --> HistoryTest');
+				cy.get('#markdown')
+					.invoke('val')
+					.then((newText) => {
+						expect(oldText).to.not.eq(newText);
+					});
+			});
+	});
+});

cypress/integration/diagramUpdate.spec.ts

@@ -0,0 +1,33 @@
+describe('Auto sync tests', () => {
+	beforeEach(() => {
+		cy.clearLocalStorage();
+		cy.visit('/');
+	});
+	it('should dim diagram when code is edited', () => {
+		cy.contains('Auto sync').click();
+		cy.get('#view').should('not.have.class', 'outOfSync');
+		cy.get('#editor').type('  C --> Test');
+		cy.get('#view').should('have.class', 'outOfSync');
+		cy.getLocalStorage('codeStore').snapshot();
+	});
+
+	it('should show/hide sync button with auto sync', () => {
+		cy.get('[data-cy=sync]').should('not.exist');
+		cy.contains('Auto sync').click();
+		cy.get('[data-cy=sync]').should('exist');
+		cy.get('#autoSync').check();
+		cy.get('[data-cy=sync]').should('not.exist');
+	});
+	it('should not dim diagram when code is in sync', () => {
+		cy.contains('Auto sync').click();
+		cy.get('#view').should('not.have.class', 'outOfSync');
+		cy.get('#editor').type('  C --> Test');
+		cy.get('#view').should('have.class', 'outOfSync');
+		cy.get('[data-cy=sync]').click();
+		cy.get('#view').should('not.have.class', 'outOfSync');
+		cy.get('#autoSync').check();
+		cy.get('#editor').type('ing');
+		cy.get('#view').should('not.have.class', 'outOfSync');
+		cy.getLocalStorage('codeStore').snapshot();
+	});
+});