@kudzujs/core 0.8.19 → 0.8.21

package/framework/build.mjs

@@ -11,6 +11,7 @@ import { normalizeMediaQueryExternalStores, normalizeNavigatorCapabilityConditio
 import { analyzeCollectionPipeline, collectionExpression, collectionParameters, isArrayFromCall, mutatingCollectionMethods as mutatingListMethods, pureCollectionMathMethods as pureMathMethods, pureCollectionMethods as pureListMethods } from "./compiler/collection-analysis.mjs"
 import { normalizeCustomHookTimerRefs } from "./compiler/custom-hook-timer-pass.mjs"
 import { captureNames, createDescriptorSession, createSemanticArtifact, nativeCaptureNames, referencedReducerDispatches, referencedStateNames } from "./compiler/descriptor-session.mjs"
+import { analyzeEffectDependencies, validateEffectOwnedBrowserResources } from "./compiler/effect-analysis.mjs"
 import { createEffectCodegen } from "./compiler/effect-codegen.mjs"
 import { createHandlerCodegen } from "./compiler/handler-codegen.mjs"
 import { createHandlerLowering } from "./compiler/handler-lowering.mjs"
@@ -75,12 +76,16 @@ export async function build({ quiet = false, minify = true } = {}) {
   const { cssModules, cssOutputs } = await prepareSourceStyles(cssFiles, staticFiles, importedAssets, base)
 
   const sourceResults = []
-  const workerReferences = []
   for (const file of sourceFiles) {
     if (file.endsWith(".worker.ts")) continue
-    sourceResults.push(await compile(file, sourceFileSet, sourceIndex, staticFiles, importedAssets, cssModules, base, workerReferences))
+    sourceResults.push(await compile(file, sourceFileSet, sourceIndex, staticFiles, importedAssets, cssModules, base))
   }
   const handlerModules = sourceResults.flatMap(result => result.handlerModule ? [result.handlerModule] : [])
+  const workerReferences = sourceResults.flatMap(result => result.moduleIR.effects.flatMap(effect => {
+    const handler = result.moduleIR.handlers[effect.setup.handler]
+    if (!handler || handler.kind !== "module-export" || handler.role !== "effect") throw new Error(`EffectIR ${effect.slot} has no effect HandlerIR`)
+    return effect.workers.map(worker => ({ ...worker, module: assetPath(base, `assets/${result.handlerModule.path}`), handler: handler.exportName }))
+  }))
 
   const plans = []
   const routeCapabilities = new Map()
@@ -678,7 +683,7 @@ function escapeAttribute(value) {
   return escapeHtml(value).replaceAll('"', """).replaceAll("'", "'")
 }
 
-async function compile(file, sourceFiles, sourceIndex, staticFiles, importedAssets, cssModules, base, workerReferences) {
+async function compile(file, sourceFiles, sourceIndex, staticFiles, importedAssets, cssModules, base) {
   const source = sourceIndex.get(file)
   const semantic = createSemanticArtifact(relative(root, file).replaceAll(sep, "/"))
   const handlerPath = `handlers/${relative(sourceDirectory, file).replaceAll(sep, "/").replace(/\.(?:ts|tsx)$/, ".js")}`
@@ -690,7 +695,7 @@ async function compile(file, sourceFiles, sourceIndex, staticFiles, importedAsse
       jsx: ts.JsxEmit.ReactJSX,
       jsxImportSource: "@kudzujs/core"
     },
-    transformers: { before: [createKudzuTransformer({ semantic, handlerUrl: assetPath(base, `assets/${handlerPath}`), file, sourceFiles, sourceIndex, staticFiles, importedAssets, cssModules, base, workerReferences })] },
+    transformers: { before: [createKudzuTransformer({ semantic, handlerUrl: assetPath(base, `assets/${handlerPath}`), file, sourceFiles, sourceIndex, staticFiles, importedAssets, cssModules, base })] },
     reportDiagnostics: true
   })
 
@@ -882,7 +887,7 @@ function normalizeCompilerSource(sourceFile, { base, context, file, importedColl
   return { sourceFile, customHookTimerStates }
 }
 
-function createKudzuTransformer({ semantic, handlerUrl, file, sourceFiles, sourceIndex, staticFiles, importedAssets, cssModules, base, workerReferences }) {
+function createKudzuTransformer({ semantic, handlerUrl, file, sourceFiles, sourceIndex, staticFiles, importedAssets, cssModules, base }) {
   const { moduleIR } = semantic
   return context => sourceFile => {
     const hasLinkElements = /<link/i.test(sourceFile.text)
@@ -952,14 +957,8 @@ function createKudzuTransformer({ semantic, handlerUrl, file, sourceFiles, sourc
     const customHooks = new Map()
     const jsxLocalDeclarations = new Map()
     const jsxLocalsByFunction = new Map()
-    const listLocalDeclarations = new WeakSet()
-    const listLocalUses = new WeakMap()
-    const listValues = new WeakMap()
-    const listEventItems = new WeakMap()
-    const listConditions = new WeakMap()
-    const nestedLists = new WeakMap()
-    const listEffectEntries = new WeakMap()
-    const componentEffectEntries = new WeakMap()
+    const listLocalDeclarations = []
+    const listLocalUses = []
     const analysisSource = node => {
       const original = ts.getOriginalNode(node)
       return original.pos >= 0 && original.end >= 0 ? { file: sourceName(original.getSourceFile()), start: original.getStart(), end: original.end } : undefined
@@ -1340,8 +1339,8 @@ function createKudzuTransformer({ semantic, handlerUrl, file, sourceFiles, sourc
           const position = sourceFile.getLineAndCharacterOfPosition(declaration.node.getStart(sourceFile))
           if (uses.length > 1) throw new Error(`${sourceFile.fileName}:${position.line + 1}:${position.character + 1} Keyed list local "${name}" must be rendered exactly once`)
           if (references !== uses.length) throw new Error(`${sourceFile.fileName}:${position.line + 1}:${position.character + 1} Keyed list local "${name}" may only be used as a JSX child`)
-          listLocalDeclarations.add(declaration.node)
-          if (uses.length) listLocalUses.set(uses[0], parts)
+          listLocalDeclarations.push(declaration.node)
+          if (uses.length) listLocalUses.push({ node: uses[0], parts })
         }
       }
     }
@@ -1484,6 +1483,7 @@ function createKudzuTransformer({ semantic, handlerUrl, file, sourceFiles, sourc
         ids: result.ordinaryIds.map(({ name, source }) => ({ name, ...(analysisSource(source) ? { source: analysisSource(source) } : {}) }))
       })
       for (const state of [...result.rowStates, ...result.ordinaryStates]) state.analysisOwner = `specialization:${result.analysis.slot}`
+      for (const ref of [...result.rowRefs, ...result.ordinaryRefs]) ref.analysisOwner = `specialization:${result.analysis.slot}`
       return result
     }
     const registerRowHooks = (call, specialization) => {
@@ -1728,8 +1728,7 @@ function createKudzuTransformer({ semantic, handlerUrl, file, sourceFiles, sourc
         const effectStatements = specialization.effects.map(entry => {
           const effectCall = factory.updateCallExpression(entry.call, factory.createIdentifier("__kComponentUseEffect"), entry.call.typeArguments, entry.call.arguments)
           synthesizeTree(effectCall)
-          const effectSource = entry.source.getSourceFile()
-          componentEffectEntries.set(effectCall, { source: entry.source, sourceFile: effectSource, imports: clientImportBindings(effectSource, effectSource.fileName, sourceFiles) })
+          ts.setOriginalNode(effectCall, entry.source)
           return factory.createExpressionStatement(effectCall)
         })
         const helper = factory.createFunctionDeclaration(
@@ -1847,20 +1846,20 @@ function createKudzuTransformer({ semantic, handlerUrl, file, sourceFiles, sourc
           if (expanded === value || !referencedStateNames(expanded, setters).size) fail(value, "Calculated collection fields must directly depend on local state")
           return expanded
         }
-        const parts = listLocalUses.get(node) ?? keyedListParts(node.expression, setters, jsxLocalDeclarations.get(owner), fail, new Set(), importedCollections, factory, context, importedCollectionTransforms, calculatedCollection, staticCollection)
+        const parts = listLocalUses.find(entry => entry.node === node)?.parts ?? keyedListParts(node.expression, setters, jsxLocalDeclarations.get(owner), fail, new Set(), importedCollections, factory, context, importedCollectionTransforms, calculatedCollection, staticCollection)
         if (parts) {
-          for (const declaration of parts.aliasDeclarations ?? []) listLocalDeclarations.add(declaration)
+          for (const declaration of parts.aliasDeclarations ?? []) if (!listLocalDeclarations.includes(declaration)) listLocalDeclarations.push(declaration)
           rawRenderedLists.push({ node, parts })
         }
       }
       ts.forEachChild(node, collectRenderedLists)
     }
     collectRenderedLists(sourceFile)
-    const collectionAliasUses = new WeakSet(rawRenderedLists.flatMap(({ parts }) => parts.aliasUses ?? []))
+    const collectionAliasUses = rawRenderedLists.flatMap(({ parts }) => parts.aliasUses ?? [])
     const collectionAliasDeclarations = new Set(rawRenderedLists.flatMap(({ parts }) => parts.aliasDeclarations ?? []))
     for (const declaration of collectionAliasDeclarations) {
       const owner = nearestFunction(declaration)
-      const unsupported = identifierReferences(owner.body, declaration.name.text).find(reference => !collectionAliasUses.has(reference))
+      const unsupported = identifierReferences(owner.body, declaration.name.text).find(reference => !collectionAliasUses.includes(reference))
       if (unsupported) fail(unsupported, `Rendered collection alias "${declaration.name.text}" may only be used as a rendered collection source`)
     }
     const rejectUnsupportedRenderControl = node => {
@@ -1912,7 +1911,7 @@ function createKudzuTransformer({ semantic, handlerUrl, file, sourceFiles, sourc
       let count = 0
       const visit = (node, currentAggregate = aggregate) => {
         if (node !== root && ts.isCallExpression(node) && ts.isPropertyAccessExpression(node.expression) && node.expression.name.text === "map" && containsJsx(node)) {
-          const nestedAggregate = { calculations: [], effects: [], hookDeclarations: [], rowStates: [], rowRefs: [] }
+          const nestedAggregate = { calculations: [], effects: [], hookDeclarations: [], rowStates: [], rowRefs: [], specializations: [] }
           for (const argument of node.arguments) visit(argument, nestedAggregate)
           if (nestedAggregate.hookDeclarations.length || nestedAggregate.effects.length) nestedRowSpecializations.set(`${node.pos}:${node.end}`, nestedAggregate)
           return
@@ -1939,6 +1938,8 @@ function createKudzuTransformer({ semantic, handlerUrl, file, sourceFiles, sourc
           if (imported) synthesizeTree(specialization.root = mergeSpecializedImports(specialization.root, component.getSourceFile(), node, specialization.effects))
           expandedRowSpecializations.set(specialization.root, specialization)
           if (currentAggregate) {
+            currentAggregate.specializations ??= []
+            currentAggregate.specializations.push(specialization.analysis.slot, ...(specialization.specializations ?? []))
             currentAggregate.effects.push(...specialization.effects)
             currentAggregate.hookDeclarations.push(...specialization.hookDeclarations)
             currentAggregate.rowStates.push(...specialization.rowStates)
@@ -1957,16 +1958,15 @@ function createKudzuTransformer({ semantic, handlerUrl, file, sourceFiles, sourc
       expanded.parent = root.parent
       return expanded
     }
-    const renderedLists = new WeakMap()
-    const prepareListCallback = (callback, root, specialization, item) => {
+    const preparedRenderedLists = []
+    const prepareListCallback = (callback, root, specialization) => {
       const statements = [...specialization.hookDeclarations]
       if (specialization.effects.length) {
         usesListEffects = true
         statements.push(...specialization.effects.map(entry => {
           const call = factory.updateCallExpression(entry.call, factory.createIdentifier("__kListUseEffect"), entry.call.typeArguments, entry.call.arguments)
           synthesizeTree(call)
-          const effectSource = entry.source.getSourceFile()
-          listEffectEntries.set(call, { item, source: entry.source, sourceFile: effectSource, imports: clientImportBindings(effectSource, effectSource.fileName, sourceFiles) })
+          ts.setOriginalNode(call, entry.source)
           return factory.createExpressionStatement(call)
         }))
       }
@@ -1997,15 +1997,23 @@ function createKudzuTransformer({ semantic, handlerUrl, file, sourceFiles, sourc
         ts.setParentRecursive(callback, false)
         callback.parent = originalParts.callback.parent
       }
-      callback = prepareListCallback(callback, root, specialization, originalParts.item)
-      const parts = { ...originalParts, root, callback, analysisStateOwners: new Map([...stateOwnersForNode(originalParts.root), ...[...specialization.rowStates, ...specialization.ordinaryStates].map(state => [state.state, state.analysisOwner])]) }
+      callback = prepareListCallback(callback, root, specialization)
+      const parts = {
+        ...originalParts,
+        root,
+        callback,
+        specializations: [specialization.analysis?.slot, ...(specialization.specializations ?? [])].filter(slot => slot !== undefined),
+        rowStates: [...specialization.rowStates, ...specialization.ordinaryStates],
+        rowRefs: specialization.rowRefs,
+        analysisStateOwners: new Map([...stateOwnersForNode(originalParts.root), ...[...specialization.rowStates, ...specialization.ordinaryStates].map(state => [state.state, state.analysisOwner])])
+      }
       for (const calculation of specialization.calculations) {
         ts.setParentRecursive(calculation, false)
         calculation.parent = callback
         validateListExpression(calculation, parts.item, originalParts.root, fail)
       }
-      validateKeyedList(parts, sourceFile, listValues, listEventItems, listConditions, settersForNode(originalParts.root, settersByFunction), specialization.rowStates, nestedLists, componentSpecializations, expandedRowSpecializations, nestedRowSpecializations, factory, prepareListCallback)
-      renderedLists.set(node, parts)
+      const analysis = validateKeyedList(parts, sourceFile, settersForNode(originalParts.root, settersByFunction), specialization.rowStates, componentSpecializations, expandedRowSpecializations, nestedRowSpecializations, factory, prepareListCallback)
+      preparedRenderedLists.push({ node, parts, analysis })
     }
 
     const compileRenderExpression = (expression, anchor) => {
@@ -2027,6 +2035,7 @@ function createKudzuTransformer({ semantic, handlerUrl, file, sourceFiles, sourc
     }
 
     let activeStateOwners
+    let activeKeyedBlock
     const visitWithStateOwners = (node, stateOwners) => {
       const previous = activeStateOwners
       activeStateOwners = new Map([...(previous ?? []), ...stateOwners])
@@ -2034,6 +2043,58 @@ function createKudzuTransformer({ semantic, handlerUrl, file, sourceFiles, sourc
       activeStateOwners = previous
       return result
     }
+    const keyedEntry = (entries, node) => entries.find(entry => entry.node === node)
+    const compileKeyedBlock = (node, { parts: listParts, analysis }) => {
+      usesBehavior = true
+      usesList = true
+      const blockSlot = moduleIR.keyedBlocks.length
+      let listSource = listParts.state
+      let collection = { kind: "signal", name: listParts.state?.text }
+      if (listParts.calculation) {
+        usesBinding = true
+        listSource = descriptors.compileReactiveBinding(listParts.calculation, { setters: settersForNode(node, settersByFunction), importBindings, keyedBlock: blockSlot })
+        const exportName = ts.isCallExpression(listSource) && ts.isStringLiteral(listSource.arguments[2]) ? listSource.arguments[2].text : undefined
+        collection = { kind: "binding", ...(exportName ? { exportName } : {}) }
+      }
+      const derived = listParts.selector?.length ? descriptors.registerDerived("selector", listParts.selector, listParts.selectorStates, node) : undefined
+      const parent = activeKeyedBlock?.block
+      const rowStates = (listParts.rowStates ?? []).map(state => ({ name: state.state, setter: state.setter, owner: state.analysisOwner, ...(analysisSource(state.source) ? { source: analysisSource(state.source) } : {}) }))
+      const rowRefs = (listParts.rowRefs ?? []).map(ref => ({ name: ref.name, owner: ref.analysisOwner, ...(analysisSource(ref.source) ? { source: analysisSource(ref.source) } : {}) }))
+      const specializations = [...new Set([...(listParts.specializations ?? []), ...rowStates.map(state => state.owner), ...rowRefs.map(ref => ref.owner)].filter(value => value !== undefined).map(value => typeof value === "string" ? Number(value.slice(value.lastIndexOf(":") + 1)) : value))]
+      const block = descriptors.registerKeyedBlock({
+        ...(analysisSource(node) ? { source: analysisSource(node) } : {}),
+        ...(parent ? { parent: parent.slot } : {}),
+        children: [],
+        collection,
+        key: listParts.keyField,
+        ...(listParts.ownerField ? { ownerField: listParts.ownerField } : {}),
+        item: listParts.item,
+        ...(listParts.index ? { index: listParts.index } : {}),
+        indexed: listParts.indexed,
+        static: Boolean(listParts.static),
+        ...(derived ? { selector: derived.slot } : {}),
+        selectorStates: [...(listParts.selectorStates ?? [])],
+        specializations,
+        rowStates,
+        rowRefs
+      })
+      if (parent) parent.children.push(block.slot)
+      const previous = activeKeyedBlock
+      activeKeyedBlock = { analysis, block, parts: listParts }
+      const callback = visitWithStateOwners(listParts.callback, listParts.analysisStateOwners ?? new Map())
+      activeKeyedBlock = previous
+      const arguments_ = [
+        listSource,
+        block.key === null ? factory.createNull() : factory.createStringLiteral(block.key),
+        callback,
+        factory.createStringLiteral(block.ownerField ?? ""),
+        jsonExpression(derived?.selector ?? listParts.selector ?? [], factory),
+        block.indexed ? factory.createTrue() : factory.createFalse()
+      ]
+      if (block.selectorStates.length || block.static) arguments_.push(factory.createArrayLiteralExpression(block.selectorStates.map(name => factory.createArrayLiteralExpression([factory.createStringLiteral(name), factory.createIdentifier(name)]))))
+      if (block.static) arguments_.push(factory.createTrue())
+      return factory.updateJsxExpression(node, factory.createCallExpression(factory.createIdentifier("__kList"), undefined, arguments_))
+    }
     const visitor = node => {
       if (ts.isVariableDeclaration(node) && ts.isObjectBindingPattern(node.name) && customHookPrivateFields.has(node)) {
         const privateFields = customHookPrivateFields.get(node)
@@ -2077,10 +2138,14 @@ function createKudzuTransformer({ semantic, handlerUrl, file, sourceFiles, sourc
         return factory.updateExportDeclaration(node, node.modifiers, node.isTypeOnly, node.exportClause, factory.createStringLiteral(relativeModulePath(compiledPath(file), compiledPath(target))), node.attributes)
       }
 
-      const listEffect = ts.isCallExpression(node) ? listEffectEntries.get(node) : undefined
-      const componentEffect = ts.isCallExpression(node) ? componentEffectEntries.get(node) : undefined
-      const specializedEffect = listEffect ?? componentEffect
-      if (ts.isCallExpression(node) && ts.isIdentifier(node.expression) && (hasUseEffectImport && node.expression.text === "useEffect" || specializedEffect)) {
+      const effectAlias = ts.isCallExpression(node) && ts.isIdentifier(node.expression) ? node.expression.text : undefined
+      const listEffect = effectAlias === "__kListUseEffect"
+      const specializedEffect = listEffect || effectAlias === "__kComponentUseEffect" ? (() => {
+        const source = ts.getOriginalNode(node)
+        const sourceFile = source.getSourceFile()
+        return { source, sourceFile, imports: clientImportBindings(sourceFile, sourceFile.fileName, sourceFiles) }
+      })() : undefined
+      if (ts.isCallExpression(node) && ts.isIdentifier(node.expression) && (hasUseEffectImport && effectAlias === "useEffect" || specializedEffect)) {
         const effectFail = (target, message) => {
           if (specializedEffect) throw sourceNodeError(specializedEffect.source, specializedEffect.sourceFile, message)
           fail(target, message)
@@ -2101,58 +2166,18 @@ function createKudzuTransformer({ semantic, handlerUrl, file, sourceFiles, sourc
         if (callback.asteriskToken) effectFail(callback, "useEffect() callback cannot be a generator")
         if (callback.parameters.length) effectFail(callback, "useEffect() callback cannot declare parameters")
         if (!ts.isArrayLiteralExpression(dependencies)) effectFail(dependencies, "useEffect() dependencies must be a literal array")
-        const itemDependencies = []
-        const ordinaryDependencies = []
         const setters = settersForNode(node, settersByFunction)
-        let dependencyItem = listEffect?.item
-        for (const dependency of dependencies.elements) {
-          const value = unwrapExpression(dependency)
-          if (!dependencyItem && ts.isPropertyAccessExpression(value) && ts.isIdentifier(value.expression) && isDestructuredParameter(value.expression, nearestFunction(node))) dependencyItem = value.expression.text
-          const field = dependencyItem && directProperty(dependency, dependencyItem)
-          if (field) {
-            if (["__proto__", "constructor", "prototype"].includes(field)) effectFail(dependency, `useEffect() keyed item property "${field}" is not supported`)
-            itemDependencies.push(field)
-          } else if (dependencyItem && referencesIdentifier(dependency, dependencyItem)) {
-            effectFail(dependency, "useEffect() keyed item dependencies must be direct item.<field> properties")
-          } else {
-            ordinaryDependencies.push(dependency)
-          }
-        }
-        const invalidDependency = ordinaryDependencies.find(dependency => !ts.isIdentifier(dependency))
-        if (invalidDependency) effectFail(invalidDependency, "useEffect() dependencies must be direct state or runtime parameter identifiers")
-        const dependencyDerived = []
-        const dependencyStates = new Map()
-        const dependencySubstitutions = new Map()
-        const subscriptionDependencies = []
-        let hasDerivedDependency = false
-        const stateNames = new Set(setters.values())
-        const localDeclarations = jsxLocalDeclarations.get(nearestFunction(node))
-        for (const dependency of ordinaryDependencies) {
-          const entries = localDeclarations?.get(dependency.text)
-          const initializer = entries?.length === 1 ? entries[0].initializer : undefined
-          const directAlias = initializer && ts.isIdentifier(unwrapExpression(initializer)) && stateNames.has(unwrapExpression(initializer).text)
-          const derivedStates = initializer && !directAlias ? referencedStateNames(initializer, setters) : new Set()
-          if (derivedStates.size) {
-            const usedStates = new Set()
-            const expression = collectionExpression(initializer, { fail: effectFail, stateNames, selectorStates: usedStates })
-            if (!usedStates.size) effectFail(dependency, `useEffect() derived dependency "${dependency.text}" must read direct primitive state`)
-            dependencyDerived.push({ expression, states: usedStates, source: initializer })
-            for (const name of usedStates) {
-              subscriptionDependencies.push(factory.createIdentifier(name))
-              dependencyStates.set(name, factory.createIdentifier(name))
-            }
-            dependencySubstitutions.set(dependency.text, initializer)
-            hasDerivedDependency = true
-          } else {
-            subscriptionDependencies.push(dependency)
-            dependencyDerived.push({ expression: ["state", dependency.text], states: [dependency.text], source: dependency })
-            dependencyStates.set(dependency.text, dependency)
-          }
-        }
-        if (!hasDerivedDependency) {
-          dependencyDerived.length = 0
-          dependencyStates.clear()
-        }
+        const dependencyAnalysis = analyzeEffectDependencies({
+          dependencies,
+          node,
+          listEffect,
+          keyedItem: activeKeyedBlock?.parts.item,
+          setters,
+          localDeclarations: jsxLocalDeclarations.get(nearestFunction(node)),
+          factory,
+          fail: effectFail
+        })
+        const { dependencyItem, itemDependencies, ordinaryDependencies, entries: dependencyEntries, dependencyStates, substitutions: dependencySubstitutions, subscriptions: subscriptionDependencies, hasDerived: hasDerivedDependency } = dependencyAnalysis
         if (!effectOwner) fail(node, "useEffect() cannot be used outside a Kudzu component")
         if (!ts.isBlock(callback.body)) effectFail(callback, "useEffect() callback must use a block body")
         const cleanupSubstitutions = new Map()
@@ -2178,43 +2203,62 @@ function createKudzuTransformer({ semantic, handlerUrl, file, sourceFiles, sourc
         validateEffectOwnedBrowserResources(callback, returns, effectFail)
         const callbackSource = specializedEffect?.sourceFile ?? sourceFile
         const callbackFile = callbackSource.fileName
-        const workerStart = workerReferences.length
         let compiledCallback = dependencySubstitutions.size ? substituteClone(callback, dependencySubstitutions, factory, context) : callback
         if (compiledCallback !== callback) {
           ts.setParentRecursive(compiledCallback, false)
           compiledCallback.parent = callback.parent
         }
+        let workers = []
         if (listEffect && callbackFile !== file) {
-          const originalCallback = listEffect.source.arguments[0]
+          const originalCallback = specializedEffect.source.arguments[0]
           workerCompiler.rejectConstructions(originalCallback, callbackSource, "Relative TypeScript Worker construction in imported keyed-row effects is not supported; construct the Worker in a directly compiled page or local component effect")
         } else {
-          compiledCallback = workerCompiler.rewriteEffect(compiledCallback, callbackFile, callbackSource, sourceFiles, workerReferences, factory, context)
+          const rewritten = workerCompiler.rewriteEffect(compiledCallback, callbackFile, callbackSource, sourceFiles, factory, context)
+          compiledCallback = rewritten.callback
+          workers = rewritten.workers
         }
         const descriptor = descriptors.compileEffectCallback(compiledCallback, {
           setters,
           reducers: reducersForNode(node, reducersByFunction),
           importBindings: specializedEffect?.imports ?? importBindings,
           listItem: dependencyItem,
+          keyedBlock: activeKeyedBlock?.block.slot,
           deferValues: true,
           snapshotNested: returns.cleanup,
           liveStates: customHookTimerStates
         })
-        for (const reference of workerReferences.slice(workerStart)) Object.assign(reference, { module: handlerUrl, handler: descriptor.exportName })
         usesListItem ||= Boolean(itemDependencies.length && !listEffect)
         usesBehavior = true
-        const derivedDependencies = hasDerivedDependency ? dependencyDerived.map(entry => descriptors.registerDerived("expression", entry.expression, entry.states, entry.source)) : []
+        const derivedDependencies = hasDerivedDependency ? dependencyEntries.map(entry => entry.kind === "derived" ? descriptors.registerDerived("expression", entry.expression, entry.states, entry.source) : undefined) : []
+        const effectSource = specializedEffect?.source ?? node
+        const lexicalOwner = nearestFunction(effectSource)
+        const effect = descriptors.registerEffect(descriptor, {
+          cleanup: returns.cleanup,
+          dependencies: hasDerivedDependency ? dependencyEntries.map((entry, index) => entry.kind === "derived" ? { kind: "derived", derived: derivedDependencies[index].slot, sources: [...entry.states] } : { kind: "signal", name: entry.name }) : ordinaryDependencies.map(dependency => ({ kind: "signal", name: dependency.text })),
+          subscriptions: (hasDerivedDependency ? subscriptionDependencies : ordinaryDependencies).map(dependency => dependency.text),
+          dependencyStates: [...dependencyStates.keys()],
+          itemDependencies,
+          ownership: {
+            kind: activeKeyedBlock ? "keyed" : "component",
+            ...(activeKeyedBlock ? { keyedBlock: activeKeyedBlock.block.slot } : {}),
+            ...(lexicalOwner ? { component: { name: ownerName(lexicalOwner), ...(analysisSource(lexicalOwner) ? { source: analysisSource(lexicalOwner) } : {}) } } : {})
+          },
+          workers,
+          ...(analysisSource(effectSource) ? { source: analysisSource(effectSource) } : {})
+        })
+        const dependencyExpressions = effect.dependencies.map(dependency => dependency.kind === "derived" ? moduleIR.derived[dependency.derived].expression : ["state", dependency.name])
         return factory.updateCallExpression(node, node.expression, node.typeArguments, [
           callback,
-          factory.createArrayLiteralExpression(hasDerivedDependency ? subscriptionDependencies : ordinaryDependencies),
+          factory.createArrayLiteralExpression(effect.subscriptions.map(name => factory.createIdentifier(name))),
           factory.createStringLiteral(handlerUrl),
-          factory.createStringLiteral(descriptor.exportName),
+          factory.createStringLiteral(effect.setup.exportName),
           descriptor.states,
           descriptor.scope,
           factory.createStringLiteral(specializedEffect ? sourceLocation(specializedEffect.source, specializedEffect.sourceFile) : sourceLocation(node, sourceFile)),
-          returns.cleanup ? factory.createTrue() : factory.createFalse(),
-          factory.createArrayLiteralExpression(itemDependencies.map(field => factory.createStringLiteral(field))),
-          hasDerivedDependency ? jsonExpression(derivedDependencies.map(entry => entry.expression), factory) : factory.createArrayLiteralExpression(),
-          factory.createArrayLiteralExpression([...dependencyStates].map(([name, state]) => factory.createArrayLiteralExpression([factory.createStringLiteral(name), state])))
+          effect.cleanup ? factory.createTrue() : factory.createFalse(),
+          factory.createArrayLiteralExpression(effect.itemDependencies.map(field => factory.createStringLiteral(field))),
+          hasDerivedDependency ? jsonExpression(dependencyExpressions, factory) : factory.createArrayLiteralExpression(),
+          factory.createArrayLiteralExpression(effect.dependencyStates.map(name => factory.createArrayLiteralExpression([factory.createStringLiteral(name), factory.createIdentifier(name)])))
         ])
       }
 
@@ -2228,7 +2272,7 @@ function createKudzuTransformer({ semantic, handlerUrl, file, sourceFiles, sourc
         return factory.updateVariableDeclaration(node, node.name, node.exclamationToken, node.type, initializer)
       }
 
-      if (ts.isVariableDeclaration(node) && listLocalDeclarations.has(node)) {
+      if (ts.isVariableDeclaration(node) && listLocalDeclarations.includes(node)) {
         return factory.updateVariableDeclaration(node, node.name, node.exclamationToken, node.type, factory.createIdentifier("undefined"))
       }
 
@@ -2253,47 +2297,31 @@ function createKudzuTransformer({ semantic, handlerUrl, file, sourceFiles, sourc
         if (compiled !== node.expression) return factory.updateReturnStatement(node, compiled)
       }
 
-      if (ts.isJsxExpression(node) && node.expression && listConditions.has(node.expression)) {
-        const entry = listConditions.get(node.expression)
+      const listCondition = ts.isJsxExpression(node) && node.expression ? keyedEntry(activeKeyedBlock?.analysis.conditions ?? [], node.expression) : undefined
+      if (listCondition) {
+        const entry = listCondition.value
         return factory.updateJsxExpression(node, descriptors.compileListConditional({
           ...entry,
+          keyedBlock: activeKeyedBlock.block.slot,
           truthy: ts.visitNode(entry.truthy, visitor),
           falsy: ts.visitNode(entry.falsy, visitor)
         }))
       }
 
-      if (ts.isJsxExpression(node) && node.expression && listValues.has(node.expression)) {
-        return factory.updateJsxExpression(node, descriptors.compileListValue(node.expression, listValues.get(node.expression)))
+      const listValue = ts.isJsxExpression(node) && node.expression ? keyedEntry(activeKeyedBlock?.analysis.values ?? [], node.expression) : undefined
+      if (listValue) {
+        return factory.updateJsxExpression(node, descriptors.compileListValue(node.expression, { ...listValue.value, keyedBlock: activeKeyedBlock.block.slot }))
       }
 
-      if (ts.isJsxAttribute(node) && node.initializer && ts.isJsxExpression(node.initializer) && node.initializer.expression && listValues.has(node.initializer.expression)) {
-        return factory.updateJsxAttribute(node, node.name, factory.createJsxExpression(undefined, descriptors.compileListValue(node.initializer.expression, listValues.get(node.initializer.expression))))
+      const attributeListValue = ts.isJsxAttribute(node) && node.initializer && ts.isJsxExpression(node.initializer) && node.initializer.expression ? keyedEntry(activeKeyedBlock?.analysis.values ?? [], node.initializer.expression) : undefined
+      if (attributeListValue) {
+        return factory.updateJsxAttribute(node, node.name, factory.createJsxExpression(undefined, descriptors.compileListValue(node.initializer.expression, { ...attributeListValue.value, keyedBlock: activeKeyedBlock.block.slot })))
       }
 
       if (ts.isJsxExpression(node) && node.initializer === undefined && node.expression && (ts.isJsxElement(node.parent) || ts.isJsxFragment(node.parent))) {
-        const nestedParts = nestedLists.get(unwrapExpression(node.expression))
-        const listParts = renderedLists.get(node) ?? nestedParts
-        if (listParts) {
-          usesBehavior = true
-          usesList = true
-          let listSource = listParts.state
-          if (listParts.calculation) {
-            usesBinding = true
-            listSource = descriptors.compileReactiveBinding(listParts.calculation, { setters: settersForNode(node, settersByFunction), importBindings })
-          }
-          const selector = listParts.selector?.length ? descriptors.registerDerived("selector", listParts.selector, listParts.selectorStates, node).selector : listParts.selector ?? []
-          const arguments_ = [
-            listSource,
-            listParts.keyField === null ? factory.createNull() : factory.createStringLiteral(listParts.keyField),
-            visitWithStateOwners(listParts.callback, listParts.analysisStateOwners ?? new Map()),
-            factory.createStringLiteral(listParts.ownerField ?? ""),
-            jsonExpression(selector, factory),
-            listParts.indexed ? factory.createTrue() : factory.createFalse()
-          ]
-          if (listParts.selectorStates?.size || listParts.static) arguments_.push(factory.createArrayLiteralExpression([...(listParts.selectorStates ?? [])].map(name => factory.createArrayLiteralExpression([factory.createStringLiteral(name), factory.createIdentifier(name)]))))
-          if (listParts.static) arguments_.push(factory.createTrue())
-          return factory.updateJsxExpression(node, factory.createCallExpression(factory.createIdentifier("__kList"), undefined, arguments_))
-        }
+        const renderedList = keyedEntry(preparedRenderedLists, node)
+        const nestedList = keyedEntry(activeKeyedBlock?.analysis.nested ?? [], unwrapExpression(node.expression))
+        if (renderedList || nestedList) return compileKeyedBlock(node, renderedList ?? nestedList)
         const conditional = conditionalParts(node.expression)
         if (conditional) {
           const compiled = compileRenderExpression(node.expression, node)
@@ -2332,7 +2360,8 @@ function createKudzuTransformer({ semantic, handlerUrl, file, sourceFiles, sourc
           setters,
           reducers: reducersForNode(node, reducersByFunction),
           functions: functionsForNode(node),
-          listItem: listEventItems.get(node),
+          listItem: activeKeyedBlock ? { item: activeKeyedBlock.parts.item, index: activeKeyedBlock.parts.index } : undefined,
+          keyedBlock: activeKeyedBlock?.block.slot,
           importBindings: new Map([...importBindings, ...packageBindings])
         })
         if (event) {
@@ -2567,10 +2596,11 @@ function insideJsxEventHandler(node, root) {
   return false
 }
 
-function validateKeyedList(parts, sourceFile, listValues, listEventItems, listConditions, setters, rowStates, nestedLists, componentSpecializations, expandedRowSpecializations, nestedRowSpecializations, factory, prepareListCallback) {
+function validateKeyedList(parts, sourceFile, setters, rowStates, componentSpecializations, expandedRowSpecializations, nestedRowSpecializations, factory, prepareListCallback) {
   const fail = (node, message) => {
     throw sourceNodeError(node, sourceFile, message)
   }
+  const analysis = { values: [], conditions: [], nested: [] }
   const root = parts.root
   const item = parts.item
   const nestedDiagnostic = "Nested keyed list collections must be a direct property of the parent item"
@@ -2585,7 +2615,6 @@ function validateKeyedList(parts, sourceFile, listValues, listEventItems, listCo
     if (node !== root && ts.isCallExpression(node) && ts.isPropertyAccessExpression(node.expression) && node.expression.name.text === "map" && containsJsx(node)) fail(node, nestedDiagnostic)
     if (ts.isJsxSpreadAttribute(node) && referencesIdentifier(node.expression, item)) fail(node, "Keyed list item spreads are not supported")
     if (ts.isJsxAttribute(node) && /^on[A-Z]/.test(node.name.text)) {
-      listEventItems.set(node, { item, index: parts.index })
       return
     }
     if (ts.isJsxExpression(node) && node.expression) {
@@ -2610,16 +2639,26 @@ function validateKeyedList(parts, sourceFile, listValues, listEventItems, listCo
           ts.setParentRecursive(callback, false)
           callback.parent = nested.callback.parent
         }
-        callback = prepareListCallback(callback, root, specialization ?? { hookDeclarations: [], effects: [] }, nested.item)
+        callback = prepareListCallback(callback, root, specialization ?? { hookDeclarations: [], effects: [] })
         const specializedStates = [...(specialization?.rowStates ?? []), ...(specialization?.ordinaryStates ?? [])]
-        const nestedParts = { ...nested, root, callback, state: parts.state, nested: true, analysisStateOwners: new Map([...(parts.analysisStateOwners ?? []), ...specializedStates.map(state => [state.state, state.analysisOwner])]) }
+        const nestedParts = {
+          ...nested,
+          root,
+          callback,
+          state: parts.state,
+          nested: true,
+          specializations: [specialization?.analysis?.slot, ...(specialization?.specializations ?? [])].filter(slot => slot !== undefined),
+          rowStates: specializedStates,
+          rowRefs: specialization?.rowRefs ?? [],
+          analysisStateOwners: new Map([...(parts.analysisStateOwners ?? []), ...specializedStates.map(state => [state.state, state.analysisOwner])])
+        }
         for (const calculation of specialization?.calculations ?? []) {
           ts.setParentRecursive(calculation, false)
           calculation.parent = callback
           validateListExpression(calculation, nested.item, nested.root, fail)
         }
-        nestedLists.set(expression, nestedParts)
-        validateKeyedList(nestedParts, sourceFile, listValues, listEventItems, listConditions, setters, specialization?.rowStates ?? [], nestedLists, componentSpecializations, expandedRowSpecializations, nestedRowSpecializations, factory, prepareListCallback)
+        const nestedAnalysis = validateKeyedList(nestedParts, sourceFile, setters, specialization?.rowStates ?? [], componentSpecializations, expandedRowSpecializations, nestedRowSpecializations, factory, prepareListCallback)
+        analysis.nested.push({ node: expression, parts: nestedParts, analysis: nestedAnalysis })
         return
       }
       const condition = conditionalParts(expression)
@@ -2631,7 +2670,7 @@ function validateKeyedList(parts, sourceFile, listValues, listEventItems, listCo
         }
         if (!referencesIdentifier(condition.condition, item) && !(parts.index && referencesIdentifier(condition.condition, parts.index))) fail(node, "Keyed list item conditions must read the item or index")
         validateListExpression(condition.condition, item, node, fail, parts.index)
-        listConditions.set(node.expression, { ...condition, item, index: parts.index })
+        analysis.conditions.push({ node: node.expression, value: { ...condition, item, index: parts.index } })
         visit(condition.truthy)
         visit(condition.falsy)
         return
@@ -2642,7 +2681,7 @@ function validateKeyedList(parts, sourceFile, listValues, listEventItems, listCo
       if (field && ts.isJsxAttribute(node.parent) && ["ref", "dangerouslysetinnerhtml"].includes(node.parent.name.text.toLowerCase())) fail(node, `Keyed list item ${node.parent.name.text} is not supported`)
       if (isRootKey) return
       if (field) {
-        listValues.set(node.expression, { field })
+        analysis.values.push({ node: node.expression, value: { field } })
         return
       }
       if (referencesIdentifier(expression, item) || parts.index && referencesIdentifier(expression, parts.index)) {
@@ -2651,13 +2690,14 @@ function validateKeyedList(parts, sourceFile, listValues, listEventItems, listCo
         if (parts.nested && states.size) fail(node, "Nested keyed list item expressions cannot read parent state")
         validateListExpression(expression, item, node, fail, parts.index, states)
         if (ts.isJsxAttribute(node.parent) && ["ref", "dangerouslysetinnerhtml"].includes(node.parent.name.text.toLowerCase())) fail(node, `Keyed list item ${node.parent.name.text} is not supported`)
-        listValues.set(node.expression, { item, index: parts.index, states })
+        analysis.values.push({ node: node.expression, value: { item, index: parts.index, states } })
         return
       }
     }
     ts.forEachChild(node, visit)
   }
   visit(root)
+  return analysis
 }
 
 function directConstObjectLiteral(expression, call) {
@@ -3369,30 +3409,6 @@ function localComponentDeclaration(sourceFile, name) {
   return undefined
 }
 
-function validateEffectOwnedBrowserResources(callback, returns, fail) {
-  const observers = []
-  const frameAssignments = []
-  const cancellations = new Set()
-  const disconnected = new Set()
-  const insideCleanup = node => returns.cleanups.some(cleanup => {
-    for (let current = node; current; current = current.parent) if (current === cleanup) return true
-    return false
-  })
-  const visit = node => {
-    if (ts.isVariableDeclaration(node) && ts.isIdentifier(node.name) && node.initializer && ts.isNewExpression(unwrapExpression(node.initializer)) && ts.isIdentifier(unwrapExpression(node.initializer).expression) && unwrapExpression(node.initializer).expression.text === "IntersectionObserver") observers.push(node)
-    if (ts.isBinaryExpression(node) && node.operatorToken.kind === ts.SyntaxKind.EqualsToken && ts.isIdentifier(unwrapExpression(node.left)) && ts.isCallExpression(unwrapExpression(node.right)) && ts.isIdentifier(unwrapExpression(node.right).expression) && unwrapExpression(node.right).expression.text === "requestAnimationFrame") frameAssignments.push(node)
-    if (insideCleanup(node) && ts.isCallExpression(node) && ts.isIdentifier(node.expression) && node.expression.text === "cancelAnimationFrame" && node.arguments.length === 1 && ts.isIdentifier(unwrapExpression(node.arguments[0]))) cancellations.add(unwrapExpression(node.arguments[0]).text)
-    if (insideCleanup(node) && ts.isCallExpression(node) && ts.isPropertyAccessExpression(node.expression) && ts.isIdentifier(node.expression.expression) && node.expression.name.text === "disconnect" && node.arguments.length === 0) disconnected.add(node.expression.expression.text)
-    ts.forEachChild(node, visit)
-  }
-  visit(callback.body)
-  for (const observer of observers) if (!disconnected.has(observer.name.text)) fail(observer, `IntersectionObserver effects must disconnect ${JSON.stringify(observer.name.text)} in cleanup`)
-  for (const assignment of frameAssignments) {
-    const name = unwrapExpression(assignment.left).text
-    if (!cancellations.has(name)) fail(assignment, `Animation loop effects must cancel ${JSON.stringify(name)} in cleanup`)
-  }
-}
-
 async function collectClientModules(entries, sourceFiles) {
   const modules = new Set()
   const queue = [...new Set(entries)]