feat: support views

Author: coolsoftwaretyler

app/routes/hook.tsx

@@ -12,16 +12,20 @@ export const meta: MetaFunction = () => {
 export default function HookPage() {
   const {
     count,
-    submodel: { title },
+    submodel: { title, allCaps, lowercase },
   } = useObservable(store);
 
+  console.log("Rendering")
+  
   return (
     <div className="App">
       <h1>This page uses a hook for observing properties</h1>
       <p>Open up React DevTools and you'll see that the `HookPage` component is properly memoized with React Compiler</p>
       <p>
         {count}: {title}
       </p>
+      <p>This is a computed view that capitalizes the title: {allCaps}</p>
+      <p>This is a lazily evaluated view that converts the title to lowercase: {lowercase()}</p>
       <div className="flex flex-wrap gap-2">
         <button 
           onClick={() => store.increment()} 

app/routes/observer.tsx

@@ -12,7 +12,7 @@ export const meta: MetaFunction = () => {
 export default observer(function ObserverPage() {
   const {
     count,
-    submodel: { title },
+    submodel: { title, allCaps, lowercase },
   } = store;
 
   return (
@@ -22,6 +22,8 @@ export default observer(function ObserverPage() {
       <p>
         {count}: {title}
       </p>
+      <p>This is a computed view that capitalizes the title: {allCaps}</p>
+      <p>This is a lazily evaluated view that converts the title to lowercase: {lowercase()}</p> 
       <div className="flex flex-wrap gap-2">
         <button 
           onClick={() => store.increment()} 

hooks/useObservable.ts

@@ -1,27 +1,40 @@
 import { useEffect, useState } from "react";
-import { IStateTreeNode, getSnapshot, onSnapshot } from "mobx-state-tree";
+import { IStateTreeNode, t, getSnapshot, onSnapshot } from "mobx-state-tree";
+
+// Helper to check if a value is an MST node
+function isMSTNode(value: any): value is IStateTreeNode {
+  return value && typeof value === "object" && "toJSON" in value;
+}
 
 export function useObservableProperty<
   T extends IStateTreeNode,
   K extends keyof ReturnType<typeof getSnapshot<T>>
 >(model: T, property: K) {
   const [value, setValue] = useState(() => {
-    const snapshot = getSnapshot(model);
-    return snapshot[property];
+    return model[property];
   });
 
   useEffect(() => {
     if (!model) return;
-
     const disposer = onSnapshot(model, (snapshot) => {
-      if (snapshot[property] !== value) {
-        setValue(snapshot[property]);
+      if (model[property] !== value) {
+        setValue(model[property]);
       }
     });
-
     return disposer;
   }, [model, property, value]);
 
+  // If the value is itself an MST node, return a proxy for it
+  const propertyValue = model[property];
+  if (isMSTNode(propertyValue)) {
+    return useObservable(propertyValue);
+  }
+
+  // If it's a function, return the function bound to the model
+  if (typeof propertyValue === 'function') {
+    return propertyValue.bind(model);
+  }
+
   return value;
 }
 
@@ -37,4 +50,4 @@ export function useObservable<T extends IStateTreeNode>(model: T) {
       return undefined;
     },
   });
-}
+}

store/store.ts

@@ -6,12 +6,21 @@ const SubModel = t
   })
   .actions((sub) => ({
     randomize() {
+      console.log("Randomizing title - should render");
       const randomString = Array.from({ length: 8 }, () =>
         "Hello World".charAt(Math.random() * 10)
       ).join("");
       sub.title = randomString;
     },
-  }));
+  }))
+  .views((self) => ({
+    get allCaps() {
+      return self.title.toUpperCase();
+    },
+    lowercase() {
+      return self.title.toLowerCase();
+    }
+  }))
 
 const SomeModel = t
   .model("SomeModel", {