@unsetsoft/ryunixjs 0.2.30 → 0.2.31-nightly.1

package/dist/Ryunix.js

@@ -285,6 +285,64 @@
     return context;
   };
 
+  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;
+  };
+
+  const Navigate = (props) => {
+    if (props.style) {
+      throw new Error(
+        "The style attribute is not supported on internal components."
+      );
+    }
+    if (props.to === "") {
+      throw new Error("'to=' cannot be empty.");
+    }
+    if (props.className === "") {
+      throw new Error("className cannot be empty.");
+    }
+    if (props.label === "") {
+      throw new Error("'label=' cannot be empty.");
+    }
+
+    if (!props.label || !props.to) {
+      throw new Error("Missig component params.");
+    }
+    const preventReload = (event) => {
+      event.preventDefault();
+      if (window.location.pathname !== props.to) {
+        window.history.pushState({}, "", props.to);
+        const navigationEvent = new Event("pushsatate");
+        window.dispatchEvent(navigationEvent);
+      }
+    };
+
+    const anchor = {
+      href: props.to,
+      onClick: preventReload,
+      ...props,
+    };
+    return createElement("a", anchor, props.label);
+  };
+
   /**
    * The function creates a new DOM element based on the given fiber object and updates its properties.
    * @param fiber - The fiber parameter is an object that represents a node in the fiber tree. It
@@ -619,6 +677,8 @@
   window.Ryunix = Ryunix;
 
   exports.Fragments = Fragments;
+  exports.Navigate = Navigate;
+  exports.Router = Router;
   exports.createContext = createContext;
   exports.default = Ryunix;
   exports.useContext = useContext;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@unsetsoft/ryunixjs",
-  "version": "0.2.30",
+  "version": "0.2.31-nightly.1",
   "license": "MIT",
   "main": "./dist/Ryunix.js",
   "private": false,
@@ -31,9 +31,12 @@
     "css-loader": "^6.8.1",
     "error-overlay-webpack-plugin": "^1.1.1",
     "file-loader": "^6.2.0",
+    "html-loader": "^4.2.0",
     "html-webpack-plugin": "^5.5.3",
     "image-webpack-loader": "8.1.0",
     "node-sass": "9.0.0",
+    "remark-html": "^15.0.2",
+    "remark-loader": "^5.0.0",
     "rollup": "3.24.0",
     "sass": "^1.66.1",
     "sass-loader": "^13.3.2",

package/webpack.config.js

@@ -1,7 +1,8 @@
-const path = require("path");
-const HtmlWebpackPlugin = require("html-webpack-plugin");
-const ErrorOverlayPlugin = require("error-overlay-webpack-plugin");
-const { getPackageManager } = require("./utils");
+import path from "path";
+import HtmlWebpackPlugin from "html-webpack-plugin";
+import ErrorOverlayPlugin from "error-overlay-webpack-plugin";
+import { getPackageManager } from "./utils";
+import RemarkHTML from "remark-html";
 
 let dir;
 const manager = getPackageManager();
@@ -88,6 +89,22 @@ module.exports = {
         loader: "url-loader",
         options: { limit: false },
       },
+      {
+        test: /\.md$/,
+        use: [
+          {
+            loader: "html-loader",
+          },
+          {
+            loader: "remark-loader",
+            options: {
+              remarkOptions: {
+                plugins: [RemarkHTML],
+              },
+            },
+          },
+        ],
+      },
     ],
   },
   resolve: {