fix(auto-imports): inject active element composable

chrisbbreuer · chrisbbreuer · commit 27998f86b983 · 2026-08-10T19:21:37.000-07:00
diff --git a/packages/stx/src/client-script.ts b/packages/stx/src/client-script.ts
@@ -349,7 +349,7 @@ const BROWSER_CORE_IMPORTS = [
   'debounce', 'throttle', 'retry', 'sleep', 'wait', 'delay', 'waitUntil', 'waitWhile',
   'lazy', 'clamp', 'rand', 'readableSize',
   // Stacks composables that are not part of the STX-native runtime
-  'useDocumentVisibility', 'useIntervalFn',
+  'useActiveElement', 'useDocumentVisibility', 'useIntervalFn',
 ]
 
 export interface BrowserCoreAutoImportResult {
diff --git a/packages/stx/src/runtime-injection.ts b/packages/stx/src/runtime-injection.ts
@@ -56,7 +56,7 @@ export function injectBrowserRuntime(template: string): string {
     'browserQuery', 'BrowserQueryBuilder', 'configureBrowser', 'createBrowserModel',
     'debounce', 'throttle', 'retry', 'sleep', 'wait', 'delay', 'waitUntil', 'waitWhile',
     'lazy', 'clamp', 'rand', 'readableSize',
-    'useDocumentVisibility', 'useIntervalFn',
+    'useActiveElement', 'useDocumentVisibility', 'useIntervalFn',
   ]
 
   // Check for core browser utilities in CLIENT code only
diff --git a/packages/stx/test/client-script-external.test.ts b/packages/stx/test/client-script-external.test.ts
@@ -94,13 +94,14 @@ const result = retry(() => 'ready')
   it('auto-imports browser utilities and Stacks-only composables as bundle inputs', () => {
     const output = injectBrowserCoreAutoImports(`
 const load = debounce(() => {}, 250)
+const activeElement = useActiveElement()
 const visibility = useDocumentVisibility()
 const controls = useIntervalFn(load, 15000)
 `)
 
-    expect(output.imports).toEqual(['debounce', 'useDocumentVisibility', 'useIntervalFn'])
+    expect(output.imports).toEqual(['debounce', 'useActiveElement', 'useDocumentVisibility', 'useIntervalFn'])
     expect(output.models).toEqual([])
-    expect(output.code).toContain(`import { debounce, useDocumentVisibility, useIntervalFn } from '@stacksjs/browser'`)
+    expect(output.code).toContain(`import { debounce, useActiveElement, useDocumentVisibility, useIntervalFn } from '@stacksjs/browser'`)
   })
 
   it('does not shadow locally declared browser helper names', () => {
@@ -120,7 +121,7 @@ const load = debounce(() => {})
     const output = injectBrowserRuntime(`
 <html>
   <head></head>
-  <body><script client>const load = debounce(() => {}, 250)</script></body>
+  <body><script client>const activeElement = useActiveElement()</script></body>
 </html>
 `)
 

Original file line number	Diff line number	Diff line change
`@@ -349,7 +349,7 @@ const BROWSER_CORE_IMPORTS = [`
`349`	`349`	`'debounce', 'throttle', 'retry', 'sleep', 'wait', 'delay', 'waitUntil', 'waitWhile',`
`350`	`350`	`'lazy', 'clamp', 'rand', 'readableSize',`
`351`	`351`	`// Stacks composables that are not part of the STX-native runtime`
`352`		`- 'useDocumentVisibility', 'useIntervalFn',`
	`352`	`+ 'useActiveElement', 'useDocumentVisibility', 'useIntervalFn',`
`353`	`353`	`]`
`354`	`354`
`355`	`355`	`export interface BrowserCoreAutoImportResult {`
Original file line number	Diff line number	Diff line change
`@@ -56,7 +56,7 @@ export function injectBrowserRuntime(template: string): string {`
`56`	`56`	`'browserQuery', 'BrowserQueryBuilder', 'configureBrowser', 'createBrowserModel',`
`57`	`57`	`'debounce', 'throttle', 'retry', 'sleep', 'wait', 'delay', 'waitUntil', 'waitWhile',`
`58`	`58`	`'lazy', 'clamp', 'rand', 'readableSize',`
`59`		`- 'useDocumentVisibility', 'useIntervalFn',`
	`59`	`+ 'useActiveElement', 'useDocumentVisibility', 'useIntervalFn',`
`60`	`60`	`]`
`61`	`61`
`62`	`62`	`// Check for core browser utilities in CLIENT code only`