Duplicate widget ID when manually initializing server side rendered widgets

[onemrkarthik]

Hello,
Was trying out manually initializing server side rendered widgets (https://github.com/raptorjs/marko-widgets#manually-initializing-server-side-rendered-widgets) and have run into an issue.

Say there exists a parent widget.
<div w-bind="./parent_widget"></div>

The above widget would get an ID "w0".

Now, if parent_widget makes an ajax call that renders a child_widget on the server side and we manually try to initialize the widget on the browser with:

require('marko-widgets').initWidgets(widgetIds), the child widget fails to get initialized because the child_widget also comes back with the same ID 'w0'.

I put a break point on the initWidgets function and noticed that the child widget also comes back with widget id "w0" (same as the parent widget). Ideally, the client_widget should have come back with "w1".

Was wondering if i am missing something ?

Regards,
Karthik

[maberer]

This "problem" has been reported before and @patrick-steele-idem already proposed a fix.
Thanks for pointing it out.

Please see: #16

[onemrkarthik]

AAh. Thank you for pointing it out.

Will looking into it.

Karthik

[patrick-steele-idem]

What @tindli pointed out should solve your problem. The Marko Widgets server code is stateless so it doesn't know how to generate unique widget IDs for a given client if additional widgets are being rendered on the server after the initial page rendering. Therefore, it is up to your app code to tell Marko Widgets what to use as the starting widget ID to keep widget IDs unique. This needs to be moved into the docs since it has come up a few times for teams that want to do all of the rendering on the server. I'll keep this issue as a reminder to update the docs.

[maberer]

👍 for moving it into the docs. thanks

[onemrkarthik]

Awesome. Thanks guys :)