@tanstack/devtools-utils 0.2.4 → 0.3.1

package/dist/solid/esm/dev.js

@@ -1,8 +1,8 @@
-import { createComponent, template, insert, use } from 'solid-js/web';
+import { createComponent, insert, use, template } from 'solid-js/web';
 import { createSignal, onMount, onCleanup } from 'solid-js';
 
 // src/solid/class.tsx
-var _tmpl$ = /* @__PURE__ */ template(`<div>`);
+var _tmpl$ = /* @__PURE__ */ template(`<div style=height:100%>`);
 function constructCoreClass(Component) {
   class DevtoolsCore {
     #isMounted = false;
@@ -37,7 +37,6 @@ function constructCoreClass(Component) {
           mount: mountTo,
           get children() {
             var _el$ = _tmpl$();
-            _el$.style.setProperty("height", "100%");
             insert(_el$, createComponent(ThemeProvider, {
               theme,
               get children() {
@@ -82,7 +81,7 @@ function constructCoreClass(Component) {
   }
   return [DevtoolsCore, NoOpDevtoolsCore];
 }
-var _tmpl$2 = /* @__PURE__ */ template(`<div>`);
+var _tmpl$2 = /* @__PURE__ */ template(`<div style=height:100%>`);
 function createSolidPanel(CoreClass) {
   function Panel(props) {
     let devToolRef;
@@ -99,7 +98,6 @@ function createSolidPanel(CoreClass) {
       var _el$ = _tmpl$2();
       var _ref$ = devToolRef;
       typeof _ref$ === "function" ? use(_ref$, _el$) : devToolRef = _el$;
-      _el$.style.setProperty("height", "100%");
       return _el$;
     })();
   }

package/dist/solid/esm/index.js

@@ -1,8 +1,8 @@
-import { createComponent, template, insert, use } from 'solid-js/web';
+import { createComponent, insert, use, template } from 'solid-js/web';
 import { createSignal, onMount, onCleanup } from 'solid-js';
 
 // src/solid/class.tsx
-var _tmpl$ = /* @__PURE__ */ template(`<div>`);
+var _tmpl$ = /* @__PURE__ */ template(`<div style=height:100%>`);
 function constructCoreClass(Component) {
   class DevtoolsCore {
     #isMounted = false;
@@ -37,7 +37,6 @@ function constructCoreClass(Component) {
           mount: mountTo,
           get children() {
             var _el$ = _tmpl$();
-            _el$.style.setProperty("height", "100%");
             insert(_el$, createComponent(ThemeProvider, {
               theme,
               get children() {
@@ -82,7 +81,7 @@ function constructCoreClass(Component) {
   }
   return [DevtoolsCore, NoOpDevtoolsCore];
 }
-var _tmpl$2 = /* @__PURE__ */ template(`<div>`);
+var _tmpl$2 = /* @__PURE__ */ template(`<div style=height:100%>`);
 function createSolidPanel(CoreClass) {
   function Panel(props) {
     let devToolRef;
@@ -99,7 +98,6 @@ function createSolidPanel(CoreClass) {
       var _el$ = _tmpl$2();
       var _ref$ = devToolRef;
       typeof _ref$ === "function" ? use(_ref$, _el$) : devToolRef = _el$;
-      _el$.style.setProperty("height", "100%");
       return _el$;
     })();
   }

package/dist/solid/esm/server.js

@@ -1,4 +1,4 @@
-import { createComponent, ssr, escape } from 'solid-js/web';
+import { createComponent, ssr, ssrStyleProperty, escape } from 'solid-js/web';
 import { createSignal, onMount, onCleanup } from 'solid-js';
 
 // src/solid/class.tsx
@@ -36,7 +36,7 @@ function constructCoreClass(Component) {
         return createComponent(Portal, {
           mount: mountTo,
           get children() {
-            return ssr(_tmpl$, "height:100%", escape(createComponent(ThemeProvider, {
+            return ssr(_tmpl$, ssrStyleProperty("height:", "100%"), escape(createComponent(ThemeProvider, {
               theme,
               get children() {
                 return createComponent(Devtools, {});
@@ -88,7 +88,7 @@ function createSolidPanel(CoreClass) {
         devtools().unmount();
       });
     });
-    return ssr(_tmpl$2, "height:100%");
+    return ssr(_tmpl$2, ssrStyleProperty("height:", "100%"));
   }
   function NoOpPanel(_props) {
     return [];

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

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

package/dist/vue/esm/index.js

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

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

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

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

@@ -0,0 +1,14 @@
+import { DefineComponent } from 'vue';
+export interface DevtoolsPanelProps {
+    theme?: 'dark' | 'light' | 'system';
+}
+export declare function createVuePanel<TComponentProps extends DevtoolsPanelProps, TCoreDevtoolsClass extends {
+    mount: (el: HTMLElement, theme?: DevtoolsPanelProps['theme']) => void;
+    unmount: () => void;
+}>(CoreClass: new (props: TComponentProps) => TCoreDevtoolsClass): [DefineComponent<{
+    theme?: DevtoolsPanelProps["theme"];
+    devtoolsProps: TComponentProps;
+}>, DefineComponent<{
+    theme?: DevtoolsPanelProps["theme"];
+    devtoolsProps: TComponentProps;
+}>];

package/dist/vue/esm/panel.js

@@ -0,0 +1,47 @@
+import { defineComponent, ref, onMounted, onUnmounted, h } from "vue";
+function createVuePanel(CoreClass) {
+  const props = {
+    theme: {
+      type: String
+    },
+    devtoolsProps: {
+      type: Object
+    }
+  };
+  const Panel = defineComponent({
+    props,
+    setup(config) {
+      const devToolRef = ref(null);
+      const devtools = ref(null);
+      onMounted(() => {
+        const instance = new CoreClass(config.devtoolsProps);
+        devtools.value = instance;
+        if (devToolRef.value) {
+          instance.mount(devToolRef.value, config.theme);
+        }
+      });
+      onUnmounted(() => {
+        if (devToolRef.value && devtools.value) {
+          devtools.value.unmount();
+        }
+      });
+      return () => {
+        return h("div", {
+          style: { height: "100%" },
+          ref: devToolRef
+        });
+      };
+    }
+  });
+  const NoOpPanel = defineComponent({
+    props,
+    setup() {
+      return () => null;
+    }
+  });
+  return [Panel, NoOpPanel];
+}
+export {
+  createVuePanel
+};
+//# sourceMappingURL=panel.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"panel.js","sources":["../../../src/vue/panel.ts"],"sourcesContent":["import { defineComponent, h, onMounted, onUnmounted, ref } from 'vue'\nimport type { DefineComponent } from 'vue'\n\nexport interface DevtoolsPanelProps {\n  theme?: 'dark' | 'light' | 'system'\n}\n\nexport function createVuePanel<\n  TComponentProps extends DevtoolsPanelProps,\n  TCoreDevtoolsClass extends {\n    mount: (el: HTMLElement, theme?: DevtoolsPanelProps['theme']) => void\n    unmount: () => void\n  },\n>(CoreClass: new (props: TComponentProps) => TCoreDevtoolsClass) {\n  const props = {\n    theme: {\n      type: String as () => DevtoolsPanelProps['theme'],\n    },\n    devtoolsProps: {\n      type: Object as () => TComponentProps,\n    },\n  }\n\n  const Panel = defineComponent({\n    props,\n    setup(config) {\n      const devToolRef = ref<HTMLElement | null>(null)\n      const devtools = ref<TCoreDevtoolsClass | null>(null)\n\n      onMounted(() => {\n        const instance = new CoreClass(config.devtoolsProps as TComponentProps)\n        devtools.value = instance\n\n        if (devToolRef.value) {\n          instance.mount(devToolRef.value, config.theme)\n        }\n      })\n\n      onUnmounted(() => {\n        if (devToolRef.value && devtools.value) {\n          devtools.value.unmount()\n        }\n      })\n\n      return () => {\n        return h('div', {\n          style: { height: '100%' },\n          ref: devToolRef,\n        })\n      }\n    },\n  })\n\n  const NoOpPanel = defineComponent({\n    props,\n    setup() {\n      return () => null\n    },\n  })\n\n  return [Panel, NoOpPanel] as unknown as [\n    DefineComponent<{\n      theme?: DevtoolsPanelProps['theme']\n      devtoolsProps: TComponentProps\n    }>,\n    DefineComponent<{\n      theme?: DevtoolsPanelProps['theme']\n      devtoolsProps: TComponentProps\n    }>,\n  ]\n}\n"],"names":[],"mappings":";AAOO,SAAS,eAMd,WAA+D;AAC/D,QAAM,QAAQ;AAAA,IACZ,OAAO;AAAA,MACL,MAAM;AAAA,IAAA;AAAA,IAER,eAAe;AAAA,MACb,MAAM;AAAA,IAAA;AAAA,EACR;AAGF,QAAM,QAAQ,gBAAgB;AAAA,IAC5B;AAAA,IACA,MAAM,QAAQ;AACZ,YAAM,aAAa,IAAwB,IAAI;AAC/C,YAAM,WAAW,IAA+B,IAAI;AAEpD,gBAAU,MAAM;AACd,cAAM,WAAW,IAAI,UAAU,OAAO,aAAgC;AACtE,iBAAS,QAAQ;AAEjB,YAAI,WAAW,OAAO;AACpB,mBAAS,MAAM,WAAW,OAAO,OAAO,KAAK;AAAA,QAC/C;AAAA,MACF,CAAC;AAED,kBAAY,MAAM;AAChB,YAAI,WAAW,SAAS,SAAS,OAAO;AACtC,mBAAS,MAAM,QAAA;AAAA,QACjB;AAAA,MACF,CAAC;AAED,aAAO,MAAM;AACX,eAAO,EAAE,OAAO;AAAA,UACd,OAAO,EAAE,QAAQ,OAAA;AAAA,UACjB,KAAK;AAAA,QAAA,CACN;AAAA,MACH;AAAA,IACF;AAAA,EAAA,CACD;AAED,QAAM,YAAY,gBAAgB;AAAA,IAChC;AAAA,IACA,QAAQ;AACN,aAAO,MAAM;AAAA,IACf;AAAA,EAAA,CACD;AAED,SAAO,CAAC,OAAO,SAAS;AAU1B;"}

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

@@ -0,0 +1,15 @@
+import { DefineComponent } from 'vue';
+export declare function createVuePlugin<TComponentProps extends Record<string, any>>(name: string, component: DefineComponent<TComponentProps, {}, unknown>): readonly [(props: TComponentProps) => {
+    name: string;
+    component: DefineComponent<TComponentProps, {}, unknown>;
+    props: TComponentProps;
+}, (props: TComponentProps) => {
+    name: string;
+    component: {
+        new (): {
+            $props: import('vue').VNodeProps;
+        };
+        __isFragment: true;
+    };
+    props: TComponentProps;
+}];

package/dist/vue/esm/plugin.js

@@ -0,0 +1,22 @@
+import { Fragment } from "vue";
+function createVuePlugin(name, component) {
+  function Plugin(props) {
+    return {
+      name,
+      component,
+      props
+    };
+  }
+  function NoOpPlugin(props) {
+    return {
+      name,
+      component: Fragment,
+      props
+    };
+  }
+  return [Plugin, NoOpPlugin];
+}
+export {
+  createVuePlugin
+};
+//# sourceMappingURL=plugin.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"plugin.js","sources":["../../../src/vue/plugin.ts"],"sourcesContent":["import { Fragment } from 'vue'\nimport type { DefineComponent } from 'vue'\n\nexport function createVuePlugin<TComponentProps extends Record<string, any>>(\n  name: string,\n  component: DefineComponent<TComponentProps, {}, unknown>,\n) {\n  function Plugin(props: TComponentProps) {\n    return {\n      name,\n      component,\n      props,\n    }\n  }\n  function NoOpPlugin(props: TComponentProps) {\n    return {\n      name,\n      component: Fragment,\n      props,\n    }\n  }\n  return [Plugin, NoOpPlugin] as const\n}\n"],"names":[],"mappings":";AAGO,SAAS,gBACd,MACA,WACA;AACA,WAAS,OAAO,OAAwB;AACtC,WAAO;AAAA,MACL;AAAA,MACA;AAAA,MACA;AAAA,IAAA;AAAA,EAEJ;AACA,WAAS,WAAW,OAAwB;AAC1C,WAAO;AAAA,MACL;AAAA,MACA,WAAW;AAAA,MACX;AAAA,IAAA;AAAA,EAEJ;AACA,SAAO,CAAC,QAAQ,UAAU;AAC5B;"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tanstack/devtools-utils",
-  "version": "0.2.4",
+  "version": "0.3.1",
   "description": "TanStack Devtools utilities for creating your own devtools.",
   "author": "Tanner Linsley",
   "license": "MIT",
@@ -47,6 +47,12 @@
       "types": "./dist/solid/esm/index.d.ts",
       "import": "./dist/solid/esm/index.js"
     },
+    "./vue": {
+      "import": {
+        "types": "./dist/vue/esm/index.d.ts",
+        "default": "./dist/vue/esm/index.js"
+      }
+    },
     "./package.json": "./package.json"
   },
   "sideEffects": false,
@@ -54,7 +60,7 @@
     "node": ">=18"
   },
   "dependencies": {
-    "@tanstack/devtools-ui": "^0.4.4"
+    "@tanstack/devtools-ui": "^0.5.0"
   },
   "peerDependencies": {
     "@types/react": ">=17.0.0",
@@ -97,6 +103,6 @@
     "test:lib:dev": "pnpm test:lib --watch",
     "test:types": "tsc",
     "test:build": "publint --strict",
-    "build": "vite build && vite build --config vite.config.preact.ts && tsup "
+    "build": "vite build && vite build --config vite.config.preact.ts && vite build --config vite.config.vue.ts && tsup "
   }
 }