farmon 0.1.0

package/dist/runtime/inject.js

@@ -0,0 +1,250 @@
+/*
+
+If I were designing Looma, I would have:
+
+inject.js
+├── MutationObserver
+├── History observer
+├── Resize observer
+├── Selection mode
+├── Runtime snapshot store
+└── Message bus
+
+
+I would organize it like this:
+
+inject.js
+├── iframe manager
+├── message bus
+├── selection mode
+├── mutation observer
+├── history observer
+├── resize observer
+├── runtime snapshot store
+└── error observer
+
+injector is instentenious
+
+
+*/
+console.log("========LOOMA STARTED================");
+import { INJECTOR_EVENTS } from "../schemas/runtime/injector.schema.js";
+import { createMutationObserver, startMutationObserver, } from "./observers/mutationObserver.js";
+import { createResizeObserver } from "./observers/resizeObserver.js";
+import { createHistoryObserver } from "./observers/historyObserver.js";
+import { refreshRuntimeSnapshot } from "./store/runtimeSnapshotStore.js";
+import { createErrorObserver } from "./observers/errorObserver.js";
+import { setRuntimeError } from "./store/runtimeErrorStore.js";
+import { mountIframe, expandIframe, collapseIframe, postMessageToLoomaPanel, } from "./iframe/iframeManager.js";
+let componentId = null;
+export function inject(options = {}) {
+    const config = {
+        serverUrl: "http://localhost:3001",
+        ...options,
+    };
+    // check if farmon server is running then only mount iframe
+    // otherwise show floating button saying "Start farmon server"
+    mountIframe(config.serverUrl);
+    // addObservers()
+    // addEventListeners()
+    const errorObserver = createErrorObserver({
+        onError(error) {
+            setRuntimeError(error);
+            console.error("Runtime error captured:", error);
+        },
+    });
+    const historyObserver = createHistoryObserver({
+        onRouteChange() {
+            refreshRuntimeSnapshot();
+            console.log("Route changed");
+        },
+    });
+    const observer = createMutationObserver({
+        onChange() {
+            // runtimeSnapshotStore.refresh();
+            refreshRuntimeSnapshot();
+            console.log("DOM changed");
+        },
+    });
+    const resizeObserver = createResizeObserver({
+        onResize() {
+            refreshRuntimeSnapshot();
+            console.log("Viewport resized");
+        },
+    });
+    historyObserver.start();
+    resizeObserver.start();
+    startMutationObserver(observer);
+    errorObserver.start();
+    window.addEventListener("message", (event) => {
+        switch (event.data.type) {
+            case INJECTOR_EVENTS.LOOMA_EXPAND:
+                expandIframe();
+                break;
+            case INJECTOR_EVENTS.LOOMA_COLLAPSE:
+                collapseIframe();
+                break;
+            case INJECTOR_EVENTS.START_COMPONENT_SELECTION:
+                selector.activateSelectionMode();
+                break;
+        }
+    });
+    const selector = createComponentSelectionSystem({
+        onSelect({ compId, element }) {
+            console.log("Selected:", compId);
+            componentId = compId;
+            console.log(element);
+            console.log(componentId);
+            postMessageToLoomaPanel({
+                type: INJECTOR_EVENTS.COMPONENT_SELECTED,
+                message: componentId,
+            });
+            // notifySnapshotChanged();
+            // addStatusLine(`Selected: ${componentId}`);
+        },
+    });
+    function createComponentSelectionSystem({ onSelect }) {
+        let isSelectionModeActive = false;
+        let currentlyHoveredElement = null;
+        let selectedElement = null;
+        // ----------------------------------------------------------
+        // HOVER OVERLAY
+        // ----------------------------------------------------------
+        const hoverOverlay = document.createElement("div");
+        hoverOverlay.style.position = "fixed";
+        hoverOverlay.style.pointerEvents = "none";
+        hoverOverlay.style.zIndex = "999999";
+        hoverOverlay.style.border = "2px solid #3b82f6";
+        hoverOverlay.style.background = "rgba(59, 130, 246, 0.08)";
+        hoverOverlay.style.display = "none";
+        hoverOverlay.style.boxSizing = "border-box";
+        document.body.appendChild(hoverOverlay);
+        // ----------------------------------------------------------
+        // SELECTED OVERLAY
+        // ----------------------------------------------------------
+        const selectedOverlay = document.createElement("div");
+        selectedOverlay.style.position = "fixed";
+        selectedOverlay.style.pointerEvents = "none";
+        selectedOverlay.style.zIndex = "999998";
+        selectedOverlay.style.border = "2px solid #22c55e";
+        selectedOverlay.style.background = "rgba(34, 197, 94, 0.08)";
+        selectedOverlay.style.display = "none";
+        selectedOverlay.style.boxSizing = "border-box";
+        document.body.appendChild(selectedOverlay);
+        // ----------------------------------------------------------
+        // UPDATE OVERLAY POSITION
+        // ----------------------------------------------------------
+        function updateOverlay(overlay, element) {
+            const rect = element.getBoundingClientRect();
+            overlay.style.display = "block";
+            overlay.style.top = `${rect.top}px`;
+            overlay.style.left = `${rect.left}px`;
+            overlay.style.width = `${rect.width}px`;
+            overlay.style.height = `${rect.height}px`;
+        }
+        // ----------------------------------------------------------
+        // HIDE OVERLAY
+        // ----------------------------------------------------------
+        function hideOverlay(overlay) {
+            overlay.style.display = "none";
+        }
+        // ----------------------------------------------------------
+        // FIND COMPONENT ELEMENT
+        // ----------------------------------------------------------
+        function findComponentElement(target) {
+            return target.closest("[data-farmon-id]");
+        }
+        // ----------------------------------------------------------
+        // MOUSE MOVE
+        // ----------------------------------------------------------
+        function handleMouseMove(event) {
+            if (!isSelectionModeActive) {
+                return;
+            }
+            const componentElement = findComponentElement(event.target);
+            if (!componentElement) {
+                hideOverlay(hoverOverlay);
+                currentlyHoveredElement = null;
+                return;
+            }
+            if (currentlyHoveredElement === componentElement) {
+                return;
+            }
+            currentlyHoveredElement = componentElement;
+            updateOverlay(hoverOverlay, componentElement);
+        }
+        // ----------------------------------------------------------
+        // CLICK HANDLER
+        // ----------------------------------------------------------
+        function handleClick(event) {
+            if (!isSelectionModeActive) {
+                return;
+            }
+            event.preventDefault();
+            event.stopPropagation();
+            const componentElement = findComponentElement(event.target);
+            if (!componentElement) {
+                return;
+            }
+            const componentId = componentElement.getAttribute("data-farmon-id");
+            // --------------------------------------------------------
+            // STORE SELECTED ELEMENT
+            // --------------------------------------------------------
+            selectedElement = componentElement;
+            // --------------------------------------------------------
+            // SHOW PERSISTENT OVERLAY
+            // --------------------------------------------------------
+            updateOverlay(selectedOverlay, componentElement);
+            onSelect?.({
+                compId: componentId,
+                element: componentElement,
+            });
+            deactivateSelectionMode();
+        }
+        // ----------------------------------------------------------
+        // ACTIVATE
+        // ----------------------------------------------------------
+        function activateSelectionMode() {
+            if (isSelectionModeActive) {
+                return;
+            }
+            isSelectionModeActive = true;
+            document.addEventListener("mousemove", handleMouseMove, true);
+            document.addEventListener("click", handleClick, true);
+            document.body.style.cursor = "crosshair";
+        }
+        // ----------------------------------------------------------
+        // DEACTIVATE
+        // ----------------------------------------------------------
+        function deactivateSelectionMode() {
+            isSelectionModeActive = false;
+            currentlyHoveredElement = null;
+            hideOverlay(hoverOverlay);
+            document.removeEventListener("mousemove", handleMouseMove, true);
+            document.removeEventListener("click", handleClick, true);
+            document.body.style.cursor = "";
+        }
+        // ----------------------------------------------------------
+        // CLEAR SELECTED COMPONENT
+        // ----------------------------------------------------------
+        function clearSelection() {
+            selectedElement = null;
+            hideOverlay(selectedOverlay);
+        }
+        // ----------------------------------------------------------
+        // DESTROY
+        // ----------------------------------------------------------
+        function destroy() {
+            deactivateSelectionMode();
+            hoverOverlay.remove();
+            selectedOverlay.remove();
+        }
+        return {
+            activateSelectionMode,
+            deactivateSelectionMode,
+            clearSelection,
+            destroy,
+        };
+    }
+}
+//# sourceMappingURL=inject.js.map

package/dist/runtime/inject.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"inject.js","sourceRoot":"","sources":["../../runtime/inject.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;EA4BE;AAEF,OAAO,CAAC,GAAG,CAAC,uCAAuC,CAAC,CAAC;AACrD,OAAO,EAAE,eAAe,EAAE,MAAM,uCAAuC,CAAC;AAExE,OAAO,EACL,sBAAsB,EACtB,qBAAqB,GACtB,MAAM,iCAAiC,CAAC;AACzC,OAAO,EAAE,oBAAoB,EAAE,MAAM,+BAA+B,CAAC;AACrE,OAAO,EAAE,qBAAqB,EAAE,MAAM,gCAAgC,CAAC;AACvE,OAAO,EAAE,sBAAsB,EAAE,MAAM,iCAAiC,CAAC;AACzE,OAAO,EAAE,mBAAmB,EAAE,MAAM,8BAA8B,CAAC;AACnE,OAAO,EAAE,eAAe,EAAE,MAAM,8BAA8B,CAAC;AAC/D,OAAO,EACL,WAAW,EACX,YAAY,EACZ,cAAc,EACd,uBAAuB,GACxB,MAAM,2BAA2B,CAAC;AAEnC,IAAI,WAAW,GAAG,IAAI,CAAC;AAEvB,MAAM,UAAU,MAAM,CAAC,OAAO,GAAG,EAAE;IACjC,MAAM,MAAM,GAAG;QACb,SAAS,EAAE,uBAAuB;QAClC,GAAG,OAAO;KACX,CAAC;IAEF,2DAA2D;IAC3D,8DAA8D;IAE9D,WAAW,CAAC,MAAM,CAAC,SAAS,CAAC,CAAC;IAC9B,iBAAiB;IACjB,sBAAsB;IAEtB,MAAM,aAAa,GAAG,mBAAmB,CAAC;QACxC,OAAO,CAAC,KAAK;YACX,eAAe,CAAC,KAAK,CAAC,CAAC;YAEvB,OAAO,CAAC,KAAK,CAAC,yBAAyB,EAAE,KAAK,CAAC,CAAC;QAClD,CAAC;KACF,CAAC,CAAC;IAEH,MAAM,eAAe,GAAG,qBAAqB,CAAC;QAC5C,aAAa;YACX,sBAAsB,EAAE,CAAC;YAEzB,OAAO,CAAC,GAAG,CAAC,eAAe,CAAC,CAAC;QAC/B,CAAC;KACF,CAAC,CAAC;IAEH,MAAM,QAAQ,GAAG,sBAAsB,CAAC;QACtC,QAAQ;YACN,kCAAkC;YAClC,sBAAsB,EAAE,CAAC;YACzB,OAAO,CAAC,GAAG,CAAC,aAAa,CAAC,CAAC;QAC7B,CAAC;KACF,CAAC,CAAC;IAEH,MAAM,cAAc,GAAG,oBAAoB,CAAC;QAC1C,QAAQ;YACN,sBAAsB,EAAE,CAAC;YAEzB,OAAO,CAAC,GAAG,CAAC,kBAAkB,CAAC,CAAC;QAClC,CAAC;KACF,CAAC,CAAC;IAEH,eAAe,CAAC,KAAK,EAAE,CAAC;IACxB,cAAc,CAAC,KAAK,EAAE,CAAC;IACvB,qBAAqB,CAAC,QAAQ,CAAC,CAAC;IAChC,aAAa,CAAC,KAAK,EAAE,CAAC;IAEtB,MAAM,CAAC,gBAAgB,CAAC,SAAS,EAAE,CAAC,KAAK,EAAE,EAAE;QAC3C,QAAQ,KAAK,CAAC,IAAI,CAAC,IAAI,EAAE,CAAC;YACxB,KAAK,eAAe,CAAC,YAAY;gBAC/B,YAAY,EAAE,CAAC;gBACf,MAAM;YAER,KAAK,eAAe,CAAC,cAAc;gBACjC,cAAc,EAAE,CAAC;gBACjB,MAAM;YAER,KAAK,eAAe,CAAC,yBAAyB;gBAC5C,QAAQ,CAAC,qBAAqB,EAAE,CAAC;gBACjC,MAAM;QACV,CAAC;IACH,CAAC,CAAC,CAAC;IAEH,MAAM,QAAQ,GAAG,8BAA8B,CAAC;QAC9C,QAAQ,CAAC,EAAE,MAAM,EAAE,OAAO,EAAE;YAC1B,OAAO,CAAC,GAAG,CAAC,WAAW,EAAE,MAAM,CAAC,CAAC;YACjC,WAAW,GAAG,MAAM,CAAC;YACrB,OAAO,CAAC,GAAG,CAAC,OAAO,CAAC,CAAC;YAErB,OAAO,CAAC,GAAG,CAAC,WAAW,CAAC,CAAC;YAEzB,uBAAuB,CAAC;gBACtB,IAAI,EAAE,eAAe,CAAC,kBAAkB;gBACxC,OAAO,EAAE,WAAW;aACrB,CAAC,CAAC;YACH,2BAA2B;YAE3B,6CAA6C;QAC/C,CAAC;KACF,CAAC,CAAC;IAEH,SAAS,8BAA8B,CAAC,EAAE,QAAQ,EAAE;QAClD,IAAI,qBAAqB,GAAG,KAAK,CAAC;QAElC,IAAI,uBAAuB,GAAG,IAAI,CAAC;QAEnC,IAAI,eAAe,GAAG,IAAI,CAAC;QAE3B,6DAA6D;QAC7D,gBAAgB;QAChB,6DAA6D;QAE7D,MAAM,YAAY,GAAG,QAAQ,CAAC,aAAa,CAAC,KAAK,CAAC,CAAC;QAEnD,YAAY,CAAC,KAAK,CAAC,QAAQ,GAAG,OAAO,CAAC;QACtC,YAAY,CAAC,KAAK,CAAC,aAAa,GAAG,MAAM,CAAC;QAC1C,YAAY,CAAC,KAAK,CAAC,MAAM,GAAG,QAAQ,CAAC;QACrC,YAAY,CAAC,KAAK,CAAC,MAAM,GAAG,mBAAmB,CAAC;QAChD,YAAY,CAAC,KAAK,CAAC,UAAU,GAAG,0BAA0B,CAAC;QAC3D,YAAY,CAAC,KAAK,CAAC,OAAO,GAAG,MAAM,CAAC;QACpC,YAAY,CAAC,KAAK,CAAC,SAAS,GAAG,YAAY,CAAC;QAE5C,QAAQ,CAAC,IAAI,CAAC,WAAW,CAAC,YAAY,CAAC,CAAC;QAExC,6DAA6D;QAC7D,mBAAmB;QACnB,6DAA6D;QAE7D,MAAM,eAAe,GAAG,QAAQ,CAAC,aAAa,CAAC,KAAK,CAAC,CAAC;QAEtD,eAAe,CAAC,KAAK,CAAC,QAAQ,GAAG,OAAO,CAAC;QAEzC,eAAe,CAAC,KAAK,CAAC,aAAa,GAAG,MAAM,CAAC;QAE7C,eAAe,CAAC,KAAK,CAAC,MAAM,GAAG,QAAQ,CAAC;QAExC,eAAe,CAAC,KAAK,CAAC,MAAM,GAAG,mBAAmB,CAAC;QAEnD,eAAe,CAAC,KAAK,CAAC,UAAU,GAAG,yBAAyB,CAAC;QAE7D,eAAe,CAAC,KAAK,CAAC,OAAO,GAAG,MAAM,CAAC;QAEvC,eAAe,CAAC,KAAK,CAAC,SAAS,GAAG,YAAY,CAAC;QAE/C,QAAQ,CAAC,IAAI,CAAC,WAAW,CAAC,eAAe,CAAC,CAAC;QAE3C,6DAA6D;QAC7D,0BAA0B;QAC1B,6DAA6D;QAE7D,SAAS,aAAa,CAAC,OAAO,EAAE,OAAO;YACrC,MAAM,IAAI,GAAG,OAAO,CAAC,qBAAqB,EAAE,CAAC;YAE7C,OAAO,CAAC,KAAK,CAAC,OAAO,GAAG,OAAO,CAAC;YAEhC,OAAO,CAAC,KAAK,CAAC,GAAG,GAAG,GAAG,IAAI,CAAC,GAAG,IAAI,CAAC;YAEpC,OAAO,CAAC,KAAK,CAAC,IAAI,GAAG,GAAG,IAAI,CAAC,IAAI,IAAI,CAAC;YAEtC,OAAO,CAAC,KAAK,CAAC,KAAK,GAAG,GAAG,IAAI,CAAC,KAAK,IAAI,CAAC;YAExC,OAAO,CAAC,KAAK,CAAC,MAAM,GAAG,GAAG,IAAI,CAAC,MAAM,IAAI,CAAC;QAC5C,CAAC;QAED,6DAA6D;QAC7D,eAAe;QACf,6DAA6D;QAE7D,SAAS,WAAW,CAAC,OAAO;YAC1B,OAAO,CAAC,KAAK,CAAC,OAAO,GAAG,MAAM,CAAC;QACjC,CAAC;QAED,6DAA6D;QAC7D,yBAAyB;QACzB,6DAA6D;QAE7D,SAAS,oBAAoB,CAAC,MAAM;YAClC,OAAO,MAAM,CAAC,OAAO,CAAC,kBAAkB,CAAC,CAAC;QAC5C,CAAC;QAED,6DAA6D;QAC7D,aAAa;QACb,6DAA6D;QAE7D,SAAS,eAAe,CAAC,KAAK;YAC5B,IAAI,CAAC,qBAAqB,EAAE,CAAC;gBAC3B,OAAO;YACT,CAAC;YAED,MAAM,gBAAgB,GAAG,oBAAoB,CAAC,KAAK,CAAC,MAAM,CAAC,CAAC;YAE5D,IAAI,CAAC,gBAAgB,EAAE,CAAC;gBACtB,WAAW,CAAC,YAAY,CAAC,CAAC;gBAC1B,uBAAuB,GAAG,IAAI,CAAC;gBAC/B,OAAO;YACT,CAAC;YAED,IAAI,uBAAuB,KAAK,gBAAgB,EAAE,CAAC;gBACjD,OAAO;YACT,CAAC;YAED,uBAAuB,GAAG,gBAAgB,CAAC;YAE3C,aAAa,CAAC,YAAY,EAAE,gBAAgB,CAAC,CAAC;QAChD,CAAC;QAED,6DAA6D;QAC7D,gBAAgB;QAChB,6DAA6D;QAE7D,SAAS,WAAW,CAAC,KAAK;YACxB,IAAI,CAAC,qBAAqB,EAAE,CAAC;gBAC3B,OAAO;YACT,CAAC;YAED,KAAK,CAAC,cAAc,EAAE,CAAC;YACvB,KAAK,CAAC,eAAe,EAAE,CAAC;YAExB,MAAM,gBAAgB,GAAG,oBAAoB,CAAC,KAAK,CAAC,MAAM,CAAC,CAAC;YAE5D,IAAI,CAAC,gBAAgB,EAAE,CAAC;gBACtB,OAAO;YACT,CAAC;YAED,MAAM,WAAW,GAAG,gBAAgB,CAAC,YAAY,CAAC,gBAAgB,CAAC,CAAC;YAEpE,2DAA2D;YAC3D,yBAAyB;YACzB,2DAA2D;YAE3D,eAAe,GAAG,gBAAgB,CAAC;YAEnC,2DAA2D;YAC3D,0BAA0B;YAC1B,2DAA2D;YAE3D,aAAa,CAAC,eAAe,EAAE,gBAAgB,CAAC,CAAC;YAEjD,QAAQ,EAAE,CAAC;gBACT,MAAM,EAAE,WAAW;gBACnB,OAAO,EAAE,gBAAgB;aAC1B,CAAC,CAAC;YAEH,uBAAuB,EAAE,CAAC;QAC5B,CAAC;QAED,6DAA6D;QAC7D,WAAW;QACX,6DAA6D;QAE7D,SAAS,qBAAqB;YAC5B,IAAI,qBAAqB,EAAE,CAAC;gBAC1B,OAAO;YACT,CAAC;YAED,qBAAqB,GAAG,IAAI,CAAC;YAE7B,QAAQ,CAAC,gBAAgB,CAAC,WAAW,EAAE,eAAe,EAAE,IAAI,CAAC,CAAC;YAE9D,QAAQ,CAAC,gBAAgB,CAAC,OAAO,EAAE,WAAW,EAAE,IAAI,CAAC,CAAC;YAEtD,QAAQ,CAAC,IAAI,CAAC,KAAK,CAAC,MAAM,GAAG,WAAW,CAAC;QAC3C,CAAC;QAED,6DAA6D;QAC7D,aAAa;QACb,6DAA6D;QAE7D,SAAS,uBAAuB;YAC9B,qBAAqB,GAAG,KAAK,CAAC;YAE9B,uBAAuB,GAAG,IAAI,CAAC;YAE/B,WAAW,CAAC,YAAY,CAAC,CAAC;YAE1B,QAAQ,CAAC,mBAAmB,CAAC,WAAW,EAAE,eAAe,EAAE,IAAI,CAAC,CAAC;YAEjE,QAAQ,CAAC,mBAAmB,CAAC,OAAO,EAAE,WAAW,EAAE,IAAI,CAAC,CAAC;YAEzD,QAAQ,CAAC,IAAI,CAAC,KAAK,CAAC,MAAM,GAAG,EAAE,CAAC;QAClC,CAAC;QAED,6DAA6D;QAC7D,2BAA2B;QAC3B,6DAA6D;QAE7D,SAAS,cAAc;YACrB,eAAe,GAAG,IAAI,CAAC;YAEvB,WAAW,CAAC,eAAe,CAAC,CAAC;QAC/B,CAAC;QAED,6DAA6D;QAC7D,UAAU;QACV,6DAA6D;QAE7D,SAAS,OAAO;YACd,uBAAuB,EAAE,CAAC;YAE1B,YAAY,CAAC,MAAM,EAAE,CAAC;YAEtB,eAAe,CAAC,MAAM,EAAE,CAAC;QAC3B,CAAC;QAED,OAAO;YACL,qBAAqB;YACrB,uBAAuB;YACvB,cAAc;YACd,OAAO;SACR,CAAC;IACJ,CAAC;AACH,CAAC"}