@bleedingdev/modern-js-boundary-debugger 0.0.0 → 3.9.0-ultramodern.5

package/dist/esm-node/boundary-debugger/index.mjs

@@ -0,0 +1,278 @@
+import "node:module";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { useEffect, useMemo, useState } from "react";
+const defaultStorageKey = 'modernjs:boundary-debugger:enabled';
+const queryParamName = 'modern-boundaries';
+const boundarySelector = '[data-modern-boundary-id]';
+const defaultLabels = {
+    cs: {
+        toggle: 'zobrazit hranice týmů'
+    },
+    en: {
+        toggle: 'show team boundaries'
+    }
+};
+const palette = [
+    '#ff5a5f',
+    '#30e27a',
+    '#f6cf45',
+    '#7c8cff',
+    '#29b6f6'
+];
+const readStoredEnabled = (storageKey, fallback)=>{
+    if ("u" < typeof window) return fallback;
+    try {
+        const stored = window.localStorage.getItem(storageKey);
+        return null === stored ? fallback : 'true' === stored;
+    } catch  {
+        return fallback;
+    }
+};
+const writeStoredEnabled = (storageKey, enabled)=>{
+    if ("u" < typeof window) return;
+    try {
+        window.localStorage.setItem(storageKey, String(enabled));
+    } catch  {}
+};
+const parseEnabledOverride = (value)=>{
+    if (null === value) return;
+    const normalized = value.toLowerCase();
+    if ('1' === normalized || 'true' === normalized) return true;
+    if ('0' === normalized || 'false' === normalized) return false;
+};
+const readQueryEnabledOverride = ()=>{
+    if ("u" < typeof window) return;
+    try {
+        return parseEnabledOverride(new URLSearchParams(window.location.search).get(queryParamName));
+    } catch  {
+        return;
+    }
+};
+const detectLanguage = ()=>{
+    if ("u" < typeof document) return 'en';
+    const htmlLanguage = document.documentElement.lang;
+    if ('' !== htmlLanguage) return htmlLanguage.split('-')[0] || 'en';
+    if ("u" < typeof window) return 'en';
+    return window.location.pathname.split('/').filter(Boolean)[0] || 'en';
+};
+const hashBoundaryId = (id)=>{
+    let hash = 0;
+    for(let index = 0; index < id.length; index++)hash = 31 * hash + id.charCodeAt(index) >>> 0;
+    return hash;
+};
+const formatRectKey = (rect)=>[
+        Math.round(100 * rect.left) / 100,
+        Math.round(100 * rect.top) / 100,
+        Math.round(100 * rect.width) / 100,
+        Math.round(100 * rect.height) / 100
+    ].join(':');
+const getBoundaryId = (element)=>element.dataset.modernBoundaryId ?? element.dataset.mfRemote ?? element.getAttribute('data-mf-remote') ?? void 0;
+const collectBoundaryElements = (legacySelector)=>{
+    const elements = new Set();
+    for (const element of document.querySelectorAll(boundarySelector))elements.add(element);
+    if (void 0 === legacySelector || '' === legacySelector) return Array.from(elements);
+    try {
+        for (const element of document.querySelectorAll(legacySelector))elements.add(element);
+    } catch  {}
+    return Array.from(elements);
+};
+function BoundaryDebugger({ controlMode = 'visible', enabledByDefault = false, labels = defaultLabels, legacySelector, metadata, storageKey = defaultStorageKey }) {
+    const [mounted, setMounted] = useState(false);
+    const [enabled, setEnabled] = useState(false);
+    const [boxes, setBoxes] = useState([]);
+    const boundaries = useMemo(()=>new Map(metadata.boundaries.map((entry, index)=>[
+                entry.mfName,
+                {
+                    ...entry,
+                    color: entry.color ?? palette[index % palette.length],
+                    label: entry.label ?? entry.appId
+                }
+            ])), [
+        metadata
+    ]);
+    const language = mounted ? detectLanguage() : 'en';
+    const toggleLabel = labels[language]?.toggle ?? labels.en?.toggle ?? defaultLabels.en?.toggle ?? 'show team boundaries';
+    useEffect(()=>{
+        setMounted(true);
+        const queryOverride = readQueryEnabledOverride();
+        setEnabled(queryOverride ?? readStoredEnabled(storageKey, enabledByDefault));
+    }, [
+        enabledByDefault,
+        storageKey
+    ]);
+    useEffect(()=>{
+        if (!mounted) return;
+        writeStoredEnabled(storageKey, enabled);
+    }, [
+        enabled,
+        mounted,
+        storageKey
+    ]);
+    useEffect(()=>{
+        if (!enabled) return void setBoxes([]);
+        let resizeObserver;
+        const observedElements = new Set();
+        const observeBoundaryElements = (elements)=>{
+            if (void 0 === resizeObserver) return;
+            for (const element of elements)if (!observedElements.has(element)) {
+                observedElements.add(element);
+                resizeObserver.observe(element);
+            }
+        };
+        const readBoxes = ()=>{
+            const elements = collectBoundaryElements(legacySelector);
+            observeBoundaryElements(elements);
+            const seenBoxes = new Set();
+            const nextBoxes = elements.map((element)=>{
+                const boundaryId = getBoundaryId(element);
+                if (void 0 === boundaryId || '' === boundaryId) return;
+                const rect = element.getBoundingClientRect();
+                if (rect.width <= 0 || rect.height <= 0) return;
+                const rectKey = formatRectKey(rect);
+                const boxKey = `${boundaryId}:${rectKey}`;
+                if (seenBoxes.has(boxKey)) return;
+                seenBoxes.add(boxKey);
+                const boundary = boundaries.get(boundaryId);
+                const color = boundary?.color ?? palette[hashBoundaryId(boundaryId) % palette.length];
+                const label = boundary?.label ?? boundary?.appId ?? boundaryId;
+                const expose = element.dataset.modernMfExpose;
+                const detail = void 0 !== expose && '' !== expose && expose !== label && expose !== boundaryId ? expose : void 0;
+                const box = {
+                    color,
+                    height: rect.height,
+                    id: boxKey,
+                    label,
+                    left: rect.left,
+                    top: rect.top,
+                    width: rect.width
+                };
+                if (void 0 !== detail) box.detail = detail;
+                return box;
+            }).filter((box)=>void 0 !== box);
+            setBoxes(nextBoxes);
+        };
+        resizeObserver = "u" < typeof ResizeObserver ? void 0 : new ResizeObserver(readBoxes);
+        readBoxes();
+        const mutationObserver = new MutationObserver(readBoxes);
+        mutationObserver.observe(document.body, {
+            childList: true,
+            subtree: true
+        });
+        window.addEventListener('resize', readBoxes);
+        window.addEventListener('scroll', readBoxes, true);
+        return ()=>{
+            mutationObserver.disconnect();
+            resizeObserver?.disconnect();
+            window.removeEventListener('resize', readBoxes);
+            window.removeEventListener('scroll', readBoxes, true);
+        };
+    }, [
+        boundaries,
+        enabled,
+        legacySelector
+    ]);
+    if (!mounted) return null;
+    const shouldRenderToggle = 'visible' === controlMode || 'hidden-when-off' === controlMode && enabled;
+    return /*#__PURE__*/ jsxs(Fragment, {
+        children: [
+            shouldRenderToggle ? /*#__PURE__*/ jsxs("label", {
+                style: {
+                    alignItems: 'center',
+                    background: 'rgba(255, 255, 255, 0.96)',
+                    border: '1px solid rgba(0, 0, 0, 0.1)',
+                    borderRadius: 10,
+                    boxShadow: '0 10px 28px rgba(0, 0, 0, 0.14)',
+                    color: '#111827',
+                    display: 'flex',
+                    font: '600 13px/1.2 system-ui, sans-serif',
+                    gap: 8,
+                    left: 'max(12px, env(safe-area-inset-left))',
+                    maxWidth: 'calc(100vw - 24px)',
+                    padding: '9px 11px',
+                    position: 'fixed',
+                    top: 'max(12px, env(safe-area-inset-top))',
+                    zIndex: 2147483000
+                },
+                children: [
+                    /*#__PURE__*/ jsx("input", {
+                        checked: enabled,
+                        onChange: (event)=>setEnabled(event.currentTarget.checked),
+                        type: "checkbox"
+                    }),
+                    /*#__PURE__*/ jsx("span", {
+                        children: toggleLabel
+                    })
+                ]
+            }) : null,
+            enabled ? /*#__PURE__*/ jsx("div", {
+                "aria-hidden": "true",
+                children: boxes.map((box)=>/*#__PURE__*/ jsx("div", {
+                        "data-modern-boundary-overlay": "",
+                        "data-modern-boundary-overlay-id": box.id,
+                        "data-modern-boundary-overlay-label": box.label,
+                        style: {
+                            border: `2px solid ${box.color}`,
+                            borderRadius: 8,
+                            boxSizing: 'border-box',
+                            boxShadow: `0 0 0 1px rgba(255,255,255,.72), 0 6px 20px color-mix(in srgb, ${box.color} 20%, transparent)`,
+                            height: box.height,
+                            left: box.left,
+                            pointerEvents: 'none',
+                            position: 'fixed',
+                            top: box.top,
+                            width: box.width,
+                            zIndex: 2147482999
+                        },
+                        children: /*#__PURE__*/ jsxs("span", {
+                            style: {
+                                background: box.color,
+                                borderRadius: 999,
+                                color: '#111827',
+                                display: 'grid',
+                                font: '800 11px/1.1 system-ui, sans-serif',
+                                gap: 3,
+                                maxWidth: 'min(280px, calc(100vw - 24px))',
+                                padding: '5px 8px',
+                                position: 'absolute',
+                                right: 4,
+                                top: 4,
+                                whiteSpace: 'nowrap'
+                            },
+                            children: [
+                                /*#__PURE__*/ jsx("span", {
+                                    children: box.label
+                                }),
+                                void 0 !== box.detail && '' !== box.detail ? /*#__PURE__*/ jsx("span", {
+                                    style: {
+                                        font: '700 10px/1.1 system-ui, sans-serif',
+                                        opacity: 0.82,
+                                        overflow: 'hidden',
+                                        textOverflow: 'ellipsis'
+                                    },
+                                    children: box.detail
+                                }) : null
+                            ]
+                        })
+                    }, box.id))
+            }) : null
+        ]
+    });
+}
+const ultramodernBoundaryDebuggerPlugin = (options)=>({
+        name: '@modern-js/runtime/boundary-debugger',
+        setup: (api)=>{
+            api.wrapRoot((App)=>(props)=>/*#__PURE__*/ jsxs(Fragment, {
+                        children: [
+                            /*#__PURE__*/ jsx(App, {
+                                ...props
+                            }),
+                            /*#__PURE__*/ jsx(BoundaryDebugger, {
+                                ...options
+                            })
+                        ]
+                    }));
+        }
+    });
+const boundary_debugger = ultramodernBoundaryDebuggerPlugin;
+export default boundary_debugger;
+export { ultramodernBoundaryDebuggerPlugin };

package/dist/types/boundary-debugger/index.d.ts

@@ -0,0 +1,28 @@
+import type { RuntimePlugin } from '@modern-js/plugin';
+export type BoundaryDebugEntry = {
+    appId: string;
+    color?: string;
+    label?: string;
+    mfName: string;
+    ownerTeam?: string;
+    packageName?: string;
+    role?: 'host' | 'vertical';
+};
+export type BoundaryDebugMetadata = {
+    appId: string;
+    boundaries: BoundaryDebugEntry[];
+    schemaVersion: 1;
+};
+export type BoundaryDebuggerControlMode = 'visible' | 'hidden-when-off' | 'hidden';
+export type BoundaryDebuggerPluginOptions = {
+    controlMode?: BoundaryDebuggerControlMode;
+    enabledByDefault?: boolean;
+    labels?: Record<string, {
+        toggle: string;
+    }>;
+    legacySelector?: string;
+    metadata: BoundaryDebugMetadata;
+    storageKey?: string;
+};
+export declare const ultramodernBoundaryDebuggerPlugin: (options: BoundaryDebuggerPluginOptions) => RuntimePlugin<{}>;
+export default ultramodernBoundaryDebuggerPlugin;

package/package.json

@@ -1,16 +1,67 @@
 {
   "name": "@bleedingdev/modern-js-boundary-debugger",
-  "version": "0.0.0",
-  "description": "Package-name registration for the forthcoming UltraModern.js release. This setup version contains no runtime implementation.",
-  "license": "MIT",
+  "description": "Fork-owned browser boundary instrumentation registered through the native Modern.js runtime plugin API.",
+  "homepage": "https://github.com/BleedingDev/ultramodern.js#readme",
+  "bugs": {
+    "url": "https://github.com/BleedingDev/ultramodern.js/issues"
+  },
   "repository": {
     "type": "git",
-    "url": "git+https://github.com/BleedingDev/ultramodern.js.git"
+    "url": "git+https://github.com/BleedingDev/ultramodern.js.git",
+    "directory": "packages/runtime/boundary-debugger"
+  },
+  "license": "MIT",
+  "version": "3.9.0-ultramodern.5",
+  "engines": {
+    "node": ">=26.7.0"
+  },
+  "types": "./dist/types/boundary-debugger/index.d.ts",
+  "main": "./dist/cjs/boundary-debugger/index.js",
+  "exports": {
+    ".": {
+      "types": "./dist/types/boundary-debugger/index.d.ts",
+      "node": {
+        "import": "./dist/esm-node/boundary-debugger/index.mjs",
+        "require": "./dist/cjs/boundary-debugger/index.js"
+      },
+      "default": "./dist/esm/boundary-debugger/index.mjs"
+    }
   },
-  "files": [
-    "README.md"
-  ],
+  "typesVersions": {
+    "*": {
+      ".": [
+        "./dist/types/boundary-debugger/index.d.ts",
+        "./src/boundary-debugger/index.tsx"
+      ]
+    }
+  },
+  "dependencies": {
+    "@modern-js/plugin": "npm:@bleedingdev/modern-js-plugin@3.9.0-ultramodern.5"
+  },
+  "devDependencies": {
+    "@rslib/core": "1.0.0",
+    "@scripts/rstest-config": "2.66.0",
+    "@testing-library/dom": "^10.4.1",
+    "@testing-library/react": "^16.3.3",
+    "@types/node": "^26.4.1",
+    "@types/react": "^19.2.18",
+    "@types/react-dom": "^19.2.7",
+    "@typescript/native-preview": "7.0.0-dev.20260707.2",
+    "esbuild": "^0.28.2",
+    "react": "^19.2.8",
+    "react-dom": "^19.2.8",
+    "typescript": "^7.0.2"
+  },
+  "sideEffects": false,
   "publishConfig": {
     "access": "public"
+  },
+  "peerDependencies": {
+    "react": "^19.2.8"
+  },
+  "scripts": {
+    "dev": "rslib build --watch",
+    "build": "rslib build",
+    "test": "rstest"
   }
 }

package/rslib.config.mts

@@ -0,0 +1,4 @@
+import { rslibConfig } from '@modern-js/rslib';
+import { defineConfig } from '@rslib/core';
+
+export default defineConfig(rslibConfig);

package/rstest.config.mts

@@ -0,0 +1,36 @@
+import type { ProjectConfig } from '@rstest/core';
+import { withTestPreset } from '@scripts/rstest-config';
+
+const commonConfig: ProjectConfig = {
+  root: __dirname,
+  globals: true,
+  setupFiles: ['@scripts/rstest-config/setup.ts'],
+  tools: {
+    swc: {
+      jsc: {
+        transform: {
+          react: {
+            runtime: 'automatic',
+          },
+        },
+      },
+    },
+  },
+};
+
+export default {
+  projects: [
+    withTestPreset({
+      name: 'boundary-debugger-node',
+      testEnvironment: 'node',
+      exclude: ['tests/boundary-debugger/client.test.tsx'],
+      extends: commonConfig,
+    }),
+    withTestPreset({
+      name: 'boundary-debugger-client',
+      testEnvironment: 'happy-dom',
+      include: ['tests/boundary-debugger/client.test.tsx'],
+      extends: commonConfig,
+    }),
+  ],
+};