{"id":28088939,"url":"https://github.com/moluopro/jsf","last_synced_at":"2025-06-21T22:03:18.502Z","repository":{"id":288280162,"uuid":"967507945","full_name":"moluopro/jsf","owner":"moluopro","description":"A high performance JavaScript engine, available out of the box in Flutter.","archived":false,"fork":false,"pushed_at":"2025-05-12T13:24:50.000Z","size":2888,"stargazers_count":13,"open_issues_count":1,"forks_count":0,"subscribers_count":3,"default_branch":"main","last_synced_at":"2025-05-13T13:13:23.303Z","etag":null,"topics":["flutter","javascript","js","quickjs"],"latest_commit_sha":null,"homepage":"https://pub.dev/packages/jsf","language":"C","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/moluopro.png","metadata":{"files":{"readme":"README.ZH.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null}},"created_at":"2025-04-16T15:01:55.000Z","updated_at":"2025-05-12T20:07:20.000Z","dependencies_parsed_at":"2025-04-16T20:59:09.720Z","dependency_job_id":"2be95418-cc5f-485f-9cd4-9082fa1a5220","html_url":"https://github.com/moluopro/jsf","commit_stats":null,"previous_names":["moluopro/jsf"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/moluopro/jsf","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/moluopro%2Fjsf","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/moluopro%2Fjsf/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/moluopro%2Fjsf/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/moluopro%2Fjsf/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/moluopro","download_url":"https://codeload.github.com/moluopro/jsf/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/moluopro%2Fjsf/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":261200371,"owners_count":23123945,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["flutter","javascript","js","quickjs"],"created_at":"2025-05-13T12:52:39.906Z","updated_at":"2025-06-21T22:03:13.487Z","avatar_url":"https://github.com/moluopro.png","language":"C","readme":"## JavaScript in Flutter\n\n[English](README.md) \u0026nbsp;\u0026nbsp;\u0026nbsp; [中文](README.ZH.md)  \n\n一个高性能、在Flutter中开箱即用的JavaScript引擎  \n\n\n## 特性\n\n1. 简单，开箱即用  \n2. 最新的QuickJS支持  \n3. 默认使用高性能编译策略  \n4. 默认开启`big number`等特性  \n5. 全平台支持，包括Web端  \n\n\n## 快速开始\n\n1. 在您的`pubspec.yaml`文件中添加`jsf`作为一个[依赖](https://pub.dev/packages/jsf/install)  \n2. 直接像这样使用即可:  \n\n```dart\nclass Example extends StatefulWidget {\n  const Example({super.key});\n\n  @override\n  State\u003cExample\u003e createState() =\u003e _ExampleState();\n}\n\nclass _ExampleState extends State\u003cExample\u003e {\n  String _result = '';\n  final _js = JsRuntime();\n\n  void _runJS() {\n    int result = _js.eval('44 + 55');\n    setState(() {\n      _result = result.toString();\n    });\n  }\n\n  @override\n  Widget build(BuildContext context) {\n    return Scaffold(\n      appBar: AppBar(title: const Text('JavaScript in Flutter')),\n      body: Center(\n        child: Column(\n          mainAxisAlignment: MainAxisAlignment.center,\n          children: [\n            ElevatedButton(\n              onPressed: _runJS,\n              style: ElevatedButton.styleFrom(\n                padding: const EdgeInsets.symmetric(\n                  horizontal: 40,\n                  vertical: 20,\n                ),\n                textStyle: const TextStyle(fontSize: 20),\n              ),\n              child: const Text('Run: 44 + 55'),\n            ),\n            const SizedBox(height: 20),\n            Text('Get  $_result', style: const TextStyle(fontSize: 20)),\n          ],\n        ),\n      ),\n    );\n  }\n\n  @override\n  void dispose() {\n    _js.dispose();\n    super.dispose();\n  }\n}\n```\n\n执行`flutter run`，然后您将看到：  \n\n![jsf_pic](https://moluopro.atomgit.net/web/jsf/pic.png)  \n\n\n## 进阶内容\n\n### 类型绑定\n\nJSF为JavaScript中的常见数据类型提供了绑定：\n\n```dart\n  final _js = JsRuntime();\n\n  var jsCode = [\n    '44 + 55',\n    '1.4 - 12',\n    'true',\n    'aaa',\n    'new Date().toString()',\n    '(123456789123456789123456789n * 2n)'\n  ];\n\n  for (int i = 0; i \u003c jsCode.length; i++) {\n    var result = _js.eval(jsCode[i]);\n    print(\"$result: ${result.runtimeType}\");\n  }\n\n  // 输出：\n  // 99: int\n  // -10.6: double\n  // true: bool\n  // null: Null\n  // Tue May 06 2025 19:22:34 GMT+0800: String\n  // 246913578246913578246913578: BigInt\n```\n\n在上面的示例中，`result`的类型取决于被执行的JavaScrip代码片段。\n\n### Big Number\n\n1. 在Native平台，`bigint`的类型是`_BigIntImpl`。\n2. 在Web平台，`bigint`的类型是`JavaScriptBigInt`。\n3. 这两种类型实现了相同的接口，因此在使用上几乎没有差别，无须在意。\n\n### 调用JS库\n\n这里我用[Ajv.js](https://ajv.js.org)作为例子(与`flutter_js`里一样的案例)：\n\n```dart\n  String ajvJS = await rootBundle.loadString(\"assets/ajv.js\");\n  String test = await rootBundle.loadString(\"assets/test.js\");\n\n  var ajvIsLoaded = _js.eval(\"!(typeof ajv == 'undefined')\");\n\n  // 判断Ajv.js是否已经导入\n  if (!ajvIsLoaded) {\n    _js.eval(\"var window = global = globalThis; $ajvJS\");\n  }\n\n  var result = _js.eval(test);\n  print(result);\n\n  // 来自Ajv.js的输出结果：\n  // data.id should be \u003e= 0, data.email should match format \"email\", \n  // data should have required property 'worker'\n```\n\n可以看到，这里成功调用了`Ajv.js`里的函数。\n\n### 集成测试\n\n集成测试位于`example/integration_test`文件夹，`cd example`后运行测试：\n\n`flutter drive --driver=integration_test/driver.dart --target=integration_test/js_runtime_test.dart -d linux`\n\n测试其他平台时，可以将`linux`换成相应的平台名称。\n\n\n## 相关项目\n\n* [dynamic_widget](https://github.com/dengyin2000/dynamic_widget) 使用`JSF`作为脚本引擎进行热更新  \n* [json_dynamic_widget](https://pub.dev/packages/json_dynamic_widget) 使用`JSF`作为脚本引擎进行热更新([官方插件](https://pub.dev/packages/json_dynamic_widget_plugin_js))  \n\n\n## 常见问题\n\n1. 为什么要创建这个包？  \n我之前在使用`flutter_js`包，发现很多情况下无法顺利构建，并且它的`quickjs`版本非常旧。我看到有人反馈作者进行优化，但没有相关进展。此外，我在`pub.dev`上没有找到其他合适的替代品，遂决定自己写一个。  \n\n2. 能够运行在哪些平台？  \n我已经在Flutter支持的所有平台进行简单测试，目前暂未发现问题。  \n\n3. 构建失败一般是因为什么？  \n请检查您是否按照[官方文档](https://docs.flutter.dev/get-started/install)配置了Flutter开发环境。比如，Linux下应该[安装相关的包](https://docs.flutter.dev/get-started/install/linux/desktop#development-tools)，MacOS下要[安装xcode和cocoapad](https://docs.flutter.dev/get-started/install/macos/mobile-ios#development-tools)。  \n\n4. 未来有什么更新规划？  \n目前的功能已经足够我个人使用，所以不会增添新的东西。因此，如果您有其他的需求，欢迎提[issue](https://github.com/moluopro/jsf/issues)来告知我。  \n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmoluopro%2Fjsf","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fmoluopro%2Fjsf","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmoluopro%2Fjsf/lists"}