process render queue and setup data observers

anowell · anowell · commit 567f6a04b5f2 · 2017-01-03T10:26:49.000-07:00
This temporarily regresses data binding,
     since the downcasting doesn't quite work
     for downcasting into a trait object
     when we stored the actual object instead
     Will look into using MOPA (my own personal any)
diff --git a/README.md b/README.md
@@ -14,26 +14,23 @@ Oh, and black hole's form from the collapse of a core of iron.. you know, the on
 
 ---
 
-## How it works
+Everything is experimental, half-baked, full of caveats, and subject to change. But some basic principles are beginning to emerge. With Quasar...
+- **all your app and component state are statically typed in data structures of your choosing**
+- **updating state in your application automatically updates views** (unless you update your state via interior mutability)
 
-Everything is experimental, half-baked, full of caveats, and subject to change. But currently:
+## How it works
 
 - **Template engines** are swappable. There are [`examples`](https://github.com/anowell/quasar/tree/master/examples) using [mustache](https://crates.io/crates/mustache)(default) and [maud](https://crates.io/crates/maud). But replacing the template engine is just a matter of implementing the `Renderable` trait.
-- **Components** are the combination of data with a template or other rendering process - really anything that implements `Renderable`. Quasar takes ownership of your components when binding them to the DOM and makes the data available to your event handlers via `data()` and `data_mut()` methods. In general, methods that mutate the component will result in re-rendering it (TBD: at the end of the event handler or at next tick). Note, component data is local to the component and not shareable outside your component.
+- **Components** are the combination of data with a template or other rendering process - really anything that implements `Renderable`. Quasar takes ownership of your components when binding them to the DOM and makes the data available to your event handlers via `data()` and `data_mut()` methods. In general, methods that mutate the component will result in re-rendering it at the end of the event handler. Note, component data is local to the component and not shareable outside your component.
 - **Views** are the result of one-way binding of a component to the DOM. You can also attach event listeners to views. Note, that currently rendering a view uses the destructive `innerHtml = ...` approach, which kills DOM state like input focus, so eventually some sort of DOM diffing/patching or virtual DOM solution will become pretty important.
-- **State** or the shared app data is also available to event handlers. It is partitioned by a key (and by `TypeId`), and any attempt to read a shared data partition (calling `data(key)`) automatically registeres your view as an observer of that data partion (to-be implemented). Any attempt to write to an app data partition (calling `data_mut(key)`) will automatically add all observer views for that data partition to the re-render queue (TBD: processed at the end of the event handler or at the next tick).
-
-A couple basic principles are beginning to emerge. With Quasar...
-- **it should be impossible in safe Rust to update state in your application without also updating views.**
-- **all your app and component state are statically typed in data structures of your choosing**
+- **App Data** is shared state that is also available to event handlers. It is partitioned by a key (and by `TypeId`), and any attempt to read a shared data partition (calling `data(key)`) automatically registers your view as an observer of that data partion. Any attempt to write to an app data partition (calling `data_mut(key)`) will automatically add all observer views for that data partition to the re-render queue process at the end of the event handler.
 
 A basic example might include an HTML file like this:
 
 ```html
 <html>
   <body>
-    <Reverser name="Malcom Reynolds"></Reverser>
-    <Reverser name="Shepherd Book"></Reverser>
+    <div id="counter"></div>
   </body>
 </html>
 ```
@@ -66,13 +63,36 @@ fn main() {
 
 See the [`examples`](https://github.com/anowell/quasar/tree/master/examples) directory to get a sense of how it works today.
 
-## What's next?
+## Goals
 
-I'm still working to better understand what works and what's missing in [webplatform](https://github.com/tcr/rust-webplatform).
-Here are some overarching questions that are guiding this experimentation right now:
+Quasar is still exploring some ideas and working to better understand what works and what's missing in [webplatform](https://github.com/tcr/rust-webplatform). Here are some overarching questions that are guiding this experimentation right now:
 
 - Can Quasar achieve a level of abstractions that feel comparable to modern Javascript frameworks? (I believe some macros could allow it to rival the declarative syntax of some other frameworks.)
 - What might it look like to have "isomorphic" rust, where the same rendering code can run both client and server side?
 - How can I leverage the type system to achieve more flexible and/or more robust frontend development? (e.g. trait-based templating, leveraging immutable vs mutable access as a gate for identifying views that observer or mutate specific data.)
 
 Admittedly Quasar is absent any perf goals at this time. Quasar also lacks a clear vision for why Quasar would be "better than X", so I'll probably ask myself "what problem is Quasar really solving?" multiple times throughout this experimentation.
+
+## Building
+
+You'll need emscripten setup and activated (see [brson's post](https://users.rust-lang.org/t/compiling-to-the-web-with-rust-and-emscripten/7627)), and then to add a couple compilation targets:
+
+```bash
+rustup target add asmjs-unknown-emscripten
+rustup target add wasm32-unknown-emscripten
+```
+
+Then `bin/build-asm` wraps cargo to simplify much of the build process
+
+```bash
+bin/build-asm # build quasar
+bin/build-asm reverser # build quasar and the reverser example (output copied to `static/`)
+bin/build-asm app # build quasar and examples/app (output copied to `exaples/app/static/`)
+bin/build all # build everyting
+```
+
+For any of the built examples, you can serve the result with any simple server, e.g. with the official nginx docker image:
+
+```bash
+docker run --rm -it -v `pwd`/static:/usr/share/nginx/html -p 8081:80 nginx
+```
diff --git a/bin/build-asm b/bin/build-asm
@@ -13,6 +13,7 @@ shift || true
 
 echo "Building Quasar"
 cargo build --target=asmjs-unknown-emscripten $@
+test -n "$item" || exit 0
 
 if [[ "$item" = "all" ]]; then
   echo "Building examples"
diff --git a/src/events.rs b/src/events.rs
@@ -1,6 +1,4 @@
-use ::{Element, View, QuasarApp, Renderable};
-use std::cell::RefCell;
-use std::rc::Rc;
+use ::{Element, View, AppContext};
 
 #[derive(Clone)]
 pub enum EventType {
@@ -38,8 +36,7 @@ impl EventType {
 }
 
 pub struct Event<'a, 'b, 'c, R> {
-    pub app: QuasarApp<'a>,
+    pub app: AppContext<'a>,
     pub target: Element<'b>,
     pub view: View<'c, R>,
 }
-
diff --git a/src/lib.rs b/src/lib.rs
@@ -30,20 +30,44 @@ pub fn init<'a, 'doc: 'a>() -> QuasarApp<'a> {
         document: Rc::new(webplatform::init()),
         components: Rc::new(RefCell::new(HashMap::new())),
         state: Rc::new(RefCell::new(HashMap::new())),
+        observers: Rc::new(RefCell::new(HashMap::new())),
         render_queue: Rc::new(RefCell::new(Vec::new())),
     }
 }
 
+type DataStore = HashMap<TypedKey, Box<Any>>;
+type ObserverStore<'doc> = HashMap<TypedKey, Vec<Rc<HtmlNode<'doc>>>>;
+type RenderQueue<'doc> = Vec<(TypedKey, Rc<HtmlNode<'doc>>)>;
+
 // TODO: revisit cloning of main app..
 // it feels very strange that QuasarApp is basically an `Rc` type
 // but it's non-trivial to pass around &QuasarApp since events need access
 // and almost certainly outlive the app instance if not for all the Rc members
 #[derive(Clone)]
 pub struct QuasarApp<'doc> {
     document: Rc<Document<'doc>>,
-    components: Rc<RefCell<HashMap<TypedKey, Box<Any>>>>,
-    state: Rc<RefCell<HashMap<TypedKey, Box<Any>>>>,
-    render_queue: Rc<RefCell<Vec<(TypedKey, Rc<HtmlNode<'doc>>)>>>,
+    components: Rc<RefCell<DataStore>>,
+    state: Rc<RefCell<DataStore>>,
+    observers: Rc<RefCell<ObserverStore<'doc>>>,
+    render_queue: Rc<RefCell<RenderQueue<'doc>>>,
+}
+
+pub struct AppContext<'doc> {
+    app: QuasarApp<'doc>,
+    view_id: TypedKey,
+    node: Rc<HtmlNode<'doc>>,
+}
+
+impl <'doc> AppContext<'doc> {
+    pub fn data<T: 'static>(&self, key: &str) -> DataRef<T> {
+        self.app.add_observer(self.view_id.clone(), self.node.clone());
+        self.app.data(key)
+    }
+
+    pub fn data_mut<T: 'static>(&mut self, key: &str) -> DataMutRef<T> {
+        self.app.add_observer(self.view_id.clone(), self.node.clone());
+        self.app.data_mut(key)
+    }
 }
 
 type DataRef<'a, T> = RefRef<'a, HashMap<TypedKey, Box<Any>>, T>;
@@ -82,7 +106,6 @@ impl <'doc> QuasarApp<'doc> {
             views.push(view);
         }
         Views {
-            app: self.clone(),
             views: Rc::new(views),
             handlers: Rc::new(RefCell::new(Vec::new())),
         }
@@ -109,18 +132,30 @@ impl <'doc> QuasarApp<'doc> {
     pub fn data<T: 'static>(&self, key: &str) -> DataRef<T> {
         let data_id = TypedKey::new::<T>(key);
         RefRef::new(self.state.borrow()).map(|state| {
+            println!("FOOFOO1");
             let entry = state.get(&data_id).unwrap();
             entry.downcast_ref().unwrap()
         })
     }
 
     pub fn data_mut<T: 'static>(&self, key: &str) -> DataMutRef<T> {
-        // TODO: look up observer views, and add enqueue for re-render
+        // Look up observers, and enqueue them for re-render
         let data_id = TypedKey::new::<T>(key);
+        {
+            let observers = self.observers.borrow();
+            if let Some(partition_observers) = observers.get(&data_id) {
+                let mut queue = self.render_queue.borrow_mut();
+                for observer in partition_observers {
+                    queue.push((data_id.clone(), observer.clone()));
+                }
+            }
+        }
+
         RefMutRef::new(self.state.borrow_mut()).map(|state| {
             // TODO: Look into getting an `OwnedMutRef` that supports `map_mut`
             let state = state as *const HashMap<_, _> as *mut HashMap<TypedKey, Box<Any>>;
             let mut state = unsafe { &mut *state };
+            println!("FOOFOO2");
             let mut entry = state.get_mut(&data_id).unwrap();
             entry.downcast_mut().unwrap()
         })
@@ -133,22 +168,42 @@ impl <'doc> QuasarApp<'doc> {
         queue.push((view_id, view.node.clone()));
     }
 
+    fn add_observer(&self, view_id: TypedKey, node: Rc<HtmlNode<'doc>>) {
+        let mut observers = self.observers.borrow_mut();
+        let mut partition = observers.entry(view_id).or_insert_with(|| Vec::new());
+        partition.push(node);
+    }
+
+    fn process_render_queue(&self) {
+        let mut queue = self.render_queue.borrow_mut();
+        for item in queue.iter() {
+            let (ref view_id, ref node) = *item;
+            let components = self.components.borrow();
+            let entry = components.get(&view_id).unwrap();
+            println!("FIXME/REGRESSION: downcasting to Box<Renderable> doesn't work.");
+            let component: &Rc<RefCell<Renderable>> = entry.downcast_ref().unwrap();
+            let component = component.borrow();
+            let props = lookup_props(&node, component.props());
+            node.html_set(&component.render(props));
+        }
+        queue.clear();
+    }
+
     pub fn spin(self) {
         webplatform::spin();
     }
 }
 
 /// A collection of `View`s returned from a query selector
 pub struct Views<'doc, R> {
-    app: QuasarApp<'doc>,
     pub views: Rc<Vec<View<'doc, R>>>,
     // Views may have multiple handlers, hence Vec
     // We want interior mutability, hence RefCell
     // A handler may map to multiple views
     handlers: Rc<RefCell<Vec<Box<Fn(Event<R>) + 'doc>>>>,
 }
 
-impl <'doc, R: Renderable + 'doc> Views<'doc, R> {
+impl <'doc, R: Renderable + 'static> Views<'doc, R> {
     pub fn on<F>(&self, event: EventType, f: F) where F: Fn(Event<R>) + 'doc {
         // Insert the handler into self and return it's index
         let offset = {
@@ -182,7 +237,11 @@ impl <'doc, R: Renderable + 'doc> Views<'doc, R> {
                 println!("Event fired on {:?} for target {:?}", &view.node, evt.target);
                 {
                     let event = Event {
-                        app: app.clone(),
+                        app: AppContext {
+                            app: app.clone(),
+                            view_id: TypedKey::new::<R>(&el),
+                            node: node.clone(),
+                        },
                         target: Element {
                             node: evt.target.expect("Event did not have a target") ,
                         },
@@ -200,12 +259,13 @@ impl <'doc, R: Renderable + 'doc> Views<'doc, R> {
                     let node = v.node.clone();
                     let component = v.component.clone();
                     let rendered = {
-                        let mut component = component.borrow_mut();
+                        let component = component.borrow();
                         let props = lookup_props(&node, component.props());
                         component.render(props)
                     };
                     node.html_set(&rendered);
                 }
+                app.process_render_queue()
             });
         }
         println!("{} On handlers registered", self.views.len());
@@ -254,7 +314,11 @@ impl <'doc, R: 'static + Renderable> View<'doc, R> {
                     {
                         let target_node = evt.target.expect("Event did not have a target");
                         let event = Event {
-                            app: app.clone(),
+                            app: AppContext {
+                                app: app.clone(),
+                                view_id: TypedKey::new::<R>(&el),
+                                node: node.clone(),
+                            },
                             target: Element { node: target_node },
                             view: view,
                         };
@@ -265,6 +329,7 @@ impl <'doc, R: 'static + Renderable> View<'doc, R> {
                     component.render(props)
                 };
                 node.html_set(&rendered);
+                app.process_render_queue();
             });
             println!("On handler registered");
         }
