Is embedding components dynamically possible?

[mpeterdev]

Near Social has a beta feature for embedding components in posts, here is the announcement message

(post)

@andy-haynes would this be possible under the current architecture of BWE? If not, do you see blockers towards implementing it?

@thisisjoshford if this proves challenging, we need to identify the priority of supporting this. Here is a relevant section from Eugene's pinned post from last year on the future of Near Social

[andy-haynes]

would this be possible under the current architecture of BWE? If not, do you see blockers towards implementing it?

Looks feasible to me.

When rendering Components with data that potentially embeds other Components, we can parse them out during serialization. Since the Component would be dynamically loaded, they would always be sandboxed. Normally this would require a unique identifier, but since the embedding text is static we can generate those when parsing.

So given a Component that embeds content:

<div>
  embedded [EMBED](ex.near/widget/Badge) Component!
</div>

This would currently be serialized as:

{
  type: "div",
  props: {
    children: ["embedded [EMBED](ex.near/widget/Badge) Component!"],
  },
  componentChildren: [],
}

Which is not far off from what it would take to embed the Component currently:

{
  type: "div",
  props: {
    children: [
      "embedded ",
      // the `-0` is appended to make the ID unique based on index within content
      { type: "div", props: { id: "dom-ex.near/widget/Badge-0" } },
      " Component!",
    ],
  },
  componentChildren: ["ex.near/widget/Badge"],
}

[mpeterdev]

just to clarify, this answer holds true even if the embed string is fetched dynamically from SocialDB e.g. as the content of a post, right?

I believe that is what you just stated when mentioning that it would always be dynamically loaded but want to be 100% clear

[andy-haynes]

just to clarify, this answer holds true even if the embed string is fetched dynamically from SocialDB e.g. as the content of a post, right?

Yes, that's right.

I believe that is what you just stated when mentioning that it would always be dynamically loaded but want to be 100% clear

It's definitely related - what I outlined would happen at render time when the element is serialized for sending via postMessage. Serialization is where <Widget /> renders are transformed into placeholders in DOM for sandboxed Components, so this feature would complement the current approach pretty well.