Component and composable extraction

Extract a coherent component#

Select a complete template region with an understandable API, such as a card whose title and body come from its owner. Invoke Extract Component and inspect the generated component, props/events, imports, and rewritten parent.

Review the new destination. The documented release refuses to overwrite an existing component file. If a name already exists, choose a new name or deliberately integrate with that component instead of forcing replacement.

Extract a composable#

Select the script logic intended to move and use Extract Composable. Inspect required imports and dependencies reported by the operation. Logic using a binding outside the selection may need that binding included or supplied explicitly.

A useful boundary returns the state/actions the caller actually needs. Avoid extracting an incomplete fragment solely because a variable’s name appears reusable.

Review both sides#

After extraction, navigate imported symbols, inspect template bindings, and run the project’s type-check/tests. Generated code is a refactoring result, not proof that dynamically referenced data or effects behave identically.

If the operation reports missing dependencies, adjust the selection and retry. Existing target files remain protected; preserve that boundary when reorganizing a large component library.