Static content in <Raw/> disappears after component refresh

Using crank v0.4.0 🎉

I have a component that renders some markdown using <Raw/> and noticed that after refreshing the component the markdown would disappear.

For example, the static content in the second <Raw/> tag will disappear after clicking the button to refresh. However, the dynamic content in the first one will still render correctly.

function* App() {
  let refreshCount = 0;

  const refresh = () => {
    refreshCount += 1;
    this.refresh();
  };

  for (const {} of this) {
    yield (
      <Fragment>
        <div>
          <Raw value={`<h1>Dynamic content ${refreshCount}</h1>`} />
          <Raw value="<h2>Static <em>raw</em> content</h2>" />
        </div>
        <button type="button" onclick={refresh}>
          Refresh
        </button>
      </Fragment>
    );
  }
}

Codesandbox example: https://codesandbox.io/s/raw-tag-content-disappearing-unngm

[waynebaylor]

I created PR #224 with a change to updateRaw. If you want I can look into changing what renderer.parse() returns, just let me know.

[waynebaylor]

@brainkim In updateRaw I can see how refreshing the component skips over the conditional and returns ret.value:

function updateRaw<TNode, TScope>(
  renderer: RendererImpl<TNode, TScope, TNode, unknown>,
  ret: Retainer<TNode>,
  scope: TScope | undefined,
  oldProps: Record<string, any> | undefined
): ElementValue<TNode> {
  const props = ret.el.props;
  if (typeof props.value === 'string') {
    if (!oldProps || oldProps.value !== props.value) {
      ret.value = renderer.parse(props.value, scope);
    }
  } else {
    ret.value = props.value;
  }

  return ret.value;
}

What I’m not sure about is where the fix should go. Does updateRaw need to be changed or is it just being passed a bad value (i.e. ret.value is incorrect)?