- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
我正在尝试转换https://github.com/camwiegert/typical/blob/master/typical.js转换为 TypeScript。
在 Vanilla 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 中,它看起来像:
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/
大家好,所有rdf/sparql开发人员。这是一个困扰了我一段时间的问题,但是自从发布rdf和sparql规范以来,似乎没人能准确回答这个问题。 为了说明这种情况,RDF定义了几种方法来处理资源的多值
我在我的应用程序中使用 Bootstrap ,现在遇到了一个大问题。问题是 .container 元素在 1360 px 的屏幕上具有 274px 的左右边距,这是相当大的。结果,一切看起来都被挤到了
我在删除Docker容器时遇到问题-当我使用前一个命令时,它不起作用(Docker报告了容器ID,但没有删除它)。后者起作用了。据我所知,Docker语法是相同的: C:\Users\user>doc
std::back_inserter 仅适用于带有 push_back 的容器,因此它不适用于 set 和 map 另一方面,std::inserter 适用于所有容器类型。那么我可以一直使用 std
我正在开发 Spring Boot + Redis 示例。在此示例中,我开发了一些自定义方法,这些方法基于 RoleName 提取详细信息。对于以下方法 userRepository.findByRo
在我的 Swift 应用程序中尝试实现 Google Tag Manager v5 时,我遇到了以下警告,这给我带来了一些麻烦: GoogleTagManager warning: No defaul
安装了新的 Laravel 8 项目并在加载第一个实例时,出现以下错误。这很奇怪,因为我把它放在一边,后来从 Laravel 5.8 -> 6 升级了另一个项目(工作正常),当我去检查网站时遇到了类似
我有以下测试代码,它只创建一个空的 hashmap (containers.map) 并在之后填充它: hashtable = containers.Map('KeyType','char','Va
我对它们之间的差异有一点了解,但是拥有专家意见将是很棒的。 Container-Optimized Google Compute Engine Images Google Container Engi
我会模板化一个函数,以便将它与 vector、set 或任何其他 STL 容器(具有正确的 API...)一起使用 我的函数当前原型(prototype)是: vector> f ( const ve
我正在尝试匹配包含和不包含某些字符串的 Pandas DataFrame 的行。例如: import pandas df = pandas.Series(['ab1', 'ab2', 'b2', 'c
我需要在一个非常庞大的全文索引数据库中找到一些文本,但我不知道在我的查询术语变体中使用什么更好。 我看过一些使用的例子 SELECT Foo.Bar FROM Foo WHERE
Traceback (most recent call last): File "demo.py", line 132, in `result = find_strawberry(image
我正在尝试编写一个函数,其中一列包含一个子字符串并且不包含另一个子字符串。 在下面的示例中,如果我的行包含“某些项目”并且不包含“开销”,我希望我的函数返回 1。 row| example strin
我试图在文本文件中 append 包含给定字符串集的任何行。我创建了一个测试文件,在其中放置了这些字符串之一。我的代码应该将文本文件中包含这些字符串之一的任何行打印在与文本文件中的上一行相同的行上。这
我正在尝试学习如何使用 std.container 中可用的各种容器结构,但我无法理解如何执行以下操作: 1) 如何创建一个空容器?例如,假设我有一个用户定义的类 Foo,并且想要创建一个应该包含 F
$contains: [1, 2] // @> [1, 2] (PG array contains operator) $contained: [1, 2] // <@ [1,
我看到 CSS 中使用了这种“div#container”语法,我想知道它是如何工作的。有人有它的资源吗? 最佳答案 除了作为上面提到的唯一引用之外,ID 还增加了特异性(我强烈建议您阅读这篇文章或一
我有一个生成很多子对象的应用程序,每个子对象都与一些全局应用程序对象一起工作,例如在全局应用程序注册表中注册自己,更新应用程序统计信息等。 应用程序应该如何将访问这些全局对象的能力传递给 child
Here is a Sencha fiddle of my tab panel setup.按钮被动态添加到 vbox 选项卡容器中,该容器是 hbox 布局设置的一部分。选项卡容器的宽度由 flex
我是一名优秀的程序员,十分优秀!