docs: add some content

DEVELOPMENT.md

@@ -134,3 +134,68 @@ router.setRoutes([
 使用标准的 Stencil.js 开发即可。
 
 
+## Transflow 转换数据流
+
+Quake 采用了简单的 Transflow DSL 设计：
+
+```groovy
+transflow { 
+    from('todo','blog').to(<quake-calendar>); 
+}
+```
+
+即将 `todo` 和 `blog` 渲染到 `<quake-calendar>` 组件中：
+
+在组件和数据对应的情况下，上述的代码，可以生成如下的两部分代码：
+
+```javascript
+// 数据转换
+function from_todo_blog_to_quake_calendar(todos, blogs) {
+  let results = [];
+  results = results.concat(todos);
+  results = results.concat(blogs);
+  return results;
+}
+
+// 渲染组件
+const tl_show_timeline = async (context, commands) => {
+  const el = document.createElement('quake-calendar');
+
+  let todos = await Quake.query('todo');
+
+  let blogs = await Quake.query('blog');
+
+  let data = from_todo_blog_to_quake_calendar(todos, blogs);
+  el.setAttribute('data', JSON.stringify(data));
+
+  return el;
+}
+```
+
+
+可以通过 `transflows.yaml` 来自定义不同的数据流及转换：
+
+
+```yaml
+- name: "show_timeline"
+  target: "quake-calendar-timeline"
+  defines_map: ~
+  flows:
+    - name: "from_todo_blog_to_quake_calendar_timeline"
+      from: [ "todo", "blog" ]
+      to: "<quake-calendar-timeline>"
+      mappings:
+        - entry: "todo"
+          source: ["id", "title", "content", "created_date", "updated_date"]
+          target: ["id", "title", "content", "created_date", "updated_date"]
+        - entry: "blog"
+          source: ["id", "title", "content", "created_date", "updated_date"]
+          target: ["id", "title", "content", "created_date", "updated_date"]
+      filter: # 尚在开发中
+        - entry: "todo"
+          expression: "created_date > 2020.12.30 AND updated_date < 2022.01.01"
+```
+
+
+还有尚在开发中的数据过滤。
+