react-native-webview-stream-chunks 0.3.0 → 0.4.0

package/dist/streamChunksPreloadScript.js

@@ -20,7 +20,172 @@ export const WebViewStreamEventTypes = {
   Instead, we compile the receiver function to JS at build time and inject it as a string into the final bundle.
   See scripts/injectReceiver.mjs for details. The placeholder below is replaced in dist/streamChunksPreloadScript.js after tsc build.
 */
-const webViewStreamReceiverIIFECode = '__WEBVIEW_RECEIVER_CODE__';
+const webViewStreamReceiverIIFECode = `function webViewStreamReceiverIIFE(options, eventTypes) {
+    let payloadChunks = [];
+    let contentMutationObserved = false;
+    const injectedPayloadScriptClasses = new Set();
+    function resetState() {
+        payloadChunks = [];
+        contentMutationObserved = false;
+    }
+    const targetWindow = window;
+    // -- receiver-ready callback resolver -------------------------------------
+    function runReceiverReadyCallback() {
+        if (!options.receiverReadyCallbackPath.trim())
+            return;
+        const segments = options.receiverReadyCallbackPath.split('.').filter(Boolean);
+        let current = targetWindow;
+        for (const segment of segments) {
+            if (current === null || current === undefined || typeof current !== 'object') {
+                current = undefined;
+                break;
+            }
+            current = current[segment];
+        }
+        if (typeof current === 'function') {
+            current();
+        }
+    }
+    // -- event dispatcher -----------------------------------------------------
+    targetWindow.onStreamChunksToWebView = function (event) {
+        var _a;
+        switch (event.type) {
+            case eventTypes.SET_CONTENT: {
+                resetState();
+                replaceBodyContent((_a = event.data) !== null && _a !== void 0 ? _a : '');
+                break;
+            }
+            case eventTypes.APPEND_CHUNK: {
+                if (event.data)
+                    payloadChunks.push(event.data);
+                break;
+            }
+            case eventTypes.FINALIZE_PAYLOAD: {
+                const waitAndInject = () => {
+                    if (contentMutationObserved) {
+                        injectPayloadScript(event.data);
+                    }
+                    else {
+                        setTimeout(waitAndInject, 100);
+                    }
+                };
+                waitAndInject();
+                break;
+            }
+            case eventTypes.REEXECUTE_SCRIPTS: {
+                const waitAndExec = () => {
+                    if (contentMutationObserved) {
+                        reexecuteScripts(event.data);
+                    }
+                    else {
+                        setTimeout(waitAndExec, 100);
+                    }
+                };
+                waitAndExec();
+                break;
+            }
+            case eventTypes.CHECK_RECEIVER_READY: {
+                runReceiverReadyCallback();
+                break;
+            }
+        }
+    };
+    // -- DOM helpers ----------------------------------------------------------
+    function replaceBodyContent(newInnerHTML) {
+        const observer = new MutationObserver((mutationsList, currentObserver) => {
+            for (const mutation of mutationsList) {
+                if (mutation.type === 'childList') {
+                    currentObserver.disconnect();
+                    contentMutationObserved = true;
+                    return;
+                }
+            }
+        });
+        observer.observe(document.body, { childList: true });
+        document.body.innerHTML = newInnerHTML;
+    }
+    const defaultInjectionOptions = {
+        scriptType: 'application/json',
+        scriptClassName: 'webview-stream-payload',
+        scriptTagName: 'default-payload',
+        anchorSelector: '#styleArea',
+    };
+    function resolveInjectionOptions(rawData) {
+        var _a, _b, _c, _d;
+        if (!rawData) {
+            return defaultInjectionOptions;
+        }
+        try {
+            const parsed = JSON.parse(rawData);
+            return {
+                scriptType: (_a = parsed.scriptType) !== null && _a !== void 0 ? _a : defaultInjectionOptions.scriptType,
+                scriptClassName: (_b = parsed.scriptClassName) !== null && _b !== void 0 ? _b : defaultInjectionOptions.scriptClassName,
+                scriptTagName: (_c = parsed.scriptTagName) !== null && _c !== void 0 ? _c : defaultInjectionOptions.scriptTagName,
+                anchorSelector: (_d = parsed.anchorSelector) !== null && _d !== void 0 ? _d : defaultInjectionOptions.anchorSelector,
+            };
+        }
+        catch (_e) {
+            return defaultInjectionOptions;
+        }
+    }
+    function injectPayloadScript(rawData) {
+        try {
+            const injectionOptions = resolveInjectionOptions(rawData);
+            const fullPayload = payloadChunks.join('');
+            const scriptElement = document.createElement('script');
+            scriptElement.type = injectionOptions.scriptType;
+            scriptElement.classList.add(injectionOptions.scriptClassName, injectionOptions.scriptTagName);
+            scriptElement.textContent = fullPayload;
+            const anchor = document.querySelector(injectionOptions.anchorSelector);
+            anchor === null || anchor === void 0 ? void 0 : anchor.insertAdjacentElement('afterend', scriptElement);
+            injectedPayloadScriptClasses.add(injectionOptions.scriptClassName);
+        }
+        catch (error) {
+            console.error('[webview-stream] injectPayloadScript error', error);
+        }
+        payloadChunks = [];
+    }
+    function reexecuteScripts(selector) {
+        try {
+            const query = (selector === null || selector === void 0 ? void 0 : selector.trim()) || 'script';
+            const elements = Array.from(document.querySelectorAll(query));
+            for (const element of elements) {
+                if (!(element instanceof HTMLScriptElement))
+                    continue;
+                let isInjectedPayloadScript = false;
+                for (const payloadClassName of injectedPayloadScriptClasses) {
+                    if (element.classList.contains(payloadClassName)) {
+                        isInjectedPayloadScript = true;
+                        break;
+                    }
+                }
+                if (isInjectedPayloadScript)
+                    continue;
+                const replacement = document.createElement('script');
+                for (const { name, value } of Array.from(element.attributes)) {
+                    replacement.setAttribute(name, value);
+                }
+                if (element.src) {
+                    replacement.src = element.src;
+                }
+                else {
+                    replacement.textContent = element.textContent;
+                }
+                if (element.parentNode !== null) {
+                    try {
+                        element.parentNode.replaceChild(replacement, element);
+                    }
+                    catch (error) {
+                        console.error('[webview-stream] Failed to re-execute script tag', replacement, element, error);
+                    }
+                }
+            }
+        }
+        catch (error) {
+            console.error('[webview-stream] reexecuteScripts error', error);
+        }
+    }
+}`;
 // ---------------------------------------------------------------------------
 // Preload script generators
 // ---------------------------------------------------------------------------

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-native-webview-stream-chunks",
-  "version": "0.3.0",
+  "version": "0.4.0",
   "description": "Reusable preload script and event types for streaming large HTML/chunks into WebView",
   "type": "module",
   "main": "./dist/index.js",