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

package/dist/Ryunix.js

@@ -24,9 +24,14 @@
   const STRINGS = Object.freeze({
     object: 'object',
     function: 'function',
+    style: 'ryunix-style',
+    className: 'ryunix-class',
+    children: 'children',
+  });
+
+  const OLD_STRINGS = Object.freeze({
     style: 'style',
     className: 'className',
-    children: 'children',
   });
 
   const EFFECT_TAGS = Object.freeze({
@@ -286,7 +291,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 +335,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 = {
@@ -374,11 +399,22 @@
       .filter(isNew(prevProps, nextProps))
       .forEach((name) => {
         if (name === STRINGS.style) {
+          DomStyle(dom, nextProps['ryunix-style']);
+        } else if (name === OLD_STRINGS.style) {
           DomStyle(dom, nextProps.style);
         } else if (name === STRINGS.className) {
+          if (nextProps['ryunix-class'] === '') {
+            throw new Error('data-class cannot be empty.')
+          }
+
+          prevProps['ryunix-class'] &&
+            dom.classList.remove(...prevProps['ryunix-class'].split(/\s+/));
+          dom.classList.add(...nextProps['ryunix-class'].split(/\s+/));
+        } else if (name === OLD_STRINGS.className) {
           if (nextProps.className === '') {
             throw new Error('className cannot be empty.')
           }
+
           prevProps.className &&
             dom.classList.remove(...prevProps.className.split(/\s+/));
           dom.classList.add(...nextProps.className.split(/\s+/));
@@ -659,6 +695,7 @@
   window.Ryunix = Ryunix;
 
   exports.Fragments = Fragments;
+  exports.Link = Link;
   exports.Navigate = Navigate;
   exports.Router = Router;
   exports.default = Ryunix;