@unsetsoft/ryunixjs 0.4.14 → 0.4.15-nightly.10

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/dist/Ryunix.js CHANGED
@@ -40,6 +40,16 @@
40
40
  DELETION: Symbol(),
41
41
  });
42
42
 
43
+ const cloneElement = (element, props) => {
44
+ return {
45
+ ...element,
46
+ props: {
47
+ ...element.props,
48
+ ...props,
49
+ },
50
+ }
51
+ };
52
+
43
53
  /**
44
54
  * The function creates a new element with the given type, props, and children.
45
55
  * @param type - The type of the element to be created, such as "div", "span", "h1", etc.
@@ -64,38 +74,19 @@
64
74
  ...props,
65
75
  children: children
66
76
  .flat()
67
- .map((child) =>
68
- typeof child === STRINGS.object ? child : createTextElement(child),
77
+ .map((child, index) =>
78
+ typeof child === STRINGS.object && child !== null
79
+ ? cloneElement(child, { key: index })
80
+ : child,
69
81
  ),
70
82
  },
71
83
  }
72
84
  };
73
85
 
74
- /**
75
- * The function creates a text element with a given text value.
76
- * @param text - The text content that will be used to create a new text element.
77
- * @returns A JavaScript object with a `type` property set to `"TEXT_ELEMENT"` and a `props` property
78
- * that contains a `nodeValue` property set to the `text` parameter and an empty `children` array.
79
- */
80
-
81
- const createTextElement = (text) => {
82
- return {
83
- type: RYUNIX_TYPES.TEXT_ELEMENT,
84
- props: {
85
- nodeValue: text,
86
- children: [],
87
- },
88
- }
89
- };
90
-
91
- const Fragments = (props) => {
92
- if (props.style) {
93
- throw new Error('The style attribute is not supported')
94
- }
95
- if (props.className === '') {
96
- throw new Error('className cannot be empty.')
97
- }
98
- return createElement('div', props, props.children)
86
+ const Fragments = ({ children }) => {
87
+ return children.map((c, index) =>
88
+ createElement(c.type, c.props, ...c.props.children),
89
+ )
99
90
  };
100
91
 
101
92
  /**
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@unsetsoft/ryunixjs",
3
- "version": "0.4.14",
3
+ "version": "0.4.15-nightly.10",
4
4
  "license": "MIT",
5
5
  "main": "./dist/Ryunix.js",
6
6
  "types": "./dist/Ryunix.d.ts",
@@ -1,5 +1,15 @@
1
1
  import { RYUNIX_TYPES, STRINGS } from '../utils/index'
2
2
 
3
+ const cloneElement = (element, props) => {
4
+ return {
5
+ ...element,
6
+ props: {
7
+ ...element.props,
8
+ ...props,
9
+ },
10
+ }
11
+ }
12
+
3
13
  /**
4
14
  * The function creates a new element with the given type, props, and children.
5
15
  * @param type - The type of the element to be created, such as "div", "span", "h1", etc.
@@ -24,8 +34,10 @@ const createElement = (type, props, ...children) => {
24
34
  ...props,
25
35
  children: children
26
36
  .flat()
27
- .map((child) =>
28
- typeof child === STRINGS.object ? child : createTextElement(child),
37
+ .map((child, index) =>
38
+ typeof child === STRINGS.object && child !== null
39
+ ? cloneElement(child, { key: index })
40
+ : child,
29
41
  ),
30
42
  },
31
43
  }
@@ -48,14 +60,10 @@ const createTextElement = (text) => {
48
60
  }
49
61
  }
50
62
 
51
- const Fragments = (props) => {
52
- if (props.style) {
53
- throw new Error('The style attribute is not supported')
54
- }
55
- if (props.className === '') {
56
- throw new Error('className cannot be empty.')
57
- }
58
- return createElement('div', props, props.children)
63
+ const Fragments = ({ children }) => {
64
+ return children.map((c, index) =>
65
+ createElement(c.type, c.props, ...c.props.children),
66
+ )
59
67
  }
60
68
 
61
69
  export { createElement, createTextElement, Fragments }
@@ -1,69 +0,0 @@
1
- import { updateDom } from './dom'
2
- import { cancelEffects, runEffects } from './effects'
3
- import { EFFECT_TAGS, vars } from '../utils/index'
4
-
5
- /**
6
- * The function commits changes made to the virtual DOM to the actual DOM.
7
- */
8
- const commitRoot = () => {
9
- vars.deletions.forEach(commitWork)
10
- commitWork(vars.wipRoot.child)
11
- vars.currentRoot = vars.wipRoot
12
- vars.wipRoot = null
13
- }
14
-
15
- /**
16
- * The function commits changes made to the DOM based on the effect tag of the fiber.
17
- * @param fiber - A fiber is a unit of work in Ryunix's reconciliation process. It represents a
18
- * component and its state at a particular point in time. The `commitWork` function takes a fiber as a
19
- * parameter to commit the changes made during the reconciliation process to the actual DOM.
20
- * @returns The function does not return anything, it performs side effects by manipulating the DOM.
21
- */
22
- const commitWork = (fiber) => {
23
- if (!fiber) {
24
- return
25
- }
26
-
27
- let domParentFiber = fiber.parent
28
- while (!domParentFiber.dom) {
29
- domParentFiber = domParentFiber.parent
30
- }
31
- const domParent = domParentFiber.dom
32
-
33
- if (fiber.effectTag === EFFECT_TAGS.PLACEMENT) {
34
- if (fiber.dom != null) {
35
- domParent.appendChild(fiber.dom)
36
- }
37
- runEffects(fiber)
38
- } else if (fiber.effectTag === EFFECT_TAGS.UPDATE) {
39
- cancelEffects(fiber)
40
- if (fiber.dom != null) {
41
- updateDom(fiber.dom, fiber.alternate.props, fiber.props)
42
- }
43
- runEffects(fiber)
44
- } else if (fiber.effectTag === EFFECT_TAGS.DELETION) {
45
- cancelEffects(fiber)
46
- commitDeletion(fiber, domParent)
47
- return
48
- }
49
-
50
- commitWork(fiber.child)
51
- commitWork(fiber.sibling)
52
- }
53
-
54
- /**
55
- * The function removes a fiber's corresponding DOM node from its parent node or recursively removes
56
- * its child's DOM node until it finds a node to remove.
57
- * @param fiber - a fiber node in a fiber tree, which represents a component or an element in the Ryunix
58
- * application.
59
- * @param domParent - The parent DOM element from which the fiber's DOM element needs to be removed.
60
- */
61
- const commitDeletion = (fiber, domParent) => {
62
- if (fiber.dom) {
63
- domParent.removeChild(fiber.dom)
64
- } else {
65
- commitDeletion(fiber.child, domParent)
66
- }
67
- }
68
-
69
- export { commitDeletion, commitWork, commitRoot }
@@ -1,33 +0,0 @@
1
- import { createDom } from './dom'
2
- import { reconcileChildren } from './reconciler'
3
- import { vars } from '../utils/index'
4
-
5
- /**
6
- * This function updates a function component by setting up a work-in-progress fiber, resetting the
7
- * hook index, creating an empty hooks array, rendering the component, and reconciling its children.
8
- * @param fiber - The fiber parameter is an object that represents a node in the fiber tree. It
9
- * contains information about the component, its props, state, and children. In this function, it is
10
- * used to update the state of the component and its children.
11
- */
12
- const updateFunctionComponent = (fiber) => {
13
- vars.wipFiber = fiber
14
- vars.hookIndex = 0
15
- vars.wipFiber.hooks = []
16
- const children = [fiber.type(fiber.props)]
17
- reconcileChildren(fiber, children)
18
- }
19
-
20
- /**
21
- * This function updates a host component's DOM element and reconciles its children.
22
- * @param fiber - A fiber is a unit of work in Ryunix that represents a component and its state. It
23
- * contains information about the component's type, props, and children, as well as pointers to other
24
- * fibers in the tree.
25
- */
26
- const updateHostComponent = (fiber) => {
27
- if (!fiber.dom) {
28
- fiber.dom = createDom(fiber)
29
- }
30
- reconcileChildren(fiber, fiber.props.children.flat())
31
- }
32
-
33
- export { updateFunctionComponent, updateHostComponent }
@@ -1,61 +0,0 @@
1
- import { RYUNIX_TYPES, STRINGS } from '../utils/index'
2
-
3
- /**
4
- * The function creates a new element with the given type, props, and children.
5
- * @param type - The type of the element to be created, such as "div", "span", "h1", etc.
6
- * @param props - The `props` parameter is an object that contains the properties or attributes of the
7
- * element being created. These properties can include things like `className`, `id`, `style`, and any
8
- * other custom attributes that the user wants to add to the element. The `props` object is spread
9
- * using the spread
10
- * @param children - The `children` parameter is a rest parameter that allows the function to accept
11
- * any number of arguments after the `props` parameter. These arguments will be treated as children
12
- * elements of the created element. The `map` function is used to iterate over each child and create a
13
- * new element if it is not
14
- * @returns A JavaScript object with a `type` property and a `props` property. The `type` property is
15
- * set to the `type` argument passed into the function, and the `props` property is an object that
16
- * includes any additional properties passed in the `props` argument, as well as a `children` property
17
- * that is an array of any child elements passed in the `...children` argument
18
- */
19
-
20
- const createElement = (type, props, ...children) => {
21
- return {
22
- type,
23
- props: {
24
- ...props,
25
- children: children
26
- .flat()
27
- .map((child) =>
28
- typeof child === STRINGS.object ? child : createTextElement(child),
29
- ),
30
- },
31
- }
32
- }
33
-
34
- /**
35
- * The function creates a text element with a given text value.
36
- * @param text - The text content that will be used to create a new text element.
37
- * @returns A JavaScript object with a `type` property set to `"TEXT_ELEMENT"` and a `props` property
38
- * that contains a `nodeValue` property set to the `text` parameter and an empty `children` array.
39
- */
40
-
41
- const createTextElement = (text) => {
42
- return {
43
- type: RYUNIX_TYPES.TEXT_ELEMENT,
44
- props: {
45
- nodeValue: text,
46
- children: [],
47
- },
48
- }
49
- }
50
-
51
- const Fragments = (props) => {
52
- if (props.style) {
53
- throw new Error('The style attribute is not supported')
54
- }
55
- if (props.className === '') {
56
- throw new Error('className cannot be empty.')
57
- }
58
- return createElement('div', props, props.children)
59
- }
60
-
61
- export { createElement, createTextElement, Fragments }
package/src/lib/dom.ts DELETED
@@ -1,85 +0,0 @@
1
- import { isEvent, isGone, isNew, isProperty } from './effects'
2
- import { RYUNIX_TYPES, STRINGS, reg } from '../utils/index'
3
-
4
- /**
5
- * The function creates a new DOM element based on the given fiber object and updates its properties.
6
- * @param fiber - The fiber parameter is an object that represents a node in the fiber tree. It
7
- * contains information about the element type, props, and children of the node.
8
- * @returns The `createDom` function returns a newly created DOM element based on the `fiber` object
9
- * passed as an argument. If the `fiber` object represents a text element, a text node is created using
10
- * `document.createTextNode("")`. Otherwise, a new element is created using
11
- * `document.createElement(fiber.type)`. The function then calls the `updateDom` function to update the
12
- * properties of the newly created
13
- */
14
- const createDom = (fiber) => {
15
- const dom =
16
- fiber.type == RYUNIX_TYPES.TEXT_ELEMENT
17
- ? document.createTextNode('')
18
- : document.createElement(fiber.type)
19
-
20
- updateDom(dom, {}, fiber.props)
21
-
22
- return dom
23
- }
24
-
25
- /**
26
- * The function updates the DOM by removing old event listeners and properties, and adding new ones
27
- * based on the previous and next props.
28
- * @param dom - The DOM element that needs to be updated with new props.
29
- * @param prevProps - An object representing the previous props (properties) of a DOM element.
30
- * @param nextProps - An object containing the new props that need to be updated in the DOM.
31
- */
32
- const updateDom = (dom, prevProps, nextProps) => {
33
- Object.keys(prevProps)
34
- .filter(isEvent)
35
- .filter((key) => isGone(nextProps)(key) || isNew(prevProps, nextProps)(key))
36
- .forEach((name) => {
37
- const eventType = name.toLowerCase().substring(2)
38
- dom.removeEventListener(eventType, prevProps[name])
39
- })
40
-
41
- Object.keys(prevProps)
42
- .filter(isProperty)
43
- .filter(isGone(nextProps))
44
- .forEach((name) => {
45
- dom[name] = ''
46
- })
47
-
48
- Object.keys(nextProps)
49
- .filter(isProperty)
50
- .filter(isNew(prevProps, nextProps))
51
- .forEach((name) => {
52
- if (name === STRINGS.style) {
53
- DomStyle(dom, nextProps.style)
54
- } else if (name === STRINGS.className) {
55
- if (nextProps.className === '') {
56
- throw new Error('className cannot be empty.')
57
- }
58
- prevProps.className &&
59
- dom.classList.remove(...prevProps.className.split(/\s+/))
60
- dom.classList.add(...nextProps.className.split(/\s+/))
61
- } else {
62
- dom[name] = nextProps[name]
63
- }
64
- })
65
-
66
- Object.keys(nextProps)
67
- .filter(isEvent)
68
- .filter(isNew(prevProps, nextProps))
69
- .forEach((name) => {
70
- const eventType = name.toLowerCase().substring(2)
71
- dom.addEventListener(eventType, nextProps[name])
72
- })
73
- }
74
-
75
- const DomStyle = (dom, style) => {
76
- dom.style = Object.keys(style).reduce((acc, styleName) => {
77
- const key = styleName.replace(reg, function (v) {
78
- return '-' + v.toLowerCase()
79
- })
80
- acc += `${key}: ${style[styleName]};`
81
- return acc
82
- }, '')
83
- }
84
-
85
- export { DomStyle, createDom, updateDom }
@@ -1,55 +0,0 @@
1
- import { RYUNIX_TYPES, STRINGS } from '../utils/index'
2
-
3
- const isEvent = (key) => key.startsWith('on')
4
- const isProperty = (key) => key !== STRINGS.children && !isEvent(key)
5
- const isNew = (prev, next) => (key) => prev[key] !== next[key]
6
- const isGone = (next) => (key) => !(key in next)
7
- const hasDepsChanged = (prevDeps, nextDeps) =>
8
- !prevDeps ||
9
- !nextDeps ||
10
- prevDeps.length !== nextDeps.length ||
11
- prevDeps.some((dep, index) => dep !== nextDeps[index])
12
-
13
- /**
14
- * The function cancels all effect hooks in a given fiber.
15
- * @param fiber - The "fiber" parameter is likely referring to a data structure used in React.js to
16
- * represent a component and its state. It contains information about the component's props, state, and
17
- * children, as well as metadata used by React to manage updates and rendering. The function
18
- * "cancelEffects" is likely intended
19
- */
20
- const cancelEffects = (fiber) => {
21
- if (fiber.hooks) {
22
- fiber.hooks
23
- .filter((hook) => hook.tag === RYUNIX_TYPES.RYUNIX_EFFECT && hook.cancel)
24
- .forEach((effectHook) => {
25
- effectHook.cancel()
26
- })
27
- }
28
- }
29
-
30
- /**
31
- * The function runs all effect hooks in a given fiber.
32
- * @param fiber - The "fiber" parameter is likely referring to a data structure used in the
33
- * implementation of a fiber-based reconciliation algorithm, such as the one used in React. A fiber
34
- * represents a unit of work that needs to be performed by the reconciliation algorithm, and it
35
- * contains information about a component and its children, as
36
- */
37
- const runEffects = (fiber) => {
38
- if (fiber.hooks) {
39
- fiber.hooks
40
- .filter((hook) => hook.tag === RYUNIX_TYPES.RYUNIX_EFFECT && hook.effect)
41
- .forEach((effectHook) => {
42
- effectHook.cancel = effectHook.effect()
43
- })
44
- }
45
- }
46
-
47
- export {
48
- runEffects,
49
- cancelEffects,
50
- isEvent,
51
- isProperty,
52
- isNew,
53
- isGone,
54
- hasDepsChanged,
55
- }
package/src/lib/hooks.ts DELETED
@@ -1,80 +0,0 @@
1
- import { hasDepsChanged } from './effects'
2
- import { RYUNIX_TYPES, STRINGS, vars } from '../utils/index'
3
-
4
- const useStore = (initial) => {
5
- const oldHook =
6
- vars.wipFiber.alternate &&
7
- vars.wipFiber.alternate.hooks &&
8
- vars.wipFiber.alternate.hooks[vars.hookIndex]
9
- const hook = {
10
- state: oldHook ? oldHook.state : initial,
11
- queue: [],
12
- }
13
-
14
- const actions = oldHook ? oldHook.queue : []
15
- actions.forEach((action) => {
16
- hook.state =
17
- typeof action === STRINGS.function ? action(hook.state) : action
18
- })
19
-
20
- const setState = (action) => {
21
- hook.queue.push(action)
22
- vars.wipRoot = {
23
- dom: vars?.currentRoot?.dom,
24
- props: vars?.currentRoot?.props,
25
- alternate: vars?.currentRoot,
26
- }
27
- vars.nextUnitOfWork = vars.wipRoot
28
- vars.deletions = []
29
- }
30
-
31
- vars.wipFiber.hooks.push(hook)
32
- vars.hookIndex++
33
- return [hook.state, setState]
34
- }
35
-
36
- const useEffect = (effect, deps) => {
37
- const oldHook =
38
- vars.wipFiber.alternate &&
39
- vars.wipFiber.alternate.hooks &&
40
- vars.wipFiber.alternate.hooks[vars.hookIndex]
41
-
42
- const hasChanged = hasDepsChanged(oldHook ? oldHook.deps : undefined, deps)
43
-
44
- const hook = {
45
- tag: RYUNIX_TYPES.RYUNIX_EFFECT,
46
- effect: hasChanged ? effect : null,
47
- cancel: hasChanged && oldHook && oldHook.cancel,
48
- deps,
49
- }
50
-
51
- vars.wipFiber.hooks.push(hook)
52
- vars.hookIndex++
53
- }
54
-
55
- const useQuery = () => {
56
- vars.hookIndex++
57
-
58
- const oldHook =
59
- vars.wipFiber.alternate &&
60
- vars.wipFiber.alternate.hooks &&
61
- vars.wipFiber.alternate.hooks[vars.hookIndex]
62
-
63
- const hasOld = oldHook ? oldHook : undefined
64
-
65
- const urlSearchParams = new URLSearchParams(window.location.search)
66
-
67
- const params = Object.fromEntries(urlSearchParams.entries())
68
- const Query = hasOld ? hasOld : params
69
-
70
- const hook = {
71
- tag: RYUNIX_TYPES.RYUNIX_EFFECT,
72
- query: Query,
73
- }
74
-
75
- vars.wipFiber.hooks.push(hook)
76
-
77
- return hook.query
78
- }
79
-
80
- export { useStore, useEffect, useQuery }
package/src/lib/index.ts DELETED
@@ -1,23 +0,0 @@
1
- import { createElement, Fragments } from './createElement'
2
- import { render, init } from './render'
3
- import { useStore, useEffect, useQuery } from './hooks'
4
- import { Router, Navigate, Link } from './navigation'
5
- import * as Dom from './dom'
6
- import * as Workers from './workers'
7
- import * as Reconciler from './reconciler'
8
- import * as Components from './components'
9
- import * as Commits from './commits'
10
-
11
- export { useStore, useEffect, useQuery, Fragments, Router, Navigate, Link }
12
-
13
- export default {
14
- createElement,
15
- render,
16
- init,
17
- Fragments,
18
- Dom,
19
- Workers,
20
- Reconciler,
21
- Components,
22
- Commits,
23
- }
@@ -1,74 +0,0 @@
1
- import { useStore, useEffect } from './hooks'
2
- import { createElement } from './createElement'
3
-
4
- const Router = ({ path, component }) => {
5
- const [currentPath, setCurrentPath] = useStore(window.location.pathname)
6
-
7
- useEffect(() => {
8
- const onLocationChange = () => {
9
- setCurrentPath(() => window.location.pathname)
10
- }
11
-
12
- window.addEventListener('navigate', onLocationChange)
13
- window.addEventListener('pushstate', onLocationChange)
14
- window.addEventListener('popstate', onLocationChange)
15
-
16
- return () => {
17
- window.removeEventListener('navigate', onLocationChange)
18
- window.removeEventListener('pushstate', onLocationChange)
19
- window.removeEventListener('popstate', onLocationChange)
20
- }
21
- }, [currentPath])
22
-
23
- return currentPath === path ? component() : null
24
- }
25
-
26
- const Navigate = () => {
27
- const push = (to, state = {}) => {
28
- if (window.location.pathname === to) return
29
- window.history.pushState(state, '', to)
30
- const navigationEvent = new Event('pushsatate')
31
- window.dispatchEvent(navigationEvent)
32
- }
33
-
34
- return { push }
35
- }
36
-
37
- const Link = (props) => {
38
- if (props.style) {
39
- throw new Error(
40
- 'The style attribute is not supported on internal components, use className.',
41
- )
42
- }
43
- if (props.to === '') {
44
- throw new Error("'to=' cannot be empty.")
45
- }
46
- if (props.className === '') {
47
- throw new Error('className cannot be empty.')
48
- }
49
- if (props.label === '' && !props.children) {
50
- throw new Error("'label=' cannot be empty.")
51
- }
52
-
53
- if (!props.to) {
54
- throw new Error("Missing 'to' param.")
55
- }
56
-
57
- const preventReload = (event) => {
58
- event.preventDefault()
59
- const { push } = Navigate()
60
- push(props.to)
61
- }
62
-
63
- const anchor = {
64
- href: props.to,
65
- onClick: preventReload,
66
- ...props,
67
- }
68
-
69
- const children = props.label ? props.label : props.children
70
-
71
- return createElement('a', anchor, children)
72
- }
73
-
74
- export { Router, Navigate, Link }
@@ -1,62 +0,0 @@
1
- import { EFFECT_TAGS, vars } from '../utils/index'
2
-
3
- /**
4
- * This function reconciles the children of a fiber node with a new set of elements, creating new
5
- * fibers for new elements, updating existing fibers for elements with the same type, and marking old
6
- * fibers for deletion if they are not present in the new set of elements.
7
- * @param wipFiber - A work-in-progress fiber object representing a component or element in the virtual
8
- * DOM tree.
9
- * @param elements - an array of elements representing the new children to be rendered in the current
10
- * fiber's subtree
11
- */
12
- const reconcileChildren = (wipFiber, elements) => {
13
- let index = 0
14
- let oldFiber = wipFiber.alternate && wipFiber.alternate.child
15
- let prevSibling
16
-
17
- while (index < elements.length || oldFiber != null) {
18
- const element = elements[index]
19
- let newFiber
20
-
21
- const sameType = oldFiber && element && element.type == oldFiber.type
22
-
23
- if (sameType) {
24
- newFiber = {
25
- type: oldFiber.type,
26
- props: element.props,
27
- dom: oldFiber.dom,
28
- parent: wipFiber,
29
- alternate: oldFiber,
30
- effectTag: EFFECT_TAGS.UPDATE,
31
- }
32
- }
33
- if (element && !sameType) {
34
- newFiber = {
35
- type: element.type,
36
- props: element.props,
37
- dom: null,
38
- parent: wipFiber,
39
- alternate: null,
40
- effectTag: EFFECT_TAGS.PLACEMENT,
41
- }
42
- }
43
- if (oldFiber && !sameType) {
44
- oldFiber.effectTag = EFFECT_TAGS.DELETION
45
- vars.deletions.push(oldFiber)
46
- }
47
-
48
- if (oldFiber) {
49
- oldFiber = oldFiber.sibling
50
- }
51
-
52
- if (index === 0) {
53
- wipFiber.child = newFiber
54
- } else if (element) {
55
- prevSibling.sibling = newFiber
56
- }
57
-
58
- prevSibling = newFiber
59
- index++
60
- }
61
- }
62
- export { reconcileChildren }
package/src/lib/render.ts DELETED
@@ -1,33 +0,0 @@
1
- import { vars } from '../utils/index'
2
-
3
- /**
4
- * The function renders an element into a container using a work-in-progress root.
5
- * @param element - The element parameter is the component or element that needs to be rendered in the
6
- * container. It could be a Ryunix component or a DOM element.
7
- * @param container - The container parameter is the DOM element where the rendered element will be
8
- * appended to. this parameter is optional if you use createRoot().
9
- */
10
- const render = (element, container) => {
11
- vars.wipRoot = {
12
- dom: vars.containerRoot || container,
13
- props: {
14
- children: [element],
15
- },
16
- alternate: vars.currentRoot,
17
- }
18
- vars.deletions = []
19
- vars.nextUnitOfWork = vars.wipRoot
20
- }
21
-
22
- /**
23
- * @description The function creates a reference to a DOM element with the specified ID. This will be used to initialize the app.
24
- * @example Ryunix.init("root") -> <div id="root" />
25
- * @param root - The parameter "root" is the id of the HTML element that will serve as the container
26
- * for the root element.
27
- */
28
- const init = (root) => {
29
- const rootElement = root || '__ryunix'
30
- vars.containerRoot = document.getElementById(rootElement)
31
- }
32
-
33
- export { render, init }
@@ -1,60 +0,0 @@
1
- import { commitRoot } from './commits'
2
- import { updateFunctionComponent, updateHostComponent } from './components'
3
- import { vars } from '../utils/index'
4
-
5
- /**
6
- * This function uses requestIdleCallback to perform work on a fiber tree until it is complete or the
7
- * browser needs to yield to other tasks.
8
- * @param deadline - The `deadline` parameter is an object that represents the amount of time the
9
- * browser has to perform work before it needs to handle other tasks. It has a `timeRemaining()` method
10
- * that returns the amount of time remaining before the deadline is reached. The `shouldYield` variable
11
- * is used to determine
12
- */
13
- const workLoop = (deadline) => {
14
- let shouldYield = false
15
- while (vars.nextUnitOfWork && !shouldYield) {
16
- vars.nextUnitOfWork = performUnitOfWork(vars.nextUnitOfWork)
17
- shouldYield = deadline.timeRemaining() < 1
18
- }
19
-
20
- if (!vars.nextUnitOfWork && vars.wipRoot) {
21
- commitRoot()
22
- }
23
-
24
- requestIdleCallback(workLoop)
25
- }
26
-
27
- requestIdleCallback(workLoop)
28
-
29
- /**
30
- * The function performs a unit of work by updating either a function component or a host component and
31
- * returns the next fiber to be processed.
32
- * @param fiber - A fiber is a unit of work in Ryunix that represents a component and its state. It
33
- * contains information about the component's type, props, and children, as well as pointers to its
34
- * parent, child, and sibling fibers. The `performUnitOfWork` function takes a fiber as a parameter and
35
- * performs work
36
- * @returns The function `performUnitOfWork` returns the next fiber to be processed. If the current
37
- * fiber has a child, it returns the child. Otherwise, it looks for the next sibling of the current
38
- * fiber. If there are no more siblings, it goes up the tree to the parent and looks for the next
39
- * sibling of the parent. The function returns `null` if there are no more fibers to process.
40
- */
41
- const performUnitOfWork = (fiber) => {
42
- const isFunctionComponent = fiber.type instanceof Function
43
- if (isFunctionComponent) {
44
- updateFunctionComponent(fiber)
45
- } else {
46
- updateHostComponent(fiber)
47
- }
48
- if (fiber.child) {
49
- return fiber.child
50
- }
51
- let nextFiber = fiber
52
- while (nextFiber) {
53
- if (nextFiber.sibling) {
54
- return nextFiber.sibling
55
- }
56
- nextFiber = nextFiber.parent
57
- }
58
- }
59
-
60
- export { performUnitOfWork, workLoop }
package/src/main.ts DELETED
@@ -1,12 +0,0 @@
1
- import Ryunix from './lib/index.js'
2
- export {
3
- useStore,
4
- useEffect,
5
- useQuery,
6
- Fragments,
7
- Navigate,
8
- Router,
9
- Link,
10
- } from './lib/index.js'
11
-
12
- export default Ryunix
@@ -1,32 +0,0 @@
1
- const vars = Object.freeze({
2
- containerRoot: null,
3
- nextUnitOfWork: null,
4
- currentRoot: null,
5
- wipRoot: null,
6
- deletions: null,
7
- wipFiber: null,
8
- hookIndex: null,
9
- })
10
-
11
- const reg = /[A-Z]/g
12
-
13
- const RYUNIX_TYPES = Object.freeze({
14
- TEXT_ELEMENT: Symbol('text.element'),
15
- RYUNIX_EFFECT: Symbol('ryunix.effect'),
16
- })
17
-
18
- const STRINGS = Object.freeze({
19
- object: 'object',
20
- function: 'function',
21
- style: 'style',
22
- className: 'className',
23
- children: 'children',
24
- })
25
-
26
- const EFFECT_TAGS = Object.freeze({
27
- PLACEMENT: Symbol(),
28
- UPDATE: Symbol(),
29
- DELETION: Symbol(),
30
- })
31
-
32
- export { vars, reg, RYUNIX_TYPES, EFFECT_TAGS, STRINGS }