openwebf/webf

Build flutter apps with HTML/CSS and JavaScript.

webf's Issues

overflow:scroll,if set maxWidth/maxHeight node size is error

Affected version

0.12.0 and main

No same issues found.

• Yes, I search all issues but not found.

Steps to Reproduce

look code

Code example

let box = document.createElement('div');
document.body.style.background= '#f92';
document.body.style.width= '300px';
document.body.style.height= '300px';
document.body.style.display= 'flex';
document.body.style.flexDirection= 'column';
document.body.appendChild(box);

box.style.background = '#6ad0e2';
box.style.display = 'flex';
box.style.flexDirection='column';


const icon = document.createElement('div');
icon.style.zIndex = 0;
icon.style.background= '#f32';
icon.style.maxHeight = '30px';
icon.style.flexGrow = 1;
icon.style.display = 'flex';
icon.style.overflow = 'scroll';
icon.style.fexShrink = 1


box.appendChild(icon);

Expected results

Actual results

Add scoped name slot support for Flutter Widget Element.

For Flutter widget elements, we can add any HTML elements as children of widget elements:

Exp:

<flutter-button>
    <div>helloworld</div>
</flutter-button>

@override
  Widget build(BuildContext context, List<Widget> children) {
    return ConstrainedBox(
      constraints:
          BoxConstraints.tightFor(width: renderStyle.width.computedValue, height: renderStyle.height.computedValue),
      child: RoundedLoadingButton(
        borderRadius: 4,
          controller: controller, onPressed: () {
            _isLoading = true;
            dispatchEvent(MouseEvent(EVENT_CLICK, detail: 1, view: ownerDocument.defaultView));
      }, child: children.isNotEmpty ? children[0] : const SizedBox.shrink()),
    );
  }

But we can only put these HTML childrens in one place in our widget tree.

Now if we wants to implement a tab bar element with Flutter widgets, and we wants to use HTML tags to implement tab bar's header and body. We needs pass two chunk of HTML tags in to element, but we only have one place.

The WebComponent standard defined named slot can solve these problems: https://javascript.info/slots-composition#named-slots

And we can use for reference it to solve this problems.

Alternatives and Workarounds
No response

text white-space:pre ,layout error

Affected version

main

No same issues found.

• Yes, I search all issues but not found.

Steps to Reproduce

code

Code example

 let div;
    div = createElement(
      'div',
      {
        style: {
          background: 'blue',
          height: '300px',
          width:'300px',
          display: 'flex',
          flexShrink: 0,
          zIndex:0,
          overflow:'hidden',
          'box-sizing': 'border-box',
          flexDirection:'column',
          'align-items': 'center',
        },
      },[createElement(
        'span',
        {
          style: {
            background: 'pink',
            overflow: 'hidden',
            'z-index': '0',
            'white-space': 'preLine',
            'height': '48px',
            'line-height': '24px',
            'font-size': '16px',
            'color': 'rgba(15, 33, 40, 0.996)',
            'margin-left': '46px',
            'margin-right': '46px',
          },
        },
        [createText(`获得1000粉丝，开启你在营地的星光进阶之旅！`)]
      )]);
document.body.appendChild(div);

function createElement(tag, props, child) {
  const el = document.createElement(tag);
  setElementProps(el, props);
  if (Array.isArray(child)) {
    child.forEach(c => el.appendChild(c));
  } else if (child) {
    el.appendChild(child);
  }
  return el;
}
function createElementWithStyle(tag, style, child) {
  const el = document.createElement(tag);
  setElementStyle(el, style);
  if (Array.isArray(child)) {
    child.forEach(c => el.appendChild(c));
  } else if (child) {
    el.appendChild(child);
  }
  return el;
}
function setElementProps(el, props) {
  let keys = Object.keys(props);
  for (let key of keys) {
    if (key === 'style') {
      setElementStyle(el, props[key]);
    } else {
      el[key] = props[key];
    }
  }
}
function setElementStyle(dom, object) {
  if (object == null) return;
  for (let key in object) {
    if (object.hasOwnProperty(key)) {
      dom.style[key] = object[key];
    }
  }
}
function createText(content) {
  return document.createTextNode(content);
}

Expected results

Actual results

webf main分支运行在线地址异常

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

webf main

重现步骤 ｜ Steps To Reproduce

W/linker ( 5637): Warning: "/data/app/~~Etdn6pUmFectACUe-vMEPQ==/com.openwebf.webf_example-E2TU-fGaSxO4YKVRKr4vYA==/lib/arm64/libc++_shared.so" unused DT entry: unknown processor-specific (type 0x70000001 arg 0x0) (ignoring)
I/bf.webf_exampl( 5637): ProcessProfilingInfo new_methods=1018 is saved saved_to_disk=1 resolve_classes_delay=8000
E/flutter ( 5637): [ERROR:flutter/lib/ui/ui_dart_state.cc(198)] Unhandled Exception: MissingPluginException(No implementation found for method getTemporaryDirectory on channel webf)
E/flutter ( 5637): #0 MethodChannel._invokeMethod (package:flutter/src/services/platform_channel.dart:165:7)
E/flutter ( 5637):
E/flutter ( 5637): #1 getWebFTemporaryPath (package:webf/src/foundation/environment.dart:12:34)
E/flutter ( 5637):
E/flutter ( 5637): #2 HttpCacheController.getCacheDirectory (package:webf/src/foundation/http_cache.dart:38:37)
E/flutter ( 5637):
E/flutter ( 5637): #3 HttpCacheController.getCacheObject (package:webf/src/foundation/http_cache.dart:90:40)
E/flutter ( 5637):
E/flutter ( 5637): #4 ProxyHttpClientRequest.close (package:webf/src/foundation/http_client_request.dart:147:23)
E/flutter ( 5637):
E/flutter ( 5637): #5 NetworkBundle.resolve (package:webf/src/foundation/bundle.dart:190:41)
E/flutter ( 5637):
E/flutter ( 5637): #6 WebFController._resolveEntrypoint (package:webf/src/launcher/controller.dart:1107:7)
E/flutter ( 5637):
E/flutter ( 5637): #7 WebFController.executeEntrypoint (package:webf/src/launcher/controller.dart:1079:7)
E/flutter ( 5637):
E/flutter ( 5637): #8 _WebFRenderObjectElement.mount (package:webf/src/widget/webf.dart:285:5)
E/flutter ( 5637):
E/flutter ( 5637):

重现代码 | Code example:

预期结果 ｜ Expected results:

实际结果 ｜ Actual results:

Support for custom elements?

Are custom elements supported? Some techmologoes like imba are built on custom elements, so it will be very good to have in webf

M1 IOS Simulator run error

What version of webf are you using

main/0.12

Steps To Reproduce

run m1 ios simulator

Code example:

Expected results:
run surcess

Actual results:
BUILD FAILED , error is ld: framework not found quickjs
example ios run success

BIgInt/BigFloat support

Use case

Enable BigInt/BigFloat support is important for quickjs. We have libbf.c included but CONFIG_BIGNUM is not added to build definition. Please include it as well.

Proposal

BigInt can be recognized in JavaScript side.

vue2 绑定点击事件小米4无效

What version of webf are you using

最新分支

Steps To Reproduce

运行vue2简单demo即可重现（vue3测试过没问题）

Code example:

`

点我呀

{{ msg }}

<script> export default { name: 'App', components: {}, data() { return { msg: '' } }, methods: { handleClick() { console.log('clicked') this.msg = 'hello' } } } </script>`

Expected results:
点击事件生效 & 有log输出

Actual results:
无点击事件响应

Add Window.getComputedStyle support

Feature type

DOM API

The spec link.

https://developer.mozilla.org/en-US/docs/Web/API/Window/getComputedStyle

How much important for you

Many front-end component libraries are dependents on this API to gather computed styles.

https://github.com/youzan/vant/blob/e250dd31b8ad3dd0b6bc199033b43c7682a5674f/packages/vant/src/utils/dom.ts

input 标签的 checkbox 样式没有支持

Affected version

main

No same issues found

• Yes, I search all issues but not found.

Bug type

CSS/DOM Style

Which frontend framework you are using.

H5

Steps to reproduce

为input添加checkbox类型值即可复现。

Code example

This is the first checkbox

This is the second checkbox, which is checked

Expected results

显示checkbox样式。

Actual results

显示的是默认输入框样式。

Support multiple page testing

Should this be an RFC?

• This is not a substantial change

Description

We are meeting some errors often occur with switching multiple pages with history routers.

Most of them are C/C++ memory issues that are no easy to reproduce. So it's essential to set up a test system that can switch pages programmly.

Alternatives and Workarounds

No response

flex:1 expand error,flexBasis is not '0%'

Affected version

main

No same issues found.

• Yes, I search all issues but not found.

Steps to Reproduce

code

Code example

let box = document.createElement('div');

box.style.background = '#6ad0e2';
box.style.display = 'flex';
box.style.flex = '1';
box.style.flexDirection='column';
box.style.minHeight= '120px';

Expected results

CSSStyleProperty.setShorthandFlex(longhandProperties,'1'); 

longhandProperties content is {flexGrow:1,flexShrink:1,flexBasis:0%}

Actual results

CSSStyleProperty.setShorthandFlex(longhandProperties,'1'); 

longhandProperties content is {flexGrow:1,flexShrink:1,flexBasis:0}

libwebf.so load failed

Affected version

main

No same issues found.

• Yes, I search all issues but not found.

Steps to Reproduce

Code example

ArgumentError: Invalid argument(s): Failed to load dynamic library 'libwebf.so': dlopen failed: library "libwebf.so" not found
#0 _open (dart:ffi-patch/ffi_dynamic_library_patch.dart:11)
#1 new DynamicLibrary.open (dart:ffi-patch/ffi_dynamic_library_patch.dart:20)
#2 WebfDynamicLibrary.ref (package:webf/src/bridge/dynamic_library.dart:40)
#3 _registerPluginByteCode (package:webf/src/bridge/to_native.dart:257)
#4 registerPluginByteCode (package:webf/src/bridge/to_native.dart)

Expected results

can load library

Actual results

some android platform(such as ,vivo/oppo, os 6.0) load libwebf.so error。

Add document.styleSheets support

Feature type

DOM API

The spec link.

https://developer.mozilla.org/en-US/docs/Web/API/Document/styleSheets

How much important for you

No response

Crash in Bridge binding module_manager.cc

Affected version

0.12.0

No same issues found.

• Yes, I search all issues but not found.

Steps to Reproduce

1. Vue project is using 'vue-router'
2. Push and pop few times the crash happened.

The crash log:

F/libc    (20052): Fatal signal 11 (SIGSEGV), code 1 (SEGV_MAPERR), fault addr 0x8 in tid 20081 (1.ui), pid 20052 (ple.webf_sample)
*** *** *** *** *** *** *** *** *** *** *** *** *** *** *** ***
Build fingerprint: 'google/sdk_gphone64_arm64/emu64a:13/TPB4.220624.004/8808248:user/release-keys'
Revision: '0'
ABI: 'arm64'
Timestamp: 2022-10-09 17:44:46.981703541+0800
Process uptime: 24s
Cmdline: com.example.webfsample.webf_sample
pid: 20052, tid: 20081, name: 1.ui  >>> com.example.webfsample.webf_sample <<<
uid: 10163
tagged_addr_ctrl: 0000000000000001 (PR_TAGGED_ADDR_ENABLE)
pac_enabled_keys: 000000000000000f (PR_PAC_APIAKEY, PR_PAC_APIBKEY, PR_PAC_APDAKEY, PR_PAC_APDBKEY)
signal 11 (SIGSEGV), code 1 (SEGV_MAPERR), fault addr 0x0000000000000008
Cause: null pointer dereference
    x0  b400007da9310f50  x1  b400007d294e54f8  x2  ffffffffffffffff  x3  0000007c568a22b8
    x4  0000000000000048  x5  00000000005228d8  x6  0000000000000010  x7  ff7f7f7f7f7f7f7f
    x8  0000000000000000  x9  0000000000000000  x10 0000007c3c0540e0  x11 0000000000000000
    x12 000000000000fc34  x13 000000000000001c  x14 0000007c568a0de0  x15 00000a9e59a137e8
    x16 0000007c3c0d1c60  x17 0000007c3c0540ac  x18 0000007c564d8000  x19 b400007da9310f50
    x20 b400007da9310fe8  x21 b400007db9321010  x22 ffffffffffffffff  x23 b400007d294e54f0
    x24 b400007d29521bb0  x25 ffffffffffffffff  x26 0000007c568a3000  x27 0000007b06e4ff50
    x28 000000080000007b  x29 0000007c568a2320
    lr  0000007c3ef09de0  sp  0000007c568a2320  pc  0000007c3c0540f4  pst 0000000080001000
backtrace:
      #00 pc 000000000004f0f4  /data/app/~~mfAIcbsg24tqSqspsRXvtA==/com.example.webfsample.webf_sample-akqWAs0szw3Mk8WXuKVfWg==/lib/arm64/libquickjs.so (__JS_FreeValueRT+72) (BuildId: 79c3680e3fb395ff77ef817670b0254163013dce)
      #01 pc 0000000000094ddc  /data/app/~~mfAIcbsg24tqSqspsRXvtA==/com.example.webfsample.webf_sample-akqWAs0szw3Mk8WXuKVfWg==/lib/arm64/libwebf.so (webf::binding::qjs::handleInvokeModuleTransientCallback(void*, int, char const*, NativeString*)+768) (BuildId: 73cb9009563c5edabc19af747315243df62713f7)
      #02 pc 0000000000006794  [anon:dart-codespace]

Code example

const pushRouter = (path)=>{
        router.push(path)
}
const back = ()=>{
        router.back()
}

Expected results

It shouldn't crash for expecting

Actual results

Crash when execute router pop function

flex:1 failed,when parent node style is minHeight/minWidth

What version of webf are you using

main and 0.12

Steps To Reproduce

let box = document.createElement('div');
document.body.style.background= '#f92';
document.body.style.width= '300px';
document.body.style.height= '300px';
document.body.style.display= 'flex';
document.body.style.flexDirection= 'column';
document.body.appendChild(box);

box.style.background = '#6ad0e2';
box.style.display = 'flex';
box.style.flexDirection='column';
box.style.minHeight= '120px';


const icon = document.createElement('div');
icon.style.flex = 1;
icon.style.zIndex = 0;
icon.style.background= '#f32'

box.appendChild(icon);

Code example:

Expected results:

Actual results:

reload 或者 load 复杂的页面 几次 就会崩掉，而且内存不降

Affected version

main

No same issues found.

• Yes, I search all issues but not found.

Steps to Reproduce

F/libc (15661): Fatal signal 11 (SIGSEGV), code 1 (SEGV_MAPERR), fault addr 0x8 in tid 15830 (1.ui), pid 15661 (flutter_example)

---

Build fingerprint: 'Xiaomi/cepheus/cepheus:10/QKQ1.190825.002/V12.0.6.0.QFACNXM:user/release-keys'
Revision: '0'
ABI: 'arm64'
Timestamp: 2022-08-26 20:17:46+0800
pid: 15661, tid: 15830, name: 1.ui >>> com.example <<<
uid: 10829
signal 11 (SIGSEGV), code 1 (SEGV_MAPERR), fault addr 0x8
Cause: null pointer dereference
x0 0000007894ebe200 x1 00000076e24b1af8 x2 ffffffffffffffff x3 0000000000000005
x4 00000000000001ac x5 000000783c9de0b1 x6 000000000000000a x7 000000000000000a
x8 0000000000000000 x9 0000000000000000 x10 0000007815ad2374 x11 0000000000000000
x12 66206120746f6e20 x13 0a6e6f6974636e75 x14 000000000000006f x15 0000000000000000
x16 0000007815b61380 x17 0000007815ad2340 x18 00000078337da000 x19 0000007894ebe200
x20 0000007894ebe298 x21 000000783c663e00 x22 ffffffffffffffff x23 00000076e24b1af0
x24 000000783c99a6e0 x25 ffffffffffffffff x26 0000007833aca020 x27 000000000000f890
x28 0000000400000077 x29 0000007833ac9020
sp 0000007833ac9020 lr 00000078158ab638 pc 0000007815ad238c
backtrace:
#00 pc 000000000004c38c /data/app/com.example-gZbO2tAf4PcMf5hqsFvJiQ==/lib/arm64/libquickjs.so (__JS_FreeValueRT+76) (BuildId: 35b47a52a8e61f4f004d5ce83902cc1972e703c4)
#1 pc 0000000000095634 /data/app/com.example-gZbO2tAf4PcMf5hqsFvJiQ==/lib/arm64/libkraken.so (kraken::binding::qjs::handleInvokeModuleTransientCallback(void*, int, char const*, NativeString*)+768) (BuildId: 4698670a131d19019f67c2ca11703614453ceb83)
#2 pc 0000000000006db4 [anon:dart-codespace]

Code example

搞几个复杂的场景看看

Expected results

..

Actual results

..

Change background-image 🐞

What version of kraken are you using

0.12+1

Steps To Reproduce

change

background-image: linear-gradient(134deg, #FFFFFF 0%, #FFFFFF 100%);;

to

  background-image: linear-gradient(134deg, #FEC6F0 0%, #AEDEF2 100%);

Code example:

Expected results:
UI : background-image change background-image: linear-gradient(134deg, #FEC6F0 0%, #AEDEF2 100%);

Actual results:

Nothing has changed

Add ResizeObserver Support

Feature type

DOM API

The spec link.

https://developer.mozilla.org/en-US/docs/Web/API/ResizeObserver

How much important for you

No response

sliver里面包不同类型的item运行有问题

What version of webf are you using

sliver里面包不同类型的item， 滚动 、增加新元素时候报错

Steps To Reproduce

Code example:

Expected results:

Actual results:

websocket插件不能用了

What version of kraken are you using

改名字后 ，websocket插件不能用了

Steps To Reproduce

Code example:

Expected results:

Actual results:

implement PointerEvent

Feature type

Others

The spec link.

https://w3c.github.io/pointerevents/

How much important for you

#1450

implementation PointerEvent and use the pointerType to distinguish between mouse and gesture

Render performance

What version of kraken are you using

0.12

Steps To Reproduce

drag silder

Code example:

Expected results:
text smooth display

Actual results:

text flashing

code:
dist.zip

Improve text layout performance

如何生成kraken.xcframework

Affected version

0.12.0

No same issues found.

• Yes, I search all issues but not found.

Steps to Reproduce

1.编译bridge时只生成了kraken_bridge.xcframework和quickjs.xcframework. 而集成到原生工程还需要kraken.xcframework, 请问kraken.xcframework是如何生成?

Code example

无

Expected results

无

Actual results

无

throttle不能在限定时间内只执行一次

Affected version

main

No same issues found.

• Yes, I search all issues but not found.

Steps to Reproduce

throttle不能在限定时间内只执行一次

Code example

throttle(()=>{}, 9000)

Expected results

希望在限定时间内只执行一次

Actual results

在限定时间内执行n次

Better input field experience

Feature type

DOM API

The spec link.

https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/Input

How much important for you

The input will use the built-in widget of Flutter to transform (currently in the custom-elements branch). This issue is used to track the transformation progress

• support base function（type=text，value，input、change etc..）
• textarea
• support more type
  • text
  • checkbox
  • hidden
  • hidden
  • search
  • tel
  • url
  • email
  • password
  • number
  • datetime deprecated
  • date
  • month
  • week
  • time
  • file (It will import image_picker into webf. This is not good way)
  • submit
  • button
• support form

When will it better support development under windows

It will be the only obstacle for me to use webf

有开发者/用户群么？建议建一个群，方便大家交流

Should this be an RFC?

• This is not a substantial change

Description

有开发者/用户群么？建议建一个群，方便大家交流

Alternatives and Workarounds

No response

Unhandled Exception: FormatException: Unexpected extension byte

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

kraken：0.11.0
集成：在 flutter 中集成
flutter 版本：2.8.1
运行设备：安卓手机
官网的 demo 是没问题的，但是用 vuecli 创建的demo，会有这个报错

重现步骤 ｜ Steps To Reproduce

打开 app 后，首页是 firstRoute，点击按钮后第一次跳转到 secondRoute（kraken）是正常的。返回到首页再跳转 secondRoute（kraken）就会这样

重现代码 | Code example:

// main.dart
import 'package:flutter/material.dart';
import 'package:kraken/kraken.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: FirstRoute(),
    );
  }
}


class FirstRoute extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('First Route'),
      ),
      body: Center(
        child: ElevatedButton(
          child: const Text('Open route'),
          onPressed: () {
            Navigator.push(
              context,
              MaterialPageRoute(builder: (context) => SecondRoute()),
            );
          },
        ),
      ),
    );
  }
}


class SecondRoute extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    // 链接是：vuecli 创建的项目并build 后将 app.js 上传到 cdn 生成的链接，和官网的 https://andycall.oss-cn-beijing.aliyuncs.com/demo/guide-styles.js 是一个意思，我放在下面这个链接里了
    // https://raw.githubusercontent.com/DWarrior222/node-static-server/master/app.226ff3cb.js
    Kraken kraken = Kraken(bundle: KrakenBundle.fromUrl('https://test.com/xxxxx.js'));
    return kraken;
  }
}

预期结果 ｜ Expected results:
重复操作 “firstRoute 跳转到 secondRoute 后，返回 firstRoute”。页面都正常展示

实际结果 ｜ Actual results:
firstRoute 跳转到 secondRoute 后，返回 firstRoute，再次跳转到 secondRoute 会报错 app 会黑屏

performance Test not work

Affected version

0.12

No same issues found.

• Yes, I search all issues but not found.

Steps to Reproduce

it doesn't work due to rax compatibility issues

Code example

on css-selector branch
#11

Expected results

Performance Test support (webview && webf)

Actual results

adb: failed to install /Users/jiangzhou/Documents/tools/webf/performance_tests/build/app/outputs/flutter-apk/app.apk: Failure [INSTALL_FAILED_INSUFFICIENT_STORAGE]
Error running application on sdk gphone64 arm64.
/Users/jiangzhou/Documents/tools/webf/node_modules/async-done/index.js:18
throw err;
^

Error [ERR_UNHANDLED_ERROR]: Unhandled error. ({
uid: 4,
name: 'run-benchmark',
branch: false,
error: Error: Command failed: flutter run -d emulator-5554 --profile --dart-define="SERVER=10.13.253.49:8892" | grep Performance
Error: ADB exited with exit code 1
Performing Streamed Install

adb: failed to install /Users/jiangzhou/Documents/tools/webf/performance_tests/build/app/outputs/flutter-apk/app.apk: Failure [INSTALL_FAILED_INSUFFICIENT_STORAGE]
Error running application on sdk gphone64 arm64.

  at checkExecSyncError (node:child_process:828:11)
  at execSync (node:child_process:899:15)
  at /Users/jiangzhou/Documents/tools/webf/scripts/tasks.js:696:26
  at taskWrapper (/Users/jiangzhou/Documents/tools/webf/node_modules/undertaker/lib/set-task.js:13:15)
  at bound (node:domain:421:15)
  at runBound (node:domain:432:12)
  at asyncRunner (/Users/jiangzhou/Documents/tools/webf/node_modules/async-done/index.js:55:18)
  at processTicksAndRejections (node:internal/process/task_queues:78:11) {
status: 1,
signal: null,
output: [
  null,
  <Buffer >,
  <Buffer 45 72 72 6f 72 3a 20 41 44 42 20 65 78 69 74 65 64 20 77 69 74 68 20 65 78 69 74 20 63 6f 64 65 20 31 0a 50 65 72 66 6f 72 6d 69 6e 67 20 53 74 72 65 ... 227 more bytes>
],
pid: 33883,
stdout: <Buffer >,
stderr: <Buffer 45 72 72 6f 72 3a 20 41 44 42 20 65 78 69 74 65 64 20 77 69 74 68 20 65 78 69 74 20 63 6f 64 65 20 31 0a 50 65 72 66 6f 72 6d 69 6e 67 20 53 74 72 65 ... 227 more bytes>

},
duration: [ 8, 420732458 ],
time: 1662769426627
})
at new NodeError (node:internal/errors:372:5)
at Gulp.emit (node:events:516:17)
at Gulp.emit (node:domain:475:12)
at Object.error (/Users/jiangzhou/Documents/tools/webf/node_modules/undertaker/lib/helpers/createExtensions.js:61:10)
at handler (/Users/jiangzhou/Documents/tools/webf/node_modules/now-and-later/lib/mapSeries.js:47:14)
at f (/Users/jiangzhou/Documents/tools/webf/node_modules/once/once.js:25:25)
at f (/Users/jiangzhou/Documents/tools/webf/node_modules/once/once.js:25:25)
at tryCatch (/Users/jiangzhou/Documents/tools/webf/node_modules/async-done/index.js:24:15)
at done (/Users/jiangzhou/Documents/tools/webf/node_modules/async-done/index.js:40:12)
at onError (/Users/jiangzhou/Documents/tools/webf/node_modules/async-done/index.js:51:5) {
code: 'ERR_UNHANDLED_ERROR',
context: {
uid: 4,
name: 'run-benchmark',
branch: false,
error: Error: Command failed: flutter run -d emulator-5554 --profile --dart-define="SERVER=10.13.253.49:8892" | grep Performance
Error: ADB exited with exit code 1
Performing Streamed Install

adb: failed to install /Users/jiangzhou/Documents/tools/webf/performance_tests/build/app/outputs/flutter-apk/app.apk: Failure [INSTALL_FAILED_INSUFFICIENT_STORAGE]
Error running application on sdk gphone64 arm64.

    at checkExecSyncError (node:child_process:828:11)
    at execSync (node:child_process:899:15)
    at /Users/jiangzhou/Documents/tools/webf/scripts/tasks.js:696:26
    at taskWrapper (/Users/jiangzhou/Documents/tools/webf/node_modules/undertaker/lib/set-task.js:13:15)
    at bound (node:domain:421:15)
    at runBound (node:domain:432:12)
    at asyncRunner (/Users/jiangzhou/Documents/tools/webf/node_modules/async-done/index.js:55:18)
    at processTicksAndRejections (node:internal/process/task_queues:78:11) {
  status: 1,
  signal: null,
  output: [
    null,
    Buffer(0) [Uint8Array] [],
    Buffer(277) [Uint8Array] [
       69, 114, 114, 111, 114,  58,  32,  65,  68,  66,  32, 101,
      120, 105, 116, 101, 100,  32, 119, 105, 116, 104,  32, 101,
      120, 105, 116,  32,  99, 111, 100, 101,  32,  49,  10,  80,
      101, 114, 102, 111, 114, 109, 105, 110, 103,  32,  83, 116,
      114, 101,  97, 109, 101, 100,  32,  73, 110, 115, 116,  97,
      108, 108,  10,  10,  97, 100,  98,  58,  32, 102,  97, 105,
      108, 101, 100,  32, 116, 111,  32, 105, 110, 115, 116,  97,
      108, 108,  32,  47,  85, 115, 101, 114, 115,  47, 106, 105,
       97, 110, 103, 122,
      ... 177 more items
    ]
  ],
  pid: 33883,
  stdout: Buffer(0) [Uint8Array] [],
  stderr: Buffer(277) [Uint8Array] [
     69, 114, 114, 111, 114,  58,  32,  65,  68,  66,  32, 101,
    120, 105, 116, 101, 100,  32, 119, 105, 116, 104,  32, 101,
    120, 105, 116,  32,  99, 111, 100, 101,  32,  49,  10,  80,
    101, 114, 102, 111, 114, 109, 105, 110, 103,  32,  83, 116,
    114, 101,  97, 109, 101, 100,  32,  73, 110, 115, 116,  97,
    108, 108,  10,  10,  97, 100,  98,  58,  32, 102,  97, 105,
    108, 101, 100,  32, 116, 111,  32, 105, 110, 115, 116,  97,
    108, 108,  32,  47,  85, 115, 101, 114, 115,  47, 106, 105,
     97, 110, 103, 122,
    ... 177 more items
  ]
},
duration: [ 8, 420732458 ],
time: 1662769426627

}
}

Support testing with Chrome DevTools Protocol

Should this be an RFC?

• This is not a substantial change

Description

WebF provide a devtools for front-end developers to inpect their pages.

Devtools implements the Chrome DevTools Protocol to communicate with Chrome's built-in developer tools. But these code are not covered with test specs and if we change our code base, it may be broken in the future.

Alternatives and Workarounds

No response

window.getComputedStyle 计划什么时候可以支持呢？

window.getComputedStyle 计划什么时候可以支持呢？

Failed to load dynamic library '$ORIGIN/libwebf.so'

Affected version

0.12.0

No same issues found.

• Yes, I search all issues but not found.

Steps to Reproduce

1.Clone the project
2.Enter the example folder
3.Run command "flutter run"

Code example

no code

Expected results

no expected results

Actual results

Unhandled Exception: Invalid argument(s): Failed to load dynamic library '$ORIGIN/libwebf.so': $ORIGIN/libwebf.so: cannot open shared object file: No such file or directory

Add ResizeObserver support

Feature type

BOM API

The spec link.

https://w3c.github.io/csswg-drafts/resize-observer/#resize-observer-interface

How much important for you

must be have

安卓32位系统 vue2绑定点击事件无效

Affected version

main

No same issues found.

• Yes, I search all issues but not found.

Steps to Reproduce

1. 测试机为32位安卓系统
2. 运行vue2的demo

Code example

<template>
  <div id="app">
    <div @click="handleClick" style="width: 300px; height: 300px">点我呀</div>
    {{ msg }}
  </div>
</template>

<script>
export default {
  name: 'App',
  components: {},
  data() {
    return { msg: '' }
  },
  methods: {
    handleClick() {
      console.log('clicked')
      this.msg = 'hello'
    }
  }
}
</script>

Expected results

点击事件生效 & 有log输出

Actual results

无点击事件响应

Add QuickJS column line support

Should this be an RFC?

• This is not a substantial change

Description

If a js error is fired by QuickJS, we can only collect call stack frames and line number, but not the column number.

The column line support is essential if we wants to enable source map support for our JavaScript Debugger, otherwise the minified JavaScript code can't be debugged because all codes are in one line and column line info is missing.

Alternatives and Workarounds

No response

M1 run Error

What version of kraken are you using

0.12.0

Steps To Reproduce

M1 flutter run ios/macos

Code example:

import 'package:flutter/material.dart';
import 'package:webf/devtools.dart';
import 'package:webf/webf.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        // This is the theme of your application.
        //
        // Try running your application with "flutter run". You'll see the
        // application has a blue toolbar. Then, without quitting the app, try
        // changing the primarySwatch below to Colors.green and then invoke
        // "hot reload" (press "r" in the console where you ran "flutter run",
        // or simply save your changes to "hot reload" in a Flutter IDE).
        // Notice that the counter didn't reset back to zero; the application
        // is not restarted.
        primarySwatch: Colors.blue,
      ),
      home: const MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  const MyHomePage({Key? key, required this.title}) : super(key: key);

  // This widget is the home page of your application. It is stateful, meaning
  // that it has a State object (defined below) that contains fields that affect
  // how it looks.

  // This class is the configuration for the state. It holds the values (in this
  // case the title) provided by the parent (in this case the App widget) and
  // used by the build method of the State. Fields in a Widget subclass are
  // always marked "final".

  final String title;

  @override
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  int _counter = 0;

  void _incrementCounter() {
    setState(() {
      // This call to setState tells the Flutter framework that something has
      // changed in this State, which causes it to rerun the build method below
      // so that the display can reflect the updated values. If we changed
      // _counter without calling setState(), then the build method would not be
      // called again, and so nothing would appear to happen.
      _counter++;
    });
  }

  @override
  Widget build(BuildContext context) {
    // This method is rerun every time setState is called, for instance as done
    // by the _incrementCounter method above.
    //
    // The Flutter framework has been optimized to make rerunning build methods
    // fast, so that you can just rebuild anything that needs updating rather
    // than having to individually change instances of widgets.
    final MediaQueryData queryData = MediaQuery.of(context);
    final TextEditingController textEditingController = TextEditingController();
    final Size viewportSize = queryData.size;
    return Scaffold(
      appBar: AppBar(
        // Here we take the value from the MyHomePage object that was created by
        // the App.build method, and use it to set our appbar title.
        title: Text(widget.title),
      ),
      body: Center(
        // Center is a layout widget. It takes a single child and positions it
        // in the middle of the parent.
        child: Column(
          // Column is also a layout widget. It takes a list of children and
          // arranges them vertically. By default, it sizes itself to fit its
          // children horizontally, and tries to be as tall as its parent.
          //
          // Invoke "debug painting" (press "p" in the console, choose the
          // "Toggle Debug Paint" action from the Flutter Inspector in Android
          // Studio, or the "Toggle Debug Paint" command in Visual Studio Code)
          // to see the wireframe for each widget.
          //
          // Column has various properties to control how it sizes itself and
          // how it positions its children. Here we use mainAxisAlignment to
          // center the children vertically; the main axis here is the vertical
          // axis because Columns are vertical (the cross axis would be
          // horizontal).
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            const Text(
              'You have pushed the button this many times:',
            ),
            Text(
              '$_counter',
              style: Theme.of(context).textTheme.headline4,
            ),
            WebF(
              devToolsService:
                  ChromeDevToolsService(), // Enable Chrome DevTools Services
              viewportWidth: viewportSize.width -
                  queryData.padding.horizontal, // Adjust the viewportWidth
              viewportHeight: viewportSize.height -
                  queryData.padding.vertical, // Adjust the viewportHeight
              bundle: WebFBundle.fromUrl(
                  'https://andycall.oss-accelerate.aliyuncs.com/demo/animation.js'), // The page entry point
            ),
          ],
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: _incrementCounter,
        tooltip: 'Increment',
        child: const Icon(Icons.add),
      ), // This trailing comma makes auto-formatting nicer for build methods.
    );
  }
}

Expected results:
run sucess

Actual results:
run macos log
but is an incompatible architecture (have 'x86_64', need 'arm64e'))
run iso log
Error (Xcode): Framework not found quickjs

CSS hsl() not works that would throw error

What version of webf are you using

0.12

Steps To Reproduce

Open https://wpt.live/css/css-color/hsl-001.html and you will see a dart runtime error occur.

Code example:

https://wpt.live/css/css-color/hsl-001.html

Expected results:

Actual results:

Add SVG Support

Feature type

CSS/DOM Style

The spec link.

https://www.w3.org/TR/SVG2/

How much important for you

No response

0.14.x Iteration Plan

1. Platforms
   1. #162
2. Testing System
   1. #76
   2. #74
   3. #75
3. DevTools
   1. #77
   2. #79
   3. #124
4. Web API
   1. #80 @devjiangzhou
   2. #82 @devjiangzhou
   3. Maybe needs more.
5. QuickJS JavaScript Engine
   1. #84
6. Rendering & CSS
   1. #85 @XGHeaven
   2. #86 @burtonsun
   3. #87 @burtonsun
7. Infra
   1. New profile system.
8. Security
   1. How can we protect ours users navigate to untrusted pages.
9. Flutter Widget Elements
   1. Use material ui for android and Cupertino ui for iOS, macOS
   2. Add scoped name slot support.

Network panel is not working

Affected version

main

No same issues found.

• Yes, I search all issues but not found.

Steps to Reproduce

Nothing appear in networking panel.

Code example

var text1 = document.createTextNode('Hello webf!');
var br = document.createElement('br');
var text2 = document.createTextNode('你好，webf！');
var p = document.createElement('p');
p.className = 'p';
p.style.display = 'inline-block';
p.style.textAlign = 'center';
p.style.animation = '3s ease-in 1s 1 reverse both running example';
p.appendChild(text1);
p.appendChild(br);
p.appendChild(text2);

document.body.appendChild(p);

Expected results

Networking recorded

Actual results

Nothing appear.

[fix] width/height when naturalWidth unequal real width

Affected version

0.11.0 +

No same issues found.

• Yes, I search all issues but not found.

Steps to Reproduce

复现步骤：
使用以下vue demo，图片在较多设备上，如：iQOO5 Android 12
图片资源：https://img.vivo.com.cn/sloth/a/i/d9c260674f5b.png
打印img.dart中BoxFitImage下载的实际imge到宽高<图片的原始宽高
即_onImageLoad中获取的naturalWidth/naturalHeight（32768/227）
小于
_handleImageFrame解析图片的回调图片的实际宽高 (16384/13)

导致的问题：
前端在onload中打印的naturalWidth和width都是一致的(32768)，但以下demo中的图片显示异常

Code example

vue demo

<template>
    <canvas ref="canvas" class="sprite"></canvas>
  </div>
</template>

<style>
  .kraken_img {
    margin: 10px 0px;
  }
  .sprite  {
    align-items: center;
    display: flex;
    flex-direction: column;
    position: relative;
    background-position: 0 0;
    background-repeat: no-repeat;
    background-size: auto 100%;
    transform: translateZ(0) scale(1.18);
    height: 2.27rem;
    width: 6.97rem;
  }

</style>

<script>

export default {
  name: 'home',
  data() {
    return {
      canvaswidth: 0,
      canvasheight: 0,
      imgWidht: 0,
      imgHeight: 0,
      gapFlag: false,
      endNum: 47
    }
  },

  mounted() {
    const img = new Image()
    img.src = 'https://img.vivo.com.cn/sloth/a/i/d9c260674f5b.png'
    
    const canvas = this.$refs.canvas
    const ctx = canvas.getContext('2d')
    const _that = this

    const canvasWidth = canvas.width
    const canvasHeight = canvas.height

    img.onload = () => {
      console.log(img.src);
      console.log('img natural(' + img.naturalWidth + ',' + img.naturalHeight + ')');
      console.log('img (' + img.width + ',' + img.height + ')');
      this.imgWidht = img.width / (this.endNum)
      this.imgHeight = img.height
      ctx.drawImage(img, 0, 0, _that.imgWidht, _that.imgHeight, 0, 0, canvasWidth, canvasHeight)
    }
  }
}
</script>

Expected results

图片显示正常，imgWidht = img.width / (this.endNum) drawImage绘制横向图片1/47区域

Actual results

图片显示异常，imgWidht = img.width / (this.endNum) drawImage绘制横向图片2/47区域（这是由于onload实际图片被压缩1/2而计算时使用的原图长度）

Add CSS Stacking Context Support

Feature type

CSS/DOM Style

The spec link.

https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Positioning/Understanding_z_index/The_stacking_context

How much important for you

No response

屏幕适配

Should this be an RFC?

• This is not a substantial change

Description

非常感谢这个库的存在！
目前正在使用webf，来运行H5，目前适配效果不是很好，很容易造成页面左右滑动，请问如何才能做好适配相关的工作呢？需要在Flutter 容器层做处理吗？

Alternatives and Workarounds

No response

Support testing with Front-End frameworks (Vue, React)

Should this be an RFC?

• This is not a substantial change

Description

We now use the DOM API and HTML templates for integration tests specs that can easly handle cases with one or less API.

But in the real world, people are using front-end frameworks to build applications. If we build a test system that integrated with front-end framework, we can cover all cases in our test systems and run production code in our testing system.

Front-end frameworks are higher-level DOM API abstractions, the operation details are hidden inside these frameworks, and if something goes wrong, it will take more time to figure out why.

Alternatives and Workarounds

No response

Crash in WidgetElement

Affected version

main

No same issues found.

• Yes, I search all issues but not found.

Steps to Reproduce

1. build the release version of Android using M1
2. create a project using the vue cli
3. use ref in the declaration of the WidgetElement
4. run using the arm64 emulator

F/libc    (20594): Fatal signal 11 (SIGSEGV), code 1 (SEGV_MAPERR), fault addr 0x0 in tid 20870 (1.ui), pid 20594 (bf.webf_example)
*** *** *** *** *** *** *** *** *** *** *** *** *** *** *** ***
Build fingerprint: 'google/sdk_gphone64_arm64/emulator64_arm64:12/S2B2.211203.006/8015633:user/release-keys'
Revision: '0'
ABI: 'arm64'
Timestamp: 2022-10-21 19:15:49.649176157+0800
Process uptime: 0s
Cmdline: com.openwebf.webf_example
pid: 20594, tid: 20870, name: 1.ui  >>> com.openwebf.webf_example <<<
uid: 10178
tagged_addr_ctrl: 0000000000000001
signal 11 (SIGSEGV), code 1 (SEGV_MAPERR), fault addr 0x0
Cause: null pointer dereference
    x0  b400007d111126f0  x1  0000000000000000  x2  00000000000000fe  x3  b400007d111126f0
    x4  00000000000000fe  x5  b400007d111127ee  x6  0000000000000003  x7  0000000000000003
    x8  00000000000000b4  x9  0000000000000000  x10 00000000d56310d4  x11 00000000111127ee
    x12 0000ffff00000eff  x13 0000000082c2b1ba  x14 00000000002df52a  x15 00000140486e3ae8
    x16 0000007bbcde0d40  x17 0000007f036b4b20  x18 0000007bda4cc000  x19 0000000000000000
    x20 b400007c711004d0  x21 00000000000000fe  x22 b400007c9111f9d0  x23 fffffffffffffff8
    x24 0000007be45a1000  x25 ffffffffffffffff  x26 ffffffffffffffff  x27 b400007cf10d9834
    x28 0000007be459a520  x29 0000007be4599aa0
    lr  0000007bbcca9b64  sp  0000007be4599a80  pc  0000007f036b4a98  pst 0000000020001000
backtrace:
      #00 pc 000000000004ba98  /apex/com.android.runtime/lib64/bionic/libc.so (__memcpy+232) (BuildId: b2e84269f59e7b1658e3a470fd302458)
      #01 pc 00000000000a9b60  /data/app/~~7EHhxsJ1gdeCjLf9-J5YHQ==/com.openwebf.webf_example-kqJvdQBfmONUb94fv8g5Ug==/lib/arm64/libwebf.so (webf::NativeString::NativeString(unsigned short const*, unsigned int)+56) (BuildId: 7716bf9b5bc154b281ebccab9b425fb85991e553)
      #02 pc 00000000000b1fac  /data/app/~~7EHhxsJ1gdeCjLf9-J5YHQ==/com.openwebf.webf_example-kqJvdQBfmONUb94fv8g5Ug==/lib/arm64/libwebf.so (webf::AtomicString::ToNativeString() const+148) (BuildId: 7716bf9b5bc154b281ebccab9b425fb85991e553)
      #03 pc 00000000000c801c  /data/app/~~7EHhxsJ1gdeCjLf9-J5YHQ==/com.openwebf.webf_example-kqJvdQBfmONUb94fv8g5Ug==/lib/arm64/libwebf.so (webf::BindingObject::GetBindingProperty(webf::AtomicString const&, webf::ExceptionState&) const+60) (BuildId: 7716bf9b5bc154b281ebccab9b425fb85991e553)
      #04 pc 00000000000d1e40  /data/app/~~7EHhxsJ1gdeCjLf9-J5YHQ==/com.openwebf.webf_example-kqJvdQBfmONUb94fv8g5Ug==/lib/arm64/libwebf.so (webf::WidgetElement::item(webf::AtomicString const&, webf::ExceptionState&)+156) (BuildId: 7716bf9b5bc154b281ebccab9b425fb85991e553)
      #05 pc 0000000000139bb0  /data/app/~~7EHhxsJ1gdeCjLf9-J5YHQ==/com.openwebf.webf_example-kqJvdQBfmONUb94fv8g5Ug==/lib/arm64/libwebf.so (webf::QJSWidgetElement::StringPropertyGetterCallback(JSContext*, JSValue, unsigned int)+148) (BuildId: 7716bf9b5bc154b281ebccab9b425fb85991e553)
      #06 pc 00000000000ad290  /data/app/~~7EHhxsJ1gdeCjLf9-J5YHQ==/com.openwebf.webf_example-kqJvdQBfmONUb94fv8g5Ug==/lib/arm64/libwebf.so (BuildId: 7716bf9b5bc154b281ebccab9b425fb85991e553)
      #07 pc 0000000000050470  /data/app/~~7EHhxsJ1gdeCjLf9-J5YHQ==/com.openwebf.webf_example-kqJvdQBfmONUb94fv8g5Ug==/lib/arm64/libquickjs.so (JS_GetPropertyInternal+988) (BuildId: 5b9a27e47d561ba2fc362f40f88da1d7e9d06140)
      #08 pc 00000000000a0fb0  /data/app/~~7EHhxsJ1gdeCjLf9-J5YHQ==/com.openwebf.webf_example-kqJvdQBfmONUb94fv8g5Ug==/lib/arm64/libquickjs.so (js_object_toString+380) (BuildId: 5b9a27e47d561ba2fc362f40f88da1d7e9d06140)
      #09 pc 00000000000435bc  /data/app/~~7EHhxsJ1gdeCjLf9-J5YHQ==/com.openwebf.webf_example-kqJvdQBfmONUb94fv8g5Ug==/lib/arm64/libquickjs.so (js_call_c_function+208) (BuildId: 5b9a27e47d561ba2fc362f40f88da1d7e9d06140)
      #10 pc 0000000000043ca4  /data/app/~~7EHhxsJ1gdeCjLf9-J5YHQ==/com.openwebf.webf_example-kqJvdQBfmONUb94fv8g5Ug==/lib/arm64/libquickjs.so (JS_CallInternal+732) (BuildId: 5b9a27e47d561ba2fc362f40f88da1d7e9d06140)
      #11 pc 00000000000439b8  /data/app/~~7EHhxsJ1gdeCjLf9-J5YHQ==/com.openwebf.webf_example-kqJvdQBfmONUb94fv8g5Ug==/lib/arm64/libquickjs.so (JS_Call+40) (BuildId: 5b9a27e47d561ba2fc362f40f88da1d7e9d06140)
      #12 pc 00000000000435bc  /data/app/~~7EHhxsJ1gdeCjLf9-J5YHQ==/com.openwebf.webf_example-kqJvdQBfmONUb94fv8g5Ug==/lib/arm64/libquickjs.so (js_call_c_function+208) (BuildId: 5b9a27e47d561ba2fc362f40f88da1d7e9d06140)
      #13 pc 0000000000043ca4  /data/app/~~7EHhxsJ1gdeCjLf9-J5YHQ==/com.openwebf.webf_example-kqJvdQBfmONUb94fv8g5Ug==/lib/arm64/libquickjs.so (JS_CallInternal+732) (BuildId: 5b9a27e47d561ba2fc362f40f88da1d7e9d06140)
      #14 pc 0000000000044c14  /data/app/~~7EHhxsJ1gdeCjLf9-J5YHQ==/com.openwebf.webf_example-kqJvdQBfmONUb94fv8g5Ug==/lib/arm64/libquickjs.so (JS_CallInternal+4684) (BuildId: 5b9a27e47d561ba2fc362f40f88da1d7e9d06140)
      #15 pc 0000000000044a64  /data/app/~~7EHhxsJ1gdeCjLf9-J5YHQ==/com.openwebf.webf_example-kqJvdQBfmONUb94fv8g5Ug==/lib/arm64/libquickjs.so (JS_CallInternal+4252) (BuildId: 5b9a27e47d561ba2fc362f40f88da1d7e9d06140)
      #16 pc 0000000000044a64  /data/app/~~7EHhxsJ1gdeCjLf9-J5YHQ==/com.openwebf.webf_example-kqJvdQBfmONUb94fv8g5Ug==/lib/arm64/libquickjs.so (JS_CallInternal+4252) (BuildId: 5b9a27e47d561ba2fc362f40f88da1d7e9d06140)
      #17 pc 0000000000044a64  /data/app/~~7EHhxsJ1gdeCjLf9-J5YHQ==/com.openwebf.webf_example-kqJvdQBfmONUb94fv8g5Ug==/lib/arm64/libquickjs.so (JS_CallInternal+4252) (BuildId: 5b9a27e47d561ba2fc362f40f88da1d7e9d06140)
      #18 pc 0000000000044a64  /data/app/~~7EHhxsJ1gdeCjLf9-J5YHQ==/com.openwebf.webf_example-kqJvdQBfmONUb94fv8g5Ug==/lib/arm64/libquickjs.so (JS_CallInternal+4252) (BuildId: 5b9a27e47d561ba2fc362f40f88da1d7e9d06140)
      #19 pc 0000000000044a64  /data/app/~~7EHhxsJ1gdeCjLf9-J5YHQ==/com.openwebf.webf_example-kqJvdQBfmONUb94fv8g5Ug==/lib/arm64/libquickjs.so (JS_CallInternal+4252) (BuildId: 5b9a27e47d561ba2fc362f40f88da1d7e9d06140)
      #20 pc 0000000000044a64  /data/app/~~7EHhxsJ1gdeCjLf9-J5YHQ==/com.openwebf.webf_example-kqJvdQBfmONUb94fv8g5Ug==/lib/arm64/libquickjs.so (JS_CallInternal+4252) (BuildId: 5b9a27e47d561ba2fc362f40f88da1d7e9d06140)
      #21 pc 000000000004a264  /data/app/~~7EHhxsJ1gdeCjLf9-J5YHQ==/com.openwebf.webf_example-kqJvdQBfmONUb94fv8g5Ug==/lib/arm64/libquickjs.so (JS_CallFree+64) (BuildId: 5b9a27e47d561ba2fc362f40f88da1d7e9d06140)
      #22 pc 000000000004ff94  /data/app/~~7EHhxsJ1gdeCjLf9-J5YHQ==/com.openwebf.webf_example-kqJvdQBfmONUb94fv8g5Ug==/lib/arm64/libquickjs.so (call_setter+84) (BuildId: 5b9a27e47d561ba2fc362f40f88da1d7e9d06140)
      #23 pc 0000000000053ce8  /data/app/~~7EHhxsJ1gdeCjLf9-J5YHQ==/com.openwebf.webf_example-kqJvdQBfmONUb94fv8g5Ug==/lib/arm64/libquickjs.so (JS_SetPropertyInternal+836) (BuildId: 5b9a27e47d561ba2fc362f40f88da1d7e9d06140)
      #24 pc 0000000000047628  /data/app/~~7EHhxsJ1gdeCjLf9-J5YHQ==/com.openwebf.webf_example-kqJvdQBfmONUb94fv8g5Ug==/lib/arm64/libquickjs.so (JS_CallInternal+15456) (BuildId: 5b9a27e47d561ba2fc362f40f88da1d7e9d06140)
      #25 pc 000000000004a264  /data/app/~~7EHhxsJ1gdeCjLf9-J5YHQ==/com.openwebf.webf_example-kqJvdQBfmONUb94fv8g5Ug==/lib/arm64/libquickjs.so (JS_CallFree+64) (BuildId: 5b9a27e47d561ba2fc362f40f88da1d7e9d06140)
      #26 pc 00000000000a8564  /data/app/~~7EHhxsJ1gdeCjLf9-J5YHQ==/com.openwebf.webf_example-kqJvdQBfmONUb94fv8g5Ug==/lib/arm64/libquickjs.so (js_proxy_set+312) (BuildId: 5b9a27e47d561ba2fc362f40f88da1d7e9d06140)
      #27 pc 0000000000053f88  /data/app/~~7EHhxsJ1gdeCjLf9-J5YHQ==/com.openwebf.webf_example-kqJvdQBfmONUb94fv8g5Ug==/lib/arm64/libquickjs.so (JS_SetPropertyInternal+1508) (BuildId: 5b9a27e47d561ba2fc362f40f88da1d7e9d06140)
      #28 pc 0000000000053058  /data/app/~~7EHhxsJ1gdeCjLf9-J5YHQ==/com.openwebf.webf_example-kqJvdQBfmONUb94fv8g5Ug==/lib/arm64/libquickjs.so (JS_SetPropertyValue+840) (BuildId: 5b9a27e47d561ba2fc362f40f88da1d7e9d06140)
      #29 pc 0000000000047f34  /data/app/~~7EHhxsJ1gdeCjLf9-J5YHQ==/com.openwebf.webf_example-kqJvdQBfmONUb94fv8g5Ug==/lib/arm64/libquickjs.so (JS_CallInternal+17772) (BuildId: 5b9a27e47d561ba2fc362f40f88da1d7e9d06140)
      #30 pc 0000000000044c14  /data/app/~~7EHhxsJ1gdeCjLf9-J5YHQ==/com.openwebf.webf_example-kqJvdQBfmONUb94fv8g5Ug==/lib/arm64/libquickjs.so (JS_CallInternal+4684) (BuildId: 5b9a27e47d561ba2fc362f40f88da1d7e9d06140)
      #31 pc 0000000000044a64  /data/app/~~7EHhxsJ1gdeCjLf9-J5YHQ==/com.openwebf.webf_example-kqJvdQBfmONUb94fv8g5Ug==/lib/arm64/libquickjs.so (JS_CallInternal+4252) (BuildId: 5b9a27e47d561ba2fc362f40f88da1d7e9d06140)
      #32 pc 0000000000044a64  /data/app/~~7EHhxsJ1gdeCjLf9-J5YHQ==/com.openwebf.webf_example-kqJvdQBfmONUb94fv8g5Ug==/lib/arm64/libquickjs.so (JS_CallInternal+4252) (BuildId: 5b9a27e47d561ba2fc362f40f88da1d7e9d06140)
      #33 pc 0000000000044a64  /data/app/~~7EHhxsJ1gdeCjLf9-J5YHQ==/com.openwebf.webf_example-kqJvdQBfmONUb94fv8g5Ug==/lib/arm64/libquickjs.so (JS_CallInternal+4252) (BuildId: 5b9a27e47d561ba2fc362f40f88da1d7e9d06140)
      #34 pc 0000000000044c14  /data/app/~~7EHhxsJ1gdeCjLf9-J5YHQ==/com.openwebf.webf_example-kqJvdQBfmONUb94fv8g5Ug==/lib/arm64/libquickjs.so (JS_CallInternal+4684) (BuildId: 5b9a27e47d561ba2fc362f40f88da1d7e9d06140)
      #35 pc 000000000004a264  /data/app/~~7EHhxsJ1gdeCjLf9-J5YHQ==/com.openwebf.webf_example-kqJvdQBfmONUb94fv8g5Ug==/lib/arm64/libquickjs.so (JS_CallFree+64) (BuildId: 5b9a27e47d561ba2fc362f40f88da1d7e9d06140)
      #36 pc 0000000000089970  /data/app/~~7EHhxsJ1gdeCjLf9-J5YHQ==/com.openwebf.webf_example-kqJvdQBfmONUb94fv8g5Ug==/lib/arm64/libquickjs.so (JS_EvalFunctionInternal+104) (BuildId: 5b9a27e47d561ba2fc362f40f88da1d7e9d06140)
      #37 pc 000000000005a3ec  /data/app/~~7EHhxsJ1gdeCjLf9-J5YHQ==/com.openwebf.webf_example-kqJvdQBfmONUb94fv8g5Ug==/lib/arm64/libquickjs.so (__JS_EvalInternal+2060) (BuildId: 5b9a27e47d561ba2fc362f40f88da1d7e9d06140)
      #38 pc 00000000000877b8  /data/app/~~7EHhxsJ1gdeCjLf9-J5YHQ==/com.openwebf.webf_example-kqJvdQBfmONUb94fv8g5Ug==/lib/arm64/libquickjs.so (JS_EvalObject+152) (BuildId: 5b9a27e47d561ba2fc362f40f88da1d7e9d06140)
      #39 pc 00000000000451d4  /data/app/~~7EHhxsJ1gdeCjLf9-J5YHQ==/com.openwebf.webf_example-kqJvdQBfmONUb94fv8g5Ug==/lib/arm64/libquickjs.so (JS_CallInternal+6156) (BuildId: 5b9a27e47d561ba2fc362f40f88da1d7e9d06140)
      #40 pc 00000000000439b8  /data/app/~~7EHhxsJ1gdeCjLf9-J5YHQ==/com.openwebf.webf_example-kqJvdQBfmONUb94fv8g5Ug==/lib/arm64/libquickjs.so (JS_Call+40) (BuildId: 5b9a27e47d561ba2fc362f40f88da1d7e9d06140)
      #41 pc 00000000000435bc  /data/app/~~7EHhxsJ1gdeCjLf9-J5YHQ==/com.openwebf.webf_example-kqJvdQBfmONUb94fv8g5Ug==/lib/arm64/libquickjs.so (js_call_c_function+208) (BuildId: 5b9a27e47d561ba2fc362f40f88da1d7e9d06140)
      #42 pc 0000000000043ca4  /data/app/~~7EHhxsJ1gdeCjLf9-J5YHQ==/com.openwebf.webf_example-kqJvdQBfmONUb94fv8g5Ug==/lib/arm64/libquickjs.so (JS_CallInternal+732) (BuildId: 5b9a27e47d561ba2fc362f40f88da1d7e9d06140)
      #43 pc 0000000000044c14  /data/app/~~7EHhxsJ1gdeCjLf9-J5YHQ==/com.openwebf.webf_example-kqJvdQBfmONUb94fv8g5Ug==/lib/arm64/libquickjs.so (JS_CallInternal+4684) (BuildId: 5b9a27e47d561ba2fc362f40f88da1d7e9d06140)
      #44 pc 0000000000044a64  /data/app/~~7EHhxsJ1gdeCjLf9-J5YHQ==/com.openwebf.webf_example-kqJvdQBfmONUb94fv8g5Ug==/lib/arm64/libquickjs.so (JS_CallInternal+4252) (BuildId: 5b9a27e47d561ba2fc362f40f88da1d7e9d06140)
      #45 pc 0000000000044a64  /data/app/~~7EHhxsJ1gdeCjLf9-J5YHQ==/com.openwebf.webf_example-kqJvdQBfmONUb94fv8g5Ug==/lib/arm64/libquickjs.so (JS_CallInternal+4252) (BuildId: 5b9a27e47d561ba2fc362f40f88da1d7e9d06140)
      #46 pc 00000000000439b8  /data/app/~~7EHhxsJ1gdeCjLf9-J5YHQ==/com.openwebf.webf_example-kqJvdQBfmONUb94fv8g5Ug==/lib/arm64/libquickjs.so (JS_Call+40) (BuildId: 5b9a27e47d561ba2fc362f40f88da1d7e9d06140)
      #47 pc 00000000000435bc  /data/app/~~7EHhxsJ1gdeCjLf9-J5YHQ==/com.openwebf.webf_example-kqJvdQBfmONUb94fv8g5Ug==/lib/arm64/libquickjs.so (js_call_c_function+208) (BuildId: 5b9a27e47d561ba2fc362f40f88da1d7e9d06140)
      #48 pc 0000000000043ca4  /data/app/~~7EHhxsJ1gdeCjLf9-J5YHQ==/com.openwebf.webf_example-kqJvdQBfmONUb94fv8g5Ug==/lib/arm64/libquickjs.so (JS_CallInternal+732) (BuildId: 5b9a27e47d561ba2fc362f40f88da1d7e9d06140)
      #49 pc 0000000000044c14  /data/app/~~7EHhxsJ1gdeCjLf9-J5YHQ==/com.openwebf.webf_example-kqJvdQBfmONUb94fv8g5Ug==/lib/arm64/libquickjs.so (JS_CallInternal+4684) (BuildId: 5b9a27e47d561ba2fc362f40f88da1d7e9d06140)
      #50 pc 0000000000044a64  /data/app/~~7EHhxsJ1gdeCjLf9-J5YHQ==/com.openwebf.webf_example-kqJvdQBfmONUb94fv8g5Ug==/lib/arm64/libquickjs.so (JS_CallInternal+4252) (BuildId: 5b9a27e47d561ba2fc362f40f88da1d7e9d06140)
      #51 pc 0000000000044a64  /data/app/~~7EHhxsJ1gdeCjLf9-J5YHQ==/com.openwebf.webf_example-kqJvdQBfmONUb94fv8g5Ug==/lib/arm64/libquickjs.so (JS_CallInternal+4252) (BuildId: 5b9a27e47d561ba2fc362f40f88da1d7e9d06140)
      #52 pc 0000000000044a64  /data/app/~~7EHhxsJ1gdeCjLf9-J5YHQ==/com.openwebf.webf_example-kqJvdQBfmONUb94fv8g5Ug==/lib/arm64/libquickjs.so (JS_CallInternal+4252) (BuildId: 5b9a27e47d561ba2fc362f40f88da1d7e9d06140)
      #53 pc 000000000004a264  /data/app/~~7EHhxsJ1gdeCjLf9-J5YHQ==/com.openwebf.webf_example-kqJvdQBfmONUb94fv8g5Ug==/lib/arm64/libquickjs.so (JS_CallFree+64) (BuildId: 5b9a27e47d561ba2fc362f40f88da1d7e9d06140)
      #54 pc 0000000000089970  /data/app/~~7EHhxsJ1gdeCjLf9-J5YHQ==/com.openwebf.webf_example-kqJvdQBfmONUb94fv8g5Ug==/lib/arm64/libquickjs.so (JS_EvalFunctionInternal+104) (BuildId: 5b9a27e47d561ba2fc362f40f88da1d7e9d06140)
      #55 pc 000000000005a3ec  /data/app/~~7EHhxsJ1gdeCjLf9-J5YHQ==/com.openwebf.webf_example-kqJvdQBfmONUb94fv8g5Ug==/lib/arm64/libquickjs.so (__JS_EvalInternal+2060) (BuildId: 5b9a27e47d561ba2fc362f40f88da1d7e9d06140)
      #56 pc 00000000000b4ec0  /data/app/~~7EHhxsJ1gdeCjLf9-J5YHQ==/com.openwebf.webf_example-kqJvdQBfmONUb94fv8g5Ug==/lib/arm64/libwebf.so (webf::ExecutingContext::EvaluateJavaScript(unsigned short const*, unsigned long, char const*, int)+336) (BuildId: 7716bf9b5bc154b281ebccab9b425fb85991e553)
      #57 pc 00000000000b68c8  /data/app/~~7EHhxsJ1gdeCjLf9-J5YHQ==/com.openwebf.webf_example-kqJvdQBfmONUb94fv8g5Ug==/lib/arm64/libwebf.so (webf::WebFPage::evaluateScript(webf::NativeString const*, char const*, int)+64) (BuildId: 7716bf9b5bc154b281ebccab9b425fb85991e553)
      #58 pc 00000000000a6b0c  /data/app/~~7EHhxsJ1gdeCjLf9-J5YHQ==/com.openwebf.webf_example-kqJvdQBfmONUb94fv8g5Ug==/lib/arm64/libwebf.so (evaluateScripts+68) (BuildId: 7716bf9b5bc154b281ebccab9b425fb85991e553)
      #59 pc 0000000000006844  [anon:dart-codespace]

Code example

Text.vue

<template>
  <text-element ref="textEl">
    <slot />
  </text-element>
</template>

<script lang="ts">
import { props } from "./props";
import { defineComponent, ref } from "@vue/runtime-core";
import { Ref } from "@vue/reactivity";

export default defineComponent({
  name: "FlutterText",
  props,
  setup(props) {
    const textEl: Ref<HTMLElement | null> = ref(null);

    return {
      textEl,
      props,
    };
  },
});
</script>

App.vue

<template>
  <div>
    <flutter-text value="123123123" />
  </div>
</template>

<script>
import FlutterText from "@/component/Text";
export default {
  components: { FlutterText },
};
</script>

<style lang="less"></style>

Expected results

I think it should be used normally, not crash

Actual results

Run the crash

Add JavaScript Debugger support.

RFC: https://github.com/openwebf/rfc/blob/main/doc/javascript_debugger.md

It's time to implement the JavaScript Debugger on QuickJS.

Optimize QuerySelector API performance

Now we needs to walk up the DOM tree to find elements with ID and class attributes.

But we can use HashMap for these special case to improve the query performance.

Development documents are not reborn together

Where can I see the webf documents?