transparent test & roadmap

izuiyou · Apr 13, 2023 · 69402ff · 69402ff
1 parent 9f2f5d4
commit 69402ff
Show file tree

Hide file tree

Showing 279 changed files with 19,606 additions and 161 deletions.
diff --git a/README.md b/README.md
@@ -33,50 +33,28 @@ OctoFlutter is a hybrid of Flutter Web and Flutter Mobile, which use a new idea
    pnpm dm #under app root dir
    ```
 4.load the AppBundle on mobile device
-  * run project octoflutter-android/octoflutter-ios from example.
+  * run project demo-android/demo-ios from example.
   * run mobile app and config the ip of development machine.
-  * click "Launch Remote AppBundle" button.
+  * click "Launch Remote AppBundle" button in app.
 
 ### Documentation
-* [More About OctoFlutter](./doc/en/octoflutter.md)
 * [OctoFlutter Documentation](./doc/en/documentation.md)
+* [More About OctoFlutter](./doc/en/octoflutter.md)
 * [FAQ && ATTENTION](./doc/en/question.md)
+* [Roadmap](./doc/en/roadmap.md)
 
 ### Practice
 <img src="./doc/example_1.jpg" width = 200 >  <img src="./doc/example_2.jpg" width = 200>
 
 
 ### Open Source
 
-Currently, The open source code mainly is Glue, developers can use the full capabilities of OctoFlutter. For Engine source code, dart2js modification, multiple AppBundle shared engine designs, processing behind Glue, and flutter_web_sdk modification is not open source for the time being.
+Currently, The open source code mainly is Glue.
 
 ### Contact Us
 
 email: [email protected]
 
 ### License
 
-BSD 2-Clause License
-
-Copyright (c) 2023, The OctoFlutter Authors. All rights reserved.
-
-Redistribution and use in source and binary forms, with or without
-modification, are permitted provided that the following conditions are met:
-
-* Redistributions of source code must retain the above copyright notice, this
-  list of conditions and the following disclaimer.
-
-* Redistributions in binary form must reproduce the above copyright notice,
-  this list of conditions and the following disclaimer in the documentation
-  and/or other materials provided with the distribution.
-
-THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS"
-AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE
-IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE
-DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT HOLDER OR CONTRIBUTORS BE LIABLE
-FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL
-DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR
-SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER
-CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY,
-OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE
-OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
+OctoFlutter is based on the [BSD] (./LICENSE) open source license agreement.
diff --git a/artifact/android/octoflutter.jar b/artifact/android/octoflutter.jar
diff --git a/benchmark/custompaint-benchmark/src/index.ts b/benchmark/custompaint-benchmark/src/index.ts
@@ -1,4 +1,3 @@
-import {Color} from '@octoflutter/dartsdk'
 import {
   Alignment,
   AppBar,
@@ -23,7 +22,6 @@ import {
   State,
   StatefulWidget,
   StatelessWidget,
-  SystemUiOverlayStyle,
   Text,
   TextStyle,
   ThemeData,
@@ -46,9 +44,6 @@ class _MyHomePageState extends State<MyHomePage> {
       backgroundColor: Colors.white,
       appBar: new AppBar({
         title: new Text(this.widget.title),
-        systemOverlayStyle: new SystemUiOverlayStyle({
-          statusBarColor: Color.fromARGB(255, 103, 78, 167),
-        }),
       }),
       body: new Center({
         child: new Column({

diff --git a/benchmark/list-benchmark/src/index.ts b/benchmark/list-benchmark/src/index.ts
@@ -1,34 +1,32 @@
-import {Color} from '@octoflutter/dartsdk'
 import {
+  Alignment,
   AppBar,
   BuildContext,
   Center,
   Colors,
   Column,
+  Container,
   CrossAxisAlignment,
+  EdgeInsets,
+  FloatingActionButton,
+  Icon,
+  Icons,
+  Image,
   Key,
   MainAxisAlignment,
   MaterialApp,
+  Navigator,
+  RawMaterialButton,
   runApp,
   Scaffold,
   State,
   StatefulWidget,
   StatelessWidget,
-  SystemUiOverlayStyle,
   Text,
+  TextStyle,
   ThemeData,
   Widget,
-  Image,
-  TextStyle,
-  FloatingActionButton,
-  Icon,
-  Icons,
   WidgetBuilder,
-  Alignment,
-  Container,
-  EdgeInsets,
-  RawMaterialButton,
-  Navigator,
 } from '@octoflutter/flutter'
 import {PageListView} from './page_list_view'
 import {PageOctoListView} from './page_octo_list'
@@ -47,9 +45,6 @@ class _MyHomePageState extends State<MyHomePage> {
       backgroundColor: Colors.white,
       appBar: new AppBar({
         title: new Text(this.widget.title),
-        systemOverlayStyle: new SystemUiOverlayStyle({
-          statusBarColor: Color.fromARGB(255, 103, 78, 167),
-        }),
       }),
       body: new Center({
         child: new Column({

diff --git a/bin/cli-test/src/index.ts b/bin/cli-test/src/index.ts
@@ -1,11 +1,14 @@
-import {Color} from '@octoflutter/dartsdk'
 import {
   AppBar,
   BuildContext,
   Center,
   Colors,
   Column,
   CrossAxisAlignment,
+  FloatingActionButton,
+  Icon,
+  Icons,
+  Image,
   Key,
   MainAxisAlignment,
   MaterialApp,
@@ -14,15 +17,10 @@ import {
   State,
   StatefulWidget,
   StatelessWidget,
-  SystemUiOverlayStyle,
   Text,
+  TextStyle,
   ThemeData,
   Widget,
-  Image,
-  TextStyle,
-  FloatingActionButton,
-  Icon,
-  Icons,
 } from '@octoflutter/flutter'
 
 class _MyHomePageState extends State<MyHomePage> {
@@ -39,9 +37,6 @@ class _MyHomePageState extends State<MyHomePage> {
       backgroundColor: Colors.white,
       appBar: new AppBar({
         title: new Text(this.widget.title),
-        systemOverlayStyle: new SystemUiOverlayStyle({
-          statusBarColor: Color.fromARGB(255, 103, 78, 167),
-        }),
       }),
       body: new Center({
         child: new Column({

diff --git a/bin/cli/template/src/index.ts b/bin/cli/template/src/index.ts
@@ -1,11 +1,14 @@
-import {Color} from '@octoflutter/dartsdk'
 import {
   AppBar,
   BuildContext,
   Center,
   Colors,
   Column,
   CrossAxisAlignment,
+  FloatingActionButton,
+  Icon,
+  Icons,
+  Image,
   Key,
   MainAxisAlignment,
   MaterialApp,
@@ -14,15 +17,10 @@ import {
   State,
   StatefulWidget,
   StatelessWidget,
-  SystemUiOverlayStyle,
   Text,
+  TextStyle,
   ThemeData,
   Widget,
-  Image,
-  TextStyle,
-  FloatingActionButton,
-  Icon,
-  Icons,
 } from '@octoflutter/flutter'
 
 class _MyHomePageState extends State<MyHomePage> {
@@ -39,9 +37,6 @@ class _MyHomePageState extends State<MyHomePage> {
       backgroundColor: Colors.white,
       appBar: new AppBar({
         title: new Text(this.widget.title),
-        systemOverlayStyle: new SystemUiOverlayStyle({
-          statusBarColor: Color.fromARGB(255, 103, 78, 167),
-        }),
       }),
       body: new Center({
         child: new Column({

diff --git a/doc/en/documentation.md b/doc/en/documentation.md
@@ -7,7 +7,7 @@
     ```shell
     git clone #octoflutter project
     pnpm install
-    cd example/octoflutter-appbundle
+    cd example/demo-appbundle
     pnpm dw
     ```
 

diff --git a/doc/en/question.md b/doc/en/question.md
@@ -25,5 +25,7 @@ OctoFlutter has dynamic capability, but it is not recommended to use it. If it n
 #### A2:Widget capability is not completely equivalent to Flutter
 At present, OctoFlutter is still in the stage of gradual improvement. It has covered most of the widgets of Flutter, but it is not completely equivalent to Flutter. Before use, weigh whether the existing widgets can meet your needs.
 
-#### A3:OctoRepaintBoundary
-OctoRepaintBoundary is a more radical optimization method than RepaintBoundary, but it will also lead to the growth of GPU memory, which needs to be used sparingly.
+#### A3:Ensure that the octoflutter series npm packages used are all the same version
+Please explicitly depend on a certain version of the octoflutter series npm package in your project, such as x.y.z, and do not use ~x.y.z or ^x.y.z.
+
+If your project depend on the x.y.z version of @octoflutter/flutter, then your @octoflutter/cli, @octoflutter/dartsdk, and all other packages of the octoflutter series should have a same version number x.y.z.
diff --git a/doc/en/roadmap.md b/doc/en/roadmap.md
@@ -0,0 +1,24 @@
+## Roadmap
+
+In the interest of transparency, we want to share details of our roadmap, so that others can see our priorities and make plans based off the work we are doing.
+
+Here are some things that OctoFlutter plans to do in the future. If you have feedback on what we should do, you can submit an issue or contact us via email.
+
+### 1、More Powerful
+  * Provide more widgets in Glue, and improve the test cases for Glue.
+  * Support some third-party libraries based on CanvasRenderingContext2D to run in OctoFlutter.
+  * Open JSBinding capability for developers. MethodChannel is Asynchronous communication, and synchronous communication can be implemented more directly through JSBinding. Enable developers to integrate their own capabilities into OctoFlutter.
+
+### 2、Upgrade Flutter
+After Flutter 4.0 Released, OctoFlutter will upgrade the Flutter its dependent.
+
+### 3、Better Development Experience
+  * Providing a more friendly development environment，the current way of working tends to preview and debug UI in web browsers, but sometime, there may be slight differences between Mobile and Web presentation. In the future, connecting Mobile and Webpack will enable real-time debugging from Mobile.
+  * WidgetInspector is very important for developing and debugging complex Widget tree. Due to lead into bloated code implementation in Glue and the support behind Glue, its current priority is relatively low.
+  * The documentation support for Octo Widgets, Octo extensions will also be an important part of OctoFlutter in the future, which requires the Api documents similar to Flutter.
+
+### 4、Performance Optimization Related
+  * As more widgets are supported, the size of framework. js also expands. we need to regulate the size of framework.js.
+  * Provide Engine performance statistics, support the analysis of UI and Raster thread time consumption similar to Flutter.
+  * Provide more sliding components similar to OctoListView, providing developers with more choices and selecting suitable sliding components in specific scenarios.
+  * Impeller migration. Currently, OctoFlutter is based on the Skia graphics engine for rendering, and will be migrated when Impeller is perfect.
diff --git a/doc/zh/README.md b/doc/zh/README.md
@@ -34,19 +34,20 @@ OctoFlutter是Flutter Web与Flutter Mobile的一种混合体，通过全新的
 4.在移动设备上运行业务
   * 运行example目录下的octoflutter-android/octoflutter-ios工程
   * 安装app，运行，配置开发机的IP地址（用于请求第三步构建的业务产物）
-  * 点击按钮 "Launch Remote AppBundle"
+  * 打开app，点击按钮 "Launch Remote AppBundle"
 
 ### 文档
-* [进一步了解OctoFlutter](./octoflutter.md)
 * [OctoFlutter开发者文档](./documentation.md)
+* [进一步了解OctoFlutter](./octoflutter.md)
 * [常见问题及注意事项](./question.md)
+* [路线规划](./roadmap.md)
 
 ### 实践
 <img src="../example_1.jpg" width = 200 >  <img src="../example_2.jpg" width = 200>
 
 
 ### 开源范围
-目前OctoFlutter胶水层完全开源的状态，开发者可以使用OctoFlutter的完整能力。对于Engine层源码、dart2js修改、多AppBundle共享Engine设计、胶水层背后的处理、flutter_web_sdk修改、framework剥离等暂不开源。
+目前OctoFlutter胶水层完全开源的状态，开发者可以使用OctoFlutter的完整能力。
 
 ### 联系我们
 

diff --git a/doc/zh/documentation.md b/doc/zh/documentation.md
@@ -5,7 +5,7 @@
   ```shell
    git clone #本项目源码
    pnpm install
-   cd example/octoflutter-appbundle
+   cd example/demo-appbundle
    pnpm dw
    ```
 

diff --git a/doc/zh/question.md b/doc/zh/question.md
@@ -28,5 +28,6 @@ OctoFlutter具备动态化的能力，但不推荐使用，如需使用，开发
 #### A2:Widget能力不完全等价于Flutter
 目前OctoFlutter还处于逐渐完善的阶段，已经涵盖了Flutter绝大部分Widget，但并不是全面等价于Flutter，使用前权衡现有的Widget是否能满足你的需求。
 
-#### A3:OctoRepaintBoundary的使用
-OctoRepaintBoundary是比RepaintBoundary更加激进的优化手段，但同时也会带来GPU内存的增长，需要有节制的使用。
+#### A3:确保使用的octoflutter系列npm package都是同一版本
+在你的项目中请明确的依赖octoflutter系列npm package的某一个版本，例如：x.y.z，不要使用～x.y.z或^x.y.z 。
+如果你的项目依赖了@octoflutter/flutter的x.y.z版本，那么你的@octoflutter/cli、@octoflutter/dartsdk以及其它所有octoflutter系列的package，版本号都应该为x.y.z。
diff --git a/doc/zh/roadmap.md b/doc/zh/roadmap.md
@@ -0,0 +1,24 @@
+## Roadmap
+
+为了提高透明度，我们希望分享我们路线图的细节，以便其他人能够看到我们的优先事项，并根据我们正在做的工作制定计划。<br>
+
+这里列出未来OctoFlutter计划要做的一些事情，如果您对我们应该做什么有反馈意见，可以通过提交issue，或邮件联系我们。
+
+### 1、能力拓展相关
+  * 进一步补充胶水层Api，提供更多能力的Widget，并完善胶水层的测试用例。
+  * 实现对CanvasRenderingContext2D支持，为了OctoFlutter进一步向前端生态发展，支持一些基于CanvasRenderingContext2D的三方库能在OctoFlutter中运行。
+  * 开放JSBinding注册能力给开发者。MethodChannel本身是异步通信，通过JSBinging可以更加直接的实现同步通信。让开发者可以将自有的能力整合到OctoFlutter中使用。
+
+### 2、升级依赖的Flutter版本
+Flutter升级到4.0以后，OctoFlutter会做一次升级。持续引入Flutter新增的能力，以及同步Flutter Fix的Bug。
+
+### 3、开发体验相关
+  * 提供更加友好的开发环境，目前的工作方式倾向于UI开发在Web浏览器中预览调试，但实际上可能Mobile与Web展现存在细微差异，未来打通Mobile和Webpack，实现从Mobile实时调试。
+  * WidgetInspector对于开发调试复杂界面来说非常重要，由于需要在胶水层引入臃肿的代码实现以及胶水层背后的支持，所以目前的优先级较低。
+  * 拓展Widget的文档支持，未来Octo拓展也会是OctoFlutter很重要的组成部分，这部分需要建立类似于Flutter的Api文档。
+
+### 4、性能优化相关
+ * 随着支持的Widget越多，framework.js的大小也越发膨胀，减小主framework.js的体积。
+ * 开放Engine性能统计数据，支持类Flutter的UI、Raster线程耗时分析。
+ * 提供更多类似OctoListView的滑动组件，给开发者提供更多选择，在特定场景选择合适的滑动组件。
+ * Impeller迁移，目前OctoFlutter基于Skia图形引擎进行渲染，待Impeller成熟后进行迁移。
diff --git a/example/demo-android/.gitignore b/example/demo-android/.gitignore
@@ -0,0 +1,15 @@
+*.iml
+.gradle
+/local.properties
+/.idea/caches
+/.idea/libraries
+/.idea/modules.xml
+/.idea/workspace.xml
+/.idea/navEditor.xml
+/.idea/assetWizardSettings.xml
+.DS_Store
+/build
+/captures
+.externalNativeBuild
+.cxx
+local.properties
diff --git a/example/demo-android/README-zh.md b/example/demo-android/README-zh.md
@@ -0,0 +1,27 @@
+### Android 集成
+ !> 注意: 以下文档都是假设您已经具备一定的 Android 开发经验。
+这篇教程，讲述了如何将 `OctoFlutter` 集成到 Android 工程。
+
+#### 简易集成
+
+1.创建一个Android工程<br>
+2.本地集成
+   * 复制 `octoflutter.jar` 到你的项目`libs`目录下.<br>
+   !> 你可以在 [这里](./support/libs/octoflutter.jar) 找到它
+   * 配置 build.gradle
+   ```shell
+   api files('libs/octoflutter.jar')
+   ```
+3.实现 `ImageDataProvider` , 你可以参考本工程的 [FrescoImageProvider](./support/src/main/java/com/example/support/FrescoImageProvider.java)<br>
+4.实现 `Ambient` , 你可以参考本工程的 [LocalAndRemoteAmbientImpl](./support/src/main/java/com/example/support/local/LocalAndRemoteAmbientImpl.java)<br>
+4.继承 `AbsBundleSupport` , 你可以参考本工程的 [AppBundleSupportImpl](./support/src/main/java/com/example/support/AppBundleSupportImpl.java)<br>
+5.继承 `AbsOctoFlutterActivity`, 你可以参考本工程的 [AppBundleActivity](./app/src/main/java/example/octoflutter/AppBundleActivity.kt)<br>
+6.如果你想在手机上调试js需要额外实现`DevEnvSupplier` 和 `DevEnvProvider` , 你可以参考本工程的 [AppBundleDevSupplier](./support/src/main/java/com/example/support/AppBundleDevSupplier.java)<br>
+
+#### 高阶集成
+
+一般来说，在`octoflutter.jar`中`cn.xiaochuankeji.support`目录下所有的源码都可以自己去实现，这种方式可以让你更灵活的去管理Engine和Activity等，但需要实现的逻辑也更多，你需要实现`OctoFlutterSupport`以及它背后关联的`HttpCallProvider`、`ImageDataProvider`、`OctoResourceSettings`、`OctoJsWatcher`等，`OctoResourceSettings`主要为Engine提供js内容以及资源文件。
+
+#### 注意事项
+ * octoflutter最小支持版本为5.0，即minSdk >= 21。
+ * octoflutter不包含x86架构，请使用真机测试。