Merge pull request #19 from UnSetSoft/dev

1.1.10

Author: neyunse

.npmignore

@@ -1,5 +1,7 @@
 /node_modules
 /yarn.lock
-/src
+/src/server.js
+/src/public
+
 /.vscode
 /.github

package.json

@@ -1,5 +1,5 @@
 {
-  "version": "1.1.5",
+  "version": "1.1.10",
   "main": "./src/lib/main.js",
   "scripts": {
     "dev": "nodemon ./src/server.js",

src/lib/hooks/store.js

@@ -0,0 +1,20 @@
+class Store {
+  constructor(defvalue) {
+    this.defvalue = defvalue;
+  }
+  /* `setValue` is a method that takes in a parameter `newValue`. The arrow function syntax `=>` is
+  used to define the function. Inside the function, the `defvalue` property of the `Store` instance
+  is set to the `newValue` parameter. This means that when `setValue` is called with a new value, it
+  updates the `defvalue` property of the `Store` instance to that new value. */
+  setValue = (newValue) => (this.defvalue = newValue);
+
+  /* `hook` is a method that returns an array containing two functions: `getValue` and `setValue`.
+  These functions can be used to get and set the value of the `defvalue` property of the `Store`
+  class instance. This is useful for implementing state management in React functional components
+  using the `useState` hook. */
+  hook = () => {
+    return [this.defvalue, this.setValue];
+  };
+}
+
+export default Store;

src/lib/main.js

@@ -1,7 +1,7 @@
 import Ryunix from "./ryunix/index.js";
 const _r = (el) => new Ryunix(el);
-
 window._r = _r;
 
+
 export default _r;
-export { Ryunix };
+export { Ryunix};

src/lib/ryunix/index.js

@@ -1,5 +1,6 @@
 import Remote from "../remote/index.js";
 import Animate from "../animate/index.js";
+import Store from "../hooks/store.js";
 class Ryunix {
   /**
    * The constructor function takes in an element and assigns it to the elements property of the
@@ -68,11 +69,43 @@ class Ryunix {
    * @param html - The HTML to insert.
    * @returns the value of the variable ins.
    */
-  insertHTML(html) {
+  insertsHTML(html) {
     this.getElements().forEach((el) => (el.innerHTML += html));
     return this;
   }
 
+  /**
+   * The function appends text to the inner text of all elements returned by a selector.
+   * @param txt - txt is a parameter that represents the text that will be inserted into the innerText
+   * property of the selected elements.
+   * @returns the current object (`this`) to allow for method chaining.
+   */
+  insertsTXT(txt) {
+    this.getElements().forEach((el) => (el.innerText += txt));
+    return this;
+  }
+
+  /**
+   * The function sets the inner text of an element and returns the element.
+   * @param txt - The text that will be inserted into the element's inner text.
+   * @returns the object that called it, which is likely an instance of a class or an object with a
+   * similar structure.
+   */
+  insertTXT(txt) {
+    this.getElement().innerText = txt;
+    return this;
+  }
+
+  /**
+   * The function inserts HTML code into an element's innerHTML property and returns the element.
+   * @param html - The HTML code that will be inserted into the element's innerHTML property.
+   * @returns The object that the `insertHTML` method belongs to is being returned.
+   */
+  insertHTML(html) {
+    this.getElement().innerHTML = html;
+    return this;
+  }
+
   /**
    * The function takes a boolean as an argument and returns a boolean.
    * @param boolean - true or false
@@ -213,6 +246,16 @@ class Ryunix {
     this.getElement().remove();
     return this;
   }
+
+  /**
+   * The function returns a new instance of a Store object with a specified value and hooks it.
+   * @param [val=null] - The val parameter is an optional initial value that can be passed to the Store
+   * constructor. If no value is provided, the store will be initialized with a null value.
+   * @returns A hook that creates a new instance of the Store class with an optional initial value.
+   */
+  useStore(val = null) {
+    return new Store(val).hook();
+  }
 }
 
 export default Ryunix;

src/public/index.html

@@ -55,6 +55,10 @@
         <button id="rotate" class="kg__button">
           Custom animation (rotation)
         </button>
+
+        <button id="increment" class="kg__button">
+          <span id="count"></span>
+        </button>
       </div>
 
       <ul id="coffe"></ul>

src/public/main.js

@@ -1,76 +1,79 @@
-_k().load(() => {
-       _k('#hot').event('click', async () => {
-            
-            _k("#hot").removeClass("kg-primary")
+_r().load(() => {
+  _r("#hot").event("click", async () => {
+    _r("#hot").removeClass("kg-primary");
 
-            const { tag } = _k('#hot').getDataSet()
+    const { tag } = _r("#hot").getDataSet();
 
-            _k('#coffe').removeChildrens()
+    _r("#coffe").removeChildrens();
 
-            const r = await _k().remote(`https://api.sampleapis.com/coffee/${tag}`).get();
-            
-            r.map(r => {
-                  _k('#coffe').insertHTML(`<li><b>${r.title}:</b> ${r.description}</li>`)
-            })
-            
-            _k('#hot').disableElement(true)
+    const r = await _r()
+      .remote(`https://api.sampleapis.com/coffee/${tag}`)
+      .get();
 
-            _k('#iced').disableElement(false)
+    r.map((r) => {
+      _r("#coffe").insertHTML(`<li><b>${r.title}:</b> ${r.description}</li>`);
+    });
 
-            _k('#clear').disableElement(false)
+    _r("#hot").disableElement(true);
 
-      })
+    _r("#iced").disableElement(false);
 
-      _k('#iced').event('click', async () => {
+    _r("#clear").disableElement(false);
+  });
 
-            const { tag } = _k('#iced').getDataSet()
+  _r("#iced").event("click", async () => {
+    const { tag } = _r("#iced").getDataSet();
 
-            _k('#coffe').removeChildrens()
+    _r("#coffe").removeChildrens();
 
-            const r = await _k().remote(`https://api.sampleapis.com/coffee/_k{tag}`).get();
-            
-            r.map(r => {
-                  _k('#coffe').insertHTML(`<li><b>_k{r.title}:</b> _k{r.description}</li>`)
-            })
-            
-            _k('#iced').disableElement(true)
-            _k('#hot').disableElement(false)
-            _k('#clear').disableElement(false)
-      })
+    const r = await _r()
+      .remote(`https://api.sampleapis.com/coffee/_r{tag}`)
+      .get();
 
-      _k('#clear').event('click', async () => {
+    r.map((r) => {
+      _r("#coffe").insertHTML(`<li><b>_r{r.title}:</b> _r{r.description}</li>`);
+    });
 
-            _k('#coffe').removeChildrens()
-          
-            
-            _k('#iced').disableElement(false)
-            _k('#hot').disableElement(false)
-            _k('#clear').disableElement(true)
-      })
+    _r("#iced").disableElement(true);
+    _r("#hot").disableElement(false);
+    _r("#clear").disableElement(false);
+  });
 
-      _k('#boxbtn').event('click', () => {
-            _k('#box').toggleClass("active")
-      })
+  _r("#clear").event("click", async () => {
+    _r("#coffe").removeChildrens();
 
-      _k('#fadeIn').event('click', () => { 
-            _k('#box').animate().fadeIn()
-      })
+    _r("#iced").disableElement(false);
+    _r("#hot").disableElement(false);
+    _r("#clear").disableElement(true);
+  });
 
-      _k('#fadeOut').event('click', () => { 
-            _k('#box').animate().fadeOut()
-      })
+  _r("#boxbtn").event("click", () => {
+    _r("#box").toggleClass("active");
+  });
 
-      _k('#rotate').event('click', () => { 
-            
-            _k('#box').animate().anime([
-                  {transform: 'rotate(360deg)'}
-            ])
-      })
+  _r("#fadeIn").event("click", () => {
+    _r("#box").animate().fadeIn();
+  });
 
+  _r("#fadeOut").event("click", () => {
+    _r("#box").animate().fadeOut();
+  });
 
-      
-      
-      console.log(_k('button').getElements())
+  _r("#rotate").event("click", () => {
+    _r("#box")
+      .animate()
+      .anime([{ transform: "rotate(360deg)" }]);
+  });
 
+  let [counter, setCounter] = _r().useStore(0);
 
-})
+  _r("#count").insertTXT(`${counter}`);
+
+  _r("#increment").event("click", () => {
+    counter++;
+    setCounter(counter);
+    _r("#count").insertTXT(`${counter}`);
+  });
+
+  console.log(_r("button").getElements());
+});