@unsetsoft/ryunixjs 1.0.0-alpha.0

package/dist/Ryunix.js

@@ -0,0 +1,187 @@
+(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 });
+
+}));

package/lib/component.js

@@ -0,0 +1,16 @@
+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/dom-utils.js

@@ -0,0 +1,25 @@
+/**
+ * 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.
+ */
+export 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]);
+  });
+}

package/lib/element.js

@@ -0,0 +1,37 @@
+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".
+ */
+export 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: []
+  });
+}
+export { TEXT_ELEMENT };

package/lib/reconciler.js

@@ -0,0 +1,89 @@
+import { updateDomProperties } from "./dom-utils";
+import { TEXT_ELEMENT } from "./element";
+let rootInstance = null;
+export function render(element, parentDom) {
+  const prevInstance = rootInstance;
+  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) {
+    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);
+}

package/lib/ryunix.js

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

package/package.json

@@ -0,0 +1,14 @@
+{
+  "name": "@unsetsoft/ryunixjs",
+  "version": "1.0.0-alpha.0",
+  "license": "MIT",
+  "main": "./dist/Ryunix.js",
+  "private": false,
+  "scripts": {
+    "build": "rollup ./lib/ryunix.js --file ./dist/Ryunix.js --format umd --name Ryunix",
+    "prepublishOnly": "yarn build"
+  },
+  "devDependencies": {
+    "rollup": "3.24.0"
+  }
+}