trickle-observe 0.2.111 → 0.2.112

package/dist/vite-plugin.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/vite-plugin.test.js

@@ -0,0 +1,160 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+/**
+ * Unit tests for the Vite plugin transform (React component tracking).
+ *
+ * Run with: node --experimental-strip-types --test src/vite-plugin.test.ts
+ * Or after build: node --test dist/vite-plugin.test.js
+ */
+const node_test_1 = require("node:test");
+const strict_1 = __importDefault(require("node:assert/strict"));
+const vite_plugin_js_1 = require("../dist/vite-plugin.js");
+// Helper: transform code as if it came from a .tsx file
+function transformTsx(code) {
+    const plugin = (0, vite_plugin_js_1.tricklePlugin)({ debug: false, traceVars: false });
+    const result = plugin.transform(code, '/test/App.tsx');
+    return result ? result.code : null;
+}
+function transformTs(code) {
+    const plugin = (0, vite_plugin_js_1.tricklePlugin)({ debug: false, traceVars: false });
+    const result = plugin.transform(code, '/test/util.ts');
+    return result ? result.code : null;
+}
+// ── React file detection ─────────────────────────────────────────────────────
+(0, node_test_1.describe)('React file detection', () => {
+    (0, node_test_1.it)('tracks uppercase components in .tsx files', () => {
+        const code = `function UserCard(props) { return null; }`;
+        const out = transformTsx(code);
+        strict_1.default.ok(out, 'should transform');
+        strict_1.default.ok(out.includes('__trickle_rc'), 'should inject render tracker');
+    });
+    (0, node_test_1.it)('does not inject render tracker for .ts files', () => {
+        const code = `function UserCard(props) { return null; }`;
+        const out = transformTs(code);
+        // May still transform for function wrapping, but not for render tracking
+        if (out) {
+            strict_1.default.ok(!out.includes('__trickle_rc'), 'should NOT inject render tracker in .ts files');
+        }
+    });
+    (0, node_test_1.it)('does not track lowercase functions as components', () => {
+        const code = `function helper(x) { return x + 1; }`;
+        const out = transformTsx(code);
+        if (out) {
+            strict_1.default.ok(!out.includes('__trickle_rc'), 'lowercase function should not be tracked');
+        }
+    });
+});
+// ── Props capture: function declarations ─────────────────────────────────────
+(0, node_test_1.describe)('Props capture — function declarations', () => {
+    (0, node_test_1.it)('uses arguments[0] for simple param: function Component(props)', () => {
+        const code = `function MyComponent(props) { return null; }`;
+        const out = transformTsx(code);
+        strict_1.default.ok(out, 'should transform');
+        strict_1.default.ok(out.includes('arguments[0]'), 'should pass arguments[0] as props');
+    });
+    (0, node_test_1.it)('uses arguments[0] for destructured param: function Component({ name })', () => {
+        const code = `function UserCard({ name, age }) { return null; }`;
+        const out = transformTsx(code);
+        strict_1.default.ok(out, 'should transform');
+        strict_1.default.ok(out.includes('arguments[0]'), 'should pass arguments[0] for destructured params');
+    });
+    (0, node_test_1.it)('injects __trickle_rc call at start of function body', () => {
+        const code = `function MyComponent(props) {\n  const x = 1;\n  return null;\n}`;
+        const out = transformTsx(code);
+        strict_1.default.ok(out, 'should transform');
+        // __trickle_rc should appear before body statements
+        const rcIdx = out.indexOf('__trickle_rc');
+        const bodyIdx = out.indexOf('const x = 1');
+        strict_1.default.ok(rcIdx !== -1, '__trickle_rc should be present');
+        strict_1.default.ok(bodyIdx !== -1, 'body code should be present');
+        strict_1.default.ok(rcIdx < bodyIdx, '__trickle_rc should come before body statements');
+    });
+    (0, node_test_1.it)('includes correct component name and line in __trickle_rc call', () => {
+        const code = `function UserCard(props) { return null; }`;
+        const out = transformTsx(code);
+        strict_1.default.ok(out, 'should transform');
+        strict_1.default.ok(out.includes('"UserCard"'), 'should include component name');
+        strict_1.default.ok(out.includes('__trickle_rc("UserCard"'), 'should call with component name');
+    });
+});
+// ── Props capture: arrow function components ──────────────────────────────────
+(0, node_test_1.describe)('Props capture — arrow function components', () => {
+    (0, node_test_1.it)('uses single param name for simple arrow: const C = (props) => {}', () => {
+        const code = `const Dashboard = (props) => { return null; };`;
+        const out = transformTsx(code);
+        strict_1.default.ok(out, 'should transform');
+        strict_1.default.ok(out.includes('__trickle_rc'), 'should inject render tracker');
+        // props should be the param variable, not arguments[0]
+        strict_1.default.ok(out.includes('__trickle_rc("Dashboard"'), 'should use component name');
+        // should NOT use arguments[0] for arrow functions
+        const rcCall = out.match(/__trickle_rc\("Dashboard",[^)]+\)/);
+        strict_1.default.ok(rcCall, 'should have __trickle_rc call');
+        strict_1.default.ok(!rcCall[0].includes('arguments[0]'), 'arrow functions should not use arguments[0]');
+    });
+    (0, node_test_1.it)('reconstructs object for destructured arrow: const C = ({ a, b }) => {}', () => {
+        const code = `const Counter = ({ count, label }) => { return null; };`;
+        const out = transformTsx(code);
+        strict_1.default.ok(out, 'should transform');
+        strict_1.default.ok(out.includes('__trickle_rc'), 'should inject render tracker');
+        // Should reconstruct { count, label }
+        const rcCall = out.match(/__trickle_rc\("Counter",[^,]+,([^)]+)\)/);
+        if (rcCall) {
+            strict_1.default.ok(rcCall[1].includes('count') && rcCall[1].includes('label'), 'should reconstruct props object from destructured fields');
+        }
+    });
+    (0, node_test_1.it)('passes undefined for no-param arrow: const C = () => {}', () => {
+        const code = `const NoProps = () => { return null; };`;
+        const out = transformTsx(code);
+        if (out && out.includes('__trickle_rc')) {
+            strict_1.default.ok(out.includes('undefined'), 'should pass undefined for no-param component');
+        }
+    });
+});
+// ── render count tracking ─────────────────────────────────────────────────────
+(0, node_test_1.describe)('Render count tracking', () => {
+    (0, node_test_1.it)('includes react_render kind in emitted record code', () => {
+        const code = `function Card(props) { return null; }`;
+        const out = transformTsx(code);
+        strict_1.default.ok(out, 'should transform');
+        strict_1.default.ok(out.includes("'react_render'"), 'emitted record should have kind react_render');
+    });
+    (0, node_test_1.it)('includes props data in emitted record', () => {
+        const code = `function Card(props) { return null; }`;
+        const out = transformTsx(code);
+        strict_1.default.ok(out, 'should transform');
+        strict_1.default.ok(out.includes('rec.props'), 'should capture props onto the record');
+        strict_1.default.ok(out.includes('propKeys'), 'should include propKeys');
+    });
+    (0, node_test_1.it)('tracks multiple components in one file', () => {
+        const code = [
+            `function Header(props) { return null; }`,
+            `function Footer(props) { return null; }`,
+            `function helper(x) { return x; }`,
+        ].join('\n');
+        const out = transformTsx(code);
+        strict_1.default.ok(out, 'should transform');
+        strict_1.default.ok(out.includes('"Header"'), 'should track Header');
+        strict_1.default.ok(out.includes('"Footer"'), 'should track Footer');
+        // helper should not be tracked as a component
+        const rcCalls = out.match(/__trickle_rc\("helper"/g);
+        strict_1.default.ok(!rcCalls, 'lowercase helper should not be tracked');
+    });
+});
+// ── findFunctionBodyBrace — destructured params don't confuse brace finding ───
+(0, node_test_1.describe)('Correct function body brace detection', () => {
+    (0, node_test_1.it)('finds body brace even with destructured object params', () => {
+        const code = `function Form({ onSubmit, title }) {\n  const x = 1;\n  return null;\n}`;
+        const out = transformTsx(code);
+        strict_1.default.ok(out, 'should transform');
+        // __trickle_rc should be INSIDE the function body (before 'const x = 1')
+        const rcIdx = out.indexOf('__trickle_rc');
+        const bodyIdx = out.indexOf('const x = 1');
+        strict_1.default.ok(rcIdx < bodyIdx, 'render tracker must be inside the function body, before first statement');
+        // The wrap insertion should be AFTER the closing brace of the function
+        const wrapIdx = out.indexOf('__trickle_wrap');
+        strict_1.default.ok(wrapIdx > bodyIdx, 'function wrap should be after the function body');
+    });
+});

package/dist/wrap.js

@@ -94,6 +94,34 @@ function wrapFunction(fn, opts) {
     // Preserve function name and length
     Object.defineProperty(wrapper, 'name', { value: fn.name || opts.functionName, configurable: true });
     Object.defineProperty(wrapper, 'length', { value: fn.length, configurable: true });
+    // Copy all own properties from original function to wrapper.
+    // This is critical for Express apps (app.get, app.listen, etc.),
+    // class constructors with static methods, and other functions with properties.
+    for (const key of Object.getOwnPropertyNames(fn)) {
+        if (key === 'name' || key === 'length' || key === 'prototype' || key === 'caller' || key === 'arguments')
+            continue;
+        try {
+            const desc = Object.getOwnPropertyDescriptor(fn, key);
+            if (desc)
+                Object.defineProperty(wrapper, key, desc);
+        }
+        catch {
+            // Some properties may not be configurable
+        }
+    }
+    // Also copy symbol properties
+    for (const sym of Object.getOwnPropertySymbols(fn)) {
+        try {
+            const desc = Object.getOwnPropertyDescriptor(fn, sym);
+            if (desc)
+                Object.defineProperty(wrapper, sym, desc);
+        }
+        catch { }
+    }
+    // Copy prototype for constructor functions
+    if (fn.prototype && fn.prototype !== Object.prototype) {
+        wrapper.prototype = fn.prototype;
+    }
     // Mark as wrapped to prevent double-wrapping
     wrapper[TRICKLE_WRAPPED] = true;
     return wrapper;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "trickle-observe",
-  "version": "0.2.111",
+  "version": "0.2.112",
   "description": "Runtime type observability for JavaScript applications",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",

package/src/wrap.ts

@@ -102,6 +102,30 @@ export function wrapFunction<T extends (...args: any[]) => any>(fn: T, opts: Wra
   Object.defineProperty(wrapper, 'name', { value: fn.name || opts.functionName, configurable: true });
   Object.defineProperty(wrapper, 'length', { value: fn.length, configurable: true });
 
+  // Copy all own properties from original function to wrapper.
+  // This is critical for Express apps (app.get, app.listen, etc.),
+  // class constructors with static methods, and other functions with properties.
+  for (const key of Object.getOwnPropertyNames(fn)) {
+    if (key === 'name' || key === 'length' || key === 'prototype' || key === 'caller' || key === 'arguments') continue;
+    try {
+      const desc = Object.getOwnPropertyDescriptor(fn, key);
+      if (desc) Object.defineProperty(wrapper, key, desc);
+    } catch {
+      // Some properties may not be configurable
+    }
+  }
+  // Also copy symbol properties
+  for (const sym of Object.getOwnPropertySymbols(fn)) {
+    try {
+      const desc = Object.getOwnPropertyDescriptor(fn, sym);
+      if (desc) Object.defineProperty(wrapper, sym, desc);
+    } catch {}
+  }
+  // Copy prototype for constructor functions
+  if (fn.prototype && fn.prototype !== Object.prototype) {
+    wrapper.prototype = fn.prototype;
+  }
+
   // Mark as wrapped to prevent double-wrapping
   (wrapper as any)[TRICKLE_WRAPPED] = true;