@tanstack/devtools-utils 0.0.8 → 0.1.0

package/dist/preact/esm/index.d.ts

@@ -0,0 +1,2 @@
+export * from './panel.js';
+export * from './plugin.js';

package/dist/preact/esm/index.js

@@ -0,0 +1,7 @@
+import { createPreactPanel } from "./panel.js";
+import { createPreactPlugin } from "./plugin.js";
+export {
+  createPreactPanel,
+  createPreactPlugin
+};
+//# sourceMappingURL=index.js.map

package/dist/preact/esm/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;"}

package/dist/preact/esm/panel.d.ts

@@ -0,0 +1,25 @@
+/** @jsxImportSource preact */
+export interface DevtoolsPanelProps {
+    theme?: 'light' | 'dark';
+}
+/**
+ * Creates a Preact component that dynamically imports and mounts a devtools panel. SSR friendly.
+ * @param devtoolsPackageName The name of the devtools package to be imported, e.g., '@tanstack/devtools-preact'
+ * @param importName The name of the export to be imported from the devtools package (e.g., 'default' or 'DevtoolsCore')
+ * @returns A Preact component that mounts the devtools
+ * @example
+ * ```tsx
+ * // if the export is default
+ * const [PreactDevtoolsPanel, NoOpPreactDevtoolsPanel] = createPreactPanel('@tanstack/devtools-preact')
+ * ```
+ *
+ * @example
+ * ```tsx
+ * // if the export is named differently
+ * const [PreactDevtoolsPanel, NoOpPreactDevtoolsPanel] = createPreactPanel('@tanstack/devtools-preact', 'DevtoolsCore')
+ * ```
+ */
+export declare function createPreactPanel<TComponentProps extends DevtoolsPanelProps | undefined, TCoreDevtoolsClass extends {
+    mount: (el: HTMLElement, theme: 'light' | 'dark') => void;
+    unmount: () => void;
+}>(CoreClass: new () => TCoreDevtoolsClass): readonly [(props: TComponentProps) => import("preact").JSX.Element, (_props: TComponentProps) => import("preact").JSX.Element];

package/dist/preact/esm/panel.js

@@ -0,0 +1,29 @@
+import { jsx, Fragment } from "preact/jsx-runtime";
+import { useRef, useEffect } from "preact/hooks";
+function createPreactPanel(CoreClass) {
+  function Panel(props) {
+    const devToolRef = useRef(null);
+    const devtools = useRef(null);
+    useEffect(() => {
+      if (devtools.current) return;
+      devtools.current = new CoreClass();
+      if (devToolRef.current) {
+        devtools.current.mount(devToolRef.current, props?.theme ?? "dark");
+      }
+      return () => {
+        if (devToolRef.current) {
+          devtools.current?.unmount();
+        }
+      };
+    }, [props?.theme]);
+    return /* @__PURE__ */ jsx("div", { style: { height: "100%" }, ref: devToolRef });
+  }
+  function NoOpPanel(_props) {
+    return /* @__PURE__ */ jsx(Fragment, {});
+  }
+  return [Panel, NoOpPanel];
+}
+export {
+  createPreactPanel
+};
+//# sourceMappingURL=panel.js.map

package/dist/preact/esm/panel.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"panel.js","sources":["../../../src/preact/panel.tsx"],"sourcesContent":["/** @jsxImportSource preact */\n\nimport { useEffect, useRef } from 'preact/hooks'\n\nexport interface DevtoolsPanelProps {\n  theme?: 'light' | 'dark'\n}\n\n/**\n * Creates a Preact component that dynamically imports and mounts a devtools panel. SSR friendly.\n * @param devtoolsPackageName The name of the devtools package to be imported, e.g., '@tanstack/devtools-preact'\n * @param importName The name of the export to be imported from the devtools package (e.g., 'default' or 'DevtoolsCore')\n * @returns A Preact component that mounts the devtools\n * @example\n * ```tsx\n * // if the export is default\n * const [PreactDevtoolsPanel, NoOpPreactDevtoolsPanel] = createPreactPanel('@tanstack/devtools-preact')\n * ```\n *\n * @example\n * ```tsx\n * // if the export is named differently\n * const [PreactDevtoolsPanel, NoOpPreactDevtoolsPanel] = createPreactPanel('@tanstack/devtools-preact', 'DevtoolsCore')\n * ```\n */\nexport function createPreactPanel<\n  TComponentProps extends DevtoolsPanelProps | undefined,\n  TCoreDevtoolsClass extends {\n    mount: (el: HTMLElement, theme: 'light' | 'dark') => void\n    unmount: () => void\n  },\n>(CoreClass: new () => TCoreDevtoolsClass) {\n  function Panel(props: TComponentProps) {\n    const devToolRef = useRef<HTMLDivElement>(null)\n    const devtools = useRef<TCoreDevtoolsClass | null>(null)\n    useEffect(() => {\n      if (devtools.current) return\n\n      devtools.current = new CoreClass()\n\n      if (devToolRef.current) {\n        devtools.current.mount(devToolRef.current, props?.theme ?? 'dark')\n      }\n\n      return () => {\n        if (devToolRef.current) {\n          devtools.current?.unmount()\n        }\n      }\n    }, [props?.theme])\n\n    return <div style={{ height: '100%' }} ref={devToolRef} />\n  }\n\n  function NoOpPanel(_props: TComponentProps) {\n    return <></>\n  }\n  return [Panel, NoOpPanel] as const\n}\n"],"names":[],"mappings":";;AAyBO,SAAS,kBAMd,WAAyC;AACzC,WAAS,MAAM,OAAwB;AACrC,UAAM,aAAa,OAAuB,IAAI;AAC9C,UAAM,WAAW,OAAkC,IAAI;AACvD,cAAU,MAAM;AACd,UAAI,SAAS,QAAS;AAEtB,eAAS,UAAU,IAAI,UAAA;AAEvB,UAAI,WAAW,SAAS;AACtB,iBAAS,QAAQ,MAAM,WAAW,SAAS,OAAO,SAAS,MAAM;AAAA,MACnE;AAEA,aAAO,MAAM;AACX,YAAI,WAAW,SAAS;AACtB,mBAAS,SAAS,QAAA;AAAA,QACpB;AAAA,MACF;AAAA,IACF,GAAG,CAAC,OAAO,KAAK,CAAC;AAEjB,WAAO,oBAAC,SAAI,OAAO,EAAE,QAAQ,OAAA,GAAU,KAAK,YAAY;AAAA,EAC1D;AAEA,WAAS,UAAU,QAAyB;AAC1C,WAAO,oBAAA,UAAA,EAAE;AAAA,EACX;AACA,SAAO,CAAC,OAAO,SAAS;AAC1B;"}

package/dist/preact/esm/plugin.d.ts

@@ -0,0 +1,18 @@
+import { JSX } from 'preact';
+import { DevtoolsPanelProps } from './panel.js';
+export declare function createPreactPlugin({ Component, ...config }: {
+    name: string;
+    id?: string;
+    defaultOpen?: boolean;
+    Component: (props: DevtoolsPanelProps) => JSX.Element;
+}): readonly [() => {
+    render: (_el: HTMLElement, theme: "light" | "dark") => JSX.Element;
+    name: string;
+    id?: string;
+    defaultOpen?: boolean;
+}, () => {
+    render: (_el: HTMLElement, _theme: "light" | "dark") => JSX.Element;
+    name: string;
+    id?: string;
+    defaultOpen?: boolean;
+}];

package/dist/preact/esm/plugin.js

@@ -0,0 +1,23 @@
+import { jsx, Fragment } from "preact/jsx-runtime";
+function createPreactPlugin({
+  Component,
+  ...config
+}) {
+  function Plugin() {
+    return {
+      ...config,
+      render: (_el, theme) => /* @__PURE__ */ jsx(Component, { theme })
+    };
+  }
+  function NoOpPlugin() {
+    return {
+      ...config,
+      render: (_el, _theme) => /* @__PURE__ */ jsx(Fragment, {})
+    };
+  }
+  return [Plugin, NoOpPlugin];
+}
+export {
+  createPreactPlugin
+};
+//# sourceMappingURL=plugin.js.map

package/dist/preact/esm/plugin.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"plugin.js","sources":["../../../src/preact/plugin.tsx"],"sourcesContent":["/** @jsxImportSource preact */\n\nimport type { JSX } from 'preact'\nimport type { DevtoolsPanelProps } from './panel'\n\nexport function createPreactPlugin({\n  Component,\n  ...config\n}: {\n  name: string\n  id?: string\n  defaultOpen?: boolean\n  Component: (props: DevtoolsPanelProps) => JSX.Element\n}) {\n  function Plugin() {\n    return {\n      ...config,\n      render: (_el: HTMLElement, theme: 'light' | 'dark') => (\n        <Component theme={theme} />\n      ),\n    }\n  }\n  function NoOpPlugin() {\n    return {\n      ...config,\n      render: (_el: HTMLElement, _theme: 'light' | 'dark') => <></>,\n    }\n  }\n  return [Plugin, NoOpPlugin] as const\n}\n"],"names":[],"mappings":";AAKO,SAAS,mBAAmB;AAAA,EACjC;AAAA,EACA,GAAG;AACL,GAKG;AACD,WAAS,SAAS;AAChB,WAAO;AAAA,MACL,GAAG;AAAA,MACH,QAAQ,CAAC,KAAkB,UACzB,oBAAC,aAAU,MAAA,CAAc;AAAA,IAAA;AAAA,EAG/B;AACA,WAAS,aAAa;AACpB,WAAO;AAAA,MACL,GAAG;AAAA,MACH,QAAQ,CAAC,KAAkB,WAA6B,oBAAA,UAAA,CAAA,CAAE;AAAA,IAAA;AAAA,EAE9D;AACA,SAAO,CAAC,QAAQ,UAAU;AAC5B;"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tanstack/devtools-utils",
-  "version": "0.0.8",
+  "version": "0.1.0",
   "description": "TanStack Devtools utilities for creating your own devtools.",
   "author": "Tanner Linsley",
   "license": "MIT",
@@ -25,6 +25,12 @@
         "default": "./dist/react/esm/index.js"
       }
     },
+    "./preact": {
+      "import": {
+        "types": "./dist/preact/esm/index.d.ts",
+        "default": "./dist/preact/esm/index.js"
+      }
+    },
     "./solid": {
       "browser": {
         "development": {
@@ -51,16 +57,20 @@
     "@tanstack/devtools-ui": "^0.4.4"
   },
   "peerDependencies": {
-    "@types/react": ">=19.0.0",
-    "react": ">=19.0.0",
+    "@types/react": ">=17.0.0",
+    "preact": ">=10.0.0",
+    "react": ">=17.0.0",
     "solid-js": ">=1.9.7",
     "vue": ">=3.2.0"
   },
   "peerDependenciesMeta": {
-    "react": {
+    "@types/react": {
       "optional": true
     },
-    "@types/react": {
+    "preact": {
+      "optional": true
+    },
+    "react": {
       "optional": true
     },
     "solid-js": {
@@ -87,6 +97,6 @@
     "test:lib:dev": "pnpm test:lib --watch",
     "test:types": "tsc",
     "test:build": "publint --strict",
-    "build": "vite build && tsup "
+    "build": "vite build && vite build --config vite.config.preact.ts && tsup "
   }
 }

package/src/preact/index.ts

@@ -0,0 +1,2 @@
+export * from './panel'
+export * from './plugin'

package/src/preact/panel.tsx

@@ -0,0 +1,59 @@
+/** @jsxImportSource preact */
+
+import { useEffect, useRef } from 'preact/hooks'
+
+export interface DevtoolsPanelProps {
+  theme?: 'light' | 'dark'
+}
+
+/**
+ * Creates a Preact component that dynamically imports and mounts a devtools panel. SSR friendly.
+ * @param devtoolsPackageName The name of the devtools package to be imported, e.g., '@tanstack/devtools-preact'
+ * @param importName The name of the export to be imported from the devtools package (e.g., 'default' or 'DevtoolsCore')
+ * @returns A Preact component that mounts the devtools
+ * @example
+ * ```tsx
+ * // if the export is default
+ * const [PreactDevtoolsPanel, NoOpPreactDevtoolsPanel] = createPreactPanel('@tanstack/devtools-preact')
+ * ```
+ *
+ * @example
+ * ```tsx
+ * // if the export is named differently
+ * const [PreactDevtoolsPanel, NoOpPreactDevtoolsPanel] = createPreactPanel('@tanstack/devtools-preact', 'DevtoolsCore')
+ * ```
+ */
+export function createPreactPanel<
+  TComponentProps extends DevtoolsPanelProps | undefined,
+  TCoreDevtoolsClass extends {
+    mount: (el: HTMLElement, theme: 'light' | 'dark') => void
+    unmount: () => void
+  },
+>(CoreClass: new () => TCoreDevtoolsClass) {
+  function Panel(props: TComponentProps) {
+    const devToolRef = useRef<HTMLDivElement>(null)
+    const devtools = useRef<TCoreDevtoolsClass | null>(null)
+    useEffect(() => {
+      if (devtools.current) return
+
+      devtools.current = new CoreClass()
+
+      if (devToolRef.current) {
+        devtools.current.mount(devToolRef.current, props?.theme ?? 'dark')
+      }
+
+      return () => {
+        if (devToolRef.current) {
+          devtools.current?.unmount()
+        }
+      }
+    }, [props?.theme])
+
+    return <div style={{ height: '100%' }} ref={devToolRef} />
+  }
+
+  function NoOpPanel(_props: TComponentProps) {
+    return <></>
+  }
+  return [Panel, NoOpPanel] as const
+}

package/src/preact/plugin.tsx

@@ -0,0 +1,30 @@
+/** @jsxImportSource preact */
+
+import type { JSX } from 'preact'
+import type { DevtoolsPanelProps } from './panel'
+
+export function createPreactPlugin({
+  Component,
+  ...config
+}: {
+  name: string
+  id?: string
+  defaultOpen?: boolean
+  Component: (props: DevtoolsPanelProps) => JSX.Element
+}) {
+  function Plugin() {
+    return {
+      ...config,
+      render: (_el: HTMLElement, theme: 'light' | 'dark') => (
+        <Component theme={theme} />
+      ),
+    }
+  }
+  function NoOpPlugin() {
+    return {
+      ...config,
+      render: (_el: HTMLElement, _theme: 'light' | 'dark') => <></>,
+    }
+  }
+  return [Plugin, NoOpPlugin] as const
+}