✨ feat: implement fiber architecture with complete reconciliation eng… by MarcelOlsen · Pull Request #31 · MarcelOlsen/mini-react

MarcelOlsen · 2025-10-29T18:31:39Z

Fiber Architecture Implementation

Overview

This PR replaces MiniReact's recursive rendering system with a complete fiber-based architecture. The fiber architecture is how modern React works internally, and it gives us a solid foundation for future features like concurrent mode and Suspense while improving performance and maintainability.

Why Fiber?

The old recursive approach had some fundamental limitations that were becoming problematic:

Stack depth issues - Deep component trees could blow the stack. With recursion, there's no way around this except limiting tree depth.

Non-interruptible rendering - Once rendering started, it had to complete. This blocked the main thread and could make UIs feel sluggish.

No concurrent mode support - You can't pause or prioritize recursive work. Updates were all-or-nothing.

Limited error recovery - Error boundaries are hard to implement properly when you're deep in a recursive call stack.

Performance bottlenecks - Re-rendering entire subtrees even when only small parts changed, because there wasn't a good way to track what actually needed updating.

Fiber solves all of these by breaking rendering into small units of work that can be paused, resumed, and prioritized.

What's a Fiber?

A fiber is just a JavaScript object that represents a component instance and tracks its work. Instead of using the call stack, we build an explicit tree of fiber objects linked by pointers. This lets us traverse the tree iteratively and maintain our own work queue.

The key insight is maintaining two trees - the current tree (what's on screen) and the work-in-progress tree (what we're building). This double-buffering pattern means we can work on updates without disrupting the current UI, then swap the trees atomically when we're done.

Key Features

Core Architecture

Double-buffering - Current and work-in-progress trees linked through the alternate pointer. Enables safe, interruptible updates.

Incremental rendering - Work processed unit-by-unit using iterative tree traversal. No recursion means no stack depth issues.

Effect lists - Instead of walking the entire tree during commit, we maintain a linked list of only the fibers that have changes. This makes commit phase O(changes) instead of O(total nodes).

Work loop - Clean separation between render phase (building the tree) and commit phase (applying changes to DOM).

Reconciliation Engine

O(n) diffing - Key-based reconciliation keeps things fast. We make smart assumptions (same type = reuse, different type = replace) to avoid O(n³) tree comparison.

Mixed keyed/unkeyed handling - Properly handles edge cases when you mix keyed and unkeyed children in the same list.

Type-based reuse - When component types match, we reuse the fiber and just update it. When types differ, we know we need a full replacement.

Optimized paths - Special fast paths for common cases like single children or empty children.

Event System

Full delegation - All events delegated to the root container. Better performance and easier to manage.

Synthetic events - Normalized cross-browser event handling. Your event handlers get consistent objects regardless of browser.

Portal event bubbling - Events bubble through the React component tree, not the DOM tree. This is important for portals to work correctly.

Proper cleanup - Event listeners removed when components unmount. No memory leaks.

Hooks Integration

Fiber-based storage - Hooks stored directly on fiber objects. Each fiber maintains its own hook array.

Update queues - State updates are queued and batched. Multiple setState calls in the same render get processed together.

Effect scheduling - Effects run at the right time with proper cleanup handling.

Architecture

The fiber system is split into focused modules:

src/fiber/
├── types.ts              # Core data structures and type definitions
├── fiberRoot.ts          # Root management and container tracking
├── fiberCreation.ts      # Fiber creation with object pooling
├── workLoop.ts           # Main rendering coordinator
├── beginWork.ts          # Fiber processing and component calls
├── completeWork.ts       # DOM node creation and effect lists
├── commitWork.ts         # DOM mutations and effect application
├── reconcileChildren.ts  # The actual diffing algorithm
├── domOperations.ts      # Low-level DOM utilities
├── fiberHooks.ts         # Hook state and update queues
└── fiberFlags.ts         # Effect tags (placement, update, deletion)

Each module has a single clear responsibility. The work loop coordinates everything, begin work processes components, reconciliation diffs children, complete work builds DOM nodes, and commit work applies changes.

Documentation

Added comprehensive docs that explain how everything works:

Fiber Architecture (docs/01-fiber-architecture.md) - The core concepts, double-buffering pattern, and tree structure.

Work Loop (docs/02-work-loop.md) - How rendering is coordinated, the traversal algorithm, and where work happens.

Reconciliation (docs/03-reconciliation.md) - The diffing algorithm, key-based matching, and how we handle updates efficiently.

Event System (docs/04-event-system.md) - Event delegation, synthetic events, and how portal bubbling works.

Hooks System (docs/05-hooks-system.md) - Hook storage on fibers, update queues, and effect scheduling.

Overview (docs/README.md) - Navigation guide and getting started.

Each doc includes practical examples, implementation notes, and thoughts on future enhancements. The goal is to make the codebase approachable for contributors.

Example App Rewrite

The example app got a complete overhaul with modern tooling:

ElysiaJS server - Type-safe server with proper MIME types. Fast and lightweight.

Full TypeScript - Everything properly typed, no any types anywhere in the app code.

Comprehensive demos showing all MiniReact features:

Counter using useState
Todo list with complex state management
Timer demonstrating useEffect with cleanup
Portal showing event bubbling across DOM boundaries
Memoization preventing unnecessary re-renders
useCallback and useMemo for performance
Theme switching with useContext

The app is clean, well-documented, and shows best practices for using MiniReact.

Technical Details

TypeScript

Fixed all type errors properly without resorting to any:

Proper union types for fiber stateNode: Node | FiberRoot | PortalContainer | null
Added explanatory @ts-expect-error comments only where our types intentionally differ from React
Used @ts-nocheck in test files that deliberately use incomplete props for testing
Zero any types in source code (tests use it only for edge case testing)

Linting

Added Biome rules for test files (allow noNonNullAssertion since tests often assert non-null)
Configured ignore patterns for built assets
All source files pass linting
Consistent formatting throughout

Testing

All existing tests pass plus comprehensive new fiber tests:

Integration tests - Full render cycles, updates, unmounting, effects
Unit tests - Individual fiber operations in isolation
Edge cases - Mixed keyed/unkeyed children, portal events, synthetic event properties
Reconciliation tests - Key matching, element moves, insertions, deletions
Hook tests - State updates, effect cleanup, batching behavior

Test coverage maintained at 100% with 484 passing tests.

Performance

The fiber architecture improves performance in several ways:

Efficient updates - Only changed nodes are processed during commit. If 5 nodes changed in a 10,000 node tree, we process 5 nodes.

No recursion - Iterative traversal means no stack depth limits. Render trees as deep as you want.

Fiber pooling - The alternate pointer lets us reuse fiber objects between renders instead of allocating new ones.

Effect lists - Building a linked list of changes during render means commit phase is O(changes) not O(nodes).

Early bailout - When props haven't changed and there's no local state update, we skip entire subtrees.

Rendering is still synchronous for now (predictable behavior, simpler implementation), but the architecture is ready for concurrent mode and time-slicing when we want to add them.

Breaking Changes

None for the public API. Everything that worked before still works:

render(<App />, container)
useState(initialState)
useEffect(effect, deps)
createContext(defaultValue)
createPortal(children, container)
memo(component)
// ... everything else

Internally, the old VDOMInstance system is gone, but that was already deprecated and not part of the public API.

Testing

To verify everything works:

# Run all tests
bun test

# Check types
bun run typecheck

# Check linting
bun run lint

# Try the example app
cd example
bun run dev
# Visit http://localhost:3000

All checks pass. 484 tests, zero type errors, zero lint errors.

Future Work

This implementation sets us up for some really interesting features:

Concurrent mode - Time-slice rendering so the UI stays responsive. High-priority updates (typing) can interrupt low-priority ones (data fetching).

Suspense - Async rendering with proper loading states. Components can "suspend" while waiting for data.

Error boundaries - Catch errors in component trees and show fallback UI. The fiber tree structure makes this straightforward.

Profiler - Measure render times and identify performance bottlenecks. Fiber gives us the hooks we need.

Server components - Better server-side rendering with streaming and selective hydration.

The hard part (the architecture) is done. Adding these features is mostly incremental work now.

Migration

No migration needed. This is a drop-in replacement for the old rendering system. Existing code works without any changes.

References

This implementation draws heavily from React's fiber architecture:

React Fiber Architecture by Andrew Clark
Inside Fiber: In-depth overview by Max Koretskyi
React source code (particularly the reconciler)

We've simplified some parts and left out others (no class components, no legacy context), but the core ideas are the same.

Checklist

All tests passing (484/484)
TypeScript clean (zero errors)
Linting clean (zero errors)
Documentation complete
Example app working
No breaking changes to public API
Performance maintained or improved
No any types in source code

Ready to merge.

Summary by CodeRabbit

Documentation
- Added comprehensive MiniReact docs covering architecture, work loop, reconciliation, events, and hooks.
New Features
- Introduced a full showcase example app with Bun-based scripts, server template, and UI templates.
Chores
- Moved tooling to Bun/Elysia, added Biome config, updated TS config, and added a pre-commit formatting hook.
Tests
- Added extensive test suites for fiber phases, reconciliation, commit/complete work, and edge cases.
Refactor
- Reworked core rendering and hooks to a fiber-based architecture for improved reliability.

_{✏️ Tip: You can customize this high-level summary in your review settings.}

…ine and comprehensive documentation Replaces the old recursive rendering system with React-like fiber architecture for better performance and future concurrent mode support, includes full test suite, modernized ElysiaJS example app, and detailed design documentation for all core systems.

coderabbitai · 2025-10-29T18:32:03Z

Walkthrough

Major refactor replacing the legacy VDOM reconciler with a complete Fiber-based renderer: new fiber core (types, flags, creation, root, work loop, begin/complete/commit phases), fiber-backed hooks/context/event wiring, many tests/docs, and an overhauled example to Bun/Elysia; legacy reconciler/dom-renderer removed.

Changes

Cohort / File(s)	Summary
Fiber Core + Public Surface `src/fiber/types.ts`, `src/fiber/fiberFlags.ts`, `src/fiber/fiberCreation.ts`, `src/fiber/fiberRoot.ts`, `src/fiber/index.ts`	New Fiber data model, effect/lane flags, fiber creation & WIP pooling, root registry (WeakMap), and unified fiber public exports/types.
Work Loop & Phases `src/fiber/workLoop.ts`, `src/fiber/beginWork.ts`, `src/fiber/completeWork.ts`, `src/fiber/commitWork.ts`, `src/fiber/reconcileChildren.ts`, `src/fiber/domOperations.ts`	Full render pipeline: scheduleUpdateOnFiber/workLoop, beginWork dispatcher, reconcileChildren diffing, completeWork DOM prep & VDOMInstance mapping, commitRoot mutation/layout phases, and DOM op utilities.
Hooks Integration `src/fiber/fiberHooks.ts`, `src/hooks/index.ts`, `src/hooks/types.ts`, `src/hooks/legacyScheduler.ts`	Fiber-backed hook system: current rendering fiber tracking, update queues, dispatchers, queue processing, deps equality; hooks API reconnected to fiber internals; legacy microtask scheduler shim for effects.
Context Migration `src/context/index.ts`	Removed global render-instance context setter; provider/consumer now locate values via current rendering fiber and fiber.contextValues.
Core API & MiniReact surface `src/core/index.ts`, `src/MiniReact.ts`, `src/jsx-dev-runtime.ts`	`render` now uses Fiber roots and scheduling; deprecated old VDOM utilities replaced by warning wrappers; MiniReact exports extended (eventSystem, TEXT_ELEMENT, FRAGMENT, PORTAL); jsxDEV exported as named export as well.
Event System `src/events/eventSystem.ts`	Centralized types import; portal-aware cleanup of delegated listeners; no major behavioral rewrite beyond portal cleanup and type relocation.
Removed Legacy Reconciler + DOM Renderer `src/reconciler/index.ts`, `src/dom-renderer/index.ts`	Deleted monolithic VDOM reconciler and DOM renderer modules and their public APIs (reconcile, createVDOMInstance, createDomNode, etc.).
Example App Overhaul `example/package.json`, `example/README.md`, `example/babel.config.js` (removed), `example/biome.json`, `example/tsconfig.json`, `example/src/app.tsx`, `example/src/server.ts`, `example/src/templates/index.html`, `example/public/` (deleted), `example/src/` (legacy demo components removed)	Replaced webpack/Babel example with a Bun/Elysia showcase app (TypeScript), new server endpoint, updated tooling (biome + Bun scripts), removed old demo components and static index, added TS demo app and HTML template.
Tests: Fiber + Misc `tests/fiber/*.test.ts` (many), `tests/MiniReact.jsx.test.ts`, `tests/MiniReact.falsyValues.test.ts`, `tests/MiniReact.reconciler.test.ts` (deleted)	Added comprehensive fiber unit/integration tests for begin/complete/commit/workLoop/reconciliation/effectTags; updated test harness cleanup; removed legacy reconciler tests.
Docs & Project Scripts `docs/*` (`01-05` + README), `.trae/rules/project_rules.md` (removed block), `README.md`, `scripts/setup-hooks.sh`	Added detailed fiber/work-loop/reconciliation/event/hooks docs; removed commit-hygiene doc block; added pre-commit setup script to install Biome formatting hook and updated README to mention it.
Config & Tooling `biome.json`, `package.json` (root), `example/biome.json`, `.gitignore`, `example/.gitignore`, `tsconfig.json` (example changes)	Biome rules updated (ignore patterns, overrides for tests, style rules), package.json gained `typecheck` script and prepublish check, example toolchain configs updated to Bun/biome, small .gitignore formatting tweak.

Sequence Diagram(s)

sequenceDiagram
    autonumber
    actor Dev as Dev
    participant API as MiniReact.render
    participant WL as WorkLoop (scheduleUpdateOnFiber)
    participant BW as beginWork
    participant CW as completeWork
    participant Commit as commitWork
    participant DOM as Browser DOM

    Dev->>API: render(element, container)
    API->>WL: create/get FiberRoot & scheduleUpdateOnFiber
    WL->>WL: renderRootSync (build WIP)
    WL->>BW: beginWork(current, wip)
    BW->>BW: reconcileChildren -> produce child fibers
    BW-->>WL: next child or null
    WL->>CW: completeWork(current, wip)
    CW->>CW: create/update stateNode, set effect tags
    WL->>WL: finish loop -> finishedWork
    WL->>Commit: commitRoot(finishedWork)
    Commit->>DOM: insert/remove/update nodes, run layout effects/refs
    Commit-->>Dev: render complete

sequenceDiagram
    autonumber
    participant Component as Component
    participant Hook as dispatchSetState
    participant Queue as UpdateQueue
    participant WL as WorkLoop

    Component->>Hook: dispatchSetState(action)
    Hook->>Queue: enqueue update (circular list)
    Hook->>WL: scheduleUpdateOnFiber(ownerFiber)
    WL->>WL: renderRootSync -> processUpdateQueue during render
    WL->>Component: component receives updated state

Estimated code review effort

🎯 5 (Critical) | ⏱️ ~120 minutes

Areas I will be nitpicky about — review these closely:

src/fiber/workLoop.ts — non-recursive traversal, WIP lifecycle, effect list aggregation and invariants.
src/fiber/reconcileChildren.ts — keyed vs unkeyed diffing, move detection (lastPlacedIndex), deletion wiring into effects.
src/fiber/commitWork.ts — DOM mutation ordering, placement sibling search, ref attach/detach timing, effect cleanup ordering.
src/fiber/completeWork.ts & domOperations.ts — stateNode creation, setInitialProperties/updateProperties edge-cases (inputs, checked/value, styles).
Hook/queue typings and generic propagation (UpdateQueue) across dispatch/process paths.
Context provider lookup (fiber.contextValues) — ensure performance on deep trees and correct null handling.
Portal handling — container identity propagation across begin/complete/commit and eventSystem portal cleanup.
Public API shims in src/core/index.ts: verify deprecation warnings and backward-compat behavior are clear and consistent.

Possibly related PRs

Refactor/separate functionalities #28 — Large refactor splitting renderer/hooks/context/event logic into modules; likely overlaps with this fiber migration.
Integration/context system #8 — Context implementation changes; related because this PR migrates context storage to fibers and updates create/useContext behavior.
feat: restore portal and fragment functionality #13 — Portal/fragment and renderer plumbing; overlaps with fiber portal handling and event delegation cleanup.

Poem

🔧 I ripped the VDOM guts apart, precise and mean,
Fiber trees now rule the scene — clean, lean.
Lanes, effects, queues — depth-first, no surprise,
Tests and docs in tow, types sharp as knives.
Ship it? Not yet — but damn, this refactor's mean.

Pre-merge checks

❌ Failed checks (1 inconclusive)

Check name	Status	Explanation	Resolution
Title check	❓ Inconclusive	The title clearly summarizes the main architectural change: implementing a fiber-based architecture with complete reconciliation. However, it's truncated mid-word ('eng…'), making it incomplete and somewhat unclear as a final statement.	Expand the title to the full intended message (likely 'engine') or rephrase more concisely as: 'feat: implement fiber architecture with complete reconciliation engine' to avoid truncation and maintain clarity for commit history scanning.

✅ Passed checks (2 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Docstring Coverage	✅ Passed	Docstring coverage is 90.00% which is sufficient. The required threshold is 80.00%.

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

coderabbitai

Actionable comments posted: 17

🧹 Nitpick comments (6)

example/src/types.d.ts (1)
1-1: Yo, chat, are we really doing triple-slash directives in 2025?

Listen, I know this works and all, but we're out here creating an entire file just to triple-slash reference some types? That's like... that's like creating a whole new component just to wrap a div, you know what I'm saying?

Here's the thing - triple-slash directives are the TypeScript equivalent of using var in JavaScript. They work, but they're old-school. Modern TypeScript has better ways to handle this:

Option 1 (The Based Approach): Just add this to your example/tsconfig.json:
{
  "include": [
    "src/**/*",
    "../src/jsx.d.ts"
  ]
}
Option 2 (Also Valid): If you need the types globally available in your example app, you could add it to the types array in tsconfig.

This whole file could just... not exist. And that's beautiful, chat. Less code, more type safety, same result. Plus you're not maintaining a separate file that's literally one line of path magic.

But hey, it works, so if you wanna ship this and refactor later when you're not knee-deep in fiber architecture, I get it. Just putting it out there that we can do better.
example/src/server.ts (1)
213-213: Hardcoded port 3000 - make it configurable.

Look, I get it, it's an example app. But hardcoding ports is how you end up with "port already in use" errors and confusion in different environments.

Do this:
+const PORT = Number(process.env.PORT) || 3000;
+
-.listen(3000);
+.listen(PORT);
Two lines. That's all it takes to make your life easier when you inevitably need to run this on a different port.
example/README.md (1)
112-121: Give the file tree fence a language.

This naked triple backtick is pure chaos. markdownlint is already screaming (MD040), and adding a language keeps the docs tooling happy. Just slap a neutral label like text on that block:
-```
+```text
 example/
 ├── src/
 │   ├── server.ts          # ElysiaJS server
@@
 └── README.md
-```
+```
Let’s keep the README as tidy as the code.
docs/03-reconciliation.md (1)

338-345: Slap a language on these fences

Come on, we’re better than raw triple-backticks floating in space. Markdown lint is already yelling because the example list of keyed vs unkeyed children lacks a language tag, and readers lose syntax highlighting. Tag it as text (or whatever fits) so the docs stay as polished as the fiber architecture you just shipped.

docs/05-hooks-system.md (1)

461-466: Give the update-queue diagram a language tag

Same story here: the circular queue snippet is naked markdown. Toss a text (or similar) language hint on that block so the lint bots chill and humans get consistent formatting. Easy win, no excuses.
src/hooks/types.ts (1)
12-36: Stop nuking our generics on UpdateQueue

Dude, we just torched all the compile-time signal by slapping UpdateQueue<unknown> onto state/reducer hooks. The whole point of threading these queues through the fiber types is to keep the actual state payload wired up. Keep it generic—UpdateQueue<T> for state hooks and UpdateQueue<State> for reducers—so downstream code doesn’t fall back to any-land. Patch it up like this:
-	queue?: UpdateQueue<unknown>; // Update queue for Fiber integration
+	queue?: UpdateQueue<T>; // Preserve the state type in the queue
...
-	queue?: UpdateQueue<unknown>; // Update queue for Fiber integration
+	queue?: UpdateQueue<State>; // Preserve reducer state typing
That way the scheduler keeps its TypeScript edge instead of devolving into shrug emoji types.

📜 Review details

Configuration used: CodeRabbit UI

Review profile: CHILL

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between 12c42ee and 341cc53.

⛔ Files ignored due to path filters (1)

example/bun.lock is excluded by !**/*.lock

📒 Files selected for processing (56)

.gitignore (1 hunks)
.trae/rules/project_rules.md (0 hunks)
biome.json (2 hunks)
docs/01-fiber-architecture.md (1 hunks)
docs/02-work-loop.md (1 hunks)
docs/03-reconciliation.md (1 hunks)
docs/04-event-system.md (1 hunks)
docs/05-hooks-system.md (1 hunks)
docs/README.md (1 hunks)
example/.gitignore (1 hunks)
example/README.md (1 hunks)
example/babel.config.js (0 hunks)
example/biome.json (1 hunks)
example/package.json (1 hunks)
example/public/index.html (0 hunks)
example/src/App.jsx (0 hunks)
example/src/Counter.jsx (0 hunks)
example/src/Modal.jsx (0 hunks)
example/src/ReducerDemo.jsx (0 hunks)
example/src/RefDemo.jsx (0 hunks)
example/src/TodoList.jsx (0 hunks)
example/src/app.tsx (1 hunks)
example/src/index.js (0 hunks)
example/src/server.ts (1 hunks)
example/src/types.d.ts (1 hunks)
example/tsconfig.json (1 hunks)
example/webpack.config.js (0 hunks)
package.json (1 hunks)
src/MiniReact.ts (2 hunks)
src/context/index.ts (3 hunks)
src/core/index.ts (3 hunks)
src/fiber/beginWork.ts (1 hunks)
src/fiber/commitWork.ts (1 hunks)
src/fiber/completeWork.ts (1 hunks)
src/fiber/domOperations.ts (1 hunks)
src/fiber/fiberCreation.ts (1 hunks)
src/fiber/fiberFlags.ts (1 hunks)
src/fiber/fiberHooks.ts (1 hunks)
src/fiber/fiberRoot.ts (1 hunks)
src/fiber/index.ts (1 hunks)
src/fiber/reconcileChildren.ts (1 hunks)
src/fiber/types.ts (1 hunks)
src/fiber/workLoop.ts (1 hunks)
src/hooks/fiberHooksImpl.ts (1 hunks)
src/hooks/index.ts (1 hunks)
src/hooks/index.ts.backup (1 hunks)
src/hooks/types.ts (3 hunks)
src/jsx-dev-runtime.ts (1 hunks)
tests/MiniReact.jsx.test.ts (2 hunks)
tests/fiber/beginWork.test.ts (1 hunks)
tests/fiber/commitWork.test.ts (1 hunks)
tests/fiber/completeWork.test.ts (1 hunks)
tests/fiber/fiberCreation.test.ts (1 hunks)
tests/fiber/integration.test.ts (1 hunks)
tests/fiber/reconciliation.test.ts (1 hunks)
tests/fiber/workLoop.test.ts (1 hunks)

💤 Files with no reviewable changes (11)

.trae/rules/project_rules.md
example/src/App.jsx
example/src/index.js
example/src/Counter.jsx
example/src/Modal.jsx
example/babel.config.js
example/webpack.config.js
example/src/RefDemo.jsx
example/src/TodoList.jsx
example/src/ReducerDemo.jsx
example/public/index.html

🧰 Additional context used

🧠 Learnings (1)

📓 Common learnings

Learnt from: MarcelOlsen
PR: MarcelOlsen/mini-react#8
File: README.md:701-708
Timestamp: 2025-06-17T12:40:39.737Z
Learning: MarcelOlsen prefers to keep test documentation simple with just one example of running specific test files, rather than listing detailed commands for each test suite in the README.

🧬 Code graph analysis (23)

src/context/index.ts (3)

src/fiber/fiberHooks.ts (1)

getCurrentRenderingFiber (49-51)

src/fiber/index.ts (1)

getCurrentRenderingFiber (103-103)

src/hooks/index.ts (1)

getCurrentRenderingFiber (56-56)

src/fiber/fiberCreation.ts (3)

src/MiniReact.ts (5)

ElementType (11-11)

AnyMiniReactElement (8-8)

TEXT_ELEMENT (133-133)

FRAGMENT (133-133)

PORTAL (133-133)

src/fiber/types.ts (2)

Props (23-28)

Fiber (141-335)

src/fiber/fiberFlags.ts (2)

NoEffect (15-15)

NoLanes (42-42)

src/fiber/fiberRoot.ts (2)

src/fiber/types.ts (2)

FiberRoot (349-400)

Fiber (141-335)

src/fiber/fiberFlags.ts (1)

NoLanes (42-42)

tests/fiber/integration.test.ts (4)

src/fiber/fiberRoot.ts (1)

createFiberRoot (23-59)

src/fiber/workLoop.ts (1)

scheduleUpdateOnFiber (39-46)

src/MiniReact.ts (3)

TEXT_ELEMENT (133-133)

FRAGMENT (133-133)

AnyMiniReactElement (8-8)

src/fiber/types.ts (1)

Fiber (141-335)

tests/fiber/beginWork.test.ts (3)

src/fiber/fiberCreation.ts (2)

createFiber (25-85)

createWorkInProgress (102-161)

src/fiber/beginWork.ts (1)

beginWork (44-81)

src/fiber/fiberRoot.ts (1)

createFiberRoot (23-59)

example/src/app.tsx (6)

src/MiniReact.ts (11)

MiniReactContext (37-37)

createContext (36-36)

useState (17-17)

useRef (20-20)

MutableRefObject (32-32)

useEffect (18-18)

memo (84-99)

useCallback (22-22)

useMemo (21-21)

useContext (36-36)

render (6-6)

src/context/index.ts (2)

createContext (33-80)

useContext (87-114)

src/hooks/fiberHooksImpl.ts (5)

useState (92-148)

useRef (293-323)

useEffect (241-285)

useCallback (384-428)

useMemo (332-375)

src/hooks/types.ts (1)

MutableRefObject (113-115)

src/portals/types.ts (1)

PortalElement (8-14)

src/core/index.ts (1)

render (64-100)

src/fiber/workLoop.ts (6)

src/fiber/types.ts (2)

Fiber (141-335)

FiberRoot (349-400)

src/performance/index.ts (2)

trackRenderStart (44-48)

trackRenderEnd (53-60)

src/fiber/commitWork.ts (1)

commitRoot (36-59)

src/fiber/fiberCreation.ts (1)

createWorkInProgress (102-161)

src/fiber/beginWork.ts (1)

beginWork (44-81)

src/fiber/completeWork.ts (1)

completeWork (39-67)

tests/fiber/reconciliation.test.ts (4)

src/fiber/fiberCreation.ts (1)

createFiber (25-85)

src/fiber/reconcileChildren.ts (1)

reconcileChildren (83-102)

src/fiber/fiberFlags.ts (2)

Placement (21-21)

UpdateEffect (27-27)

src/fiber/types.ts (1)

Fiber (141-335)

src/fiber/beginWork.ts (4)

src/fiber/types.ts (1)

Fiber (141-335)

src/fiber/reconcileChildren.ts (1)

reconcileChildren (83-102)

src/fiber/fiberCreation.ts (1)

createWorkInProgress (102-161)

src/fiber/fiberHooks.ts (1)

setCurrentRenderingFiber (34-40)

tests/fiber/completeWork.test.ts (6)

src/fiber/fiberCreation.ts (2)

createFiber (25-85)

createWorkInProgress (102-161)

src/fiber/completeWork.ts (1)

completeWork (39-67)

src/fiber/fiberFlags.ts (2)

Placement (21-21)

UpdateEffect (27-27)

src/fiber/fiberRoot.ts (1)

createFiberRoot (23-59)

src/fiber/beginWork.ts (1)

beginWork (44-81)

src/fiber/types.ts (1)

Fiber (141-335)

src/fiber/reconcileChildren.ts (4)

src/MiniReact.ts (2)

AnyMiniReactElement (8-8)

TEXT_ELEMENT (133-133)

src/fiber/types.ts (2)

Fiber (141-335)

isSameElementType (511-516)

src/fiber/fiberCreation.ts (4)

createFiberFromElement (171-219)

getElementKey (335-353)

getElementType (389-411)

createWorkInProgress (102-161)

src/fiber/fiberFlags.ts (3)

Placement (21-21)

Deletion (35-35)

UpdateEffect (27-27)

src/fiber/commitWork.ts (3)

src/fiber/types.ts (4)

FiberRoot (349-400)

Fiber (141-335)

PortalContainer (341-343)

RefObject (15-15)

src/fiber/fiberFlags.ts (2)

Placement (21-21)

UpdateEffect (27-27)

src/fiber/domOperations.ts (4)

insertBefore (23-33)

updateTextContent (147-149)

updateProperties (83-139)

removeChild (41-43)

src/hooks/fiberHooksImpl.ts (3)

src/hooks/types.ts (12)

UseStateHook (71-74)

StateHook (8-13)

StateOrEffectHook (62-69)

Reducer (86-86)

ReducerHook (30-36)

EffectCallback (77-77)

DependencyList (78-78)

EffectHook (15-22)

MutableRefObject (113-115)

RefHook (38-41)

MemoHook (43-48)

CallbackHook (50-56)

src/fiber/fiberHooks.ts (7)

getCurrentRenderingFiber (49-51)

createUpdateQueue (62-72)

processUpdateQueue (151-182)

dispatchSetState (110-140)

processReducerQueue (236-270)

dispatchReducerAction (195-225)

areDepsEqual (282-304)

src/fiber/types.ts (1)

UpdateQueue (79-116)

tests/fiber/fiberCreation.test.ts (4)

src/fiber/fiberCreation.ts (9)

createFiber (25-85)

createWorkInProgress (102-161)

createFiberFromElement (171-219)

createFiberFromText (227-240)

createFiberFromFragment (252-265)

cloneFiber (305-313)

getElementKey (335-353)

getElementProps (361-381)

getElementType (389-411)

src/fiber/fiberFlags.ts (2)

NoEffect (15-15)

NoLanes (42-42)

src/MiniReact.ts (2)

TEXT_ELEMENT (133-133)

FRAGMENT (133-133)

src/hooks/types.ts (1)

StateOrEffectHook (62-69)

tests/fiber/workLoop.test.ts (4)

src/fiber/fiberRoot.ts (1)

createFiberRoot (23-59)

src/fiber/fiberCreation.ts (1)

createFiber (25-85)

src/fiber/workLoop.ts (2)

scheduleUpdateOnFiber (39-46)

getCurrentFiber (282-284)

src/MiniReact.ts (3)

AnyMiniReactElement (8-8)

FRAGMENT (133-133)

PORTAL (133-133)

src/hooks/types.ts (1)

src/fiber/types.ts (1)

UpdateQueue (79-116)

tests/fiber/commitWork.test.ts (6)

src/fiber/types.ts (1)

FiberRoot (349-400)

src/fiber/fiberRoot.ts (1)

createFiberRoot (23-59)

src/fiber/fiberCreation.ts (2)

createFiber (25-85)

createWorkInProgress (102-161)

src/MiniReact.ts (1)

TEXT_ELEMENT (133-133)

src/fiber/fiberFlags.ts (3)

Placement (21-21)

UpdateEffect (27-27)

Deletion (35-35)

src/fiber/commitWork.ts (1)

commitRoot (36-59)

src/fiber/fiberHooks.ts (3)

src/fiber/types.ts (3)

Fiber (141-335)

UpdateQueue (79-116)

Update (54-69)

src/hooks/index.ts (3)

setCurrentRenderingFiber (55-55)

setCurrentRenderingFiber (57-57)

getCurrentRenderingFiber (56-56)

src/fiber/workLoop.ts (1)

scheduleUpdateOnFiber (39-46)

src/fiber/completeWork.ts (4)

src/fiber/types.ts (1)

Fiber (141-335)

src/fiber/fiberFlags.ts (2)

UpdateEffect (27-27)

Placement (21-21)

src/fiber/domOperations.ts (1)

setInitialProperties (51-72)

src/core/types.ts (1)

VDOMInstance (98-107)

src/fiber/fiberFlags.ts (1)

src/fiber/types.ts (2)

EffectTag (34-34)

Lanes (41-41)

src/fiber/domOperations.ts (1)

src/fiber/types.ts (1)

Props (23-28)

src/fiber/types.ts (3)

src/fiber/index.ts (23)

RefObject (17-17)

RefCallback (18-18)

Ref (16-16)

Props (15-15)

EffectTag (12-12)

Lanes (13-13)

SuspenseState (14-14)

Update (19-19)

UpdateQueue (20-20)

Fiber (10-10)

FiberRoot (11-11)

isFiber (23-23)

isFiberHostComponent (24-24)

isFiberFunctionComponent (25-25)

isFiberText (26-26)

isFiberFragment (27-27)

isFiberPortal (28-28)

isFiberRoot (29-29)

fiberHasEffect (30-30)

fiberHasChildEffects (31-31)

isSameType (32-32)

isSameElementType (33-33)

fiberNeedsRef (34-34)

src/MiniReact.ts (2)

AnyMiniReactElement (8-8)

ElementType (11-11)

src/hooks/types.ts (1)

StateOrEffectHook (62-69)

src/core/index.ts (3)

src/fiber/types.ts (1)

FiberRoot (349-400)

src/fiber/fiberRoot.ts (3)

hasFiberRoot (140-142)

getFiberRoot (130-132)

createFiberRoot (23-59)

src/fiber/workLoop.ts (1)

scheduleUpdateOnFiber (39-46)

🪛 ast-grep (0.39.6)

src/fiber/fiberRoot.ts

[warning] 195-195: Direct modification of innerHTML or outerHTML properties detected. Modifying these properties with unsanitized user input can lead to XSS vulnerabilities. Use safe alternatives or sanitize content first.
Context: container.innerHTML = ""
Note: [CWE-79] Improper Neutralization of Input During Web Page Generation [REFERENCES]
- https://owasp.org/www-community/xss-filter-evasion-cheatsheet
- https://cwe.mitre.org/data/definitions/79.html

(dom-content-modification)

src/core/index.ts

[warning] 97-97: Direct modification of innerHTML or outerHTML properties detected. Modifying these properties with unsanitized user input can lead to XSS vulnerabilities. Use safe alternatives or sanitize content first.
Context: containerNode.innerHTML = ""
Note: [CWE-79] Improper Neutralization of Input During Web Page Generation [REFERENCES]
- https://owasp.org/www-community/xss-filter-evasion-cheatsheet
- https://cwe.mitre.org/data/definitions/79.html

(dom-content-modification)

🪛 LanguageTool

docs/02-work-loop.md

[style] ~355-~355: Three successive sentences begin with the same word. Consider rewording the sentence or use a thesaurus to find a synonym.
Context: ...(does workInProgress become null)? 3. Is the effect list being built correctly? ...

(ENGLISH_WORD_REPEAT_BEGINNING_RULE)

[style] ~356-~356: Three successive sentences begin with the same word. Consider rewording the sentence or use a thesaurus to find a synonym.
Context: ...e effect list being built correctly? 4. Is commit running after render completes? ...

(ENGLISH_WORD_REPEAT_BEGINNING_RULE)

[style] ~377-~377: ‘overall structure’ might be wordy. Consider a shorter alternative.
Context: ...ures later without major changes to the overall structure.

(EN_WORDINESS_PREMIUM_OVERALL_STRUCTURE)

docs/04-event-system.md

[style] ~51-~51: ‘exact same’ might be wordy. Consider a shorter alternative.
Context: ...ent` is cached so we can add/remove the exact same function reference. ## Initialization ...

(EN_WORDINESS_PREMIUM_EXACT_SAME)

docs/03-reconciliation.md

[style] ~228-~228: Consider using “who” when you are referring to people instead of objects.
Context: ...as PLACEMENT) - Delete any old children that don't match ## Array Reconciliation T...

(THAT_WHO)

[style] ~445-~445: You have already used this phrasing in nearby sentences. Consider replacing it to add variety to your writing.
Context: ..., we can reuse the fiber. Otherwise, we need to create a new one. ## Deletion When a ...

(REP_NEED_TO_VB)

docs/05-hooks-system.md

[style] ~164-~164: Consider a more concise word here.
Context: ...ng = null } ``` We process all updates in order to compute the new state. ## useEffect S...

(IN_ORDER_TO_PREMIUM)

docs/README.md

[style] ~177-~177: This wording could be more concise.
Context: ... performance: O(n) Reconciliation: Linear in number of children Effect Lists: Only pro...

(ADJECTIVE_IN_ATTRIBUTE)

🪛 markdownlint-cli2 (0.18.1)

example/README.md

112-112: Fenced code blocks should have a language specified

(MD040, fenced-code-language)

docs/02-work-loop.md

245-245: Fenced code blocks should have a language specified

(MD040, fenced-code-language)

docs/03-reconciliation.md

338-338: Fenced code blocks should have a language specified

(MD040, fenced-code-language)

407-407: Fenced code blocks should have a language specified

(MD040, fenced-code-language)

docs/05-hooks-system.md

461-461: Fenced code blocks should have a language specified

(MD040, fenced-code-language)

docs/01-fiber-architecture.md

56-56: Fenced code blocks should have a language specified

(MD040, fenced-code-language)

docs/README.md

110-110: Fenced code blocks should have a language specified

(MD040, fenced-code-language)

🔇 Additional comments (10)

example/.gitignore (1)

1-4: LGTM! Clean gitignore setup.

Yo, this is exactly what you want in a gitignore. Build artifacts (*.js, *.map), dependencies (node_modules), and that .DS_Store for the Mac devs. Chef's kiss. No weird patterns, no over-engineering. Just the essentials.

.gitignore (1)

178-178: LGTM!

Just formatting, no functional changes. Moving on.

tests/MiniReact.jsx.test.ts (2)

1-1: YES! Adding afterEach for cleanup.

Look at you importing afterEach! This is the setup for proper test cleanup. Let's see what you do with it...

19-24: THIS is proper test hygiene! LOVE IT!

BRO! You're cleaning up the DOM after each test! This is exactly what you should be doing. No more test pollution, no more "why does this test pass individually but fail in the suite" nonsense. You're removing the container from the DOM, checking parentNode first - defensive coding at its finest.

This is the kind of test discipline that separates the pros from the "works on my machine" crowd. Respect.

example/src/server.ts (1)

1-12: Static file serving looks solid.

The /app.js route is clean. Serving with Bun.file, proper content-type, cache headers. This is how you do it. No complaints here.

example/biome.json (1)

1-32: Clean biome config.

Standard biome setup - nothing wild here. Formatter enabled, linter enabled with recommended rules, ignoring the right directories. Tab indentation with width 2, double quotes, trailing commas - all reasonable choices.

This is exactly what a biome.json should look like. No over-configuration, no weird rules. Just good defaults.

src/jsx-dev-runtime.ts (1)

6-6: Nice - exposing jsxDEV as a direct named export.

So you were only exporting jsxDEV through the jsx and jsxs aliases, but now you're also exporting it directly. Smart move. This gives consumers the flexibility to import jsxDEV explicitly if they need it for debugging or tooling purposes, while maintaining backward compatibility with the aliases.

Clean API expansion. No breaking changes. This is how you do it.

biome.json (3)

16-17: Good call ignoring example/public.

Yeah, you don't want built artifacts and generated files in your lint/format runs. Clean.

38-40: noNonNullAssertion as error - I LOVE this.

YES! Making non-null assertions an error in production code. This is the energy we need. Non-null assertions (the ! operator) are basically you telling TypeScript "trust me bro" and we all know how that ends.

If you think something can't be null, prove it with proper type guards or optional chaining. Don't just bang it away with ! and hope for the best.

This is the kind of strict TypeScript configuration that keeps your codebase clean and prevents runtime nullability bugs.

43-54: Test override for noNonNullAssertion - pragmatic choice.

So you're disabling the non-null assertion rule specifically for test files. I get it. In tests, you're often asserting on things you know exist because you just set them up. Using non-null assertions in test code to clean up noise is reasonable.

BUT - and I'm watching you here - don't let this become an excuse for sloppy test setup. If you find yourself banging away with ! all over your tests, that's a smell that your test fixtures might need better types or setup.

This is fine for now, but keep it clean.

…test\n stability\n\n Address multiple issues identified in code review:\n\n **Build & CI**\n - Add typecheck to prepublishOnly pipeline to catch type errors before\n publishing\n\n **Core Fixes**\n - Fix ref lifecycle: detach old refs before attaching new ones when ref\n identity changes\n - Fix memo bailout sibling chain corruption by cloning entire child list\n instead of just first child\n - Convert EffectTag from string literals to bitwise flags to support combining\n multiple effects (Placement + Update)\n - Fix effect tag assignments to use |= instead of = to preserve existing flags\n (e.g., Placement)\n - Fix createFiberFromElement to return null for null/undefined elements (valid\n "render nothing" case)\n - Fix double-deletion bug by checking Deletion flag before calling deleteChild\n\n **Rendering Fixes**\n - Change truthy checks to nullish checks (?? and != null) to preserve valid\n falsy renderables (0, "", false)\n - Remove manual DOM clearing (innerHTML) to let fiber commit phase handle \n deletions properly via deletion list\n\n **Test Stability**\n - Remove all wall-clock timing assertions (performance.now() +\n expect(duration).toBeLessThan())\n - Replace with deterministic structural assertions (node counts, depth\n verification, effect chains)\n - Eliminated 11 flaky timing checks across beginWork, completeWork,\n integration, reconciliation, and workLoop tests

coderabbitai

Actionable comments posted: 14

📜 Review details

Configuration used: CodeRabbit UI

Review profile: ASSERTIVE

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between 341cc53 and adc490d.

📒 Files selected for processing (30)

docs/01-fiber-architecture.md (1 hunks)
docs/02-work-loop.md (1 hunks)
docs/03-reconciliation.md (1 hunks)
docs/05-hooks-system.md (1 hunks)
docs/README.md (1 hunks)
example/README.md (1 hunks)
example/src/server.ts (1 hunks)
example/src/templates/index.html (1 hunks)
example/tsconfig.json (1 hunks)
package.json (1 hunks)
src/core/index.ts (3 hunks)
src/events/eventSystem.ts (1 hunks)
src/fiber/beginWork.ts (1 hunks)
src/fiber/commitWork.ts (1 hunks)
src/fiber/completeWork.ts (1 hunks)
src/fiber/fiberCreation.ts (1 hunks)
src/fiber/fiberFlags.ts (1 hunks)
src/fiber/fiberRoot.ts (1 hunks)
src/fiber/reconcileChildren.ts (1 hunks)
src/fiber/types.ts (1 hunks)
src/hooks/fiberHooksImpl.ts (1 hunks)
src/hooks/types.ts (3 hunks)
tests/MiniReact.falsyValues.test.ts (1 hunks)
tests/fiber/beginWork.test.ts (1 hunks)
tests/fiber/completeWork.test.ts (1 hunks)
tests/fiber/effectTags.test.ts (1 hunks)
tests/fiber/fiberCreation.test.ts (1 hunks)
tests/fiber/integration.test.ts (1 hunks)
tests/fiber/reconciliation.test.ts (1 hunks)
tests/fiber/workLoop.test.ts (1 hunks)

🧰 Additional context used

🧠 Learnings (1)

📓 Common learnings

Learnt from: MarcelOlsen
Repo: MarcelOlsen/mini-react PR: 8
File: README.md:701-708
Timestamp: 2025-06-17T12:40:39.737Z
Learning: MarcelOlsen prefers to keep test documentation simple with just one example of running specific test files, rather than listing detailed commands for each test suite in the README.

🧬 Code graph analysis (18)

tests/fiber/workLoop.test.ts (3)

src/fiber/fiberRoot.ts (1)

createFiberRoot (23-59)

src/fiber/fiberCreation.ts (1)

createFiber (25-85)

src/fiber/workLoop.ts (2)

scheduleUpdateOnFiber (39-46)

getCurrentFiber (282-284)

src/fiber/commitWork.ts (4)

src/fiber/types.ts (4)

FiberRoot (350-401)

Fiber (142-336)

PortalContainer (342-344)

RefObject (15-15)

src/fiber/fiberFlags.ts (3)

hasEffectTag (75-77)

Placement (22-22)

UpdateEffect (28-28)

src/MiniReact.ts (2)

PORTAL (133-133)

TEXT_ELEMENT (133-133)

src/fiber/domOperations.ts (4)

insertBefore (23-33)

updateTextContent (147-149)

updateProperties (83-139)

removeChild (41-43)

tests/fiber/completeWork.test.ts (6)

src/fiber/fiberCreation.ts (2)

createFiber (25-85)

createWorkInProgress (102-161)

src/fiber/completeWork.ts (1)

completeWork (39-67)

src/fiber/fiberFlags.ts (2)

Placement (22-22)

UpdateEffect (28-28)

src/fiber/fiberRoot.ts (1)

createFiberRoot (23-59)

src/fiber/beginWork.ts (1)

beginWork (44-81)

src/fiber/types.ts (1)

Fiber (142-336)

tests/fiber/beginWork.test.ts (3)

src/fiber/fiberCreation.ts (2)

createFiber (25-85)

createWorkInProgress (102-161)

src/fiber/beginWork.ts (1)

beginWork (44-81)

src/fiber/fiberRoot.ts (1)

createFiberRoot (23-59)

tests/fiber/effectTags.test.ts (1)

src/fiber/fiberFlags.ts (1)

hasEffectTag (75-77)

src/fiber/reconcileChildren.ts (3)

src/fiber/types.ts (2)

Fiber (142-336)

isSameElementType (512-517)

src/fiber/fiberCreation.ts (4)

createFiberFromElement (220-270)

getElementKey (386-404)

getElementType (440-462)

createWorkInProgress (102-161)

src/fiber/fiberFlags.ts (4)

Placement (22-22)

hasEffectTag (75-77)

Deletion (36-36)

UpdateEffect (28-28)

tests/fiber/fiberCreation.test.ts (3)

src/fiber/fiberCreation.ts (9)

createFiber (25-85)

createWorkInProgress (102-161)

createFiberFromElement (220-270)

createFiberFromText (278-291)

createFiberFromFragment (303-316)

cloneFiber (356-364)

getElementKey (386-404)

getElementProps (412-432)

getElementType (440-462)

src/fiber/fiberFlags.ts (3)

NoEffect (16-16)

NoLanes (43-43)

UpdateEffect (28-28)

src/hooks/types.ts (1)

StateOrEffectHook (62-69)

src/fiber/completeWork.ts (4)

src/fiber/types.ts (1)

Fiber (142-336)

src/fiber/fiberFlags.ts (2)

UpdateEffect (28-28)

Placement (22-22)

src/fiber/domOperations.ts (1)

setInitialProperties (51-72)

src/core/types.ts (1)

VDOMInstance (98-107)

tests/fiber/reconciliation.test.ts (4)

src/fiber/fiberCreation.ts (1)

createFiber (25-85)

src/fiber/reconcileChildren.ts (1)

reconcileChildren (83-102)

src/fiber/fiberFlags.ts (2)

Placement (22-22)

UpdateEffect (28-28)

src/fiber/types.ts (1)

Fiber (142-336)

src/fiber/types.ts (3)

src/MiniReact.ts (2)

AnyMiniReactElement (8-8)

ElementType (11-11)

src/fiber/fiberFlags.ts (1)

Update (30-30)

src/hooks/types.ts (1)

StateOrEffectHook (62-69)

src/hooks/fiberHooksImpl.ts (3)

src/hooks/types.ts (12)

UseStateHook (71-74)

StateHook (8-13)

StateOrEffectHook (62-69)

Reducer (86-86)

ReducerHook (30-36)

EffectCallback (77-77)

DependencyList (78-78)

EffectHook (15-22)

MutableRefObject (113-115)

RefHook (38-41)

MemoHook (43-48)

CallbackHook (50-56)

src/fiber/fiberHooks.ts (7)

getCurrentRenderingFiber (49-51)

createUpdateQueue (62-72)

processUpdateQueue (151-182)

dispatchSetState (110-140)

processReducerQueue (236-270)

dispatchReducerAction (195-225)

areDepsEqual (282-304)

src/fiber/types.ts (1)

UpdateQueue (80-117)

src/fiber/fiberRoot.ts (2)

src/fiber/types.ts (2)

FiberRoot (350-401)

Fiber (142-336)

src/fiber/fiberFlags.ts (1)

NoLanes (43-43)

src/fiber/beginWork.ts (4)

src/fiber/types.ts (1)

Fiber (142-336)

src/fiber/reconcileChildren.ts (1)

reconcileChildren (83-102)

src/fiber/fiberCreation.ts (1)

cloneChildFibers (174-210)

src/fiber/fiberHooks.ts (1)

setCurrentRenderingFiber (34-40)

tests/fiber/integration.test.ts (4)

src/fiber/fiberRoot.ts (1)

createFiberRoot (23-59)

src/fiber/workLoop.ts (1)

scheduleUpdateOnFiber (39-46)

src/MiniReact.ts (3)

TEXT_ELEMENT (133-133)

FRAGMENT (133-133)

AnyMiniReactElement (8-8)

src/fiber/types.ts (1)

Fiber (142-336)

src/fiber/fiberFlags.ts (2)

src/fiber/index.ts (18)

NoEffect (39-39)

EffectTag (12-12)

Placement (40-40)

UpdateEffect (41-41)

Update (19-19)

Deletion (42-42)

NoLanes (43-43)

Lanes (13-13)

SyncLane (44-44)

DefaultLane (45-45)

IdleLane (46-46)

isEffectTagMutation (47-47)

includesSomeLane (48-48)

mergeLanes (49-49)

removeLanes (50-50)

isSubsetOfLanes (51-51)

getHighestPriorityLane (52-52)

includesSyncLane (53-53)

src/fiber/types.ts (3)

EffectTag (35-35)

Update (55-70)

Lanes (42-42)

src/hooks/types.ts (1)

src/fiber/types.ts (1)

UpdateQueue (80-117)

src/core/index.ts (3)

src/fiber/types.ts (1)

FiberRoot (350-401)

src/fiber/fiberRoot.ts (3)

hasFiberRoot (140-142)

getFiberRoot (130-132)

createFiberRoot (23-59)

src/fiber/workLoop.ts (1)

scheduleUpdateOnFiber (39-46)

src/fiber/fiberCreation.ts (3)

src/MiniReact.ts (5)

ElementType (11-11)

AnyMiniReactElement (8-8)

TEXT_ELEMENT (133-133)

FRAGMENT (133-133)

PORTAL (133-133)

src/fiber/types.ts (2)

Props (23-28)

Fiber (142-336)

src/fiber/fiberFlags.ts (2)

NoEffect (16-16)

NoLanes (43-43)

🪛 ast-grep (0.39.7)

src/fiber/fiberRoot.ts

[warning] 195-195: Direct modification of innerHTML or outerHTML properties detected. Modifying these properties with unsanitized user input can lead to XSS vulnerabilities. Use safe alternatives or sanitize content first.
Context: container.innerHTML = ""
Note: [CWE-79] Improper Neutralization of Input During Web Page Generation [REFERENCES]
- https://owasp.org/www-community/xss-filter-evasion-cheatsheet
- https://cwe.mitre.org/data/definitions/79.html

(dom-content-modification)

🪛 LanguageTool

docs/02-work-loop.md

[style] ~355-~355: Three successive sentences begin with the same word. Consider rewording the sentence or use a thesaurus to find a synonym.
Context: ...(does workInProgress become null)? 3. Is the effect list being built correctly? ...

(ENGLISH_WORD_REPEAT_BEGINNING_RULE)

[style] ~356-~356: Three successive sentences begin with the same word. Consider rewording the sentence or use a thesaurus to find a synonym.
Context: ...e effect list being built correctly? 4. Is commit running after render completes? ...

(ENGLISH_WORD_REPEAT_BEGINNING_RULE)

[style] ~377-~377: ‘overall structure’ might be wordy. Consider a shorter alternative.
Context: ...ures later without major changes to the overall structure.

(EN_WORDINESS_PREMIUM_OVERALL_STRUCTURE)

docs/05-hooks-system.md

[style] ~164-~164: Consider a more concise word here.
Context: ...ng = null } ``` We process all updates in order to compute the new state. ## useEffect S...

(IN_ORDER_TO_PREMIUM)

docs/03-reconciliation.md

[style] ~228-~228: Consider using “who” when you are referring to people instead of objects.
Context: ...as PLACEMENT) - Delete any old children that don't match ## Array Reconciliation T...

(THAT_WHO)

[style] ~445-~445: You have already used this phrasing in nearby sentences. Consider replacing it to add variety to your writing.
Context: ..., we can reuse the fiber. Otherwise, we need to create a new one. ## Deletion When a ...

(REP_NEED_TO_VB)

docs/README.md

[style] ~177-~177: This wording could be more concise.
Context: ... performance: O(n) Reconciliation: Linear in number of children Effect Lists: Only pro...

(ADJECTIVE_IN_ATTRIBUTE)

🪛 markdownlint-cli2 (0.18.1)

docs/README.md

7-7: Headings should be surrounded by blank lines
Expected: 1; Actual: 0; Below