Extract Marko Component

Prepare a meaningful selection#

In a valid Marko component, identify a complete markup subtree whose data dependencies are clear:

<div class="card">
  <h2>${input.title}</h2>
  <p>${input.summary}</p>
</div>

Select the complete subtree and invoke Extract Marko Component. Review the proposed destination, component name, inferred Input properties, and call-site rewrite.

Inspect dependencies#

The extracted component must receive values that were previously available from its owner. A title or summary can become an input; a value whose scope cannot move safely can block extraction. Imports should be preserved where required.

The intended result is a small component API and a caller passing its data, not a hidden copy of the parent’s entire state. Check generated property names and types before accepting.

Check both syntax styles#

The refactoring supports angle/concise call-site rewriting where valid. Preserve the project’s chosen syntax and indentation rather than manually converting the generated output before checking the initial result.

After applying, navigate from the new tag to its declaration, preview it with representative JSON input, and build the application. If extraction reports a conflict, simplify the selection or pass an outer dependency explicitly; do not bypass the check by copying only half the markup and leaving unresolved references.

Undo and retry#

An isolated extraction is easier to review than one mixed with renames and unrelated styling. Use Undo if the inferred API is not what you want, adjust the source boundary, and retry. Keep the complete source diff under review even when the preview looks correct.