CODEWITHSUNDEEP
javascriptnode.jstypescriptasynchronouspromise
deadcoder0904
deadcoder0904

Reputation: 8683

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

I am trying to convert https://github.com/camwiegert/typical/blob/master/typical.js into TypeScript.

In Vanilla JS, it looks like:

typical.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);
}

In TypeScript, it looks like:

typical.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);
}

I am getting an error saying Path was expected to have a container! which I am not getting. It shows the following in the terminal:

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)

How do I solve this?

Upvotes: 2

Views: 599

Answers (2)

tmhao2005
tmhao2005

Reputation: 17514

I also figure something interesting as you transpile code against node. The way you spread chars from word doesn't work, so you might have to change that:

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

Upvotes: 1

tmhao2005
tmhao2005

Reputation: 17514

After a bit debug, I found out the problem comes from this package babel-plugin-transform-async-to-promises which is related to switch/case process. I didn't dig into too far too code to see but I suspect the block scope matter so I refined your case as new scope then it works like:

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

so full code is following:

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;
      }        
    }
  }
}

Upvotes: 4

Related Questions