fix: improved scopes

Author: skoshx

examples/with-nextjs/flytrap.config.ts

@@ -3,10 +3,10 @@ import { defineFlytrapConfig } from 'useflytrap'
 export default defineFlytrapConfig({
 	projectId: 'nextjs-demo',
 	publicApiKey:
-		'pk_MIIBIjANBgkqhkiG9w0BAQEFAAOCAQ8AMIIBCgKCAQEAsTAnbcqXBFwKQhf8htpo+dH1r5iIXpr4xrZofn60J4nJGtdkVYXNj+pjlbooZIDBxrVLHKrYwI3TOFgM3KSLQS7YOFyS7a29kqGLUPGnO809pTTDEP66ho7/e+8jdjiyBDNTv6lwS3rxYteHcN7UQERA69gqvessNUNiCJlpL9JxBKnU+KDFXoV8IdUKiJqJUkZ2OT0vf0xMWUXQkdF8/+gFlJJpQlMe7OM9Owjyyl39ceoJ27yR559IVwmAXgIh4rXfb9/tBmq224+k73ohhciLPFBpRhJBp6AI+lTyFZI6GkHQBWyjmTyeEtJ1aDtdoKMSwIc7qOVvnJ9OUZVtsQIDAQAB',
+		'pk_MIIBIjANBgkqhkiG9w0BAQEFAAOCAQ8AMIIBCgKCAQEAlOV7JSvZ2ve0wwgyICJgfePGgQUHBH5axSg0NJbEVv4OkZ1v1fo/q+rUKv6fhAPfITX4pXyJuTN1p3qAAMZ4k7ACq2KeDjpOQK7sdEGOxM8MwxqkkIsL8/q/fplsikvUzZkU6Tgy6EitYD2SNkMhkr1jGc7Y4FLw7/uCYDtcvV7Z5whygg4K55HtU8IMUwbOzlwMt9IflMG6zyz4C4BbuvNK1wGd4ZEsppKgDtgnGIhEGY55p4G/Vk3nb9+qIfSLpk8kj2fsXPs13zeI5NcesxXGdMLWj0SKWXCJ9UIsYJseVBTXqzNGnNUZEQr/Q881jsm5aFz/uMGqk0GTCCISPQIDAQAB',
+	secretApiKey: 'sk_Y8dYLe5VoNJfDI_CPEqF8AqMTEwWAvTwBi7Ml-pN9bzWsgsP',
 	privateKey:
-		'sk_MIIEvQIBADANBgkqhkiG9w0BAQEFAASCBKcwggSjAgEAAoIBAQCxMCdtypcEXApCF/yG2mj50fWvmIhemvjGtmh+frQnicka12RVhc2P6mOVuihkgMHGtUscqtjAjdM4WAzcpItBLtg4XJLtrb2SoYtQ8ac7zT2lNMMQ/rqGjv977yN2OLIEM1O/qXBLevFi14dw3tRAREDr2Cq96yw1Q2IImWkv0nEEqdT4oMVehXwh1QqImolSRnY5PS9/TExZRdCR0Xz/6AWUkmlCUx7s4z07CPLKXf1x6gnbvJHnn0hXCYBeAiHitd9v3+0Garbbj6TveiGFyIs8UGlGEkGnoAj6VPIVkjoaQdAFbKOZPJ4S0nVoO12goxLAhzuo5W+cn05RlW2xAgMBAAECggEAA4bIgxyztvVPajTiDJZLsxyq2SfwqgwyLeTJoBUMyCcWXMGV5xvuEop3rnjtdsDHXTQZ+AqoXJk6BOfKOOjmDAn2/qoCLdyIo/gRfsl8zUcKrlIA8k1f6Eo6bcoC4fveAvvD86ynSLD28s4EuDeEII5nNHZ0Kn0JWhryqEaINO3wytPVnEWM8rPrQeaDtVDhQDrJIbxCZDL3iqzYzopx3C5KkGNkrgaWsGco+e1fOoxd0HPlsey41NHVq1lCiY0A7AvKTjdq2kj+XdMHtKfEo9mThRX0iQ7piHc71D+WGjAYkttvlEhIEN3nnU1qWX05S4blkIpxNdaUA5vet2cf4QKBgQDMeh76S+0/zIYtlfoTRrbo/Q3YLaG09ftkJa5k65j2v5zC5ftP8/VpRxwRgZE3YD7aCPTVASA/bUZA6ZI4fwmP9M7nWKXEvL5NleRLQhPMbiD+1jyJVGgtjrLHS5FESfSP8tsPFdzOHmZ4duiJdLu7VCgDMSeHEBtzPxiLXbDyEQKBgQDd1b+mS7sSWGYiIbQ5EXvzwc1VCunEk95b8zBq0Ref1+Ad5FSXoZqHvD05SmL1ahhDZmXH5FRuNWjZ26RjEguRcwfq734mXf4cGhLbtCr5OqltHquhPAXGHz6wmt001W1S4+motRG9Ckis+8mr6/5M6ScvJ50FnJ7zaSpnW4khoQKBgBk8GQaayDTPcN+/WpV2bKxkTokXWJWUpem+HL+ns8D/9MC40UMUwHy1oeknLFzBLACMimqfMPOi8MCiEsGWK//wHni+n/aftHyuuvXuubLJBJlupxnrqM+2hKnD0bGzztLVDePWtuFZLxw+0IPmPCTqReXe8xngCwM2Djlk3qmBAoGBANHZXg7GHRVholwvXfmOXJ9eegs046cd6n85MlgZrCt9X3lngc5fBXvZymDjyXE3B/TabPYHPQd0ZteQO5WsgFz7YEYSgFdzGusijyxe5zgVEikzllBUI3IkJH2UQiW0sFJ1X5hEkZ8ul0lsdn64JDxFYtfstVGVs5e3qHFV2geBAoGAX3Eudu71lcF6j53ZEpHVMUr/WioTkyZn1nUrAN3NZtGsVfBrhGwjhhHSi9xnQGyJQctAs5mKoiVzGQ1jtVuXlaXjiNtidj8jgbrnnsh9aFoZmD6HduRjDnZdWWQdZ8UnoyWNzXg+K42v4JFNeiA6ChaMr8lCgzx0tz3RvAnqu3c=',
-	secretApiKey: 'sk_79wqa4szRnj2VBPJxhrRmgTf0mD1q4pcR5FijW_neVCf8Oro',
+		'sk_MIIEvAIBADANBgkqhkiG9w0BAQEFAASCBKYwggSiAgEAAoIBAQCU5XslK9na97TDCDIgImB948aBBQcEflrFKDQ0lsRW/g6RnW/V+j+r6tQq/p+EA98hNfilfIm5M3WneoAAxniTsAKrYp4OOk5Arux0QY7EzwzDGqSQiwvz+r9+mWyKS9TNmRTpODLoSK1gPZI2QyGSvWMZztjgUvDv+4JgO1y9XtnnCHKCDgrnke1TwgxTBs7OXAy30h+UwbrPLPgLgFu680rXAZ3hkSymkqAO2CcYiEQZjnmngb9WTedv36oh9IumTySPZ+xc+zXfN4jk1x6zFcZ0wtaPRIpZcIn1Qixgmx5UFNerM0ac1RkRCv9DzzWOybloXP+4waqTQZMIIhI9AgMBAAECggEABsLk9KspGWhmLPUSUaM9/nl5aiJwTyPtu0Y4GKs//zNKNhKQIYdbnNLtD4bAd541Y6yvvdQJ7P8JOLG3XlGk6A/2DxJLWxoKs6U914mikg1U5wcuseGeiVW5nGYbJ6yJ3Uw2RuDmbuXd+aDSIuSpgaBX/7QE5SrfBgbFxNjtPSwftUJ/gS5dQ4HBdDnUjzzHJv3KbiS+mxLCtcdz/OsjP77G2qT++fooB8dGhEVcbqMHoNtDgde45nFXDU9kAbfRcNsMXfq8iRKpKccKCCV9MfN18csZTOcAqg9n2ZCzRje6mb8HVwGufJQ4E7Iw2T8czNttRNC066/Hn1BBvJi0AQKBgQDPiSUDiZ3k/g88NRajwuOCY24yZytRqioLA6n1gLc+PWfE7iZk3fRHUuzceU3nC1MGtR0xXsA1INkN97e8kFkjM5XEbLiggP2pRdK72YAaNybrYnIE62r8ynoszC2UaQgzBAuNsS5XgsUeRmG0E7WP8dQjShT/tIEhmOmgVwgu9QKBgQC3qsYe03XJiUAzW6JlB8PH9uQYmas2iMEq7mwl83aFKAmUPSuZck+l2TZtQfAKB7+2LSPU65MyR9gpadacROQVHxGzUN6QWU6PqIQhEkNKCaPanpzwm5DQ6GswWIRZb77kTdTk+/70wb5f9dIxbgn8q2QzAC0DFF0nVeF9+SY5KQKBgDka4o1ro3+sDKMjdHxRFur80wiZbMkGypTHSE/eQA2nNdNxOC1PCXVKsxQjaLUnX4wb79Fy4e58gF0giXUgPva5rf8jb1XyyFl4dfjsaxxLirEAIKGL6Z9vU1jaQbxxfikTdt5hH4BC4lxnP2EefzoBb77aFpcZouKMwdQ1vnG1AoGAZJZOcst0kq9sTbQ9t/8MphL80Mw4DGHRCOYSrKYtnrdSp7Dok90a6cWQHT4jbBraT7dhDFcIAl1+cQ/ZzTOdhkPBuebsPTnr4Jl143bRC1dEOZLseIl6Qi9HpO6VbTXZ4ccOdWndM8Z3sK48M34EUjC7a4MJI8qfSc+q8wbkfCECgYA72aNRAMIJ1grpHtyBSkkwJjQUUJ78e3uhYJXjdBMshBw1ZiaBOB2iY6CQ56uFvbnHGwdPW2uxxme/1drtTGXDvmJboTYZsl215rSRhLLzWEf0MBLhN8XwUoo4W8MBFyeqr5A+oUC2RgAAEEgV/7x2lGVPRBE/WoJWwWBfPvelzA==',
 	mode: 'capture',
 	logging: ['api-calls', 'capture', 'storage'],
 	packageIgnores: ['next/font']

examples/with-nextjs/src/app/page.tsx

@@ -50,7 +50,9 @@ function Home() {
 					height={37}
 					priority
 				/>
-				<input value={inputValue} onChange={(e) => setInputValue(e.target.value)} />
+				<div className='text-black'>
+					<input value={inputValue} onChange={(e) => setInputValue(e.target.value)} />
+				</div>
 				<button onClick={() => submit()}>Submit</button>
 			</div>
 

package.json

@@ -33,7 +33,7 @@
 		"lint:all:eslint": "pnpm lint:eslint --ext .ts,.js,.mjs,.cjs \"{src,test}/**/*.{js,json,ts}\"",
 		"lint:all:prettier": "pnpm lint:prettier \"{src,test,examples}/**/*.{js,json,ts}\"",
 		"lint:eslint": "eslint --fix",
-		"lint:prettier": "prettier --write --log-level warn",
+		"lint:prettier": "prettier --write --loglevel warn",
 		"prepublishOnly": "pnpm lint && pnpm test",
 		"release": "np",
 		"test": "vitest run",

src/transform/artifacts/artifacts.ts

@@ -11,6 +11,7 @@ import {
 	VariableDeclarator
 } from '@babel/types'
 import { Artifact } from '../../exports'
+import { getRequiredExportsForCapture } from '../imports'
 
 /**
  * An interop function to make babel's exports work
@@ -54,7 +55,7 @@ export function extractFullFunctionCallName(node: CallExpression): string {
 	return fullNamespacedFunctionCall.slice(0, lastIndexOfOpeningParen)
 }
 
-export function extractFunctionCallName(node: CallExpression): string {
+export function extractFunctionCallName(node: CallExpression): string | 'iife' {
 	if (node.callee.type === 'Identifier') {
 		return node.callee.name
 	}
@@ -88,26 +89,42 @@ export function extractFunctionCallId(
 export function extractCurrentScope(
 	path: NodePath<
 		CallExpression | FunctionDeclaration | FunctionExpression | ArrowFunctionExpression
-	>
+	>,
+	includeCallExpressions = false
 ): string[] {
 	const scopes: string[] = []
-
 	let currentPath: NodePath<Node> = path
 
 	while (currentPath.parentPath) {
 		currentPath = currentPath.parentPath
 
-		if (currentPath.node.type === 'BlockStatement') {
-			scopes.push('{}')
+		if (includeCallExpressions && currentPath.node.type === 'CallExpression') {
+			const functionCallName = extractFunctionCallName(currentPath.node)
+			if (
+				functionCallName !== 'iife' &&
+				!getRequiredExportsForCapture().includes(functionCallName)
+			) {
+				scopes.push(functionCallName)
+			}
 		}
-		if (['FunctionDeclaration', 'FunctionExpression'].includes(currentPath.node.type)) {
+
+		if (
+			['FunctionDeclaration', 'FunctionExpression', 'ArrowFunctionExpression'].includes(
+				currentPath.node.type
+			)
+		) {
 			let scopeName: string
 			if (currentPath.node.type === 'FunctionExpression') {
 				if (currentPath.node.id?.type === 'Identifier') {
 					scopeName = extractFunctionName(currentPath.node as FunctionExpression)
 				} else {
 					scopeName = extractFunctionName(currentPath.parent as VariableDeclarator)
 				}
+			} else if (
+				currentPath.node.type === 'ArrowFunctionExpression' &&
+				currentPath.parent.type === 'VariableDeclarator'
+			) {
+				scopeName = extractFunctionName(currentPath.parent)
 			} else {
 				scopeName = extractFunctionName(currentPath.node as FunctionDeclaration)
 			}
@@ -147,7 +164,7 @@ export function extractArtifacts(code: string, filePath: string): Artifact[] {
 				functionOrCallName: functionName,
 				type: 'FUNCTION',
 				params: extractParams(path.node.params as Identifier[]),
-				scopes,
+				scopes: extractCurrentScope(path, true),
 				source: {
 					filePath,
 					lineNumber: getLineNumber(path.node)
@@ -165,7 +182,7 @@ export function extractArtifacts(code: string, filePath: string): Artifact[] {
 				functionOrCallName: functionName,
 				type: 'FUNCTION',
 				params: extractParams(path.node.params as Identifier[]),
-				scopes,
+				scopes: extractCurrentScope(path, true),
 				source: {
 					filePath,
 					lineNumber: getLineNumber(path.node)
@@ -183,7 +200,7 @@ export function extractArtifacts(code: string, filePath: string): Artifact[] {
 				functionOrCallName: functionName,
 				type: 'FUNCTION',
 				params: extractParams(path.node.params as Identifier[]),
-				scopes,
+				scopes: extractCurrentScope(path, true),
 				source: {
 					filePath,
 					lineNumber: getLineNumber(path.node)
@@ -203,7 +220,7 @@ export function extractArtifacts(code: string, filePath: string): Artifact[] {
 				fullFunctionName: fullFunctionCallName,
 				type: 'CALL',
 				params: extractParams(path.node.arguments as Identifier[]),
-				scopes,
+				scopes: extractCurrentScope(path, true),
 				source: {
 					filePath,
 					lineNumber: getLineNumber(path.node)

test/artifacts.test.ts

@@ -129,7 +129,7 @@ describe('extractCurrentScope', () => {
 		{
 			name: 'block scope',
 			fixture: `{ foo() }`,
-			scopes: ['{}']
+			scopes: []
 		},
 		{
 			name: 'arrow function scope',
@@ -138,7 +138,7 @@ describe('extractCurrentScope', () => {
 				foo()
 			}
 			`,
-			scopes: ['{}']
+			scopes: ['arrowFuncScope']
 		},
 		{
 			name: 'function expression scope',
@@ -147,7 +147,7 @@ describe('extractCurrentScope', () => {
 				foo()
 			}
 			`,
-			scopes: ['funcExprScope', '{}']
+			scopes: ['funcExprScope']
 		},
 		{
 			name: 'function declaration scope',
@@ -156,7 +156,16 @@ describe('extractCurrentScope', () => {
 				foo()
 			}
 			`,
-			scopes: ['funcDeclScope', '{}']
+			scopes: ['funcDeclScope']
+		}
+	]
+	const scopeFuncFixtures = [
+		{
+			name: 'function call scope',
+			fixture: `
+			users.find((u) => u.name === '')
+			`,
+			scopes: ['find']
 		}
 	]
 
@@ -171,7 +180,16 @@ describe('extractCurrentScope', () => {
 		}
 	})
 
-	it.todo('extracts scope for functions')
+	it('extracts scope for functions', () => {
+		for (let i = 0; i < scopeFuncFixtures.length; i++) {
+			const ast = parse(scopeFuncFixtures[i].fixture, { parser: babelTsParser })
+			_babelInterop(babelTraverse)(ast, {
+				ArrowFunctionExpression(path) {
+					expect(extractCurrentScope(path, true)).toEqual(scopeFuncFixtures[i].scopes)
+				}
+			})
+		}
+	})
 })
 
 describe('Artifacts for function calls', () => {