Some improvements: rename Provider to Store, add types + fix eslint (#14)

* Some improvements: rename Provider to Store, add types + fix eslint

* Add linter to action

* Change test to it

Author: aralroca

.eslintrc.js

@@ -20,13 +20,14 @@ module.exports = {
     'react',
     'react-hooks',
     'testing-library',
-    'jest'
+    'jest',
   ],
   'rules': {
     'require-jsdoc': 0,
+    'react/prop-types': 0,
     'max-len': [
       'error',
-      { 'code': 95 },
+      {'code': 80, 'ignoreStrings': true},
     ],
     'no-restricted-imports': [
       'error',

.github/workflows/test.yml

@@ -21,4 +21,5 @@ jobs:
         run: |
           yarn install
           yarn build
+          yarn lint
           yarn test

README.md

@@ -46,23 +46,23 @@ npm install fragstore --save
 ```
 
 ## Usage:
-### Provider
+### Store
 
-The `Provider` is required for any of its child components to consume the store.
+The `Store` is required for any of its child components to consume the store.
 
 ```js
 import createStore from "fragstore";
 
-const { Provider } = createStore({
+const { Store } = createStore({
   username: "Aral",
   age: 31
 });
 
 function App() {
   return (
-    <Provider>
+    <Store>
      {/* rest */} 
-    </Provider>
+    </Store>
   );
 }
 ```
@@ -133,22 +133,22 @@ function UnfragmentedExample() {
 
 There are 3 ways to add a new property to the store:
 
-#### 1. Adding a new property on the Provider
+#### 1. Adding a new property on the Store
 
 ```js
 import createStore from "fragstore";
 
-const { Provider } = createStore({ username: "Aral" });
+const { Store } = createStore({ username: "Aral" });
 
 function App() {
-  return <Provider store={{ count: 0 }}>{/* rest */}</Provider>;
+  return <Store store={{ count: 0 }}>{/* rest */}</Store>;
 }
 ```
 
 #### 2. Using the `useStore` to consume to a new property
 
 ```js
-const { Provider } = createStore({ username: "Aral" });
+const { Store } = createStore({ username: "Aral" });
 // ...
 const [newProp, setNewProp] = useStore.newProp("Initial value of newProp")
 const [anotherProp, setAnotherProp] = useStore.anotherProp()
@@ -157,10 +157,10 @@ setAnotherProp("Initial value of anotherProp")
 setNewProp("Next value of newProp")
 ```
 
-The hook argument works to define the initial value. It doesn't work when the initial value is already defined in `createStore` or `Provider`:
+The hook argument works to define the initial value. It doesn't work when the initial value is already defined in `createStore` or `Store`:
 
 ```js
-const { Provider } = createStore({ username: "Aral" });
+const { Store } = createStore({ username: "Aral" });
 // ...
 const [username, setUsername] = useStore.username("Another name")
 console.log(username) // -> Aral
@@ -220,13 +220,13 @@ const callbacks = {
   }
 }
 
-const { Provider, useQuantity } = createStore(initialState, callbacks)
+const { Store, useQuantity } = createStore(initialState, callbacks)
 ```
 
-Also you can overwrite or define callbacks on the `Provider`:
+Also you can overwrite or define callbacks on the `Store`:
 
 ```js
-<Provider 
+<Store 
   store={{ newProperty: 'Another value'}} 
   callbacks={{ 
     newProperty(value) {
@@ -240,7 +240,7 @@ Also you can overwrite or define callbacks on the `Provider`:
 ```js
 import createStore from "fragstore";
 
-const { Provider, useStore } = createStore({
+const { Store, useStore } = createStore({
   username: "Aral",
   age: 31,
   cart: {
@@ -251,14 +251,14 @@ const { Provider, useStore } = createStore({
 
 export default function App() {
   return (
-    <Provider>
+    <Store>
       <AllStore />
       <Username />
       <CartPrice />
       <CartFirstItem />
       <Age />
       <NewProperty />
-    </Provider>
+    </Store>
   );
 }
 

babel.config.js

@@ -1,15 +1,15 @@
 module.exports = {
   presets: [
     [
-      "@babel/preset-env",
+      '@babel/preset-env',
       {
         shippedProposals: true,
         targets: {
-          node: "current",
+          node: 'current',
         },
       },
     ],
-    ["@babel/preset-react", { runtime: "automatic" }],
+    ['@babel/preset-react', {runtime: 'automatic'}],
   ],
   plugins: [],
 };

package.json

@@ -1,13 +1,19 @@
 {
   "name": "fragstore",
-  "version": "0.4.1",
+  "version": "0.5.0",
   "description": "Small library to manage the (P)React state",
   "source": "package/index.js",
   "main": "dist/index.js",
-  "module": "dist/index.module.js",
-  "unpkg": "dist/index.umd.js",
+  "umd:main": "dist/index.umd.js",
+  "module": "dist/index.m.js",
+  "exports": {
+    "require": "./dist/index.js",
+    "default": "./dist/index.modern.js"
+  },
+  "types": "dist/index.d.ts" ,
   "scripts": {
-    "lint": "npx eslint --fix package tests",
+    "lint": "eslint ./package",
+    "format": "eslint --fix ./package",
     "test": "jest",
     "test:watch": "jest --watch",
     "build": "microbundle --jsx React.createElement",

package/index.js

@@ -9,29 +9,29 @@ export default function createStore(defaultStore = {}, defaultCallbacks = {}) {
   let allCallbacks = defaultCallbacks;
 
   /**
-   * Provider of the store
+   * Store of the store
    *
    * @example
    *
    * // Default usage
-   * const { Provider } = createStore({ count: 0 })
+   * const { Store } = createStore({ count: 0 })
    * // ...
-   * <Provider>{children}</Provider>
+   * <Store>{children}</Store>
    *
-   * // Creating the default store in the Provider
-   * const { Provider } = createStore()
+   * // Creating the default store in the Store
+   * const { Store } = createStore()
    * // ...
-   * <Provider store={{ count: 0 }}>{children}</Provider>
+   * <Store store={{ count: 0 }}>{children}</Store>
    *
    * // Defining callbacks
-   * const { Provider } = createStore({ count: 0 })
+   * const { Store } = createStore({ count: 0 })
    * // ...
-   * <Provider callbacks={{ count: (v) => console.log(v) }}>
+   * <Store callbacks={{ count: (v) => console.log(v) }}>
    *  {children}
-   * </Provider>
+   * </Store>
    * @return {React.ReactNode} children
    */
-  function Provider({store = {}, callbacks = {}, children}) {
+  function Store({store = {}, callbacks = {}, children}) {
     const initialized = useRef();
 
     if (!initialized.current) {
@@ -68,7 +68,7 @@ export default function createStore(defaultStore = {}, defaultCallbacks = {}) {
     discard: new Set(['prototype', 'isReactComponent']),
     get(_, path) {
       if (!this.discard.has(path)) this.path.push(path);
-      return new Proxy(() => {}, validator);
+      return new Proxy(() => { }, validator);
     },
     apply(t, _, args) {
       const path = this.path.slice();
@@ -102,7 +102,7 @@ export default function createStore(defaultStore = {}, defaultCallbacks = {}) {
       return [value, update, resetField(prop)];
     },
   };
-  const useStore = new Proxy(() => {}, validator);
+  const useStore = new Proxy(() => { }, validator);
 
   /**
    * Hook to register a listener to force a render when the
@@ -194,12 +194,12 @@ export default function createStore(defaultStore = {}, defaultCallbacks = {}) {
   }
 
   /**
-   * createStore function returns the Provider component with the
+   * createStore function returns the Store component with the
    * useStore hook.
    *
-   * @returns {object} { Provider, useStore }
+   * @returns {object} { Store, useStore }
    */
-  return {Provider, useStore};
+  return {Store, useStore};
 }
 
 // ##########################################################