Issue with island and props.children.find

[adamzerner]

I am working on https://github.com/adamzerner/rfui.

Check out https://rfui.deno.dev/molecules/alert. None of the text shows up for all but the first example. This is weird. The text shows up when I run deno task start and visit http://localhost:8000/molecules/alert.

Inspecting the HTML, I see that for the "AlertHeader and AlertBody" example,

<Alert>
  <AlertHeader>Success</AlertHeader>
  <AlertBody>Your profile has been saved.</AlertBody>
</Alert>

generates the following HTML locally:

<div class="w-full p-5 border-l-4 border-neutral-500 bg-neutral-50">
  <div class="flex gap-5 justify-between items-center">
    <svg
      xmlns="http://www.w3.org/2000/svg"
      fill="none"
      viewBox="0 0 24 24"
      stroke="currentColor"
      strokeWidth="1.5"
      class="w-6 h-6 self-start text-neutral-500"
    >
      <path
        d="M11.25 11.25l.041-.02a.75.75 0 011.063.852l-.708 2.836a.75.75 0 001.063.853l.041-.021M21 12a9 9 0 11-18 0 9 9 0 0118 0zm-9-3.75h.008v.008H12V8.25z"
        strokeLinecap="round"
        strokeLinejoin="round"
      >
      </path>
    </svg>
    <div class="flex-1">
      <div class="text-lg font-bold mb-2 text-neutral-500">
        <div>Success</div>
      </div>
      <div class=" text-neutral-900">
        <div>Your profile has been saved.</div>
      </div>
    </div>
    <svg
      xmlns="http://www.w3.org/2000/svg"
      fill="none"
      viewBox="0 0 24 24"
      stroke="currentColor"
      strokeWidth="1.5"
      class="w-6 h-6 cursor-pointer hover:outline rounded outline-offset-2 outline-1 text-neutral-500"
    >
      <path
        d="M6 18L18 6M6 6l12 12"
        strokeLinecap="round"
        strokeLinejoin="round"
      >
      </path>
    </svg>
  </div>
</div>

However, in production, I see that it generates this instead:

<div class="w-full p-5 border-l-4 border-neutral-500 bg-neutral-50">
  <div class="flex gap-5 justify-between items-center">
    <svg
      xmlns="http://www.w3.org/2000/svg"
      fill="none"
      viewBox="0 0 24 24"
      stroke="currentColor"
      strokeWidth="1.5"
      class="w-6 h-6 self-start text-neutral-500"
    >
      <path
        d="M11.25 11.25l.041-.02a.75.75 0 011.063.852l-.708 2.836a.75.75 0 001.063.853l.041-.021M21 12a9 9 0 11-18 0 9 9 0 0118 0zm-9-3.75h.008v.008H12V8.25z"
        strokeLinecap="round"
        strokeLinejoin="round"
      >
      </path>
    </svg>
    <div class="flex-1">
      <div class=" text-neutral-900"></div>
    </div>
    <svg
      xmlns="http://www.w3.org/2000/svg"
      fill="none"
      viewBox="0 0 24 24"
      stroke="currentColor"
      strokeWidth="1.5"
      class="w-6 h-6 cursor-pointer hover:outline rounded outline-offset-2 outline-1 text-neutral-500"
    >
      <path
        d="M6 18L18 6M6 6l12 12"
        strokeLinecap="round"
        strokeLinejoin="round"
      >
      </path>
    </svg>
  </div>
</div>

So the issue is:

<div class="flex-1">
  <div class="text-lg font-bold mb-2 text-neutral-500">
    <div>Success</div>
  </div>
  <div class=" text-neutral-900">
    <div>Your profile has been saved.</div>
  </div>
</div>

vs

<div class="flex-1">
  <div class=" text-neutral-900"></div>
</div>

Where this

const getComponents = ({ props }: any) => {
  if (!Array.isArray(props.children)) {
    return [undefined, props.children];
  }

  const alertHeader = props.children.find(
    (child: any) => child && child.type && child.type.name === "AlertHeader",
  );

  const alertBody = props.children.find(
    (child: any) => child && child.type && child.type.name === "AlertBody",
  );

  return [alertHeader, alertBody];
};

and this is the relevant code in alert.tsx:

<div class="flex-1">
  {alertHeader &&
    <div class={alertHeaderClass}>{alertHeader}</div>}
  <div class={alertBodyClass}>{alertBody}</div>
</div>

I can't figure out what the issue is. My Card component is doing the same thing, but for that everything works perfectly. The big difference I see between Alert and Card is that Alert is an island whereas Card is not, but I don't see why that'd cause an issue. Especially since stuff for Alert does in fact work locally.

I am using Deno Deploy also.

---

Edit

Oh, I see the issue. Stuff gets obfuscated in production. Instead of props.children[0].type.name being "AlertHeader", it's just "A".

Hm. I'm not sure what to do about this.

[adamzerner]

Ok, figured it out. As I said in the edit to the question, the issue is that stuff gets obfuscated in production, so instead of props.children[0].type.name being "AlertHeader", it's just "A".

To fix it, I did child.type.name === AlertHeader.name instead of child.type.name === "AlertHeader".

[marvinhagemeister]

In general you never want to compare actual function names due to the exact problem you ran into. Names are often mangled to save precious bytes when shipping code over the network to the browser. Instead of comparing names it's usually much quicker and more reliable to compare the function definition itself.

So rather than doing:

child.type.name === AlertHeader.name

you should do this:

child.type === AlertHeader

You don't care that the function name is the same, you care that the child.type is this exact function. Reason this is more reliable is that there can be multiple functions with the same name. There is no guarantee that a function name is globally unique. So your code code break in unexpected ways if kept at comparing function names.