@solid-devtools/debugger - npm Package Compare versions

Comparing version 0.22.0 to 0.22.1

./dist/index.js

@@ -5,3 +5,3 @@ import { DEFAULT_WALKER_MODE, LOCATION_ATTRIBUTE_NAME, WINDOW_PROJECTPATH_PROPERTY, UNDEFINED, INFINITY, NEGATIVE_INFINITY, NAN } from './chunks/chunk-S74N7CWV.js';
 import { chain, tryOnCleanup, defer } from '@solid-primitives/utils';
-import { $PROXY, createRoot, getOwner, createMemo, createEffect, createSignal, createComputed, batch, onCleanup, Index, Show, runWithOwner } from 'solid-js';
+import { $PROXY, createRoot, getOwner, createMemo, createEffect, createSignal, createComputed, batch, onCleanup, runWithOwner, Show } from 'solid-js';
 import { throttle, scheduleIdle } from '@solid-primitives/scheduled';
@@ -12,5 +12,6 @@ import { trimString, warn, isRecord } from '@solid-devtools/shared/utils';
 import { createKeyHold } from '@solid-primitives/keyboard';
-import { createComponent, Portal, mergeProps, insert, effect, className, template } from 'solid-js/web';
+import { createComponent, memo, Portal, insert, effect, className, template } from 'solid-js/web';
 import { createElementBounds } from '@solid-primitives/bounds';
 import { createElementCursor } from '@solid-primitives/cursor';
+import { createRootPool } from '@solid-primitives/rootless';
 import { isWindows } from '@solid-primitives/platform';
@@ -631,3 +632,76 @@
 }
-var _tmpl$ = /* @__PURE__ */ template(`<style>
+var _tmpl$ = /* @__PURE__ */ template(`<div>`);
+var _tmpl$2 = /* @__PURE__ */ template(`<style>`);
+var _tmpl$3 = /* @__PURE__ */ template(`<div><div class="name-animated-container"><div class="name-background"></div><div class="name-text">: <span></span></div><div class="name-invisible">: `);
+var _tmpl$4 = /* @__PURE__ */ template(`<div class="element-overlay"><div class="border">`);
+function createElementsOverlay(selected) {
+  const useElementOverlay = createRootPool((component, active) => createComponent(ElementOverlay, {
+    get component() {
+      return memo(() => !!active())() ? component() : null;
+    }
+  }));
+  const owner = getOwner();
+  setTimeout(() => {
+    runWithOwner(owner, () => createComponent(Portal, {
+      useShadow: true,
+      get mount() {
+        return document.documentElement;
+      },
+      get children() {
+        const _el$ = _tmpl$();
+        insert(_el$, () => selected().map(useElementOverlay));
+        return _el$;
+      }
+    }));
+  }, 1e3);
+}
+var ElementOverlay = (props) => {
+  const element = () => props.component?.element;
+  createElementCursor(element, "pointer");
+  const tag = () => element()?.localName;
+  const name = () => props.component?.name;
+  const bounds = createElementBounds(element);
+  const left = createMemo((prev) => bounds.left === null ? prev : bounds.left, 0);
+  const top = createMemo((prev) => bounds.top === null ? prev : bounds.top, 0);
+  const width = createMemo((prev) => bounds.width === null ? prev : bounds.width, 0);
+  const height = createMemo((prev) => bounds.height === null ? prev : bounds.height, 0);
+  const transform = createMemo(() => `translate(${Math.round(left())}px, ${Math.round(top())}px)`);
+  const placeOnTop = createMemo(() => top() > window.innerHeight / 2);
+  return [(() => {
+    const _el$2 = _tmpl$2();
+    insert(_el$2, styles);
+    return _el$2;
+  })(), (() => {
+    const _el$3 = _tmpl$4(); _el$3.firstChild;
+    insert(_el$3, createComponent(Show, {
+      get when() {
+        return name();
+      },
+      get children() {
+        const _el$5 = _tmpl$3(), _el$6 = _el$5.firstChild, _el$7 = _el$6.firstChild, _el$8 = _el$7.nextSibling, _el$9 = _el$8.firstChild, _el$10 = _el$9.nextSibling, _el$11 = _el$8.nextSibling, _el$12 = _el$11.firstChild;
+        insert(_el$8, name, _el$9);
+        insert(_el$10, tag);
+        insert(_el$11, name, _el$12);
+        insert(_el$11, tag, null);
+        effect(() => className(_el$5, `name-container ${placeOnTop() ? "top" : "bottom"}`));
+        return _el$5;
+      }
+    }), null);
+    effect((_p$) => {
+      const _v$ = transform(), _v$2 = width() + "px", _v$3 = height() + "px";
+      _v$ !== _p$._v$ && ((_p$._v$ = _v$) != null ? _el$3.style.setProperty("transform", _v$) : _el$3.style.removeProperty("transform"));
+      _v$2 !== _p$._v$2 && ((_p$._v$2 = _v$2) != null ? _el$3.style.setProperty("width", _v$2) : _el$3.style.removeProperty("width"));
+      _v$3 !== _p$._v$3 && ((_p$._v$3 = _v$3) != null ? _el$3.style.setProperty("height", _v$3) : _el$3.style.removeProperty("height"));
+      return _p$;
+    }, {
+      _v$: void 0,
+      _v$2: void 0,
+      _v$3: void 0
+    });
+    return _el$3;
+  })()];
+};
+var styles = (
+  /*css*/
+  `
 .element-overlay {
@@ -693,67 +767,6 @@ position: fixed;
   visibility: hidden;
+  width: max-content;
 }
-`);
-var _tmpl$2 = /* @__PURE__ */ template(`<div class="element-overlay"><div class="border">`);
-var _tmpl$3 = /* @__PURE__ */ template(`<div><div class="name-animated-container"><div class="name-background"></div><div class="name-text">: <span></span></div><div class="name-invisible">: `);
-function attachElementOverlay(selected) {
-  return createComponent(Portal, {
-    useShadow: true,
-    get children() {
-      return createComponent(Index, {
-        get each() {
-          return selected();
-        },
-        children: (component) => {
-          createElementCursor(() => component().element, "pointer");
-          const bounds = createElementBounds(() => component().element);
-          return createComponent(ElementOverlay, mergeProps(bounds, {
-            get tag() {
-              return component().element.localName;
-            },
-            get name() {
-              return component().name;
-            }
-          }));
-        }
-      });
-    }
-  });
-}
-var ElementOverlay = (props) => {
-  const left = createMemo((prev) => props.left === null ? prev : props.left, 0);
-  const top = createMemo((prev) => props.top === null ? prev : props.top, 0);
-  const width = createMemo((prev) => props.width === null ? prev : props.width, 0);
-  const height = createMemo((prev) => props.height === null ? prev : props.height, 0);
-  const transform = createMemo(() => `translate(${Math.round(left())}px, ${Math.round(top())}px)`);
-  const placeOnTop = createMemo(() => top() > window.innerHeight / 2);
-  return [_tmpl$(), (() => {
-    const _el$2 = _tmpl$2(); _el$2.firstChild;
-    insert(_el$2, createComponent(Show, {
-      get when() {
-        return props.name;
-      },
-      children: (name) => (() => {
-        const _el$4 = _tmpl$3(), _el$5 = _el$4.firstChild, _el$6 = _el$5.firstChild, _el$7 = _el$6.nextSibling, _el$8 = _el$7.firstChild, _el$9 = _el$8.nextSibling, _el$10 = _el$7.nextSibling, _el$11 = _el$10.firstChild;
-        insert(_el$7, name, _el$8);
-        insert(_el$9, () => props.tag);
-        insert(_el$10, name, _el$11);
-        insert(_el$10, () => props.tag, null);
-        effect(() => className(_el$4, `name-container ${placeOnTop() ? "top" : "bottom"}`));
-        return _el$4;
-      })()
-    }), null);
-    effect((_p$) => {
-      const _v$ = transform(), _v$2 = width() + "px", _v$3 = height() + "px";
-      _v$ !== _p$._v$ && ((_p$._v$ = _v$) != null ? _el$2.style.setProperty("transform", _v$) : _el$2.style.removeProperty("transform"));
-      _v$2 !== _p$._v$2 && ((_p$._v$2 = _v$2) != null ? _el$2.style.setProperty("width", _v$2) : _el$2.style.removeProperty("width"));
-      _v$3 !== _p$._v$3 && ((_p$._v$3 = _v$3) != null ? _el$2.style.setProperty("height", _v$3) : _el$2.style.removeProperty("height"));
-      return _p$;
-    }, {
-      _v$: void 0,
-      _v$2: void 0,
-      _v$3: void 0
-    });
-    return _el$2;
-  })()];
-};
+`
+);
 var LOC_ATTR_REGEX_WIN = /^((?:\\?[^\s][^/\\:\"\?\*<>\|]+)+):([0-9]+):([0-9]+)$/;
@@ -845,5 +858,3 @@ var LOC_ATTR_REGEX_UNIX = /^((?:(?:\.\/|\.\.\/|\/)?(?:\.?\w+\/)*)(?:\.?\w+\.?\w+)):([0-9]+):([0-9]+)$/;
   );
-  setTimeout(() => {
-    createInternalRoot(() => attachElementOverlay(highlightedComponents));
-  }, 1e3);
+  createElementsOverlay(highlightedComponents);
   createEffect((prev) => {
@@ -850,0 +861,0 @@ const target = hoverTarget();

dist/index.js

@@ -5,3 +5,3 @@ import { DEFAULT_WALKER_MODE, LOCATION_ATTRIBUTE_NAME, WINDOW_PROJECTPATH_PROPERTY, UNDEFINED, INFINITY, NEGATIVE_INFINITY, NAN } from './chunks/chunk-S74N7CWV.js';
 import { chain, tryOnCleanup, defer } from '@solid-primitives/utils';
-import { $PROXY, createRoot, getOwner, createMemo, createEffect, createSignal, createComputed, batch, onCleanup, Index, Show, runWithOwner } from 'solid-js';
+import { $PROXY, createRoot, getOwner, createMemo, createEffect, createSignal, createComputed, batch, onCleanup, runWithOwner, Show } from 'solid-js';
 import { throttle, scheduleIdle } from '@solid-primitives/scheduled';
@@ -12,5 +12,6 @@ import { trimString, warn, isRecord } from '@solid-devtools/shared/utils';
 import { createKeyHold } from '@solid-primitives/keyboard';
-import { createComponent, Portal, mergeProps, insert, effect, className, template } from 'solid-js/web';
+import { createComponent, memo, Portal, insert, effect, className, template } from 'solid-js/web';
 import { createElementBounds } from '@solid-primitives/bounds';
 import { createElementCursor } from '@solid-primitives/cursor';
+import { createRootPool } from '@solid-primitives/rootless';
 import { isWindows } from '@solid-primitives/platform';
@@ -631,3 +632,76 @@
 }
-var _tmpl$ = /* @__PURE__ */ template(`<style>
+var _tmpl$ = /* @__PURE__ */ template(`<div>`);
+var _tmpl$2 = /* @__PURE__ */ template(`<style>`);
+var _tmpl$3 = /* @__PURE__ */ template(`<div><div class="name-animated-container"><div class="name-background"></div><div class="name-text">: <span></span></div><div class="name-invisible">: `);
+var _tmpl$4 = /* @__PURE__ */ template(`<div class="element-overlay"><div class="border">`);
+function createElementsOverlay(selected) {
+  const useElementOverlay = createRootPool((component, active) => createComponent(ElementOverlay, {
+    get component() {
+      return memo(() => !!active())() ? component() : null;
+    }
+  }));
+  const owner = getOwner();
+  setTimeout(() => {
+    runWithOwner(owner, () => createComponent(Portal, {
+      useShadow: true,
+      get mount() {
+        return document.documentElement;
+      },
+      get children() {
+        const _el$ = _tmpl$();
+        insert(_el$, () => selected().map(useElementOverlay));
+        return _el$;
+      }
+    }));
+  }, 1e3);
+}
+var ElementOverlay = (props) => {
+  const element = () => props.component?.element;
+  createElementCursor(element, "pointer");
+  const tag = () => element()?.localName;
+  const name = () => props.component?.name;
+  const bounds = createElementBounds(element);
+  const left = createMemo((prev) => bounds.left === null ? prev : bounds.left, 0);
+  const top = createMemo((prev) => bounds.top === null ? prev : bounds.top, 0);
+  const width = createMemo((prev) => bounds.width === null ? prev : bounds.width, 0);
+  const height = createMemo((prev) => bounds.height === null ? prev : bounds.height, 0);
+  const transform = createMemo(() => `translate(${Math.round(left())}px, ${Math.round(top())}px)`);
+  const placeOnTop = createMemo(() => top() > window.innerHeight / 2);
+  return [(() => {
+    const _el$2 = _tmpl$2();
+    insert(_el$2, styles);
+    return _el$2;
+  })(), (() => {
+    const _el$3 = _tmpl$4(); _el$3.firstChild;
+    insert(_el$3, createComponent(Show, {
+      get when() {
+        return name();
+      },
+      get children() {
+        const _el$5 = _tmpl$3(), _el$6 = _el$5.firstChild, _el$7 = _el$6.firstChild, _el$8 = _el$7.nextSibling, _el$9 = _el$8.firstChild, _el$10 = _el$9.nextSibling, _el$11 = _el$8.nextSibling, _el$12 = _el$11.firstChild;
+        insert(_el$8, name, _el$9);
+        insert(_el$10, tag);
+        insert(_el$11, name, _el$12);
+        insert(_el$11, tag, null);
+        effect(() => className(_el$5, `name-container ${placeOnTop() ? "top" : "bottom"}`));
+        return _el$5;
+      }
+    }), null);
+    effect((_p$) => {
+      const _v$ = transform(), _v$2 = width() + "px", _v$3 = height() + "px";
+      _v$ !== _p$._v$ && ((_p$._v$ = _v$) != null ? _el$3.style.setProperty("transform", _v$) : _el$3.style.removeProperty("transform"));
+      _v$2 !== _p$._v$2 && ((_p$._v$2 = _v$2) != null ? _el$3.style.setProperty("width", _v$2) : _el$3.style.removeProperty("width"));
+      _v$3 !== _p$._v$3 && ((_p$._v$3 = _v$3) != null ? _el$3.style.setProperty("height", _v$3) : _el$3.style.removeProperty("height"));
+      return _p$;
+    }, {
+      _v$: void 0,
+      _v$2: void 0,
+      _v$3: void 0
+    });
+    return _el$3;
+  })()];
+};
+var styles = (
+  /*css*/
+  `
 .element-overlay {
@@ -693,67 +767,6 @@ position: fixed;
   visibility: hidden;
+  width: max-content;
 }
-`);
-var _tmpl$2 = /* @__PURE__ */ template(`<div class="element-overlay"><div class="border">`);
-var _tmpl$3 = /* @__PURE__ */ template(`<div><div class="name-animated-container"><div class="name-background"></div><div class="name-text">: <span></span></div><div class="name-invisible">: `);
-function attachElementOverlay(selected) {
-  return createComponent(Portal, {
-    useShadow: true,
-    get children() {
-      return createComponent(Index, {
-        get each() {
-          return selected();
-        },
-        children: (component) => {
-          createElementCursor(() => component().element, "pointer");
-          const bounds = createElementBounds(() => component().element);
-          return createComponent(ElementOverlay, mergeProps(bounds, {
-            get tag() {
-              return component().element.localName;
-            },
-            get name() {
-              return component().name;
-            }
-          }));
-        }
-      });
-    }
-  });
-}
-var ElementOverlay = (props) => {
-  const left = createMemo((prev) => props.left === null ? prev : props.left, 0);
-  const top = createMemo((prev) => props.top === null ? prev : props.top, 0);
-  const width = createMemo((prev) => props.width === null ? prev : props.width, 0);
-  const height = createMemo((prev) => props.height === null ? prev : props.height, 0);
-  const transform = createMemo(() => `translate(${Math.round(left())}px, ${Math.round(top())}px)`);
-  const placeOnTop = createMemo(() => top() > window.innerHeight / 2);
-  return [_tmpl$(), (() => {
-    const _el$2 = _tmpl$2(); _el$2.firstChild;
-    insert(_el$2, createComponent(Show, {
-      get when() {
-        return props.name;
-      },
-      children: (name) => (() => {
-        const _el$4 = _tmpl$3(), _el$5 = _el$4.firstChild, _el$6 = _el$5.firstChild, _el$7 = _el$6.nextSibling, _el$8 = _el$7.firstChild, _el$9 = _el$8.nextSibling, _el$10 = _el$7.nextSibling, _el$11 = _el$10.firstChild;
-        insert(_el$7, name, _el$8);
-        insert(_el$9, () => props.tag);
-        insert(_el$10, name, _el$11);
-        insert(_el$10, () => props.tag, null);
-        effect(() => className(_el$4, `name-container ${placeOnTop() ? "top" : "bottom"}`));
-        return _el$4;
-      })()
-    }), null);
-    effect((_p$) => {
-      const _v$ = transform(), _v$2 = width() + "px", _v$3 = height() + "px";
-      _v$ !== _p$._v$ && ((_p$._v$ = _v$) != null ? _el$2.style.setProperty("transform", _v$) : _el$2.style.removeProperty("transform"));
-      _v$2 !== _p$._v$2 && ((_p$._v$2 = _v$2) != null ? _el$2.style.setProperty("width", _v$2) : _el$2.style.removeProperty("width"));
-      _v$3 !== _p$._v$3 && ((_p$._v$3 = _v$3) != null ? _el$2.style.setProperty("height", _v$3) : _el$2.style.removeProperty("height"));
-      return _p$;
-    }, {
-      _v$: void 0,
-      _v$2: void 0,
-      _v$3: void 0
-    });
-    return _el$2;
-  })()];
-};
+`
+);
 var LOC_ATTR_REGEX_WIN = /^((?:\\?[^\s][^/\\:\"\?\*<>\|]+)+):([0-9]+):([0-9]+)$/;
@@ -845,5 +858,3 @@ var LOC_ATTR_REGEX_UNIX = /^((?:(?:\.\/|\.\.\/|\/)?(?:\.?\w+\/)*)(?:\.?\w+\.?\w+)):([0-9]+):([0-9]+)$/;
   );
-  setTimeout(() => {
-    createInternalRoot(() => attachElementOverlay(highlightedComponents));
-  }, 1e3);
+  createElementsOverlay(highlightedComponents);
   createEffect((prev) => {
@@ -850,0 +861,0 @@ const target = hoverTarget();

package.json

 {
   "name": "@solid-devtools/debugger",
-  "version": "0.22.0",
+  "version": "0.22.1",
   "description": "Debugger of the Solid's reactivity graph — a cornerstone of all solid-devtools.",
@@ -80,7 +80,8 @@ "license": "MIT",
     "@solid-primitives/platform": "^0.0.105",
+    "@solid-primitives/rootless": "^1.4.1",
     "@solid-primitives/scheduled": "^1.3.2",
     "@solid-primitives/static-store": "^0.0.2",
     "@solid-primitives/utils": "^6.2.0",
-    "solid-js": "^1.7.5",
-    "type-fest": "^3.11.0",
+    "solid-js": "^1.7.6",
+    "type-fest": "^3.11.1",
     "@solid-devtools/shared": "^0.12.0"
@@ -91,3 +92,3 @@ },
   },
-  "packageManager": "pnpm@8.2.0",
+  "packageManager": "pnpm@8.6.0",
   "scripts": {
@@ -94,0 +95,0 @@ "dev": "tsup --watch",

New alerts

Long strings

Supply chain risk

Contains long string literals, which may be a sign of obfuscated or packed code.

Fixed alerts

Long strings

Supply chain risk

Contains long string literals, which may be a sign of obfuscated or packed code.

Worsened metrics

Total package byte prevSize

256930

-0.53%

Dependency count

14

7.69%

Lines of code

7633

-0.64%

Dependency changes

• + Added

  @solid-primitives/rootless@^1.4.1

• Updated

  solid-js@^1.7.6

• Updated

  type-fest@^3.11.1