feat(view): tag override with the as prop

[iamdadmin]

I've pasted below the docs I provided for it, which show usage examples, but this is I think a critical feature for flexibility, as shown in Vue/React etc.

• Added the AsAttribute
• Created tests (all passing)
• Created docs

Tag override with the as prop

The as attribute allows you to transform the rendered tag of one element into another. This takes place on an instance of GenericElement, so for example this code:

<a as="button">My Link</a>

Would render

<button>My Link</button>

The power behind this is when you use an Expression to determine the element.

Say for example, you wish to have a <x-link> component which renders as an <a> when the $href attribute is provided. In your view, use the component like so:

<x-link href="https://tempestphp.com">Click to go to an awesome website</x-link>

<x-link>This is just a button</x-link>

In your <x-link> component, define:

<a :as="$href ?? 'button'" :href="$href ?? ''"><x-slot /></a>

Your page will render two links, as follows

<a href="https://tempestphp.com">Click to go to an awesome website</a>

<button>This is just a button</button>

Where this can and cannot be used

You can't use the as Attribute on things like <x-template>, <x-slot>, etc, as these do not themselves render any HTML. They are placeholders in the page. Nor will placing it on a view component itself inherently do anything. The as attribute CAN be passed to a ViewComponent as shown in the example above, but by itself it will actually do nothing, unless you specifically provide logic to place it where you want it.

[github-actions]

Benchmark Results

Comparison of 3.x-as-token against 3.x (ab8cfb14398f19936e9c4be649a2c42c805dbcf1).

Open to see the benchmark results

No benchmark changes above ±5%.

_{Generated by phpbench against commit 002e35c}