[FIX] compiler: t-key and t-ref together

Have a t-ref on a DOM node with a t-key.
Change the t-key.

Before this commit, the old block removed its element from the component's refs *after*
the new block had been mounted, meaning that in effect, the resulting
ref at the end of the whole patch was null.

After this commit, we only remove an element from the component's ref if that very same
element was indeed the ref. (otherwise it means someone else has changed the ref.)

src/compiler/code_generator.ts

@@ -672,8 +672,9 @@ export class CodeGenerator {
       this.target.hasRef = true;
       const isDynamic = INTERP_REGEXP.test(ast.ref);
       if (isDynamic) {
+        this.helpers.add("singleRefSetter");
         const str = replaceDynamicParts(ast.ref, (expr) => this.captureExpression(expr, true));
-        const idx = block!.insertData(`(el) => refs[${str}] = el`, "ref");
+        const idx = block!.insertData(`singleRefSetter(refs, ${str})`, "ref");
         attrs["block-ref"] = String(idx);
       } else {
         let name = ast.ref;
@@ -686,7 +687,8 @@ export class CodeGenerator {
           info[1] = `multiRefSetter(refs, \`${name}\`)`;
         } else {
           let id = generateId("ref");
-          this.target.refInfo[name] = [id, `(el) => refs[\`${name}\`] = el`];
+          this.helpers.add("singleRefSetter");
+          this.target.refInfo[name] = [id, `singleRefSetter(refs, \`${name}\`)`];
           const index = block!.data.push(id) - 1;
           attrs["block-ref"] = String(index);
         }

src/runtime/template_helpers.ts

@@ -202,6 +202,16 @@ function multiRefSetter(refs: RefMap, name: string): RefSetter {
   };
 }
 
+function singleRefSetter(refs: RefMap, name: string): RefSetter {
+  let _el: HTMLElement | null = null;
+  return (el) => {
+    if (el || refs[name] === _el) {
+      refs[name] = el;
+      _el = el;
+    }
+  };
+}
+
 /**
  * Validate the component props (or next props) against the (static) props
  * description.  This is potentially an expensive operation: it may needs to
@@ -260,6 +270,7 @@ export const helpers = {
   prepareList,
   setContextValue,
   multiRefSetter,
+  singleRefSetter,
   shallowEqual,
   toNumber,
   validateProps,