How Vue's reactivity is structuredAn interactive map of the Vue reactivity codebase. The thirteen files behind ref(), reactive() and computed(). The circles between them are real: that is how reactivity works.

Files visualized: 13

Languages: TypeScript

Topics: reactivity, framework

Source repository: https://github.com/vuejs/core

Structure13 files and 46 connections between their symbols. Paths are relative to packages/reactivity/src.Most depended on

constants.ts, imported by 9 files

warning.ts, imported by 8 files

dep.ts, imported by 6 files

effect.ts, imported by 5 files

reactive.ts, imported by 5 files

Files

constants.ts: no top-level classes or functions

warning.ts: 1 function

dep.ts: 2 classes, 4 functions; imports computed.ts, constants.ts, effect.ts

effect.ts: 1 class, 16 functions; imports computed.ts, constants.ts, dep.ts, effectScope.ts, warning.ts

reactive.ts: 1 class, 14 functions; imports baseHandlers.ts, collectionHandlers.ts, constants.ts, ref.ts, warning.ts

computed.ts: 1 class, 1 function; imports constants.ts, dep.ts, effect.ts, ref.ts, warning.ts

ref.ts: 4 classes, 12 functions; imports computed.ts, constants.ts, dep.ts, reactive.ts, warning.ts

effectScope.ts: 1 class, 3 functions; imports effect.ts, warning.ts

arrayInstrumentations.ts: 3 functions; imports constants.ts, dep.ts, effect.ts, reactive.ts

baseHandlers.ts: 3 classes, 1 function; imports arrayInstrumentations.ts, constants.ts, dep.ts, reactive.ts, ref.ts, warning.ts

collectionHandlers.ts: 7 functions; imports constants.ts, dep.ts, reactive.ts, warning.ts

index.ts: no top-level classes or functions

watch.ts: 4 functions; imports computed.ts, constants.ts, effect.ts, effectScope.ts, reactive.ts, ref.ts, warning.ts

Files that import each other

baseHandlers.ts and reactive.ts

collectionHandlers.ts and reactive.ts

computed.ts and dep.ts

computed.ts and effect.ts

dep.ts and effect.ts

effect.ts and effectScope.ts

reactive.ts and ref.ts

NeedyNodes is a free, browser-based tool that turns a codebase into an interactive dependency map: folders become regions, files are laid out in the direction their imports run, and circular dependencies or dead exports are flagged automatically. Point at a file to see what it uses and what uses it, or double click it to see every file a change to it can reach. It parses JavaScript, TypeScript, Python, Go, Rust, Vue and Svelte, up to 1000 files per map. Nothing is uploaded: parsing runs entirely in the browser.Browse all visualized codebases · Visualize your own codebase