forgo-state - npm Package Compare versions

Comparing version 0.0.2 to 0.0.3

package.json

 {
   "name": "forgo-state",
-  "version": "0.0.2",
+  "version": "0.0.3",
   "main": "./dist",
@@ -5,0 +5,0 @@ "author": "Jeswin Kumar<[e-mail]>",

README.md

 # forgo-state
 
-Easy Application State Management for Forgo Apps using JavaScript Proxies.
+Easy Application State Management for [Forgo](https://github.com/forgojs/forgo) Apps using JavaScript Proxies.
 
@@ -13,3 +13,3 @@ ## Installation
 
-First define one or more state variables using the defineState() API.
+Start by defining one or more state variables using the defineState() API. These states can be bound to multiple components in the application.
 
@@ -23,2 +23,3 @@ ```js
   spam: [],
+  unread: 0,
 });
@@ -34,14 +35,14 @@
 
-Use bindToStates() while defining your Forgo components to bind one or more states to a specific component. In the following example, whenever mailboxState or signinState changes, the component is rerendered.
+Use bindToStates() to bind one or more states to any component. In the following example, whenever mailboxState or signinState changes, the bound component MailboxView is rerendered. Similarly, NotificationsBar is also bound to mailboxState.
 
 ```js
 function MailboxView() {
-  return bindToStates([mailboxState, signinState], {
+  const component = {
     render(props: any, args: ForgoRenderArgs) {
       return (
         <div>
-          {state.messages.length ? (
-            state.messages.map((m) => <p>{m}</p>)
+          {mailboxState.messages.length ? (
+            mailboxState.messages.map((m) => <p>{m}</p>)
           ) : (
-            <p>There are no messages for {state.username}.</p>
+            <p>There are no messages for {signinState.username}.</p>
           )}
@@ -51,12 +52,32 @@ </div>
     },
-  });
+  };
+  return bindToStates([mailboxState, signinState], component);
 }
+
+function NotificationsBar() {
+  const component = {
+    render() {
+      return (
+        <div>
+          {mailboxState.unread > 0 ? (
+            <p>You have {mailboxState.unread} notifications.</p>
+          ) : (
+            <p>There are no notifications.</p>
+          )}
+        </div>
+      );
+    },
+  };
+  return bindToStates([mailboxState], component);
+}
 ```
 
-You could update the state properties any way you choose:
+You could update the state properties directly:
 
 ```js
-// Assume you got some 'data' via an API.
-// The following line causes a rerender.
-mailboxState.messages = data;
+async function updateInbox() {
+  const data = await fetchInboxData();
+  // The next line causes a rerender of the MailboxView component
+  mailboxState.messages = data;
+}
 ```
@@ -66,5 +87,5 @@
 
-Sometimes, you're interested in rerendering only when a specific property of the state changes. There's another api for this, bindToStateProps().
+Sometimes, you're interested in rerendering only when a specific property of a state variable changes. There's another api for this, bindToStateProps().
 
-Usage is similar, but instead of an array of states you're interested in, you'll have to pass an array of [state, propertiesGetter] tuples.
+Usage is similar. But instead of an array of states you're interested in, you'll have to pass an array of [state, propertiesGetter] tuples.
 
@@ -75,5 +96,18 @@ Here's an example:
 function MailboxView() {
+  const component = {
+    render(props: any, args: ForgoRenderArgs) {
+      return (
+        <div>
+          {mailboxState.messages.length ? (
+            mailboxState.messages.map((m) => <p>{m}</p>)
+          ) : (
+            <p>There are no messages for {signinState.username}.</p>
+          )}
+        </div>
+      );
+    },
+  };
   return bindToStateProps(
     // Render only if mailboxState.messages or mailboxState.drafts
-    // or state.username changes.
+    // or signinState.username changes.
     [
@@ -83,17 +117,5 @@ [mailboxState, (state) => [state.messages, state.drafts]],
     ],
-    {
-      render(props: any, args: ForgoRenderArgs) {
-        return (
-          <div>
-            {state.messages.length ? (
-              state.messages.map((m) => <p>{m}</p>)
-            ) : (
-              <p>There are no messages for {state.username}.</p>
-            )}
-          </div>
-        );
-      },
-    }
+    component
   );
 }
 ```

test/src/test.ts

 import defineState from "./defineState";
 import bindToStates from "./bindToStates";
 import bindToStateProps from "./bindToStateProps";
+import shouldRenderOnce from "./shouldRenderOnce";
 
@@ -8,1 +9,2 @@ defineState();
 bindToStateProps();
+shouldRenderOnce();

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

19878

increased by17.17%

Number of package files

19

increased by11.76%

Lines of code

527

increased by18.96%

Number of lines in readme file

115

increased by23.66%

No dependency changes