@zenuml/core 2.0.17 → 2.0.19

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.
@@ -14,48 +14,6 @@ yarn build
14
14
  yarn build:site
15
15
  ....
16
16
 
17
- === Customize vue.config.js
18
-
19
- ==== Inline SVG
20
- When we build the library, SVG must be inlined.
21
-
22
- An inlined SVG looks like this:
23
- ....
24
- <img src='data:image/svg+xml;base64,<svg ... > ... </svg>'>
25
- ....
26
-
27
- [NOTE]
28
- ====
29
- [TODO] Note that we use the `base64` encoding as it is the default behaviour of webpack 5
30
- asset module `asset/inline`. However, `utf8` has https://www.npmjs.com/package/svg-url-loader[the following advantages]:
31
-
32
- 1. Resulting string is shorter (can be ~2 times shorter for 2K-sized icons);
33
- 2. Resulting string will be compressed better when using gzip compression;
34
- 3. Browser parses utf-8 encoded string faster than its base64 equivalent.
35
-
36
- This can be implemented with https://webpack.js.org/guides/asset-modules/#custom-data-uri-generator[custom data URI generator].
37
- ====
38
- The default loader build in vue cli service for svg files will not inline the SVG,
39
- but give a url (relative path) to the svg resource like this:
40
- ....
41
- <img src="/assets/arrow.svg">
42
- ....
43
- Client applications will not be able to load the SVG properly.
44
-
45
- To inline the SVG, we need to use https://webpack.js.org/guides/asset-modules/#inlining-assets[asset module `asset/inline`].
46
-
47
-
48
- [source, javascript]
49
- ....
50
- const svgRule = config.module.rule('svg')
51
- svgRule.store.clear();
52
- svgRule
53
- .test(/\.svg$/) // required because of store.clear()
54
- .type('asset/inline') // <1>
55
- .end()
56
- ....
57
- <1> `asset/inline` exports a data URI of the asset. Previously achievable by using `url-loader`. https://webpack.js.org/guides/asset-modules/#inlining-assets[See more]
58
-
59
17
  == Demo pages
60
18
  In the public folder, there are some demo pages for testing the library.
61
19
 
package/embed.html ADDED
@@ -0,0 +1,184 @@
1
+ <!DOCTYPE html>
2
+ <html style="height: 100%; width: 100%">
3
+ <head>
4
+ <meta charset="utf-8">
5
+ <meta http-equiv="X-UA-Compatible" content="IE=edge">
6
+ <meta name="viewport" content="width=device-width,initial-scale=1.0">
7
+ <meta name="application-name" content="ZenUML">
8
+ <meta name="apple-mobile-web-app-title" content="ZenUML">
9
+ <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
10
+ <title>ZenUML</title>
11
+ <meta name="Description" content="ZenUML is a free online diagram application for generating sequence diagrams from text.">
12
+ <meta name="Keywords" content="diagram, online, sequence diagram, uml">
13
+ </head>
14
+ <body style="height: 100%; width: 100%">
15
+ <noscript>
16
+ <strong>We're sorry but ZenUML doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
17
+ </noscript>
18
+ <script>
19
+ (() => {
20
+ async function handle_message(ev) {
21
+ let { action, cmd_id } = ev.data;
22
+ const send_message = (payload) => parent.postMessage( { ...payload }, ev.origin);
23
+ const send_reply = (payload) => send_message({ ...payload, cmd_id });
24
+ const send_ok = () => send_reply({ action: 'cmd_ok' });
25
+ const send_error = (message, stack) => send_reply({ action: 'cmd_error', message, stack });
26
+
27
+ if (action === 'eval') {
28
+ try {
29
+ let { code, theme, style, css } = ev.data.args
30
+ await zenUml.render(code, theme)
31
+ send_ok()
32
+ } catch (e) {
33
+ send_error(e.message, e.stack);
34
+ }
35
+ }
36
+
37
+ if (action === 'get_png') {
38
+ try {
39
+ let png = await zenUml.getPng()
40
+ send_reply({ action: 'cmd_png', png })
41
+ } catch (e) {
42
+ send_error(e.message, e.stack);
43
+ }
44
+ }
45
+
46
+ if (action === 'catch_clicks') {
47
+ try {
48
+ const top_origin = ev.origin;
49
+ document.body.addEventListener('click', event => {
50
+ if (event.which !== 1) return;
51
+ if (event.metaKey || event.ctrlKey || event.shiftKey) return;
52
+ if (event.defaultPrevented) return;
53
+
54
+ // ensure target is a link
55
+ let el = event.target;
56
+ while (el && el.nodeName !== 'A') el = el.parentNode;
57
+ if (!el || el.nodeName !== 'A') return;
58
+
59
+ if (el.hasAttribute('download') || el.getAttribute('rel') === 'external' || el.target) return;
60
+
61
+ event.preventDefault();
62
+
63
+ if (el.href.startsWith(top_origin)) {
64
+ const url = new URL(el.href);
65
+ if (url.hash[0] === '#') {
66
+ window.location.hash = url.hash;
67
+ return;
68
+ }
69
+ }
70
+
71
+ window.open(el.href, '_blank');
72
+ });
73
+ send_ok();
74
+ } catch(e) {
75
+ send_error(e.message, e.stack);
76
+ }
77
+ }
78
+ }
79
+
80
+ window.addEventListener('message', handle_message, false);
81
+
82
+ window.onerror = function (msg, url, lineNo, columnNo, error) {
83
+ if (msg.includes('module specifier “vue”')) {
84
+ // firefox only error, ignore
85
+ return false
86
+ }
87
+ try {
88
+ parent.postMessage({ action: 'error', value: error }, '*');
89
+ } catch (e) {
90
+ parent.postMessage({ action: 'error', value: msg }, '*');
91
+ }
92
+ }
93
+
94
+ window.addEventListener("unhandledrejection", event => {
95
+ if (event.reason.message.includes('Cross-origin')) {
96
+ event.preventDefault()
97
+ return
98
+ }
99
+ try {
100
+ parent.postMessage({ action: 'unhandledrejection', value: event.reason }, '*');
101
+ } catch (e) {
102
+ parent.postMessage({ action: 'unhandledrejection', value: event.reason.message }, '*');
103
+ }
104
+ });
105
+
106
+ let previous = { level: null, args: null };
107
+
108
+ ['clear', 'log', 'info', 'dir', 'warn', 'error', 'table'].forEach((level) => {
109
+ const original = console[level];
110
+ console[level] = (...args) => {
111
+ const msg = String(args[0])
112
+ if (
113
+ msg.includes('You are running a development build of Vue') ||
114
+ msg.includes('You are running the esm-bundler build of Vue')
115
+ ) {
116
+ return
117
+ }
118
+ const stringifiedArgs = stringify(args);
119
+ if (
120
+ previous.level === level &&
121
+ previous.args &&
122
+ previous.args === stringifiedArgs
123
+ ) {
124
+ parent !== window && parent.postMessage({ action: 'console', level, duplicate: true }, '*');
125
+ } else {
126
+ previous = { level, args: stringifiedArgs };
127
+
128
+ try {
129
+ parent !== window && parent.postMessage({ action: 'console', level, args }, '*');
130
+ } catch (err) {
131
+ parent !== window && parent.postMessage({ action: 'console', level, args: args.map(a => {
132
+ return a instanceof Error ? a.message : String(a)
133
+ }) }, '*');
134
+ }
135
+ }
136
+
137
+ original(...args);
138
+ }
139
+ });
140
+ [
141
+ { method: 'group', action: 'console_group' },
142
+ { method: 'groupEnd', action: 'console_group_end' },
143
+ { method: 'groupCollapsed', action: 'console_group_collapsed' },
144
+ ].forEach((group_action) => {
145
+ const original = console[group_action.method];
146
+ console[group_action.method] = (label) => {
147
+ parent.postMessage({ action: group_action.action, label }, '*');
148
+ console.log('group_action', group_action);
149
+ original(label);
150
+ };
151
+ });
152
+
153
+
154
+ const original_trace = console.trace;
155
+
156
+ console.trace = (...args) => {
157
+ const stack = new Error().stack;
158
+ parent.postMessage({ action: 'console', level: 'trace', args, stack }, '*');
159
+ original_trace(...args);
160
+ };
161
+
162
+
163
+ function stringify(args) {
164
+ try {
165
+ return JSON.stringify(args);
166
+ } catch (error) {
167
+ return null;
168
+ }
169
+ }
170
+ })()
171
+
172
+ </script>
173
+
174
+
175
+ <div id="diagram" class="diagram" style="text-align: center">
176
+ <pre class="zenuml">
177
+
178
+ </pre>
179
+ </div>
180
+ <script type="module" src="src/main.ts"></script>
181
+
182
+
183
+ </body>
184
+ </html>
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({name: '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,23 +1,27 @@
1
1
  {
2
2
  "name": "@zenuml/core",
3
- "version": "2.0.17",
3
+ "version": "2.0.19",
4
4
  "private": false,
5
5
  "repository": {
6
6
  "url": "https://github.com/ZenUml/core.git"
7
7
  },
8
8
  "scripts": {
9
- "build:site": "vue-cli-service build",
10
- "build": "vue-cli-service build --target lib --inline-vue --name zenuml/core ./src/core.ts",
9
+ "dev": "vite dev --port 8080",
10
+ "build:site": "vite build",
11
+ "build": "vite build -c vite.config.lib.js",
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",
18
+ "cy:smoke": "cypress run --spec cypress/e2e/smoke.spec.js",
15
19
  "lint": "vue-cli-service lint",
16
20
  "antlr:setup": "python3 -m pip install antlr4-tools",
17
21
  "antlr:generate": "pwd && cd ./src/g4-units/hello-world && antlr4 Hello.g4",
18
22
  "antlr:javac": "pwd && cd ./src/g4-units/hello-world && CLASSPATH=\"../../../antlr/antlr-4.11.1-complete.jar:$CLASSPATH\" javac *.java",
19
23
  "antlr:grun": "pwd && cd ./src/g4-units/hello-world && grun Hello r -tokens",
20
- "antlr": "yarn antlr:lexer && yarn antlr:parser",
24
+ "antlr": "pnpm run antlr:lexer && pnpm run antlr:parser",
21
25
  "antlr:clear": "rm -rf src/generated-parser/*",
22
26
  "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",
23
27
  "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",
@@ -29,71 +33,62 @@
29
33
  "git:forget": "git rm -r --cached . && git add . && git commit -m \"Forget all ignored files\"",
30
34
  "test:specs": "echo \"Error: test:specs is not supported\""
31
35
  },
32
- "main": "./dist/zenuml/core.umd.min.js",
36
+ "main": "./dist/zenuml-core.mjs",
33
37
  "types": "./types/index.d.ts",
34
38
  "dependencies": {
35
39
  "@types/assert": "^1.5.4",
36
40
  "@types/ramda": "^0.28.0",
37
41
  "antlr4": "^4.11.0",
38
- "color-string": "1.5.2",
42
+ "color-string": "^1.5.5",
39
43
  "dom-to-image-more": "^2.9.5",
40
44
  "file-saver": "^2.0.5",
41
45
  "highlight.js": "^10.1.1",
42
46
  "html-to-image": "^1.9.0",
43
47
  "lodash": "^4.17.20",
44
- "marked": "^2.0.0",
48
+ "marked": "^4.0.10",
45
49
  "pino": "^8.7.0",
46
50
  "postcss": "^8.4.19",
47
51
  "ramda": "^0.28.0",
48
52
  "tailwindcss": "^3.2.4",
49
- "vue": "2.6.12",
53
+ "vue": "2.7.14",
50
54
  "vue-gtag": "^1.16.1",
51
- "vue-template-compiler": "2.6.12",
52
55
  "vuex": "^3.6.2"
53
56
  },
54
57
  "devDependencies": {
55
- "@babel/cli": "^7.10.4",
56
- "@babel/core": "^7.10.4",
57
- "@babel/plugin-proposal-optional-chaining": "^7.10.1",
58
- "@babel/plugin-transform-arrow-functions": "^7.10.1",
59
- "@babel/plugin-transform-modules-commonjs": "^7.10.1",
60
- "@babel/polyfill": "^7.10.1",
61
- "@babel/preset-env": "^7.13.5",
62
- "@babel/runtime-corejs2": "^7.12.13",
58
+ "@babel/eslint-parser": "^7.19.1",
59
+ "@babel/preset-env": "^7.20.2",
63
60
  "@types/antlr4": "^4.11.2",
64
61
  "@types/color-string": "^1.5.2",
65
- "@types/jest": "^24.0.19",
62
+ "@types/jest": "^27.5.2",
66
63
  "@types/lodash": "^4.14.168",
67
64
  "@types/node": "latest",
68
- "@typescript-eslint/eslint-plugin": "^2.33.0",
69
- "@typescript-eslint/parser": "^2.33.0",
70
- "@vue/cli": "^5.0.8",
71
- "@vue/cli-plugin-babel": "~5.0.8",
72
- "@vue/cli-plugin-eslint": "~5.0.8",
73
- "@vue/cli-plugin-typescript": "~5.0.8",
74
- "@vue/cli-plugin-unit-jest": "~5.0.8",
75
- "@vue/cli-service": "~5.0.8",
76
- "@vue/eslint-config-typescript": "^5.0.2",
77
- "@vue/test-utils": "^1.1.3",
78
- "@vue/vue2-jest": "^29.1.1",
65
+ "@typescript-eslint/eslint-plugin": "^5.46.1",
66
+ "@typescript-eslint/parser": "^5.46.1",
67
+ "@vue/test-utils": "1.3.3",
68
+ "@vue/vue2-jest": "^27.0.0",
79
69
  "autoprefixer": "^10.4.13",
80
70
  "babel-eslint": "^10.1.0",
81
- "core-js": "^3.8.3",
82
- "cypress": "^9.4.1",
71
+ "babel-jest": "^27.5.1",
72
+ "concurrently": "^7.5.0",
73
+ "cypress": "10",
83
74
  "cypress-plugin-snapshots": "^1.4.4",
84
- "eslint": "7.32.0",
85
- "eslint-plugin-vue": "^7.6.0",
75
+ "eslint": "^8.30.0",
76
+ "eslint-plugin-vue": "^8.7.1",
86
77
  "global-jsdom": "^8.6.0",
87
- "jest": "^27.1.0",
78
+ "jest": "^27.5.1",
88
79
  "jsdom": "^20.0.2",
89
- "node-sass": "^5.0.0",
80
+ "node-sass": "^6.0.0",
90
81
  "regenerator-runtime": "^0.13.7",
91
- "sass-loader": "^10.1.0",
82
+ "sass": "^1.26.5",
92
83
  "svg-url-loader": "^6.0.0",
93
84
  "terser-webpack-plugin": "^3.0.6",
94
- "ts-jest": "^27.0.4",
85
+ "ts-jest": "^27.1.5",
86
+ "ts-node": "^10.9.1",
95
87
  "typescript": "^4.7.4",
96
- "vue-cli-plugin-tailwind": "~3.0.0"
88
+ "vite": "^4.0.1",
89
+ "vite-plugin-vue2": "^2.0.2",
90
+ "vitest": "^0.26.1",
91
+ "vue-template-compiler": "^2.7.14"
97
92
  },
98
93
  "eslintConfig": {
99
94
  "root": true,
@@ -130,10 +125,11 @@
130
125
  "browserslist": [
131
126
  "last 2 years"
132
127
  ],
128
+ "packageManager": "pnpm@7.18.1",
133
129
  "engines": {
134
130
  "node": ">=12.0.0"
135
131
  },
136
132
  "volta": {
137
- "node": "14.21.1"
133
+ "node": "18.12.1"
138
134
  }
139
135
  }