gpt4 book ai didi

javascript - (babel插件)TypeError : Path was expected to have a container

转载 作者:行者123 更新时间:2023-12-03 08:39:07 25 4
gpt4 key购买 nike

我正在尝试转换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)

如何解决这个问题?

最佳答案

经过一番调试,我发现问题来自于这个与 switch/case 流程相关的包 babel-plugin-transform-async-to-promises 。我没有深入研究太多代码来查看,但我怀疑 block 作用域很重要,所以我将您的案例改进为新作用域,然后它的工作原理如下:

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

关于javascript - (babel插件)TypeError : Path was expected to have a container,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/63086699/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com