add js module

.gitignore

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

CHANGELOG.md

@@ -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.

README.md

@@ -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.

cxx/js_dart_promise.hpp

@@ -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);

cxx/js_engine.hpp

@@ -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(

example/js/hello.js

@@ -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}!`;

example/lib/code/editor.dart

@@ -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,
-    );
-  }
-}

example/lib/main.dart

@@ -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(
+                  FlatButton(child: Text("create engine"), onPressed: _createEngine),
-                      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>"))
+                          resp =
-                              .toString();
+                              (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(
+              child: TextField(
-                onChanged: (v) {
+                autofocus: true,
-                  code = v;
+                controller: _controller,
-                },
+                decoration: null,
+                expands: true,
+                maxLines: null
               ),
             ),
             SizedBox(height: 16),

example/pubspec.lock

@@ -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

example/pubspec.yaml

@@ -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
 

lib/flutter_qjs.dart

@@ -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
+      await _FlutterJs.instance._channel.invokeMethod("close", _engine);
-          .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),
+        await _FlutterJs.instance._channel.invokeMethod("evaluate", arguments), _engine);
-        _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> _methodHandlers = Map<dynamic, JsMethodHandler>();
-      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);
+      if (args is List) {
-      var ret = await methodHandlers[engine](
+        if (_methodHandlers[engine] == null) return call.noSuchMethod(null);
-          call.method, _wrapFunctionArguments(args, engine));
+        var ret = await _methodHandlers[engine](call.method, _wrapFunctionArguments(args, engine));
-      if (ret is JsMethodHandlerNotImplement) return call.noSuchMethod(null);
+        if (ret is JsMethodHandlerNotImplement) return call.noSuchMethod(null);
-      return ret;
+        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 = {
+          var arguments = {"engine": engine, "function": functionId, "arguments": args};
-            "engine": engine,
+          return _wrapFunctionArguments(await _channel.invokeMethod("call", arguments), engine);
-            "function": functionId,
-            "arguments": args
-          };
-          return _wrapFunctionArguments(
-              await _channel.invokeMethod("call", arguments), engine);
         };
       } else
         for (var key in val.keys) {

pubspec.yaml

@@ -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: