fix(ts-macro): prevent useSelector undefined error

Author: zhiyuanzmj

packages/compiler/src/generators/for.ts

@@ -119,18 +119,26 @@ export function genFor(
     keyProp,
     idMap,
   )
-  const patternFrag: CodeFragment[] = []
+  const selectorDeclarations: CodeFragment[] = []
+  const selectorSetup: CodeFragment[] = []
 
   for (const [i, { selector }] of selectorPatterns.entries()) {
     const selectorName = `_selector${id}_${i}`
-    patternFrag.push(
+    selectorDeclarations.push(`let ${selectorName}`, NEWLINE)
+    if (i === 0) {
+      selectorSetup.push(`({ createSelector }) => {`, INDENT_START)
+    }
+    selectorSetup.push(
       NEWLINE,
-      `const ${selectorName} = `,
-      ...genCall(`n${id}.useSelector`, [
+      `${selectorName} = `,
+      ...genCall(`createSelector`, [
         `() => `,
         ...genExpression(selector, context),
       ]),
     )
+    if (i === selectorPatterns.length - 1) {
+      selectorSetup.push(INDENT_END, NEWLINE, '}')
+    }
   }
 
   const blockFn = context.withId(() => {
@@ -183,16 +191,17 @@ export function genFor(
 
   return [
     NEWLINE,
+    ...selectorDeclarations,
     `const n${id} = `,
     ...genCall(
-      helper('createFor'),
+      [helper('createFor'), 'undefined'],
       sourceExpr,
       blockFn,
       genCallback(keyProp),
       flags ? String(flags) : undefined,
+      selectorSetup.length ? selectorSetup : undefined,
       // todo: hydrationNode
     ),
-    ...patternFrag,
   ]
 
   // construct a id -> accessor path map.

packages/compiler/test/transforms/__snapshots__/transformTemplateRef.spec.ts.snap

@@ -18,7 +18,7 @@ exports[`compiler: template ref transform > ref + v-for 1`] = `
     let r2
     _renderEffect(() => r2 = _setTemplateRef(n2, foo, r2, true))
     return n2
-  }, null, 4)
+  }, undefined, 4)
   return n0
 "
 `;

packages/compiler/test/transforms/__snapshots__/vFor.spec.ts.snap

@@ -73,7 +73,7 @@ exports[`compiler: v-for > nested v-for 1`] = `
       const x4 = _child(n4)
       _setNodes(x4, () => (_for_item1.value+_for_item0.value))
       return n4
-    }, null, 1)
+    }, undefined, 1)
     return n5
   })
   return n0
@@ -118,29 +118,33 @@ exports[`compiler: v-for > object value, key and index 1`] = `
 
 exports[`compiler: v-for > selector pattern 1`] = `
 "
+  let _selector0_0
   const n0 = _createFor(() => (rows), (_for_item0) => {
     const n2 = t0()
     const x2 = _child(n2)
     _selector0_0(() => {
       _setText(x2, _toDisplayString(selected === _for_item0.value.id ? 'danger' : ''))
     })
     return n2
-  }, (row) => (row.id))
-  const _selector0_0 = n0.useSelector(() => selected)
+  }, (row) => (row.id), undefined, ({ createSelector }) => {
+    _selector0_0 = createSelector(() => selected)
+  })
   return n0
 "
 `;
 
 exports[`compiler: v-for > selector pattern 2`] = `
 "
+  let _selector0_0
   const n0 = _createFor(() => (rows), (_for_item0) => {
     const n2 = t0()
     _selector0_0(() => {
       _setClass(n2, selected === _for_item0.value.id ? 'danger' : '')
     })
     return n2
-  }, (row) => (row.id))
-  const _selector0_0 = n0.useSelector(() => selected)
+  }, (row) => (row.id), undefined, ({ createSelector }) => {
+    _selector0_0 = createSelector(() => selected)
+  })
   return n0
 "
 `;
@@ -158,14 +162,16 @@ exports[`compiler: v-for > selector pattern 3`] = `
 
 exports[`compiler: v-for > selector pattern 4`] = `
 "
+  let _selector0_0
   const n0 = _createFor(() => (rows), (_for_item0) => {
     const n2 = t0()
     _selector0_0(() => {
       _setClass(n2, { danger: _for_item0.value.id === selected })
     })
     return n2
-  }, (row) => (row.id))
-  const _selector0_0 = n0.useSelector(() => selected)
+  }, (row) => (row.id), undefined, ({ createSelector }) => {
+    _selector0_0 = createSelector(() => selected)
+  })
   return n0
 "
 `;

packages/compiler/test/transforms/__snapshots__/vOnce.spec.ts.snap

@@ -49,7 +49,7 @@ exports[`compiler: v-once > with v-for 1`] = `
   const n0 = _createFor(() => (list), (_for_item0) => {
     const n2 = t0()
     return n2
-  }, null, 4)
+  }, undefined, 4)
   return n0
 "
 `;

playground/src/for.tsx

@@ -19,6 +19,7 @@ export default () => {
     </>
   )
 
+  const selected = ref(0)
   return (
     <div>
       <input v-model_number={count.value} />
@@ -31,9 +32,25 @@ export default () => {
 
         <fieldset>
           <legend>v-for</legend>
-          <div v-for={(_, index) in count.value}>{index}</div>
+          <div
+            v-for={
+              (i, index) in
+              Array.from({ length: count.value }).map((_, id) => ({ id }))
+            }
+            key={i.id}
+            class={{ 'text-red': i.id === selected.value }}
+            onClick={() => (selected.value = i.id)}
+          >
+            {i.id}
+          </div>
         </fieldset>
       </div>
     </div>
   )
 }
+
+defineStyle(`
+  .text-red {
+    color: red;
+  }
+`)