init

example/lib/code/editor.dart

@@ -0,0 +1,34 @@
+/*
+ * @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/code/highlight.dart

@@ -0,0 +1,106 @@
+/*
+ * @Description: Code highlight controller
+ * @Author: ekibun
+ * @Date: 2020-08-01 17:42:06
+ * @LastEditors: ekibun
+ * @LastEditTime: 2020-08-02 12:39:26
+ */
+import 'dart:math';
+import 'dart:ui';
+import 'package:flutter/foundation.dart';
+import 'package:flutter/material.dart';
+import 'package:flutter_highlight/themes/a11y-light.dart';
+import 'package:highlight/highlight.dart';
+
+Map<String, TextStyle> _theme = a11yLightTheme;
+List<TextSpan> _convert(String code) {
+  var nodes = highlight.parse(code, language: 'javascript').nodes;
+  List<TextSpan> spans = [];
+  var currentSpans = spans;
+  List<List<TextSpan>> stack = [];
+
+  _traverse(Node node) {
+    if (node.value != null) {
+      currentSpans.add(node.className == null
+          ? TextSpan(text: node.value)
+          : TextSpan(text: node.value, style: _theme[node.className]));
+    } else if (node.children != null) {
+      List<TextSpan> tmp = [];
+      currentSpans.add(TextSpan(children: tmp, style: _theme[node.className]));
+      stack.add(currentSpans);
+      currentSpans = tmp;
+
+      node.children.forEach((n) {
+        _traverse(n);
+        if (n == node.children.last) {
+          currentSpans = stack.isEmpty ? spans : stack.removeLast();
+        }
+      });
+    }
+  }
+
+  for (var node in nodes) {
+    _traverse(node);
+  }
+
+  return spans;
+}
+
+class CodeInputController extends TextEditingController {
+  CodeInputController({String text}) : super(text: text);
+
+  TextSpan oldSpan = TextSpan();
+  Future<void> spanCall;
+
+  @override
+  TextSpan buildTextSpan({TextStyle style, bool withComposing}) {
+    String oldText = oldSpan.toPlainText();
+    String newText = value.text;
+    if (oldText == newText) return oldSpan;
+    (spanCall?.timeout(Duration.zero) ?? Future.delayed(Duration.zero))
+        .then((_) => spanCall = compute(_convert, value.text).then((lsSpan) {
+              TextSpan newSpan = TextSpan(style: style, children: lsSpan);
+              if (newSpan.toPlainText() == value.text) oldSpan = newSpan;
+              notifyListeners();
+            }))
+        .catchError((_) => {});
+
+    List<TextSpan> beforeSpans = [];
+    int splitAt = value.selection.start;
+    if (splitAt < 0) splitAt = newText.length ~/ 2;
+    int start = 0;
+    InlineSpan leftSpan;
+    oldSpan.children?.indexWhere((element) {
+      String elementText = element.toPlainText();
+      if (start + elementText.length > splitAt || !newText.startsWith(elementText, start)) {
+        leftSpan = element;
+        return true;
+      }
+      beforeSpans.add(element);
+      start += elementText.length;
+      return false;
+    });
+    List<TextSpan> endSpans = [];
+    int end = 0;
+    InlineSpan rightSpan;
+    oldSpan.children?.sublist(beforeSpans.length)?.lastIndexWhere((element) {
+      String elementText = element.toPlainText();
+      if (splitAt + end + elementText.length >= newText.length ||
+          !newText.substring(start, newText.length - end).endsWith(elementText)) {
+        rightSpan = element;
+        return true;
+      }
+      endSpans.add(element);
+      end += elementText.length;
+      return false;
+    });
+
+    return TextSpan(style: style, children: [
+      ...beforeSpans,
+      TextSpan(
+          style: leftSpan != null && leftSpan == rightSpan ? leftSpan.style : style,
+          text: newText.substring(start, max(start, newText.length - end))),
+      ...endSpans.reversed
+    ]);
+  }
+}

example/lib/main.dart

@@ -0,0 +1,39 @@
+/*
+ * @Description: 
+ * @Author: ekibun
+ * @Date: 2020-08-08 08:16:51
+ * @LastEditors: ekibun
+ * @LastEditTime: 2020-08-08 17:50:30
+ */
+import 'package:flutter/material.dart';
+
+import 'package:flutter_qjs_example/test.dart';
+
+void main() {
+  runApp(MyApp());
+}
+
+class MyApp extends StatelessWidget {
+
+  const MyApp({ Key key }) : super(key: key);
+
+  @override
+  Widget build(BuildContext context) {
+    return MaterialApp(
+      title: 'flutter_qjs',
+      debugShowCheckedModeBanner: false,
+      theme: ThemeData(
+        appBarTheme: AppBarTheme(brightness: Brightness.dark, elevation: 0),
+        primaryColor: Color(0xfff09199),
+        accentColor: Color(0xffec818a),
+        backgroundColor: Colors.grey[300],
+        primaryColorBrightness: Brightness.dark,
+      ),
+      routes: {
+        'home': (BuildContext context) => TestPage(),
+      },
+      initialRoute: 'home',
+    );
+  }
+
+}

example/lib/test.dart

@@ -0,0 +1,102 @@
+/*
+ * @Description: 
+ * @Author: ekibun
+ * @Date: 2020-07-18 23:28:55
+ * @LastEditors: ekibun
+ * @LastEditTime: 2020-08-08 17:38:48
+ */ 
+import 'package:dio/dio.dart';
+import 'package:flutter/material.dart';
+import 'package:flutter_qjs/flutter_qjs.dart';
+
+import 'code/editor.dart';
+
+class TestPage extends StatefulWidget {
+  @override
+  State<StatefulWidget> createState() => _TestPageState();
+}
+
+class _TestPageState extends State<TestPage> {
+
+  String code, resp;
+  int engine;
+
+  @override
+  Widget build(BuildContext context) {
+    return Scaffold(
+      appBar: AppBar(
+        title: Text("JS 引擎功能测试"),
+      ),
+      body: SingleChildScrollView(
+        padding: const EdgeInsets.all(16),
+        child: Column(
+          crossAxisAlignment: CrossAxisAlignment.start,
+          children: [
+            SingleChildScrollView(
+              scrollDirection: Axis.horizontal,
+              child: Row(
+                children: [
+                  FlatButton(child: Text("初始化引擎"), onPressed: () async {
+                    if ((engine?? 0) != 0) return;
+                    engine = await FlutterJs.initEngine();
+                    // dart 函数回调
+                    FlutterJs.methodHandler = (String method, List arg) async {
+                      switch (method) {
+                        case "delay":
+                          await Future.delayed(Duration(milliseconds: arg[0]));
+                          return;
+                        case "http":
+                          Response response = await Dio().get(arg[0]);
+                          return response.data;
+                        default:
+                      }
+                    };
+                  }),
+                  FlatButton(child: Text("运行"), onPressed: () async {
+                    if ((engine?? 0) == 0) {
+                      print("请先初始化引擎");
+                      return;
+                    }
+                    try {
+                      resp = await FlutterJs.evaluate(code ?? '', "<eval>");
+                    } catch(e) {
+                      resp = e.toString();
+                    }
+                    setState(() {
+                      code = code;
+                    });
+                  }),
+                  FlatButton(child: Text("释放引擎"), onPressed: () async {
+                    if ((engine?? 0) == 0) return;
+                    await FlutterJs.close();
+                    engine = 0;
+                  }),
+                ],
+              ),
+            ),
+            Container(
+              padding: const EdgeInsets.all(12),
+              color: Colors.grey.withOpacity(0.1),
+              constraints: BoxConstraints(minHeight: 200),
+              child: CodeEditor(
+                onChanged: (v) {
+                  code = v;
+                },
+              ),
+            ),
+            SizedBox(height: 16),
+            Text("运行结果："),
+            SizedBox(height: 16),
+            Container(
+              width: double.infinity,
+              padding: const EdgeInsets.all(12),
+              color: Colors.green.withOpacity(0.05),
+              constraints: BoxConstraints(minHeight: 100),
+              child: Text(resp ?? ''),
+            ),
+          ],
+        ),
+      ),
+    );
+  }
+}