Fix phpSPA navigation issues: improve history handling, add unload event, and enhance script execution stability

[Copilot]

This PR fixes several critical issues in the phpSPA JavaScript navigation system that were causing problems with browser history navigation and script execution stability.

Issues Fixed

1. History Navigation Fetching Issue

Previously, the popstate event handler would fetch new content from the server even when valid cached content existed in history.state. This caused unnecessary network requests and slower navigation.

Before:

// Always fetched new content when no state found
phpspa.navigate(new URL(location.href), "replace");

After:

// Uses cached content from history.state when available
if (navigationState && navigationState.content) {
    // Restore from cache
    targetContainer.innerHTML = navigationState.content;
}

2. JavaScript Execution Stability

The previous implementation cleared ALL executed scripts globally during navigation, which could break JavaScript functionality during complex navigation patterns (forward/backward sequences).

Before:

// Cleared all scripts globally
RuntimeManager.clearExecutedScripts();

After:

// Selective clearing - only clears scripts from the container being replaced
RuntimeManager.clearContainerScripts(targetContainer);

3. Missing Event Lifecycle

The system was missing proper event emissions during browser history navigation and lacked an unload event for cleanup.

New event flow:

• beforeload → unload → content replacement → script execution → load
• Added unload event that triggers before component removal
• Initial DOM load now properly triggers load event

4. Property Naming Inconsistency

Fixed inconsistency between targetId and targetID properties while maintaining backward compatibility.

Changes Made

1. Enhanced Script Management: Added clearContainerScripts() method for selective script clearing instead of global clearing
2. Complete Event System: Added unload event and ensured all navigation types emit proper lifecycle events
3. Improved History Navigation: Browser back/forward now uses cached content and emits events correctly
4. Initial Load Event: DOMContentLoaded now triggers the phpSPA load event
5. Property Consistency: Standardized on targetId with backward compatibility for targetID

Testing

All existing tests pass, confirming that the changes maintain backward compatibility while fixing the reported issues. The improvements specifically address:

• JavaScript not loading during complex navigation patterns
• Browser history navigation fetching instead of using cached content
• Missing event emissions during history navigation
• Need for component cleanup events

API Additions

// New unload event for cleanup
phpspa.on('unload', function(data) {
    console.log('Component being removed:', data.route);
    // Perform cleanup
});

These changes ensure that phpSPA navigation works reliably across all scenarios while maintaining the existing API and behavior.

Original prompt

Work on the template/src/index.js, that is the main javascript fioe that handles the SPA functionality of the library. Currently I am having issue with the navigating through browser history using that popstate, what you should fix there is, when navigating it should use the one from the history.state and it should not be getting it everytime which it does now. And I have issue with the Javascript not loading if we have navigate very well, like moving forward, forward, backward everytime or even sometimes, some Javascript will stop working. So you'll fix it that the Javascript should keep working at all means. And the navigating through browser's history, the contents should be gotten from the hiatory.state and not fetching it everytime. And if they are navigating the browser history, it should still trigger the onload & onbeforeload phpspa event. And on the initial load like onDOMContentLoaded, it should trigger the onload event. Also add onunload event, phpspa.on('unload', ...) that will trigger before the component is removed for new component to render. Is it event before the component is removed or after we removed the component, i did not remember how they use to do this. So thats all for now.

---

✨ Let Copilot coding agent set things up for you — coding agent works faster and does higher quality work when set up for your repo.