nyne/flutter_qjs
1
0
Fork 0
mirror of https://github.com/wgh136/flutter_qjs.git synced 2025-09-27 13:27:24 +00:00
Code Issues Packages Projects Releases Wiki Activity

add js module

Browse Source
This commit is contained in:
ekibun
2020-08-27 21:07:03 +08:00
parent ba35352b2a
commit 178b74b770
13 changed files with 119 additions and 77 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
.gitignore vendored
View File

@@ -7,3 +7,5 @@
build/
.idea/
.vscode/settings.json
publish.cmd

6
CHANGELOG.md
View File

@@ -3,8 +3,12 @@
* @Author: ekibun
* @Date: 2020-08-08 08:16:50
* @LastEditors: ekibun
* @LastEditTime: 2020-08-26 23:37:16
* @LastEditTime: 2020-08-27 20:42:32
-->
## 0.0.5
* add js module.
## 0.0.4
* remove C++ std limitation for linux and android.

28
README.md
View File

@@ -3,7 +3,7 @@
* @Author: ekibun
* @Date: 2020-08-08 08:16:50
* @LastEditors: ekibun
* @LastEditTime: 2020-08-26 23:02:05
* @LastEditTime: 2020-08-27 20:55:04
-->
# flutter_qjs
@@ -13,9 +13,11 @@ A quickjs engine for flutter.
This plugin is a simple js engine for flutter using the `quickjs` project. Plugin currently supports Windows, Linux, and Android.
Each `FlutterJs` object creates a new thread that runs a simple js loop. A global async function `dart` is presented to invoke dart function, and `Promise` is supported so that you can use `await` or `then` to get external result from `dart`.
Each `FlutterJs` object creates a new thread that runs a simple js loop.
Data convertion between dart and js are implemented as follow:
ES6 module with `import` function is supported and can manage in dart with `setModuleHandler`.
A global async function `dart` is presented to invoke dart function, and `Promise` is supported so that you can use `await` or `then` to get external result from `dart`. Data convertion between dart and js are implemented as follow:
| dart | js |
| --- | --- |
@@ -48,7 +50,7 @@ engine = null;
2. Call `setMethodHandler` to implements `dart` interaction. For example, you can use `Dio` to implements http in js:
```dart
engine.setMethodHandler((String method, List arg) async {
await engine.setMethodHandler((String method, List arg) async {
switch (method) {
case "http":
Response response = await Dio().get(arg[0]);
@@ -65,7 +67,21 @@ and in javascript, call `dart` function to get data:
dart("http", "http://example.com/");
```
3. Use `evaluate` to run js script, and try-catch is needed to capture exception.
3. Call `setModuleHandler` to resolve js module. For example, you can use assets files as module:
```dart
await engine.setModuleHandler((String module) async {
return await rootBundle.loadString("js/" + module.replaceFirst(new RegExp(r".js$"), "") + ".js");
});
```
and in javascript, call `import` function to get module:
```javascript
import("hello").then(({default: greet}) => greet("world"));
```
4. Use `evaluate` to run js script, and try-catch is needed to capture js exception.
```dart
try {
@@ -75,4 +91,4 @@ try {
}
```
[This example](example/lib/test.dart) contains a complete demonstration on how to use this plugin.
[This example](example/lib/main.dart) contains a complete demonstration on how to use this plugin.

30
cxx/js_dart_promise.hpp
View File

@@ -3,7 +3,7 @@
* @Author: ekibun
* @Date: 2020-08-07 13:55:52
* @LastEditors: ekibun
* @LastEditTime: 2020-08-25 16:07:29
* @LastEditTime: 2020-08-27 20:31:25
*/
#pragma once
#include "quickjs/quickjspp.hpp"
@@ -59,6 +59,34 @@ namespace qjs
DartChannel channel;
} JSThreadState;
JSModuleDef *js_module_loader(
JSContext *ctx,
const char *module_name, void *opaque)
{
JSRuntime *rt = JS_GetRuntime(ctx);
JSThreadState *ts = (JSThreadState *)JS_GetRuntimeOpaque(rt);
auto promise = ts->channel("__dart_load_module__", Value{ctx, JS_NewString(ctx, module_name)});
JSOSFutureArgv argv = promise->get_future().get()(ctx);
if (argv.count > 0)
{
const char *str = JS_ToCString(ctx, argv.argv[0]);
JSValue func_val = JS_Eval(ctx, str, strlen(str), module_name, JS_EVAL_TYPE_MODULE | JS_EVAL_FLAG_COMPILE_ONLY);
JS_FreeCString(ctx, str);
JS_FreeValue(ctx, argv.argv[0]);
if (JS_IsException(func_val))
return NULL;
/* the module is already referenced, so we must free it */
JSModuleDef *m = (JSModuleDef *)JS_VALUE_GET_PTR(func_val);
JS_FreeValue(ctx, func_val);
return m;
}
else
{
JS_Throw(ctx, argv.argv[0]);
return NULL;
}
}
JSValue js_add_ref(Value val)
{
JSRuntime *rt = JS_GetRuntime(val.ctx);

3
cxx/js_engine.hpp
View File

@@ -3,7 +3,7 @@
* @Author: ekibun
* @Date: 2020-08-08 10:30:59
* @LastEditors: ekibun
* @LastEditTime: 2020-08-26 23:35:20
* @LastEditTime: 2020-08-27 18:55:57
*/
#pragma once
@@ -76,6 +76,7 @@ namespace qjs
__DartImpl.__invoke(res, rej, method, args));
)xxx",
"<dart>", JS_EVAL_TYPE_MODULE);
JS_SetModuleLoaderFunc(rt.rt, nullptr, js_module_loader, nullptr);
std::vector<EngineTaskResolver> unresolvedTask;
Value promiseWrapper = ctx.eval(
R"xxx(

8
example/js/hello.js Normal file
View File

@@ -0,0 +1,8 @@
/*
* @Description: module example
* @Author: ekibun
* @Date: 2020-08-27 19:06:30
* @LastEditors: ekibun
* @LastEditTime: 2020-08-27 20:39:11
*/
export default (name) => `hello ${name}!`;

34
example/lib/code/editor.dart
View File

@@ -1,34 +0,0 @@
/*
* @Description:
* @Author: ekibun
* @Date: 2020-08-01 13:20:06
* @LastEditors: ekibun
* @LastEditTime: 2020-08-08 17:52:22
*/
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'highlight.dart';
class CodeEditor extends StatefulWidget {
final void Function(String) onChanged;
const CodeEditor({Key key, this.onChanged}) : super(key: key);
@override
_CodeEditorState createState() => _CodeEditorState();
}
class _CodeEditorState extends State<CodeEditor> {
CodeInputController _controller = CodeInputController();
@override
Widget build(BuildContext context) {
return TextField(
autofocus: true,
controller: _controller,
textCapitalization: TextCapitalization.none,
decoration: null,
maxLines: null,
onChanged: this.widget.onChanged,
);
}
}

0
example/lib/code/highlight.dart → example/lib/highlight.dart
View File

30
example/lib/main.dart
View File

@@ -3,15 +3,16 @@
* @Author: ekibun
* @Date: 2020-08-08 08:16:51
* @LastEditors: ekibun
* @LastEditTime: 2020-08-24 22:26:03
* @LastEditTime: 2020-08-27 20:39:32
*/
import 'package:flutter/material.dart';
import 'dart:typed_data';
import 'package:dio/dio.dart';
import 'package:flutter/services.dart';
import 'package:flutter_qjs/flutter_qjs.dart';
import 'code/editor.dart';
import 'highlight.dart';
void main() {
runApp(MyApp());
@@ -44,9 +45,11 @@ class TestPage extends StatefulWidget {
}
class _TestPageState extends State<TestPage> {
String code, resp;
String resp;
FlutterJs engine;
CodeInputController _controller = CodeInputController();
_createEngine() async {
if (engine != null) return;
engine = FlutterJs();
@@ -72,6 +75,10 @@ class _TestPageState extends State<TestPage> {
return JsMethodHandlerNotImplement();
}
});
await engine.setModuleHandler((String module) async {
if(module == "test") return "export default '${new DateTime.now()}'";
return await rootBundle.loadString("js/" + module.replaceFirst(new RegExp(r".js$"), "") + ".js");
});
}
@override
@@ -89,8 +96,7 @@ class _TestPageState extends State<TestPage> {
scrollDirection: Axis.horizontal,
child: Row(
children: [
FlatButton(
child: Text("create engine"), onPressed: _createEngine),
FlatButton(child: Text("create engine"), onPressed: _createEngine),
FlatButton(
child: Text("evaluate"),
onPressed: () async {
@@ -99,8 +105,8 @@ class _TestPageState extends State<TestPage> {
return;
}
try {
resp = (await engine.evaluate(code ?? '', "<eval>"))
.toString();
resp =
(await engine.evaluate(_controller.text ?? '', "<eval>")).toString();
} catch (e) {
resp = e.toString();
}
@@ -120,10 +126,12 @@ class _TestPageState extends State<TestPage> {
padding: const EdgeInsets.all(12),
color: Colors.grey.withOpacity(0.1),
constraints: BoxConstraints(minHeight: 200),
child: CodeEditor(
onChanged: (v) {
code = v;
},
child: TextField(
autofocus: true,
controller: _controller,
decoration: null,
expands: true,
maxLines: null
),
),
SizedBox(height: 16),

2
example/pubspec.lock
View File

@@ -75,7 +75,7 @@ packages:
path: ".."
relative: true
source: path
version: "0.0.4"
version: "0.0.5"
flutter_test:
dependency: "direct dev"
description: flutter

3
example/pubspec.yaml
View File

@@ -40,7 +40,8 @@ flutter:
uses-material-design: true
# To add assets to your application, add an assets section, like this:
# assets:
assets:
- js/
# - images/a_dot_burr.jpeg
# - images/a_dot_ham.jpeg

48
lib/flutter_qjs.dart
View File

@@ -3,7 +3,7 @@
* @Author: ekibun
* @Date: 2020-08-08 08:29:09
* @LastEditors: ekibun
* @LastEditTime: 2020-08-26 23:11:10
* @LastEditTime: 2020-08-27 18:23:47
*/
import 'dart:async';
import 'dart:io';
@@ -12,6 +12,9 @@ import 'package:flutter/services.dart';
/// Handle function to manage js call with `dart(method, ...args)` function.
typedef JsMethodHandler = Future<dynamic> Function(String method, List args);
/// Handle function to manage js module.
typedef JsModuleHandler = Future<String> Function(String name);
/// return this in [JsMethodHandler] to mark method not implemented.
class JsMethodHandlerNotImplement {}
@@ -30,14 +33,19 @@ class FlutterJs {
/// Set a handler to manage js call with `dart(method, ...args)` function.
setMethodHandler(JsMethodHandler handler) async {
await _ensureEngine();
_FlutterJs.instance.methodHandlers[_engine] = handler;
_FlutterJs.instance._methodHandlers[_engine] = handler;
}
/// Set a handler to manage js module.
setModuleHandler(JsModuleHandler handler) async {
await _ensureEngine();
_FlutterJs.instance._moduleHandlers[_engine] = handler;
}
/// Terminate thread and release memory.
destroy() async {
if (_engine != null) {
await _FlutterJs.instance._channel
.invokeMethod("close", _engine);
await _FlutterJs.instance._channel.invokeMethod("close", _engine);
_engine = null;
}
}
@@ -47,8 +55,7 @@ class FlutterJs {
await _ensureEngine();
var arguments = {"engine": _engine, "script": command, "name": name};
return _FlutterJs.instance._wrapFunctionArguments(
await _FlutterJs.instance._channel.invokeMethod("evaluate", arguments),
_engine);
await _FlutterJs.instance._channel.invokeMethod("evaluate", arguments), _engine);
}
}
@@ -57,17 +64,23 @@ class _FlutterJs {
static _FlutterJs get instance => _getInstance();
static _FlutterJs _instance;
MethodChannel _channel = const MethodChannel('soko.ekibun.flutter_qjs');
Map<dynamic, JsMethodHandler> methodHandlers =
Map<dynamic, JsMethodHandler>();
Map<dynamic, JsMethodHandler> _methodHandlers = Map<dynamic, JsMethodHandler>();
Map<dynamic, JsModuleHandler> _moduleHandlers = Map<dynamic, JsModuleHandler>();
_FlutterJs._internal() {
_channel.setMethodCallHandler((call) async {
var engine = call.arguments["engine"];
var args = call.arguments["args"];
if (methodHandlers[engine] == null) return call.noSuchMethod(null);
var ret = await methodHandlers[engine](
call.method, _wrapFunctionArguments(args, engine));
if (ret is JsMethodHandlerNotImplement) return call.noSuchMethod(null);
return ret;
if (args is List) {
if (_methodHandlers[engine] == null) return call.noSuchMethod(null);
var ret = await _methodHandlers[engine](call.method, _wrapFunctionArguments(args, engine));
if (ret is JsMethodHandlerNotImplement) return call.noSuchMethod(null);
return ret;
} else {
if (_moduleHandlers[engine] == null) return call.noSuchMethod(null);
var ret = await _moduleHandlers[engine](args);
if (ret is JsMethodHandlerNotImplement) return call.noSuchMethod(null);
return ret;
}
});
}
dynamic _wrapFunctionArguments(dynamic val, dynamic engine) {
@@ -83,13 +96,8 @@ class _FlutterJs {
if (val["__js_function__"] != null) {
var functionId = val["__js_function__"];
return (List<dynamic> args) async {
var arguments = {
"engine": engine,
"function": functionId,
"arguments": args
};
return _wrapFunctionArguments(
await _channel.invokeMethod("call", arguments), engine);
var arguments = {"engine": engine, "function": functionId, "arguments": args};
return _wrapFunctionArguments(await _channel.invokeMethod("call", arguments), engine);
};
} else
for (var key in val.keys) {

2
pubspec.yaml
View File

@@ -1,6 +1,6 @@
name: flutter_qjs
description: This plugin is a simple js engine for flutter using the `quickjs` project. Plugin currently supports Windows, Linux, and Android.
version: 0.0.4
version: 0.0.5
homepage: https://github.com/ekibun/flutter_qjs
environment: