New Case Study:See how Anthropic automated 95% of dependency reviews with Socket.Learn More →
@builderx/bridge
Advanced tools
@builderx/bridge - npm Package Compare versions
Comparing version 0.1.14 to 1.0.0
| { | ||
| "name": "@builderx/bridge", | ||
| "version": "0.1.14", | ||
| "version": "1.0.0", | ||
| "main": "dist/index.js", | ||
| "types": "dist/index.d.ts", | ||
| "scripts": { | ||
| "build": "tsc --noEmitOnError false", | ||
| "build": "tsc --noEmitOnError false || true", | ||
| "prepare": "yarn build", | ||
@@ -9,0 +9,0 @@ "dev": "tsc-watch" |
| class BridgeStore { | ||
| private _layerResizing: boolean = false; | ||
| private _artboardId: string = ""; | ||
| get layerResizing(): boolean { | ||
@@ -11,4 +11,12 @@ return this._layerResizing; | ||
| } | ||
| get artboardId(): string { | ||
| return this._artboardId; | ||
| } | ||
| setArtboardId(value: string): void { | ||
| this._artboardId = value; | ||
| } | ||
| } | ||
| export const bridgeStore = new BridgeStore(); |
@@ -0,1 +1,3 @@ | ||
| // Add debug logging for import | ||
| declare global { | ||
@@ -7,14 +9,20 @@ interface Window { | ||
| import { bridgeStore } from './BridgeStore'; | ||
| // Add more detailed logging | ||
| console.log("Before initBridge function definition"); | ||
| export function initBridge(): void { | ||
| export function initBridge(selfFrame: HTMLIFrameElement): void { | ||
| if (typeof window !== "undefined") { | ||
| window.isInitialized = true; | ||
| if (typeof window !== 'undefined' && !window.isInitialized) { | ||
| window.isInitialized = true; | ||
| window.addEventListener("load", () => { | ||
| window.parent.postMessage({ type: "preview-ready", message: "" }, "*"); | ||
| }); | ||
| function sendMessageToParent(message: any): void { | ||
| if (typeof window !== 'undefined') { | ||
| if (typeof window !== "undefined") { | ||
| try { | ||
| window.parent.postMessage(message, '*'); // Target origin should match the parent's origin | ||
| window.parent.postMessage(message, "*"); // Target origin should match the parent's origin | ||
| // window.postMessage(message, '*'); // Target origin should match the parent's origin | ||
| } catch (error) { | ||
| console.error('Error sending message to parent:', error); | ||
| console.error("Error sending message to parent:", error); | ||
| } | ||
@@ -30,5 +38,8 @@ } | ||
| // const iframeDom = getSelfIframeDom(); | ||
| sendMessageToParent({ | ||
| type: 'onUpdateTree', | ||
| type: "onUpdateTree", | ||
| data: initialReactTree, | ||
| artboardId: window["artboardId"], | ||
| }); | ||
@@ -47,3 +58,4 @@ } | ||
| const rootFiber = getRootFiberNode(); | ||
| if (rootFiber) { | ||
| if (rootFiber && window["artboardId"]) { | ||
| clearInterval(poll); | ||
@@ -54,3 +66,3 @@ updateReactTree(); | ||
| console.error( | ||
| 'Failed to find React root fiber node after multiple attempts' | ||
| "Failed to find React root fiber node after multiple attempts" | ||
| ); | ||
@@ -88,4 +100,5 @@ } | ||
| sendMessageToParent({ | ||
| type: 'onAppLoaded', | ||
| type: "onAppLoaded", | ||
| }); | ||
| pollForRootFiberNode(); | ||
@@ -96,8 +109,10 @@ detectHotModuleReload(); | ||
| const handleMessage = (event: MessageEvent): void => { | ||
| // console.log('initBridge', window, window.document); | ||
| // Add new handlers for navigation | ||
| if (event.data && event.data.type === 'navigate/back') { | ||
| if (event.data && event.data.type === "navigate/back") { | ||
| window.history.back(); | ||
| pollForRootFiberNode(); | ||
| } | ||
| if (event.data && event.data.type === 'navigate/forward') { | ||
| if (event.data && event.data.type === "navigate/forward") { | ||
| window.history.forward(); | ||
@@ -107,7 +122,7 @@ pollForRootFiberNode(); | ||
| if (event.data && event.data.type === 'rpc') { | ||
| if (event.data && event.data.type === "rpc") { | ||
| handleRPC(event.data); | ||
| } | ||
| if (event?.data?.type == 'setDOMStyleUntilHMR') { | ||
| if (event?.data?.type == "setDOMStyleUntilHMR") { | ||
| var doms = document.querySelectorAll( | ||
@@ -121,2 +136,7 @@ '[data-bx-path="' + event.data.payload.path + '"]' | ||
| } | ||
| if (event.data && event.data.type === "setArtboardId") { | ||
| window["artboardId"] = event.data.payload.artboardId; | ||
| // bridgeStore.setArtboardId(event.data.payload.artboardId); | ||
| } | ||
| }; | ||
@@ -129,12 +149,11 @@ | ||
| switch (fnName) { | ||
| case 'add': | ||
| case "add": | ||
| result = fnArgs.a + fnArgs.b; | ||
| break; | ||
| case 'getLayerById': | ||
| case "getLayerById": | ||
| result = getLayerById(fnArgs); | ||
| break; | ||
| case 'getLayerComputedStyle': | ||
| case "getLayerComputedStyle": | ||
| result = getLayerComputedStyle(fnArgs); | ||
@@ -144,12 +163,27 @@ | ||
| case 'getLayerAtXY': | ||
| case "getLayerAtXY": | ||
| result = getLayerAtXY(fnArgs); | ||
| // if (id.startsWith('main')) { | ||
| // } | ||
| break; | ||
| case 'setLayerResizing': | ||
| case "setLayerResizing": | ||
| result = setLayerResizing(fnArgs); | ||
| break; | ||
| // Then in your message handler switch statement: | ||
| case "findContainerForDimensions": | ||
| result = findContainerForDimensions(fnArgs); | ||
| break; | ||
| case "getPositionedAncestorOffset": | ||
| result = getPositionedAncestorOffset(fnArgs); | ||
| break; | ||
| case "getPathOfChildFromParent": | ||
| result = getPathOfChildFromParent(fnArgs); | ||
| break; | ||
| /*case 'getSelectedLayerComputedStyle': | ||
| result = getSelectedLayerComputedStyle(fnArgs); | ||
| break;*/ | ||
| result = getSelectedLayerComputedStyle(fnArgs); | ||
| break;*/ | ||
| default: | ||
@@ -161,3 +195,3 @@ console.warn(`Unknown RPC function: ${fnName}`); | ||
| sendMessageToParent({ | ||
| type: 'rpcResolved', | ||
| type: "rpcResolved", | ||
| calledMethod: fnName, | ||
@@ -170,5 +204,19 @@ id: id, | ||
| function setLayerResizing({ isResizing }: { isResizing: boolean }): void { | ||
| bridgeStore.setLayerResizing(isResizing); | ||
| window["layerResizing"] = isResizing; | ||
| } | ||
| function getSelfIframeDom(): HTMLIFrameElement | null { | ||
| // const iframes = window.parent.frames; | ||
| // for (const iframe of iframes) { | ||
| // console.log(iframe, ">>>>>>>> frames"); | ||
| // if (iframe.contentWindow === window) { | ||
| // return iframe; | ||
| // } | ||
| // } | ||
| return null; | ||
| } | ||
| // Define the new function | ||
@@ -179,5 +227,21 @@ function getLayerAtXY(args: { | ||
| inLayers?: string[]; | ||
| zoomLevel?: number; | ||
| }): any { | ||
| const { x, y, inLayers } = args; | ||
| let { x, y, inLayers, zoomLevel } = args; | ||
| // const iframeDom = getSelfIframeDom(); | ||
| // let offsetX = 0; | ||
| // let offsetY = 0; | ||
| // if (iframeDom) { | ||
| // const rect = iframeDom?.getBoundingClientRect(); | ||
| // offsetX = rect ? rect.left : 0; | ||
| // offsetY = rect ? rect.top : 0; | ||
| // } | ||
| // x = (x - offsetX) / zoomLevel; | ||
| // y = (y - offsetY) / zoomLevel; | ||
| const elementAtPoint = document.elementFromPoint(x, y); | ||
@@ -192,4 +256,6 @@ | ||
| const memoizedProps = fiberNode.memoizedProps; | ||
| if (memoizedProps && 'data-bx-path' in memoizedProps) { | ||
| dataPath = memoizedProps['data-bx-path']; | ||
| if (memoizedProps && "data-bx-path" in memoizedProps) { | ||
| dataPath = memoizedProps["data-bx-path"]; | ||
| if (dataPath && inLayers.includes(dataPath)) { | ||
@@ -204,3 +270,3 @@ element = getDomNodeFromFiber(fiberNode); | ||
| element = elementAtPoint; | ||
| dataPath = fiberNode?.memoizedProps['data-bx-path']; | ||
| dataPath = fiberNode?.memoizedProps["data-bx-path"]; | ||
| } | ||
@@ -212,3 +278,2 @@ | ||
| const result: any = { | ||
@@ -230,19 +295,19 @@ x: rect.left, | ||
| function getDomNodeFromPath(path: string): Element | null { | ||
| const fiberNode = getFibreNodeFromPath(path); | ||
| // Get the DOM node from the fiber node | ||
| let domNode: Element | null; | ||
| let domNode: Element | null; | ||
| if (fiberNode) { | ||
| // console.log(fiberNode,"fiberNode 269") | ||
| domNode = getDomNodeFromFiber(fiberNode); | ||
| } else { | ||
| //TODO: not getting dom node but path log is correct | ||
| domNode = document.querySelector(`[data-bx-path="${path}"]`); | ||
| // console.log({domNode,path},"getDomNodeFromPath at 277;;") | ||
| } | ||
| // console.log(domNode,"layerId 282") | ||
| return domNode; | ||
| } | ||
| // Update this function | ||
@@ -255,14 +320,18 @@ function getLayerById(args: { layerId: string }): any { | ||
| const rect = element.getBoundingClientRect(); | ||
| // console.log('event>>>>>>', args, layerId, element); | ||
| const style = window.getComputedStyle(element); | ||
| const transform = style.transform; | ||
| const rotate = style.rotate; | ||
| // Extract rotation from either transform matrix or rotate property | ||
| let rotation = 0; | ||
| if (rotate && rotate !== 'none') { | ||
| if (rotate && rotate !== "none") { | ||
| // Parse rotate value (e.g., "45deg" -> 45) | ||
| rotation = parseFloat(rotate); | ||
| } else if (transform && transform !== 'none') { | ||
| const values = transform.split('(')[1].split(')')[0].split(','); | ||
| rotation = Math.round(Math.atan2(Number(values[1]), Number(values[0])) * (180/Math.PI)); | ||
| } else if (transform && transform !== "none") { | ||
| const values = transform.split("(")[1].split(")")[0].split(","); | ||
| rotation = Math.round( | ||
| Math.atan2(Number(values[1]), Number(values[0])) * (180 / Math.PI) | ||
| ); | ||
| } | ||
@@ -281,5 +350,4 @@ | ||
| result.container = getContainerData(fiberNode); | ||
| return result; | ||
| } | ||
@@ -290,3 +358,171 @@ | ||
| // Add this function alongside other bridge functions like getLayerAtXY | ||
| function findContainerForDimensions({ | ||
| x, | ||
| y, | ||
| width, | ||
| height, | ||
| artboardId, | ||
| }: { | ||
| x: number; | ||
| y: number; | ||
| width: number; | ||
| height: number; | ||
| artboardId: string; | ||
| }) { | ||
| // Locate the artboard first | ||
| const artboard = document.querySelector( | ||
| `[data-bx-path^="${artboardId}"]` | ||
| ); | ||
| console.log(artboard, "abcde"); | ||
| if (!artboard) { | ||
| console.error(`Artboard with ID ${artboardId} not found`); | ||
| return null; | ||
| } | ||
| // Search for containers within the artboard | ||
| const allLayers = artboard.querySelectorAll("[data-bx-path]"); | ||
| let bestContainer = null; | ||
| let smallestArea = Infinity; | ||
| allLayers.forEach((element) => { | ||
| const rect = element.getBoundingClientRect(); | ||
| const path = element.getAttribute("data-bx-path"); | ||
| // Check if the element can contain the target dimensions | ||
| if ( | ||
| rect.left <= x && | ||
| rect.top <= y && | ||
| rect.left + rect.width >= x + width && | ||
| rect.top + rect.height >= y + height | ||
| ) { | ||
| const area = rect.width * rect.height; | ||
| if (area < smallestArea) { | ||
| smallestArea = area; | ||
| bestContainer = { | ||
| path: path, | ||
| x: rect.left, | ||
| y: rect.top, | ||
| width: rect.width, | ||
| height: rect.height, | ||
| container: { x: 0, y: 0 }, | ||
| }; | ||
| } | ||
| } | ||
| }); | ||
| // Fallback to the artboard itself if no container found | ||
| if (!bestContainer) { | ||
| const rect = artboard.getBoundingClientRect(); | ||
| const path = artboard.getAttribute("data-bx-path"); | ||
| bestContainer = { | ||
| path: path, | ||
| x: rect.left, | ||
| y: rect.top, | ||
| width: rect.width, | ||
| height: rect.height, | ||
| container: { x: 0, y: 0 }, | ||
| }; | ||
| } | ||
| return bestContainer; | ||
| } | ||
| function getPositionedAncestorOffset({ | ||
| elementPath, | ||
| artboardId, | ||
| position, | ||
| }: { | ||
| elementPath: string; | ||
| artboardId: string; | ||
| position: { | ||
| x: number; | ||
| y: number; | ||
| }; | ||
| }) { | ||
| // Locate the artboard first | ||
| const artboard = document.querySelector( | ||
| `[data-bx-path^="${artboardId}"]` | ||
| ); | ||
| if (!artboard) { | ||
| console.error(`Artboard with ID ${artboardId} not found`); | ||
| return null; | ||
| } | ||
| const elements = artboard?.querySelectorAll( | ||
| `[data-bx-path="${elementPath}"]` | ||
| ); | ||
| console.log(elements, "elements"); | ||
| if (!elements) return { x: 0, y: 0 }; | ||
| // Find the closest element to the given position | ||
| let closestElement = null; | ||
| let minDistance = Infinity; | ||
| elements.forEach((element) => { | ||
| const rect = element.getBoundingClientRect(); | ||
| const elementCenterX = rect.left + rect.width / 2; | ||
| const elementCenterY = rect.top + rect.height / 2; | ||
| // Calculate distance using Pythagorean theorem | ||
| const distance = Math.sqrt( | ||
| Math.pow(elementCenterX - position.x, 2) + | ||
| Math.pow(elementCenterY - position.y, 2) | ||
| ); | ||
| if (distance < minDistance) { | ||
| minDistance = distance; | ||
| closestElement = element; | ||
| } | ||
| }); | ||
| if (!closestElement) return { x: 0, y: 0 }; | ||
| const rect = closestElement.getBoundingClientRect(); | ||
| console.log( | ||
| { | ||
| x: rect.left, | ||
| y: rect.top, | ||
| }, | ||
| "rect" | ||
| ); | ||
| return { | ||
| x: rect.left, | ||
| y: rect.top, | ||
| }; | ||
| } | ||
| function getPathOfChildFromParent({ | ||
| path, | ||
| artboardId, | ||
| index, | ||
| }: { | ||
| path: string; | ||
| artboardId: string; | ||
| index?: number; | ||
| }) { | ||
| const parentNode = document?.querySelector(`[data-bx-path="${path}"]`); | ||
| if (!parentNode) return null; | ||
| const children = parentNode.children; | ||
| if (children.length === 0) return null; | ||
| // Get target child (last child if no index provided) | ||
| const targetIndex = | ||
| typeof index === "number" ? index : children.length - 1; | ||
| // Validate index | ||
| if (targetIndex < 0 || targetIndex >= children.length) return null; | ||
| // Get the target child and return its path | ||
| const targetChild = children[targetIndex]; | ||
| return targetChild.getAttribute("data-bx-path"); | ||
| } | ||
| function getLayerComputedStyle(args: { layerId: string }): any { | ||
@@ -296,3 +532,3 @@ const { layerId } = args; | ||
| const domNode: any = getDomNodeFromPath(layerId); | ||
| // console.log(layerId,"layerId",domNode) | ||
| if (domNode) { | ||
@@ -302,25 +538,6 @@ // Get the computed style of the DOM node | ||
| const computedStyle = window.getComputedStyle(domNode); | ||
| console.log(JSON.parse(JSON.stringify(computedStyle)),"JSON.parse(JSON.stringify(computedStyle))") | ||
| // console.log(computedStyle, "computedStyle in getLayerComputedStyle",layerId) | ||
| return JSON.parse(JSON.stringify(computedStyle)); | ||
| // Convert computedStyle to key-value pairs | ||
| /*const styleProperties: { [key: string]: string } = {}; | ||
| for (let i = 0; i < computedStyle.length; i++) { | ||
| const property = computedStyle[i]; | ||
| const value = computedStyle.getPropertyValue(property); | ||
| styleProperties[property] = value; | ||
| } | ||
| console.log( | ||
| styleProperties, | ||
| 'styleProperties in getLayerComputedStyle' | ||
| ); | ||
| */ | ||
| // Now styleProperties contains key-value pairs of the computed style | ||
| // You can return the entire computedStyle object or specific properties | ||
| // return styleProperties; | ||
| } else { | ||
| console.log( 'domNode not found in getLayerComputedStyle initBridge') | ||
| console.error('DOM node okkk not found for the given layerId'); | ||
| // console.error("DOM node okkk not found for the given layerId"); | ||
| return null; | ||
@@ -335,5 +552,5 @@ } | ||
| (key) => | ||
| key.startsWith('__reactFiber$') || | ||
| key.startsWith('__reactContainer$') || | ||
| key.startsWith('__reactInternalInstance$') | ||
| key.startsWith("__reactFiber$") || | ||
| key.startsWith("__reactContainer$") || | ||
| key.startsWith("__reactInternalInstance$") | ||
| ); | ||
@@ -345,13 +562,13 @@ | ||
| function getRootFiberNode(): any { | ||
| const bodyElement = document.querySelector('body'); | ||
| const rootElement = bodyElement?.querySelector('[data-bx-path]'); | ||
| const bodyElement = document.querySelector("body"); | ||
| // console.log(bodyElement, 'bodyElement in getRootFiberNode'); | ||
| const rootElement = bodyElement?.querySelector("[data-bx-path]"); | ||
| if (!rootElement) { | ||
| console.error('No element with data-bx-path attribute found'); | ||
| // console.error("No element with data-bx-path attribute found"); | ||
| return null; | ||
| } | ||
| const rootFiber = getFiberFromDOMNode(rootElement); | ||
| return rootFiber; | ||
@@ -362,7 +579,7 @@ } | ||
| return ( | ||
| typeof object === 'object' && | ||
| typeof object === "object" && | ||
| object !== null && | ||
| 'type' in object && | ||
| 'props' in object && | ||
| 'key' in object | ||
| "type" in object && | ||
| "props" in object && | ||
| "key" in object | ||
| ); | ||
@@ -372,6 +589,8 @@ } | ||
| function getDebugInfo(element: any): any { | ||
| if (!element || !element._debugInfo) return null; | ||
| return {name: element._debugInfo.name, env: element._debugInfo.env} | ||
| return { | ||
| name: element._debugInfo.name, | ||
| env: element._debugInfo.env, | ||
| }; | ||
| } | ||
@@ -395,4 +614,4 @@ | ||
| if ( | ||
| fiber.memoizedProps && | ||
| fiber.memoizedProps['data-bx-path'] === targetPath | ||
| fiber?.memoizedProps && | ||
| fiber?.memoizedProps["data-bx-path"] === targetPath | ||
| ) { | ||
@@ -421,3 +640,2 @@ return fiber; | ||
| function getComponentName(child: any): string { | ||
| const displayName = | ||
@@ -427,3 +645,3 @@ child?.displayName || | ||
| child?.type?.name || | ||
| (typeof child?.type === 'string' ? child?.type : 'AnonymousComponent'); | ||
| (typeof child?.type === "string" ? child?.type : "AnonymousComponent"); | ||
@@ -438,7 +656,5 @@ return displayName; | ||
| function processChild(child: any): any { | ||
| const fiber = getFiberNodeInOwner( | ||
| child._owner, | ||
| child.props?.['data-bx-path'], | ||
| child?._owner, | ||
| child?.props?.["data-bx-path"], | ||
| child | ||
@@ -452,6 +668,6 @@ ); | ||
| let componentTree = buildReactFiberTree(fiber, withFiber); | ||
| const childElement: any = { | ||
| displayName: getComponentName(child), | ||
| path: child.props?.['data-bx-path'] || null, | ||
| path: child.props?.["data-bx-path"] || null, | ||
| fiber: withFiber ? fiber : null, | ||
@@ -464,3 +680,3 @@ componentTree: componentTree, | ||
| // Only process children if they exist and we haven't processed this path before | ||
| if (child.props?.children ) { | ||
| if (child.props?.children) { | ||
| if (Array.isArray(child.props.children)) { | ||
@@ -476,11 +692,15 @@ childElement.children = child.props.children | ||
| } | ||
| } | ||
| // Filter out duplicate children that exist in component tree | ||
| if (isComponent(fiber) && childElement?.children && componentTree?.children) { | ||
| if ( | ||
| isComponent(fiber) && | ||
| childElement?.children && | ||
| componentTree?.children | ||
| ) { | ||
| childElement.children = childElement.children.filter( | ||
| (child: any) => !componentTree.children.some( | ||
| (treeChild: any) => treeChild.path === child.path | ||
| ) | ||
| (child: any) => | ||
| !componentTree.children.some( | ||
| (treeChild: any) => treeChild.path === child.path | ||
| ) | ||
| ); | ||
@@ -523,8 +743,9 @@ } | ||
| const compareElementToFiber = (element: any, fiberNode: any) => { | ||
| if (typeof element === 'string') { | ||
| if (typeof element === "string") { | ||
| return fiberNode?.memoizedProps === element; | ||
| } | ||
| return ( | ||
| element?.props?.['data-bx-path'] === fiberNode?.memoizedProps?.['data-bx-path'] | ||
| element?.props?.["data-bx-path"] === | ||
| fiberNode?.memoizedProps?.["data-bx-path"] | ||
| ); | ||
@@ -562,8 +783,8 @@ }; | ||
| // Check if child.memoizedProps.children is not present in childChildren and then push | ||
| if (child.memoizedProps?.['children']) { | ||
| if (child.memoizedProps?.["children"]) { | ||
| const memoizedChildren = Array.isArray( | ||
| child.memoizedProps['children'] | ||
| child.memoizedProps["children"] | ||
| ) | ||
| ? child.memoizedProps['children'] | ||
| : [child.memoizedProps['children']]; | ||
| ? child.memoizedProps["children"] | ||
| : [child.memoizedProps["children"]]; | ||
@@ -574,3 +795,3 @@ memoizedChildren.forEach((memoizedChild: any) => { | ||
| (existingChild: any) => | ||
| existingChild.path === memoizedChild?.props?.['data-bx-path'] | ||
| existingChild.path === memoizedChild?.props?.["data-bx-path"] | ||
| ) | ||
@@ -581,3 +802,3 @@ ) { | ||
| debugInfo: getDebugInfo(memoizedChild?._owner), | ||
| path: memoizedChild?.props?.['data-bx-path'] || null, | ||
| path: memoizedChild?.props?.["data-bx-path"] || null, | ||
| props: { ...memoizedChild?.props }, | ||
@@ -593,3 +814,3 @@ _owner: memoizedChild?._owner, | ||
| debugInfo: getDebugInfo(child), | ||
| path: child.memoizedProps?.['data-bx-path'] || null, | ||
| path: child.memoizedProps?.["data-bx-path"] || null, | ||
| props: { ...child.memoizedProps, children: childChildren }, | ||
@@ -617,5 +838,5 @@ componentTree: fiberChildren.componentTree, | ||
| const element: any = { | ||
| displayName: 'Component-' + getComponentName(fiber), | ||
| displayName: "Component-" + getComponentName(fiber), | ||
| debugInfo: getDebugInfo(fiber), | ||
| path: fiber.memoizedProps?.['data-bx-path'] || null, | ||
| path: fiber.memoizedProps?.["data-bx-path"] || null, | ||
| fiber: withFiber ? fiber : null, | ||
@@ -646,4 +867,4 @@ children: [], | ||
| fiber.memoizedProps && | ||
| fiber.memoizedProps['data-bx-path'] && | ||
| fiber.memoizedProps['data-bx-path']?.includes('node_modules') === false; | ||
| fiber.memoizedProps["data-bx-path"] && | ||
| fiber.memoizedProps["data-bx-path"]?.includes("node_modules") === false; | ||
@@ -668,3 +889,3 @@ // If this node doesn't have a data-bx-path, check its children | ||
| debugInfo: getDebugInfo(fiber), | ||
| path: fiber.memoizedProps['data-bx-path'], | ||
| path: fiber.memoizedProps["data-bx-path"], | ||
| fiber: withFiber ? fiber : null, | ||
@@ -679,5 +900,5 @@ componentTree: buildReactFiberTree(fiber, withFiber), | ||
| if ( | ||
| key !== 'children' && | ||
| key !== 'data-bx-path' && | ||
| typeof value !== 'function' | ||
| key !== "children" && | ||
| key !== "data-bx-path" && | ||
| typeof value !== "function" | ||
| ) { | ||
@@ -691,3 +912,2 @@ element.props[key] = value; | ||
| if (children) { | ||
@@ -704,11 +924,10 @@ element.children = prepareChildrenTree(children, withFiber); | ||
| const elementTree = buildReactElementTree(rootFiber, true); | ||
| // Helper function to traverse the fiber tree | ||
| function traverseFiber(element: any): any { | ||
| if (element.path === path) { | ||
| if (element?.path === path && element?.fiber) { | ||
| return element.fiber; | ||
| } | ||
| if (element.children) { | ||
| if (element?.children) { | ||
| if (Array.isArray(element.children)) { | ||
@@ -719,3 +938,3 @@ for (let child of element.children) { | ||
| } | ||
| } else if (typeof element.children === 'object') { | ||
| } else if (typeof element.children === "object") { | ||
| return traverseFiber(element.children); | ||
@@ -726,3 +945,3 @@ } | ||
| // Traverse componentTree | ||
| if (element.componentTree) { | ||
| if (element?.componentTree) { | ||
| const result = traverseFiber(element.componentTree); | ||
@@ -739,3 +958,2 @@ if (result) return result; | ||
| function getContainerData(fiberNode: any): any { | ||
| let parentFiberNode = null; | ||
@@ -755,3 +973,3 @@ if (fiberNode) parentFiberNode = fiberNode.return; | ||
| bottom: parseFloat(parentStyle.paddingBottom), | ||
| left: parseFloat(parentStyle.paddingLeft) | ||
| left: parseFloat(parentStyle.paddingLeft), | ||
| }; | ||
@@ -769,4 +987,7 @@ | ||
| y: parentRect.top + containerPadding.top, | ||
| width: parentRect.width - (containerPadding.left + containerPadding.right), | ||
| height: parentRect.height - (containerPadding.top + containerPadding.bottom) | ||
| width: | ||
| parentRect.width - (containerPadding.left + containerPadding.right), | ||
| height: | ||
| parentRect.height - | ||
| (containerPadding.top + containerPadding.bottom), | ||
| }, | ||
@@ -782,3 +1003,3 @@ children: [], | ||
| containerData.children.push({ | ||
| path: childFiberNode.memoizedProps?.['data-bx-path'] || '', | ||
| path: childFiberNode.memoizedProps?.["data-bx-path"] || "", | ||
| width: childRect.width, | ||
@@ -796,4 +1017,4 @@ height: childRect.height, | ||
| if (typeof window !== 'undefined') { | ||
| window.addEventListener('message', handleMessage); | ||
| if (typeof window !== "undefined") { | ||
| window.addEventListener("message", handleMessage); | ||
@@ -805,3 +1026,3 @@ // Function to handle navigation changes | ||
| sendMessageToParent({ | ||
| type: 'navigation', | ||
| type: "navigation", | ||
| url: window.location.href, | ||
@@ -811,6 +1032,6 @@ }); | ||
| window.addEventListener('load', handleWindowLoad); | ||
| window.addEventListener("load", handleWindowLoad); | ||
| // Listen for popstate events (back/forward buttons) | ||
| window.addEventListener('popstate', handleNavigation); | ||
| window.addEventListener("popstate", handleNavigation); | ||
@@ -840,3 +1061,3 @@ // Intercept pushState and replaceState | ||
| sendMessageToParent({ | ||
| type: 'builderxToolsLoaded', | ||
| type: "builderxToolsLoaded", | ||
| value: true, | ||
@@ -850,6 +1071,12 @@ }); | ||
| const observer = new MutationObserver(() => { | ||
| if (!bridgeStore.layerResizing) pollForRootFiberNode(); | ||
| if (!window["layerResizing"]) { | ||
| console.log('targetNode start observing MO'); | ||
| // on code change | ||
| console.log("layerResizing", window["layerResizing"]); | ||
| setTimeout(() => { | ||
| setTimeout(() => { | ||
| pollForRootFiberNode(); | ||
| }, 2000); | ||
| }, 500); | ||
| } | ||
| }); | ||
@@ -860,10 +1087,15 @@ | ||
| // Target node to observe (the first div inside body) | ||
| const targetNode = document.querySelector('html'); | ||
| const config = { attributes: true, childList: true, subtree: true }; | ||
| const targetNode = document.querySelector("html"); | ||
| const config = { | ||
| // attributes: true, | ||
| childList: true, | ||
| subtree: true, | ||
| // attributes: true, // Observe attribute changes | ||
| }; | ||
| if (targetNode) { | ||
| observer.observe(targetNode, config); | ||
| console.log('MutationObserver started'); | ||
| // console.log('MutationObserver started'); | ||
| } else { | ||
| setTimeout(startObserving, 1000); // Retry after 1 second | ||
| setTimeout(startObserving); // Retry after 1 second | ||
| } | ||
@@ -873,4 +1105,4 @@ } | ||
| // Start observing when the DOM is ready | ||
| if (document.readyState === 'loading') { | ||
| document.addEventListener('DOMContentLoaded', startObserving); | ||
| if (document.readyState === "loading") { | ||
| document.addEventListener("DOMContentLoaded", startObserving); | ||
| } else { | ||
@@ -881,6 +1113,6 @@ startObserving(); | ||
| console.log('BuilderX Tools initialized v2'); | ||
| } else if (typeof window !== 'undefined' && window.isInitialized) { | ||
| console.log("BuilderX Tools initialized v2"); | ||
| } else if (typeof window !== "undefined" && window.isInitialized) { | ||
| console.log( | ||
| 'BuilderX Tools already initialized, skipping re-initialization' | ||
| "BuilderX Tools already initialized, skipping re-initialization" | ||
| ); | ||
@@ -891,3 +1123,3 @@ } | ||
| function getDOMUpdateActions(): any[] { | ||
| if (typeof window !== 'undefined') { | ||
| if (typeof window !== "undefined") { | ||
| (window as any).domUpdateActions = (window as any).domUpdateActions || []; | ||
@@ -911,3 +1143,2 @@ return (window as any).domUpdateActions; | ||
| for (const [property, value] of Object.entries(newStyleObject)) { | ||
@@ -951,3 +1182,3 @@ originalStyles[property] = DOM.style.getPropertyValue(property); | ||
| hmr.addStatusHandler((status: string) => { | ||
| if (status === 'idle') { | ||
| if (status === "idle") { | ||
| // Revert DOM changes when HMR update is completed | ||
@@ -959,41 +1190,42 @@ revertDOMChanges(); | ||
| /* | ||
| if (typeof module !== 'undefined' && module.hot) { | ||
| // Next.js and some other environments | ||
| addStatusHandler(module.hot); | ||
| module.hot.accept(undefined, () => { | ||
| // Module reloaded | ||
| revertDOMChanges(); | ||
| }); | ||
| return true; | ||
| } else if (import.meta && import.meta.hot) { | ||
| // Vite and some other environments | ||
| addStatusHandler(import.meta.hot); | ||
| return true; | ||
| } else if ( | ||
| typeof __webpack_module__ !== 'undefined' && | ||
| __webpack_module__.hot | ||
| ) { | ||
| // Webpack (used by Create React App and others) | ||
| addStatusHandler(__webpack_module__.hot); | ||
| return true; | ||
| } else if ( | ||
| typeof process !== 'undefined' && | ||
| process.env && | ||
| process.env.NODE_ENV === 'development' | ||
| ) { | ||
| // Generic development environment check (including Expo) | ||
| // Note: We can't add a specific listener here as there's no standard HMR API for this case | ||
| console.warn( | ||
| 'HMR not detected. DOM changes will not be automatically reverted.' | ||
| ); | ||
| return true; | ||
| } | ||
| */ | ||
| // if (typeof module !== 'undefined' && module.hot) { | ||
| // // Next.js and some other environments | ||
| // addStatusHandler(module.hot); | ||
| // module.hot.accept(undefined, () => { | ||
| // // Module reloaded | ||
| // revertDOMChanges(); | ||
| // }); | ||
| // return true; | ||
| // } else if (import.meta && import.meta.hot) { | ||
| // // Vite and some other environments | ||
| // addStatusHandler(import.meta.hot); | ||
| // return true; | ||
| // } else if ( | ||
| // typeof __webpack_module__ !== 'undefined' && | ||
| // __webpack_module__.hot | ||
| // ) { | ||
| // // Webpack (used by Create React App and others) | ||
| // addStatusHandler(__webpack_module__.hot); | ||
| // return true; | ||
| // } else if ( | ||
| // typeof process !== 'undefined' && | ||
| // process.env && | ||
| // process.env.NODE_ENV === 'development' | ||
| // ) { | ||
| // // Generic development environment check (including Expo) | ||
| // // Note: We can't add a specific listener here as there's no standard HMR API for this case | ||
| // console.warn( | ||
| // 'HMR not detected. DOM changes will not be automatically reverted.' | ||
| // ); | ||
| // return true; | ||
| // } | ||
| return false; | ||
| } | ||
| console.log('Bridge initialized'); | ||
| console.log("Bridge initialized"); | ||
| // Add your bridge initialization logic here | ||
| } |
Fixed alerts
No v1
QualityPackage is not semver >=1. This means it is not stable and does not support ^ ranges.
Found 1 instance in 1 package
Improved metrics
- Number of low quality alerts
- decreased by-50%
1
Worsened metrics
- Total package byte prevSize
- decreased by-58.28%
36284
- Number of package files
- decreased by-63.64%
8
- Lines of code
- decreased by-35.89%
1045
No dependency changes