@tanstack/devtools-utils - npm Package Compare versions

Comparing version 0.2.4 to 0.3.0

dist/vue/esm/index.d.ts

+export * from './panel.js';
+export * from './plugin.js';

dist/vue/esm/index.js

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

dist/vue/esm/index.js.map

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

dist/vue/esm/panel.d.ts

+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;
+}>];

dist/vue/esm/panel.js

+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

dist/vue/esm/panel.js.map

+{"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;"}

dist/vue/esm/plugin.d.ts

+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;
+}];

dist/vue/esm/plugin.js

+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

dist/vue/esm/plugin.js.map

+{"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.json

 {
   "name": "@tanstack/devtools-utils",
-  "version": "0.2.4",
+  "version": "0.3.0",
   "description": "TanStack Devtools utilities for creating your own devtools.",
@@ -50,2 +50,8 @@ "author": "Tanner Linsley",
     },
+    "./vue": {
+      "import": {
+        "types": "./dist/vue/esm/index.d.ts",
+        "default": "./dist/vue/esm/index.js"
+      }
+    },
     "./package.json": "./package.json"
@@ -101,4 +107,4 @@ },
     "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 "
   }
 }

No alert changes

Improved metrics

Total package byte prevSize

52645

14.32%

Number of package files

48

23.08%

Lines of code

1248

9.38%

No dependency changes