npm - @zenuml/core - Versions diffs - 3.32.7 → 3.34.0 - Mend

@zenuml/core 3.32.7 → 3.34.0

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.

Files changed (16) hide show

package/.kiro/hooks/README.md +38 -0
package/.kiro/hooks/session-sound-notification.js +44 -0
package/.kiro/hooks/session-sound-notification.json +23 -0
package/DEPLOYMENT.md +62 -0
package/README.md +1 -1
package/TUTORIAL.md +116 -0
package/dist/zenuml.esm.mjs +1679 -1671
package/dist/zenuml.js +39 -39
package/index.html +131 -42
package/package.json +8 -3
package/renderer.html +366 -0
package/test-compression.html +274 -0
package/test-url-params.html +192 -0
package/vite.config.ts +1 -1
package/wrangler.toml +12 -0
package/docs/asciidoc/integration-guide.adoc +0 -121

package/test-compression.html ADDED Viewed

@@ -0,0 +1,274 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>ZenUML Compression Test</title>
+  <style>
+    body {
+      font-family: Arial, sans-serif;
+      max-width: 1200px;
+      margin: 0 auto;
+      padding: 20px;
+    }
+    textarea {
+      width: 100%;
+      height: 200px;
+      margin: 10px 0;
+      font-family: monospace;
+    }
+    button {
+      background: #007bff;
+      color: white;
+      border: none;
+      padding: 10px 20px;
+      margin: 5px;
+      cursor: pointer;
+      border-radius: 4px;
+    }
+    button:hover {
+      background: #0056b3;
+    }
+    .output {
+      background: #f4f4f4;
+      padding: 10px;
+      margin: 10px 0;
+      border-radius: 4px;
+      word-break: break-all;
+    }
+    .error {
+      color: red;
+      background: #fee;
+      padding: 10px;
+      margin: 10px 0;
+      border-radius: 4px;
+    }
+    .success {
+      color: green;
+      background: #efe;
+      padding: 10px;
+      margin: 10px 0;
+      border-radius: 4px;
+    }
+  </style>
+</head>
+<body>
+  <h1>ZenUML Compression Test</h1>
+  <h2>Test URL Parameter Encoding/Decoding</h2>
+  <textarea id="zenUmlCode" placeholder="Enter ZenUML code here...">title Authentication Flow
+  RET ret = A.methodA() {
+  B.method() {
+    if (X) {
+      C.methodC() {
+        a = A.methodA() {
+          D.method()
+        }
+      }
+    }
+    while (Y) {
+      C.methodC() {
+        A.methodA()
+      }
+    }
+   }
+ }
+  </textarea>
+  <div>
+    <button onclick="encodeAndCompress()">Encode (Gzip + Base64)</button>
+    <button onclick="testDecode()">Test Decode</button>
+    <button onclick="generateUrl()">Generate URL</button>
+    <button onclick="clearAll()">Clear</button>
+  </div>
+  <h3>Encoded Output:</h3>
+  <div id="encodedOutput" class="output"></div>
+  <h3>URL:</h3>
+  <div id="urlOutput" class="output"></div>
+  <h3>Test Results:</h3>
+  <div id="testResults"></div>
+  <script type="module">
+    import pako from 'pako';
+    // Helper function to escape HTML special characters
+    function escapeHtml(unsafe) {
+      return unsafe
+        .replace(/&/g, "&amp;")
+        .replace(/</g, "&lt;")
+        .replace(/>/g, "&gt;")
+        .replace(/"/g, "&quot;")
+        .replace(/'/g, "&#039;");
+    }
+    // Compression and encoding functions
+    function compressAndEncode(text) {
+      try {
+        // Step 1: Compress with gzip
+        const compressed = pako.gzip(text);
+        // Step 2: Convert to base64
+        let binary = '';
+        const bytes = new Uint8Array(compressed);
+        for (let i = 0; i < bytes.byteLength; i++) {
+          binary += String.fromCharCode(bytes[i]);
+        }
+        const base64 = btoa(binary);
+        return base64;
+      } catch (error) {
+        console.error('Compression error:', error);
+        throw error;
+      }
+    }
+    // Decompression and decoding functions
+    function decodeAndDecompress(base64String) {
+      try {
+        // Step 1: Decode base64
+        const binaryString = atob(base64String);
+        // Step 2: Convert to Uint8Array
+        const bytes = new Uint8Array(binaryString.length);
+        for (let i = 0; i < binaryString.length; i++) {
+          bytes[i] = binaryString.charCodeAt(i);
+        }
+        // Step 3: Decompress
+        const decompressed = pako.ungzip(bytes, { to: 'string' });
+        return decompressed;
+      } catch (error) {
+        console.error('Decompression error:', error);
+        throw error;
+      }
+    }
+    function encodeAndCompress() {
+      const zenUmlCode = document.getElementById('zenUmlCode').value;
+      const resultsDiv = document.getElementById('testResults');
+      resultsDiv.innerHTML = '';
+      try {
+        const encoded = compressAndEncode(zenUmlCode);
+        document.getElementById('encodedOutput').textContent = encoded;
+        // Show compression ratio
+        const originalSize = new Blob([zenUmlCode]).size;
+        const compressedSize = new Blob([encoded]).size;
+        const ratio = ((originalSize - compressedSize) / originalSize * 100).toFixed(2);
+        resultsDiv.innerHTML = `
+          <div class="success">
+            Encoding successful!<br>
+            Original size: ${originalSize} bytes<br>
+            Encoded size: ${compressedSize} bytes<br>
+            Compression: ${ratio}% smaller
+          </div>
+        `;
+      } catch (error) {
+        resultsDiv.innerHTML = `<div class="error">Encoding failed: ${escapeHtml(error.message)}</div>`;
+      }
+    }
+    function testDecode() {
+      const encoded = document.getElementById('encodedOutput').textContent;
+      const resultsDiv = document.getElementById('testResults');
+      if (!encoded) {
+        resultsDiv.innerHTML = '<div class="error">No encoded data to decode. Please encode first.</div>';
+        return;
+      }
+      try {
+        const decoded = decodeAndDecompress(encoded);
+        const original = document.getElementById('zenUmlCode').value;
+        if (decoded === original) {
+          resultsDiv.innerHTML = `
+            <div class="success">
+              Decoding successful! The decoded content matches the original.<br>
+              <pre>${decoded}</pre>
+            </div>
+          `;
+        } else {
+          resultsDiv.innerHTML = `
+            <div class="error">
+              Decoding mismatch!<br>
+              Original length: ${original.length}<br>
+              Decoded length: ${decoded.length}
+            </div>
+          `;
+        }
+      } catch (error) {
+        resultsDiv.innerHTML = `<div class="error">Decoding failed: ${error.message}</div>`;
+      }
+    }
+    function generateUrl() {
+      const encoded = document.getElementById('encodedOutput').textContent;
+      if (!encoded) {
+        document.getElementById('urlOutput').innerHTML = '<span style="color: red;">Please encode first</span>';
+        return;
+      }
+      const baseUrl = window.location.origin + '/renderer.html';
+      const url = `${baseUrl}?code=${encodeURIComponent(encoded)}`;
+      document.getElementById('urlOutput').innerHTML = `
+        <a href="${url}" target="_blank">${url}</a><br>
+        <small>URL length: ${url.length} characters</small>
+      `;
+    }
+    function clearAll() {
+      document.getElementById('zenUmlCode').value = '';
+      document.getElementById('encodedOutput').textContent = '';
+      document.getElementById('urlOutput').textContent = '';
+      document.getElementById('testResults').innerHTML = '';
+    }
+    // Test some edge cases
+    function runTests() {
+      const testCases = [
+        { name: 'Empty string', input: '' },
+        { name: 'Simple text', input: 'Hello World' },
+        { name: 'Unicode', input: '你好世界 🌍' },
+        { name: 'Special characters', input: '!@#$%^&*()_+-=[]{}|;:,.<>?' }
+      ];
+      let results = '<h3>Automated Tests:</h3>';
+      for (const test of testCases) {
+        try {
+          const encoded = compressAndEncode(test.input);
+          const decoded = decodeAndDecompress(encoded);
+          if (decoded === test.input) {
+            results += `<div class="success">✓ ${test.name}: PASSED</div>`;
+          } else {
+            results += `<div class="error">✗ ${test.name}: FAILED - Mismatch</div>`;
+          }
+        } catch (error) {
+          results += `<div class="error">✗ ${test.name}: ERROR - ${error.message}</div>`;
+        }
+      }
+      document.getElementById('testResults').innerHTML = results;
+    }
+    // Make functions available globally for onclick handlers
+    window.encodeAndCompress = encodeAndCompress;
+    window.testDecode = testDecode;
+    window.generateUrl = generateUrl;
+    window.clearAll = clearAll;
+    // Run tests on page load
+    runTests();
+  </script>
+</body>
+</html>

package/test-url-params.html ADDED Viewed

@@ -0,0 +1,192 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>URL Parameter Test</title>
+</head>
+<body>
+    <h1>URL Parameter Extraction Test</h1>
+    <div id="test-results"></div>
+    <script>
+        // Utility function to escape HTML special characters
+        function escapeHTML(str) {
+            return str.replace(/[&<>"']/g, (char) => {
+                const escapeMap = { '&': '&amp;', '<': '&lt;', '>': '&gt;', '"': '&quot;', "'": '&#39;' };
+                return escapeMap[char];
+            });
+        }
+        // Copy the URL parameter extraction functions from renderer.html
+        function extractCodeFromURL() {
+            try {
+                console.log('Extracting code parameter from URL...');
+                // Get current URL
+                const currentUrl = new URL(window.location.href);
+                console.log('Current URL:', currentUrl.href);
+                // Extract the 'code' parameter
+                const codeParam = currentUrl.searchParams.get('code');
+                if (codeParam) {
+                    console.log('Code parameter found:', codeParam.substring(0, 50) + '...');
+                    return codeParam;
+                } else {
+                    console.log('No code parameter found in URL');
+                    return null;
+                }
+            } catch (error) {
+                console.error('Error extracting code from URL:', error);
+                return null;
+            }
+        }
+        function hasCodeParameter() {
+            try {
+                const currentUrl = new URL(window.location.href);
+                return currentUrl.searchParams.has('code');
+            } catch (error) {
+                console.error('Error checking for code parameter:', error);
+                return false;
+            }
+        }
+        // Base64 decoding functions (copied from renderer.html)
+        function decodeBase64(encodedString) {
+            try {
+                console.log('Attempting to decode Base64 string...');
+                // Check if the string is valid Base64
+                if (!encodedString || typeof encodedString !== 'string') {
+                    throw new Error('Invalid input: string is null, undefined, or not a string');
+                }
+                // Remove any whitespace
+                const cleanedString = encodedString.trim();
+                // Check if string looks like Base64 (basic validation)
+                const base64Regex = /^[A-Za-z0-9+/]*={0,2}$/;
+                if (!base64Regex.test(cleanedString)) {
+                    throw new Error('Invalid Base64 format');
+                }
+                // Attempt to decode
+                const decodedString = atob(cleanedString);
+                console.log('Base64 decoding successful');
+                return decodedString;
+            } catch (error) {
+                console.error('Base64 decoding failed:', error);
+                throw new Error(`Base64 decoding failed: ${error.message}`);
+            }
+        }
+        function processURLCodeParameter(encodedCode) {
+            try {
+                console.log('Processing URL code parameter...');
+                if (!encodedCode) {
+                    console.log('No encoded code provided');
+                    return null;
+                }
+                // Try to decode as Base64
+                const decodedCode = decodeBase64(encodedCode);
+                console.log('Code parameter successfully decoded from Base64');
+                return decodedCode;
+            } catch (error) {
+                console.error('Failed to process URL code parameter:', error);
+                // Return the original code as fallback (might be plain text)
+                console.log('Falling back to using raw parameter value');
+                return encodedCode;
+            }
+        }
+        // Test the functions
+        function runTests() {
+            const resultsDiv = document.getElementById('test-results');
+            let results = '<h2>Test Results:</h2>';
+            // Test 1: Check current URL
+            const currentUrl = window.location.href;
+            results += `<p><strong>Current URL:</strong> ${escapeHTML(currentUrl)}</p>`;
+            // Test 2: Check if code parameter exists
+            const hasCode = hasCodeParameter();
+            results += `<p><strong>Has code parameter:</strong> ${hasCode}</p>`;
+            // Test 3: Extract code parameter
+            const codeParam = extractCodeFromURL();
+            results += `<p><strong>Extracted code parameter:</strong> ${escapeHTML(codeParam) || 'null'}</p>`;
+            // Test 4: Process URL code parameter (includes Base64 decoding)
+            if (codeParam) {
+                try {
+                    const processedCode = processURLCodeParameter(codeParam);
+                    results += `<p><strong>Processed code (after Base64 decoding):</strong></p>`;
+                    results += `<pre style="background: #f5f5f5; padding: 10px; border-radius: 4px; white-space: pre-wrap;">${processedCode || 'null'}</pre>`;
+                    // Check if it was actually Base64 decoded
+                    if (processedCode !== codeParam) {
+                        results += `<p style="color: green;"><strong>✓ Base64 decoding successful!</strong></p>`;
+                    } else {
+                        results += `<p style="color: orange;"><strong>⚠ Used raw parameter (not Base64 or decoding failed)</strong></p>`;
+                    }
+                } catch (error) {
+                    results += `<p style="color: red;"><strong>✗ Error processing code parameter:</strong> ${error.message}</p>`;
+                }
+            }
+            // Test 5: Show all URL parameters
+            const urlParams = new URLSearchParams(window.location.search);
+            results += '<p><strong>All URL parameters:</strong></p><ul>';
+            for (const [key, value] of urlParams) {
+                results += `<li>${escapeHTML(key)}: ${escapeHTML(value)}</li>`;
+            }
+            results += '</ul>';
+            resultsDiv.innerHTML = results;
+        }
+        // Run tests when page loads
+        window.addEventListener('load', runTests);
+    </script>
+    <h2>Test Instructions:</h2>
+    <p>To test URL parameter extraction and Base64 decoding, add parameters to the URL:</p>
+    <ul>
+        <li><a href="?code=test123">Test with simple code parameter</a></li>
+        <li><a href="?code=dGVzdCBjb2Rl">Test with Base64 code parameter ("test code")</a></li>
+        <li><a href="?code=SGVsbG8gV29ybGQ=">Test with Base64 code parameter ("Hello World")</a></li>
+        <li><a href="?code=QS5tZXRob2QoKSB7IEIucHJvY2VzcygpIH0=">Test with Base64 ZenUML code</a></li>
+        <li><a href="?code=test123&theme=dark">Test with multiple parameters</a></li>
+        <li><a href="?code=invalid@base64!">Test with invalid Base64 (should fallback)</a></li>
+        <li><a href="?other=value">Test with no code parameter</a></li>
+    </ul>
+    <h3>Base64 Encoding Helper:</h3>
+    <p>Enter text to encode as Base64:</p>
+    <input type="text" id="textInput" placeholder="Enter text to encode" style="width: 300px; padding: 5px;">
+    <button onclick="encodeText()" style="padding: 5px 10px;">Encode to Base64</button>
+    <p>Base64 result: <span id="base64Result" style="font-family: monospace; background: #f0f0f0; padding: 2px 4px;"></span></p>
+    <script>
+        function encodeText() {
+            const text = document.getElementById('textInput').value;
+            if (text) {
+                const encoded = btoa(text);
+                document.getElementById('base64Result').textContent = encoded;
+                // Create a test link
+                const testUrl = `?code=${encoded}`;
+                document.getElementById('base64Result').innerHTML =
+                    `${encoded} <br><a href="${testUrl}" style="font-size: 12px;">Test this Base64 code</a>`;
+            }
+        }
+    </script>
+</body>
+</html>

package/vite.config.ts CHANGED Viewed

@@ -32,7 +32,7 @@ export default defineConfig(({ mode }) => ({
   base: mode === "gh-pages" ? "/zenuml-core/" : "/",
   build: {
     rollupOptions: {
-      input: ["index.html", "embed.html", ...cypressHtmlFiles],
+      input: ["index.html", "embed.html", "renderer.html", "test-compression.html", ...cypressHtmlFiles],
     },
   },
   resolve: {

package/wrangler.toml ADDED Viewed

@@ -0,0 +1,12 @@
+name = "zenuml-web-renderer"
+compatibility_date = "2024-01-01"
+# Use Workers Static Assets (recommended over Pages)
+[assets]
+directory = "dist"
+[env.production]
+name = "zenuml-web-renderer"
+[env.staging]
+name = "zenuml-web-renderer-staging"

package/docs/asciidoc/integration-guide.adoc DELETED Viewed

@@ -1,121 +0,0 @@
-= Integration Guide
-:icons: font
-== Audience
-This document is written for those want to integrate ZenUML to their applications. If you are an end
-user, please read tutorials; if your would like to contribute, please read contributor's guide.
-== Integration
-An important goal of this project is to be easily integrated into other projects.
-There are mainly two ways to do this.
-=== As a library
-ZenUML Core exposes a simple API for integration:
-[source, typescript]
-----
-interface IZenUml {
-  get code(): string | undefined;
-  get theme(): string | undefined;
-  // Resolve after rendering is finished.
-  render: (code: string | undefined, theme: string | undefined) => Promise<IZenUml>
-}
-// client code
-import ZenUml from '@ZenUML/core'
-const zenUml = new ZenUml(el)
-await zenUml.render('A.method', {theme: 'theme-blue'})
-----
-==== When rendering is finished
-When rendering is finished, the `render` method will return a promise that resolves to the
-instance of `IZenUml`. The `html` properties of the instance will be updated to the rendered
-HTML.
-[NOTE]
-====
-Vue's reactive system works against the `data`, `props` and `computed` properties of a component.
-This means a parent component is not necessarily be notified when a child component is `mounted` or `updated`.
-So this means we can not use the `mounted` or `updated` hook on `LifelineLayer` to emit `rendered` event.
-====
-It is tricky to know when the rendering is finished. The `Lifeline` components used `$nextTick`
-in their `mounted` and `updated` hooks to set the top when a `creation` message is sent to it.
-We have to wait until all those `$nextTick` calls are finished.
-[NOTE]
-====
-It seems that (to be confirmed) the `$nextTick` calls are queued and executed in ONE tick. This
-makes it easier to control the timing when to resolve the `render` promise. We only need to wait
-ONE `$nextTick` call to be finished.
-====
-The diagram is rendered in the following steps:
-1. The lifeline layer;
-2. The message layer;
-3. Update lifeline layer with `setTimeout` for `creation` messages.
-=== As an iframe
-You can embed the ZenUML core renderer as an application within another app, where you store the diagram
-data in the host app. It takes around 5 minutes to get a basic example running.
-==== Quick test
-To test this out open `https://embed.zenuml.com/embed.html`. In the developer console, type in the
-following command.
-[source,js]
-----
-window.postMessage( {action: 'eval', args: { code: 'ZenUML.Hello' }})
-----
-==== The protocol
-The protocol is a simple JSON object with the following fields.
-[source,json]
-----
-{
-  "action": "eval",
-  "args": {
-    "code": "ZenUML.Hello",
-    "style": "#diagram { background-color: red; }",
-    "theme": "blue",
-    "css": "https://github.com/abruzzi/zenuml-css-overrides/blob/master/zenuml-override.css"
-  }
-}
-----
-==== Example
-[source,html]
-----
-<iframe src="https://embed.zenuml.com/embed.html" id="zenuml-iframe"
-        style="width: 100%; height: 100%; border: none;">
-</iframe>
-<script>
-  const iframe = document.getElementById('zenuml-iframe');
-  const message = {
-    action: 'eval',
-    args: {
-      code: 'ZenUML.Hello',
-      style: '#diagram { background-color: red; }',
-      theme: 'blue',
-      css: ''
-    }
-  };
-  setTimeout(() => {
-    iframe.contentWindow.postMessage(message, '*');
-  }, 1000);
-</script>
-----
-[source,js]
-----
-document.getElementsByTagName('iframe')[0] // get iframe
-    .contentWindow  // get target window
-    .postMessage({action: "eval", args: { code: 'A.m' }})
-----