fix: return result for all nodes + disable batch processing (#15)

Author: danielroe

src/utils/template.ts

@@ -268,61 +268,72 @@ const vSlotSnippetHandler: SnippetHandler = {
   },
 }
 
-async function transformJsSnippets(codes: Expression[], transform: (code: string) => Promise<string>): Promise<WeakMap<Expression, string>> {
-  const keyMap = new WeakMap<Expression, string>()
-  const transformMap = new Map<string, { id: number, node: Expression, handler: SnippetHandler }>()
-  const snippetHandlers = [vSlotSnippetHandler, defaultSnippetHandler]
-  let id = 0
-  for (const code of codes) {
-    for (const handler of snippetHandlers) {
-      const key = handler.key(code)
-      if (!key) {
-        continue
-      }
+const snippetHandlers = [vSlotSnippetHandler, defaultSnippetHandler]
+function getKey(expression: Expression) {
+  for (const handler of snippetHandlers) {
+    const key = handler.key(expression)
+    if (key) {
+      return { key, handler }
+    }
+  }
+}
 
-      keyMap.set(code, key)
-      if (transformMap.has(key)) {
-        break
-      }
+async function transformJsSnippets(expressions: Expression[], transform: (code: string) => Promise<string>): Promise<WeakMap<Expression, string>> {
+  const transformMap = new Map<string, { id: number, nodes: [Expression, ...Expression[]], handler: SnippetHandler }>()
 
-      transformMap.set(key, { id, node: code, handler })
-      id += 1
-      break
+  let id = 0
+  for (const expression of expressions) {
+    const res = getKey(expression)
+    if (!res) {
+      continue
+    }
+    if (transformMap.has(res.key)) {
+      const item = transformMap.get(res.key)!
+      item.nodes.push(expression)
+      continue
     }
+
+    transformMap.set(res.key, { id, nodes: [expression], handler: res.handler })
+    id += 1
   }
 
-  const batchOrder = Array.from(transformMap.entries())
+  const resultMap = new Map<Expression, string>()
+  for (const item of transformMap.values()) {
+    // TODO: reenable batch processing after fixing issue with esbuild renaming variables
+    const batch = [item]
 
-  // transform all snippets in a single file
-  const batchInputSplitter = `\nsplitter(${Math.random()});\n`
-  const batchInput = batchOrder
-    .map(([_, { node, handler }]) => handler.prepare(node, id))
-    .join(batchInputSplitter)
+    // transform all snippets in a single file
+    const batchInputSplitter = `\nsplitter(${Math.random()});\n`
+    const batchInput = batch
+      .map(({ nodes, handler }) => handler.prepare(nodes[0], id))
+      .join(batchInputSplitter)
 
-  try {
-    const batchOutput = await transform(batchInput)
-    const lines = batchOutput.split(batchInputSplitter).map(l => l.trim()).filter(l => !!l)
+    try {
+      const batchOutput = await transform(batchInput)
+      const lines = batchOutput.split(batchInputSplitter).map(l => l.trim()).filter(l => !!l)
 
-    if (lines.length !== batchOrder.length) {
-      throw new Error('[vue-sfc-transform] Syntax Error')
-    }
+      if (lines.length !== batch.length) {
+        throw new Error('[vue-sfc-transform] Syntax Error')
+      }
 
-    const resultMap = new Map<Expression, string>()
-    for (let i = 0; i < batchOrder.length; i++) {
-      const line = lines[i]!
-      const [_, { id, handler, node }] = batchOrder[i]!
+      for (let i = 0; i < batch.length; i++) {
+        const line = lines[i]!
+        const { id, handler, nodes } = batch[i]!
 
-      const res = handler.parse(line, id)
-      if (!res) {
-        continue
-      }
+        const res = handler.parse(line, id)
+        if (!res) {
+          continue
+        }
 
-      resultMap.set(node, res)
+        for (const node of nodes) {
+          resultMap.set(node, res)
+        }
+      }
+    }
+    catch (error) {
+      throw new Error('[vue-sfc-transform] Error parsing TypeScript expression in template', { cause: error })
     }
-
-    return resultMap
-  }
-  catch (error) {
-    throw new Error('[vue-sfc-transform] Error parsing TypeScript expression in template', { cause: error })
   }
+
+  return resultMap
 }

test/template.test.ts

@@ -144,8 +144,20 @@ describe('transform typescript template', () => {
 
   it('equals', async () => {
     expect(
-      await fixture(`<MyComponent #template="{ item, index, level = 0 as 0 | 1 }" />`),
-    ).toMatchInlineSnapshot(`"<MyComponent #template="{ item, index, level = 0 }" />"`)
+      await fixture(`
+      <div>
+        <MyComponent #template="{ item, index, level = 0 as 0 | 1 }" />
+        <MyComponent #template="{ item, index, level = 0 as 0 | 1 }" />
+        <MyComponent #template="{ item, index = 3 as 3 | 4, level }" />
+      </div>`),
+    ).toMatchInlineSnapshot(`
+      "
+            <div>
+              <MyComponent #template="{ item, index, level = 0 }" />
+              <MyComponent #template="{ item, index, level = 0 }" />
+              <MyComponent #template="{ item, index = 3, level }" />
+            </div>"
+    `)
   })
 
   async function fixture(src: string) {