@unsetsoft/ryunixjs 0.2.8 → 0.2.9-nightly.1

package/lib/dom.js

@@ -513,9 +513,61 @@ function useEffect(effect, deps) {
   hookIndex++;
 }
 
+/**
+ * The Router component is responsible for rendering a specific component based on the current path in
+ * the browser's URL.
+ * @returns The `Router` component returns the `component` if the `currentPath` matches the specified
+ * `path`, otherwise it returns `null`.
+ */
+const Router = ({ path, component }) => {
+  const [currentPath, setCurrentPath] = useStore(window.location.pathname);
+
+  useEffect(() => {
+    const onLocationChange = () => {
+      setCurrentPath(() => window.location.pathname);
+    };
+
+    window.addEventListener("navigate", onLocationChange);
+    window.addEventListener("pushsatate", onLocationChange);
+    window.addEventListener("popstate", onLocationChange);
+
+    return () => {
+      window.removeEventListener("navigate", onLocationChange);
+      window.removeEventListener("pushsatate", onLocationChange);
+      window.removeEventListener("popstate", onLocationChange);
+    };
+  }, [currentPath]);
+
+  return currentPath === path ? component() : null;
+};
+
+/**
+ * The Link function is a Ryunix component that prevents page reload when a link is clicked and updates
+ * the browser's history and local storage.
+ * @param props - The `props` parameter is an object that contains the properties passed to the `Link`
+ * component. These properties can include the following:
+ * @returns The Link component is being returned.
+ */
+const Link = (props) => {
+  const preventReload = (event) => {
+    event.preventDefault();
+    if (window.location.pathname !== props.to) {
+      window.history.pushState({}, "", props.to);
+      const navigationEvent = new Event("pushsatate");
+      window.dispatchEvent(navigationEvent);
+      localStorage.setItem("pathname", props.to);
+    }
+  };
+  return (
+    <a href={props.to} onClick={preventReload} {...props}>
+      {props.children}
+    </a>
+  );
+};
+
 // export
 
-export { useStore, useEffect };
+export { useStore, useEffect, Router, Link };
 
 export default {
   createElement,

package/lib/main.js

@@ -1,6 +1,6 @@
 import Ryunix from "./dom";
 
-export { useStore, useEffect } from "./dom";
+export { useStore, useEffect, Router, Link } from "./dom";
 
 window.Ryunix = Ryunix;
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@unsetsoft/ryunixjs",
-  "version": "0.2.8",
+  "version": "0.2.9-nightly.1",
   "license": "MIT",
   "main": "./dist/Ryunix.js",
   "private": false,

package/webpack.config.js

@@ -14,7 +14,10 @@ module.exports = {
     filename: "./assets/js/[chunkhash].bundle.js",
     devtoolModuleFilenameTemplate: "ryunix/[resource-path]",
   },
-
+  devServer: {
+    port: 3000,
+    historyApiFallback: { index: "/", disableDotRule: true },
+  },
   module: {
     rules: [
       {