@unsetsoft/ryunixjs 0.2.7 → 0.2.8-nightly.0

package/lib/dom.js

@@ -68,7 +68,7 @@ function createDom(fiber) {
 const isEvent = (key) => key.startsWith("on");
 const isProperty = (key) => key !== "children" && !isEvent(key);
 const isNew = (prev, next) => (key) => prev[key] !== next[key];
-const isGone = (prev, next) => (key) => !(key in next);
+const isGone = (next) => (key) => !(key in next);
 
 /**
  * The function updates the DOM by removing old event listeners and properties, and adding new ones
@@ -80,7 +80,7 @@ const isGone = (prev, next) => (key) => !(key in next);
 function updateDom(dom, prevProps, nextProps) {
   Object.keys(prevProps)
     .filter(isEvent)
-    .filter((key) => !(key in nextProps) || isNew(prevProps, nextProps)(key))
+    .filter((key) => isGone(nextProps)(key) || isNew(prevProps, nextProps)(key))
     .forEach((name) => {
       const eventType = name.toLowerCase().substring(2);
       dom.removeEventListener(eventType, prevProps[name]);
@@ -88,7 +88,7 @@ function updateDom(dom, prevProps, nextProps) {
 
   Object.keys(prevProps)
     .filter(isProperty)
-    .filter(isGone(prevProps, nextProps))
+    .filter(isGone(nextProps))
     .forEach((name) => {
       dom[name] = "";
     });
@@ -97,7 +97,15 @@ function updateDom(dom, prevProps, nextProps) {
     .filter(isProperty)
     .filter(isNew(prevProps, nextProps))
     .forEach((name) => {
-      dom[name] = nextProps[name];
+      if (name === "style") {
+        DomStyle(dom, nextProps.style);
+      } else if (name === "className") {
+        prevProps.className &&
+          dom.classList.remove(...prevProps.className.split(/\s+/));
+        dom.classList.add(...nextProps.className.split(/\s+/));
+      } else {
+        dom[name] = nextProps[name];
+      }
     });
 
   Object.keys(nextProps)
@@ -109,6 +117,18 @@ function updateDom(dom, prevProps, nextProps) {
     });
 }
 
+const reg = /[A-Z]/g;
+function DomStyle(dom, style) {
+  dom.style = Object.keys(style).reduce((acc, styleName) => {
+    const key = styleName.replace(reg, function (v) {
+      return "-" + v.toLowerCase();
+    });
+    acc += `${key}: ${style[styleName]};`;
+    return acc;
+  }, "");
+}
+
+
 /**
  * The function commits changes made to the virtual DOM to the actual DOM.
  */
@@ -210,6 +230,7 @@ function commitDeletion(fiber, domParent) {
 let containerRoot = null;
 
 /**
+ * @deprecated use Ryunix.init(root) instead.
  * The function creates a root container for a web application.
  * @param root - The parameter `root` is likely referring to an HTML element that will serve as the
  * root or container for a web application or component. The `createRoot` function takes this element
@@ -220,6 +241,17 @@ function createRoot(root) {
   containerRoot = root;
 }
 
+
+/**
+ * The function creates a reference to a DOM element with the specified ID. This will be used to initialize the app.
+ * @param root - The parameter "root" is the id of the HTML element that will serve as the container
+ * for the root element.
+ * @example createRoot("root") -> <div id="root" />
+*/
+function init(root) {
+  containerRoot = document.getElementById(root);
+}
+
 /**
  * The function renders an element into a container using a work-in-progress root.
  * @param element - The element parameter is the component or element that needs to be rendered in the
@@ -485,6 +517,7 @@ export {
   createElement,
   render,
   createRoot,
+  init,
   // Hooks
   useStore,
   useEffect,

package/package.json

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