Solid: JSX transformation issue

[trueadm]

I was playing around with Solid today, and ran into an issue with the given JSX:

import { render } from "solid-js/dom";

function Link({
  children,
  href,
  className,
}) {
  return (
    <a href={href || "#"} className={className}>
      {children}
    </a>
  );
}

function Component() {
  return (
    <div>
      <Link>new</Link>
      {" | "}
      <Link>comments</Link>
      {" | "}
      <Link>show</Link>
      {" | "}
      <Link>ask</Link>
      {" | "}
      <Link>jobs</Link>
      {" | "}
      <Link>submit</Link>
    </div>
  );
}

render(() => <Component />, root);

The error is Uncaught TypeError: Cannot read property 'nextSibling' of null.

I assume it's because your template doesn't take into consideration it needs holes to insert the dynamic components between. One possible solution might be to add comment nodes into the HTML so that you can correctly find the sibling and replace the comment with the new DOM node.

[ryansolid]

Thanks for reporting.

I do use the method you mentioned. I just got very aggressive at optimizing those cases out over the years. It's possible I over-optimized and missed a case. I will look into this. I consider adjacent textNodes, and scenarios with adjacent dynamic slots. It's possible the text + dynamic slots scenario got removed prematurely.

EDIT: Yeah confirmed that is what that is. Didn't have tests for that. Thank you.

[ryansolid]

The issue was actually simpler than I thought. The logic was correct, but the detection of text nodes wasn't. I've been optimizing cases recently where JSXExpressions that have literals in them just get added to the template and this code was looking explicitly for JSXTextNodes. Technically a problem with Babel plugin but to make sure no one else runs into it I'm upping Solid's preset version. Fixed in 0.18.6.

[ryansolid]

This one didn't sit with me right so I kept testing and found more issues here. Keeping this one open. I will need to do a bit more work here. There are cases with runs of expressions between text nodes that can have issues. I was only checking adjacent. I need to check the whole range.

[ryansolid]

Ok fixed this one more robustly now with Solid v0.18.7. Now it can detect multiple expressions between 2 strings properly. Don't hesitate to report any other issues you find. Thanks.