solidjs / solid

A declarative, efficient, and flexible JavaScript library for building user interfaces.
https://solidjs.com
MIT License
32.26k stars 921 forks source link

Universal renderer: `lazy()` automatically inserts an empty text node, which may or may not be supported by the underlying renderer #2283

Open Alloyed opened 1 month ago

Alloyed commented 1 month ago

Describe the bug

This is a regression caused by https://github.com/solidjs/solid/commit/c8fe58e9d259e463def62535f6d23454d4f30cee as far as I can tell, specifically packages/solid/src/render/component.ts line 381

return createMemo(() =>
      (Comp = comp())
        ? untrack(() => {
            if ("_SOLID_DEV_") Object.assign(Comp!, { [$DEVCOMP]: true });
            if (!ctx || sharedConfig.done) return Comp!(props);
            const c = sharedConfig.context;
            setHydrateContext(ctx);
            const r = Comp!(props);
            setHydrateContext(c);
            return r;
          })
        : ""
    ) as unknown as JSX.Element;

upon upgrading, our proprietary universal render started to fail in cases where the lazy() element was being used, because we never implemented a version of createTextNode() that would intelligently handle the empty string the second half of that ternary.

Your Example Website or App

n/a

Steps to Reproduce the Bug or Issue

  1. create a universal renderer, and implement createTextNode like so:

    createTextNode: function (_text: string): MyNodeType {
         throw new Error("Text nodes not supported!")
    },
  2. create an HTML with a lazy() component inserted.

  3. Notice your error is triggered

Expected behavior

n/a

Screenshots or Videos

n/a

Platform

n/a

Additional context

So the reason we don't support bare text nodes in our renderer is that all of our text live inside a specific base element, like so:

<label text="my actual text" />

so there was never a need to implement text nodes, and it would muddy the waters of our implementation to try. We can work around this issue just by ignoring bare text entirely. that said, if the implementation of a built in component tried to insert any other kind of text, for any reason, we'd still have this problem. One approach may just be to document this behavior, with wording along the lines of: "your renderer must at least support empty string and whitespace-only text nodes. your renderer may ignore them entirely if desired."

ryansolid commented 1 month ago

I see. Yeah we needed a fixed marker here. Empty text node seemed the easiest because it is mostly invisible in the DOM. We do this in things like Portals as well but I suppose you don't hit that in the universal renderer as well. Documenting it might be the easiest option I think. I'm not sure how else to best handle it.