@vingy/vuebugger 0.3.3 → 0.4.0

package/README.md

@@ -5,8 +5,10 @@ Vue devtools provide an easy way to inspect component state. But when having som
 ## Features
 
 - Debug composables and reactive state easily
-- Tree-shakable with zero runtime overhead
+- Tree-shakable with zero runtime overhead in production
 - Simple API: just call `debug(name, state)`
+- Opt-in production mode via `__ENABLE_VUEBUGGER__`
+- Conditionally register state with `debug(name, state, { enable })`
 
 ## Quick start
 
@@ -24,6 +26,8 @@ createApp(App).use(Vuebugger)
 
 ## Usage
 
+### Basic usage
+
 `debug()` registers values from composables so they show up in Vue Devtools.
 
 ```ts
@@ -43,6 +47,36 @@ export const useFoo = (initial: number) => {
 }
 ```
 
+### Options
+
+`debug()` accepts an optional third argument:
+
+| Option   | Type                        | Default     | Description                                                                                                                      |
+| -------- | --------------------------- | ----------- | -------------------------------------------------------------------------------------------------------------------------------- |
+| `enable` | `MaybeRefOrGetter<boolean>` | `undefined` | Only register state when truthy. When reactive, the entry is added and removed from devtools automatically as the value changes. |
+
 See the demo app in [demo/](../../demo/).
 
-> **Note:** This plugin is tree-shakable and has zero runtime overhead when `debug()` calls are not used.
+## Production usage
+
+By default, Vuebugger is only active when `import.meta.env.DEV` is `true`, so it is automatically disabled and tree-shaken away in production builds with zero runtime overhead.
+
+If you need Vuebugger active in a production build (e.g. for staging environments or opt-in debugging), set `__ENABLE_VUEBUGGER__` in your `vite.config.ts`:
+
+```ts
+export default defineConfig({
+  define: {
+    __ENABLE_VUEBUGGER__: true,
+  },
+})
+```
+
+Setting it to `false` explicitly disables Vuebugger even in development:
+
+```ts
+define: {
+  __ENABLE_VUEBUGGER__: false,
+}
+```
+
+When `__ENABLE_VUEBUGGER__` is not defined at all, the original behaviour is preserved — active in dev, inactive in production.

package/dist/constants.d.ts

@@ -0,0 +1,2 @@
+export declare const INSPECTOR_ID = "vuebugger-inspector";
+export declare const TIMELINE_ID = "vuebugger-timeline";

package/dist/debug.d.ts

@@ -0,0 +1,8 @@
+import { MaybeRefOrGetter } from 'vue';
+import { VuebuggerEntry } from './types';
+export declare const setUidGenerator: (fn: () => string) => void;
+export type DebugOptions = {
+    enable?: MaybeRefOrGetter<boolean>;
+};
+export declare const moduleScopes: Map<string, import('vue').EffectScope>;
+export declare const debug: <T extends Record<string, any>>(groupId: VuebuggerEntry["groupId"], state: T, options?: DebugOptions) => T;

package/dist/devtools.d.ts

@@ -0,0 +1,7 @@
+import { App } from 'vue';
+import { DevtoolsApi, DevtoolsApiHandler } from './types';
+export declare const handleGetInspectorTree: DevtoolsApiHandler<'getInspectorTree'>;
+export declare const handleGetInspectorState: (api: DevtoolsApi) => DevtoolsApiHandler<"getInspectorState">;
+export declare const handleInspectComponent: DevtoolsApiHandler<'inspectComponent'>;
+export declare const handleEditInspectorState: DevtoolsApiHandler<'editInspectorState'>;
+export declare function setupComposableDevtools<T>(app: App<T>): void;

package/dist/index.d.ts

@@ -0,0 +1,4 @@
+import { plugin } from './plugin';
+export { debug, type DebugOptions } from './debug';
+export { plugin as DebugPlugin, plugin as Vuebugger };
+export default plugin;