@deffector/agent 0.1.1 → 0.1.3

package/README.md

@@ -8,6 +8,18 @@ The panel is the deffector browser extension (Chrome, Edge, Firefox) or, outside
 npm install @deffector/agent
 ```
 
+## Requirements
+
+- **effector** 22.6+ (tested with 23.4.4 and 22.8.6)
+- **React** 16.8+ with effector-react 22+, **Vue** 3.3+ with effector-vue 23+, **Solid** 1.8+ with effector-solid 0.23+ — only for the framework you use
+- **Next.js** 13.4+ (App Router, `@effector/next`), tested with 15.5
+- **Browser** with the extension: Chrome or Edge 116+, Firefox 140+
+- **Node** 18+ for the standalone app; 22+ for the agent in a Node process (older: pass `WebSocket` from `ws`)
+- **TypeScript** 5.0+ with `moduleResolution` `"bundler"`, `"node16"` or `"nodenext"`
+- **Bundler** that reads the `exports` field (Vite, webpack 5, Next.js, esbuild, Rollup); Parcel 2 needs `"@parcel/resolver-default": { "packageExports": true }`
+
+Details: [Installation → Requirements](https://mxmvshnvsk.github.io/deffector/guide/installation#requirements).
+
 ## Use it
 
 Import the agent first, before any module that creates effector units:
@@ -21,7 +33,7 @@ Render the app through a provider deffector can switch (time travel and replay r
 
 ```tsx
 // React
-import { DeffectorProvider } from '@deffector/agent/react';
+import { DeffectorProvider } from '@deffector/agent/react'; // hooks from effector-react/scope: '@deffector/agent/react-scope'
 <DeffectorProvider value={scope} name="client">
   <App />
 </DeffectorProvider>;

package/dist/{chunk-RRJRDKTW.js → chunk-GAQI7G4H.js}

@@ -2031,7 +2031,13 @@ function describeDomNode(node) {
 }
 
 // ../protocol/src/encoding/encode.ts
-var DEFAULT_LIMITS = { maxDepth: 8, maxKeys: 100, maxItems: 100, maxString: 2e3 };
+var DEFAULT_LIMITS = {
+  maxDepth: 8,
+  maxKeys: 100,
+  maxItems: 100,
+  maxString: 2e3,
+  maxNodes: 2e3
+};
 var STACK_LINES = 6;
 function encodeString(text, maxString) {
   if (text.length <= maxString) return text;
@@ -2102,9 +2108,16 @@ var Encoder = class {
   constructor(options) {
     __publicField(this, "seen", /* @__PURE__ */ new WeakSet());
     __publicField(this, "options");
+    /** values that may still be encoded in full (`maxNodes`) */
+    __publicField(this, "budget");
     this.options = options;
+    this.budget = options.maxNodes;
+  }
+  get exhausted() {
+    return this.budget <= 0;
   }
   value(value, depth, path) {
+    this.budget -= 1;
     if (value === null) return null;
     if (typeof value === "object") return this.object(value, depth, path);
     return encodeScalar(value, this.options.maxString);
@@ -2113,7 +2126,7 @@ var Encoder = class {
     if (this.seen.has(object)) return tagged("cycle");
     const opaque = encodeOpaqueObject(object);
     if (opaque !== void 0) return opaque;
-    if (depth >= this.options.maxDepth) return describeTooDeep(object);
+    if (depth >= this.options.maxDepth || this.exhausted) return describeTooDeep(object);
     this.seen.add(object);
     try {
       if (Array.isArray(object)) return this.array(object, depth, path);
@@ -2127,14 +2140,16 @@ var Encoder = class {
   array(array, depth, path) {
     const items = [];
     const count = Math.min(array.length, this.options.maxItems);
-    for (let i = 0; i < count; i++) items.push(this.value(array[i], depth + 1, `${path}[${i}]`));
-    if (array.length > count) items.push(tagged("more", { n: array.length - count }));
+    for (let i = 0; i < count && !this.exhausted; i++) {
+      items.push(this.value(array[i], depth + 1, `${path}[${i}]`));
+    }
+    if (array.length > items.length) items.push(tagged("more", { n: array.length - items.length }));
     return items;
   }
   map(map, depth, path) {
     const entries = [];
     for (const [key, entryValue] of map) {
-      if (entries.length >= this.options.maxItems) break;
+      if (entries.length >= this.options.maxItems || this.exhausted) break;
       entries.push([
         this.value(key, depth + 1, `${path}.<key>`),
         this.value(entryValue, depth + 1, `${path}.${String(key)}`)
@@ -2145,7 +2160,7 @@ var Encoder = class {
   set(set, depth, path) {
     const values = [];
     for (const item of set) {
-      if (values.length >= this.options.maxItems) break;
+      if (values.length >= this.options.maxItems || this.exhausted) break;
       values.push(this.value(item, depth + 1, `${path}[]`));
     }
     return tagged("set", { values, size: set.size });
@@ -2154,11 +2169,14 @@ var Encoder = class {
     const fields = {};
     const keys = Object.keys(object);
     const count = Math.min(keys.length, this.options.maxKeys);
-    for (let i = 0; i < count; i++) {
-      const key = keys[i];
+    let encodedCount = 0;
+    for (; encodedCount < count && !this.exhausted; encodedCount++) {
+      const key = keys[encodedCount];
       fields[key] = this.field(object, key, depth, path ? `${path}.${key}` : key);
     }
-    if (keys.length > count) fields["\u2026"] = tagged("more", { n: keys.length - count });
+    if (keys.length > encodedCount) {
+      fields["\u2026"] = tagged("more", { n: keys.length - encodedCount });
+    }
     const className = describeClassName(object);
     if (className) return tagged("inst", { cls: className, v: fields });
     if ("$t" in fields) return tagged("obj", { v: fields });
@@ -2566,7 +2584,13 @@ var TraceUnits = class {
 };
 
 // src/trace/traceValues.ts
-var TRACE_ENCODING = { maxDepth: 8, maxKeys: 200, maxItems: 500, maxString: 2e4 };
+var TRACE_ENCODING = {
+  maxDepth: 8,
+  maxKeys: 200,
+  maxItems: 500,
+  maxString: 2e4,
+  maxNodes: 2e5
+};
 function isSensitiveName(name) {
   return maskByKey(name.replace(/^\$/, ""));
 }
@@ -3222,8 +3246,8 @@ var DevtoolsEdits = class {
 };
 
 // src/agent/encodeTransaction.ts
-var STEP_ENCODING = { maxDepth: 3, maxKeys: 12, maxItems: 12, maxString: 160 };
-var FULL_ENCODING = { maxDepth: 6, maxKeys: 80, maxItems: 80, maxString: 2e3 };
+var STEP_ENCODING = { maxDepth: 3, maxKeys: 12, maxItems: 12, maxString: 160, maxNodes: 60 };
+var FULL_ENCODING = { maxDepth: 6, maxKeys: 80, maxItems: 80, maxString: 2e3, maxNodes: 1500 };
 function noteText(note, texts2) {
   switch (note) {
     case "same":
@@ -3466,7 +3490,7 @@ var HealthMonitor = class {
 };
 
 // src/agent/options.ts
-var AGENT_VERSION = "0.1.0";
+var AGENT_VERSION = "0.1.3";
 var DEFAULT_MAX_TRANSACTIONS = 1e3;
 var DEFAULT_GRACE_MS = 1e4;
 
@@ -3606,6 +3630,7 @@ function describeModel(instance, name, isKnownUnit) {
 // src/agent/panelConnection.ts
 var UNITS_PER_MESSAGE = 2e3;
 var TRANSACTIONS_PER_MESSAGE = 200;
+var TRANSACTION_CHARS_PER_MESSAGE = 4 * 1024 * 1024;
 var MAX_UNSENT_TRANSACTIONS = 2e3;
 var FLUSH_DELAY_MS = 40;
 function requestIdOf(command) {
@@ -3618,6 +3643,23 @@ function chunks(items, size) {
   }
   return result;
 }
+function transactionBatches(txs, maxCount = TRANSACTIONS_PER_MESSAGE, maxChars = TRANSACTION_CHARS_PER_MESSAGE) {
+  const batches = [];
+  let batch = [];
+  let batchChars = 0;
+  for (const tx of txs) {
+    const chars = JSON.stringify(tx).length;
+    if (batch.length && (batch.length >= maxCount || batchChars + chars > maxChars)) {
+      batches.push(batch);
+      batch = [];
+      batchChars = 0;
+    }
+    batch.push(tx);
+    batchChars += chars;
+  }
+  if (batch.length) batches.push(batch);
+  return batches;
+}
 var PanelConnection = class {
   constructor(parts) {
     __publicField(this, "parts", parts);
@@ -3642,9 +3684,9 @@ var PanelConnection = class {
         this.sendTimeline();
       }
       if (this.unsentTransactions.length) {
-        const txs = this.unsentTransactions.map((transaction) => this.parts.encode(transaction));
+        const transactions = this.unsentTransactions;
         this.unsentTransactions = [];
-        this.send({ type: "txs", txs });
+        this.sendTransactions(transactions);
       }
       if (diagnostics.hasUnsentChanges) {
         diagnostics.hasUnsentChanges = false;
@@ -3700,6 +3742,10 @@ var PanelConnection = class {
     if (!this.isListening || this.flushTimer) return;
     this.flushTimer = setTimeout(this.flush, FLUSH_DELAY_MS);
   }
+  sendTransactions(transactions) {
+    const txs = transactions.map((transaction) => this.parts.encode(transaction));
+    for (const batch of transactionBatches(txs)) this.send({ type: "txs", txs: batch });
+  }
   sendUnits(units) {
     for (const chunk of chunks(units, UNITS_PER_MESSAGE))
       this.send({ type: "units", units: chunk });
@@ -3715,9 +3761,7 @@ var PanelConnection = class {
     this.sendUnits(units);
     scopes.hasUnsentChanges = false;
     this.send({ type: "scopes", scopes: scopes.list() });
-    const txs = history.transactions.map((transaction) => this.parts.encode(transaction));
-    for (const chunk of chunks(txs, TRANSACTIONS_PER_MESSAGE))
-      this.send({ type: "txs", txs: chunk });
+    this.sendTransactions(history.transactions);
     this.parts.refreshStaticDiagnostics();
     diagnostics.hasUnsentChanges = false;
     this.send({ type: "diagnostics", items: diagnostics.list() });

package/dist/chunk-N4XUKHSM.js

@@ -0,0 +1,23 @@
+import {
+  registerScope
+} from "./chunk-GAQI7G4H.js";
+
+// src/adapters/reactProvider.ts
+import { createElement, useEffect, useState } from "react";
+function createDeffectorProvider(Provider) {
+  function DeffectorProvider({ value, name = void 0, children = null }) {
+    const [scope, setScope] = useState(value);
+    const [appScope, setAppScope] = useState(value);
+    if (appScope !== value) {
+      setAppScope(value);
+      setScope(value);
+    }
+    useEffect(() => registerScope(value, { name, switcher: setScope }), [value, name]);
+    return createElement(Provider, { value: scope }, children);
+  }
+  return DeffectorProvider;
+}
+
+export {
+  createDeffectorProvider
+};

package/dist/chunk-QTLW5ZH3.js

@@ -0,0 +1,12 @@
+// src/adapters/reactNoopProvider.ts
+import { createElement } from "react";
+function createNoopProvider(Provider) {
+  function DeffectorProvider({ value, children = null }) {
+    return createElement(Provider, { value }, children);
+  }
+  return DeffectorProvider;
+}
+
+export {
+  createNoopProvider
+};

package/dist/index.js

@@ -5,7 +5,7 @@ import {
   getAgent,
   registerModel,
   registerScope
-} from "./chunk-RRJRDKTW.js";
+} from "./chunk-GAQI7G4H.js";
 import "./chunk-PKBMQBKP.js";
 export {
   Agent,

package/dist/node.js

@@ -4,7 +4,7 @@ import {
   getAgent,
   registerModel,
   registerScope
-} from "./chunk-RRJRDKTW.js";
+} from "./chunk-GAQI7G4H.js";
 import "./chunk-PKBMQBKP.js";
 
 // src/node.ts

package/dist/react-noop.d.ts

@@ -1,14 +1,11 @@
 import * as react from 'react';
-import { ReactNode } from 'react';
-import { Scope } from 'effector';
+import * as effector from 'effector';
+import { D as DeffectorProviderProps } from './reactTypes-DKgFbXjf.js';
 
-interface DeffectorProviderProps {
-    value: Scope;
-    /** accepted for the same API as the development build */
-    name?: string;
-    children?: ReactNode;
-}
 /** Production build: plain effector-react Provider. */
-declare function DeffectorProvider({ value, children }: DeffectorProviderProps): react.JSX.Element;
+declare const DeffectorProvider: ({ value, children }: DeffectorProviderProps) => react.ReactElement<{
+    value: effector.Scope;
+    children?: react.ReactNode;
+}, string | react.JSXElementConstructor<any>>;
 
-export { DeffectorProvider, DeffectorProvider as default };
+export { DeffectorProvider, DeffectorProviderProps, DeffectorProvider as default };

package/dist/react-noop.js

@@ -1,11 +1,11 @@
+import {
+  createNoopProvider
+} from "./chunk-QTLW5ZH3.js";
 import "./chunk-PKBMQBKP.js";
 
 // src/adapters/react-noop.tsx
 import { Provider } from "effector-react";
-import { jsx } from "react/jsx-runtime";
-function DeffectorProvider({ value, children = null }) {
-  return /* @__PURE__ */ jsx(Provider, { value, children });
-}
+var DeffectorProvider = createNoopProvider(Provider);
 var react_noop_default = DeffectorProvider;
 export {
   DeffectorProvider,

package/dist/react-scope-noop.d.ts

@@ -0,0 +1,11 @@
+import * as react from 'react';
+import * as effector from 'effector';
+import { D as DeffectorProviderProps } from './reactTypes-DKgFbXjf.js';
+
+/** Production build: plain `effector-react/scope` Provider. */
+declare const DeffectorProvider: ({ value, children }: DeffectorProviderProps) => react.ReactElement<{
+    value: effector.Scope;
+    children?: react.ReactNode;
+}, string | react.JSXElementConstructor<any>>;
+
+export { DeffectorProvider, DeffectorProviderProps, DeffectorProvider as default };

package/dist/react-scope-noop.js

@@ -0,0 +1,13 @@
+import {
+  createNoopProvider
+} from "./chunk-QTLW5ZH3.js";
+import "./chunk-PKBMQBKP.js";
+
+// src/adapters/react-scope-noop.ts
+import { Provider } from "effector-react/scope";
+var DeffectorProvider = createNoopProvider(Provider);
+var react_scope_noop_default = DeffectorProvider;
+export {
+  DeffectorProvider,
+  react_scope_noop_default as default
+};

package/dist/react-scope.d.ts

@@ -0,0 +1,10 @@
+import * as react from 'react';
+import * as effector from 'effector';
+import { D as DeffectorProviderProps } from './reactTypes-DKgFbXjf.js';
+
+declare const DeffectorProvider: ({ value, name, children }: DeffectorProviderProps) => react.ReactElement<{
+    value: effector.Scope;
+    children?: react.ReactNode;
+}, string | react.JSXElementConstructor<any>>;
+
+export { DeffectorProvider, DeffectorProviderProps, DeffectorProvider as default };

package/dist/react-scope.js

@@ -0,0 +1,14 @@
+import {
+  createDeffectorProvider
+} from "./chunk-N4XUKHSM.js";
+import "./chunk-GAQI7G4H.js";
+import "./chunk-PKBMQBKP.js";
+
+// src/adapters/react-scope.ts
+import { Provider } from "effector-react/scope";
+var DeffectorProvider = createDeffectorProvider(Provider);
+var react_scope_default = DeffectorProvider;
+export {
+  DeffectorProvider,
+  react_scope_default as default
+};

package/dist/react.d.ts

@@ -1,17 +1,11 @@
 import * as react from 'react';
-import { ReactNode } from 'react';
-import { Scope } from 'effector';
+import * as effector from 'effector';
+import { D as DeffectorProviderProps } from './reactTypes-DKgFbXjf.js';
 
-interface DeffectorProviderProps {
-    value: Scope;
-    name?: string;
-    children?: ReactNode;
-}
-/**
- * Drop-in replacement for effector-react's Provider.
- * deffector can render the app with another scope through it: a forked copy
- * of the past for time travel, or a fresh scope for replaying a trace.
- */
-declare function DeffectorProvider({ value, name, children, }: DeffectorProviderProps): react.JSX.Element;
+/** Drop-in replacement for effector-react's Provider (see reactProvider.ts). */
+declare const DeffectorProvider: ({ value, name, children }: DeffectorProviderProps) => react.ReactElement<{
+    value: effector.Scope;
+    children?: react.ReactNode;
+}, string | react.JSXElementConstructor<any>>;
 
-export { DeffectorProvider, DeffectorProvider as default };
+export { DeffectorProvider, DeffectorProviderProps, DeffectorProvider as default };

package/dist/react.js

@@ -1,26 +1,12 @@
 import {
-  registerScope
-} from "./chunk-RRJRDKTW.js";
+  createDeffectorProvider
+} from "./chunk-N4XUKHSM.js";
+import "./chunk-GAQI7G4H.js";
 import "./chunk-PKBMQBKP.js";
 
 // src/adapters/react.tsx
-import { useEffect, useState } from "react";
 import { Provider } from "effector-react";
-import { jsx } from "react/jsx-runtime";
-function DeffectorProvider({
-  value,
-  name = void 0,
-  children = null
-}) {
-  const [scope, setScope] = useState(value);
-  const [appScope, setAppScope] = useState(value);
-  if (appScope !== value) {
-    setAppScope(value);
-    setScope(value);
-  }
-  useEffect(() => registerScope(value, { name, switcher: setScope }), [value, name]);
-  return /* @__PURE__ */ jsx(Provider, { value: scope, children });
-}
+var DeffectorProvider = createDeffectorProvider(Provider);
 var react_default = DeffectorProvider;
 export {
   DeffectorProvider,

package/dist/reactTypes-DKgFbXjf.d.ts

@@ -0,0 +1,11 @@
+import { ReactNode } from 'react';
+import { Scope } from 'effector';
+
+interface DeffectorProviderProps {
+    value: Scope;
+    /** shown in the panel's scope selector */
+    name?: string;
+    children?: ReactNode;
+}
+
+export type { DeffectorProviderProps as D };

package/dist/vue.js

@@ -1,6 +1,6 @@
 import {
   registerScope
-} from "./chunk-RRJRDKTW.js";
+} from "./chunk-GAQI7G4H.js";
 import "./chunk-PKBMQBKP.js";
 
 // src/adapters/vue.ts

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@deffector/agent",
-  "version": "0.1.1",
+  "version": "0.1.3",
   "description": "DevTools for effector: every user action as one transaction, time travel, state injection, effect overrides and replayable traces. The agent that runs in your app.",
   "keywords": [
     "effector",
@@ -42,6 +42,12 @@
       "@deffector/source": "./src/adapters/react.tsx",
       "default": "./dist/react.js"
     },
+    "./react-scope": {
+      "types": "./dist/react-scope.d.ts",
+      "production": "./dist/react-scope-noop.js",
+      "@deffector/source": "./src/adapters/react-scope.ts",
+      "default": "./dist/react-scope.js"
+    },
     "./vue": {
       "types": "./dist/vue.d.ts",
       "production": "./dist/vue-noop.js",
@@ -74,10 +80,10 @@
   },
   "peerDependencies": {
     "effector": ">=22.6.0",
-    "effector-react": ">=23",
+    "effector-react": ">=22",
     "effector-solid": ">=0.23",
     "effector-vue": ">=23",
-    "react": ">=18",
+    "react": ">=16.8",
     "solid-js": ">=1.8",
     "vue": ">=3.3"
   },