npm - releasebird-javascript-sdk - Versions diffs - 1.0.58 → 1.0.61 - Mend

releasebird-javascript-sdk 1.0.58 → 1.0.61

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 (19) hide show

package/.claude/settings.local.json +9 -1
package/NGINX_CONFIG_GUIDE.md +204 -0
package/backend-image-service/image-service/.ebextensions/04_nginx.config +12 -0
package/backend-image-service/image-service/.platform/nginx/conf.d/client_max_body_size.conf +1 -0
package/backend-image-service/image-service/Dockerfile +3 -0
package/backend-image-service/image-service/server.js +41 -7
package/backend-image-service/test-compression.js +120 -0
package/backend-image-service/test-deployed-service.js +126 -0
package/backend-image-service/test-full-flow.js +226 -0
package/backend-image-service/test-java-backend.js +72 -0
package/backend-image-service/test-svg-debug.html +28 -0
package/build/index.js +1 -1
package/package.json +1 -1
package/published/1.0./index.js +1 -0
package/published/1.0.59/index.js +1 -0
package/published/1.0.60/index.js +1 -0
package/published/1.0.61/index.js +1 -0
package/published/latest/index.js +1 -1
package/src/RbirdScreenshotManager.js +99 -172

package/src/RbirdScreenshotManager.js CHANGED Viewed

@@ -181,207 +181,123 @@ export default class RbirdScreenshotManager {
     }
     /**
-     * Export the current page HTML with all inline styles
-     * Returns HTML string with computed styles inlined
+     * Export the current page HTML for server-side rendering
+     * Returns complete HTML document with minimal modifications
      */
     async exportHTML() {
-        console.log('[Screenshot] Exporting HTML with inline styles...');
-        // Clone the document
-        const clonedDoc = document.cloneNode(true);
-        const clonedBody = clonedDoc.body;
-        // IMPORTANT: Keep the markerBoundary and its SVG content!
-        // We need to preserve the SVG drawings
-        const markerBoundary = document.getElementById('markerBoundary');
-        const clonedMarkerBoundary = clonedBody.querySelector('#markerBoundary');
-        // Copy SVG content from original to cloned
-        if (markerBoundary && clonedMarkerBoundary) {
-            const svg = markerBoundary.querySelector('svg');
-            const clonedSvg = clonedMarkerBoundary.querySelector('svg');
-            if (svg && clonedSvg) {
-                clonedSvg.innerHTML = svg.innerHTML;
-                // Copy all SVG attributes
-                Array.from(svg.attributes).forEach(attr => {
-                    clonedSvg.setAttribute(attr.name, attr.value);
-                });
-            }
-        }
-        // Remove elements we don't want in the screenshot (but keep markerBoundary!)
-        const elementsToRemove = [
-            clonedBody.querySelector('#rbirdScreenshotLoader'),
-            clonedBody.querySelector('#screenshotCloseButton'),
-            clonedBody.querySelector('.menu'), // SVGEditor toolbar
-            ...Array.from(clonedBody.querySelectorAll('iframe[src*="cookiehub"]')),
-            ...Array.from(clonedBody.querySelectorAll('iframe[src*="google"]')),
-            ...Array.from(clonedBody.querySelectorAll('iframe[src*="facebook"]'))
+        console.log('[Screenshot] Exporting HTML for server-side rendering...');
+        // Get the complete HTML using native serialization
+        const headHTML = document.head.outerHTML;
+        let bodyHTML = document.body.innerHTML;
+        // IMPORTANT: Keep the markerBoundary SVG content!
+        // The SVG drawings are already in the body innerHTML
+        // Create a temporary container to manipulate the body HTML
+        const tempContainer = document.createElement('div');
+        tempContainer.innerHTML = bodyHTML;
+        // Remove UI elements that shouldn't be in the screenshot
+        const removeSelectors = [
+            '#rbirdScreenshotLoader',
+            '#screenshotCloseButton',
+            '.menu',
+            'iframe[src*="cookiehub"]',
+            'iframe[src*="google"]',
+            'iframe[src*="facebook"]'
         ];
-        elementsToRemove.forEach(el => {
-            if (el && el.parentNode) {
-                el.parentNode.removeChild(el);
-            }
+        removeSelectors.forEach(selector => {
+            const elements = tempContainer.querySelectorAll(selector);
+            elements.forEach(el => {
+                if (el && el.parentNode) {
+                    el.parentNode.removeChild(el);
+                }
+            });
         });
-        // Inline all computed styles
-        this.inlineStyles(clonedBody, document.body);
-        // Convert all images to base64
-        await this.inlineImages(clonedBody);
-        // Get all stylesheets content (inline all CSS)
-        const styles = await this.extractAllStyles();
+        // Get the cleaned body HTML
+        const cleanedBodyHTML = tempContainer.innerHTML;
         // Build complete HTML
-        const html = `
-<!DOCTYPE html>
+        const html = `<!DOCTYPE html>
 <html>
-<head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <style>${styles}</style>
-</head>
+${headHTML}
 <body>
-    ${clonedBody.innerHTML}
+${cleanedBodyHTML}
 </body>
 </html>`;
+        console.log(`[Screenshot] Exported HTML: ${html.length} bytes`);
         return html;
     }
-    /**
-     * Recursively inline computed styles for all elements
-     */
-    inlineStyles(clonedElement, originalElement) {
-        if (!clonedElement || !originalElement) return;
-        // Get computed style from original element
-        const computedStyle = window.getComputedStyle(originalElement);
-        // Create inline style string with important properties
-        const importantProps = [
-            'display', 'position', 'top', 'left', 'right', 'bottom',
-            'width', 'height', 'margin', 'padding', 'border',
-            'background', 'background-color', 'background-image',
-            'color', 'font-family', 'font-size', 'font-weight',
-            'text-align', 'line-height', 'opacity', 'z-index',
-            'transform', 'transition', 'box-shadow', 'border-radius'
-        ];
-        let inlineStyle = '';
-        importantProps.forEach(prop => {
-            const value = computedStyle.getPropertyValue(prop);
-            if (value) {
-                inlineStyle += `${prop}: ${value}; `;
-            }
-        });
-        if (inlineStyle && clonedElement.setAttribute) {
-            clonedElement.setAttribute('style', inlineStyle);
-        }
-        // Recursively process children
-        const clonedChildren = Array.from(clonedElement.children || []);
-        const originalChildren = Array.from(originalElement.children || []);
-        clonedChildren.forEach((clonedChild, index) => {
-            if (originalChildren[index]) {
-                this.inlineStyles(clonedChild, originalChildren[index]);
-            }
-        });
-    }
     /**
-     * Convert all images to base64 data URLs
+     * Compress string using gzip
+     * Returns base64-encoded compressed data
      */
-    async inlineImages(element) {
-        const images = element.querySelectorAll('img');
-        const promises = [];
-        images.forEach(img => {
-            const promise = new Promise((resolve) => {
-                try {
-                    const canvas = document.createElement('canvas');
-                    const ctx = canvas.getContext('2d');
-                    // Find original image element
-                    const originalImg = document.querySelector(`img[src="${img.getAttribute('src')}"]`);
-                    if (originalImg && originalImg.complete) {
-                        canvas.width = originalImg.naturalWidth;
-                        canvas.height = originalImg.naturalHeight;
-                        ctx.drawImage(originalImg, 0, 0);
-                        try {
-                            const dataUrl = canvas.toDataURL('image/png');
-                            img.setAttribute('src', dataUrl);
-                        } catch (e) {
-                            console.warn('[Screenshot] Could not convert image to base64 (CORS?):', img.src);
-                        }
+    async compressString(str) {
+        try {
+            // Convert string to Uint8Array
+            const encoder = new TextEncoder();
+            const data = encoder.encode(str);
+            // Use CompressionStream API (modern browsers)
+            if (typeof CompressionStream !== 'undefined') {
+                const stream = new ReadableStream({
+                    start(controller) {
+                        controller.enqueue(data);
+                        controller.close();
                     }
-                } catch (e) {
-                    console.warn('[Screenshot] Error processing image:', e);
-                }
-                resolve();
-            });
-            promises.push(promise);
-        });
+                });
-        await Promise.all(promises);
-    }
+                const compressedStream = stream.pipeThrough(new CompressionStream('gzip'));
+                const reader = compressedStream.getReader();
+                const chunks = [];
-    /**
-     * Extract ALL stylesheet content
-     */
-    async extractAllStyles() {
-        let styles = '';
+                while (true) {
+                    const { done, value } = await reader.read();
+                    if (done) break;
+                    chunks.push(value);
+                }
-        // Get inline style elements
-        const styleElements = document.querySelectorAll('style');
-        styleElements.forEach(style => {
-            styles += style.textContent + '\n';
-        });
+                // Combine chunks
+                const totalLength = chunks.reduce((acc, chunk) => acc + chunk.length, 0);
+                const compressed = new Uint8Array(totalLength);
+                let offset = 0;
+                for (const chunk of chunks) {
+                    compressed.set(chunk, offset);
+                    offset += chunk.length;
+                }
-        // Try to fetch stylesheet content
-        const links = document.querySelectorAll('link[rel="stylesheet"]');
-        const fetchPromises = [];
-        links.forEach(link => {
-            const href = link.getAttribute('href');
-            if (href) {
-                // Convert relative URLs to absolute
-                const absoluteUrl = new URL(href, window.location.href).href;
-                // Try to fetch stylesheet content
-                const promise = fetch(absoluteUrl)
-                    .then(response => response.text())
-                    .then(cssText => {
-                        styles += `\n/* ${absoluteUrl} */\n${cssText}\n`;
-                    })
-                    .catch(error => {
-                        console.warn(`[Screenshot] Could not fetch stylesheet ${absoluteUrl}:`, error);
-                        // If CORS blocks us, try to import it
-                        styles += `@import url('${absoluteUrl}');\n`;
-                    });
-                fetchPromises.push(promise);
+                // Convert to base64
+                const base64 = btoa(String.fromCharCode(...compressed));
+                console.log(`[Screenshot] Compression: ${data.length} -> ${compressed.length} bytes (${Math.round(compressed.length / data.length * 100)}%)`);
+                return base64;
+            } else {
+                // Fallback: no compression available
+                console.warn('[Screenshot] CompressionStream not available, sending uncompressed');
+                return null;
             }
-        });
-        await Promise.all(fetchPromises);
-        return styles;
+        } catch (e) {
+            console.error('[Screenshot] Compression failed:', e);
+            return null;
+        }
     }
     /**
      * Send HTML to backend for rendering
      * Returns Promise with screenshot data URL
      */
-    renderScreenshotOnBackend(html) {
-        return new Promise((resolve, reject) => {
+    async renderScreenshotOnBackend(html) {
+        return new Promise(async (resolve, reject) => {
             console.log('[Screenshot] Sending HTML to backend...');
+            console.log(`[Screenshot] Original HTML size: ${html.length} bytes`);
+            // Try to compress the HTML
+            const compressedHtml = await this.compressString(html);
             const http = new XMLHttpRequest();
             http.open('POST', `${API}/images/screenshot/render`);
@@ -409,19 +325,30 @@ export default class RbirdScreenshotManager {
                         }
                     } else {
                         console.error('[Screenshot] Backend request failed:', http.status, http.responseText);
-                        reject(new Error(`Backend request failed with status ${http.status}`));
+                        reject(new Error(`Failed to render screenshot: ${http.status} : ${JSON.stringify(http.responseText)}`));
                     }
                 }
             };
             const requestData = {
-                html: html,
                 width: window.innerWidth,
                 height: window.innerHeight,
                 url: window.location.href
             };
-            http.send(JSON.stringify(requestData));
+            // Add either compressed or uncompressed HTML
+            if (compressedHtml) {
+                requestData.htmlCompressed = compressedHtml;
+                requestData.compressed = true;
+            } else {
+                requestData.html = html;
+                requestData.compressed = false;
+            }
+            const payload = JSON.stringify(requestData);
+            console.log(`[Screenshot] Final payload size: ${payload.length} bytes`);
+            http.send(payload);
         });
     }