React Fiber Architecture Simulation

This challenge asks you to simulate a simplified version of React's Fiber architecture. Fiber is a core architectural innovation in React that allows for incremental rendering, improved scheduling, and better responsiveness, especially in complex UIs. By building a simplified simulation, you'll gain a deeper understanding of how Fiber works under the hood.

Problem Description

You are tasked with creating a React Fiber simulation in TypeScript. This simulation should model the core concepts of Fiber: a tree-like structure representing work units, a work loop that processes these units, and the ability to pause and resume work. The simulation will not involve actual DOM manipulation; instead, it will focus on the Fiber tree and the work loop logic.

What needs to be achieved:

1. Fiber Node: Define a FiberNode interface/type representing a single Fiber node. This node should contain properties for:
   • type: A string representing the type of component (e.g., "div", "button", "MyComponent").
   • children: An array of FiberNode objects representing the children of this node.
   • state: An arbitrary value representing the component's state (can be any type).
   • effect: An enum representing the effect status of the fiber (e.g., "NoEffect", "Mount", "Update", "Unmount").
   • priority: A number representing the priority of this work unit (higher number = higher priority).
2. Fiber Tree: Create a function createFiberTree that takes an arbitrary JavaScript object representing a component tree and converts it into a FiberNode tree. This function should recursively traverse the input object and create corresponding FiberNode objects. Assume the input object's keys are component types and its values are either primitive values (representing props) or nested objects (representing child components).
3. Work Loop: Implement a workLoop function that takes a root FiberNode, a priorityThreshold (a number), and a callback function renderCallback (which takes a FiberNode as input) as arguments. The workLoop should:
   • Traverse the Fiber tree, starting from the root.
   • Process Fiber nodes whose priority is greater than or equal to the priorityThreshold.
   • For each processed Fiber node, call the renderCallback function.
   • Simulate pausing and resuming: The workLoop should return a boolean indicating whether there is more work to be done. If there is more work, it should return true. If no more work is found with the given priority, it should return false.
4. Priority Levels: The priorityThreshold will determine how much work is done in each iteration of the work loop. Higher thresholds mean less work is done per iteration.

Key Requirements:

• The code must be written in TypeScript.
• The FiberNode must be a clearly defined type/interface.
• The createFiberTree function must correctly convert a JavaScript object into a Fiber tree.
• The workLoop function must correctly traverse the Fiber tree and process nodes based on priority.
• The simulation should demonstrate the concept of pausing and resuming work.

Expected Behavior:

The workLoop function should process Fiber nodes in a depth-first manner, prioritizing nodes with higher priority values. The renderCallback function should be called for each processed node. The function should return true if there are more nodes to process at the current priority level and false otherwise.

Edge Cases to Consider:

• Empty input to createFiberTree.
• Fiber nodes with no children.
• Fiber nodes with mixed priorities.
• priorityThreshold values that result in no work being done.

Examples

Example 1:

Input: createFiberTree({ type: 'div', children: { type: 'p', state: 'Hello' } })
Output: A FiberNode tree representing the 'div' and 'p' components. The 'p' node will have the state 'Hello'.
Explanation: The function recursively converts the JavaScript object into a Fiber tree.

Example 2:

Input: workLoop(rootFiber, 5, (fiber) => console.log(fiber.type))
where rootFiber is a FiberNode with a child whose priority is 7 and another child whose priority is 3.
Output: console.log("child with priority 7")
Explanation: The workLoop processes the child with priority 7 first because it's greater than or equal to the priorityThreshold of 5. The child with priority 3 is skipped.

Example 3: (Edge Case)

Input: createFiberTree({})
Output: A root FiberNode with type 'null' and no children.
Explanation: Handles the case where the input object is empty.

Constraints

• The priority property of a FiberNode must be a number between 1 and 10 (inclusive).
• The createFiberTree function must handle nested objects of arbitrary depth.
• The workLoop function must not enter an infinite loop.
• The renderCallback function should be a pure function (no side effects other than logging or similar).
• The simulation should be reasonably efficient (avoid unnecessary iterations or computations).

Notes

• This is a simplified simulation and does not include all aspects of React's Fiber architecture (e.g., concurrent mode, suspense, etc.).
• Focus on modeling the core concepts of Fiber: the tree structure, work units, and the work loop.
• Consider using recursion to implement the createFiberTree function.
• The priorityThreshold is a key parameter that controls the granularity of the work loop. Experiment with different values to see how they affect the behavior of the simulation.
• The effect property is not required for this simplified simulation, but you can add it if you want to explore more advanced concepts.