answershuto

answershuto

阿里巴巴大淘宝前端架构团队前端技术专家,《剖析 Vue.js 内部运行机制》作者,W3C CSS 工作组成员。

Member Since 6 years ago

@Alibaba, HangZhou, China

Experience Points
4k
follower
Lessons Completed
67
follow
Lessons Completed
253
stars
Best Reply Awards
30
repos

1450 contributions in the last year

Pinned
⚡ A web standards-compliant, high-performance rendering engine based on Flutter.
⚡ :octocat:Vue.js 源码解析
⚡ CSS Working Group Editor Drafts
⚡ 🐰 Rax is a progressive framework for building universal application. https://rax.js.org
⚡ 《剖析 Vue.js 内部运行机制》配套Demo
⚡ 📖 染陌的Blog
Activity
May
24
1 day ago
push

answershuto push openkraken/kraken

answershuto
answershuto

quickjs文件遗漏

quickjs文件遗漏

answershuto
answershuto

Merge pull request #1413 from yifei8/patch-3

quickjs文件遗漏

commit sha: 666d15002e711443b36b6cea9f86b8bf91d7c6ac

push time in 13 hours ago
pull request

answershuto pull request openkraken/kraken

answershuto
answershuto

quickjs文件遗漏

quickjs文件遗漏

pull request

answershuto merge to openkraken/kraken

answershuto
answershuto

fix: Rebuild all the sliver children.

  • 修复当插入节点到 sliver 容器的可视区域内时,sliver 容器不会主动申请 child 的问题, 导致节点插入失效。
    • Tips: 当前的解决办法是重新插入所有的子节点,可能造成插入 DOM 时的性能问题
pull request

answershuto merge to openkraken/kraken

answershuto
answershuto

fix: Rebuild all the sliver children.

  • 修复当插入节点到 sliver 容器的可视区域内时,sliver 容器不会主动申请 child 的问题, 导致节点插入失效。
    • Tips: 当前的解决办法是重新插入所有的子节点,可能造成插入 DOM 时的性能问题
open pull request

answershuto wants to merge openkraken/kraken

answershuto
answershuto

fix: Rebuild all the sliver children.

  • 修复当插入节点到 sliver 容器的可视区域内时,sliver 容器不会主动申请 child 的问题, 导致节点插入失效。
    • Tips: 当前的解决办法是重新插入所有的子节点,可能造成插入 DOM 时的性能问题
answershuto
answershuto

感觉这个抽象在这不是很合理

May
19
6 days ago
pull request

answershuto pull request openkraken/kraken

answershuto
answershuto

[WIP]Feat/support html widget

close #1115

HTMLView('<div style="width: 300px;background-color: blue;color: red">你好啊</div>'),
_kraken = Kraken(
    bundle: KrakenBundle.fromHTML('<div style="width: 300px;background-color: blue;color: red">你好啊</div>'),
),
May
18
1 week ago
push

answershuto push openkraken/kraken

answershuto
answershuto
answershuto
answershuto

Merge pull request #1405 from openkraken/fix/script-load

fix: the sync load order

commit sha: 338fbf4815426ab4d6f844bd7f4551f598d269d3

push time in 6 days ago
Activity icon
delete

answershuto in openkraken/kraken delete branch fix/script-load

deleted time in 6 days ago
pull request

answershuto pull request openkraken/kraken

answershuto
answershuto

fix: the sync load order

Close #1393 Close #1240

  • 修复同时加载多个 script 时,后面的 task 抢先执行的问题,原来的设计有缺陷会导致 pending 中的任务被忽略执行
Activity icon
issue

answershuto issue openkraken/kraken

answershuto
answershuto

特定场景下脚本重复执行问题

使用的 Kraken 版本 | What version of kraken are you using

0.11.0

重现步骤 | Steps To Reproduce

加载的第一个js脚本文件较大时,会导致多次执行

重现代码 | Code example:

j_index.html
<!DOCTYPE html>
<html lang="en">
<head>
  <script src="j_test1.js"></script>
  <script src="j_test2.js"></script>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<body>
</body>
</html>

第一个脚本,几百KB j_test1.js

点击下载

第二个脚本,较小 j_test2.js
document.body.appendChild(document.createTextNode('Hello World 2!(created by j_test2.js)'));
console.log('test(created by j_test2.js)');
console.log('test(created by j_test2.js)');

预期结果 | Expected results: Jietu20220512-165048

实际结果 | Actual results: Jietu20220512-165108

Activity icon
issue

answershuto issue openkraken/kraken

answershuto
answershuto

<script src="xxx"> 标签执行顺序

使用的 Kraken 版本 | What version of kraken are you using

master

重现步骤 | Steps To Reproduce

image

script 标签执行顺序,现在引入 script 是 dart 层传入的,内置 script 标签是 bridge 层直接处理的, 如果内置 script 标签依赖引用 script,这时无法保证执行顺序

重现代码 | Code example: 我是在测试 epub js example 时发现的

预期结果 | Expected results: 能正确处理 js 对象依赖

实际结果 | Actual results: 标签之间执行时没有顺序的

image

有什么好的解决方案么?

pull request

answershuto merge to openkraken/kraken

answershuto
answershuto

fix: the sync load order

Close #1393 Close #1240

  • 修复同时加载多个 script 时,后面的 task 抢先执行的问题,原来的设计有缺陷会导致 pending 中的任务被忽略执行
push

answershuto push openkraken/website

answershuto
answershuto

feat: remove interpolation integration (#222)

commit sha: 6e96c9524f6f2a27467377161e39806199b0e528

push time in 6 days ago
pull request

answershuto pull request openkraken/website

answershuto
answershuto

feat: remove interpolation integration

SDK 集成未来不再维护

pull request

answershuto merge to openkraken/website

answershuto
answershuto

feat: remove interpolation integration

SDK 集成未来不再维护

May
17
1 week ago
Activity icon
issue

answershuto issue openkraken/kraken

answershuto
answershuto

自定义元素报错

使用的 Kraken 版本 | What version of kraken are you using

Version: master/v0.9

重现步骤 | Steps To Reproduce

封装了一个轮播图给Kraken使用,使用Flutter调用不存在问题,但是使用Kraken.defineCustomElement封装后使用报错。

════════ Exception caught by scheduler library ═════════════════════════════════
The following assertion was thrown during a scheduler callback:
RenderBox was not laid out: RenderRepaintBoundary#79653 NEEDS-LAYOUT NEEDS-PAINT NEEDS-COMPOSITING-BITS-UPDATE
'package:flutter/src/rendering/box.dart':
package:flutter/…/rendering/box.dart:1
Failed assertion: line 1930 pos 12: 'hasSize'

Either the assertion indicates an error in the framework itself, or we should provide substantially more information in this error message to help you determine and fix the underlying cause.
In either case, please report this assertion by filing a bug on GitHub:
  https://github.com/flutter/flutter/issues/new?template=2_bug.md

When the exception was thrown, this was the stack
#2      RenderBox.size
package:flutter/…/rendering/box.dart:1930
#3      RenderBox.paintBounds
package:flutter/…/rendering/box.dart:2568
#4      _TransformerPageViewState._onGetSize
package:card_swiper/…/transformer_page_view/transformer_page_view.dart:458
#5      SchedulerBinding._invokeFrameCallback
package:flutter/…/scheduler/binding.dart:1144
#6      SchedulerBinding.handleDrawFrame
package:flutter/…/scheduler/binding.dart:1090
...
════════════════════════════════════════════════════════════════════════════════

重现代码 | Code example: Code example: https://github.com/donfo/flutter_kraken_swiper_test

预期结果 | Expected results: 正常使用

实际结果 | Actual results:

May
16
1 week ago
pull request

answershuto merge to openkraken/kraken

answershuto
answershuto

fix: dispose

  • 修复 viewport 被多次 dispose 的问题
    • 原因是 Document 在被 GC 时会触发其 dispose(), 在这个方法里还调用了 viewport 的 dispose(),接着在 State unmount() 中又调用了 viewport 的 dispose,导致多次触发
    • 正常情况下 dispose 遵循谁创建谁销毁原则,RenderViewportBox 是 controller 创建的,但是其是 RenderObject,故又受到 Widget Framework 的控制,这里 dispose 必须是被 framework 触发
push

answershuto push openkraken/kraken

answershuto
answershuto

:bug: fix: all overflow should update.

commit sha: b387bf2d0b10b8b54c965c7993aceac1e5b3a707

push time in 1 week ago
push

answershuto push openkraken/kraken

answershuto
answershuto

:art: chore: remove unuse import.

commit sha: ef24e6b305f249291191feceed7805aaae41fd01

push time in 1 week ago
May
13
1 week ago
push

answershuto push openkraken/kraken

answershuto
answershuto

:bug: fix: When renderObject has not layouted, get constraints will trigger assets.

commit sha: 5b8e356324b9fa940a6303f8ab05301e25e1fee2

push time in 1 week ago
Activity icon
fork

answershuto forked flutter/flutter

⚡ Flutter makes it easy and fast to build beautiful apps for mobile and beyond
answershuto BSD 3-Clause "New" or "Revised" License Updated
fork time in 1 week ago
Activity icon
issue

answershuto issue comment openkraken/kraken

answershuto
answershuto

自定义的widget是否能通过调用js得到想要的Widget

使用场景 | Use case

自定义的widget是否能通过调用js得到想要的Widget, 目前看文档dart和js通讯好像做不到类似的 例如自定义了一个 widget, widget里面对业务逻辑的处理,但是ui需要通过调用js得到的,js根据业务数据来生成对应的ui a、b、c..等

提案 | Proposal

伪代码例子:

Kraken.defineCustomElement('k-demo-element2',
    (context) {
  return DemoElement2(context);
});

class DemoElement2 extends WidgetElement { List dataList = [{"name":"1", "style":"1"}, {"name":"2", "style":"2"}, {"name":"3", "style":"3"}];

DemoElement2(context) : super(context, defaultStyle: {'display': 'block'}); @override Widget build(BuildContext context, Map<String, dynamic> properties, List children) { return Container( color: Colors.blue, width: 300, height: 500, child:CustomScrollView( slivers: [SliverList( delegate: SliverChildBuilderDelegate( (_, index) => _ListWidget(index), childCount: dataList.length, )])); }

_ListWidget(index) { // dataList[index] , 根据数据调用js,能否得到一个StyleWidget ??? return StyleWidget; } dynamic sayHi(List args) { print(args); print(args[0]); print(args[0].runtimeType); }

@override getBindingProperty(String key) { if (key == 'sayHi') { return sayHi; }

return super.getBindingProperty(key);

} }

answershuto
answershuto

答疑只走 issue,群内不答疑。交流群可以在 TSC 那边找到。

Activity icon
issue

answershuto issue comment openkraken/kraken

answershuto
answershuto

自定义的widget是否能通过调用js得到想要的Widget

使用场景 | Use case

自定义的widget是否能通过调用js得到想要的Widget, 目前看文档dart和js通讯好像做不到类似的 例如自定义了一个 widget, widget里面对业务逻辑的处理,但是ui需要通过调用js得到的,js根据业务数据来生成对应的ui a、b、c..等

提案 | Proposal

伪代码例子:

Kraken.defineCustomElement('k-demo-element2',
    (context) {
  return DemoElement2(context);
});

class DemoElement2 extends WidgetElement { List dataList = [{"name":"1", "style":"1"}, {"name":"2", "style":"2"}, {"name":"3", "style":"3"}];

DemoElement2(context) : super(context, defaultStyle: {'display': 'block'}); @override Widget build(BuildContext context, Map<String, dynamic> properties, List children) { return Container( color: Colors.blue, width: 300, height: 500, child:CustomScrollView( slivers: [SliverList( delegate: SliverChildBuilderDelegate( (_, index) => _ListWidget(index), childCount: dataList.length, )])); }

_ListWidget(index) { // dataList[index] , 根据数据调用js,能否得到一个StyleWidget ??? return StyleWidget; } dynamic sayHi(List args) { print(args); print(args[0]); print(args[0].runtimeType); }

@override getBindingProperty(String key) { if (key == 'sayHi') { return sayHi; }

return super.getBindingProperty(key);

} }

answershuto
answershuto

是在最新的 main 上测试的吗?这个问题看起来最近修过,由于重复调用 insert 的缘故。

push

answershuto push openkraken/kraken

answershuto
answershuto

:bug: fix: constraints is null before layout.

commit sha: e2b8e61b3e09c7ec61cc1722416b6a02f53e5c05

push time in 1 week ago
Activity icon
issue

answershuto issue comment openkraken/kraken

answershuto
answershuto

自定义的widget是否能通过调用js得到想要的Widget

使用场景 | Use case

自定义的widget是否能通过调用js得到想要的Widget, 目前看文档dart和js通讯好像做不到类似的 例如自定义了一个 widget, widget里面对业务逻辑的处理,但是ui需要通过调用js得到的,js根据业务数据来生成对应的ui a、b、c..等

提案 | Proposal

伪代码例子:

Kraken.defineCustomElement('k-demo-element2',
    (context) {
  return DemoElement2(context);
});

class DemoElement2 extends WidgetElement { List dataList = [{"name":"1", "style":"1"}, {"name":"2", "style":"2"}, {"name":"3", "style":"3"}];

DemoElement2(context) : super(context, defaultStyle: {'display': 'block'}); @override Widget build(BuildContext context, Map<String, dynamic> properties, List children) { return Container( color: Colors.blue, width: 300, height: 500, child:CustomScrollView( slivers: [SliverList( delegate: SliverChildBuilderDelegate( (_, index) => _ListWidget(index), childCount: dataList.length, )])); }

_ListWidget(index) { // dataList[index] , 根据数据调用js,能否得到一个StyleWidget ??? return StyleWidget; } dynamic sayHi(List args) { print(args); print(args[0]); print(args[0].runtimeType); }

@override getBindingProperty(String key) { if (key == 'sayHi') { return sayHi; }

return super.getBindingProperty(key);

} }

answershuto
answershuto

嗯, appendChild 后,子 Element 会传递到 WidgetElement 的 build 中,chidren 参数会带上。

Activity icon
issue

answershuto issue comment openkraken/kraken

answershuto
answershuto

自定义的widget是否能通过调用js得到想要的Widget

使用场景 | Use case

自定义的widget是否能通过调用js得到想要的Widget, 目前看文档dart和js通讯好像做不到类似的 例如自定义了一个 widget, widget里面对业务逻辑的处理,但是ui需要通过调用js得到的,js根据业务数据来生成对应的ui a、b、c..等

提案 | Proposal

伪代码例子:

Kraken.defineCustomElement('k-demo-element2',
    (context) {
  return DemoElement2(context);
});

class DemoElement2 extends WidgetElement { List dataList = [{"name":"1", "style":"1"}, {"name":"2", "style":"2"}, {"name":"3", "style":"3"}];

DemoElement2(context) : super(context, defaultStyle: {'display': 'block'}); @override Widget build(BuildContext context, Map<String, dynamic> properties, List children) { return Container( color: Colors.blue, width: 300, height: 500, child:CustomScrollView( slivers: [SliverList( delegate: SliverChildBuilderDelegate( (_, index) => _ListWidget(index), childCount: dataList.length, )])); }

_ListWidget(index) { // dataList[index] , 根据数据调用js,能否得到一个StyleWidget ??? return StyleWidget; } dynamic sayHi(List args) { print(args); print(args[0]); print(args[0].runtimeType); }

@override getBindingProperty(String key) { if (key == 'sayHi') { return sayHi; }

return super.getBindingProperty(key);

} }

answershuto
answershuto

用 JS 就是通过 document.createElement 创建一个新的 custom element。

May
12
1 week ago
Previous