(babel plugin) TypeError: Path was expected to have a container

Question

我正在尝试将 https://github.com/camwiegert/typical/blob/master/typical.js 转换为 TypeScript。

在 Vanilla JS 中，它看起来像：

典型的.js

export async function type(node, ...args) {
    for (const arg of args) {
        switch (typeof arg) {
            case 'string':
                await edit(node, arg);
                break;
            case 'number':
                await wait(arg);
                break;
            case 'function':
                await arg(node, ...args);
                break;
            default:
                await arg;
        }
    }
}

async function edit(node, text) {
    const overlap = getOverlap(node.textContent, text);
    await perform(node, [...deleter(node.textContent, overlap), ...writer(text, overlap)]);
}

async function wait(ms) {
    await new Promise(resolve => setTimeout(resolve, ms));
}

async function perform(node, edits, speed = 60) {
    for (const op of editor(edits)) {
        op(node);
        await wait(speed + speed * (Math.random() - 0.5));
    }
}

export function* editor(edits) {
    for (const edit of edits) {
        yield (node) => requestAnimationFrame(() => node.textContent = edit);
    }
}

export function* writer([...text], startIndex = 0, endIndex = text.length) {
    while (startIndex < endIndex) {
        yield text.slice(0, ++startIndex).join('');
    }
}

export function* deleter([...text], startIndex = 0, endIndex = text.length) {
    while (endIndex > startIndex) {
        yield text.slice(0, --endIndex).join('');
    }
}

export function getOverlap(start, [...end]) {
    return [...start, NaN].findIndex((char, i) => end[i] !== char);
}

在 TypeScript 中，它看起来像：

典型的.ts

export async function type(node: HTMLElement, ...args: any[]): Promise<void> {
  for (const arg of args) {
    switch (typeof arg) {
      case 'string':
        await edit(node, arg);
        break;
      case 'number':
        await wait(arg);
        break;
      case 'function':
        await arg(node, ...args);
        break;
      default:
        await arg;
    }
  }
}

async function edit(node: HTMLElement, text: string): Promise<void> {
  const overlap = getOverlap(node.textContent, text);
  await perform(node, [
    ...deleter(node.textContent, overlap),
    ...writer(text, overlap),
  ]);
}

async function wait(ms: number): Promise<void> {
  await new Promise(resolve => setTimeout(resolve, ms));
}

async function perform(
  node: HTMLElement,
  edits: Iterable<string | null>,
  speed: number = 60
): Promise<void> {
  for (const op of editor(edits)) {
    op(node);
    await wait(speed + speed * (Math.random() - 0.5));
  }
}

export function* editor(
  edits: Iterable<string | null>
): Generator<(node: any) => number, void, unknown> {
  for (const edit of edits) {
    yield node => requestAnimationFrame(() => (node.textContent = edit));
  }
}

export function* writer(
  [...text]: string,
  startIndex: number = 0,
  endIndex: number = text.length
): Generator<string, void, unknown> {
  while (startIndex < endIndex) {
    yield text.slice(0, ++startIndex).join('');
  }
}

export function* deleter(
  text: string | null,
  startIndex: number = 0
): Generator<string, void, unknown> {
  if (text === null) {
    yield '';
    return;
  }
  const [...chars] = text;
  let endIndex = chars.length;
  while (endIndex > startIndex) {
    yield chars.slice(0, --endIndex).join('');
  }
}

export function getOverlap(start: string | null, [...end]: string): number {
  if (start === null) return 0;
  return [...start, NaN].findIndex((char, i) => end[i] !== char);
}

我收到一条错误消息 Path was expected to have a container!，但我没有收到。它在终端中显示以下内容：

1 | export async function type(node, ...args) {
  2 |     for (const arg of args) {
> 3 |         switch (typeof arg) {
    |         ^
  4 |             case 'string':
  5 |                 await edit(node, arg);
  6 |                 break;
TypeError: ~/react-typical/src/typical.ts: Path was expected to have a container!
  1 | export async function type(node, ...args) {
  2 |     for (const arg of args) {
> 3 |         switch (typeof arg) {
    |         ^
  4 |             case 'string':
  5 |                 await edit(node, arg);
  6 |                 break;
    at File.buildCodeFrameError (~/react-typical/node_modules/@babel/core/lib/transformation/file/file.js:248:12)
    at NodePath.buildCodeFrameError (~/react-typical/node_modules/@babel/traverse/lib/path/index.js:144:21)
    at checkPathValidity (~/react-typical/node_modules/babel-plugin-transform-async-to-promises/async-to-promises.js:1085:24)
    at relocateTail (~/react-typical/node_modules/babel-plugin-transform-async-to-promises/async-to-promises.js:1095:9)
    at Object.rewriteAwaitOrYieldPath (~/react-typical/node_modules/babel-plugin-transform-async-to-promises/async-to-promises.js:2685:21)
    at NodePath._call (~/react-typical/node_modules/@babel/traverse/lib/path/context.js:55:20)
    at NodePath.call (~/react-typical/node_modules/@babel/traverse/lib/path/context.js:42:17)
    at NodePath.visit (~/react-typical/node_modules/@babel/traverse/lib/path/context.js:90:31)
    at TraversalContext.visitQueue (~/react-typical/node_modules/@babel/traverse/lib/context.js:112:16)
    at TraversalContext.visitSingle (~/react-typical/node_modules/@babel/traverse/lib/context.js:84:19)

我该如何解决这个问题？

Answer 1

经过一番调试，我发现问题来自这个包babel-plugin-transform-async-to-promises，它与switch/case过程有关。我没有深入研究太多代码，但我怀疑块范围很重要，所以我将您的案例改进为新范围，然后它的工作方式如下：

case 'string': {
   await edit(node, arg);
   break;
}

完整代码如下：

export async function type(node: HTMLElement, ...args: any[]): Promise<void> {
  for (const arg of args) {
    const type = typeof arg;
    switch (type) {
      case 'string': {
        await edit(node, arg);
        break;
      }
      case 'number': {
        await wait(arg);
        break;
      }
        
      case 'function': {
        await arg(node, ...args);
        break;
      }
        
      default: {
        await arg;
        break;
      }        
    }
  }
}

Answer 2

当您针对节点转换代码时，我还发现了一些有趣的东西。您从 word 中传播字符的方式不起作用，因此您可能需要更改它：

// const [...chars] = text;
const chars = Array.from(text);