@zenuml/core 3.35.0 โ†’ 3.35.1

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.
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@zenuml/core",
3
- "version": "3.35.0",
3
+ "version": "3.35.1",
4
4
  "private": false,
5
5
  "license": "MIT",
6
6
  "repository": {
@@ -1,476 +0,0 @@
1
- <!DOCTYPE html>
2
- <html lang="en">
3
- <head>
4
- <meta charset="UTF-8">
5
- <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
- <title>UMD Compatibility Test - ZenUML v4.0.0</title>
7
- <style>
8
- body {
9
- font-family: Arial, sans-serif;
10
- max-width: 1200px;
11
- margin: 0 auto;
12
- padding: 20px;
13
- }
14
- .test-section {
15
- margin: 30px 0;
16
- padding: 20px;
17
- border: 1px solid #ddd;
18
- border-radius: 8px;
19
- }
20
- .test-container {
21
- display: flex;
22
- gap: 20px;
23
- margin: 20px 0;
24
- }
25
- .diagram-container {
26
- flex: 1;
27
- min-height: 300px;
28
- border: 1px solid #ccc;
29
- border-radius: 4px;
30
- padding: 10px;
31
- }
32
- .test-results {
33
- background: #f5f5f5;
34
- padding: 15px;
35
- border-radius: 4px;
36
- margin: 10px 0;
37
- }
38
- .success { color: #008000; }
39
- .error { color: #ff0000; }
40
- .info { color: #0066cc; }
41
- button {
42
- background: #007bff;
43
- color: white;
44
- border: none;
45
- padding: 10px 20px;
46
- border-radius: 4px;
47
- cursor: pointer;
48
- margin: 5px;
49
- }
50
- button:hover {
51
- background: #0056b3;
52
- }
53
- .logs {
54
- background: #f8f9fa;
55
- border: 1px solid #dee2e6;
56
- padding: 10px;
57
- border-radius: 4px;
58
- font-family: monospace;
59
- font-size: 12px;
60
- max-height: 200px;
61
- overflow-y: auto;
62
- margin: 10px 0;
63
- }
64
- </style>
65
- </head>
66
- <body>
67
- <h1>๐Ÿงช UMD Compatibility Test - ZenUML v4.0.0</h1>
68
- <p><strong>Task 4:</strong> Verify UMD bundle compatibility for both access patterns</p>
69
-
70
- <div class="test-section">
71
- <h2>1. Global Variable Check</h2>
72
- <div class="test-results" id="global-check">
73
- <p>๐Ÿ” Checking global variables...</p>
74
- </div>
75
- </div>
76
-
77
- <div class="test-section">
78
- <h2>2. Instance Creation Test</h2>
79
- <div class="test-results" id="instance-check">
80
- <p>๐Ÿ” Testing instance creation...</p>
81
- </div>
82
- <button onclick="testInstanceCreation()">Run Instance Tests</button>
83
- </div>
84
-
85
- <div class="test-section">
86
- <h2>3. Rendering Comparison Test</h2>
87
- <p>Both patterns should render identical diagrams:</p>
88
- <div class="test-container">
89
- <div>
90
- <h4>window.zenuml (v3.34.0+ pattern)</h4>
91
- <div id="diagram1" class="diagram-container"></div>
92
- </div>
93
- <div>
94
- <h4>window.zenuml.default (v3.32.x pattern)</h4>
95
- <div id="diagram2" class="diagram-container"></div>
96
- </div>
97
- </div>
98
- <button onclick="testRendering()">Test Rendering</button>
99
- <button onclick="testComplexRendering()">Test Complex Diagram</button>
100
- <div class="test-results" id="render-results"></div>
101
- </div>
102
-
103
- <div class="test-section">
104
- <h2>4. Method Compatibility Test</h2>
105
- <div class="test-results" id="method-results"></div>
106
- <button onclick="testMethods()">Test Methods</button>
107
- </div>
108
-
109
- <div class="test-section">
110
- <h2>5. Timing & Race Condition Test</h2>
111
- <div class="test-results" id="timing-results"></div>
112
- <button onclick="testTiming()">Test Timing</button>
113
- </div>
114
-
115
- <div class="test-section">
116
- <h2>๐Ÿ“‹ Test Logs</h2>
117
- <div class="logs" id="logs"></div>
118
- <button onclick="clearLogs()">Clear Logs</button>
119
- </div>
120
-
121
- <!-- Load ZenUML UMD Bundle -->
122
- <script src="dist/zenuml.js"></script>
123
-
124
- <script>
125
- // Logging utility
126
- function log(message, type = 'info') {
127
- const timestamp = new Date().toLocaleTimeString();
128
- const logs = document.getElementById('logs');
129
- const className = type === 'success' ? 'success' : type === 'error' ? 'error' : 'info';
130
- logs.innerHTML += `<div class="${className}">[${timestamp}] ${message}</div>`;
131
- logs.scrollTop = logs.scrollHeight;
132
- console.log(`[${type.toUpperCase()}] ${message}`);
133
- }
134
-
135
- function clearLogs() {
136
- document.getElementById('logs').innerHTML = '';
137
- }
138
-
139
- // Test 1: Global Variable Check
140
- function checkGlobals() {
141
- const results = document.getElementById('global-check');
142
- let html = '';
143
-
144
- // Check if window.zenuml exists
145
- if (typeof window.zenuml !== 'undefined') {
146
- html += '<p class="success">โœ… window.zenuml exists</p>';
147
- log('window.zenuml exists', 'success');
148
-
149
- // Check if it's a function
150
- if (typeof window.zenuml === 'function') {
151
- html += '<p class="success">โœ… window.zenuml is a function</p>';
152
- log('window.zenuml is a function', 'success');
153
- } else {
154
- html += '<p class="error">โŒ window.zenuml is not a function</p>';
155
- log('window.zenuml is not a function', 'error');
156
- }
157
-
158
- // Check version
159
- if (window.zenuml.version) {
160
- html += `<p class="success">โœ… Version: ${window.zenuml.version}</p>`;
161
- log(`ZenUML version: ${window.zenuml.version}`, 'success');
162
- }
163
- } else {
164
- html += '<p class="error">โŒ window.zenuml does not exist</p>';
165
- log('window.zenuml does not exist', 'error');
166
- }
167
-
168
- // Check if window.zenuml.default exists (compatibility layer)
169
- if (typeof window.zenuml !== 'undefined' && typeof window.zenuml.default !== 'undefined') {
170
- html += '<p class="success">โœ… window.zenuml.default exists (compatibility layer working)</p>';
171
- log('window.zenuml.default exists - compatibility layer working', 'success');
172
-
173
- // Check if they reference the same function
174
- if (window.zenuml === window.zenuml.default) {
175
- html += '<p class="success">โœ… window.zenuml === window.zenuml.default (reference equality)</p>';
176
- log('Reference equality confirmed', 'success');
177
- } else {
178
- html += '<p class="error">โŒ window.zenuml !== window.zenuml.default</p>';
179
- log('Reference equality failed', 'error');
180
- }
181
- } else {
182
- html += '<p class="error">โŒ window.zenuml.default does not exist</p>';
183
- log('window.zenuml.default does not exist', 'error');
184
- }
185
-
186
- results.innerHTML = html;
187
- }
188
-
189
- // Test 2: Instance Creation
190
- function testInstanceCreation() {
191
- const results = document.getElementById('instance-check');
192
- let html = '';
193
-
194
- try {
195
- // Create test elements
196
- const testDiv1 = document.createElement('div');
197
- const testDiv2 = document.createElement('div');
198
- document.body.appendChild(testDiv1);
199
- document.body.appendChild(testDiv2);
200
-
201
- // Test window.zenuml
202
- const instance1 = new window.zenuml(testDiv1);
203
- html += '<p class="success">โœ… new window.zenuml() - instance created</p>';
204
- log('window.zenuml instance created successfully', 'success');
205
-
206
- // Test window.zenuml.default
207
- const instance2 = new window.zenuml.default(testDiv2);
208
- html += '<p class="success">โœ… new window.zenuml.default() - instance created</p>';
209
- log('window.zenuml.default instance created successfully', 'success');
210
-
211
- // Test constructor equality
212
- if (instance1.constructor === instance2.constructor) {
213
- html += '<p class="success">โœ… Both instances have same constructor</p>';
214
- log('Constructor equality confirmed', 'success');
215
- } else {
216
- html += '<p class="error">โŒ Instances have different constructors</p>';
217
- log('Constructor equality failed', 'error');
218
- }
219
-
220
- // Test methods exist
221
- const methods = ['render', 'getPng', 'getSvg'];
222
- let allMethodsExist = true;
223
- for (const method of methods) {
224
- if (typeof instance1[method] === 'function' && typeof instance2[method] === 'function') {
225
- html += `<p class="success">โœ… Method ${method} exists on both instances</p>`;
226
- log(`Method ${method} exists on both instances`, 'success');
227
- } else {
228
- html += `<p class="error">โŒ Method ${method} missing on one or both instances</p>`;
229
- log(`Method ${method} missing`, 'error');
230
- allMethodsExist = false;
231
- }
232
- }
233
-
234
- if (allMethodsExist) {
235
- html += '<p class="success">โœ… All methods available on both instances</p>';
236
- log('All methods available', 'success');
237
- }
238
-
239
- // Clean up
240
- document.body.removeChild(testDiv1);
241
- document.body.removeChild(testDiv2);
242
-
243
- } catch (error) {
244
- html += `<p class="error">โŒ Error creating instances: ${error.message}</p>`;
245
- log(`Error creating instances: ${error.message}`, 'error');
246
- }
247
-
248
- results.innerHTML = html;
249
- }
250
-
251
- // Test 3: Rendering
252
- function testRendering() {
253
- const resultsDiv = document.getElementById('render-results');
254
- const testCode = 'A.method() {\n B.process()\n return result\n}';
255
-
256
- try {
257
- // Clear previous diagrams
258
- document.getElementById('diagram1').innerHTML = '';
259
- document.getElementById('diagram2').innerHTML = '';
260
-
261
- // Create instances
262
- const instance1 = new window.zenuml('#diagram1');
263
- const instance2 = new window.zenuml.default('#diagram2');
264
-
265
- log('Created instances for rendering test', 'info');
266
-
267
- // Render the same code
268
- Promise.all([
269
- instance1.render(testCode, { theme: 'default' }),
270
- instance2.render(testCode, { theme: 'default' })
271
- ]).then(([result1, result2]) => {
272
- let html = '<p class="success">โœ… Both instances rendered successfully</p>';
273
-
274
- // Check if both returned the instance
275
- if (result1 === instance1 && result2 === instance2) {
276
- html += '<p class="success">โœ… render() returns instance (correct behavior)</p>';
277
- log('render() method returns correct instance', 'success');
278
- }
279
-
280
- // Check if code was set correctly
281
- if (instance1.code === testCode && instance2.code === testCode) {
282
- html += '<p class="success">โœ… Code property set correctly on both instances</p>';
283
- log('Code property set correctly', 'success');
284
- }
285
-
286
- // Check if theme was set correctly
287
- if (instance1.theme === 'default' && instance2.theme === 'default') {
288
- html += '<p class="success">โœ… Theme property set correctly on both instances</p>';
289
- log('Theme property set correctly', 'success');
290
- }
291
-
292
- resultsDiv.innerHTML = html;
293
- log('Rendering test completed successfully', 'success');
294
- }).catch(error => {
295
- resultsDiv.innerHTML = `<p class="error">โŒ Rendering failed: ${error.message}</p>`;
296
- log(`Rendering failed: ${error.message}`, 'error');
297
- });
298
-
299
- } catch (error) {
300
- resultsDiv.innerHTML = `<p class="error">โŒ Rendering test failed: ${error.message}</p>`;
301
- log(`Rendering test failed: ${error.message}`, 'error');
302
- }
303
- }
304
-
305
- function testComplexRendering() {
306
- const complexCode = `title Complex Sequence
307
- @Actor User
308
- @Database DB
309
- @Service API
310
-
311
- User->API: login(credentials) {
312
- API->DB: validateUser(username) {
313
- return userRecord
314
- }
315
- if (userRecord.valid) {
316
- API->DB: createSession() {
317
- return sessionId
318
- }
319
- return {success: true, sessionId}
320
- } else {
321
- return {success: false, error: "Invalid credentials"}
322
- }
323
- }`;
324
-
325
- try {
326
- const instance1 = new window.zenuml('#diagram1');
327
- const instance2 = new window.zenuml.default('#diagram2');
328
-
329
- Promise.all([
330
- instance1.render(complexCode, { theme: 'blue' }),
331
- instance2.render(complexCode, { theme: 'blue' })
332
- ]).then(() => {
333
- const resultsDiv = document.getElementById('render-results');
334
- resultsDiv.innerHTML = '<p class="success">โœ… Complex diagram rendered successfully on both instances</p>';
335
- log('Complex diagram test completed', 'success');
336
- }).catch(error => {
337
- log(`Complex rendering failed: ${error.message}`, 'error');
338
- });
339
-
340
- } catch (error) {
341
- log(`Complex rendering test failed: ${error.message}`, 'error');
342
- }
343
- }
344
-
345
- // Test 4: Method Compatibility
346
- function testMethods() {
347
- const results = document.getElementById('method-results');
348
-
349
- try {
350
- const testDiv1 = document.createElement('div');
351
- const testDiv2 = document.createElement('div');
352
- document.body.appendChild(testDiv1);
353
- document.body.appendChild(testDiv2);
354
-
355
- const instance1 = new window.zenuml(testDiv1);
356
- const instance2 = new window.zenuml.default(testDiv2);
357
-
358
- let html = '';
359
-
360
- // Test static properties
361
- if (window.zenuml.version === window.zenuml.default.version) {
362
- html += '<p class="success">โœ… Static version property identical</p>';
363
- log('Static version property identical', 'success');
364
- }
365
-
366
- // Test export methods exist (we don't call them due to async nature)
367
- const exportMethods = ['getPng', 'getSvg'];
368
- for (const method of exportMethods) {
369
- if (typeof instance1[method] === 'function' && typeof instance2[method] === 'function') {
370
- html += `<p class="success">โœ… Export method ${method} available on both</p>`;
371
- log(`Export method ${method} available`, 'success');
372
- }
373
- }
374
-
375
- // Test getters
376
- const getters = ['code', 'theme'];
377
- for (const getter of getters) {
378
- if (instance1[getter] === instance2[getter]) {
379
- html += `<p class="success">โœ… Getter ${getter} returns same value</p>`;
380
- log(`Getter ${getter} consistent`, 'success');
381
- }
382
- }
383
-
384
- html += '<p class="info">โ„น๏ธ Export methods (getPng, getSvg) exist but not called in test to avoid complexity</p>';
385
-
386
- document.body.removeChild(testDiv1);
387
- document.body.removeChild(testDiv2);
388
-
389
- results.innerHTML = html;
390
-
391
- } catch (error) {
392
- results.innerHTML = `<p class="error">โŒ Method test failed: ${error.message}</p>`;
393
- log(`Method test failed: ${error.message}`, 'error');
394
- }
395
- }
396
-
397
- // Test 5: Timing and Race Conditions
398
- function testTiming() {
399
- const results = document.getElementById('timing-results');
400
-
401
- log('Starting timing and race condition tests', 'info');
402
-
403
- // Test rapid successive calls
404
- try {
405
- const testDiv = document.createElement('div');
406
- document.body.appendChild(testDiv);
407
-
408
- // Test that compatibility layer is available immediately
409
- const startTime = performance.now();
410
-
411
- // These should all work immediately without timing issues
412
- const instance1 = new window.zenuml(testDiv);
413
- const instance2 = new window.zenuml.default(testDiv);
414
- const hasDefault = !!window.zenuml.default;
415
- const isEqual = window.zenuml === window.zenuml.default;
416
-
417
- const endTime = performance.now();
418
-
419
- let html = '';
420
- if (hasDefault && isEqual) {
421
- html += '<p class="success">โœ… No timing issues - compatibility layer available immediately</p>';
422
- html += `<p class="info">โ„น๏ธ Test completed in ${(endTime - startTime).toFixed(2)}ms</p>`;
423
- log('No timing issues detected', 'success');
424
- } else {
425
- html += '<p class="error">โŒ Timing issue detected - compatibility layer not immediately available</p>';
426
- log('Timing issue detected', 'error');
427
- }
428
-
429
- // Test multiple rapid instantiations
430
- const rapidTests = [];
431
- for (let i = 0; i < 5; i++) {
432
- const div = document.createElement('div');
433
- document.body.appendChild(div);
434
- rapidTests.push(() => {
435
- try {
436
- new window.zenuml(div);
437
- new window.zenuml.default(div);
438
- document.body.removeChild(div);
439
- return true;
440
- } catch (e) {
441
- return false;
442
- }
443
- });
444
- }
445
-
446
- const rapidResults = rapidTests.map(test => test());
447
- const allPassed = rapidResults.every(result => result);
448
-
449
- if (allPassed) {
450
- html += '<p class="success">โœ… Rapid instantiation test passed (5 iterations)</p>';
451
- log('Rapid instantiation test passed', 'success');
452
- } else {
453
- html += '<p class="error">โŒ Rapid instantiation test failed</p>';
454
- log('Rapid instantiation test failed', 'error');
455
- }
456
-
457
- document.body.removeChild(testDiv);
458
- results.innerHTML = html;
459
-
460
- } catch (error) {
461
- results.innerHTML = `<p class="error">โŒ Timing test failed: ${error.message}</p>`;
462
- log(`Timing test failed: ${error.message}`, 'error');
463
- }
464
- }
465
-
466
- // Run initial global check when page loads
467
- window.addEventListener('load', () => {
468
- log('Page loaded, running initial checks', 'info');
469
- checkGlobals();
470
- });
471
-
472
- // Log script load
473
- log('UMD Compatibility Test script loaded', 'info');
474
- </script>
475
- </body>
476
- </html>