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) {