@unsetsoft/ryunixjs 0.1.2-alpha.1 → 0.1.4

package/README.md

@@ -0,0 +1,25 @@
+# RyunixJS
+
+## What is RyunixJS?
+
+Is a ReactJS Clone! Even lighter, however, at a very early stage for production use. 
+
+## Install & Usage
+
+`npm install @unsetsoft/create-ryunix-app -g`
+
+### Obtain and download the template
+
+`create-ryunix-app get`
+
+### Rename your final folder
+
+`create-ryunix-app get --dirname awasome-ryunix-app`
+
+## Bugs?
+
+You can create an issue on GitHub.
+
+## Do you want to contribute?
+
+Fork a send a pull request!

package/lib/component.js

@@ -2,15 +2,5 @@ import { reconcile } from "./reconciler";
 export class Component {
   constructor(props) {
     this.props = props;
-    this.state = this.state || {};
-  }
-  setState(partialState) {
-    this.state = Object.assign({}, this.state, partialState);
-    updateInstance(this.__internalInstance);
   }
 }
-function updateInstance(internalInstance) {
-  const parentDom = internalInstance.dom.parentNode;
-  const element = internalInstance.element;
-  reconcile(parentDom, internalInstance, element);
-}

package/lib/hooks.js

@@ -0,0 +1,5 @@
+const useLoaded = (fn) => {
+  return document.addEventListener("DOMContentLoaded", fn);
+};
+
+export { useLoaded };

package/lib/reconciler.js

@@ -6,33 +6,42 @@ export function render(element, parentDom) {
   const nextInstance = reconcile(parentDom, prevInstance, element);
   rootInstance = nextInstance;
 }
+
 export function reconcile(parentDom, instance, element) {
   if (instance === null) {
     const newInstance = instantiate(element);
     parentDom.appendChild(newInstance.dom);
     return newInstance;
-  } else if (element == null) {
+  }
+
+  if (element == null) {
     parentDom.removeChild(instance.dom);
     return null;
-  } else if (instance.element.type !== element.type) {
+  }
+
+  if (instance.element.type !== element.type) {
     const newInstance = instantiate(element);
-    parentDom.replaceChild(newInstance.dom, instance.dom);
+    parentDom.replaceChild(instance.dom, newInstance.dom);
     return newInstance;
-  } else if (typeof element.type === "string") {
+  }
+
+  if (typeof element.type === "string") {
     instance.childInstances = reconcileChildren(instance, element);
     instance.element = element;
     return instance;
-  } else {
-    instance.publicInstance.props = element.props;
-    const childElement = instance.publicInstance.render();
-    const oldChildInstance = instance.childInstance;
-    const childInstance = reconcile(parentDom, oldChildInstance, childElement);
-    instance.dom = childInstance.dom;
-    instance.childInstance = childInstance;
-    instance.element = element;
-    return instance;
   }
+
+  // Si no es una cadena, asumimos que es un componente personalizado
+  instance.publicInstance.props = element.props;
+  const childElement = instance.publicInstance.render();
+  const oldChildInstance = instance.childInstance;
+  const childInstance = reconcile(parentDom, oldChildInstance, childElement);
+  instance.dom = childInstance.dom;
+  instance.childInstance = childInstance;
+  instance.element = element;
+  return instance;
 }
+
 function instantiate(element) {
   const { type, props } = element;
   const isDomElement = typeof type === "string";
@@ -73,17 +82,21 @@ function createPublicInstance(element, internalInstance) {
   publicInstance.__internalInstance = internalInstance;
   return publicInstance;
 }
+
 function reconcileChildren(instance, element) {
-  const dom = instance.dom;
-  const childInstances = instance.childInstances;
+  const { dom, childInstances } = instance;
   const nextChildElements = element.props.children || [];
+
   const newChildInstances = [];
+
   const count = Math.max(childInstances.length, nextChildElements.length);
+
   for (let i = 0; i < count; i++) {
     const childInstance = childInstances[i];
     const childElement = nextChildElements[i];
     const newChildInstance = reconcile(dom, childInstance, childElement);
     newChildInstances.push(newChildInstance);
   }
-  return newChildInstances.filter((instance) => instance != null);
-}
+
+  return newChildInstances.filter(Boolean);
+}

package/lib/ryunix.js

@@ -1,11 +1,10 @@
 import { render } from "./reconciler";
 import { createElement } from "./element";
 import { Component } from "./component";
-import hooks from "./hooks/index.js";
-export { createElement, render, Component, hooks };
+import { useLoaded } from "./hooks";
+export { createElement, render, Component, useLoaded };
 export default {
   render,
   createElement,
   Component,
-  hooks,
 };

package/package.json

@@ -1,14 +1,21 @@
 {
   "name": "@unsetsoft/ryunixjs",
-  "version": "0.1.2-alpha.1",
+  "version": "0.1.4",
   "license": "MIT",
   "main": "./dist/Ryunix.js",
   "private": false,
+  "bugs": {
+    "url": "https://github.com/UnSetSoft/Ryunixjs/issues"
+  },
+  "homepage": "https://github.com/UnSetSoft/Ryunixjs#readme",
   "scripts": {
     "build": "rollup ./lib/ryunix.js --file ./dist/Ryunix.js --format umd --name Ryunix",
     "prepublishOnly": "yarn build"
   },
   "devDependencies": {
     "rollup": "3.24.0"
+  },
+  "engines": {
+    "node": ">=18.16.0"
   }
 }

package/lib/hooks/index.js

@@ -1,3 +0,0 @@
-import Store from "./store";
-const useStore = (val) => new Store(val).hook();
-export default { useStore };

package/lib/hooks/store.js

@@ -1,20 +0,0 @@
-class Store {
-  constructor(defvalue) {
-    this.defvalue = defvalue;
-  }
-  /* `setValue` is a method that takes in a parameter `newValue`. The arrow function syntax `=>` is
-  used to define the function. Inside the function, the `defvalue` property of the `Store` instance
-  is set to the `newValue` parameter. This means that when `setValue` is called with a new value, it
-  updates the `defvalue` property of the `Store` instance to that new value. */
-  setValue = (newValue) => (this.defvalue = newValue);
-
-  /* `hook` is a method that returns an array containing two functions: `getValue` and `setValue`.
-  These functions can be used to get and set the value of the `defvalue` property of the `Store`
-  class instance. This is useful for implementing state management in React functional components
-  using the `useState` hook. */
-  hook = () => {
-    return [this.defvalue, this.setValue];
-  };
-}
-
-export default Store;