@zenuml/core 2.0.16 → 2.0.18

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -75,5 +75,22 @@ A.method
75
75
  The entry point of the demo pages is `src/main.ts`. It will find all the `pre` elements with
76
76
  class `zenuml` and render the ZenUML DSL code in it.
77
77
 
78
+ == Parser
78
79
 
80
+ We use antlr4 to parse the ZenUML DSL code. The grammar files are:
81
+
82
+ 1. Parser: `./src/g4/sequenceParser.g4`
83
+ 2. Lexer: `./src/g4/sequenceLexer.g4`
84
+
85
+ === How to generate the parser and lexer
86
+
87
+ Run `yarn antlr4` to generate the parser and lexer.
88
+
89
+ === Setup local development environment
90
+
91
+ Run `yarn antlr:setup` (`python3 -m pip install antlr4-tools`) to install the antlr4 command and the runtime.
92
+
93
+ To test the setup, go to `src/g4-unit/hello-world` folder, and run:
94
+
95
+ 1.
79
96
 
@@ -0,0 +1,38 @@
1
+ This document describe the design of parsing rules for the `divider` statement.
2
+
3
+ ## Typical use case
4
+
5
+ The `divider` statement is used to separate the sequence of statements into logical
6
+ groups.
7
+
8
+ For example, a HTTPS sequence can be separated into three logical groups:
9
+ 1. Connect establishment
10
+ 2. TLS handshake
11
+ 3. HTTP request/response
12
+
13
+ ```
14
+ Client->Server: TCP SYNC
15
+ Server->Client: TCP SYN+ACK
16
+ Client->Server: TCP ACK
17
+ == Connection Established ==
18
+ Client->Server: TLS Client Hello
19
+ Server->Client: TLS Server Hello
20
+ Server->Client: TLS Certificate
21
+ Server->Client: TLS Server Hello Done
22
+ == Certificate Check ==
23
+ Client->Server: TLS Client Key Exchange
24
+ Client->Server: TLS Change Cipher Spec
25
+ Client->Server: TLS Finished
26
+ Server->Client: TLS Change Cipher Spec
27
+ Server->Client: TLS Finished
28
+ == Key Exchange, Handshake Completed ==
29
+ Client->Server: HTTP Request
30
+ Server->Client: HTTP Response
31
+ ```
32
+
33
+ ## The Lexer
34
+
35
+
36
+ ## `divider` is a statement
37
+
38
+ `divider` is treated as a statement as any other messages.
package/index.html ADDED
@@ -0,0 +1,84 @@
1
+ <!DOCTYPE html>
2
+ <html>
3
+ <head>
4
+ <link rel='preconnect' href='https://fonts.gstatic.com' crossorigin>
5
+ <link rel='preload stylesheet' as='style' href='https://fonts.googleapis.com/css2?family=Roboto+Slab:wght@300;400;500;700&display=swap'>
6
+ <!-- <link rel='stylesheet' href='https://fonts.googleapis.com/css2?family=Roboto+Slab:wght@300;400;500;700&display=swap'>-->
7
+ <style id="zenumlstyle">/* Prefix your CSS rules with `#diagram` */
8
+ /*@import url('https://fonts.googleapis.com/css2?family=Kalam:wght@300;400;700&display=swap');*/
9
+ /*!*@import url("https://fonts.googleapis.com/css2?family=Roboto+Slab:wght@300;400;500;700&display=swap");*!*/
10
+
11
+ /*#diagram1 .sequence-diagram {*/
12
+ /* font-family: "Kalam", serif;*/
13
+ /*}*/
14
+
15
+ </style>
16
+ <meta charset="utf-8">
17
+ <meta http-equiv="X-UA-Compatible" content="IE=edge">
18
+ <meta name="viewport" content="width=device-width,initial-scale=1.0">
19
+ <link rel="stylesheet"
20
+ href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/10.1.1/styles/default.min.css" crossOrigin="anonymous">
21
+ <script src="https://cdn.jsdelivr.net/npm/codemirror@5.65.1/lib/codemirror.min.js"></script>
22
+ <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.65.1/codemirror.min.css" crossOrigin="anonymous" integrity="sha512-uf06llspW44/LZpHzHT6qBOIVODjWtv4MxCricRxkzvopAlSWnTf6hpZTFxuuZcuNE9CBQhqE0Seu1CoRk84nQ==" crossorigin="anonymous" referrerpolicy="no-referrer" />
23
+ <title>ZenUML Core Demo</title>
24
+ <style>
25
+ .zenuml .CodeMirror {
26
+ /* Set height, width, borders, and global font properties here */
27
+ font-family: monospace;
28
+ font-size: 13px;
29
+ height: 800px;
30
+ }
31
+ </style>
32
+ </head>
33
+ <!-- .zenuml will enable "important" feature of tailwindcss. This class is also added to
34
+ DiagramFrame so the diagram itself always works fine. This .zenuml is to make sure the
35
+ editor and other layouts work properly.-->
36
+ <body class="zenuml">
37
+ <noscript>
38
+ <strong>We're sorry but vue-sequence doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
39
+ </noscript>
40
+ <div class="m-1 grid grid-cols-6" id="diagram1">
41
+ <div class="col-span-2">
42
+ <textarea id="text" class="col-span-1 m-1 border-2" cols="30" rows="200" oninput="updateCode(this.value)"></textarea>
43
+ </div>
44
+ <div class="col-span-4">
45
+ <pre class="zenuml">
46
+
47
+ </pre>
48
+ </div>
49
+ </div>
50
+ <script>
51
+ const editor = CodeMirror.fromTextArea(document.getElementById("text"), {
52
+ lineNumbers: true,
53
+ singleCursorHeightPerLine: false,
54
+ });
55
+
56
+ // implement a waitUntil function
57
+ function waitUntil(condition, callback) {
58
+ if (condition()) {
59
+ callback();
60
+ } else {
61
+ setTimeout(function () {
62
+ waitUntil(condition, callback);
63
+ }, 100);
64
+ }
65
+ }
66
+
67
+ editor.on("change", function(cm) {
68
+ waitUntil( () => {return window.zenUml}, () => {
69
+ window.zenUml.render(cm.getValue(), 'theme-default').then(r => {
70
+ window.parentLogger.child({module: 'index.html'}).debug('render resolved', r);
71
+ });
72
+ });
73
+ // write cm.getValue() to localStorage
74
+ localStorage.setItem('zenuml-cm-code', cm.getValue());
75
+ });
76
+ // read localStorage and set to code mirror
77
+ const code = localStorage.getItem('zenuml-cm-code');
78
+ if (code) {
79
+ editor.setValue(code);
80
+ }
81
+ </script>
82
+ <script type="module" src="src/main.ts"></script>
83
+ </body>
84
+ </html>
package/package.json CHANGED
@@ -1,22 +1,29 @@
1
1
  {
2
2
  "name": "@zenuml/core",
3
- "version": "2.0.16",
3
+ "version": "2.0.18",
4
4
  "private": false,
5
5
  "repository": {
6
6
  "url": "https://github.com/ZenUml/core.git"
7
7
  },
8
8
  "scripts": {
9
+ "dev": "vite",
9
10
  "build:site": "vue-cli-service build",
10
- "build": "vue-cli-service build --target lib --inline-vue --name zenuml/core ./src/core.ts",
11
+ "build": "vite build",
11
12
  "build:report": "vue-cli-service build --report --target lib --inline-vue --name zenuml/core ./src/core.ts",
12
- "test:unit": "vue-cli-service test:unit",
13
- "test:unit:watch": "yarn antlr && vue-cli-service test:unit --watch",
13
+ "test:unit": "jest",
14
+ "test": "vitest",
15
+ "test:unit:watch": "pnpm run antlr && vue-cli-service test:unit --watch",
14
16
  "cy": "cypress run",
17
+ "cy:open": "cypress open",
15
18
  "lint": "vue-cli-service lint",
16
- "antlr": "yarn antlr:lexer && yarn antlr:parser",
19
+ "antlr:setup": "python3 -m pip install antlr4-tools",
20
+ "antlr:generate": "pwd && cd ./src/g4-units/hello-world && antlr4 Hello.g4",
21
+ "antlr:javac": "pwd && cd ./src/g4-units/hello-world && CLASSPATH=\"../../../antlr/antlr-4.11.1-complete.jar:$CLASSPATH\" javac *.java",
22
+ "antlr:grun": "pwd && cd ./src/g4-units/hello-world && grun Hello r -tokens",
23
+ "antlr": "pnpm run antlr:lexer && pnpm run antlr:parser",
17
24
  "antlr:clear": "rm -rf src/generated-parser/*",
18
- "antlr:lexer": "java -Duser.dir=$(pwd)/src/g4 -cp $(pwd)/antlr/antlr-4.8-complete.jar org.antlr.v4.Tool -o ./src/generated-parser -Dlanguage=JavaScript sequenceLexer.g4",
19
- "antlr:parser": "java -Duser.dir=$(pwd)/src/g4 -cp $(pwd)/antlr/antlr-4.8-complete.jar org.antlr.v4.Tool -o ./src/generated-parser -Dlanguage=JavaScript sequenceParser.g4",
25
+ "antlr:lexer": "java -Duser.dir=$(pwd)/src/g4 -cp $(pwd)/antlr/antlr-4.11.1-complete.jar org.antlr.v4.Tool -o ./src/generated-parser -Dlanguage=JavaScript sequenceLexer.g4",
26
+ "antlr:parser": "java -Duser.dir=$(pwd)/src/g4 -cp $(pwd)/antlr/antlr-4.11.1-complete.jar org.antlr.v4.Tool -o ./src/generated-parser -Dlanguage=JavaScript sequenceParser.g4",
20
27
  "build-crx": "vue-cli-service build --mode production --target lib --name zenuml/core ./src/index.js",
21
28
  "start": "vue-cli-service serve",
22
29
  "git:branch:clean:gone": "git fetch -p && git branch -vv | awk '/: gone]/{print $1}' | xargs git branch -d",
@@ -30,7 +37,7 @@
30
37
  "dependencies": {
31
38
  "@types/assert": "^1.5.4",
32
39
  "@types/ramda": "^0.28.0",
33
- "antlr4": "~4.8.0",
40
+ "antlr4": "^4.11.0",
34
41
  "color-string": "1.5.2",
35
42
  "dom-to-image-more": "^2.9.5",
36
43
  "file-saver": "^2.0.5",
@@ -42,53 +49,44 @@
42
49
  "postcss": "^8.4.19",
43
50
  "ramda": "^0.28.0",
44
51
  "tailwindcss": "^3.2.4",
45
- "vue": "2.6.12",
52
+ "vue": "2.7.14",
46
53
  "vue-gtag": "^1.16.1",
47
- "vue-template-compiler": "2.6.12",
48
54
  "vuex": "^3.6.2"
49
55
  },
50
56
  "devDependencies": {
51
- "@babel/cli": "^7.10.4",
52
- "@babel/core": "^7.10.4",
53
- "@babel/plugin-proposal-optional-chaining": "^7.10.1",
54
- "@babel/plugin-transform-arrow-functions": "^7.10.1",
55
- "@babel/plugin-transform-modules-commonjs": "^7.10.1",
56
- "@babel/polyfill": "^7.10.1",
57
- "@babel/preset-env": "^7.13.5",
58
- "@babel/runtime-corejs2": "^7.12.13",
57
+ "@babel/eslint-parser": "^7.19.1",
58
+ "@babel/preset-env": "^7.20.2",
59
+ "@types/antlr4": "^4.11.2",
59
60
  "@types/color-string": "^1.5.2",
60
- "@types/jest": "^24.0.19",
61
+ "@types/jest": "^27.5.2",
61
62
  "@types/lodash": "^4.14.168",
62
63
  "@types/node": "latest",
63
- "@typescript-eslint/eslint-plugin": "^2.33.0",
64
- "@typescript-eslint/parser": "^2.33.0",
65
- "@vue/cli": "^5.0.8",
66
- "@vue/cli-plugin-babel": "~5.0.8",
67
- "@vue/cli-plugin-eslint": "~5.0.8",
68
- "@vue/cli-plugin-typescript": "~5.0.8",
69
- "@vue/cli-plugin-unit-jest": "~5.0.8",
70
- "@vue/cli-service": "~5.0.8",
71
- "@vue/eslint-config-typescript": "^5.0.2",
72
- "@vue/test-utils": "^1.1.3",
73
- "@vue/vue2-jest": "^29.1.1",
64
+ "@typescript-eslint/eslint-plugin": "^5.46.1",
65
+ "@typescript-eslint/parser": "^5.46.1",
66
+ "@vue/eslint-config-typescript": "^8.0.0",
67
+ "@vue/test-utils": "1.3.3",
68
+ "@vue/vue2-jest": "^27.0.0",
74
69
  "autoprefixer": "^10.4.13",
75
70
  "babel-eslint": "^10.1.0",
76
- "core-js": "^3.8.3",
71
+ "babel-jest": "^27.5.1",
77
72
  "cypress": "^9.4.1",
78
73
  "cypress-plugin-snapshots": "^1.4.4",
79
- "eslint": "7.32.0",
80
- "eslint-plugin-vue": "^7.6.0",
74
+ "eslint": "^8.30.0",
75
+ "eslint-plugin-vue": "^8.7.1",
81
76
  "global-jsdom": "^8.6.0",
82
- "jest": "^27.1.0",
77
+ "jest": "^27.5.1",
83
78
  "jsdom": "^20.0.2",
84
- "node-sass": "^5.0.0",
79
+ "node-sass": "^6.0.0",
85
80
  "regenerator-runtime": "^0.13.7",
86
- "sass-loader": "^10.1.0",
81
+ "sass": "^1.26.5",
87
82
  "svg-url-loader": "^6.0.0",
88
83
  "terser-webpack-plugin": "^3.0.6",
89
- "ts-jest": "^27.0.4",
84
+ "ts-jest": "^27.1.5",
90
85
  "typescript": "^4.7.4",
91
- "vue-cli-plugin-tailwind": "~3.0.0"
86
+ "vite": "^4.0.1",
87
+ "vite-plugin-vue2": "^2.0.2",
88
+ "vitest": "^0.26.1",
89
+ "vue-template-compiler": "^2.7.14"
92
90
  },
93
91
  "eslintConfig": {
94
92
  "root": true,
@@ -125,10 +123,11 @@
125
123
  "browserslist": [
126
124
  "last 2 years"
127
125
  ],
126
+ "packageManager": "pnpm@7.18.1",
128
127
  "engines": {
129
128
  "node": ">=12.0.0"
130
129
  },
131
130
  "volta": {
132
- "node": "14.21.1"
131
+ "node": "18.12.1"
133
132
  }
134
133
  }