IMPROVEMENT: Allow Signals to Swap Fragments

[Zach Lankton]

Consider the example below:

import {Signal} from '@rezact/rezact/signals'

export default function Test() {
  
  let $elmRef = new Signal(<p>Not Changed</p>);

  const works = () => {
    $elmRef = <span>
      <p>This</p>
      <p>Works</p>
    </span>
  };

  const doesntWork = () => {
    $elmRef = <>
      <p>This</p>
      <p>Doesn't</p>
    </>
  }

  return (
    <>
      {$elmRef}
      <button onClick={works}>Change (works)</button>
      <button onClick={doesntWork}>Change (doesn't)</button>
    </>
  );
}

The first button works fine, but clicking the second button stops even the first button from working. The current code allows swapping HTMLElements, but not Fragments.

Rezact/src/lib/rezact/signals.ts

Lines 135 to 143 in 3983220

  
 if ( 
   val instanceof Element && 
   newVal instanceof Element && 
   val !== newVal && 
   val.parentNode 
 ) 
   val.replaceWith(newVal);