Experiment: Page enhancement allowing head elements to be added for a given page and automatically removed when routing away

[bayes343]

Background

Outside of updating title and meta tags, which are handled via the SeoService and Page properties, modifications to the head need to be handled via custom code. This branch is an experiment if providing a Page level configuration option for declaring elements that should be rendered in the head for that page, but not retained after routing away from that page.

Use case

• You have a custom script, stylesheet, etc. that should or needs to be loaded only on certain routes.

Implementation

• A new Page property has been added called, "HeaderElements"
• This new property is an array of Jsx - elements you want added to the head for that page
• Before appending them to the head on a positive route match, a new attribute (currently "dynamic") is added with a value of true
• When the app routes to another page, it removes the elements added to the page by querying for that new attribute

Example usage

• In addition to tests, see below snippets/screenshots from a working example

export class NotFoundPage extends Page {
  Title = 'Not Found';

  RenderMode = RenderModes.Dynamic;
  Route = async () => true;
  HeadElements = [
    <script src="/hello.js" async="true" />
  ];

^ script from above "hello.js" executes, alert('hello world');

1. Initial load on homepage (no hello script)

2. After client or non-client routing to 404 page (script is added and executes)

3. After client or non-client routing back to the home page

[github-actions]

Package	Line Rate	Branch Rate	Complexity	Health
components	100%	100%	0	✔
core	100%	100%	0	✔
core.decorators	100%	100%	0	✔
core.services	100%	100%	0	✔
core.services.router	100%	100%	0	✔
core.services.seoService	100%	100%	0	✔
core.services.xssSanitizerService	100%	100%	0	✔
utilities	100%	100%	0	✔
Summary	100% (513 / 513)	100% (175 / 175)	0	✔

[bayes343]

Moved the logic related to this to the component level, allowing usage at the component or page level.

The elements added to the head are removed once the component is removed from the Dom.

Before potentially merging this feature, it needs to be adjusted to be fully await able, such that the elements are added to the head before the render method returns.

[sonarcloud]

Quality Gate passed

Issues
11 New issues
0 Accepted issues

Measures
0 Security Hotspots
0.0% Coverage on New Code
0.0% Duplication on New Code

See analysis details on SonarCloud