feat(transflow): add generate for show func

phodal · Dec 5, 2021 · 898f742 · 898f742
1 parent 596abd0
commit 898f742
Show file tree

Hide file tree

Showing 3 changed files with 91 additions and 5 deletions.
diff --git a/_fixtures/codegen/todos_element.js b/_fixtures/codegen/todos_element.js
@@ -1,4 +1,4 @@
-const show_timeline =  async (context, commands) => {
+const show_timeline = async (context, commands) => {
   const el = document.createElement('quake-calendar-timeline');
   let todo_req = await fetch(`/entry/todo`);
   let todos = await todo_req.json();

diff --git a/quake_core/src/transflow/js_flow_codegen.rs b/quake_core/src/transflow/js_flow_codegen.rs
@@ -3,7 +3,65 @@ use crate::transflow::Transflow;
 
 pub struct JsFlowGen {}
 
+/// generate from typescript interface
+/// ```javascript
+///   el.setAttribute('entries', JSON.stringify({
+//     items: ['blog', 'todo']
+//   }));
+//   el.setAttribute('data', JSON.stringify(data));
+/// ```
+#[derive(Serialize, Deserialize, PartialEq, Debug)]
+pub struct WebComponentElement {
+    pub attributes: Vec<String>,
+}
+
+impl Default for WebComponentElement {
+    fn default() -> Self {
+        WebComponentElement { attributes: vec![] }
+    }
+}
+
 impl JsFlowGen {
+    pub fn gen_element(trans: &Transflow) -> Vec<String> {
+        let mut vec = vec![];
+        for flow in &trans.flows {
+            let mut func = String::new();
+            let start = format!(
+                "const show_{:} = async (context, commands) => {{\n",
+                trans.name
+            );
+            func.push_str(start.as_str());
+
+            func.push_str(
+                format!("  const el = document.createElement('{:}');\n", flow.to).as_str(),
+            );
+
+            func.push_str("\n");
+
+            for item in &flow.from {
+                let fetch = format!("  let {:}_req = await fetch('/entry/{:}');\n", item, item);
+                let json = format!("  let {:}s = await {:}_req.json();\n", item, item);
+
+                func.push_str(fetch.as_str());
+                func.push_str(json.as_str());
+                func.push_str("\n");
+            }
+
+            let params = Self::gen_params(&flow);
+            let data = format!("  let data = {:}({:});\n", &flow.name, params);
+            func.push_str(data.as_str());
+
+            func.push_str("\n");
+
+            func.push_str("  el.setAttribute('data', JSON.stringify(data));\n");
+            func.push_str("  return el;\n");
+
+            func.push_str("}");
+            vec.push(func)
+        }
+        vec
+    }
+
     pub fn gen_transform(trans: &Transflow) -> Vec<String> {
         let mut vec = vec![];
         for flow in &trans.flows {
@@ -133,10 +191,8 @@ mod tests {
     #[test]
     fn from_transflow_string() {
         let define = "transflow { from('todo','blog').to(<quake-calendar>); }";
-        let flow = QuakeTransflowNode::from_text(define).unwrap();
-
-        let flow = Transflow::from(entry_defines(), flow);
-
+        let node = QuakeTransflowNode::from_text(define).unwrap();
+        let flow = Transflow::from(entry_defines(), node);
         let code = JsFlowGen::gen_transform(&flow);
 
         assert_eq!(
@@ -178,4 +234,33 @@ mod tests {
             code[1]
         )
     }
+
+    #[cfg(not(windows))]
+    #[test]
+    fn gen_element() {
+        let define = "transflow { from('todo','blog').to(<quake-calendar>); }";
+        let node = QuakeTransflowNode::from_text(define).unwrap();
+        let mut flow = Transflow::from(entry_defines(), node);
+        flow.name = "timeline".to_string();
+        let code = JsFlowGen::gen_element(&flow);
+        println!("{:}", code[0]);
+
+        assert_eq!(
+            "const show_timeline = async (context, commands) => {
+  const el = document.createElement('quake-calendar');
+
+  let todo_req = await fetch('/entry/todo');
+  let todos = await todo_req.json();
+
+  let blog_req = await fetch('/entry/blog');
+  let blogs = await blog_req.json();
+
+  let data = from_todo_blog_to_quake_calendar(todos, blogs);
+
+  el.setAttribute('data', JSON.stringify(data));
+  return el;
+}",
+            code[0]
+        )
+    }
 }
diff --git a/quake_webapp/quake-editor/src/QuakeEditor.tsx b/quake_webapp/quake-editor/src/QuakeEditor.tsx
@@ -14,6 +14,7 @@ function QuakeEditor(props: Props) {
   const [title, setTitle] = React.useState(props.title);
   const [value, setValue] = React.useState(props.value);
 
+
   const pattern = /[a-zA-Z0-9_\u00A0-\u02AF\u0392-\u03c9\u0410-\u04F9]+|[\u4E00-\u9FFF\u3400-\u4dbf\uf900-\ufaff\u3040-\u309f\uac00-\ud7af]+/g;
   const wordCount = (data: string) => {
     if(!data  || (!!data && data.length < 0)) {