@unsetsoft/ryunixjs 0.1.0 → 0.1.2-alpha.1

package/lib/hooks/index.js

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

package/lib/hooks/store.js

@@ -0,0 +1,20 @@
+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;

package/lib/ryunix.js

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@unsetsoft/ryunixjs",
-  "version": "0.1.0",
+  "version": "0.1.2-alpha.1",
   "license": "MIT",
   "main": "./dist/Ryunix.js",
   "private": false,

package/dist/Ryunix.js

@@ -1,187 +0,0 @@
-(function (global, factory) {
-  typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports) :
-  typeof define === 'function' && define.amd ? define(['exports'], factory) :
-  (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory(global.Ryunix = {}));
-})(this, (function (exports) { 'use strict';
-
-  /**
-   * This function updates the properties and event listeners of a DOM element based on the previous and
-   * next props passed as arguments.
-   * @param dom - The DOM element that needs to be updated with new properties.
-   * @param prevProps - An object representing the previous properties of a DOM element.
-   * @param nextProps - An object containing the new props that need to be updated on the DOM element.
-   */
-  function updateDomProperties(dom, prevProps, nextProps) {
-    const isEvent = name => name.startsWith("on");
-    const isAttribute = name => !isEvent(name) && name != "children";
-    Object.keys(prevProps).filter(isEvent).forEach(name => {
-      const eventType = name.toLowerCase().substring(2);
-      dom.removeEventListener(eventType, prevProps[name]);
-    });
-    Object.keys(prevProps).filter(isAttribute).forEach(name => {
-      dom[name] = null;
-    });
-    Object.keys(nextProps).filter(isAttribute).forEach(name => {
-      dom[name] = nextProps[name];
-    });
-    Object.keys(nextProps).filter(isEvent).forEach(name => {
-      const eventType = name.toLowerCase().substring(2);
-      dom.addEventListener(eventType, nextProps[name]);
-    });
-  }
-
-  const TEXT_ELEMENT = "TEXT";
-
-  /**
-   * This function creates a new element with the given type, configuration object, and children.
-   * @param type - The type of the element being created (e.g. "div", "span", "h1", etc.).
-   * @param configObject - The `configObject` parameter is an object that contains the properties and
-   * values for the element's attributes. These attributes can include things like `className`, `id`,
-   * `style`, and any other custom attributes that the user wants to add to the element.
-   * @param args - The `args` parameter is a rest parameter that allows the function to accept any number
-   * of additional arguments after the `configObject` parameter. These additional arguments are used as
-   * children elements for the created element.
-   * @returns An object with two properties: "type" and "props".
-   */
-  function createElement(type, configObject, ...args) {
-    const props = Object.assign({}, configObject);
-    const hasChildren = args.length > 0;
-    const nodeChildren = hasChildren ? [...args] : [];
-    props.children = nodeChildren.filter(Boolean).map(c => c instanceof Object ? c : createTextElement(c));
-    return {
-      type,
-      props
-    };
-  }
-
-  /**
-   * The function creates a text element with a given node value and an empty array of children.
-   * @param nodeValue - The value of the text node that will be created.
-   * @returns The function `createTextElement` is returning an element object with a `nodeValue` property
-   * and an empty `children` array. This element object represents a text node in the virtual DOM.
-   */
-  function createTextElement(nodeValue) {
-    return createElement(TEXT_ELEMENT, {
-      nodeValue,
-      children: []
-    });
-  }
-
-  let rootInstance = null;
-  function render(element, parentDom) {
-    const prevInstance = rootInstance;
-    const nextInstance = reconcile(parentDom, prevInstance, element);
-    rootInstance = nextInstance;
-  }
-  function reconcile(parentDom, instance, element) {
-    if (instance === null) {
-      const newInstance = instantiate(element);
-      parentDom.appendChild(newInstance.dom);
-      return newInstance;
-    } else if (element == null) {
-      parentDom.removeChild(instance.dom);
-      return null;
-    } else if (instance.element.type !== element.type) {
-      const newInstance = instantiate(element);
-      parentDom.replaceChild(newInstance.dom, instance.dom);
-      return newInstance;
-    } else 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;
-    }
-  }
-  function instantiate(element) {
-    const { type, props } = element;
-    const isDomElement = typeof type === "string";
-    if (isDomElement) {
-      const isTextElement = type === TEXT_ELEMENT;
-      const dom = isTextElement
-        ? document.createTextNode("")
-        : document.createElement(type);
-      updateDomProperties(dom, [], props);
-      const childElements = props.children || [];
-      const childInstances = childElements.map(instantiate);
-      const childDoms = childInstances.map((childInstance) => childInstance.dom);
-      childDoms.forEach((childDom) => dom.appendChild(childDom));
-      const instance = {
-        dom,
-        element,
-        childInstances,
-      };
-      return instance;
-    } else {
-      const instance = {};
-      const publicInstance = createPublicInstance(element, instance);
-      const childElement = publicInstance.render();
-      const childInstance = instantiate(childElement);
-      const dom = childInstance.dom;
-      Object.assign(instance, {
-        dom,
-        element,
-        childInstance,
-        publicInstance,
-      });
-      return instance;
-    }
-  }
-  function createPublicInstance(element, internalInstance) {
-    const { type, props } = element;
-    const publicInstance = new type(props);
-    publicInstance.__internalInstance = internalInstance;
-    return publicInstance;
-  }
-  function reconcileChildren(instance, element) {
-    const dom = instance.dom;
-    const childInstances = instance.childInstances;
-    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);
-  }
-
-  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);
-  }
-
-  var ryunix = {
-    render,
-    createElement,
-    Component,
-  };
-
-  exports.Component = Component;
-  exports.createElement = createElement;
-  exports.default = ryunix;
-  exports.render = render;
-
-  Object.defineProperty(exports, '__esModule', { value: true });
-
-}));