@unsetsoft/ryunixjs 0.4.13-nightly.3 → 0.4.13-nightly.4

package/dist/Ryunix.js

@@ -286,7 +286,30 @@
     return currentPath === path ? component() : null
   };
 
-  const Navigate = (props) => {
+  const Navigate = () => {
+    /**
+     * The function `push` is used to push a new state to the browser's history and trigger a custom
+     * event called 'pushstate'.
+     * @param to - The `to` parameter is a string representing the URL path to which you want to
+     * navigate.
+     * @param [state] - The `state` parameter is an optional object that represents the state associated
+     * with the new history entry. It can be used to store any data that you want to associate with the
+     * new URL. When you navigate back or forward in the browser history, this state object will be
+     * passed to the `popstate
+     * @returns The function `push` does not have a return statement, so it returns `undefined` by
+     * default.
+     */
+    const push = (to, state = {}) => {
+      if (window.location.pathname === to) return
+      window.history.pushState(state, '', to);
+      const navigationEvent = new Event('pushsatate');
+      window.dispatchEvent(navigationEvent);
+    };
+
+    return { push }
+  };
+
+  const Link = (props) => {
     if (props.style) {
       throw new Error(
         'The style attribute is not supported on internal components, use className.',
@@ -307,11 +330,8 @@
     }
     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 { push } = Navigate();
+      push(props.to);
     };
 
     const anchor = {
@@ -659,6 +679,7 @@
   window.Ryunix = Ryunix;
 
   exports.Fragments = Fragments;
+  exports.Link = Link;
   exports.Navigate = Navigate;
   exports.Router = Router;
   exports.default = Ryunix;

package/package.json

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

package/src/lib/index.js

@@ -1,14 +1,14 @@
 import { createElement, Fragments } from './createElement'
 import { render, init } from './render'
 import { useStore, useEffect, useQuery } from './hooks'
-import { Router, Navigate } from './navigation'
+import { Router, Navigate, Link } from './navigation'
 import * as Dom from './dom'
 import * as Workers from './workers'
 import * as Reconciler from './reconciler'
 import * as Components from './components'
 import * as Commits from './commits'
 
-export { useStore, useEffect, useQuery, Fragments, Router, Navigate }
+export { useStore, useEffect, useQuery, Fragments, Router, Navigate, Link }
 
 export default {
   createElement,

package/src/lib/navigation.js

@@ -22,7 +22,30 @@ const Router = ({ path, component }) => {
   return currentPath === path ? component() : null
 }
 
-const Navigate = (props) => {
+const Navigate = () => {
+  /**
+   * The function `push` is used to push a new state to the browser's history and trigger a custom
+   * event called 'pushstate'.
+   * @param to - The `to` parameter is a string representing the URL path to which you want to
+   * navigate.
+   * @param [state] - The `state` parameter is an optional object that represents the state associated
+   * with the new history entry. It can be used to store any data that you want to associate with the
+   * new URL. When you navigate back or forward in the browser history, this state object will be
+   * passed to the `popstate
+   * @returns The function `push` does not have a return statement, so it returns `undefined` by
+   * default.
+   */
+  const push = (to, state = {}) => {
+    if (window.location.pathname === to) return
+    window.history.pushState(state, '', to)
+    const navigationEvent = new Event('pushsatate')
+    window.dispatchEvent(navigationEvent)
+  }
+
+  return { push }
+}
+
+const Link = (props) => {
   if (props.style) {
     throw new Error(
       'The style attribute is not supported on internal components, use className.',
@@ -43,11 +66,8 @@ const Navigate = (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)
-    }
+    const { push } = Navigate()
+    push(props.to)
   }
 
   const anchor = {
@@ -61,4 +81,4 @@ const Navigate = (props) => {
   return createElement('a', anchor, children)
 }
 
-export { Router, Navigate }
+export { Router, Navigate, Link }

package/src/main.js

@@ -6,6 +6,7 @@ export {
   Fragments,
   Navigate,
   Router,
+  Link,
 } from './lib/index.js'
 
 window.Ryunix = Ryunix