@unsetsoft/ryunixjs 0.4.13-nightly.5 → 0.4.14

package/package.json

@@ -1,22 +1,32 @@
 {
   "name": "@unsetsoft/ryunixjs",
-  "version": "0.4.13-nightly.5",
+  "version": "0.4.14",
   "license": "MIT",
   "main": "./dist/Ryunix.js",
+  "types": "./dist/Ryunix.d.ts",
   "private": false,
   "bugs": {
     "url": "https://github.com/UnSetSoft/Ryunixjs/issues"
   },
   "homepage": "https://github.com/UnSetSoft/Ryunixjs#readme",
   "scripts": {
-    "build": "rollup ./src/main.js --file ./dist/Ryunix.js --format umd --name Ryunix",
-    "prepublishOnly": "npm run build",
-    "postinstall": "npm run build",
+    "build:ts": "npm run lint && tsc",
+    "build:js": "rollup ./src/main.js --file ./dist/Ryunix.js --format umd --name Ryunix",
+    "prepublishOnly": "npm run build:js",
+    "postinstall": "npm run build:js",
     "nightly:release": "npm publish --tag nightly",
-    "release": "npm publish"
+    "release": "npm publish",
+    "lint": "eslint . --ext .ts --fix --max-warnings=0 --config .eslintrc.js --no-eslintrc"
   },
   "dependencies": {
-    "rollup": "3.24.0"
+    "eslint": "8.56.0",
+    "@typescript-eslint/parser": "6.17.0",
+    "@typescript-eslint/eslint-plugin": "6.17.0",
+    "rollup": "4.9.2",
+    "ts-node": "10.9.2",
+    "tsup": "8.0.1",
+    "typescript": "5.3.3",
+    "tslint": "6.1.3"
   },
   "engines": {
     "node": ">=18.16.0"
@@ -26,5 +36,9 @@
   ],
   "publishConfig": {
     "registry": "https://registry.npmjs.org"
-  }
+  },
+  "files": [
+    "dist",
+    "src"
+  ]
 }

package/src/lib/commits.ts

@@ -0,0 +1,69 @@
+import { updateDom } from './dom'
+import { cancelEffects, runEffects } from './effects'
+import { EFFECT_TAGS, vars } from '../utils/index'
+
+/**
+ * The function commits changes made to the virtual DOM to the actual DOM.
+ */
+const commitRoot = () => {
+  vars.deletions.forEach(commitWork)
+  commitWork(vars.wipRoot.child)
+  vars.currentRoot = vars.wipRoot
+  vars.wipRoot = null
+}
+
+/**
+ * The function commits changes made to the DOM based on the effect tag of the fiber.
+ * @param fiber - A fiber is a unit of work in Ryunix's reconciliation process. It represents a
+ * component and its state at a particular point in time. The `commitWork` function takes a fiber as a
+ * parameter to commit the changes made during the reconciliation process to the actual DOM.
+ * @returns The function does not return anything, it performs side effects by manipulating the DOM.
+ */
+const commitWork = (fiber) => {
+  if (!fiber) {
+    return
+  }
+
+  let domParentFiber = fiber.parent
+  while (!domParentFiber.dom) {
+    domParentFiber = domParentFiber.parent
+  }
+  const domParent = domParentFiber.dom
+
+  if (fiber.effectTag === EFFECT_TAGS.PLACEMENT) {
+    if (fiber.dom != null) {
+      domParent.appendChild(fiber.dom)
+    }
+    runEffects(fiber)
+  } else if (fiber.effectTag === EFFECT_TAGS.UPDATE) {
+    cancelEffects(fiber)
+    if (fiber.dom != null) {
+      updateDom(fiber.dom, fiber.alternate.props, fiber.props)
+    }
+    runEffects(fiber)
+  } else if (fiber.effectTag === EFFECT_TAGS.DELETION) {
+    cancelEffects(fiber)
+    commitDeletion(fiber, domParent)
+    return
+  }
+
+  commitWork(fiber.child)
+  commitWork(fiber.sibling)
+}
+
+/**
+ * The function removes a fiber's corresponding DOM node from its parent node or recursively removes
+ * its child's DOM node until it finds a node to remove.
+ * @param fiber - a fiber node in a fiber tree, which represents a component or an element in the Ryunix
+ * application.
+ * @param domParent - The parent DOM element from which the fiber's DOM element needs to be removed.
+ */
+const commitDeletion = (fiber, domParent) => {
+  if (fiber.dom) {
+    domParent.removeChild(fiber.dom)
+  } else {
+    commitDeletion(fiber.child, domParent)
+  }
+}
+
+export { commitDeletion, commitWork, commitRoot }

package/src/lib/components.ts

@@ -0,0 +1,33 @@
+import { createDom } from './dom'
+import { reconcileChildren } from './reconciler'
+import { vars } from '../utils/index'
+
+/**
+ * This function updates a function component by setting up a work-in-progress fiber, resetting the
+ * hook index, creating an empty hooks array, rendering the component, and reconciling its children.
+ * @param fiber - The fiber parameter is an object that represents a node in the fiber tree. It
+ * contains information about the component, its props, state, and children. In this function, it is
+ * used to update the state of the component and its children.
+ */
+const updateFunctionComponent = (fiber) => {
+  vars.wipFiber = fiber
+  vars.hookIndex = 0
+  vars.wipFiber.hooks = []
+  const children = [fiber.type(fiber.props)]
+  reconcileChildren(fiber, children)
+}
+
+/**
+ * This function updates a host component's DOM element and reconciles its children.
+ * @param fiber - A fiber is a unit of work in Ryunix that represents a component and its state. It
+ * contains information about the component's type, props, and children, as well as pointers to other
+ * fibers in the tree.
+ */
+const updateHostComponent = (fiber) => {
+  if (!fiber.dom) {
+    fiber.dom = createDom(fiber)
+  }
+  reconcileChildren(fiber, fiber.props.children.flat())
+}
+
+export { updateFunctionComponent, updateHostComponent }

package/src/lib/createElement.ts

@@ -0,0 +1,61 @@
+import { RYUNIX_TYPES, STRINGS } from '../utils/index'
+
+/**
+ * The function creates a new element with the given type, props, and children.
+ * @param type - The type of the element to be created, such as "div", "span", "h1", etc.
+ * @param props - The `props` parameter is an object that contains the properties or attributes of the
+ * element being created. These properties can include things like `className`, `id`, `style`, and any
+ * other custom attributes that the user wants to add to the element. The `props` object is spread
+ * using the spread
+ * @param children - The `children` parameter is a rest parameter that allows the function to accept
+ * any number of arguments after the `props` parameter. These arguments will be treated as children
+ * elements of the created element. The `map` function is used to iterate over each child and create a
+ * new element if it is not
+ * @returns A JavaScript object with a `type` property and a `props` property. The `type` property is
+ * set to the `type` argument passed into the function, and the `props` property is an object that
+ * includes any additional properties passed in the `props` argument, as well as a `children` property
+ * that is an array of any child elements passed in the `...children` argument
+ */
+
+const createElement = (type, props, ...children) => {
+  return {
+    type,
+    props: {
+      ...props,
+      children: children
+        .flat()
+        .map((child) =>
+          typeof child === STRINGS.object ? child : createTextElement(child),
+        ),
+    },
+  }
+}
+
+/**
+ * The function creates a text element with a given text value.
+ * @param text - The text content that will be used to create a new text element.
+ * @returns A JavaScript object with a `type` property set to `"TEXT_ELEMENT"` and a `props` property
+ * that contains a `nodeValue` property set to the `text` parameter and an empty `children` array.
+ */
+
+const createTextElement = (text) => {
+  return {
+    type: RYUNIX_TYPES.TEXT_ELEMENT,
+    props: {
+      nodeValue: text,
+      children: [],
+    },
+  }
+}
+
+const Fragments = (props) => {
+  if (props.style) {
+    throw new Error('The style attribute is not supported')
+  }
+  if (props.className === '') {
+    throw new Error('className cannot be empty.')
+  }
+  return createElement('div', props, props.children)
+}
+
+export { createElement, createTextElement, Fragments }

package/src/lib/dom.js

@@ -1,5 +1,5 @@
 import { isEvent, isGone, isNew, isProperty } from './effects'
-import { RYUNIX_TYPES, STRINGS, reg } from '../utils/index'
+import { RYUNIX_TYPES, STRINGS, reg, OLD_STRINGS } from '../utils/index'
 
 /**
  * The function creates a new DOM element based on the given fiber object and updates its properties.
@@ -50,11 +50,22 @@ const updateDom = (dom, prevProps, nextProps) => {
     .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+/))

package/src/lib/dom.ts

@@ -0,0 +1,85 @@
+import { isEvent, isGone, isNew, isProperty } from './effects'
+import { RYUNIX_TYPES, STRINGS, reg } from '../utils/index'
+
+/**
+ * The function creates a new DOM element based on the given fiber object and updates its properties.
+ * @param fiber - The fiber parameter is an object that represents a node in the fiber tree. It
+ * contains information about the element type, props, and children of the node.
+ * @returns The `createDom` function returns a newly created DOM element based on the `fiber` object
+ * passed as an argument. If the `fiber` object represents a text element, a text node is created using
+ * `document.createTextNode("")`. Otherwise, a new element is created using
+ * `document.createElement(fiber.type)`. The function then calls the `updateDom` function to update the
+ * properties of the newly created
+ */
+const createDom = (fiber) => {
+  const dom =
+    fiber.type == RYUNIX_TYPES.TEXT_ELEMENT
+      ? document.createTextNode('')
+      : document.createElement(fiber.type)
+
+  updateDom(dom, {}, fiber.props)
+
+  return dom
+}
+
+/**
+ * The function updates the DOM by removing old event listeners and properties, and adding new ones
+ * based on the previous and next props.
+ * @param dom - The DOM element that needs to be updated with new props.
+ * @param prevProps - An object representing the previous props (properties) of a DOM element.
+ * @param nextProps - An object containing the new props that need to be updated in the DOM.
+ */
+const updateDom = (dom, prevProps, nextProps) => {
+  Object.keys(prevProps)
+    .filter(isEvent)
+    .filter((key) => isGone(nextProps)(key) || isNew(prevProps, nextProps)(key))
+    .forEach((name) => {
+      const eventType = name.toLowerCase().substring(2)
+      dom.removeEventListener(eventType, prevProps[name])
+    })
+
+  Object.keys(prevProps)
+    .filter(isProperty)
+    .filter(isGone(nextProps))
+    .forEach((name) => {
+      dom[name] = ''
+    })
+
+  Object.keys(nextProps)
+    .filter(isProperty)
+    .filter(isNew(prevProps, nextProps))
+    .forEach((name) => {
+      if (name === STRINGS.style) {
+        DomStyle(dom, nextProps.style)
+      } else if (name === 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+/))
+      } else {
+        dom[name] = nextProps[name]
+      }
+    })
+
+  Object.keys(nextProps)
+    .filter(isEvent)
+    .filter(isNew(prevProps, nextProps))
+    .forEach((name) => {
+      const eventType = name.toLowerCase().substring(2)
+      dom.addEventListener(eventType, nextProps[name])
+    })
+}
+
+const 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
+  }, '')
+}
+
+export { DomStyle, createDom, updateDom }

package/src/lib/effects.ts

@@ -0,0 +1,55 @@
+import { RYUNIX_TYPES, STRINGS } from '../utils/index'
+
+const isEvent = (key) => key.startsWith('on')
+const isProperty = (key) => key !== STRINGS.children && !isEvent(key)
+const isNew = (prev, next) => (key) => prev[key] !== next[key]
+const isGone = (next) => (key) => !(key in next)
+const hasDepsChanged = (prevDeps, nextDeps) =>
+  !prevDeps ||
+  !nextDeps ||
+  prevDeps.length !== nextDeps.length ||
+  prevDeps.some((dep, index) => dep !== nextDeps[index])
+
+/**
+ * The function cancels all effect hooks in a given fiber.
+ * @param fiber - The "fiber" parameter is likely referring to a data structure used in React.js to
+ * represent a component and its state. It contains information about the component's props, state, and
+ * children, as well as metadata used by React to manage updates and rendering. The function
+ * "cancelEffects" is likely intended
+ */
+const cancelEffects = (fiber) => {
+  if (fiber.hooks) {
+    fiber.hooks
+      .filter((hook) => hook.tag === RYUNIX_TYPES.RYUNIX_EFFECT && hook.cancel)
+      .forEach((effectHook) => {
+        effectHook.cancel()
+      })
+  }
+}
+
+/**
+ * The function runs all effect hooks in a given fiber.
+ * @param fiber - The "fiber" parameter is likely referring to a data structure used in the
+ * implementation of a fiber-based reconciliation algorithm, such as the one used in React. A fiber
+ * represents a unit of work that needs to be performed by the reconciliation algorithm, and it
+ * contains information about a component and its children, as
+ */
+const runEffects = (fiber) => {
+  if (fiber.hooks) {
+    fiber.hooks
+      .filter((hook) => hook.tag === RYUNIX_TYPES.RYUNIX_EFFECT && hook.effect)
+      .forEach((effectHook) => {
+        effectHook.cancel = effectHook.effect()
+      })
+  }
+}
+
+export {
+  runEffects,
+  cancelEffects,
+  isEvent,
+  isProperty,
+  isNew,
+  isGone,
+  hasDepsChanged,
+}

package/src/lib/hooks.js

@@ -74,6 +74,11 @@ const useEffect = (effect, deps) => {
   vars.hookIndex++
 }
 
+/**
+ * The `useQuery` function is a custom hook in JavaScript that retrieves query parameters from the URL
+ * and stores them in a hook for easy access.
+ * @returns The `useQuery` function returns the `query` property of the `hook` object.
+ */
 const useQuery = () => {
   vars.hookIndex++
 

package/src/lib/hooks.ts

@@ -0,0 +1,80 @@
+import { hasDepsChanged } from './effects'
+import { RYUNIX_TYPES, STRINGS, vars } from '../utils/index'
+
+const useStore = (initial) => {
+  const oldHook =
+    vars.wipFiber.alternate &&
+    vars.wipFiber.alternate.hooks &&
+    vars.wipFiber.alternate.hooks[vars.hookIndex]
+  const hook = {
+    state: oldHook ? oldHook.state : initial,
+    queue: [],
+  }
+
+  const actions = oldHook ? oldHook.queue : []
+  actions.forEach((action) => {
+    hook.state =
+      typeof action === STRINGS.function ? action(hook.state) : action
+  })
+
+  const setState = (action) => {
+    hook.queue.push(action)
+    vars.wipRoot = {
+      dom: vars?.currentRoot?.dom,
+      props: vars?.currentRoot?.props,
+      alternate: vars?.currentRoot,
+    }
+    vars.nextUnitOfWork = vars.wipRoot
+    vars.deletions = []
+  }
+
+  vars.wipFiber.hooks.push(hook)
+  vars.hookIndex++
+  return [hook.state, setState]
+}
+
+const useEffect = (effect, deps) => {
+  const oldHook =
+    vars.wipFiber.alternate &&
+    vars.wipFiber.alternate.hooks &&
+    vars.wipFiber.alternate.hooks[vars.hookIndex]
+
+  const hasChanged = hasDepsChanged(oldHook ? oldHook.deps : undefined, deps)
+
+  const hook = {
+    tag: RYUNIX_TYPES.RYUNIX_EFFECT,
+    effect: hasChanged ? effect : null,
+    cancel: hasChanged && oldHook && oldHook.cancel,
+    deps,
+  }
+
+  vars.wipFiber.hooks.push(hook)
+  vars.hookIndex++
+}
+
+const useQuery = () => {
+  vars.hookIndex++
+
+  const oldHook =
+    vars.wipFiber.alternate &&
+    vars.wipFiber.alternate.hooks &&
+    vars.wipFiber.alternate.hooks[vars.hookIndex]
+
+  const hasOld = oldHook ? oldHook : undefined
+
+  const urlSearchParams = new URLSearchParams(window.location.search)
+
+  const params = Object.fromEntries(urlSearchParams.entries())
+  const Query = hasOld ? hasOld : params
+
+  const hook = {
+    tag: RYUNIX_TYPES.RYUNIX_EFFECT,
+    query: Query,
+  }
+
+  vars.wipFiber.hooks.push(hook)
+
+  return hook.query
+}
+
+export { useStore, useEffect, useQuery }

package/src/lib/index.ts

@@ -0,0 +1,23 @@
+import { createElement, Fragments } from './createElement'
+import { render, init } from './render'
+import { useStore, useEffect, useQuery } from './hooks'
+import { Router, Navigate, Link } from './navigation'
+import * as Dom from './dom'
+import * as Workers from './workers'
+import * as Reconciler from './reconciler'
+import * as Components from './components'
+import * as Commits from './commits'
+
+export { useStore, useEffect, useQuery, Fragments, Router, Navigate, Link }
+
+export default {
+  createElement,
+  render,
+  init,
+  Fragments,
+  Dom,
+  Workers,
+  Reconciler,
+  Components,
+  Commits,
+}

package/src/lib/navigation.js

@@ -1,6 +1,6 @@
 import { useStore, useEffect } from './hooks'
 import { createElement } from './createElement'
-const Router = ({ path, component }) => {
+const Router = ({ path, component, children }) => {
   const [currentPath, setCurrentPath] = useStore(window.location.pathname)
 
   useEffect(() => {
@@ -13,13 +13,15 @@ const Router = ({ path, component }) => {
     window.addEventListener('popstate', onLocationChange)
 
     return () => {
-      window.removeEventListener('navigate', onLocationChange)
-      window.removeEventListener('pushsatate', onLocationChange)
-      window.removeEventListener('popstate', onLocationChange)
+      setTimeout(() => {
+        window.removeEventListener('navigate', onLocationChange)
+        window.removeEventListener('pushsatate', onLocationChange)
+        window.removeEventListener('popstate', onLocationChange)
+      }, 100)
     }
   }, [currentPath])
 
-  return currentPath === path && component()
+  return currentPath === path ? component() : null
 }
 
 const Navigate = () => {
@@ -37,8 +39,9 @@ const Navigate = () => {
    */
   const push = (to, state = {}) => {
     if (window.location.pathname === to) return
+
     window.history.pushState(state, '', to)
-    const navigationEvent = new Event('pushsatate')
+    const navigationEvent = new PopStateEvent('popstate')
     window.dispatchEvent(navigationEvent)
   }
 
@@ -65,6 +68,10 @@ const Link = (props) => {
     throw new Error("Missig 'to' param.")
   }
   const preventReload = (event) => {
+    if (event.metaKey || event.ctrlKey) {
+      return
+    }
+
     event.preventDefault()
     const { push } = Navigate()
     push(props.to)

package/src/lib/navigation.ts

@@ -0,0 +1,74 @@
+import { useStore, useEffect } from './hooks'
+import { createElement } from './createElement'
+
+const Router = ({ path, component }) => {
+  const [currentPath, setCurrentPath] = useStore(window.location.pathname)
+
+  useEffect(() => {
+    const onLocationChange = () => {
+      setCurrentPath(() => window.location.pathname)
+    }
+
+    window.addEventListener('navigate', onLocationChange)
+    window.addEventListener('pushstate', onLocationChange)
+    window.addEventListener('popstate', onLocationChange)
+
+    return () => {
+      window.removeEventListener('navigate', onLocationChange)
+      window.removeEventListener('pushstate', onLocationChange)
+      window.removeEventListener('popstate', onLocationChange)
+    }
+  }, [currentPath])
+
+  return currentPath === path ? component() : null
+}
+
+const Navigate = () => {
+  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.',
+    )
+  }
+  if (props.to === '') {
+    throw new Error("'to=' cannot be empty.")
+  }
+  if (props.className === '') {
+    throw new Error('className cannot be empty.')
+  }
+  if (props.label === '' && !props.children) {
+    throw new Error("'label=' cannot be empty.")
+  }
+
+  if (!props.to) {
+    throw new Error("Missing 'to' param.")
+  }
+
+  const preventReload = (event) => {
+    event.preventDefault()
+    const { push } = Navigate()
+    push(props.to)
+  }
+
+  const anchor = {
+    href: props.to,
+    onClick: preventReload,
+    ...props,
+  }
+
+  const children = props.label ? props.label : props.children
+
+  return createElement('a', anchor, children)
+}
+
+export { Router, Navigate, Link }

package/src/lib/reconciler.ts

@@ -0,0 +1,62 @@
+import { EFFECT_TAGS, vars } from '../utils/index'
+
+/**
+ * This function reconciles the children of a fiber node with a new set of elements, creating new
+ * fibers for new elements, updating existing fibers for elements with the same type, and marking old
+ * fibers for deletion if they are not present in the new set of elements.
+ * @param wipFiber - A work-in-progress fiber object representing a component or element in the virtual
+ * DOM tree.
+ * @param elements - an array of elements representing the new children to be rendered in the current
+ * fiber's subtree
+ */
+const reconcileChildren = (wipFiber, elements) => {
+  let index = 0
+  let oldFiber = wipFiber.alternate && wipFiber.alternate.child
+  let prevSibling
+
+  while (index < elements.length || oldFiber != null) {
+    const element = elements[index]
+    let newFiber
+
+    const sameType = oldFiber && element && element.type == oldFiber.type
+
+    if (sameType) {
+      newFiber = {
+        type: oldFiber.type,
+        props: element.props,
+        dom: oldFiber.dom,
+        parent: wipFiber,
+        alternate: oldFiber,
+        effectTag: EFFECT_TAGS.UPDATE,
+      }
+    }
+    if (element && !sameType) {
+      newFiber = {
+        type: element.type,
+        props: element.props,
+        dom: null,
+        parent: wipFiber,
+        alternate: null,
+        effectTag: EFFECT_TAGS.PLACEMENT,
+      }
+    }
+    if (oldFiber && !sameType) {
+      oldFiber.effectTag = EFFECT_TAGS.DELETION
+      vars.deletions.push(oldFiber)
+    }
+
+    if (oldFiber) {
+      oldFiber = oldFiber.sibling
+    }
+
+    if (index === 0) {
+      wipFiber.child = newFiber
+    } else if (element) {
+      prevSibling.sibling = newFiber
+    }
+
+    prevSibling = newFiber
+    index++
+  }
+}
+export { reconcileChildren }