@cactuslab/native-navigation-react - npm Package Compare versions

Comparing version 0.0.8 to 0.0.9

dist/esm/sync.js

@@ -88,2 +88,3 @@ let copyNodeId = 1;
         }
+        monitorStylesheets();
     });
@@ -99,3 +100,97 @@ try {
     }
+    /**
+     * Monitor stylesheets on the main window so any rules added using insertRule are copied
+     * to other windows.
+     * <p>
+     * Emotion uses insertRule in production / speed mode rather than modifying the DOM.
+     */
+    function monitorStylesheets() {
+        // eslint-disable-next-line @typescript-eslint/prefer-for-of
+        for (let i = 0; i < window.document.styleSheets.length; i++) {
+            const styleSheet = window.document.styleSheets[i];
+            if (styleSheet.nativeNavigationMonitored) {
+                continue;
+            }
+            styleSheet.nativeNavigationMonitored = true;
+            /* Override insertRule so each time it is used we copy the new rule to the corresponding stylesheet in other windows */
+            const originalInsertRule = styleSheet.insertRule;
+            styleSheet.insertRule = function (rule, index) {
+                const nodeId = styleSheet.ownerNode.dataset['capacitorNativeNavigationId'];
+                if (nodeId) {
+                    for (const viewId of Object.keys(views)) {
+                        const view = views[viewId];
+                        const targetStyleSheet = findMatchingStyleSheet(styleSheet, view);
+                        if (targetStyleSheet) {
+                            try {
+                                targetStyleSheet.insertRule(rule, index);
+                            }
+                            catch (error) {
+                                console.warn(`Failed to sync cssRule to ${viewId}: ${error instanceof Error ? error.message : error}: @${index} ${rule}`);
+                            }
+                        }
+                    }
+                }
+                return originalInsertRule.bind(styleSheet)(rule, index);
+            };
+            /* Copy the initial set of rules to other windows */
+            for (const viewId of Object.keys(views)) {
+                const view = views[viewId];
+                copyInitialCssRules(styleSheet, view);
+            }
+        }
+    }
 }
+/**
+ *
+ * @param styleSheet the source stylesheet
+ * @param view the native navigation window to find a matching stylesheet in to copy to
+ */
+function copyInitialCssRules(styleSheet, view) {
+    const targetStyleSheet = findMatchingStyleSheet(styleSheet, view);
+    if (targetStyleSheet) {
+        for (let k = 0; k < styleSheet.cssRules.length; k++) {
+            const cssText = styleSheet.cssRules[k].cssText;
+            targetStyleSheet.insertRule(cssText, k);
+        }
+    }
+}
+/**
+ * Find a style sheet in a native navigation window to match the given one in the main window.
+ * @param source the source stylesheet in the main window
+ * @param view the window to search in
+ * @returns a style sheet or undefined if not found
+ */
+function findMatchingStyleSheet(source, view) {
+    const nodeId = source.ownerNode.dataset['capacitorNativeNavigationId'];
+    if (!nodeId) {
+        return undefined;
+    }
+    // eslint-disable-next-line @typescript-eslint/prefer-for-of
+    for (let j = 0; j < view.document.styleSheets.length; j++) {
+        const targetStyleSheet = view.document.styleSheets[j];
+        if (targetStyleSheet.ownerNode.dataset['capacitorNativeNavigationId'] === nodeId) {
+            return targetStyleSheet;
+        }
+    }
+    return undefined;
+}
+/**
+ * Find the CSSStyleSheet corresponding to the given node, if any
+ * @param node a DOM node
+ * @returns
+ */
+function findStyleSheetForNode(node) {
+    const doc = node.ownerDocument;
+    if (!doc) {
+        return undefined;
+    }
+    // eslint-disable-next-line @typescript-eslint/prefer-for-of
+    for (let i = 0; i < doc.styleSheets.length; i++) {
+        const styleSheet = doc.styleSheets[i];
+        if (styleSheet.ownerNode === node) {
+            return styleSheet;
+        }
+    }
+    return undefined;
+}
 export function prepareWindowForSync(viewWindow) {
@@ -109,2 +204,7 @@ /* Copy all of the relevant nodes to the new window, this will include the sentinel */
             viewWindow.document.head.append(node.cloneNode(true));
+            /* Sync CSS rules */
+            const styleSheet = findStyleSheetForNode(node);
+            if (styleSheet) {
+                copyInitialCssRules(styleSheet, viewWindow);
+            }
         }
@@ -111,0 +211,0 @@ });

dist/index.cjs.js

@@ -155,2 +155,3 @@ 'use strict';
         }
+        monitorStylesheets();
     });
@@ -166,3 +167,97 @@ try {
     }
+    /**
+     * Monitor stylesheets on the main window so any rules added using insertRule are copied
+     * to other windows.
+     * <p>
+     * Emotion uses insertRule in production / speed mode rather than modifying the DOM.
+     */
+    function monitorStylesheets() {
+        // eslint-disable-next-line @typescript-eslint/prefer-for-of
+        for (let i = 0; i < window.document.styleSheets.length; i++) {
+            const styleSheet = window.document.styleSheets[i];
+            if (styleSheet.nativeNavigationMonitored) {
+                continue;
+            }
+            styleSheet.nativeNavigationMonitored = true;
+            /* Override insertRule so each time it is used we copy the new rule to the corresponding stylesheet in other windows */
+            const originalInsertRule = styleSheet.insertRule;
+            styleSheet.insertRule = function (rule, index) {
+                const nodeId = styleSheet.ownerNode.dataset['capacitorNativeNavigationId'];
+                if (nodeId) {
+                    for (const viewId of Object.keys(views)) {
+                        const view = views[viewId];
+                        const targetStyleSheet = findMatchingStyleSheet(styleSheet, view);
+                        if (targetStyleSheet) {
+                            try {
+                                targetStyleSheet.insertRule(rule, index);
+                            }
+                            catch (error) {
+                                console.warn(`Failed to sync cssRule to ${viewId}: ${error instanceof Error ? error.message : error}: @${index} ${rule}`);
+                            }
+                        }
+                    }
+                }
+                return originalInsertRule.bind(styleSheet)(rule, index);
+            };
+            /* Copy the initial set of rules to other windows */
+            for (const viewId of Object.keys(views)) {
+                const view = views[viewId];
+                copyInitialCssRules(styleSheet, view);
+            }
+        }
+    }
 }
+/**
+ *
+ * @param styleSheet the source stylesheet
+ * @param view the native navigation window to find a matching stylesheet in to copy to
+ */
+function copyInitialCssRules(styleSheet, view) {
+    const targetStyleSheet = findMatchingStyleSheet(styleSheet, view);
+    if (targetStyleSheet) {
+        for (let k = 0; k < styleSheet.cssRules.length; k++) {
+            const cssText = styleSheet.cssRules[k].cssText;
+            targetStyleSheet.insertRule(cssText, k);
+        }
+    }
+}
+/**
+ * Find a style sheet in a native navigation window to match the given one in the main window.
+ * @param source the source stylesheet in the main window
+ * @param view the window to search in
+ * @returns a style sheet or undefined if not found
+ */
+function findMatchingStyleSheet(source, view) {
+    const nodeId = source.ownerNode.dataset['capacitorNativeNavigationId'];
+    if (!nodeId) {
+        return undefined;
+    }
+    // eslint-disable-next-line @typescript-eslint/prefer-for-of
+    for (let j = 0; j < view.document.styleSheets.length; j++) {
+        const targetStyleSheet = view.document.styleSheets[j];
+        if (targetStyleSheet.ownerNode.dataset['capacitorNativeNavigationId'] === nodeId) {
+            return targetStyleSheet;
+        }
+    }
+    return undefined;
+}
+/**
+ * Find the CSSStyleSheet corresponding to the given node, if any
+ * @param node a DOM node
+ * @returns
+ */
+function findStyleSheetForNode(node) {
+    const doc = node.ownerDocument;
+    if (!doc) {
+        return undefined;
+    }
+    // eslint-disable-next-line @typescript-eslint/prefer-for-of
+    for (let i = 0; i < doc.styleSheets.length; i++) {
+        const styleSheet = doc.styleSheets[i];
+        if (styleSheet.ownerNode === node) {
+            return styleSheet;
+        }
+    }
+    return undefined;
+}
 function prepareWindowForSync(viewWindow) {
@@ -176,2 +271,7 @@ /* Copy all of the relevant nodes to the new window, this will include the sentinel */
             viewWindow.document.head.append(node.cloneNode(true));
+            /* Sync CSS rules */
+            const styleSheet = findStyleSheetForNode(node);
+            if (styleSheet) {
+                copyInitialCssRules(styleSheet, viewWindow);
+            }
         }
@@ -178,0 +278,0 @@ });

dist/index.js

@@ -150,2 +150,3 @@ var CapacitorNativeNavigationReact = (function (exports, nativeNavigation, React, ReactDOM) {
             }
+            monitorStylesheets();
         });
@@ -161,3 +162,97 @@ try {
         }
+        /**
+         * Monitor stylesheets on the main window so any rules added using insertRule are copied
+         * to other windows.
+         * <p>
+         * Emotion uses insertRule in production / speed mode rather than modifying the DOM.
+         */
+        function monitorStylesheets() {
+            // eslint-disable-next-line @typescript-eslint/prefer-for-of
+            for (let i = 0; i < window.document.styleSheets.length; i++) {
+                const styleSheet = window.document.styleSheets[i];
+                if (styleSheet.nativeNavigationMonitored) {
+                    continue;
+                }
+                styleSheet.nativeNavigationMonitored = true;
+                /* Override insertRule so each time it is used we copy the new rule to the corresponding stylesheet in other windows */
+                const originalInsertRule = styleSheet.insertRule;
+                styleSheet.insertRule = function (rule, index) {
+                    const nodeId = styleSheet.ownerNode.dataset['capacitorNativeNavigationId'];
+                    if (nodeId) {
+                        for (const viewId of Object.keys(views)) {
+                            const view = views[viewId];
+                            const targetStyleSheet = findMatchingStyleSheet(styleSheet, view);
+                            if (targetStyleSheet) {
+                                try {
+                                    targetStyleSheet.insertRule(rule, index);
+                                }
+                                catch (error) {
+                                    console.warn(`Failed to sync cssRule to ${viewId}: ${error instanceof Error ? error.message : error}: @${index} ${rule}`);
+                                }
+                            }
+                        }
+                    }
+                    return originalInsertRule.bind(styleSheet)(rule, index);
+                };
+                /* Copy the initial set of rules to other windows */
+                for (const viewId of Object.keys(views)) {
+                    const view = views[viewId];
+                    copyInitialCssRules(styleSheet, view);
+                }
+            }
+        }
     }
+    /**
+     *
+     * @param styleSheet the source stylesheet
+     * @param view the native navigation window to find a matching stylesheet in to copy to
+     */
+    function copyInitialCssRules(styleSheet, view) {
+        const targetStyleSheet = findMatchingStyleSheet(styleSheet, view);
+        if (targetStyleSheet) {
+            for (let k = 0; k < styleSheet.cssRules.length; k++) {
+                const cssText = styleSheet.cssRules[k].cssText;
+                targetStyleSheet.insertRule(cssText, k);
+            }
+        }
+    }
+    /**
+     * Find a style sheet in a native navigation window to match the given one in the main window.
+     * @param source the source stylesheet in the main window
+     * @param view the window to search in
+     * @returns a style sheet or undefined if not found
+     */
+    function findMatchingStyleSheet(source, view) {
+        const nodeId = source.ownerNode.dataset['capacitorNativeNavigationId'];
+        if (!nodeId) {
+            return undefined;
+        }
+        // eslint-disable-next-line @typescript-eslint/prefer-for-of
+        for (let j = 0; j < view.document.styleSheets.length; j++) {
+            const targetStyleSheet = view.document.styleSheets[j];
+            if (targetStyleSheet.ownerNode.dataset['capacitorNativeNavigationId'] === nodeId) {
+                return targetStyleSheet;
+            }
+        }
+        return undefined;
+    }
+    /**
+     * Find the CSSStyleSheet corresponding to the given node, if any
+     * @param node a DOM node
+     * @returns
+     */
+    function findStyleSheetForNode(node) {
+        const doc = node.ownerDocument;
+        if (!doc) {
+            return undefined;
+        }
+        // eslint-disable-next-line @typescript-eslint/prefer-for-of
+        for (let i = 0; i < doc.styleSheets.length; i++) {
+            const styleSheet = doc.styleSheets[i];
+            if (styleSheet.ownerNode === node) {
+                return styleSheet;
+            }
+        }
+        return undefined;
+    }
     function prepareWindowForSync(viewWindow) {
@@ -171,2 +266,7 @@ /* Copy all of the relevant nodes to the new window, this will include the sentinel */
                 viewWindow.document.head.append(node.cloneNode(true));
+                /* Sync CSS rules */
+                const styleSheet = findStyleSheetForNode(node);
+                if (styleSheet) {
+                    copyInitialCssRules(styleSheet, viewWindow);
+                }
             }
@@ -173,0 +273,0 @@ });

package.json

 {
   "name": "@cactuslab/native-navigation-react",
-  "version": "0.0.8",
+  "version": "0.0.9",
   "description": "React support for Native navigation for Capacitor apps",
@@ -30,3 +30,3 @@ "main": "dist/plugin.cjs.js",
   "devDependencies": {
-    "@cactuslab/native-navigation": "^0.0.7",
+    "@cactuslab/native-navigation": "^0.0.8",
     "@capacitor/core": "^4.0.0",
@@ -44,3 +44,3 @@ "@ionic/eslint-config": "^0.3.0",
   "peerDependencies": {
-    "@cactuslab/native-navigation": "^0.0.7",
+    "@cactuslab/native-navigation": "^0.0.8",
     "@capacitor/core": "^4.0.0",
@@ -47,0 +47,0 @@ "react": "^18.2.0",

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

142166

increased by30.69%

Lines of code

1309

increased by29.73%

No dependency changes