Merge pull request #5 from Respo/app

refactor top-level app definition

moon.mod.json

@@ -1,6 +1,6 @@
 {
   "name": "tiye/respo",
-  "version": "0.0.11",
+  "version": "0.0.13",
   "deps": {
     "tiye/dom-ffi": "0.0.4",
     "tiye/cirru-parser": "0.0.7"

src/lib/app.mbt

@@ -1,28 +1,73 @@
-// pub trait RespoApp {
-//   // TODO better use RespoAction instead of Show
-//   dispatch(Self, (Show) -> UInt) -> Unit!@node.RespoCommonError
-//   pick_storage_key(Self) -> String
-//   get_mount_target(Self) -> @dom_ffi.Node
-//   get_store(Self) -> @json.FromJson
-//   // get_loop_delay() -> UInt?
-//   // view(Self) -> @node.RespoNode[T]!@node.RespoCommonError
-//   // render_loop(Self) -> Unit!@node.RespoCommonError
-//   backup_model_beforeunload(Self) -> Unit!@node.RespoCommonError
-//   try_load_storage(Self) -> Unit!@node.RespoCommonError
-// }
+/// get basic App structure
+pub struct RespoApp[Model] {
+  store : Ref[Model]
+  storage_key : String
+  mount_target : @dom_ffi.Node
+}
 
-// impl RespoApp with try_load_storage(self) {
-//   let window = @dom_ffi.window()
-//   let storage = window.local_storage()
-//   let key = self.pick_storage_key()
-//   match storage.get_item(key) {
-//     Some(s) => {
-//       let store = self.get_store()
-//       store.val = try_from_string!(s)
-//     }
-//     None => @dom_ffi.log("no storage")
-//   }
-// }
+/// backup store to local storage before unload
+
+pub fn backup_model_beforeunload[Model : ToJson](
+  self : RespoApp[Model]
+) -> Unit {
+  let window = @dom_ffi.window()
+  let storage = window.local_storage()
+  let p = self.storage_key
+  let store = self.store.val
+  let beforeunload = fn(_e : @dom_ffi.BeforeUnloadEvent) {
+    let content = store.to_json().stringify()
+    // util::log!("before unload {} {}", p, content);
+    storage.set_item(p, content)
+  }
+  window.set_onbeforeunload(beforeunload)
+}
+
+pub fn try_load_storage[Model : @json.FromJson + Default](
+  key : String
+) -> Model {
+  let window = @dom_ffi.window()
+  let storage = window.local_storage()
+  match storage.get_item(key) {
+    Some(s) =>
+      match @json.parse?(s) {
+        Ok(j) =>
+          match @json.from_json?(j) {
+            Ok(s) => s
+            Err(e) => {
+              @dom_ffi.log("failed to parse storage: \{e}")
+              Model::default()
+            }
+          }
+        Err(e) => {
+          @dom_ffi.log("failed to parse storage: \{e}")
+          Model::default()
+        }
+      }
+    None => {
+      @dom_ffi.log("no storage")
+      Model::default()
+    }
+  }
+}
+
+pub fn RespoApp::render_loop[Model, ActionOp](
+  self : RespoApp[Model],
+  renderer : () -> @node.RespoNode[ActionOp]!@node.RespoCommonError,
+  dispatch_action : (ActionOp) -> Unit!@node.RespoCommonError
+) -> Unit {
+  let mount_target = self.mount_target
+  let ret = render_node?(
+    mount_target,
+    self.store,
+    renderer,
+    dispatch_action,
+    Some(100),
+  )
+  match ret {
+    Ok(_) => ()
+    Err(e) => @dom_ffi.error_log(e.to_string())
+  }
+}
 
 // pub trait RespoStore: ToJson + @json.FromJson {
 //   // TODO better use RespoAction instead of Show

src/lib/dialog/alert.mbt

@@ -27,11 +27,11 @@ fn comp_alert_modal[T](
       effect_focus_data as @node.RespoEffect,
       effect_modal_fade_data as @node.RespoEffect,
     ],
-    @node.div(
-      style=@node.RespoStyle::new(position=Absolute),
+    div(
+      style=respo_style(position=Absolute),
       [
         if show {
-          @node.div(
+          div(
             class_name=@node.str_spaced(
               [@respo.ui_fullscreen, @respo.ui_center, css_backdrop],
             ),
@@ -47,11 +47,11 @@ fn comp_alert_modal[T](
               },
             ),
             [
-              @node.div(
+              div(
                 class_name=@node.str_spaced(
-                  [@respo.column, @respo.ui_global, css_modal_card],
+                  [@respo.ui_column, ui_global, css_modal_card],
                 ),
-                style=@node.RespoStyle::new(line_height=Px(32.0)).merge(
+                style=respo_style(line_height=Px(32.0)).merge(
                   options.card_style,
                 ),
                 event={}..set(
@@ -65,18 +65,18 @@ fn comp_alert_modal[T](
                   },
                 ),
                 [
-                  @node.div(
+                  div(
                     [
-                      @node.span(inner_text=options.text.or("Alert!"), []),
-                      @node.space(height=8),
-                      @node.div(
+                      span(inner_text=options.text.or("Alert!"), []),
+                      space(height=8),
+                      div(
                         class_name=@respo.ui_row_parted,
                         [
-                          @node.span([]),
-                          @node.button(
+                          span([]),
+                          button(
                             inner_text=options.button_text.or("Read"),
-                            class_name=@node.str_spaced(
-                              [@respo.ui_button, css_button, button_name],
+                            class_name=str_spaced(
+                              [ui_button, css_button, button_name],
                             ),
                             event={}..set(
                               Click,
@@ -96,10 +96,7 @@ fn comp_alert_modal[T](
             ],
           )
         } else {
-          @node.span(
-            attrs=@node.respo_attrs()..set("data-name", "placeholder"),
-            [],
-          )
+          span(attrs=respo_attrs()..set("data-name", "placeholder"), [])
         },
       ],
     ),

src/lib/dialog/confirm.mbt

@@ -30,11 +30,11 @@ fn comp_confirm_modal[T](
   let effect_modal_fade_data : EffectModalFade = { show, }
   @node.RespoComponent::named(
     "confirm-modal",
-    @node.div(
-      style=@node.RespoStyle::new(position=Absolute),
+    div(
+      style=respo_style(position=Absolute),
       [
         if show {
-          @node.div(
+          div(
             class_name=@node.str_spaced(
               [@respo.ui_fullscreen, @respo.ui_center, css_backdrop],
             ),
@@ -52,9 +52,9 @@ fn comp_confirm_modal[T](
               },
             ),
             [
-              @node.div(
+              div(
                 class_name=@node.str_spaced(
-                  [@respo.column, @respo.ui_global, css_modal_card],
+                  [@respo.ui_column, @respo.ui_global, css_modal_card],
                 ),
                 style=options.card_style,
                 event={}..set(
@@ -69,20 +69,20 @@ fn comp_confirm_modal[T](
                   },
                 ),
                 [
-                  @node.div(
+                  div(
                     [
-                      @node.span(
+                      span(
                         inner_text=options.text.or("Need confirmation..."),
                         [],
                       ),
-                      @node.space(height=8),
-                      @node.div(
+                      space(height=8),
+                      div(
                         class_name=@respo.ui_row_parted,
                         [
-                          @node.span([]),
-                          @node.button(
+                          span([]),
+                          button(
                             inner_text=options.button_text.or("Confirm"),
-                            class_name=@node.str_spaced(
+                            class_name=str_spaced(
                               [@respo.ui_button, css_button, button_name],
                             ),
                             event={}..set(
@@ -103,7 +103,7 @@ fn comp_confirm_modal[T](
             ],
           )
         } else {
-          @node.span(
+          span(
             // attrs=@node.respo_attrs(data_name="placeholder"),
             [],
           )

src/lib/dialog/dialogs.mbt

@@ -159,9 +159,9 @@ pub fn comp_esc_listener[T](
   @node.RespoComponent::named(
     "esc-listener",
     effects=[effect_modal_close_data as @node.RespoEffect],
-    @node.input(
+    input(
       value="",
-      style=@node.RespoStyle::new(display=None),
+      style=respo_style(display=None),
       event={}..set(
         Keydown,
         fn(e, dispatch) {
@@ -175,11 +175,11 @@ pub fn comp_esc_listener[T](
   ).to_node()
 }
 
-let css_backdrop : String = @node.declare_static_style(
+let css_backdrop : String = declare_static_style(
   [
     (
       "&",
-      @node.RespoStyle::new(
+      respo_style(
         background_color=Hsla(0, 30, 10, 0.6),
         position=Fixed,
         z_index=999,
@@ -188,11 +188,11 @@ let css_backdrop : String = @node.declare_static_style(
   ],
 )
 
-let css_modal_card : String = @node.declare_static_style(
+let css_modal_card : String = declare_static_style(
   [
     (
       "&",
-      @node.RespoStyle::new(
+      respo_style(
         background_color=Hsl(0, 0, 100),
         max_width=Px(600),
         width=Percent(100),
@@ -207,11 +207,11 @@ let css_modal_card : String = @node.declare_static_style(
   ],
 )
 
-let css_drawer_card : String = @node.declare_static_style(
+let css_drawer_card : String = declare_static_style(
   [
     (
       "&",
-      @node.RespoStyle::new(
+      respo_style(
         background_color=Hsl(0, 0, 100),
         max_width=Vw(50),
         width=Px(400),
@@ -229,11 +229,11 @@ let css_drawer_card : String = @node.declare_static_style(
   ],
 )
 
-let css_button : String = @node.declare_static_style(
+let css_button : String = declare_static_style(
   [
     (
       "&",
-      @node.RespoStyle::new(
+      respo_style(
         border_radius=4.0,
         background_color=White,
         border_color=Hsl(0, 0, 0),

src/lib/dialog/drawer.mbt

@@ -16,11 +16,11 @@ type DrawerRenderer[T] ((@node.DispatchFn[T]) -> Unit!@node.RespoCommonError) ->
 ]!@node.RespoCommonError
 
 fn to_string[T](self : DrawerRenderer[T]) -> String {
-  "(DrawerRenderer)"
+  "(DrawerRenderer \{self})"
 }
 
 pub fn DrawerRenderer::default[T]() -> DrawerRenderer[T] {
-  fn(_close) { @node.div([]) }
+  fn(_close) { div([]) }
 }
 
 pub fn DrawerRenderer::new[T](
@@ -53,13 +53,13 @@ fn comp_drawer[T](
       effect_focus_data as @node.RespoEffect,
       effect_drawer_fade_data as @node.RespoEffect,
     ],
-    @node.div(
-      style=@node.RespoStyle::new(position=Absolute),
+    div(
+      style=respo_style(position=Absolute),
       [
         if show {
-          @node.div(
+          div(
             class_name=@node.str_spaced(
-              [@respo.ui_fullscreen, @respo.ui_center, css_backdrop],
+              [ui_fullscreen, ui_center, css_backdrop],
             ),
             style=options.backdrop_style,
             event={}..set(
@@ -74,13 +74,11 @@ fn comp_drawer[T](
               },
             ),
             [
-              @node.div(
+              div(
                 class_name=@node.str_spaced(
-                  [@respo.column, @respo.ui_global, css_drawer_card],
-                ),
-                style=@node.RespoStyle::new(padding=Px(0)).merge(
-                  options.card_style,
+                  [ui_column, ui_global, css_drawer_card],
                 ),
+                style=respo_style(padding=Px(0)).merge(options.card_style),
                 event={}..set(
                   Click,
                   fn(e, _dispatch) {
@@ -92,14 +90,14 @@ fn comp_drawer[T](
                   },
                 ),
                 [
-                  @node.div(
-                    class_name=@respo.column,
+                  div(
+                    class_name=@respo.ui_column,
                     [
-                      @node.div(
-                        class_name=@respo.ui_center,
-                        [@node.span(inner_text=options.title.or("Drawer"), [])],
+                      div(
+                        class_name=ui_center,
+                        [span(inner_text=options.title.or("Drawer"), [])],
                       ),
-                      @node.space(height=8),
+                      space(height=8),
                       {
                         let f = options.render
                         f.run!(fn(dispatch) { close(dispatch) })
@@ -112,10 +110,7 @@ fn comp_drawer[T](
             ],
           )
         } else {
-          @node.span(
-            attrs=@node.respo_attrs()..set("data-name", "placeholder"),
-            [],
-          )
+          span(attrs=respo_attrs()..set("data-name", "placeholder"), [])
         },
       ],
     ),