Delayed Component Registration

[adamzero1]

I'd like to know what the best practise / recommended way is for registering a component that isn't available on initial page load.
(apologies in advance if any of my terms are wrong)

For example:
I am currently adding my MW component to the cart-drawer, this means that html output by my template is within the Apline component.
When Magewire.start() is ran, my MW component is not part of the DOM
To get around this at the moment I have added

<script>window.magewire.rescan()</script>

To the end of my template file.
This appears to work, and I can interact with my MW component normally.

Questions

• Is this the only way?
• Should I be calling some other method e.g window.magewire.addComponent(el) ?

[wpoortman]

Can you show some more code? I always use the "magewire:available" event to be sure Magewire is loaded. But I'm not sure this applies to your question.

[adamzero1]

It's not so much the code, it's more the ordering I believe, but I will do my best.

• MAGEWIRE test component loaded - this is a test magewire component added to the end of the page, literally: <script>console.log('MAGEWIRE test component loaded');</script>
• MAGEWIRE rootComponentElementsWithNoParents {allEls: Array(1), onlyChildEls: Array(0)} is a console log from this method within livewire detailing the DOM elements it's found on the page. As you can see there is only item in the array (the test component at the end of the page)
• MAGEWIRE minicart rendered - this a log from inside my html: <script>console.log('MAGEWIRE minicart rendered');</script>

The following logs are the result of my html containing: <script>window.magewire.rescan()</script> which retriggers the logic and finds my component.
It does appear to be getting called twice, which I need to look into, but I can confirm without the rescan my component never makes it to Magewire.

Hope this makes sense.

N.B the reason the second set of rootComponentElementsWithNoParents return 1, is because one the element is added, it no longer shows up in this list.

[adamzero1]

Just found this, which seems to suggest it's not possible.
livewire/livewire#1791
But it is quite old

[wpoortman]

Hmm, I wouldn't have a clear answer for you right now. As I'm seeing it currently, I would suggest the rescan since it's a native option to use and not discouraged anywhere. For the double call's I found this... not sure if it has anything to do with it.

[adamzero1]

nice one @wpoortman .
I think what I'm going to try is pulling the component out of the apline template. (just rendering at the bottom of the page), then interacting with it via code in the the cart <template>.
This will mean it won't get triggered twice and should hopefully remove the need for a rescan.
Will let you know how I get on

[wpoortman]

Any results @adamzero1 ?