Initial commit

README.md

@@ -0,0 +1,57 @@
+# Fragmented store
+
+When we update a property of the store, **only** the components that use that particular property **are rendered** even if they consume other elements of the store.
+
+## Usage:
+
+```js
+import createStore from "fragmented-store";
+
+const { Provider, useUsername, useAge } = createStore({
+  username: "Aral",
+  age: 31
+});
+
+export default function App() {
+  return (
+    <Provider>
+      <Title />
+      <UpdateTitle />
+      <Age />
+    </Provider>
+  );
+}
+
+function Title() {
+  const [username] = useUsername();
+
+  console.log("render Title");
+
+  return <h1>{username}</h1>;
+}
+
+function UpdateTitle() {
+  const [username, setUsername] = useUsername();
+
+  console.log("render UpdateTitle");
+
+  return (
+    <button onClick={() => setUsername((u) => u + "a")}>
+      Update {username}
+    </button>
+  );
+}
+
+function Age() {
+  const [age, setAge] = useAge();
+
+  console.log("render Age");
+
+  return (
+    <div>
+      <div>{age}</div>
+      <button onClick={() => setAge((a) => a + 1)}>Inc age</button>
+    </div>
+  );
+}
+```

index.js

@@ -0,0 +1,38 @@
+import React, { useState, useContext, createContext } from "react";
+
+export default function createStore(store = {}) {
+  const storeUtils = Object.keys(store).reduce((o, key) => {
+    const fieldCapitalized = `${key[0].toUpperCase()}${key.slice(
+      1,
+      key.length
+    )}`;
+    const context = createContext(store[key]);
+
+    return {
+      ...o,
+      contexts: [...(o.contexts || []), { context, key }],
+      [`use${fieldCapitalized}`]: () => useContext(context)
+    };
+  }, {});
+
+  storeUtils.Provider = ({ children }) => {
+    const Empty = ({ children }) => children;
+    const Component = storeUtils.contexts
+      .map(({ context, key }) => ({ children }) => {
+        const ctx = useState(store[key]);
+        return <context.Provider value={ctx}>{children}</context.Provider>;
+      })
+      .reduce(
+        (RestProviders, Provider) => ({ children }) => (
+          <Provider>
+            <RestProviders>{children}</RestProviders>
+          </Provider>
+        ),
+        Empty
+      );
+
+    return <Component>{children}</Component>;
+  };
+
+  return storeUtils;
+}

package.json

@@ -0,0 +1,34 @@
+{
+  "name": "fragmented-store",
+  "version": "0.1.0",
+  "description": "Small library to manage the (P)React state",
+  "source": "index.js",
+  "main": "dist/index.js",
+  "module": "dist/index.module.js",
+  "unpkg": "dist/index.umd.js",
+  "scripts": {
+    "build": "microbundle",
+    "dev": "microbundle watch",
+    "prepublish": "yarn build",
+  },
+  "keywords": [
+    "react",
+    "preact",
+    "state",
+    "state manager",
+    "javascript"
+  ],
+  "author": {
+    "name": "Aral Roca Gòmez",
+    "email": "[email protected]"
+  },
+  "license": "MIT",
+  "peerDependencies": {
+    "react": ">= 16.8.0"
+  },
+  "devDependencies": {
+    "microbundle": "0.11.0",
+    "react": "16.13.1",
+    "react-dom": "16.13.1"
+  }
+}