Upgrade Livewire 2 → 3

[betsyecastro]

This PR resolves the remaining functional and performance regressions in the Livewire 3 upgrade branch affecting the ProfileStudents, StudentFiler, ProfileDataCard, and TagsModal components. For reference, see the upgrade guide.

Changes include:

After installing Livewire 3, the php artisan livewire:upgrade command was used to address breaking changes progressively, through prompts. Some changes automatically applied across the Livewire components include:

• Update event dispatching from emit() to dispatch()
• Convert JavaScript event listeners and error handling to the Livewire 3 APIs
• wire:model directives update to wire:model.live since in Livewire 3, wire:model is "deferred" by default

Other syntax updates were done manually as follows:

• Replace $listeners with #[On] attributes
• Replace getComputedProperty() → #[Computed] property()

Issues addressed:

1.RootTagMissingFromViewException on ProfileDataCard component for public profile pages with empty sections:
The ProfileDataCard::render() method returned '' for empty, non-editable sections. Livewire 3 requires exactly one root element. Section partials now always render their root <div> wrapper with the emptiness conditional inside it; the empty-return branch is removed from the component's render() method.

2. Duplicate refresh requests and toasts on student application status change:
Filing a student should produce the following call stack:

1. StudentFiler->updateStatus()
2. ProfileStudent->profileStudentStatusUpdated

Instead, the call was:

1. StudentFiler->updateStatus()
2. ProfileStudent->profileStudentStatusUpdated
3. ProfileStudent->profileStudentStatusUpdated

Cause:
The affected child component was declared using the v2 syntax :wire:key attribute:
<livewire:student-filer :wire:key="..." />

For nested Livewire components, Livewire 3 uses :key to establish the component's identity:
<livewire:student-filer :key="..." />

There was also a second problem: the child's key did not change when the student's application status changed. When filing the student changed the status and moved the student-filer component to a different tab pane, Livewire 3 couldn't reconcile the original component instance with the new DOM position, so it created a new instance instead. When that new instance updated, it triggered profileStudentStatusUpdated again, causing the ProfileStudent handler to run a second time.

Fix:
Changed to Livewire 3 :key syntax and added the student's status to the key: $student->slug . '_filer_' . $student->application->status. This makes a status change a clean unmount/remount with no effects carried over. One request, one toast.

3. Student application action icons disappeared after filing student application:
The Livewire hook 'message.processed' was removed and Livewire 3 now uses morphing and the hook was updated to Livewire.hook('morphed', ({ el })).

4. Profile Students page became slow/unresponsive after clearing ProfileStudents filters due to a DOM mutation storm caused by dom.watch() and an unscoped morphed hook (added in the previous fix):
After clearing all the filters applied on the students applications, the request completed but the page became unresponsive or significantly slow to re-render the DOM elements, even after the dev tools Network tab showed the request as completed.

Diagnosis:
Used DevTools → Performance tab → record → cleared a student app filter → stopped recording after the UI finished rendering, the results showed a long ~34s task, where the majority of the subtasks were called by Run microtasks, with hundreds of repeated, near-identical function-call blocks, that showed the DOM node count went from ~5,725 to ~1,886,717, the event listeners also increased from 302 to 1,784.

The call tree shows that MutationCallback accounts for 54% of all samples, almost entirely Livewire's onMutate → initTree → walk/deferHandlingDirectives/directives — Livewire re-scanning and re-initializing subtrees every time the DOM changes.

Cause:
Font Awesome 5's dom.watch() MutationObserver and Livewire 3's own mutation observer fed each other: every morph stripped nested <svg>s, font-awesome re-created them, and those insertions re-triggered Livewire's tree walks.

Fix:
Removed dom.watch(). Icons are converted once at DOMContentLoaded and the morph hook was scoped to the updated component (Livewire.hook('morphed', ({ el }) => dom.i2svg({ node: el }))) that re-converts only the component that just morphed, once per commit, instead of watching the whole document continuously. Re-profiled again: no measurable mutation storm, same ~276 ms Paint-dominated shape. The fix was also verified functionally by manually triggering a status change and a filter clear and confirmed icons survived both.

5. Test suite migration and new coverage

• Data card tests no longer use lastRendered() as public methods (internal-only in v3): assertions use viewData() (re-fetched after each call()) and call('nextPage', $section) for the per-section named paginators — also fixing a latent v2 bug where tests advanced the default page paginator.
• assertSeeHtmlInOrder fragments rebuilt: v3 injects wire:snapshot/wire:effects/wire:id into root elements and wraps conditionals in <!--[if BLOCK]--> markers, affecting the assertion result. The assertion arguments are checked individually now.
• Added coverage for StudentFiler::updateStatus and ProfileStudents o verify the basic student application filing interaction, including that the record status is updated and displayed under the correct category and that each category's count is accurate.

6. Updated Tags event listener for student application form:
Fixed the listener to use Livewire.dispatch(event, { tag_type: ... }), switched the direct binding to a delegated $(document).on('change', selector, ...) so it survives Livewire morphs of that region, and collapsed the if/else into a single dispatch call.

Components tested manually:

1. Bookmarkbutton
2. DelegationsTable
3. StudentFeedback

Steps to test:

1. composer install
2. docker exec php.profiles php artisan optimize:clear

[shukla-m]

The $conversion parameter doesn't seem to be used in the method. This is a general comment, not specific to this Livewire PR upgrade.

[shukla-m]

Livewire 3.x Upgrade guide mentions that the new class_namespace has changed as shown below.
-'class_namespace' => 'App\Http\Livewire',
+'class_namespace' => 'App\Livewire',

However, this would involve moving existing Livewire components to app\Livewire, and since existing LIvewire components are still under App\Http\Livewire, this looks fine, but wanted to make a note.

[shukla-m]

Did this also need to be upgraded as part of Livewire 3 upgrade?

[shukla-m]

Does 'except' need to be removed? See URL query string

[shukla-m]

@betsyecastro, @wunc:

• The changes look good!
• I added some comments, but they might not need any changes.
• I pulled in the changes and tested locally. Following Profiles functionality were tested and worked as expected:
  • Profile edits of the following sections: Profession Preparation, Projects, Publications
  • Bookmarks toggle
  • Accepting students changes
  • Delegations
• In addition, the automated test suite ran successfully.
• I did not test any spatie/laravel-medialibraryrelated changes.

---

Not related to this PR, I got the following error when accessing `profiles.test`:

Undefined array key 0
@if($profile->information[0]->distinguished_title)   <-- resources/views/profiles/panel.blade.php

The following change fixed it.

The error occurred after the database had got reset (not sure why) - once the data was re-imported, there were no errors. This probably won't be an issue on production, but wanted to mention it.

Let me know if you have any questions or would like for me to test anything else.