trickle-observe 0.2.64 → 0.2.65

package/dist/vite-plugin.js

@@ -193,6 +193,32 @@ function findClosingBrace(source, openBrace) {
     }
     return -1;
 }
+/**
+ * Find the matching closing paren for an opening paren at openParen.
+ * JSX-safe version: counts `(` and `)` depth, handles JSX curly expressions,
+ * but does NOT treat `'` as a string delimiter (apostrophes in JSX text content
+ * like `I'm` would incorrectly consume parens). Double-quoted strings inside
+ * JSX attr values typically contain balanced parens so can be ignored safely.
+ */
+function findMatchingParen(source, openParen) {
+    let depth = 1;
+    let pos = openParen + 1;
+    while (pos < source.length && depth > 0) {
+        const ch = source[pos];
+        if (ch === '(') {
+            depth++;
+        }
+        else if (ch === ')') {
+            depth--;
+            if (depth === 0)
+                return pos;
+        }
+        // Skip JSX expression blocks {expr} — not parens but skip curly content to avoid
+        // false paren matches inside template expressions
+        pos++;
+    }
+    return -1;
+}
 /**
  * Find variable declarations in source and return insertions for tracing.
  * Handles: const x = ...; let x = ...; var x = ...;
@@ -540,12 +566,14 @@ function transformEsmSource(source, filename, moduleName, backendUrl, debug, tra
     }
     // Also match arrow functions assigned to const/let/var
     // Handles: const X = () => {}, const X: React.FC = () => {}, const X: React.FC<Props> = ({ a }) => {}
-    const arrowRegex = /^[ \t]*(?:export\s+)?(?:const|let|var)\s+([a-zA-Z_$][a-zA-Z0-9_$]*)(?:\s*:\s*[^=]+?)?\s*=\s*(?:async\s+)?(?:\([^)]*\)|[a-zA-Z_$][a-zA-Z0-9_$]*)\s*(?::\s*[^=]+?)?\s*=>\s*\{/gm;
+    // Also handles concise bodies: const X = (props) => (<div/>)
+    const arrowRegex = /^[ \t]*(?:export\s+)?(?:const|let|var)\s+([a-zA-Z_$][a-zA-Z0-9_$]*)(?:\s*:\s*[^=]+?)?\s*=\s*(?:async\s+)?(?:\([^)]*\)|[a-zA-Z_$][a-zA-Z0-9_$]*)\s*(?::\s*[^=]+?)?\s*=>\s*(?:\{|\()/gm;
+    // Concise body insertions: for `=> (expr)`, wrap with block body for render tracking
+    const conciseBodyInsertions = [];
     while ((match = arrowRegex.exec(source)) !== null) {
         const name = match[1];
-        const openBrace = source.indexOf('{', match.index + match[0].length - 1);
-        if (openBrace === -1)
-            continue;
+        const bodyStartPos = match.index + match[0].length - 1;
+        const isConcise = source[bodyStartPos] === '(';
         const arrowStr = match[0];
         const arrowParamMatch = arrowStr.match(/=\s*(?:async\s+)?(?:\(([^)]*)\)|([a-zA-Z_$][a-zA-Z0-9_$]*))\s*(?::\s*[^=]+?)?\s*=>/);
         let paramNames = [];
@@ -560,58 +588,69 @@ function transformEsmSource(source, filename, moduleName, backendUrl, debug, tra
                 }).filter(Boolean);
             }
         }
-        const closeBrace = findClosingBrace(source, openBrace);
-        if (closeBrace === -1)
-            continue;
-        funcInsertions.push({ position: closeBrace + 1, name, paramNames });
-        // React component render tracking: uppercase arrow function in .tsx/.jsx
-        if (isReactFile && /^[A-Z]/.test(name)) {
-            let lineNo = 1;
-            for (let i = 0; i < match.index; i++) {
-                if (source[i] === '\n')
-                    lineNo++;
-            }
-            // Determine props expression for arrow functions (no `arguments` object)
-            let propsExpr = 'undefined';
-            if (arrowParamMatch) {
-                const rawParams = (arrowParamMatch[1] || '').trim();
-                if (!rawParams) {
-                    // No params: `() => {}`
-                    propsExpr = 'undefined';
-                }
-                else if (rawParams.startsWith('{')) {
-                    // Destructured: ({ name, age }) => {} — reconstruct object from field names
-                    // Strip TS type annotation (e.g. `{a, b}: Props` → `{a, b}`)
-                    // Find the matching `}` to isolate just the destructuring pattern
-                    let depth2 = 0;
-                    let endBrace = -1;
-                    for (let i = 0; i < rawParams.length; i++) {
-                        if (rawParams[i] === '{')
-                            depth2++;
-                        else if (rawParams[i] === '}') {
-                            depth2--;
-                            if (depth2 === 0) {
-                                endBrace = i;
-                                break;
-                            }
+        // Helper to build propsExpr from arrowParamMatch
+        const buildPropsExpr = () => {
+            if (!arrowParamMatch)
+                return 'undefined';
+            const rawParams = (arrowParamMatch[1] || '').trim();
+            if (!rawParams)
+                return 'undefined';
+            if (rawParams.startsWith('{')) {
+                let depth2 = 0, endBrace = -1;
+                for (let i = 0; i < rawParams.length; i++) {
+                    if (rawParams[i] === '{')
+                        depth2++;
+                    else if (rawParams[i] === '}') {
+                        depth2--;
+                        if (depth2 === 0) {
+                            endBrace = i;
+                            break;
                         }
                     }
-                    const destructPattern = endBrace !== -1 ? rawParams.slice(0, endBrace + 1) : rawParams;
-                    const fields = extractDestructuredNames(destructPattern);
-                    if (fields.length > 0) {
-                        propsExpr = `{ ${fields.join(', ')} }`;
-                    }
                 }
-                else if (arrowParamMatch[2]) {
-                    // Single simple param (no parens): `props => {}`
-                    propsExpr = arrowParamMatch[2];
+                const destructPattern = endBrace !== -1 ? rawParams.slice(0, endBrace + 1) : rawParams;
+                const fields = extractDestructuredNames(destructPattern);
+                return fields.length > 0 ? `{ ${fields.join(', ')} }` : 'undefined';
+            }
+            else if (arrowParamMatch[2]) {
+                return arrowParamMatch[2];
+            }
+            else if (paramNames.length === 1) {
+                return paramNames[0];
+            }
+            return 'undefined';
+        };
+        if (isConcise) {
+            // Concise body: `const X = (props) => (<div/>)` — no block body
+            // Only add render tracking for React components (uppercase names in .tsx/.jsx)
+            if (isReactFile && /^[A-Z]/.test(name)) {
+                const closeParen = findMatchingParen(source, bodyStartPos);
+                if (closeParen === -1)
+                    continue;
+                let lineNo = 1;
+                for (let i = 0; i < match.index; i++) {
+                    if (source[i] === '\n')
+                        lineNo++;
                 }
-                else if (paramNames.length === 1) {
-                    // Single simple param: `(props) => {}`
-                    propsExpr = paramNames[0];
+                conciseBodyInsertions.push({ beforeParen: bodyStartPos, afterCloseParen: closeParen + 1, name, lineNo, propsExpr: buildPropsExpr() });
+            }
+        }
+        else {
+            // Block body: `const X = (props) => { ... }`
+            const openBrace = bodyStartPos;
+            const closeBrace = findClosingBrace(source, openBrace);
+            if (closeBrace === -1)
+                continue;
+            funcInsertions.push({ position: closeBrace + 1, name, paramNames });
+            // React component render tracking: uppercase arrow function in .tsx/.jsx
+            if (isReactFile && /^[A-Z]/.test(name)) {
+                let lineNo = 1;
+                for (let i = 0; i < match.index; i++) {
+                    if (source[i] === '\n')
+                        lineNo++;
                 }
+                bodyInsertions.push({ position: openBrace + 1, name, lineNo, propsExpr: buildPropsExpr() });
             }
-            bodyInsertions.push({ position: openBrace + 1, name, lineNo, propsExpr });
         }
     }
     // Match React.memo() and React.forwardRef() wrapped components
@@ -824,7 +863,7 @@ function transformEsmSource(source, filename, moduleName, backendUrl, debug, tra
     const varInsertions = traceVars ? findVarDeclarations(source) : [];
     // Find destructured variable declarations for tracing
     const destructInsertions = traceVars ? findDestructuredDeclarations(source) : [];
-    if (funcInsertions.length === 0 && varInsertions.length === 0 && destructInsertions.length === 0 && bodyInsertions.length === 0 && hookInsertions.length === 0 && stateInsertions.length === 0)
+    if (funcInsertions.length === 0 && varInsertions.length === 0 && destructInsertions.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.
     // Map transformed line numbers to original source line numbers.
@@ -849,7 +888,7 @@ function transformEsmSource(source, filename, moduleName, backendUrl, debug, tra
     const importLines = [
         `import { wrapFunction as __trickle_wrapFn, configure as __trickle_configure } from 'trickle-observe';`,
     ];
-    if (varInsertions.length > 0 || destructInsertions.length > 0 || bodyInsertions.length > 0 || hookInsertions.length > 0 || stateInsertions.length > 0) {
+    if (varInsertions.length > 0 || destructInsertions.length > 0 || bodyInsertions.length > 0 || hookInsertions.length > 0 || stateInsertions.length > 0 || conciseBodyInsertions.length > 0) {
         importLines.push(`import { mkdirSync as __trickle_mkdirSync, appendFileSync as __trickle_appendFileSync } from 'node:fs';`, `import { join as __trickle_join } from 'node:path';`);
     }
     const prefixLines = [
@@ -877,7 +916,7 @@ function transformEsmSource(source, filename, moduleName, backendUrl, debug, tra
         prefixLines.push(`if (!globalThis.__trickle_var_tracer) {`, `  const _cache = new Set();`, `  let _varsFile = null;`, `  function _inferType(v, d) {`, `    if (d <= 0) return { kind: 'primitive', name: 'unknown' };`, `    if (v === null) return { kind: 'primitive', name: 'null' };`, `    if (v === undefined) return { kind: 'primitive', name: 'undefined' };`, `    const t = typeof v;`, `    if (t === 'string' || t === 'number' || t === 'boolean' || t === 'bigint' || t === 'symbol') return { kind: 'primitive', name: t };`, `    if (t === 'function') return { kind: 'function' };`, `    if (Array.isArray(v)) { return v.length === 0 ? { kind: 'array', element: { kind: 'primitive', name: 'unknown' } } : { kind: 'array', element: _inferType(v[0], d-1) }; }`, `    if (t === 'object') {`, `      if (v instanceof Date) return { kind: 'object', properties: { __date: { kind: 'primitive', name: 'string' } } };`, `      if (v instanceof RegExp) return { kind: 'object', properties: { __regexp: { kind: 'primitive', name: 'string' } } };`, `      if (v instanceof Error) return { kind: 'object', properties: { __error: { kind: 'primitive', name: 'string' } } };`, `      if (v instanceof Promise) return { kind: 'promise', resolved: { kind: 'primitive', name: 'unknown' } };`, `      const props = {}; const keys = Object.keys(v).slice(0, 20);`, `      for (const k of keys) { try { props[k] = _inferType(v[k], d-1); } catch(e) { props[k] = { kind: 'primitive', name: 'unknown' }; } }`, `      return { kind: 'object', properties: props };`, `    }`, `    return { kind: 'primitive', name: 'unknown' };`, `  }`, `  function _sanitize(v, d) {`, `    if (d <= 0) return '[truncated]'; if (v === null || v === undefined) return v; const t = typeof v;`, `    if (t === 'string') return v.length > 100 ? v.substring(0, 100) + '...' : v;`, `    if (t === 'number' || t === 'boolean') return v; if (t === 'bigint') return String(v);`, `    if (t === 'function') return '[Function: ' + (v.name || 'anonymous') + ']';`, `    if (Array.isArray(v)) return v.slice(0, 3).map(i => _sanitize(i, d-1));`, `    if (t === 'object') { if (v instanceof Date) return v.toISOString(); if (v instanceof RegExp) return String(v); if (v instanceof Error) return { error: v.message }; if (v instanceof Promise) return '[Promise]';`, `      const r = {}; const keys = Object.keys(v).slice(0, 10); for (const k of keys) { try { r[k] = _sanitize(v[k], d-1); } catch(e) { r[k] = '[unreadable]'; } } return r; }`, `    return String(v);`, `  }`, `  globalThis.__trickle_var_tracer = function(v, n, l, mod, file) {`, `    try {`, `      if (!_varsFile) {`, `        const dir = process.env.TRICKLE_LOCAL_DIR || __trickle_join(process.cwd(), '.trickle');`, `        try { __trickle_mkdirSync(dir, { recursive: true }); } catch(e) {}`, `        _varsFile = __trickle_join(dir, 'variables.jsonl');`, `      }`, `      const type = _inferType(v, 3);`, `      const th = JSON.stringify(type).substring(0, 32);`, `      const ck = file + ':' + l + ':' + n + ':' + th;`, `      if (_cache.has(ck)) return;`, `      _cache.add(ck);`, `      __trickle_appendFileSync(_varsFile, JSON.stringify({ kind: 'variable', varName: n, line: l, module: mod, file: file, type: type, typeHash: th, sample: _sanitize(v, 2) }) + '\\n');`, `    } catch(e) {}`, `  };`, `}`, `function __trickle_tv(v, n, l) { try { globalThis.__trickle_var_tracer(v, n, l, ${JSON.stringify(moduleName)}, ${JSON.stringify(filename)}); } catch(e) {} }`);
     }
     // Add React component render tracker if needed
-    if (bodyInsertions.length > 0) {
+    if (bodyInsertions.length > 0 || conciseBodyInsertions.length > 0) {
         prefixLines.push(`if (!globalThis.__trickle_react_renders) { globalThis.__trickle_react_renders = new Map(); }`, `if (!globalThis.__trickle_react_prev_props) { globalThis.__trickle_react_prev_props = new Map(); }`, `function __trickle_rc(name, line, props) {`, `  try {`, `    const key = ${JSON.stringify(filename)} + ':' + line;`, `    const count = (globalThis.__trickle_react_renders.get(key) || 0) + 1;`, `    globalThis.__trickle_react_renders.set(key, count);`, `    const dir = process.env.TRICKLE_LOCAL_DIR || __trickle_join(process.cwd(), '.trickle');`, `    try { __trickle_mkdirSync(dir, { recursive: true }); } catch(e) {}`, `    const f = __trickle_join(dir, 'variables.jsonl');`, `    const rec = { kind: 'react_render', file: ${JSON.stringify(filename)}, line: line, component: name, renderCount: count, timestamp: Date.now() / 1000 };`, `    if (props !== undefined && props !== null && typeof props === 'object') {`, `      try {`, `        const propKeys = Object.keys(props).filter(k => k !== 'children');`, `        const propSample = {};`, `        for (const k of propKeys.slice(0, 10)) {`, `          const v = props[k];`, `          const t = typeof v;`, `          if (t === 'string') propSample[k] = v.length > 40 ? v.slice(0, 40) + '...' : v;`, `          else if (t === 'number' || t === 'boolean') propSample[k] = v;`, `          else if (v === null || v === undefined) propSample[k] = v;`, `          else if (Array.isArray(v)) propSample[k] = '[arr:' + v.length + ']';`, `          else if (t === 'function') propSample[k] = '[fn]';`, `          else propSample[k] = '[object]';`, `        }`, `        rec.props = propSample;`, `        rec.propKeys = propKeys;`, `        // Detect which props changed vs previous render`, `        const prevProps = globalThis.__trickle_react_prev_props.get(key);`, `        if (prevProps && count > 1) {`, `          const changedProps = [];`, `          const allKeys = new Set([...Object.keys(prevProps), ...Object.keys(propSample)]);`, `          for (const k of allKeys) {`, `            const prev = prevProps[k];`, `            const curr = propSample[k];`, `            if (String(prev) !== String(curr)) {`, `              changedProps.push({ key: k, from: prev, to: curr });`, `            }`, `          }`, `          if (changedProps.length > 0) rec.changedProps = changedProps;`, `        }`, `        globalThis.__trickle_react_prev_props.set(key, propSample);`, `      } catch(e2) {}`, `    }`, `    __trickle_appendFileSync(f, JSON.stringify(rec) + '\\n');`, `  } catch(e) {}`, `}`);
     }
     // Add React hook tracker if needed
@@ -932,6 +971,18 @@ function transformEsmSource(source, filename, moduleName, backendUrl, debug, tra
             code: `const ${setterName}=__trickle_ss(${JSON.stringify(stateName)},${lineNo},__trickle_s_${setterName});\n`,
         });
     }
+    // Concise arrow body insertions: convert `=> (expr)` to `=> { try{__trickle_rc(...)} return (expr); }`
+    // Two insertions per component: one before `(`, one after matching `)`
+    for (const { beforeParen, afterCloseParen, name, lineNo, propsExpr } of conciseBodyInsertions) {
+        allInsertions.push({
+            position: beforeParen,
+            code: `{ try{__trickle_rc(${JSON.stringify(name)},${lineNo},${propsExpr})}catch(__e){} return `,
+        });
+        allInsertions.push({
+            position: afterCloseParen,
+            code: `\n}`,
+        });
+    }
     // Sort by position descending (insert from end to preserve earlier positions)
     allInsertions.sort((a, b) => b.position - a.position);
     let result = source;

package/dist-esm/vite-plugin.js

@@ -186,6 +186,32 @@ function findClosingBrace(source, openBrace) {
     }
     return -1;
 }
+/**
+ * Find the matching closing paren for an opening paren at openParen.
+ * JSX-safe version: counts `(` and `)` depth, handles JSX curly expressions,
+ * but does NOT treat `'` as a string delimiter (apostrophes in JSX text content
+ * like `I'm` would incorrectly consume parens). Double-quoted strings inside
+ * JSX attr values typically contain balanced parens so can be ignored safely.
+ */
+function findMatchingParen(source, openParen) {
+    let depth = 1;
+    let pos = openParen + 1;
+    while (pos < source.length && depth > 0) {
+        const ch = source[pos];
+        if (ch === '(') {
+            depth++;
+        }
+        else if (ch === ')') {
+            depth--;
+            if (depth === 0)
+                return pos;
+        }
+        // Skip JSX expression blocks {expr} — not parens but skip curly content to avoid
+        // false paren matches inside template expressions
+        pos++;
+    }
+    return -1;
+}
 /**
  * Find variable declarations in source and return insertions for tracing.
  * Handles: const x = ...; let x = ...; var x = ...;
@@ -533,12 +559,14 @@ export function transformEsmSource(source, filename, moduleName, backendUrl, deb
     }
     // Also match arrow functions assigned to const/let/var
     // Handles: const X = () => {}, const X: React.FC = () => {}, const X: React.FC<Props> = ({ a }) => {}
-    const arrowRegex = /^[ \t]*(?:export\s+)?(?:const|let|var)\s+([a-zA-Z_$][a-zA-Z0-9_$]*)(?:\s*:\s*[^=]+?)?\s*=\s*(?:async\s+)?(?:\([^)]*\)|[a-zA-Z_$][a-zA-Z0-9_$]*)\s*(?::\s*[^=]+?)?\s*=>\s*\{/gm;
+    // Also handles concise bodies: const X = (props) => (<div/>)
+    const arrowRegex = /^[ \t]*(?:export\s+)?(?:const|let|var)\s+([a-zA-Z_$][a-zA-Z0-9_$]*)(?:\s*:\s*[^=]+?)?\s*=\s*(?:async\s+)?(?:\([^)]*\)|[a-zA-Z_$][a-zA-Z0-9_$]*)\s*(?::\s*[^=]+?)?\s*=>\s*(?:\{|\()/gm;
+    // Concise body insertions: for `=> (expr)`, wrap with block body for render tracking
+    const conciseBodyInsertions = [];
     while ((match = arrowRegex.exec(source)) !== null) {
         const name = match[1];
-        const openBrace = source.indexOf('{', match.index + match[0].length - 1);
-        if (openBrace === -1)
-            continue;
+        const bodyStartPos = match.index + match[0].length - 1;
+        const isConcise = source[bodyStartPos] === '(';
         const arrowStr = match[0];
         const arrowParamMatch = arrowStr.match(/=\s*(?:async\s+)?(?:\(([^)]*)\)|([a-zA-Z_$][a-zA-Z0-9_$]*))\s*(?::\s*[^=]+?)?\s*=>/);
         let paramNames = [];
@@ -553,58 +581,69 @@ export function transformEsmSource(source, filename, moduleName, backendUrl, deb
                 }).filter(Boolean);
             }
         }
-        const closeBrace = findClosingBrace(source, openBrace);
-        if (closeBrace === -1)
-            continue;
-        funcInsertions.push({ position: closeBrace + 1, name, paramNames });
-        // React component render tracking: uppercase arrow function in .tsx/.jsx
-        if (isReactFile && /^[A-Z]/.test(name)) {
-            let lineNo = 1;
-            for (let i = 0; i < match.index; i++) {
-                if (source[i] === '\n')
-                    lineNo++;
-            }
-            // Determine props expression for arrow functions (no `arguments` object)
-            let propsExpr = 'undefined';
-            if (arrowParamMatch) {
-                const rawParams = (arrowParamMatch[1] || '').trim();
-                if (!rawParams) {
-                    // No params: `() => {}`
-                    propsExpr = 'undefined';
-                }
-                else if (rawParams.startsWith('{')) {
-                    // Destructured: ({ name, age }) => {} — reconstruct object from field names
-                    // Strip TS type annotation (e.g. `{a, b}: Props` → `{a, b}`)
-                    // Find the matching `}` to isolate just the destructuring pattern
-                    let depth2 = 0;
-                    let endBrace = -1;
-                    for (let i = 0; i < rawParams.length; i++) {
-                        if (rawParams[i] === '{')
-                            depth2++;
-                        else if (rawParams[i] === '}') {
-                            depth2--;
-                            if (depth2 === 0) {
-                                endBrace = i;
-                                break;
-                            }
+        // Helper to build propsExpr from arrowParamMatch
+        const buildPropsExpr = () => {
+            if (!arrowParamMatch)
+                return 'undefined';
+            const rawParams = (arrowParamMatch[1] || '').trim();
+            if (!rawParams)
+                return 'undefined';
+            if (rawParams.startsWith('{')) {
+                let depth2 = 0, endBrace = -1;
+                for (let i = 0; i < rawParams.length; i++) {
+                    if (rawParams[i] === '{')
+                        depth2++;
+                    else if (rawParams[i] === '}') {
+                        depth2--;
+                        if (depth2 === 0) {
+                            endBrace = i;
+                            break;
                         }
                     }
-                    const destructPattern = endBrace !== -1 ? rawParams.slice(0, endBrace + 1) : rawParams;
-                    const fields = extractDestructuredNames(destructPattern);
-                    if (fields.length > 0) {
-                        propsExpr = `{ ${fields.join(', ')} }`;
-                    }
                 }
-                else if (arrowParamMatch[2]) {
-                    // Single simple param (no parens): `props => {}`
-                    propsExpr = arrowParamMatch[2];
+                const destructPattern = endBrace !== -1 ? rawParams.slice(0, endBrace + 1) : rawParams;
+                const fields = extractDestructuredNames(destructPattern);
+                return fields.length > 0 ? `{ ${fields.join(', ')} }` : 'undefined';
+            }
+            else if (arrowParamMatch[2]) {
+                return arrowParamMatch[2];
+            }
+            else if (paramNames.length === 1) {
+                return paramNames[0];
+            }
+            return 'undefined';
+        };
+        if (isConcise) {
+            // Concise body: `const X = (props) => (<div/>)` — no block body
+            // Only add render tracking for React components (uppercase names in .tsx/.jsx)
+            if (isReactFile && /^[A-Z]/.test(name)) {
+                const closeParen = findMatchingParen(source, bodyStartPos);
+                if (closeParen === -1)
+                    continue;
+                let lineNo = 1;
+                for (let i = 0; i < match.index; i++) {
+                    if (source[i] === '\n')
+                        lineNo++;
                 }
-                else if (paramNames.length === 1) {
-                    // Single simple param: `(props) => {}`
-                    propsExpr = paramNames[0];
+                conciseBodyInsertions.push({ beforeParen: bodyStartPos, afterCloseParen: closeParen + 1, name, lineNo, propsExpr: buildPropsExpr() });
+            }
+        }
+        else {
+            // Block body: `const X = (props) => { ... }`
+            const openBrace = bodyStartPos;
+            const closeBrace = findClosingBrace(source, openBrace);
+            if (closeBrace === -1)
+                continue;
+            funcInsertions.push({ position: closeBrace + 1, name, paramNames });
+            // React component render tracking: uppercase arrow function in .tsx/.jsx
+            if (isReactFile && /^[A-Z]/.test(name)) {
+                let lineNo = 1;
+                for (let i = 0; i < match.index; i++) {
+                    if (source[i] === '\n')
+                        lineNo++;
                 }
+                bodyInsertions.push({ position: openBrace + 1, name, lineNo, propsExpr: buildPropsExpr() });
             }
-            bodyInsertions.push({ position: openBrace + 1, name, lineNo, propsExpr });
         }
     }
     // Match React.memo() and React.forwardRef() wrapped components
@@ -817,7 +856,7 @@ export function transformEsmSource(source, filename, moduleName, backendUrl, deb
     const varInsertions = traceVars ? findVarDeclarations(source) : [];
     // Find destructured variable declarations for tracing
     const destructInsertions = traceVars ? findDestructuredDeclarations(source) : [];
-    if (funcInsertions.length === 0 && varInsertions.length === 0 && destructInsertions.length === 0 && bodyInsertions.length === 0 && hookInsertions.length === 0 && stateInsertions.length === 0)
+    if (funcInsertions.length === 0 && varInsertions.length === 0 && destructInsertions.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.
     // Map transformed line numbers to original source line numbers.
@@ -842,7 +881,7 @@ export function transformEsmSource(source, filename, moduleName, backendUrl, deb
     const importLines = [
         `import { wrapFunction as __trickle_wrapFn, configure as __trickle_configure } from 'trickle-observe';`,
     ];
-    if (varInsertions.length > 0 || destructInsertions.length > 0 || bodyInsertions.length > 0 || hookInsertions.length > 0 || stateInsertions.length > 0) {
+    if (varInsertions.length > 0 || destructInsertions.length > 0 || bodyInsertions.length > 0 || hookInsertions.length > 0 || stateInsertions.length > 0 || conciseBodyInsertions.length > 0) {
         importLines.push(`import { mkdirSync as __trickle_mkdirSync, appendFileSync as __trickle_appendFileSync } from 'node:fs';`, `import { join as __trickle_join } from 'node:path';`);
     }
     const prefixLines = [
@@ -870,7 +909,7 @@ export function transformEsmSource(source, filename, moduleName, backendUrl, deb
         prefixLines.push(`if (!globalThis.__trickle_var_tracer) {`, `  const _cache = new Set();`, `  let _varsFile = null;`, `  function _inferType(v, d) {`, `    if (d <= 0) return { kind: 'primitive', name: 'unknown' };`, `    if (v === null) return { kind: 'primitive', name: 'null' };`, `    if (v === undefined) return { kind: 'primitive', name: 'undefined' };`, `    const t = typeof v;`, `    if (t === 'string' || t === 'number' || t === 'boolean' || t === 'bigint' || t === 'symbol') return { kind: 'primitive', name: t };`, `    if (t === 'function') return { kind: 'function' };`, `    if (Array.isArray(v)) { return v.length === 0 ? { kind: 'array', element: { kind: 'primitive', name: 'unknown' } } : { kind: 'array', element: _inferType(v[0], d-1) }; }`, `    if (t === 'object') {`, `      if (v instanceof Date) return { kind: 'object', properties: { __date: { kind: 'primitive', name: 'string' } } };`, `      if (v instanceof RegExp) return { kind: 'object', properties: { __regexp: { kind: 'primitive', name: 'string' } } };`, `      if (v instanceof Error) return { kind: 'object', properties: { __error: { kind: 'primitive', name: 'string' } } };`, `      if (v instanceof Promise) return { kind: 'promise', resolved: { kind: 'primitive', name: 'unknown' } };`, `      const props = {}; const keys = Object.keys(v).slice(0, 20);`, `      for (const k of keys) { try { props[k] = _inferType(v[k], d-1); } catch(e) { props[k] = { kind: 'primitive', name: 'unknown' }; } }`, `      return { kind: 'object', properties: props };`, `    }`, `    return { kind: 'primitive', name: 'unknown' };`, `  }`, `  function _sanitize(v, d) {`, `    if (d <= 0) return '[truncated]'; if (v === null || v === undefined) return v; const t = typeof v;`, `    if (t === 'string') return v.length > 100 ? v.substring(0, 100) + '...' : v;`, `    if (t === 'number' || t === 'boolean') return v; if (t === 'bigint') return String(v);`, `    if (t === 'function') return '[Function: ' + (v.name || 'anonymous') + ']';`, `    if (Array.isArray(v)) return v.slice(0, 3).map(i => _sanitize(i, d-1));`, `    if (t === 'object') { if (v instanceof Date) return v.toISOString(); if (v instanceof RegExp) return String(v); if (v instanceof Error) return { error: v.message }; if (v instanceof Promise) return '[Promise]';`, `      const r = {}; const keys = Object.keys(v).slice(0, 10); for (const k of keys) { try { r[k] = _sanitize(v[k], d-1); } catch(e) { r[k] = '[unreadable]'; } } return r; }`, `    return String(v);`, `  }`, `  globalThis.__trickle_var_tracer = function(v, n, l, mod, file) {`, `    try {`, `      if (!_varsFile) {`, `        const dir = process.env.TRICKLE_LOCAL_DIR || __trickle_join(process.cwd(), '.trickle');`, `        try { __trickle_mkdirSync(dir, { recursive: true }); } catch(e) {}`, `        _varsFile = __trickle_join(dir, 'variables.jsonl');`, `      }`, `      const type = _inferType(v, 3);`, `      const th = JSON.stringify(type).substring(0, 32);`, `      const ck = file + ':' + l + ':' + n + ':' + th;`, `      if (_cache.has(ck)) return;`, `      _cache.add(ck);`, `      __trickle_appendFileSync(_varsFile, JSON.stringify({ kind: 'variable', varName: n, line: l, module: mod, file: file, type: type, typeHash: th, sample: _sanitize(v, 2) }) + '\\n');`, `    } catch(e) {}`, `  };`, `}`, `function __trickle_tv(v, n, l) { try { globalThis.__trickle_var_tracer(v, n, l, ${JSON.stringify(moduleName)}, ${JSON.stringify(filename)}); } catch(e) {} }`);
     }
     // Add React component render tracker if needed
-    if (bodyInsertions.length > 0) {
+    if (bodyInsertions.length > 0 || conciseBodyInsertions.length > 0) {
         prefixLines.push(`if (!globalThis.__trickle_react_renders) { globalThis.__trickle_react_renders = new Map(); }`, `if (!globalThis.__trickle_react_prev_props) { globalThis.__trickle_react_prev_props = new Map(); }`, `function __trickle_rc(name, line, props) {`, `  try {`, `    const key = ${JSON.stringify(filename)} + ':' + line;`, `    const count = (globalThis.__trickle_react_renders.get(key) || 0) + 1;`, `    globalThis.__trickle_react_renders.set(key, count);`, `    const dir = process.env.TRICKLE_LOCAL_DIR || __trickle_join(process.cwd(), '.trickle');`, `    try { __trickle_mkdirSync(dir, { recursive: true }); } catch(e) {}`, `    const f = __trickle_join(dir, 'variables.jsonl');`, `    const rec = { kind: 'react_render', file: ${JSON.stringify(filename)}, line: line, component: name, renderCount: count, timestamp: Date.now() / 1000 };`, `    if (props !== undefined && props !== null && typeof props === 'object') {`, `      try {`, `        const propKeys = Object.keys(props).filter(k => k !== 'children');`, `        const propSample = {};`, `        for (const k of propKeys.slice(0, 10)) {`, `          const v = props[k];`, `          const t = typeof v;`, `          if (t === 'string') propSample[k] = v.length > 40 ? v.slice(0, 40) + '...' : v;`, `          else if (t === 'number' || t === 'boolean') propSample[k] = v;`, `          else if (v === null || v === undefined) propSample[k] = v;`, `          else if (Array.isArray(v)) propSample[k] = '[arr:' + v.length + ']';`, `          else if (t === 'function') propSample[k] = '[fn]';`, `          else propSample[k] = '[object]';`, `        }`, `        rec.props = propSample;`, `        rec.propKeys = propKeys;`, `        // Detect which props changed vs previous render`, `        const prevProps = globalThis.__trickle_react_prev_props.get(key);`, `        if (prevProps && count > 1) {`, `          const changedProps = [];`, `          const allKeys = new Set([...Object.keys(prevProps), ...Object.keys(propSample)]);`, `          for (const k of allKeys) {`, `            const prev = prevProps[k];`, `            const curr = propSample[k];`, `            if (String(prev) !== String(curr)) {`, `              changedProps.push({ key: k, from: prev, to: curr });`, `            }`, `          }`, `          if (changedProps.length > 0) rec.changedProps = changedProps;`, `        }`, `        globalThis.__trickle_react_prev_props.set(key, propSample);`, `      } catch(e2) {}`, `    }`, `    __trickle_appendFileSync(f, JSON.stringify(rec) + '\\n');`, `  } catch(e) {}`, `}`);
     }
     // Add React hook tracker if needed
@@ -925,6 +964,18 @@ export function transformEsmSource(source, filename, moduleName, backendUrl, deb
             code: `const ${setterName}=__trickle_ss(${JSON.stringify(stateName)},${lineNo},__trickle_s_${setterName});\n`,
         });
     }
+    // Concise arrow body insertions: convert `=> (expr)` to `=> { try{__trickle_rc(...)} return (expr); }`
+    // Two insertions per component: one before `(`, one after matching `)`
+    for (const { beforeParen, afterCloseParen, name, lineNo, propsExpr } of conciseBodyInsertions) {
+        allInsertions.push({
+            position: beforeParen,
+            code: `{ try{__trickle_rc(${JSON.stringify(name)},${lineNo},${propsExpr})}catch(__e){} return `,
+        });
+        allInsertions.push({
+            position: afterCloseParen,
+            code: `\n}`,
+        });
+    }
     // Sort by position descending (insert from end to preserve earlier positions)
     allInsertions.sort((a, b) => b.position - a.position);
     let result = source;

package/package.json

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

package/src/next-plugin.test.ts

@@ -156,3 +156,30 @@ describe('Next.js: does not instrument non-React files', () => {
     assert.ok(!out.includes('__trickle_ss'), 'should not track useState in .ts files');
   });
 });
+
+describe('Next.js: concise arrow body (=> (...)) tracking', () => {
+  it('tracks a concise arrow component (common in Next.js layouts)', () => {
+    const code = [
+      `const Layout = ({ children, title = "Default" }: Props) => (`,
+      `  <div>`,
+      `    <main>{children}</main>`,
+      `  </div>`,
+      `);`,
+    ].join('\n');
+    const out = transformNextTsx(code);
+    assert.ok(out.includes('__trickle_rc'), 'should track concise arrow component in Next.js');
+  });
+
+  it('tracks a simple presentational component with concise body', () => {
+    const code = `const Badge = ({ label }: { label: string }) => (<span className="badge">{label}</span>);`;
+    const out = transformNextTsx(code);
+    assert.ok(out.includes('__trickle_rc'), 'should track concise arrow Badge component');
+  });
+
+  it('converted concise body includes return statement', () => {
+    const code = `const Hero = (props) => (<section>{props.title}</section>);`;
+    const out = transformNextTsx(code);
+    assert.ok(out.includes('return '), 'converted block body should have return statement');
+    assert.ok(out.includes('__trickle_rc'), 'should inject render tracker');
+  });
+});

package/src/vite-plugin.test.ts

@@ -404,3 +404,59 @@ describe('React hook observability', () => {
     assert.ok(out!.includes('__trickle_hw'), 'should inject hook wrapper for function() {} form');
   });
 });
+
+describe('Concise arrow body tracking (=> (...))', () => {
+  it('tracks a simple concise arrow component', () => {
+    const code = `const Layout = ({ children }) => (\n  <div>{children}</div>\n);`;
+    const out = transformTsx(code);
+    assert.ok(out, 'should transform');
+    assert.ok(out!.includes('__trickle_rc'), 'should inject render tracker for concise arrow body');
+  });
+
+  it('tracks a typed concise arrow component (React.FC)', () => {
+    const code = `const Header: React.FC<{ title: string }> = ({ title }) => (\n  <header>{title}</header>\n);`;
+    const out = transformTsx(code);
+    assert.ok(out, 'should transform');
+    assert.ok(out!.includes('__trickle_rc'), 'should inject render tracker for React.FC concise arrow');
+  });
+
+  it('wraps concise body with block body containing return statement', () => {
+    const code = `const Card = (props) => (<div>{props.name}</div>);`;
+    const out = transformTsx(code);
+    assert.ok(out, 'should transform');
+    assert.ok(out!.includes('__trickle_rc'), 'should inject render tracker');
+    assert.ok(out!.includes('return '), 'converted block body should have return statement');
+  });
+
+  it('does NOT track lowercase concise arrow (non-component)', () => {
+    const code = `const renderItem = (item) => (<span>{item}</span>);`;
+    const out = transformTsx(code);
+    // lowercase name - should not be tracked as component
+    if (out) {
+      assert.ok(!out.includes('__trickle_rc'), 'should NOT inject render tracker for lowercase concise arrow');
+    }
+  });
+
+  it('tracks Next.js Layout component with concise arrow body (real-world pattern)', () => {
+    const code = [
+      `const Layout = ({ children, title = "Default title" }: Props) => (`,
+      `  <div>`,
+      `    <Head><title>{title}</title></Head>`,
+      `    <main>{children}</main>`,
+      `  </div>`,
+      `);`,
+    ].join('\n');
+    const out = transformTsx(code);
+    assert.ok(out, 'should transform');
+    assert.ok(out!.includes('__trickle_rc'), 'should track Layout component (real Next.js pattern)');
+  });
+
+  it('does NOT track concise arrow in .ts files', () => {
+    const plugin = tricklePlugin({ debug: false, traceVars: false });
+    const code = `const Layout = ({ children }) => (<div>{children}</div>);`;
+    const result = plugin.transform(code, '/test/layout.ts');
+    if (result) {
+      assert.ok(!result.code.includes('__trickle_rc'), 'should NOT inject render tracker in .ts file');
+    }
+  });
+});

package/src/vite-plugin.ts

@@ -189,6 +189,31 @@ function findClosingBrace(source: string, openBrace: number): number {
   return -1;
 }
 
+/**
+ * Find the matching closing paren for an opening paren at openParen.
+ * JSX-safe version: counts `(` and `)` depth, handles JSX curly expressions,
+ * but does NOT treat `'` as a string delimiter (apostrophes in JSX text content
+ * like `I'm` would incorrectly consume parens). Double-quoted strings inside
+ * JSX attr values typically contain balanced parens so can be ignored safely.
+ */
+function findMatchingParen(source: string, openParen: number): number {
+  let depth = 1;
+  let pos = openParen + 1;
+  while (pos < source.length && depth > 0) {
+    const ch = source[pos];
+    if (ch === '(') {
+      depth++;
+    } else if (ch === ')') {
+      depth--;
+      if (depth === 0) return pos;
+    }
+    // Skip JSX expression blocks {expr} — not parens but skip curly content to avoid
+    // false paren matches inside template expressions
+    pos++;
+  }
+  return -1;
+}
+
 /**
  * Find variable declarations in source and return insertions for tracing.
  * Handles: const x = ...; let x = ...; var x = ...;
@@ -538,12 +563,16 @@ export function transformEsmSource(
 
   // Also match arrow functions assigned to const/let/var
   // Handles: const X = () => {}, const X: React.FC = () => {}, const X: React.FC<Props> = ({ a }) => {}
-  const arrowRegex = /^[ \t]*(?:export\s+)?(?:const|let|var)\s+([a-zA-Z_$][a-zA-Z0-9_$]*)(?:\s*:\s*[^=]+?)?\s*=\s*(?:async\s+)?(?:\([^)]*\)|[a-zA-Z_$][a-zA-Z0-9_$]*)\s*(?::\s*[^=]+?)?\s*=>\s*\{/gm;
+  // Also handles concise bodies: const X = (props) => (<div/>)
+  const arrowRegex = /^[ \t]*(?:export\s+)?(?:const|let|var)\s+([a-zA-Z_$][a-zA-Z0-9_$]*)(?:\s*:\s*[^=]+?)?\s*=\s*(?:async\s+)?(?:\([^)]*\)|[a-zA-Z_$][a-zA-Z0-9_$]*)\s*(?::\s*[^=]+?)?\s*=>\s*(?:\{|\()/gm;
+
+  // Concise body insertions: for `=> (expr)`, wrap with block body for render tracking
+  const conciseBodyInsertions: Array<{ beforeParen: number; afterCloseParen: number; name: string; lineNo: number; propsExpr: string }> = [];
 
   while ((match = arrowRegex.exec(source)) !== null) {
     const name = match[1];
-    const openBrace = source.indexOf('{', match.index + match[0].length - 1);
-    if (openBrace === -1) continue;
+    const bodyStartPos = match.index + match[0].length - 1;
+    const isConcise = source[bodyStartPos] === '(';
 
     const arrowStr = match[0];
     const arrowParamMatch = arrowStr.match(/=\s*(?:async\s+)?(?:\(([^)]*)\)|([a-zA-Z_$][a-zA-Z0-9_$]*))\s*(?::\s*[^=]+?)?\s*=>/);
@@ -559,50 +588,60 @@ export function transformEsmSource(
       }
     }
 
-    const closeBrace = findClosingBrace(source, openBrace);
-    if (closeBrace === -1) continue;
-
-    funcInsertions.push({ position: closeBrace + 1, name, paramNames });
+    // Helper to build propsExpr from arrowParamMatch
+    const buildPropsExpr = () => {
+      if (!arrowParamMatch) return 'undefined';
+      const rawParams = (arrowParamMatch[1] || '').trim();
+      if (!rawParams) return 'undefined';
+      if (rawParams.startsWith('{')) {
+        let depth2 = 0, endBrace = -1;
+        for (let i = 0; i < rawParams.length; i++) {
+          if (rawParams[i] === '{') depth2++;
+          else if (rawParams[i] === '}') { depth2--; if (depth2 === 0) { endBrace = i; break; } }
+        }
+        const destructPattern = endBrace !== -1 ? rawParams.slice(0, endBrace + 1) : rawParams;
+        const fields = extractDestructuredNames(destructPattern);
+        return fields.length > 0 ? `{ ${fields.join(', ')} }` : 'undefined';
+      } else if (arrowParamMatch[2]) {
+        return arrowParamMatch[2];
+      } else if (paramNames.length === 1) {
+        return paramNames[0];
+      }
+      return 'undefined';
+    };
+
+    if (isConcise) {
+      // Concise body: `const X = (props) => (<div/>)` — no block body
+      // Only add render tracking for React components (uppercase names in .tsx/.jsx)
+      if (isReactFile && /^[A-Z]/.test(name)) {
+        const closeParen = findMatchingParen(source, bodyStartPos);
+        if (closeParen === -1) continue;
+
+        let lineNo = 1;
+        for (let i = 0; i < match.index; i++) {
+          if (source[i] === '\n') lineNo++;
+        }
 
-    // React component render tracking: uppercase arrow function in .tsx/.jsx
-    if (isReactFile && /^[A-Z]/.test(name)) {
-      let lineNo = 1;
-      for (let i = 0; i < match.index; i++) {
-        if (source[i] === '\n') lineNo++;
+        conciseBodyInsertions.push({ beforeParen: bodyStartPos, afterCloseParen: closeParen + 1, name, lineNo, propsExpr: buildPropsExpr() });
       }
+    } else {
+      // Block body: `const X = (props) => { ... }`
+      const openBrace = bodyStartPos;
 
-      // Determine props expression for arrow functions (no `arguments` object)
-      let propsExpr = 'undefined';
-      if (arrowParamMatch) {
-        const rawParams = (arrowParamMatch[1] || '').trim();
-        if (!rawParams) {
-          // No params: `() => {}`
-          propsExpr = 'undefined';
-        } else if (rawParams.startsWith('{')) {
-          // Destructured: ({ name, age }) => {} — reconstruct object from field names
-          // Strip TS type annotation (e.g. `{a, b}: Props` → `{a, b}`)
-          // Find the matching `}` to isolate just the destructuring pattern
-          let depth2 = 0;
-          let endBrace = -1;
-          for (let i = 0; i < rawParams.length; i++) {
-            if (rawParams[i] === '{') depth2++;
-            else if (rawParams[i] === '}') { depth2--; if (depth2 === 0) { endBrace = i; break; } }
-          }
-          const destructPattern = endBrace !== -1 ? rawParams.slice(0, endBrace + 1) : rawParams;
-          const fields = extractDestructuredNames(destructPattern);
-          if (fields.length > 0) {
-            propsExpr = `{ ${fields.join(', ')} }`;
-          }
-        } else if (arrowParamMatch[2]) {
-          // Single simple param (no parens): `props => {}`
-          propsExpr = arrowParamMatch[2];
-        } else if (paramNames.length === 1) {
-          // Single simple param: `(props) => {}`
-          propsExpr = paramNames[0];
+      const closeBrace = findClosingBrace(source, openBrace);
+      if (closeBrace === -1) continue;
+
+      funcInsertions.push({ position: closeBrace + 1, name, paramNames });
+
+      // React component render tracking: uppercase arrow function in .tsx/.jsx
+      if (isReactFile && /^[A-Z]/.test(name)) {
+        let lineNo = 1;
+        for (let i = 0; i < match.index; i++) {
+          if (source[i] === '\n') lineNo++;
         }
-      }
 
-      bodyInsertions.push({ position: openBrace + 1, name, lineNo, propsExpr });
+        bodyInsertions.push({ position: openBrace + 1, name, lineNo, propsExpr: buildPropsExpr() });
+      }
     }
   }
 
@@ -814,7 +853,7 @@ export function transformEsmSource(
   // Find destructured variable declarations for tracing
   const destructInsertions = traceVars ? findDestructuredDeclarations(source) : [];
 
-  if (funcInsertions.length === 0 && varInsertions.length === 0 && destructInsertions.length === 0 && bodyInsertions.length === 0 && hookInsertions.length === 0 && stateInsertions.length === 0) return source;
+  if (funcInsertions.length === 0 && varInsertions.length === 0 && destructInsertions.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.
   // Map transformed line numbers to original source line numbers.
@@ -839,7 +878,7 @@ export function transformEsmSource(
   const importLines: string[] = [
     `import { wrapFunction as __trickle_wrapFn, configure as __trickle_configure } from 'trickle-observe';`,
   ];
-  if (varInsertions.length > 0 || destructInsertions.length > 0 || bodyInsertions.length > 0 || hookInsertions.length > 0 || stateInsertions.length > 0) {
+  if (varInsertions.length > 0 || destructInsertions.length > 0 || bodyInsertions.length > 0 || hookInsertions.length > 0 || stateInsertions.length > 0 || conciseBodyInsertions.length > 0) {
     importLines.push(
       `import { mkdirSync as __trickle_mkdirSync, appendFileSync as __trickle_appendFileSync } from 'node:fs';`,
       `import { join as __trickle_join } from 'node:path';`,
@@ -923,7 +962,7 @@ export function transformEsmSource(
   }
 
   // Add React component render tracker if needed
-  if (bodyInsertions.length > 0) {
+  if (bodyInsertions.length > 0 || conciseBodyInsertions.length > 0) {
     prefixLines.push(
       `if (!globalThis.__trickle_react_renders) { globalThis.__trickle_react_renders = new Map(); }`,
       `if (!globalThis.__trickle_react_prev_props) { globalThis.__trickle_react_prev_props = new Map(); }`,
@@ -1079,6 +1118,19 @@ export function transformEsmSource(
     });
   }
 
+  // Concise arrow body insertions: convert `=> (expr)` to `=> { try{__trickle_rc(...)} return (expr); }`
+  // Two insertions per component: one before `(`, one after matching `)`
+  for (const { beforeParen, afterCloseParen, name, lineNo, propsExpr } of conciseBodyInsertions) {
+    allInsertions.push({
+      position: beforeParen,
+      code: `{ try{__trickle_rc(${JSON.stringify(name)},${lineNo},${propsExpr})}catch(__e){} return `,
+    });
+    allInsertions.push({
+      position: afterCloseParen,
+      code: `\n}`,
+    });
+  }
+
   // Sort by position descending (insert from end to preserve earlier positions)
   allInsertions.sort((a, b) => b.position - a.position);