trickle-observe 0.2.113 → 0.2.114

package/dist/vite-plugin.js

@@ -1726,8 +1726,12 @@ ingestUrl) {
     const catchInsertions = traceVars ? findCatchVars(source) : [];
     // Find function parameter names for tracing
     const funcParamInsertions = traceVars ? findFunctionParams(source, isReactFile) : [];
-    // Find JSX text expressions for tracing (React files only)
-    const jsxExprInsertions = (traceVars && isReactFile) ? findJsxExpressions(source) : [];
+    // Find JSX text expressions for tracing (React files only).
+    // Skip if JSX has already been compiled to _jsxDEV/jsx/jsxs calls (e.g. by Vite's React plugin).
+    // In that case, the `{` characters in the source are plain JS (function bodies, object literals)
+    // and findJsxExpressions would corrupt them by injecting __trickle_tv() calls.
+    const jsxAlreadyCompiled = /\b_?jsxDEV\b|\bjsxs?\s*\(/.test(source);
+    const jsxExprInsertions = (traceVars && isReactFile && !jsxAlreadyCompiled) ? findJsxExpressions(source) : [];
     if (funcInsertions.length === 0 && importInsertions.length === 0 && varInsertions.length === 0 && destructInsertions.length === 0 && reassignInsertions.length === 0 && forLoopInsertions.length === 0 && catchInsertions.length === 0 && funcParamInsertions.length === 0 && jsxExprInsertions.length === 0 && bodyInsertions.length === 0 && hookInsertions.length === 0 && stateInsertions.length === 0 && conciseBodyInsertions.length === 0)
         return source;
     // Fix line numbers: Vite transforms (TypeScript stripping) may change line numbers.

package/dist-esm/vite-plugin.js

@@ -1713,8 +1713,12 @@ ingestUrl) {
     const catchInsertions = traceVars ? findCatchVars(source) : [];
     // Find function parameter names for tracing
     const funcParamInsertions = traceVars ? findFunctionParams(source, isReactFile) : [];
-    // Find JSX text expressions for tracing (React files only)
-    const jsxExprInsertions = (traceVars && isReactFile) ? findJsxExpressions(source) : [];
+    // Find JSX text expressions for tracing (React files only).
+    // Skip if JSX has already been compiled to _jsxDEV/jsx/jsxs calls (e.g. by Vite's React plugin).
+    // In that case, the `{` characters in the source are plain JS (function bodies, object literals)
+    // and findJsxExpressions would corrupt them by injecting __trickle_tv() calls.
+    const jsxAlreadyCompiled = /\b_?jsxDEV\b|\bjsxs?\s*\(/.test(source);
+    const jsxExprInsertions = (traceVars && isReactFile && !jsxAlreadyCompiled) ? findJsxExpressions(source) : [];
     if (funcInsertions.length === 0 && importInsertions.length === 0 && varInsertions.length === 0 && destructInsertions.length === 0 && reassignInsertions.length === 0 && forLoopInsertions.length === 0 && catchInsertions.length === 0 && funcParamInsertions.length === 0 && jsxExprInsertions.length === 0 && bodyInsertions.length === 0 && hookInsertions.length === 0 && stateInsertions.length === 0 && conciseBodyInsertions.length === 0)
         return source;
     // Fix line numbers: Vite transforms (TypeScript stripping) may change line numbers.

package/package.json

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

package/src/vite-plugin.ts

@@ -1658,8 +1658,12 @@ export function transformEsmSource(
   // Find function parameter names for tracing
   const funcParamInsertions = traceVars ? findFunctionParams(source, isReactFile) : [];
 
-  // Find JSX text expressions for tracing (React files only)
-  const jsxExprInsertions = (traceVars && isReactFile) ? findJsxExpressions(source) : [];
+  // Find JSX text expressions for tracing (React files only).
+  // Skip if JSX has already been compiled to _jsxDEV/jsx/jsxs calls (e.g. by Vite's React plugin).
+  // In that case, the `{` characters in the source are plain JS (function bodies, object literals)
+  // and findJsxExpressions would corrupt them by injecting __trickle_tv() calls.
+  const jsxAlreadyCompiled = /\b_?jsxDEV\b|\bjsxs?\s*\(/.test(source);
+  const jsxExprInsertions = (traceVars && isReactFile && !jsxAlreadyCompiled) ? findJsxExpressions(source) : [];
 
   if (funcInsertions.length === 0 && importInsertions.length === 0 && varInsertions.length === 0 && destructInsertions.length === 0 && reassignInsertions.length === 0 && forLoopInsertions.length === 0 && catchInsertions.length === 0 && funcParamInsertions.length === 0 && jsxExprInsertions.length === 0 && bodyInsertions.length === 0 && hookInsertions.length === 0 && stateInsertions.length === 0 && conciseBodyInsertions.length === 0) return source;
 

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

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

package/dist/vite-plugin.test.js

@@ -1,160 +0,0 @@
-"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');
-    });
-});