mates 0.0.16 → 0.0.18

package/README.md

@@ -47,10 +47,37 @@ const CounterView = (props) => {
 renderView(CounterView, "app");
 ```
 
+**count** is a **local let variable** that holds value. which can only be changed froma  setter function. 
+**incr** is a **setter** function, that when called, updates the view. it has to be non-async.
+
+### Scopes
+
+Mates introduces a new feature called Scopes. an amazing way to share state with child views (components). using Scopes, child components can access parent's state directly without using props.
+
 #### Formatting Support:
 
 you can install lit-html plugin on your IDE like vs code or cursor for proper formatting for your template strings.
 
+### props()
+
+In Mates, props can be passed to child views as object. props is a funciton and not an object but it's passed as object to child component. the view will have to call props() to get the projects object.
+
+```typescript
+const CounterView = () => {
+  let count = 0;
+  let incr = setter(() => count++);
+  return () => html`
+    <div>count is: ${count}</div>
+    <div>${view(ChildView, { count })}</div>
+  `;
+};
+const ChildView = (props: Props<{ count: number }>) => {
+  return html`parent count is : ${props().count}`;
+};
+```
+
+**note** please don't destructure props into local variables in the outer function, as it breaks connection from the parent object. but you can do this in the inner function as inner function gets executed everytime the parent view is updated. so you will have always the latest value. 
+
 ### ⚛️ Atoms: Simple Reactive State
 
 Atoms hold mutable values. they can hold any Javascript value like primitive or objects or maps or sets.etc They store a single value that can be read, set (replaced with new value), or updated (if it's an object). They support typescript fully.
@@ -137,9 +164,9 @@ const todoList = unit({
     this._setUsers(await fetch("/users").then((d) => d.json()));
     this._setIsLoading(false);
   },
-  getUsersCount(){
+  getUsersCount() {
     return this.users.length;
-  }
+  },
 });
 ```
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "mates",
-  "version": "0.0.16",
+  "version": "0.0.18",
   "type": "module",
   "description": "Mates is a front end framework for building web applications",
   "main": "dist/index.js",
@@ -53,7 +53,7 @@
     "rollup": "^3.29.4",
     "rollup-plugin-dts": "^6.1.0",
     "ts-jest": "^29.1.1",
-    "typescript": "^5.3.2",
-    "tslib": "^2.8.1"
+    "tslib": "^2.8.1",
+    "typescript": "^5.3.2"
   }
 }