@tanstack/devtools 0.5.0 → 0.6.0

package/dist/esm/tabs/seo-tab.js

@@ -0,0 +1,291 @@
+import { template, insert, createComponent, memo, effect, className, setAttribute } from "solid-js/web";
+import { createSignal, For } from "solid-js";
+import { useStyles } from "../styles/use-styles.js";
+import { useHeadChanges } from "../hooks/use-head-changes.js";
+var _tmpl$ = /* @__PURE__ */ template(`<div><div> Preview</div><div></div><div></div><div>`), _tmpl$2 = /* @__PURE__ */ template(`<img alt=Preview>`), _tmpl$3 = /* @__PURE__ */ template(`<div>No Image`), _tmpl$4 = /* @__PURE__ */ template(`<div><section><h3><svg xmlns=http://www.w3.org/2000/svg width=24 height=24 viewBox="0 0 24 24"fill=none stroke=currentColor stroke-width=2 stroke-linecap=round stroke-linejoin=round><path d="m10 9-3 3 3 3"></path><path d="m14 15 3-3-3-3"></path><path d="M2.992 16.342a2 2 0 0 1 .094 1.167l-1.065 3.29a1 1 0 0 0 1.236 1.168l3.413-.998a2 2 0 0 1 1.099.092 10 10 0 1 0-4.777-4.719"></path></svg>Social previews</h3><p>See how your current page will look when shared on popular social networks. The tool checks for essential meta tags and highlights any that are missing.</p><div>`), _tmpl$5 = /* @__PURE__ */ template(`<div>`), _tmpl$6 = /* @__PURE__ */ template(`<div><strong>Missing tags for <!>:</strong><ul>`), _tmpl$7 = /* @__PURE__ */ template(`<li>`);
+const SOCIALS = [
+  {
+    network: "Facebook",
+    tags: [{
+      key: "og:title",
+      prop: "title"
+    }, {
+      key: "og:description",
+      prop: "description"
+    }, {
+      key: "og:image",
+      prop: "image"
+    }, {
+      key: "og:url",
+      prop: "url"
+    }],
+    color: "#4267B2"
+  },
+  {
+    network: "X/Twitter",
+    tags: [{
+      key: "twitter:title",
+      prop: "title"
+    }, {
+      key: "twitter:description",
+      prop: "description"
+    }, {
+      key: "twitter:image",
+      prop: "image"
+    }, {
+      key: "twitter:url",
+      prop: "url"
+    }],
+    color: "#1DA1F2"
+  },
+  {
+    network: "LinkedIn",
+    tags: [{
+      key: "og:title",
+      prop: "title"
+    }, {
+      key: "og:description",
+      prop: "description"
+    }, {
+      key: "og:image",
+      prop: "image"
+    }, {
+      key: "og:url",
+      prop: "url"
+    }],
+    color: "#0077B5"
+  },
+  {
+    network: "Discord",
+    tags: [{
+      key: "og:title",
+      prop: "title"
+    }, {
+      key: "og:description",
+      prop: "description"
+    }, {
+      key: "og:image",
+      prop: "image"
+    }, {
+      key: "og:url",
+      prop: "url"
+    }],
+    color: "#5865F2"
+  },
+  {
+    network: "Slack",
+    tags: [{
+      key: "og:title",
+      prop: "title"
+    }, {
+      key: "og:description",
+      prop: "description"
+    }, {
+      key: "og:image",
+      prop: "image"
+    }, {
+      key: "og:url",
+      prop: "url"
+    }],
+    color: "#4A154B"
+  },
+  {
+    network: "Mastodon",
+    tags: [{
+      key: "og:title",
+      prop: "title"
+    }, {
+      key: "og:description",
+      prop: "description"
+    }, {
+      key: "og:image",
+      prop: "image"
+    }, {
+      key: "og:url",
+      prop: "url"
+    }],
+    color: "#6364FF"
+  },
+  {
+    network: "Bluesky",
+    tags: [{
+      key: "og:title",
+      prop: "title"
+    }, {
+      key: "og:description",
+      prop: "description"
+    }, {
+      key: "og:image",
+      prop: "image"
+    }, {
+      key: "og:url",
+      prop: "url"
+    }],
+    color: "#1185FE"
+  }
+  // Add more networks as needed
+];
+function SocialPreview(props) {
+  const styles = useStyles();
+  return (() => {
+    var _el$ = _tmpl$(), _el$2 = _el$.firstChild, _el$3 = _el$2.firstChild, _el$4 = _el$2.nextSibling, _el$5 = _el$4.nextSibling, _el$6 = _el$5.nextSibling;
+    insert(_el$2, () => props.network, _el$3);
+    insert(_el$, (() => {
+      var _c$ = memo(() => !!props.meta.image);
+      return () => _c$() ? (() => {
+        var _el$7 = _tmpl$2();
+        effect((_p$) => {
+          var _v$8 = props.meta.image, _v$9 = styles().seoPreviewImage;
+          _v$8 !== _p$.e && setAttribute(_el$7, "src", _p$.e = _v$8);
+          _v$9 !== _p$.t && className(_el$7, _p$.t = _v$9);
+          return _p$;
+        }, {
+          e: void 0,
+          t: void 0
+        });
+        return _el$7;
+      })() : (() => {
+        var _el$8 = _tmpl$3();
+        _el$8.style.setProperty("background", "#222");
+        _el$8.style.setProperty("color", "#888");
+        _el$8.style.setProperty("display", "flex");
+        _el$8.style.setProperty("align-items", "center");
+        _el$8.style.setProperty("justify-content", "center");
+        _el$8.style.setProperty("min-height", "80px");
+        _el$8.style.setProperty("width", "100%");
+        effect(() => className(_el$8, styles().seoPreviewImage));
+        return _el$8;
+      })();
+    })(), _el$4);
+    insert(_el$4, () => props.meta.title || "No Title");
+    insert(_el$5, () => props.meta.description || "No Description");
+    insert(_el$6, () => props.meta.url || window.location.href);
+    effect((_p$) => {
+      var _v$ = styles().seoPreviewCard, _v$2 = props.color, _v$3 = styles().seoPreviewHeader, _v$4 = props.color, _v$5 = styles().seoPreviewTitle, _v$6 = styles().seoPreviewDesc, _v$7 = styles().seoPreviewUrl;
+      _v$ !== _p$.e && className(_el$, _p$.e = _v$);
+      _v$2 !== _p$.t && ((_p$.t = _v$2) != null ? _el$.style.setProperty("border-color", _v$2) : _el$.style.removeProperty("border-color"));
+      _v$3 !== _p$.a && className(_el$2, _p$.a = _v$3);
+      _v$4 !== _p$.o && ((_p$.o = _v$4) != null ? _el$2.style.setProperty("color", _v$4) : _el$2.style.removeProperty("color"));
+      _v$5 !== _p$.i && className(_el$4, _p$.i = _v$5);
+      _v$6 !== _p$.n && className(_el$5, _p$.n = _v$6);
+      _v$7 !== _p$.s && className(_el$6, _p$.s = _v$7);
+      return _p$;
+    }, {
+      e: void 0,
+      t: void 0,
+      a: void 0,
+      o: void 0,
+      i: void 0,
+      n: void 0,
+      s: void 0
+    });
+    return _el$;
+  })();
+}
+const SeoTab = () => {
+  const [reports, setReports] = createSignal(analyzeHead());
+  const styles = useStyles();
+  function analyzeHead() {
+    const metaTags = Array.from(document.head.querySelectorAll("meta"));
+    const reports2 = [];
+    for (const social of SOCIALS) {
+      const found = {};
+      const missing = [];
+      for (const tag of social.tags) {
+        const meta = metaTags.find((m) => (tag.key.includes("twitter:") ? false : m.getAttribute("property") === tag.key) || m.getAttribute("name") === tag.key);
+        if (meta && meta.getAttribute("content")) {
+          found[tag.prop] = meta.getAttribute("content") || void 0;
+        } else {
+          missing.push(tag.key);
+        }
+      }
+      reports2.push({
+        network: social.network,
+        found,
+        missing
+      });
+    }
+    return reports2;
+  }
+  useHeadChanges(() => {
+    setReports(analyzeHead());
+  });
+  return (() => {
+    var _el$9 = _tmpl$4(), _el$0 = _el$9.firstChild, _el$1 = _el$0.firstChild, _el$10 = _el$1.firstChild, _el$11 = _el$1.nextSibling, _el$12 = _el$11.nextSibling;
+    insert(_el$12, createComponent(For, {
+      get each() {
+        return reports();
+      },
+      children: (report, i) => {
+        const social = SOCIALS[i()];
+        return (() => {
+          var _el$13 = _tmpl$5();
+          insert(_el$13, createComponent(SocialPreview, {
+            get meta() {
+              return report.found;
+            },
+            get color() {
+              return social.color;
+            },
+            get network() {
+              return social.network;
+            }
+          }), null);
+          insert(_el$13, (() => {
+            var _c$2 = memo(() => report.missing.length > 0);
+            return () => _c$2() ? (() => {
+              var _el$14 = _tmpl$6(), _el$15 = _el$14.firstChild, _el$16 = _el$15.firstChild, _el$18 = _el$16.nextSibling;
+              _el$18.nextSibling;
+              var _el$19 = _el$15.nextSibling;
+              insert(_el$15, () => social?.network, _el$18);
+              insert(_el$19, createComponent(For, {
+                get each() {
+                  return report.missing;
+                },
+                children: (tag) => (() => {
+                  var _el$20 = _tmpl$7();
+                  insert(_el$20, tag);
+                  effect(() => className(_el$20, styles().seoMissingTag));
+                  return _el$20;
+                })()
+              }));
+              effect((_p$) => {
+                var _v$14 = styles().seoMissingTagsSection, _v$15 = styles().seoMissingTagsList;
+                _v$14 !== _p$.e && className(_el$14, _p$.e = _v$14);
+                _v$15 !== _p$.t && className(_el$19, _p$.t = _v$15);
+                return _p$;
+              }, {
+                e: void 0,
+                t: void 0
+              });
+              return _el$14;
+            })() : null;
+          })(), null);
+          return _el$13;
+        })();
+      }
+    }));
+    effect((_p$) => {
+      var _v$0 = styles().seoTabContainer, _v$1 = styles().seoTabSection, _v$10 = styles().sectionTitle, _v$11 = styles().sectionIcon, _v$12 = styles().sectionDescription, _v$13 = styles().seoPreviewSection;
+      _v$0 !== _p$.e && className(_el$9, _p$.e = _v$0);
+      _v$1 !== _p$.t && className(_el$0, _p$.t = _v$1);
+      _v$10 !== _p$.a && className(_el$1, _p$.a = _v$10);
+      _v$11 !== _p$.o && setAttribute(_el$10, "class", _p$.o = _v$11);
+      _v$12 !== _p$.i && className(_el$11, _p$.i = _v$12);
+      _v$13 !== _p$.n && className(_el$12, _p$.n = _v$13);
+      return _p$;
+    }, {
+      e: void 0,
+      t: void 0,
+      a: void 0,
+      o: void 0,
+      i: void 0,
+      n: void 0
+    });
+    return _el$9;
+  })();
+};
+export {
+  SeoTab
+};
+//# sourceMappingURL=seo-tab.js.map

package/dist/esm/tabs/seo-tab.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"seo-tab.js","sources":["../../../src/tabs/seo-tab.tsx"],"sourcesContent":["import { For, createSignal } from 'solid-js'\nimport { useStyles } from '../styles/use-styles'\nimport { useHeadChanges } from '../hooks/use-head-changes'\n\ntype SocialMeta = {\n  title?: string\n  description?: string\n  image?: string\n  url?: string\n}\n\ntype SocialReport = {\n  network: string\n  found: Partial<SocialMeta>\n  missing: Array<string>\n}\n\nconst SOCIALS = [\n  {\n    network: 'Facebook',\n    tags: [\n      { key: 'og:title', prop: 'title' },\n      { key: 'og:description', prop: 'description' },\n      { key: 'og:image', prop: 'image' },\n      { key: 'og:url', prop: 'url' },\n    ],\n    color: '#4267B2',\n  },\n  {\n    network: 'X/Twitter',\n    tags: [\n      { key: 'twitter:title', prop: 'title' },\n      { key: 'twitter:description', prop: 'description' },\n      { key: 'twitter:image', prop: 'image' },\n      { key: 'twitter:url', prop: 'url' },\n    ],\n    color: '#1DA1F2',\n  },\n  {\n    network: 'LinkedIn',\n    tags: [\n      { key: 'og:title', prop: 'title' },\n      { key: 'og:description', prop: 'description' },\n      { key: 'og:image', prop: 'image' },\n      { key: 'og:url', prop: 'url' },\n    ],\n    color: '#0077B5',\n  },\n  {\n    network: 'Discord',\n    tags: [\n      { key: 'og:title', prop: 'title' },\n      { key: 'og:description', prop: 'description' },\n      { key: 'og:image', prop: 'image' },\n      { key: 'og:url', prop: 'url' },\n    ],\n    color: '#5865F2',\n  },\n  {\n    network: 'Slack',\n    tags: [\n      { key: 'og:title', prop: 'title' },\n      { key: 'og:description', prop: 'description' },\n      { key: 'og:image', prop: 'image' },\n      { key: 'og:url', prop: 'url' },\n    ],\n    color: '#4A154B',\n  },\n  {\n    network: 'Mastodon',\n    tags: [\n      { key: 'og:title', prop: 'title' },\n      { key: 'og:description', prop: 'description' },\n      { key: 'og:image', prop: 'image' },\n      { key: 'og:url', prop: 'url' },\n    ],\n    color: '#6364FF',\n  },\n  {\n    network: 'Bluesky',\n    tags: [\n      { key: 'og:title', prop: 'title' },\n      { key: 'og:description', prop: 'description' },\n      { key: 'og:image', prop: 'image' },\n      { key: 'og:url', prop: 'url' },\n    ],\n    color: '#1185FE',\n  },\n  // Add more networks as needed\n]\nfunction SocialPreview(props: {\n  meta: SocialMeta\n  color: string\n  network: string\n}) {\n  const styles = useStyles()\n\n  return (\n    <div\n      class={styles().seoPreviewCard}\n      style={{ 'border-color': props.color }}\n    >\n      <div class={styles().seoPreviewHeader} style={{ color: props.color }}>\n        {props.network} Preview\n      </div>\n      {props.meta.image ? (\n        <img\n          src={props.meta.image}\n          alt=\"Preview\"\n          class={styles().seoPreviewImage}\n        />\n      ) : (\n        <div\n          class={styles().seoPreviewImage}\n          style={{\n            background: '#222',\n            color: '#888',\n            display: 'flex',\n            'align-items': 'center',\n            'justify-content': 'center',\n            'min-height': '80px',\n            width: '100%',\n          }}\n        >\n          No Image\n        </div>\n      )}\n      <div class={styles().seoPreviewTitle}>\n        {props.meta.title || 'No Title'}\n      </div>\n      <div class={styles().seoPreviewDesc}>\n        {props.meta.description || 'No Description'}\n      </div>\n      <div class={styles().seoPreviewUrl}>\n        {props.meta.url || window.location.href}\n      </div>\n    </div>\n  )\n}\nexport const SeoTab = () => {\n  const [reports, setReports] = createSignal<Array<SocialReport>>(analyzeHead())\n  const styles = useStyles()\n\n  function analyzeHead(): Array<SocialReport> {\n    const metaTags = Array.from(document.head.querySelectorAll('meta'))\n    const reports: Array<SocialReport> = []\n\n    for (const social of SOCIALS) {\n      const found: Partial<SocialMeta> = {}\n      const missing: Array<string> = []\n      for (const tag of social.tags) {\n        const meta = metaTags.find(\n          (m) =>\n            (tag.key.includes('twitter:')\n              ? false\n              : m.getAttribute('property') === tag.key) ||\n            m.getAttribute('name') === tag.key,\n        )\n\n        if (meta && meta.getAttribute('content')) {\n          found[tag.prop as keyof SocialMeta] =\n            meta.getAttribute('content') || undefined\n        } else {\n          missing.push(tag.key)\n        }\n      }\n      reports.push({ network: social.network, found, missing })\n    }\n    return reports\n  }\n\n  useHeadChanges(() => {\n    setReports(analyzeHead())\n  })\n\n  return (\n    <div class={styles().seoTabContainer}>\n      <section class={styles().seoTabSection}>\n        <h3 class={styles().sectionTitle}>\n          <svg\n            class={styles().sectionIcon}\n            xmlns=\"http://www.w3.org/2000/svg\"\n            width=\"24\"\n            height=\"24\"\n            viewBox=\"0 0 24 24\"\n            fill=\"none\"\n            stroke=\"currentColor\"\n            stroke-width=\"2\"\n            stroke-linecap=\"round\"\n            stroke-linejoin=\"round\"\n          >\n            <path d=\"m10 9-3 3 3 3\" />\n            <path d=\"m14 15 3-3-3-3\" />\n            <path d=\"M2.992 16.342a2 2 0 0 1 .094 1.167l-1.065 3.29a1 1 0 0 0 1.236 1.168l3.413-.998a2 2 0 0 1 1.099.092 10 10 0 1 0-4.777-4.719\" />\n          </svg>\n          Social previews\n        </h3>\n        <p class={styles().sectionDescription}>\n          See how your current page will look when shared on popular social\n          networks. The tool checks for essential meta tags and highlights any\n          that are missing.\n        </p>\n        <div class={styles().seoPreviewSection}>\n          <For each={reports()}>\n            {(report, i) => {\n              const social = SOCIALS[i()]\n              return (\n                <div>\n                  <SocialPreview\n                    meta={report.found}\n                    color={social!.color}\n                    network={social!.network}\n                  />\n                  {report.missing.length > 0 ? (\n                    <>\n                      <div class={styles().seoMissingTagsSection}>\n                        <strong>Missing tags for {social?.network}:</strong>\n\n                        <ul class={styles().seoMissingTagsList}>\n                          <For each={report.missing}>\n                            {(tag) => (\n                              <li class={styles().seoMissingTag}>{tag}</li>\n                            )}\n                          </For>\n                        </ul>\n                      </div>\n                    </>\n                  ) : null}\n                </div>\n              )\n            }}\n          </For>\n        </div>\n      </section>\n      {/* Future sections can be added here as <section class={styles().seoTabSection}>...</section> */}\n    </div>\n  )\n}\n"],"names":["SOCIALS","network","tags","key","prop","color","SocialPreview","props","styles","useStyles","_el$","_tmpl$","_el$2","firstChild","_el$3","_el$4","nextSibling","_el$5","_el$6","_$insert","_c$","_$memo","meta","image","_el$7","_tmpl$2","_$effect","_p$","_v$8","_v$9","seoPreviewImage","e","_$setAttribute","t","_$className","undefined","_el$8","_tmpl$3","style","setProperty","title","description","url","window","location","href","_v$","seoPreviewCard","_v$2","_v$3","seoPreviewHeader","_v$4","_v$5","seoPreviewTitle","_v$6","seoPreviewDesc","_v$7","seoPreviewUrl","removeProperty","a","o","i","n","s","SeoTab","reports","setReports","createSignal","analyzeHead","metaTags","Array","from","document","head","querySelectorAll","social","found","missing","tag","find","m","includes","getAttribute","push","useHeadChanges","_el$9","_tmpl$4","_el$0","_el$1","_el$10","_el$11","_el$12","_$createComponent","For","each","children","report","_el$13","_tmpl$5","_c$2","length","_el$14","_tmpl$6","_el$15","_el$16","_el$18","_el$19","_el$20","_tmpl$7","seoMissingTag","_v$14","seoMissingTagsSection","_v$15","seoMissingTagsList","_v$0","seoTabContainer","_v$1","seoTabSection","_v$10","sectionTitle","_v$11","sectionIcon","_v$12","sectionDescription","_v$13","seoPreviewSection"],"mappings":"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"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tanstack/devtools",
-  "version": "0.5.0",
+  "version": "0.6.0",
   "description": "TanStack Devtools is a set of tools for building advanced devtools for your application.",
   "author": "Tanner Linsley",
   "license": "MIT",

package/src/components/main-panel.tsx

@@ -1,8 +1,10 @@
 import clsx from 'clsx'
+import { DrawClientProvider } from '../context/draw-context'
 import { useDevtoolsSettings, useHeight } from '../context/use-devtools-context'
 import { useStyles } from '../styles/use-styles'
 import { TANSTACK_DEVTOOLS } from '../utils/storage'
 import { usePiPWindow } from '../context/pip-context'
+
 import type { Accessor, JSX } from 'solid-js'
 
 export const MainPanel = (props: {
@@ -30,7 +32,9 @@ export const MainPanel = (props: {
         styles().devtoolsPanelContainerResizing(props.isResizing),
       )}
     >
-      {props.children}
+      <DrawClientProvider animationMs={400}>
+        {props.children}
+      </DrawClientProvider>
     </div>
   )
 }

package/src/components/tabs.tsx

@@ -2,6 +2,7 @@ import clsx from 'clsx'
 import { For } from 'solid-js'
 import { useStyles } from '../styles/use-styles'
 import { useDevtoolsState } from '../context/use-devtools-context'
+import { useDrawContext } from '../context/draw-context'
 import { tabs } from '../tabs'
 import { usePiPWindow } from '../context/pip-context'
 
@@ -18,6 +19,8 @@ export const Tabs = (props: TabsProps) => {
       `width=${window.innerWidth},height=${state().height},top=${window.screen.height},left=${window.screenLeft}}`,
     )
   }
+  const { hoverUtils } = useDrawContext()
+
   return (
     <div class={styles().tabContainer}>
       <For each={tabs}>
@@ -26,6 +29,12 @@ export const Tabs = (props: TabsProps) => {
             type="button"
             onClick={() => setState({ activeTab: tab.id })}
             class={clsx(styles().tab, { active: state().activeTab === tab.id })}
+            onMouseEnter={() => {
+              if (tab.id === 'plugins') hoverUtils.enter()
+            }}
+            onMouseLeave={() => {
+              if (tab.id === 'plugins') hoverUtils.leave()
+            }}
           >
             {tab.icon}
           </button>

package/src/context/draw-context.tsx

@@ -0,0 +1,67 @@
+import {
+  createContext,
+  createMemo,
+  createSignal,
+  onCleanup,
+  useContext,
+} from 'solid-js'
+import type { ParentComponent } from 'solid-js'
+
+const useDraw = (props: { animationMs: number }) => {
+  const [activeHover, setActiveHover] = createSignal<boolean>(false)
+  const [forceExpand, setForceExpand] = createSignal<boolean>(false)
+
+  const expanded = createMemo(() => activeHover() || forceExpand())
+
+  let hoverTimeout: ReturnType<typeof setTimeout> | null = null
+  onCleanup(() => {
+    if (hoverTimeout) clearTimeout(hoverTimeout)
+  })
+
+  const hoverUtils = {
+    enter: () => {
+      if (hoverTimeout) {
+        clearTimeout(hoverTimeout)
+        hoverTimeout = null
+      }
+      setActiveHover(true)
+    },
+
+    leave: () => {
+      hoverTimeout = setTimeout(() => {
+        setActiveHover(false)
+      }, props.animationMs)
+    },
+  }
+
+  return {
+    expanded,
+    setForceExpand,
+    hoverUtils,
+    animationMs: props.animationMs,
+  }
+}
+
+type ContextType = ReturnType<typeof useDraw>
+
+const DrawContext = createContext<ContextType | undefined>(undefined)
+
+export const DrawClientProvider: ParentComponent<{
+  animationMs: number
+}> = (props) => {
+  const value = useDraw({ animationMs: props.animationMs })
+
+  return (
+    <DrawContext.Provider value={value}>{props.children}</DrawContext.Provider>
+  )
+}
+
+export function useDrawContext() {
+  const context = useContext(DrawContext)
+
+  if (context === undefined) {
+    throw new Error(`useDrawContext must be used within a DrawClientProvider`)
+  }
+
+  return context
+}

package/src/context/pip-context.tsx

@@ -6,7 +6,7 @@ import {
   onCleanup,
   useContext,
 } from 'solid-js'
-import { clearDelegatedEvents, delegateEvents } from 'solid-js/web'
+import { delegateEvents } from 'solid-js/web'
 import type { Accessor, JSX } from 'solid-js'
 
 interface PiPProviderProps {
@@ -69,8 +69,6 @@ export const PiPProvider = (props: PiPProviderProps) => {
     pip.document.head.innerHTML = ''
     // Remove existing body
     pip.document.body.innerHTML = ''
-    // Clear Delegated Events
-    clearDelegatedEvents(pip.document)
 
     pip.document.title = 'TanStack Devtools'
     pip.document.body.style.margin = '0'

package/src/context/use-devtools-context.ts

@@ -1,6 +1,7 @@
-import { createMemo, useContext } from 'solid-js'
+import { createEffect, createMemo, useContext } from 'solid-js'
 import { DevtoolsContext } from './devtools-context.jsx'
-/* import type { DevtoolsPlugin } from './devtools-context' */
+import { useDrawContext } from './draw-context.jsx'
+
 import type { DevtoolsStore } from './devtools-store.js'
 
 /**
@@ -19,10 +20,19 @@ const useDevtoolsContext = () => {
 
 export const usePlugins = () => {
   const { store, setStore } = useDevtoolsContext()
+  const { setForceExpand } = useDrawContext()
 
   const plugins = createMemo(() => store.plugins)
   const activePlugin = createMemo(() => store.state.activePlugin)
 
+  createEffect(() => {
+    if (activePlugin() == null) {
+      setForceExpand(false)
+    } else {
+      setForceExpand(true)
+    }
+  })
+
   const setActivePlugin = (pluginId: string) => {
     setStore((prev) => ({
       ...prev,

package/src/hooks/use-head-changes.ts

@@ -0,0 +1,110 @@
+import { onCleanup, onMount } from 'solid-js'
+
+type HeadChange =
+  | { kind: 'added'; node: Node }
+  | { kind: 'removed'; node: Node }
+  | {
+      kind: 'attr'
+      target: Element
+      name: string | null
+      oldValue: string | null
+    }
+  | { kind: 'title'; title: string }
+
+type UseHeadChangesOptions = {
+  /**
+   * Observe attribute changes on elements inside <head>
+   * Default: true
+   */
+  attributes?: boolean
+  /**
+   * Observe added/removed nodes in <head>
+   * Default: true
+   */
+  childList?: boolean
+  /**
+   * Observe descendants of <head>
+   * Default: true
+   */
+  subtree?: boolean
+  /**
+   * Also observe <title> changes explicitly
+   * Default: true
+   */
+  observeTitle?: boolean
+}
+
+export function useHeadChanges(
+  onChange: (change: HeadChange, raw?: MutationRecord) => void,
+  opts: UseHeadChangesOptions = {},
+) {
+  const {
+    attributes = true,
+    childList = true,
+    subtree = true,
+    observeTitle = true,
+  } = opts
+
+  onMount(() => {
+    const headObserver = new MutationObserver((mutations) => {
+      for (const m of mutations) {
+        if (m.type === 'childList') {
+          m.addedNodes.forEach((node) => onChange({ kind: 'added', node }, m))
+          m.removedNodes.forEach((node) =>
+            onChange({ kind: 'removed', node }, m),
+          )
+        } else if (m.type === 'attributes') {
+          const el = m.target as Element
+          onChange(
+            {
+              kind: 'attr',
+              target: el,
+              name: m.attributeName,
+              oldValue: m.oldValue ?? null,
+            },
+            m,
+          )
+        } else {
+          // If someone mutates a Text node inside <title>, surface it as a title change.
+          const isInTitle =
+            m.target.parentNode &&
+            (m.target.parentNode as Element).tagName.toLowerCase() === 'title'
+          if (isInTitle) onChange({ kind: 'title', title: document.title }, m)
+        }
+      }
+    })
+
+    headObserver.observe(document.head, {
+      childList,
+      attributes,
+      subtree,
+      attributeOldValue: attributes,
+      characterData: true, // helps catch <title> text node edits
+      characterDataOldValue: false,
+    })
+
+    // Extra explicit observer for <title>, since `document.title = "..."`
+    // may not always bubble as a head mutation in all setups.
+    let titleObserver: MutationObserver | undefined
+    if (observeTitle) {
+      const titleEl =
+        document.head.querySelector('title') ||
+        // create a <title> if missing so future changes are observable
+        document.head.appendChild(document.createElement('title'))
+
+      titleObserver = new MutationObserver(() => {
+        onChange({ kind: 'title', title: document.title })
+      })
+      titleObserver.observe(titleEl, {
+        childList: true,
+        characterData: true,
+        subtree: true,
+      })
+    }
+
+    onCleanup(() => {
+      headObserver.disconnect()
+      titleObserver?.disconnect()
+    })
+  })
+}