@tanstack/devtools 0.6.2 → 0.6.3

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (14) hide show
  1. package/dist/esm/components/tabs.js +5 -2
  2. package/dist/esm/components/tabs.js.map +1 -1
  3. package/dist/esm/tabs/index.d.ts +3 -3
  4. package/dist/esm/tabs/index.js +5 -5
  5. package/dist/esm/tabs/index.js.map +1 -1
  6. package/dist/esm/tabs/seo-tab.js +23 -22
  7. package/dist/esm/tabs/seo-tab.js.map +1 -1
  8. package/dist/esm/tabs/settings-tab.js +34 -33
  9. package/dist/esm/tabs/settings-tab.js.map +1 -1
  10. package/package.json +3 -3
  11. package/src/components/tabs.tsx +4 -33
  12. package/src/tabs/index.tsx +4 -64
  13. package/src/tabs/seo-tab.tsx +2 -15
  14. package/src/tabs/settings-tab.tsx +10 -64
package/dist/esm/components/tabs.js CHANGED
@@ -1,12 +1,13 @@
1
1
  import { template, insert, createComponent, effect, className, memo, delegateEvents } from "solid-js/web";
2
2
  import clsx from "clsx";
3
3
  import { For } from "solid-js";
4
+ import { PiP, X } from "@tanstack/devtools-ui/icons";
4
5
  import { useStyles } from "../styles/use-styles.js";
5
6
  import { useDevtoolsState } from "../context/use-devtools-context.js";
6
7
  import { useDrawContext } from "../context/draw-context.js";
7
8
  import { tabs } from "../tabs/index.js";
8
9
  import { usePiPWindow } from "../context/pip-context.js";
9
- var _tmpl$ = /* @__PURE__ */ template(`<div>`), _tmpl$2 = /* @__PURE__ */ template(`<button type=button>`), _tmpl$3 = /* @__PURE__ */ template(`<div><button type=button><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 class="lucide lucide-picture-in-picture-icon lucide-picture-in-picture"><path d="M2 10h6V4"></path><path d="m2 4 6 6"></path><path d="M21 10V7a2 2 0 0 0-2-2h-7"></path><path d="M3 14v2a2 2 0 0 0 2 2h3"></path><rect x=12 y=14 width=10 height=7 rx=1></rect></svg></button><button type=button><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="M18 6 6 18"></path><path d="m6 6 12 12">`);
10
+ var _tmpl$ = /* @__PURE__ */ template(`<div>`), _tmpl$2 = /* @__PURE__ */ template(`<button type=button>`), _tmpl$3 = /* @__PURE__ */ template(`<div><button type=button></button><button type=button>`);
10
11
  const Tabs = (props) => {
11
12
  const styles = useStyles();
12
13
  const {
@@ -35,7 +36,7 @@ const Tabs = (props) => {
35
36
  _el$2.$$click = () => setState({
36
37
  activeTab: tab.id
37
38
  });
38
- insert(_el$2, () => tab.icon);
39
+ insert(_el$2, () => tab.icon());
39
40
  effect(() => className(_el$2, clsx(styles().tab, {
40
41
  active: state().activeTab === tab.id
41
42
  })));
@@ -48,7 +49,9 @@ const Tabs = (props) => {
48
49
  var _el$3 = _tmpl$3(), _el$4 = _el$3.firstChild, _el$5 = _el$4.nextSibling;
49
50
  _el$3.style.setProperty("margin-top", "auto");
50
51
  _el$4.$$click = handleDetachment;
52
+ insert(_el$4, createComponent(PiP, {}));
51
53
  _el$5.$$click = () => props.toggleOpen();
54
+ insert(_el$5, createComponent(X, {}));
52
55
  effect((_p$) => {
53
56
  var _v$ = clsx(styles().tab, "detach"), _v$2 = clsx(styles().tab, "close");
54
57
  _v$ !== _p$.e && className(_el$4, _p$.e = _v$);
package/dist/esm/components/tabs.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"tabs.js","sources":["../../../src/components/tabs.tsx"],"sourcesContent":["import clsx from 'clsx'\nimport { For } from 'solid-js'\nimport { useStyles } from '../styles/use-styles'\nimport { useDevtoolsState } from '../context/use-devtools-context'\nimport { useDrawContext } from '../context/draw-context'\nimport { tabs } from '../tabs'\nimport { usePiPWindow } from '../context/pip-context'\n\ninterface TabsProps {\n toggleOpen: () => void\n}\n\nexport const Tabs = (props: TabsProps) => {\n const styles = useStyles()\n const { state, setState } = useDevtoolsState()\n const pipWindow = usePiPWindow()\n const handleDetachment = () => {\n pipWindow().requestPipWindow(\n `width=${window.innerWidth},height=${state().height},top=${window.screen.height},left=${window.screenLeft}}`,\n )\n }\n const { hoverUtils } = useDrawContext()\n\n return (\n <div class={styles().tabContainer}>\n <For each={tabs}>\n {(tab) => (\n <button\n type=\"button\"\n onClick={() => setState({ activeTab: tab.id })}\n class={clsx(styles().tab, { active: state().activeTab === tab.id })}\n onMouseEnter={() => {\n if (tab.id === 'plugins') hoverUtils.enter()\n }}\n onMouseLeave={() => {\n if (tab.id === 'plugins') hoverUtils.leave()\n }}\n >\n {tab.icon}\n </button>\n )}\n </For>\n {pipWindow().pipWindow !== null ? null : (\n <div\n style={{\n 'margin-top': 'auto',\n }}\n >\n <button\n type=\"button\"\n class={clsx(styles().tab, 'detach')}\n onClick={handleDetachment}\n >\n <svg\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 class=\"lucide lucide-picture-in-picture-icon lucide-picture-in-picture\"\n >\n <path d=\"M2 10h6V4\" />\n <path d=\"m2 4 6 6\" />\n <path d=\"M21 10V7a2 2 0 0 0-2-2h-7\" />\n <path d=\"M3 14v2a2 2 0 0 0 2 2h3\" />\n <rect x=\"12\" y=\"14\" width=\"10\" height=\"7\" rx=\"1\" />\n </svg>\n </button>\n <button\n type=\"button\"\n class={clsx(styles().tab, 'close')}\n onClick={() => props.toggleOpen()}\n >\n <svg\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=\"M18 6 6 18\" />\n <path d=\"m6 6 12 12\" />\n </svg>\n </button>\n </div>\n )}\n </div>\n )\n}\n"],"names":["Tabs","props","styles","useStyles","state","setState","useDevtoolsState","pipWindow","usePiPWindow","handleDetachment","requestPipWindow","window","innerWidth","height","screen","screenLeft","hoverUtils","useDrawContext","_el$","_tmpl$","_$insert","_$createComponent","For","each","tabs","children","tab","_el$2","_tmpl$2","addEventListener","id","leave","enter","$$click","activeTab","icon","_$effect","_$className","clsx","active","_c$","_$memo","_el$3","_tmpl$3","_el$4","firstChild","_el$5","nextSibling","style","setProperty","toggleOpen","_p$","_v$","_v$2","e","t","undefined","tabContainer","_$delegateEvents"],"mappings":";;;;;;;;;AAYO,MAAMA,OAAOA,CAACC,UAAqB;AACxC,QAAMC,SAASC,UAAAA;AACf,QAAM;AAAA,IAAEC;AAAAA,IAAOC;AAAAA,EAAAA,IAAaC,iBAAAA;AAC5B,QAAMC,YAAYC,aAAAA;AAClB,QAAMC,mBAAmBA,MAAM;AAC7BF,cAAAA,EAAYG,iBACV,SAASC,OAAOC,UAAU,WAAWR,MAAAA,EAAQS,MAAM,QAAQF,OAAOG,OAAOD,MAAM,SAASF,OAAOI,UAAU,GAC3G;AAAA,EACF;AACA,QAAM;AAAA,IAAEC;AAAAA,EAAAA,IAAeC,eAAAA;AAEvB,UAAA,MAAA;AAAA,QAAAC,OAAAC,OAAAA;AAAAC,WAAAF,MAAAG,gBAEKC,KAAG;AAAA,MAACC,MAAMC;AAAAA,MAAIC,UACXC,UAAG,MAAA;AAAA,YAAAC,QAAAC,QAAAA;AAAAD,cAAAE,iBAAA,cAQa,MAAM;AAClB,cAAIH,IAAII,OAAO,UAAWd,YAAWe,MAAAA;AAAAA,QACvC,CAAC;AAAAJ,cAAAE,iBAAA,cALa,MAAM;AAClB,cAAIH,IAAII,OAAO,UAAWd,YAAWgB,MAAAA;AAAAA,QACvC,CAAC;AAAAL,cAAAM,UAJQ,MAAM5B,SAAS;AAAA,UAAE6B,WAAWR,IAAII;AAAAA,QAAAA,CAAI;AAACV,eAAAO,OAAA,MAS7CD,IAAIS,IAAI;AAAAC,eAAA,MAAAC,UAAAV,OARFW,KAAKpC,OAAAA,EAASwB,KAAK;AAAA,UAAEa,QAAQnC,MAAAA,EAAQ8B,cAAcR,IAAII;AAAAA,QAAAA,CAAI,CAAC,CAAA;AAAA,eAAAH;AAAAA,MAAA,GAAA;AAAA,IAAA,CAUtE,GAAA,IAAA;AAAAP,WAAAF,OAAA,MAAA;AAAA,UAAAsB,MAAAC,KAAA,MAEFlC,UAAAA,EAAYA,cAAc,IAAI;AAAA,aAAA,MAA9BiC,IAAAA,IAAiC,QAAI,MAAA;AAAA,YAAAE,QAAAC,QAAAA,GAAAC,QAAAF,MAAAG,YAAAC,QAAAF,MAAAG;AAAAL,cAAAM,MAAAC,YAAA,cAAA,MAAA;AAAAL,cAAAX,UASvBxB;AAAgBqC,cAAAb,UAwBhB,MAAMhC,MAAMiD,WAAAA;AAAYd,eAAAe,CAAAA,QAAA;AAAA,cAAAC,MAzB1Bd,KAAKpC,OAAAA,EAASwB,KAAK,QAAQ,GAAC2B,OAwB5Bf,KAAKpC,SAASwB,KAAK,OAAO;AAAC0B,kBAAAD,IAAAG,KAAAjB,UAAAO,OAAAO,IAAAG,IAAAF,GAAA;AAAAC,mBAAAF,IAAAI,KAAAlB,UAAAS,OAAAK,IAAAI,IAAAF,IAAA;AAAA,iBAAAF;AAAAA,QAAA,GAAA;AAAA,UAAAG,GAAAE;AAAAA,UAAAD,GAAAC;AAAAA,QAAAA,CAAA;AAAA,eAAAd;AAAAA,MAAA,GAAA;AAAA,IAmBvC,GAAA,GAAA,IAAA;AAAAN,WAAA,MAAAC,UAAAnB,MArEShB,OAAAA,EAASuD,YAAY,CAAA;AAAA,WAAAvC;AAAAA,EAAA,GAAA;AAwErC;AAACwC,eAAA,CAAA,OAAA,CAAA;"}
1
+ {"version":3,"file":"tabs.js","sources":["../../../src/components/tabs.tsx"],"sourcesContent":["import clsx from 'clsx'\nimport { For } from 'solid-js'\nimport { PiP, X } from '@tanstack/devtools-ui/icons'\nimport { useStyles } from '../styles/use-styles'\nimport { useDevtoolsState } from '../context/use-devtools-context'\nimport { useDrawContext } from '../context/draw-context'\nimport { tabs } from '../tabs'\nimport { usePiPWindow } from '../context/pip-context'\n\ninterface TabsProps {\n toggleOpen: () => void\n}\n\nexport const Tabs = (props: TabsProps) => {\n const styles = useStyles()\n const { state, setState } = useDevtoolsState()\n const pipWindow = usePiPWindow()\n const handleDetachment = () => {\n pipWindow().requestPipWindow(\n `width=${window.innerWidth},height=${state().height},top=${window.screen.height},left=${window.screenLeft}}`,\n )\n }\n const { hoverUtils } = useDrawContext()\n\n return (\n <div class={styles().tabContainer}>\n <For each={tabs}>\n {(tab) => (\n <button\n type=\"button\"\n onClick={() => setState({ activeTab: tab.id })}\n class={clsx(styles().tab, { active: state().activeTab === tab.id })}\n onMouseEnter={() => {\n if (tab.id === 'plugins') hoverUtils.enter()\n }}\n onMouseLeave={() => {\n if (tab.id === 'plugins') hoverUtils.leave()\n }}\n >\n {tab.icon()}\n </button>\n )}\n </For>\n {pipWindow().pipWindow !== null ? null : (\n <div\n style={{\n 'margin-top': 'auto',\n }}\n >\n <button\n type=\"button\"\n class={clsx(styles().tab, 'detach')}\n onClick={handleDetachment}\n >\n <PiP />\n </button>\n <button\n type=\"button\"\n class={clsx(styles().tab, 'close')}\n onClick={() => props.toggleOpen()}\n >\n <X />\n </button>\n </div>\n )}\n </div>\n )\n}\n"],"names":["Tabs","props","styles","useStyles","state","setState","useDevtoolsState","pipWindow","usePiPWindow","handleDetachment","requestPipWindow","window","innerWidth","height","screen","screenLeft","hoverUtils","useDrawContext","_el$","_tmpl$","_$insert","_$createComponent","For","each","tabs","children","tab","_el$2","_tmpl$2","addEventListener","id","leave","enter","$$click","activeTab","icon","_$effect","_$className","clsx","active","_c$","_$memo","_el$3","_tmpl$3","_el$4","firstChild","_el$5","nextSibling","style","setProperty","PiP","toggleOpen","X","_p$","_v$","_v$2","e","t","undefined","tabContainer","_$delegateEvents"],"mappings":";;;;;;;;;;AAaO,MAAMA,OAAOA,CAACC,UAAqB;AACxC,QAAMC,SAASC,UAAAA;AACf,QAAM;AAAA,IAAEC;AAAAA,IAAOC;AAAAA,EAAAA,IAAaC,iBAAAA;AAC5B,QAAMC,YAAYC,aAAAA;AAClB,QAAMC,mBAAmBA,MAAM;AAC7BF,cAAAA,EAAYG,iBACV,SAASC,OAAOC,UAAU,WAAWR,MAAAA,EAAQS,MAAM,QAAQF,OAAOG,OAAOD,MAAM,SAASF,OAAOI,UAAU,GAC3G;AAAA,EACF;AACA,QAAM;AAAA,IAAEC;AAAAA,EAAAA,IAAeC,eAAAA;AAEvB,UAAA,MAAA;AAAA,QAAAC,OAAAC,OAAAA;AAAAC,WAAAF,MAAAG,gBAEKC,KAAG;AAAA,MAACC,MAAMC;AAAAA,MAAIC,UACXC,UAAG,MAAA;AAAA,YAAAC,QAAAC,QAAAA;AAAAD,cAAAE,iBAAA,cAQa,MAAM;AAClB,cAAIH,IAAII,OAAO,UAAWd,YAAWe,MAAAA;AAAAA,QACvC,CAAC;AAAAJ,cAAAE,iBAAA,cALa,MAAM;AAClB,cAAIH,IAAII,OAAO,UAAWd,YAAWgB,MAAAA;AAAAA,QACvC,CAAC;AAAAL,cAAAM,UAJQ,MAAM5B,SAAS;AAAA,UAAE6B,WAAWR,IAAII;AAAAA,QAAAA,CAAI;AAACV,eAAAO,OAAA,MAS7CD,IAAIS,KAAAA,CAAM;AAAAC,eAAA,MAAAC,UAAAV,OARJW,KAAKpC,OAAAA,EAASwB,KAAK;AAAA,UAAEa,QAAQnC,MAAAA,EAAQ8B,cAAcR,IAAII;AAAAA,QAAAA,CAAI,CAAC,CAAA;AAAA,eAAAH;AAAAA,MAAA,GAAA;AAAA,IAAA,CAUtE,GAAA,IAAA;AAAAP,WAAAF,OAAA,MAAA;AAAA,UAAAsB,MAAAC,KAAA,MAEFlC,UAAAA,EAAYA,cAAc,IAAI;AAAA,aAAA,MAA9BiC,IAAAA,IAAiC,QAAI,MAAA;AAAA,YAAAE,QAAAC,QAAAA,GAAAC,QAAAF,MAAAG,YAAAC,QAAAF,MAAAG;AAAAL,cAAAM,MAAAC,YAAA,cAAA,MAAA;AAAAL,cAAAX,UASvBxB;AAAgBW,eAAAwB,OAAAvB,gBAExB6B,KAAG,CAAA,CAAA,CAAA;AAAAJ,cAAAb,UAKK,MAAMhC,MAAMkD,WAAAA;AAAY/B,eAAA0B,OAAAzB,gBAEhC+B,GAAC,CAAA,CAAA,CAAA;AAAAhB,eAAAiB,CAAAA,QAAA;AAAA,cAAAC,MAVKhB,KAAKpC,OAAAA,EAASwB,KAAK,QAAQ,GAAC6B,OAO5BjB,KAAKpC,SAASwB,KAAK,OAAO;AAAC4B,kBAAAD,IAAAG,KAAAnB,UAAAO,OAAAS,IAAAG,IAAAF,GAAA;AAAAC,mBAAAF,IAAAI,KAAApB,UAAAS,OAAAO,IAAAI,IAAAF,IAAA;AAAA,iBAAAF;AAAAA,QAAA,GAAA;AAAA,UAAAG,GAAAE;AAAAA,UAAAD,GAAAC;AAAAA,QAAAA,CAAA;AAAA,eAAAhB;AAAAA,MAAA,GAAA;AAAA,IAMvC,GAAA,GAAA,IAAA;AAAAN,WAAA,MAAAC,UAAAnB,MAvCShB,OAAAA,EAASyD,YAAY,CAAA;AAAA,WAAAzC;AAAAA,EAAA,GAAA;AA0CrC;AAAC0C,eAAA,CAAA,OAAA,CAAA;"}
package/dist/esm/tabs/index.d.ts CHANGED
@@ -2,16 +2,16 @@ export declare const tabs: readonly [{
2
2
  readonly name: "Plugins";
3
3
  readonly id: "plugins";
4
4
  readonly component: () => import("solid-js").JSX.Element;
5
- readonly icon: import("solid-js").JSX.Element;
5
+ readonly icon: () => import("solid-js").JSX.Element;
6
6
  }, {
7
7
  readonly name: "SEO";
8
8
  readonly id: "seo";
9
9
  readonly component: () => import("solid-js").JSX.Element;
10
- readonly icon: import("solid-js").JSX.Element;
10
+ readonly icon: () => import("solid-js").JSX.Element;
11
11
  }, {
12
12
  readonly name: "Settings";
13
13
  readonly id: "settings";
14
14
  readonly component: () => import("solid-js").JSX.Element;
15
- readonly icon: import("solid-js").JSX.Element;
15
+ readonly icon: () => import("solid-js").JSX.Element;
16
16
  }];
17
17
  export type TabName = (typeof tabs)[number]['id'];
package/dist/esm/tabs/index.js CHANGED
@@ -1,23 +1,23 @@
1
- import { template, createComponent } from "solid-js/web";
1
+ import { createComponent } from "solid-js/web";
2
+ import { List, PageSearch, Cogs } from "@tanstack/devtools-ui/icons";
2
3
  import { SettingsTab } from "./settings-tab.js";
3
4
  import { PluginsTab } from "./plugins-tab.js";
4
5
  import { SeoTab } from "./seo-tab.js";
5
- var _tmpl$ = /* @__PURE__ */ template(`<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="M8 6h10"></path><path d="M6 12h9"></path><path d="M11 18h7">`), _tmpl$2 = /* @__PURE__ */ template(`<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 class="lucide lucide-file-search2-icon lucide-file-search-2"><path d="M15 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7Z"></path><path d="M14 2v4a2 2 0 0 0 2 2h4"></path><circle cx=11.5 cy=14.5 r=2.5></circle><path d="M13.3 16.3 15 18">`), _tmpl$3 = /* @__PURE__ */ template(`<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="M12 20a8 8 0 1 0 0-16 8 8 0 0 0 0 16Z"></path><path d="M12 14a2 2 0 1 0 0-4 2 2 0 0 0 0 4Z"></path><path d="M12 2v2"></path><path d="M12 22v-2"></path><path d="m17 20.66-1-1.73"></path><path d="M11 10.27 7 3.34"></path><path d="m20.66 17-1.73-1"></path><path d="m3.34 7 1.73 1"></path><path d="M14 12h8"></path><path d="M2 12h2"></path><path d="m20.66 7-1.73 1"></path><path d="m3.34 17 1.73-1"></path><path d="m17 3.34-1 1.73"></path><path d="m11 13.73-4 6.93">`);
6
6
  const tabs = [{
7
7
  name: "Plugins",
8
8
  id: "plugins",
9
9
  component: () => createComponent(PluginsTab, {}),
10
- icon: _tmpl$()
10
+ icon: () => createComponent(List, {})
11
11
  }, {
12
12
  name: "SEO",
13
13
  id: "seo",
14
14
  component: () => createComponent(SeoTab, {}),
15
- icon: _tmpl$2()
15
+ icon: () => createComponent(PageSearch, {})
16
16
  }, {
17
17
  name: "Settings",
18
18
  id: "settings",
19
19
  component: () => createComponent(SettingsTab, {}),
20
- icon: _tmpl$3()
20
+ icon: () => createComponent(Cogs, {})
21
21
  }];
22
22
  export {
23
23
  tabs
package/dist/esm/tabs/index.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"index.js","sources":["../../../src/tabs/index.tsx"],"sourcesContent":["import { SettingsTab } from './settings-tab'\nimport { PluginsTab } from './plugins-tab'\nimport { SeoTab } from './seo-tab'\n\nexport const tabs = [\n {\n name: 'Plugins',\n id: 'plugins',\n component: () => <PluginsTab />,\n icon: (\n <svg\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=\"M8 6h10\" />\n <path d=\"M6 12h9\" />\n <path d=\"M11 18h7\" />\n </svg>\n ),\n },\n {\n name: 'SEO',\n id: 'seo',\n component: () => <SeoTab />,\n icon: (\n <svg\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 class=\"lucide lucide-file-search2-icon lucide-file-search-2\"\n >\n <path d=\"M15 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7Z\" />\n <path d=\"M14 2v4a2 2 0 0 0 2 2h4\" />\n <circle cx=\"11.5\" cy=\"14.5\" r=\"2.5\" />\n <path d=\"M13.3 16.3 15 18\" />\n </svg>\n ),\n },\n {\n name: 'Settings',\n id: 'settings',\n component: () => <SettingsTab />,\n icon: (\n <svg\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=\"M12 20a8 8 0 1 0 0-16 8 8 0 0 0 0 16Z\" />\n <path d=\"M12 14a2 2 0 1 0 0-4 2 2 0 0 0 0 4Z\" />\n <path d=\"M12 2v2\" />\n <path d=\"M12 22v-2\" />\n <path d=\"m17 20.66-1-1.73\" />\n <path d=\"M11 10.27 7 3.34\" />\n <path d=\"m20.66 17-1.73-1\" />\n <path d=\"m3.34 7 1.73 1\" />\n <path d=\"M14 12h8\" />\n <path d=\"M2 12h2\" />\n <path d=\"m20.66 7-1.73 1\" />\n <path d=\"m3.34 17 1.73-1\" />\n <path d=\"m17 3.34-1 1.73\" />\n <path d=\"m11 13.73-4 6.93\" />\n </svg>\n ),\n },\n] as const\n\nexport type TabName = (typeof tabs)[number]['id']\n"],"names":["tabs","name","id","component","_$createComponent","PluginsTab","icon","_tmpl$","SeoTab","_tmpl$2","SettingsTab","_tmpl$3"],"mappings":";;;;;AAIO,MAAMA,OAAO,CAClB;AAAA,EACEC,MAAM;AAAA,EACNC,IAAI;AAAA,EACJC,WAAWA,MAAAC,gBAAOC,YAAU,EAAA;AAAA,EAC5BC,MAAIC,OAAAA;AAiBN,GACA;AAAA,EACEN,MAAM;AAAA,EACNC,IAAI;AAAA,EACJC,WAAWA,MAAAC,gBAAOI,QAAM,EAAA;AAAA,EACxBF,MAAIG,QAAAA;AAmBN,GACA;AAAA,EACER,MAAM;AAAA,EACNC,IAAI;AAAA,EACJC,WAAWA,MAAAC,gBAAOM,aAAW,EAAA;AAAA,EAC7BJ,MAAIK,QAAAA;AA4BN,CAAC;"}
1
+ {"version":3,"file":"index.js","sources":["../../../src/tabs/index.tsx"],"sourcesContent":["import { Cogs, List, PageSearch } from '@tanstack/devtools-ui/icons'\nimport { SettingsTab } from './settings-tab'\nimport { PluginsTab } from './plugins-tab'\nimport { SeoTab } from './seo-tab'\n\nexport const tabs = [\n {\n name: 'Plugins',\n id: 'plugins',\n component: () => <PluginsTab />,\n icon: () => <List />,\n },\n {\n name: 'SEO',\n id: 'seo',\n component: () => <SeoTab />,\n icon: () => <PageSearch />,\n },\n {\n name: 'Settings',\n id: 'settings',\n component: () => <SettingsTab />,\n icon: () => <Cogs />,\n },\n] as const\n\nexport type TabName = (typeof tabs)[number]['id']\n"],"names":["tabs","name","id","component","_$createComponent","PluginsTab","icon","List","SeoTab","PageSearch","SettingsTab","Cogs"],"mappings":";;;;;AAKO,MAAMA,OAAO,CAClB;AAAA,EACEC,MAAM;AAAA,EACNC,IAAI;AAAA,EACJC,WAAWA,MAAAC,gBAAOC,YAAU,EAAA;AAAA,EAC5BC,MAAMA,MAAAF,gBAAOG,MAAI,CAAA,CAAA;AACnB,GACA;AAAA,EACEN,MAAM;AAAA,EACNC,IAAI;AAAA,EACJC,WAAWA,MAAAC,gBAAOI,QAAM,EAAA;AAAA,EACxBF,MAAMA,MAAAF,gBAAOK,YAAU,CAAA,CAAA;AACzB,GACA;AAAA,EACER,MAAM;AAAA,EACNC,IAAI;AAAA,EACJC,WAAWA,MAAAC,gBAAOM,aAAW,EAAA;AAAA,EAC7BJ,MAAMA,MAAAF,gBAAOO,MAAI,CAAA,CAAA;AACnB,CAAC;"}
package/dist/esm/tabs/seo-tab.js CHANGED
@@ -1,9 +1,10 @@
1
1
  import { createComponent, template, insert, memo, effect, className, setAttribute } from "solid-js/web";
2
2
  import { createSignal, For } from "solid-js";
3
3
  import { MainPanel, Section, SectionTitle, SectionIcon, SectionDescription } from "@tanstack/devtools-ui";
4
+ import { SocialBubble } from "@tanstack/devtools-ui/icons";
4
5
  import { useStyles } from "../styles/use-styles.js";
5
6
  import { useHeadChanges } from "../hooks/use-head-changes.js";
6
- 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(`<svg xmlns=http://www.w3.org/2000/svg width=20 height=20 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">`), _tmpl$5 = /* @__PURE__ */ template(`<div>`), _tmpl$6 = /* @__PURE__ */ template(`<div><strong>Missing tags for <!>:</strong><ul>`), _tmpl$7 = /* @__PURE__ */ template(`<li>`);
7
+ 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>`), _tmpl$5 = /* @__PURE__ */ template(`<div><strong>Missing tags for <!>:</strong><ul>`), _tmpl$6 = /* @__PURE__ */ template(`<li>`);
7
8
  const SOCIALS = [
8
9
  {
9
10
  network: "Facebook",
@@ -220,23 +221,23 @@ const SeoTab = () => {
220
221
  get children() {
221
222
  return [createComponent(SectionIcon, {
222
223
  get children() {
223
- return _tmpl$4();
224
+ return createComponent(SocialBubble, {});
224
225
  }
225
226
  }), "Social previews"];
226
227
  }
227
228
  }), createComponent(SectionDescription, {
228
229
  children: "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."
229
230
  }), (() => {
230
- var _el$0 = _tmpl$5();
231
- insert(_el$0, createComponent(For, {
231
+ var _el$9 = _tmpl$4();
232
+ insert(_el$9, createComponent(For, {
232
233
  get each() {
233
234
  return reports();
234
235
  },
235
236
  children: (report, i) => {
236
237
  const social = SOCIALS[i()];
237
238
  return (() => {
238
- var _el$1 = _tmpl$5();
239
- insert(_el$1, createComponent(SocialPreview, {
239
+ var _el$0 = _tmpl$4();
240
+ insert(_el$0, createComponent(SocialPreview, {
240
241
  get meta() {
241
242
  return report.found;
242
243
  },
@@ -247,42 +248,42 @@ const SeoTab = () => {
247
248
  return social.network;
248
249
  }
249
250
  }), null);
250
- insert(_el$1, (() => {
251
+ insert(_el$0, (() => {
251
252
  var _c$2 = memo(() => report.missing.length > 0);
252
253
  return () => _c$2() ? (() => {
253
- var _el$10 = _tmpl$6(), _el$11 = _el$10.firstChild, _el$12 = _el$11.firstChild, _el$14 = _el$12.nextSibling;
254
- _el$14.nextSibling;
255
- var _el$15 = _el$11.nextSibling;
256
- insert(_el$11, () => social?.network, _el$14);
257
- insert(_el$15, createComponent(For, {
254
+ var _el$1 = _tmpl$5(), _el$10 = _el$1.firstChild, _el$11 = _el$10.firstChild, _el$13 = _el$11.nextSibling;
255
+ _el$13.nextSibling;
256
+ var _el$14 = _el$10.nextSibling;
257
+ insert(_el$10, () => social?.network, _el$13);
258
+ insert(_el$14, createComponent(For, {
258
259
  get each() {
259
260
  return report.missing;
260
261
  },
261
262
  children: (tag) => (() => {
262
- var _el$16 = _tmpl$7();
263
- insert(_el$16, tag);
264
- effect(() => className(_el$16, styles().seoMissingTag));
265
- return _el$16;
263
+ var _el$15 = _tmpl$6();
264
+ insert(_el$15, tag);
265
+ effect(() => className(_el$15, styles().seoMissingTag));
266
+ return _el$15;
266
267
  })()
267
268
  }));
268
269
  effect((_p$) => {
269
270
  var _v$0 = styles().seoMissingTagsSection, _v$1 = styles().seoMissingTagsList;
270
- _v$0 !== _p$.e && className(_el$10, _p$.e = _v$0);
271
- _v$1 !== _p$.t && className(_el$15, _p$.t = _v$1);
271
+ _v$0 !== _p$.e && className(_el$1, _p$.e = _v$0);
272
+ _v$1 !== _p$.t && className(_el$14, _p$.t = _v$1);
272
273
  return _p$;
273
274
  }, {
274
275
  e: void 0,
275
276
  t: void 0
276
277
  });
277
- return _el$10;
278
+ return _el$1;
278
279
  })() : null;
279
280
  })(), null);
280
- return _el$1;
281
+ return _el$0;
281
282
  })();
282
283
  }
283
284
  }));
284
- effect(() => className(_el$0, styles().seoPreviewSection));
285
- return _el$0;
285
+ effect(() => className(_el$9, styles().seoPreviewSection));
286
+ return _el$9;
286
287
  })()];
287
288
  }
288
289
  });
package/dist/esm/tabs/seo-tab.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"seo-tab.js","sources":["../../../src/tabs/seo-tab.tsx"],"sourcesContent":["import { For, createSignal } from 'solid-js'\nimport {\n MainPanel,\n Section,\n SectionDescription,\n SectionIcon,\n SectionTitle,\n} from '@tanstack/devtools-ui'\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 <MainPanel withPadding>\n <Section>\n <SectionTitle>\n <SectionIcon>\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n width=\"20\"\n height=\"20\"\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 </SectionIcon>\n Social previews\n </SectionTitle>\n <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 </SectionDescription>\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 </MainPanel>\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","_$createComponent","MainPanel","withPadding","children","Section","SectionTitle","SectionIcon","_tmpl$4","SectionDescription","_el$0","_tmpl$5","For","each","report","_el$1","_c$2","length","_el$10","_tmpl$6","_el$11","_el$12","_el$14","_el$15","_el$16","_tmpl$7","seoMissingTag","_v$0","seoMissingTagsSection","_v$1","seoMissingTagsList","seoPreviewSection"],"mappings":"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"}
1
+ {"version":3,"file":"seo-tab.js","sources":["../../../src/tabs/seo-tab.tsx"],"sourcesContent":["import { For, createSignal } from 'solid-js'\nimport {\n MainPanel,\n Section,\n SectionDescription,\n SectionIcon,\n SectionTitle,\n} from '@tanstack/devtools-ui'\nimport { SocialBubble } from '@tanstack/devtools-ui/icons'\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 <MainPanel withPadding>\n <Section>\n <SectionTitle>\n <SectionIcon>\n <SocialBubble />\n </SectionIcon>\n Social previews\n </SectionTitle>\n <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 </SectionDescription>\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 </MainPanel>\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","_$createComponent","MainPanel","withPadding","children","Section","SectionTitle","SectionIcon","SocialBubble","SectionDescription","_el$9","_tmpl$4","For","each","report","_el$0","_c$2","length","_el$1","_tmpl$5","_el$10","_el$11","_el$13","_el$14","_el$15","_tmpl$6","seoMissingTag","_v$0","seoMissingTagsSection","_v$1","seoMissingTagsList","seoPreviewSection"],"mappings":"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"}
package/dist/esm/tabs/settings-tab.js CHANGED
@@ -1,10 +1,11 @@
1
1
  import { createComponent, template, insert, effect, className } from "solid-js/web";
2
2
  import { createMemo, Show } from "solid-js";
3
3
  import { MainPanel, Section, SectionTitle, SectionIcon, SectionDescription, Checkbox, Input, Button, Select } from "@tanstack/devtools-ui";
4
+ import { SettingsCog, Link, Keyboard, GeoTag } from "@tanstack/devtools-ui/icons";
4
5
  import { useDevtoolsSettings } from "../context/use-devtools-context.js";
5
6
  import { uppercaseFirstLetter } from "../utils/sanitize.js";
6
7
  import { useStyles } from "../styles/use-styles.js";
7
- var _tmpl$ = /* @__PURE__ */ template(`<svg xmlns=http://www.w3.org/2000/svg width=20 height=20 viewBox="0 0 24 24"fill=none stroke=currentColor stroke-width=2 stroke-linecap=round stroke-linejoin=round><path d="M9.671 4.136a2.34 2.34 0 0 1 4.659 0 2.34 2.34 0 0 0 3.319 1.915 2.34 2.34 0 0 1 2.33 4.033 2.34 2.34 0 0 0 0 3.831 2.34 2.34 0 0 1-2.33 4.033 2.34 2.34 0 0 0-3.319 1.915 2.34 2.34 0 0 1-4.659 0 2.34 2.34 0 0 0-3.32-1.915 2.34 2.34 0 0 1-2.33-4.033 2.34 2.34 0 0 0 0-3.831A2.34 2.34 0 0 1 6.35 6.051a2.34 2.34 0 0 0 3.319-1.915"></path><circle cx=12 cy=12 r=3>`), _tmpl$2 = /* @__PURE__ */ template(`<div>`), _tmpl$3 = /* @__PURE__ */ template(`<svg xmlns=http://www.w3.org/2000/svg width=20 height=20 viewBox="0 0 24 24"fill=none stroke=currentColor stroke-width=2 stroke-linecap=round stroke-linejoin=round><path d="M9 17H7A5 5 0 0 1 7 7h2"></path><path d="M15 7h2a5 5 0 1 1 0 10h-2"></path><line x1=8 x2=16 y1=12 y2=12>`), _tmpl$4 = /* @__PURE__ */ template(`<svg xmlns=http://www.w3.org/2000/svg width=20 height=20 viewBox="0 0 24 24"fill=none stroke=currentColor stroke-width=2 stroke-linecap=round stroke-linejoin=round><path d="M10 8h.01"></path><path d="M12 12h.01"></path><path d="M14 8h.01"></path><path d="M16 12h.01"></path><path d="M18 8h.01"></path><path d="M6 8h.01"></path><path d="M7 16h10"></path><path d="M8 12h.01"></path><rect width=20 height=16 x=2 y=4 rx=2>`), _tmpl$5 = /* @__PURE__ */ template(`<div><div></div>Final shortcut is: `), _tmpl$6 = /* @__PURE__ */ template(`<svg xmlns=http://www.w3.org/2000/svg width=20 height=20 viewBox="0 0 24 24"fill=none stroke=currentColor stroke-width=2 stroke-linecap=round stroke-linejoin=round><path d="M20 10c0 4.993-5.539 10.193-7.399 11.799a1 1 0 0 1-1.202 0C9.539 20.193 4 14.993 4 10a8 8 0 0 1 16 0"></path><circle cx=12 cy=10 r=3>`), _tmpl$7 = /* @__PURE__ */ template(`<div><div>`);
8
+ var _tmpl$ = /* @__PURE__ */ template(`<div>`), _tmpl$2 = /* @__PURE__ */ template(`<div><div></div>Final shortcut is: `), _tmpl$3 = /* @__PURE__ */ template(`<div><div>`);
8
9
  const SettingsTab = () => {
9
10
  const {
10
11
  setSettings,
@@ -34,15 +35,15 @@ const SettingsTab = () => {
34
35
  get children() {
35
36
  return [createComponent(SectionIcon, {
36
37
  get children() {
37
- return _tmpl$();
38
+ return createComponent(SettingsCog, {});
38
39
  }
39
40
  }), "General"];
40
41
  }
41
42
  }), createComponent(SectionDescription, {
42
43
  children: "Configure general behavior of the devtools panel."
43
44
  }), (() => {
44
- var _el$2 = _tmpl$2();
45
- insert(_el$2, createComponent(Checkbox, {
45
+ var _el$ = _tmpl$();
46
+ insert(_el$, createComponent(Checkbox, {
46
47
  label: "Default open",
47
48
  description: "Automatically open the devtools panel when the page loads",
48
49
  onChange: () => setSettings({
@@ -52,7 +53,7 @@ const SettingsTab = () => {
52
53
  return settings().defaultOpen;
53
54
  }
54
55
  }), null);
55
- insert(_el$2, createComponent(Checkbox, {
56
+ insert(_el$, createComponent(Checkbox, {
56
57
  label: "Hide trigger until hovered",
57
58
  description: "Keep the devtools trigger button hidden until you hover over its area",
58
59
  onChange: () => setSettings({
@@ -62,8 +63,8 @@ const SettingsTab = () => {
62
63
  return settings().hideUntilHover;
63
64
  }
64
65
  }), null);
65
- effect(() => className(_el$2, styles().settingsGroup));
66
- return _el$2;
66
+ effect(() => className(_el$, styles().settingsGroup));
67
+ return _el$;
67
68
  })()];
68
69
  }
69
70
  }), createComponent(Section, {
@@ -72,15 +73,15 @@ const SettingsTab = () => {
72
73
  get children() {
73
74
  return [createComponent(SectionIcon, {
74
75
  get children() {
75
- return _tmpl$3();
76
+ return createComponent(Link, {});
76
77
  }
77
78
  }), "URL Configuration"];
78
79
  }
79
80
  }), createComponent(SectionDescription, {
80
81
  children: "Control when devtools are available based on URL parameters."
81
82
  }), (() => {
82
- var _el$4 = _tmpl$2();
83
- insert(_el$4, createComponent(Checkbox, {
83
+ var _el$2 = _tmpl$();
84
+ insert(_el$2, createComponent(Checkbox, {
84
85
  label: "Require URL Flag",
85
86
  description: "Only show devtools when a specific URL parameter is present",
86
87
  get checked() {
@@ -90,13 +91,13 @@ const SettingsTab = () => {
90
91
  requireUrlFlag: checked
91
92
  })
92
93
  }), null);
93
- insert(_el$4, createComponent(Show, {
94
+ insert(_el$2, createComponent(Show, {
94
95
  get when() {
95
96
  return settings().requireUrlFlag;
96
97
  },
97
98
  get children() {
98
- var _el$5 = _tmpl$2();
99
- insert(_el$5, createComponent(Input, {
99
+ var _el$3 = _tmpl$();
100
+ insert(_el$3, createComponent(Input, {
100
101
  label: "URL flag",
101
102
  description: "Enter the URL parameter name (e.g., 'debug' for ?debug=true)",
102
103
  placeholder: "debug",
@@ -107,12 +108,12 @@ const SettingsTab = () => {
107
108
  urlFlag: e
108
109
  })
109
110
  }));
110
- effect(() => className(_el$5, styles().conditionalSetting));
111
- return _el$5;
111
+ effect(() => className(_el$3, styles().conditionalSetting));
112
+ return _el$3;
112
113
  }
113
114
  }), null);
114
- effect(() => className(_el$4, styles().settingsGroup));
115
- return _el$4;
115
+ effect(() => className(_el$2, styles().settingsGroup));
116
+ return _el$2;
116
117
  })()];
117
118
  }
118
119
  }), createComponent(Section, {
@@ -121,15 +122,15 @@ const SettingsTab = () => {
121
122
  get children() {
122
123
  return [createComponent(SectionIcon, {
123
124
  get children() {
124
- return _tmpl$4();
125
+ return createComponent(Keyboard, {});
125
126
  }
126
127
  }), "Keyboard"];
127
128
  }
128
129
  }), createComponent(SectionDescription, {
129
130
  children: "Customize keyboard shortcuts for quick access."
130
131
  }), (() => {
131
- var _el$7 = _tmpl$5(), _el$8 = _el$7.firstChild, _el$9 = _el$8.nextSibling;
132
- insert(_el$8, createComponent(Show, {
132
+ var _el$4 = _tmpl$2(), _el$5 = _el$4.firstChild, _el$6 = _el$5.nextSibling;
133
+ insert(_el$5, createComponent(Show, {
133
134
  keyed: true,
134
135
  get when() {
135
136
  return hotkey();
@@ -174,7 +175,7 @@ const SettingsTab = () => {
174
175
  })];
175
176
  }
176
177
  }));
177
- insert(_el$7, createComponent(Input, {
178
+ insert(_el$4, createComponent(Input, {
178
179
  label: "Hotkey to open/close devtools",
179
180
  description: "Use '+' to combine keys (e.g., 'a+b' or 'd'). This will be used with the enabled modifiers from above",
180
181
  placeholder: "a",
@@ -196,18 +197,18 @@ const SettingsTab = () => {
196
197
  openHotkey: [...hotkey().filter((key) => ["Shift", "Meta", "Alt", "Ctrl"].includes(key)), ...modifiers2]
197
198
  });
198
199
  }
199
- }), _el$9);
200
- insert(_el$7, () => hotkey().join(" + "), null);
200
+ }), _el$6);
201
+ insert(_el$4, () => hotkey().join(" + "), null);
201
202
  effect((_p$) => {
202
203
  var _v$ = styles().settingsGroup, _v$2 = styles().settingsModifiers;
203
- _v$ !== _p$.e && className(_el$7, _p$.e = _v$);
204
- _v$2 !== _p$.t && className(_el$8, _p$.t = _v$2);
204
+ _v$ !== _p$.e && className(_el$4, _p$.e = _v$);
205
+ _v$2 !== _p$.t && className(_el$5, _p$.t = _v$2);
205
206
  return _p$;
206
207
  }, {
207
208
  e: void 0,
208
209
  t: void 0
209
210
  });
210
- return _el$7;
211
+ return _el$4;
211
212
  })()];
212
213
  }
213
214
  }), createComponent(Section, {
@@ -216,15 +217,15 @@ const SettingsTab = () => {
216
217
  get children() {
217
218
  return [createComponent(SectionIcon, {
218
219
  get children() {
219
- return _tmpl$6();
220
+ return createComponent(GeoTag, {});
220
221
  }
221
222
  }), "Position"];
222
223
  }
223
224
  }), createComponent(SectionDescription, {
224
225
  children: "Adjust the position of the trigger button and devtools panel."
225
226
  }), (() => {
226
- var _el$1 = _tmpl$7(), _el$10 = _el$1.firstChild;
227
- insert(_el$10, createComponent(Select, {
227
+ var _el$7 = _tmpl$3(), _el$8 = _el$7.firstChild;
228
+ insert(_el$8, createComponent(Select, {
228
229
  label: "Trigger Position",
229
230
  options: [{
230
231
  label: "Bottom Right",
@@ -252,7 +253,7 @@ const SettingsTab = () => {
252
253
  position: value
253
254
  })
254
255
  }), null);
255
- insert(_el$10, createComponent(Select, {
256
+ insert(_el$8, createComponent(Select, {
256
257
  label: "Panel Position",
257
258
  get value() {
258
259
  return settings().panelLocation;
@@ -270,14 +271,14 @@ const SettingsTab = () => {
270
271
  }), null);
271
272
  effect((_p$) => {
272
273
  var _v$3 = styles().settingsGroup, _v$4 = styles().settingRow;
273
- _v$3 !== _p$.e && className(_el$1, _p$.e = _v$3);
274
- _v$4 !== _p$.t && className(_el$10, _p$.t = _v$4);
274
+ _v$3 !== _p$.e && className(_el$7, _p$.e = _v$3);
275
+ _v$4 !== _p$.t && className(_el$8, _p$.t = _v$4);
275
276
  return _p$;
276
277
  }, {
277
278
  e: void 0,
278
279
  t: void 0
279
280
  });
280
- return _el$1;
281
+ return _el$7;
281
282
  })()];
282
283
  }
283
284
  })];
package/dist/esm/tabs/settings-tab.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"settings-tab.js","sources":["../../../src/tabs/settings-tab.tsx"],"sourcesContent":["import { Show, createMemo } from 'solid-js'\nimport {\n Button,\n Checkbox,\n Input,\n MainPanel,\n Section,\n SectionDescription,\n SectionIcon,\n SectionTitle,\n Select,\n} from '@tanstack/devtools-ui'\nimport { useDevtoolsSettings } from '../context/use-devtools-context'\nimport { uppercaseFirstLetter } from '../utils/sanitize'\nimport { useStyles } from '../styles/use-styles'\nimport type { ModifierKey } from '@solid-primitives/keyboard'\n\nexport const SettingsTab = () => {\n const { setSettings, settings } = useDevtoolsSettings()\n const styles = useStyles()\n const hotkey = createMemo(() => settings().openHotkey)\n const modifiers: Array<ModifierKey> = ['Control', 'Alt', 'Meta', 'Shift']\n const changeHotkey = (newHotkey: ModifierKey) => () => {\n if (hotkey().includes(newHotkey)) {\n return setSettings({\n openHotkey: hotkey().filter((key) => key !== newHotkey),\n })\n }\n const existingModifiers = hotkey().filter((key) =>\n modifiers.includes(key as any),\n )\n const otherModifiers = hotkey().filter(\n (key) => !modifiers.includes(key as any),\n )\n setSettings({\n openHotkey: [...existingModifiers, newHotkey, ...otherModifiers],\n })\n }\n return (\n <MainPanel withPadding>\n {/* General Settings */}\n <Section>\n <SectionTitle>\n <SectionIcon>\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n width=\"20\"\n height=\"20\"\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=\"M9.671 4.136a2.34 2.34 0 0 1 4.659 0 2.34 2.34 0 0 0 3.319 1.915 2.34 2.34 0 0 1 2.33 4.033 2.34 2.34 0 0 0 0 3.831 2.34 2.34 0 0 1-2.33 4.033 2.34 2.34 0 0 0-3.319 1.915 2.34 2.34 0 0 1-4.659 0 2.34 2.34 0 0 0-3.32-1.915 2.34 2.34 0 0 1-2.33-4.033 2.34 2.34 0 0 0 0-3.831A2.34 2.34 0 0 1 6.35 6.051a2.34 2.34 0 0 0 3.319-1.915\" />\n <circle cx=\"12\" cy=\"12\" r=\"3\" />\n </svg>\n </SectionIcon>\n General\n </SectionTitle>\n <SectionDescription>\n Configure general behavior of the devtools panel.\n </SectionDescription>\n <div class={styles().settingsGroup}>\n <Checkbox\n label=\"Default open\"\n description=\"Automatically open the devtools panel when the page loads\"\n onChange={() =>\n setSettings({ defaultOpen: !settings().defaultOpen })\n }\n checked={settings().defaultOpen}\n />\n <Checkbox\n label=\"Hide trigger until hovered\"\n description=\"Keep the devtools trigger button hidden until you hover over its area\"\n onChange={() =>\n setSettings({ hideUntilHover: !settings().hideUntilHover })\n }\n checked={settings().hideUntilHover}\n />\n </div>\n </Section>\n\n {/* URL Flag Settings */}\n <Section>\n <SectionTitle>\n <SectionIcon>\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n width=\"20\"\n height=\"20\"\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=\"M9 17H7A5 5 0 0 1 7 7h2\" />\n <path d=\"M15 7h2a5 5 0 1 1 0 10h-2\" />\n <line x1=\"8\" x2=\"16\" y1=\"12\" y2=\"12\" />\n </svg>\n </SectionIcon>\n URL Configuration\n </SectionTitle>\n <SectionDescription>\n Control when devtools are available based on URL parameters.\n </SectionDescription>\n <div class={styles().settingsGroup}>\n <Checkbox\n label=\"Require URL Flag\"\n description=\"Only show devtools when a specific URL parameter is present\"\n checked={settings().requireUrlFlag}\n onChange={(checked) =>\n setSettings({\n requireUrlFlag: checked,\n })\n }\n />\n <Show when={settings().requireUrlFlag}>\n <div class={styles().conditionalSetting}>\n <Input\n label=\"URL flag\"\n description=\"Enter the URL parameter name (e.g., 'debug' for ?debug=true)\"\n placeholder=\"debug\"\n value={settings().urlFlag}\n onChange={(e) =>\n setSettings({\n urlFlag: e,\n })\n }\n />\n </div>\n </Show>\n </div>\n </Section>\n\n {/* Keyboard Settings */}\n <Section>\n <SectionTitle>\n <SectionIcon>\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n width=\"20\"\n height=\"20\"\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 8h.01\" />\n <path d=\"M12 12h.01\" />\n <path d=\"M14 8h.01\" />\n <path d=\"M16 12h.01\" />\n <path d=\"M18 8h.01\" />\n <path d=\"M6 8h.01\" />\n <path d=\"M7 16h10\" />\n <path d=\"M8 12h.01\" />\n <rect width=\"20\" height=\"16\" x=\"2\" y=\"4\" rx=\"2\" />\n </svg>\n </SectionIcon>\n Keyboard\n </SectionTitle>\n <SectionDescription>\n Customize keyboard shortcuts for quick access.\n </SectionDescription>\n <div class={styles().settingsGroup}>\n <div class={styles().settingsModifiers}>\n <Show keyed when={hotkey()}>\n <Button\n variant=\"success\"\n onclick={changeHotkey('Shift')}\n outline={!hotkey().includes('Shift')}\n >\n Shift\n </Button>\n <Button\n variant=\"success\"\n onclick={changeHotkey('Alt')}\n outline={!hotkey().includes('Alt')}\n >\n Alt\n </Button>\n <Button\n variant=\"success\"\n onclick={changeHotkey('Meta')}\n outline={!hotkey().includes('Meta')}\n >\n Meta\n </Button>\n <Button\n variant=\"success\"\n onclick={changeHotkey('Control')}\n outline={!hotkey().includes('Control')}\n >\n Control\n </Button>\n </Show>\n </div>\n <Input\n label=\"Hotkey to open/close devtools\"\n description=\"Use '+' to combine keys (e.g., 'a+b' or 'd'). This will be used with the enabled modifiers from above\"\n placeholder=\"a\"\n value={hotkey()\n .filter((key) => !['Shift', 'Meta', 'Alt', 'Ctrl'].includes(key))\n .join('+')}\n onChange={(e) => {\n const makeModifierArray = (key: string) => {\n if (key.length === 1) return [uppercaseFirstLetter(key)]\n const modifiers: Array<string> = []\n for (const character of key) {\n const newLetter = uppercaseFirstLetter(character)\n if (!modifiers.includes(newLetter)) modifiers.push(newLetter)\n }\n return modifiers\n }\n const modifiers = e\n .split('+')\n .flatMap((key) => makeModifierArray(key))\n .filter(Boolean)\n return setSettings({\n openHotkey: [\n ...hotkey().filter((key) =>\n ['Shift', 'Meta', 'Alt', 'Ctrl'].includes(key),\n ),\n ...modifiers,\n ],\n })\n }}\n />\n Final shortcut is: {hotkey().join(' + ')}\n </div>\n </Section>\n\n {/* Position Settings */}\n <Section>\n <SectionTitle>\n <SectionIcon>\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n width=\"20\"\n height=\"20\"\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=\"M20 10c0 4.993-5.539 10.193-7.399 11.799a1 1 0 0 1-1.202 0C9.539 20.193 4 14.993 4 10a8 8 0 0 1 16 0\" />\n <circle cx=\"12\" cy=\"10\" r=\"3\" />\n </svg>\n </SectionIcon>\n Position\n </SectionTitle>\n <SectionDescription>\n Adjust the position of the trigger button and devtools panel.\n </SectionDescription>\n <div class={styles().settingsGroup}>\n <div class={styles().settingRow}>\n <Select\n label=\"Trigger Position\"\n options={[\n { label: 'Bottom Right', value: 'bottom-right' },\n { label: 'Bottom Left', value: 'bottom-left' },\n { label: 'Top Right', value: 'top-right' },\n { label: 'Top Left', value: 'top-left' },\n { label: 'Middle Right', value: 'middle-right' },\n { label: 'Middle Left', value: 'middle-left' },\n ]}\n value={settings().position}\n onChange={(value) =>\n setSettings({\n position: value,\n })\n }\n />\n <Select\n label=\"Panel Position\"\n value={settings().panelLocation}\n options={[\n { label: 'Top', value: 'top' },\n { label: 'Bottom', value: 'bottom' },\n ]}\n onChange={(value) =>\n setSettings({\n panelLocation: value,\n })\n }\n />\n </div>\n </div>\n </Section>\n </MainPanel>\n )\n}\n"],"names":["SettingsTab","setSettings","settings","useDevtoolsSettings","styles","useStyles","hotkey","createMemo","openHotkey","modifiers","changeHotkey","newHotkey","includes","filter","key","existingModifiers","otherModifiers","_$createComponent","MainPanel","withPadding","children","Section","SectionTitle","SectionIcon","_tmpl$","SectionDescription","_el$2","_tmpl$2","_$insert","Checkbox","label","description","onChange","defaultOpen","checked","hideUntilHover","_$effect","_$className","settingsGroup","_tmpl$3","_el$4","requireUrlFlag","Show","when","_el$5","Input","placeholder","value","urlFlag","e","conditionalSetting","_tmpl$4","_el$7","_tmpl$5","_el$8","firstChild","_el$9","nextSibling","keyed","Button","variant","onclick","outline","join","makeModifierArray","length","uppercaseFirstLetter","character","newLetter","push","split","flatMap","Boolean","_p$","_v$","_v$2","settingsModifiers","t","undefined","_tmpl$6","_el$1","_tmpl$7","_el$10","Select","options","position","panelLocation","_v$3","_v$4","settingRow"],"mappings":"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"}
1
+ {"version":3,"file":"settings-tab.js","sources":["../../../src/tabs/settings-tab.tsx"],"sourcesContent":["import { Show, createMemo } from 'solid-js'\nimport {\n Button,\n Checkbox,\n Input,\n MainPanel,\n Section,\n SectionDescription,\n SectionIcon,\n SectionTitle,\n Select,\n} from '@tanstack/devtools-ui'\nimport {\n GeoTag,\n Keyboard,\n Link,\n SettingsCog,\n} from '@tanstack/devtools-ui/icons'\nimport { useDevtoolsSettings } from '../context/use-devtools-context'\nimport { uppercaseFirstLetter } from '../utils/sanitize'\nimport { useStyles } from '../styles/use-styles'\nimport type { ModifierKey } from '@solid-primitives/keyboard'\n\nexport const SettingsTab = () => {\n const { setSettings, settings } = useDevtoolsSettings()\n const styles = useStyles()\n const hotkey = createMemo(() => settings().openHotkey)\n const modifiers: Array<ModifierKey> = ['Control', 'Alt', 'Meta', 'Shift']\n const changeHotkey = (newHotkey: ModifierKey) => () => {\n if (hotkey().includes(newHotkey)) {\n return setSettings({\n openHotkey: hotkey().filter((key) => key !== newHotkey),\n })\n }\n const existingModifiers = hotkey().filter((key) =>\n modifiers.includes(key as any),\n )\n const otherModifiers = hotkey().filter(\n (key) => !modifiers.includes(key as any),\n )\n setSettings({\n openHotkey: [...existingModifiers, newHotkey, ...otherModifiers],\n })\n }\n return (\n <MainPanel withPadding>\n {/* General Settings */}\n <Section>\n <SectionTitle>\n <SectionIcon>\n <SettingsCog />\n </SectionIcon>\n General\n </SectionTitle>\n <SectionDescription>\n Configure general behavior of the devtools panel.\n </SectionDescription>\n <div class={styles().settingsGroup}>\n <Checkbox\n label=\"Default open\"\n description=\"Automatically open the devtools panel when the page loads\"\n onChange={() =>\n setSettings({ defaultOpen: !settings().defaultOpen })\n }\n checked={settings().defaultOpen}\n />\n <Checkbox\n label=\"Hide trigger until hovered\"\n description=\"Keep the devtools trigger button hidden until you hover over its area\"\n onChange={() =>\n setSettings({ hideUntilHover: !settings().hideUntilHover })\n }\n checked={settings().hideUntilHover}\n />\n </div>\n </Section>\n\n {/* URL Flag Settings */}\n <Section>\n <SectionTitle>\n <SectionIcon>\n <Link />\n </SectionIcon>\n URL Configuration\n </SectionTitle>\n <SectionDescription>\n Control when devtools are available based on URL parameters.\n </SectionDescription>\n <div class={styles().settingsGroup}>\n <Checkbox\n label=\"Require URL Flag\"\n description=\"Only show devtools when a specific URL parameter is present\"\n checked={settings().requireUrlFlag}\n onChange={(checked) =>\n setSettings({\n requireUrlFlag: checked,\n })\n }\n />\n <Show when={settings().requireUrlFlag}>\n <div class={styles().conditionalSetting}>\n <Input\n label=\"URL flag\"\n description=\"Enter the URL parameter name (e.g., 'debug' for ?debug=true)\"\n placeholder=\"debug\"\n value={settings().urlFlag}\n onChange={(e) =>\n setSettings({\n urlFlag: e,\n })\n }\n />\n </div>\n </Show>\n </div>\n </Section>\n\n {/* Keyboard Settings */}\n <Section>\n <SectionTitle>\n <SectionIcon>\n <Keyboard />\n </SectionIcon>\n Keyboard\n </SectionTitle>\n <SectionDescription>\n Customize keyboard shortcuts for quick access.\n </SectionDescription>\n <div class={styles().settingsGroup}>\n <div class={styles().settingsModifiers}>\n <Show keyed when={hotkey()}>\n <Button\n variant=\"success\"\n onclick={changeHotkey('Shift')}\n outline={!hotkey().includes('Shift')}\n >\n Shift\n </Button>\n <Button\n variant=\"success\"\n onclick={changeHotkey('Alt')}\n outline={!hotkey().includes('Alt')}\n >\n Alt\n </Button>\n <Button\n variant=\"success\"\n onclick={changeHotkey('Meta')}\n outline={!hotkey().includes('Meta')}\n >\n Meta\n </Button>\n <Button\n variant=\"success\"\n onclick={changeHotkey('Control')}\n outline={!hotkey().includes('Control')}\n >\n Control\n </Button>\n </Show>\n </div>\n <Input\n label=\"Hotkey to open/close devtools\"\n description=\"Use '+' to combine keys (e.g., 'a+b' or 'd'). This will be used with the enabled modifiers from above\"\n placeholder=\"a\"\n value={hotkey()\n .filter((key) => !['Shift', 'Meta', 'Alt', 'Ctrl'].includes(key))\n .join('+')}\n onChange={(e) => {\n const makeModifierArray = (key: string) => {\n if (key.length === 1) return [uppercaseFirstLetter(key)]\n const modifiers: Array<string> = []\n for (const character of key) {\n const newLetter = uppercaseFirstLetter(character)\n if (!modifiers.includes(newLetter)) modifiers.push(newLetter)\n }\n return modifiers\n }\n const modifiers = e\n .split('+')\n .flatMap((key) => makeModifierArray(key))\n .filter(Boolean)\n return setSettings({\n openHotkey: [\n ...hotkey().filter((key) =>\n ['Shift', 'Meta', 'Alt', 'Ctrl'].includes(key),\n ),\n ...modifiers,\n ],\n })\n }}\n />\n Final shortcut is: {hotkey().join(' + ')}\n </div>\n </Section>\n\n {/* Position Settings */}\n <Section>\n <SectionTitle>\n <SectionIcon>\n <GeoTag />\n </SectionIcon>\n Position\n </SectionTitle>\n <SectionDescription>\n Adjust the position of the trigger button and devtools panel.\n </SectionDescription>\n <div class={styles().settingsGroup}>\n <div class={styles().settingRow}>\n <Select\n label=\"Trigger Position\"\n options={[\n { label: 'Bottom Right', value: 'bottom-right' },\n { label: 'Bottom Left', value: 'bottom-left' },\n { label: 'Top Right', value: 'top-right' },\n { label: 'Top Left', value: 'top-left' },\n { label: 'Middle Right', value: 'middle-right' },\n { label: 'Middle Left', value: 'middle-left' },\n ]}\n value={settings().position}\n onChange={(value) =>\n setSettings({\n position: value,\n })\n }\n />\n <Select\n label=\"Panel Position\"\n value={settings().panelLocation}\n options={[\n { label: 'Top', value: 'top' },\n { label: 'Bottom', value: 'bottom' },\n ]}\n onChange={(value) =>\n setSettings({\n panelLocation: value,\n })\n }\n />\n </div>\n </div>\n </Section>\n </MainPanel>\n )\n}\n"],"names":["SettingsTab","setSettings","settings","useDevtoolsSettings","styles","useStyles","hotkey","createMemo","openHotkey","modifiers","changeHotkey","newHotkey","includes","filter","key","existingModifiers","otherModifiers","_$createComponent","MainPanel","withPadding","children","Section","SectionTitle","SectionIcon","SettingsCog","SectionDescription","_el$","_tmpl$","_$insert","Checkbox","label","description","onChange","defaultOpen","checked","hideUntilHover","_$effect","_$className","settingsGroup","Link","_el$2","requireUrlFlag","Show","when","_el$3","Input","placeholder","value","urlFlag","e","conditionalSetting","Keyboard","_el$4","_tmpl$2","_el$5","firstChild","_el$6","nextSibling","keyed","Button","variant","onclick","outline","join","makeModifierArray","length","uppercaseFirstLetter","character","newLetter","push","split","flatMap","Boolean","_p$","_v$","_v$2","settingsModifiers","t","undefined","GeoTag","_el$7","_tmpl$3","_el$8","Select","options","position","panelLocation","_v$3","_v$4","settingRow"],"mappings":"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"}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@tanstack/devtools",
3
- "version": "0.6.2",
3
+ "version": "0.6.3",
4
4
  "description": "TanStack Devtools is a set of tools for building advanced devtools for your application.",
5
5
  "author": "Tanner Linsley",
6
6
  "license": "MIT",
@@ -42,8 +42,8 @@
42
42
  "clsx": "^2.1.1",
43
43
  "goober": "^2.1.16",
44
44
  "solid-js": "^1.9.7",
45
- "@tanstack/devtools-event-bus": "0.3.1",
46
- "@tanstack/devtools-ui": "0.3.2"
45
+ "@tanstack/devtools-ui": "0.3.3",
46
+ "@tanstack/devtools-event-bus": "0.3.1"
47
47
  },
48
48
  "peerDependencies": {
49
49
  "solid-js": ">=1.9.7"
package/src/components/tabs.tsx CHANGED
@@ -1,5 +1,6 @@
1
1
  import clsx from 'clsx'
2
2
  import { For } from 'solid-js'
3
+ import { PiP, X } from '@tanstack/devtools-ui/icons'
3
4
  import { useStyles } from '../styles/use-styles'
4
5
  import { useDevtoolsState } from '../context/use-devtools-context'
5
6
  import { useDrawContext } from '../context/draw-context'
@@ -36,7 +37,7 @@ export const Tabs = (props: TabsProps) => {
36
37
  if (tab.id === 'plugins') hoverUtils.leave()
37
38
  }}
38
39
  >
39
- {tab.icon}
40
+ {tab.icon()}
40
41
  </button>
41
42
  )}
42
43
  </For>
@@ -51,44 +52,14 @@ export const Tabs = (props: TabsProps) => {
51
52
  class={clsx(styles().tab, 'detach')}
52
53
  onClick={handleDetachment}
53
54
  >
54
- <svg
55
- xmlns="http://www.w3.org/2000/svg"
56
- width="24"
57
- height="24"
58
- viewBox="0 0 24 24"
59
- fill="none"
60
- stroke="currentColor"
61
- stroke-width="2"
62
- stroke-linecap="round"
63
- stroke-linejoin="round"
64
- class="lucide lucide-picture-in-picture-icon lucide-picture-in-picture"
65
- >
66
- <path d="M2 10h6V4" />
67
- <path d="m2 4 6 6" />
68
- <path d="M21 10V7a2 2 0 0 0-2-2h-7" />
69
- <path d="M3 14v2a2 2 0 0 0 2 2h3" />
70
- <rect x="12" y="14" width="10" height="7" rx="1" />
71
- </svg>
55
+ <PiP />
72
56
  </button>
73
57
  <button
74
58
  type="button"
75
59
  class={clsx(styles().tab, 'close')}
76
60
  onClick={() => props.toggleOpen()}
77
61
  >
78
- <svg
79
- xmlns="http://www.w3.org/2000/svg"
80
- width="24"
81
- height="24"
82
- viewBox="0 0 24 24"
83
- fill="none"
84
- stroke="currentColor"
85
- stroke-width="2"
86
- stroke-linecap="round"
87
- stroke-linejoin="round"
88
- >
89
- <path d="M18 6 6 18" />
90
- <path d="m6 6 12 12" />
91
- </svg>
62
+ <X />
92
63
  </button>
93
64
  </div>
94
65
  )}
package/src/tabs/index.tsx CHANGED
@@ -1,3 +1,4 @@
1
+ import { Cogs, List, PageSearch } from '@tanstack/devtools-ui/icons'
1
2
  import { SettingsTab } from './settings-tab'
2
3
  import { PluginsTab } from './plugins-tab'
3
4
  import { SeoTab } from './seo-tab'
@@ -7,80 +8,19 @@ export const tabs = [
7
8
  name: 'Plugins',
8
9
  id: 'plugins',
9
10
  component: () => <PluginsTab />,
10
- icon: (
11
- <svg
12
- xmlns="http://www.w3.org/2000/svg"
13
- width="24"
14
- height="24"
15
- viewBox="0 0 24 24"
16
- fill="none"
17
- stroke="currentColor"
18
- stroke-width="2"
19
- stroke-linecap="round"
20
- stroke-linejoin="round"
21
- >
22
- <path d="M8 6h10" />
23
- <path d="M6 12h9" />
24
- <path d="M11 18h7" />
25
- </svg>
26
- ),
11
+ icon: () => <List />,
27
12
  },
28
13
  {
29
14
  name: 'SEO',
30
15
  id: 'seo',
31
16
  component: () => <SeoTab />,
32
- icon: (
33
- <svg
34
- xmlns="http://www.w3.org/2000/svg"
35
- width="24"
36
- height="24"
37
- viewBox="0 0 24 24"
38
- fill="none"
39
- stroke="currentColor"
40
- stroke-width="2"
41
- stroke-linecap="round"
42
- stroke-linejoin="round"
43
- class="lucide lucide-file-search2-icon lucide-file-search-2"
44
- >
45
- <path d="M15 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7Z" />
46
- <path d="M14 2v4a2 2 0 0 0 2 2h4" />
47
- <circle cx="11.5" cy="14.5" r="2.5" />
48
- <path d="M13.3 16.3 15 18" />
49
- </svg>
50
- ),
17
+ icon: () => <PageSearch />,
51
18
  },
52
19
  {
53
20
  name: 'Settings',
54
21
  id: 'settings',
55
22
  component: () => <SettingsTab />,
56
- icon: (
57
- <svg
58
- xmlns="http://www.w3.org/2000/svg"
59
- width="24"
60
- height="24"
61
- viewBox="0 0 24 24"
62
- fill="none"
63
- stroke="currentColor"
64
- stroke-width="2"
65
- stroke-linecap="round"
66
- stroke-linejoin="round"
67
- >
68
- <path d="M12 20a8 8 0 1 0 0-16 8 8 0 0 0 0 16Z" />
69
- <path d="M12 14a2 2 0 1 0 0-4 2 2 0 0 0 0 4Z" />
70
- <path d="M12 2v2" />
71
- <path d="M12 22v-2" />
72
- <path d="m17 20.66-1-1.73" />
73
- <path d="M11 10.27 7 3.34" />
74
- <path d="m20.66 17-1.73-1" />
75
- <path d="m3.34 7 1.73 1" />
76
- <path d="M14 12h8" />
77
- <path d="M2 12h2" />
78
- <path d="m20.66 7-1.73 1" />
79
- <path d="m3.34 17 1.73-1" />
80
- <path d="m17 3.34-1 1.73" />
81
- <path d="m11 13.73-4 6.93" />
82
- </svg>
83
- ),
23
+ icon: () => <Cogs />,
84
24
  },
85
25
  ] as const
86
26
 
package/src/tabs/seo-tab.tsx CHANGED
@@ -6,6 +6,7 @@ import {
6
6
  SectionIcon,
7
7
  SectionTitle,
8
8
  } from '@tanstack/devtools-ui'
9
+ import { SocialBubble } from '@tanstack/devtools-ui/icons'
9
10
  import { useStyles } from '../styles/use-styles'
10
11
  import { useHeadChanges } from '../hooks/use-head-changes'
11
12
 
@@ -185,21 +186,7 @@ export const SeoTab = () => {
185
186
  <Section>
186
187
  <SectionTitle>
187
188
  <SectionIcon>
188
- <svg
189
- xmlns="http://www.w3.org/2000/svg"
190
- width="20"
191
- height="20"
192
- viewBox="0 0 24 24"
193
- fill="none"
194
- stroke="currentColor"
195
- stroke-width="2"
196
- stroke-linecap="round"
197
- stroke-linejoin="round"
198
- >
199
- <path d="m10 9-3 3 3 3" />
200
- <path d="m14 15 3-3-3-3" />
201
- <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" />
202
- </svg>
189
+ <SocialBubble />
203
190
  </SectionIcon>
204
191
  Social previews
205
192
  </SectionTitle>
package/src/tabs/settings-tab.tsx CHANGED
@@ -10,6 +10,12 @@ import {
10
10
  SectionTitle,
11
11
  Select,
12
12
  } from '@tanstack/devtools-ui'
13
+ import {
14
+ GeoTag,
15
+ Keyboard,
16
+ Link,
17
+ SettingsCog,
18
+ } from '@tanstack/devtools-ui/icons'
13
19
  import { useDevtoolsSettings } from '../context/use-devtools-context'
14
20
  import { uppercaseFirstLetter } from '../utils/sanitize'
15
21
  import { useStyles } from '../styles/use-styles'
@@ -42,20 +48,7 @@ export const SettingsTab = () => {
42
48
  <Section>
43
49
  <SectionTitle>
44
50
  <SectionIcon>
45
- <svg
46
- xmlns="http://www.w3.org/2000/svg"
47
- width="20"
48
- height="20"
49
- viewBox="0 0 24 24"
50
- fill="none"
51
- stroke="currentColor"
52
- stroke-width="2"
53
- stroke-linecap="round"
54
- stroke-linejoin="round"
55
- >
56
- <path d="M9.671 4.136a2.34 2.34 0 0 1 4.659 0 2.34 2.34 0 0 0 3.319 1.915 2.34 2.34 0 0 1 2.33 4.033 2.34 2.34 0 0 0 0 3.831 2.34 2.34 0 0 1-2.33 4.033 2.34 2.34 0 0 0-3.319 1.915 2.34 2.34 0 0 1-4.659 0 2.34 2.34 0 0 0-3.32-1.915 2.34 2.34 0 0 1-2.33-4.033 2.34 2.34 0 0 0 0-3.831A2.34 2.34 0 0 1 6.35 6.051a2.34 2.34 0 0 0 3.319-1.915" />
57
- <circle cx="12" cy="12" r="3" />
58
- </svg>
51
+ <SettingsCog />
59
52
  </SectionIcon>
60
53
  General
61
54
  </SectionTitle>
@@ -86,21 +79,7 @@ export const SettingsTab = () => {
86
79
  <Section>
87
80
  <SectionTitle>
88
81
  <SectionIcon>
89
- <svg
90
- xmlns="http://www.w3.org/2000/svg"
91
- width="20"
92
- height="20"
93
- viewBox="0 0 24 24"
94
- fill="none"
95
- stroke="currentColor"
96
- stroke-width="2"
97
- stroke-linecap="round"
98
- stroke-linejoin="round"
99
- >
100
- <path d="M9 17H7A5 5 0 0 1 7 7h2" />
101
- <path d="M15 7h2a5 5 0 1 1 0 10h-2" />
102
- <line x1="8" x2="16" y1="12" y2="12" />
103
- </svg>
82
+ <Link />
104
83
  </SectionIcon>
105
84
  URL Configuration
106
85
  </SectionTitle>
@@ -140,27 +119,7 @@ export const SettingsTab = () => {
140
119
  <Section>
141
120
  <SectionTitle>
142
121
  <SectionIcon>
143
- <svg
144
- xmlns="http://www.w3.org/2000/svg"
145
- width="20"
146
- height="20"
147
- viewBox="0 0 24 24"
148
- fill="none"
149
- stroke="currentColor"
150
- stroke-width="2"
151
- stroke-linecap="round"
152
- stroke-linejoin="round"
153
- >
154
- <path d="M10 8h.01" />
155
- <path d="M12 12h.01" />
156
- <path d="M14 8h.01" />
157
- <path d="M16 12h.01" />
158
- <path d="M18 8h.01" />
159
- <path d="M6 8h.01" />
160
- <path d="M7 16h10" />
161
- <path d="M8 12h.01" />
162
- <rect width="20" height="16" x="2" y="4" rx="2" />
163
- </svg>
122
+ <Keyboard />
164
123
  </SectionIcon>
165
124
  Keyboard
166
125
  </SectionTitle>
@@ -239,20 +198,7 @@ export const SettingsTab = () => {
239
198
  <Section>
240
199
  <SectionTitle>
241
200
  <SectionIcon>
242
- <svg
243
- xmlns="http://www.w3.org/2000/svg"
244
- width="20"
245
- height="20"
246
- viewBox="0 0 24 24"
247
- fill="none"
248
- stroke="currentColor"
249
- stroke-width="2"
250
- stroke-linecap="round"
251
- stroke-linejoin="round"
252
- >
253
- <path d="M20 10c0 4.993-5.539 10.193-7.399 11.799a1 1 0 0 1-1.202 0C9.539 20.193 4 14.993 4 10a8 8 0 0 1 16 0" />
254
- <circle cx="12" cy="10" r="3" />
255
- </svg>
201
+ <GeoTag />
256
202
  </SectionIcon>
257
203
  Position
258
204
  </SectionTitle>