Skip to content

Instantly share code, notes, and snippets.

@faraazahmad
Last active September 8, 2025 07:02
Show Gist options
  • Save faraazahmad/6d7bc44067596429fe73d630e5edb141 to your computer and use it in GitHub Desktop.
Save faraazahmad/6d7bc44067596429fe73d630e5edb141 to your computer and use it in GitHub Desktop.
graphsense - Get all functions that manage state (sveltejs/svelte)

User

Get all functions that manage state, use similar_functions tool.

Assistant

I'll search for functions that manage state in the project using the similar_functions tool.

Tool Call: Run MCP tool similar_functions Status: Completed

Found 23 similar functions:

  1. add_state_transformers
    • Path: /packages/svelte/src/compiler/phases/3-transform/client/visitors/shared/declarations.js:18-53
    • Summary: This function add_state_transformers adds transformation rules for state management in what appears to be a JavaScript/TypeScript framework. It processes state declarations and sets up handlers for reading, assigning, mutating, and updating state values. The function accepts a context parameter and specifically handles state sources, derived states, and legacy reactive bindings. It includes special handling for store subscriptions and different types of state updates, including prefix operations.

The transformers it adds handle:

  • Reading state values (with safety checks for var declarations)
  • Assigning new values (with store subscription management)
  • Mutating state (with runes-aware behavior)
  • Updating state (supporting prefix/postfix operations)
  1. prop
    • Path: /packages/svelte/src/internal/client/reactivity/props.js:262-433
    • Summary: Here's a summary of the prop function:

This function manages the synchronization between component props and internal state, particularly when props are written to or have default values. It handles various scenarios:

Key features:

  • Supports both immutable and mutable props
  • Handles bindable props with two-way data binding
  • Manages default (fallback) values
  • Supports both Svelte's legacy mode and Runes mode
  • Implements value synchronization between parent and child components

The function takes four parameters:

  1. props: Record of component properties
  2. key: Property name to manage
  3. flags: Bitfield controlling behavior (immutability, binding, etc.)
  4. fallback: Optional default value or function

Returns a getter/setter function that handles:

  • Reading the current prop value
  • Updating the prop value
  • Maintaining synchronization with parent component
  • Managing temporary local value changes

This is a core part of Svelte's reactivity system, handling prop management and state synchronization between components.

  1. update_reaction
    • Path: /packages/svelte/src/internal/client/runtime.js:253-356
    • Summary: Here's a summary of the update_reaction function:

This function manages the update cycle of a reaction in a reactive system. It:

  1. Saves the previous state/context variables
  2. Updates dependency tracking flags and states
  3. Executes the reaction's function
  4. Handles dependency management by:
    • Removing old reaction references
    • Adding new dependencies
    • Updating dependency arrays
  5. Handles untracked writes and possible effect self-invalidation
  6. Manages error handling
  7. Restores the previous state/context when complete

The function appears to be part of a reactive programming system, possibly handling side effects and dependency tracking in a component-based architecture.

  1. State_proxy_literal
    • Path: /packages/svelte/tests/snapshot/samples/state-proxy-literal/_expected/client/index.svelte.js:13-31
    • Summary: This function appears to be a UI component initialization that:
  2. Creates two state variables for storing string values
  3. Sets up a form with two input fields and a reset button
  4. Removes default behaviors from the input fields
  5. Binds the input values to their respective state variables
  6. Attaches a reset handler to the button
  7. Appends the created elements to a specified anchor point in the DOM

The function uses a custom utility library (indicated by the $ object) for DOM manipulation and state management.

  1. setup
    • Path: /benchmarking/benchmarks/reactivity/kairo/kairo_deep.js:7-41
    • Summary: This function appears to be a test setup for a reactive state management system. Here's a summary:

The function creates a chain of derived states where each state depends on the previous one, incrementing the value by 1. It includes:

  • An initial state 'head'
  • A chain of derived states of length 'len'
  • A counter to track render effects
  • A render effect that monitors the final derived state
  • A 'run' method that tests the reactivity by updating the head state and verifying propagation

The function returns an object with destroy and run methods for testing purposes.

  1. setup
    • Path: /benchmarking/benchmarks/reactivity/mol_bench.js:21-65
    • Summary: This function appears to be a test setup for a reactive state management system. Here's a summary:

The function creates a complex dependency graph using state variables (A, B) and derived values (C through G) with various computations and transformations. It sets up three render effects that push computed values to a results array. The function returns an object with a destroy method and a run method that:

  1. Clears the results array
  2. Executes two sequential state updates using flush operations
  3. Validates the resulting computations against expected values

The code appears to be testing the correctness of reactive updates and derived value calculations in a state management system.

  1. pop
    • Path: /packages/svelte/src/internal/client/context.js:140-172
    • Summary: Here's a summary of the pop function:

The pop function manages component context in what appears to be a reactive system or component framework. It:

  1. Handles component context stack manipulation
  2. Executes any pending component effects with proper effect/reaction state management
  3. Maintains the context stack by updating the current component context
  4. Returns either the provided component or an empty object

The function is generic, accepting and returning a type T that extends Record<string, any>, and the component parameter is optional.

  1. update_effect
    • Path: /packages/svelte/src/internal/client/runtime.js:419-473
    • Summary: Here's a summary of the update_effect function:

This function updates a given effect in a reactive system. It manages the effect's lifecycle by:

  1. Checking if the effect is destroyed
  2. Cleaning the effect's signal status
  3. Managing effect context and state
  4. Destroying children effects
  5. Executing teardown operations
  6. Updating reactions and handling teardown functions
  7. Updating version tracking
  8. Handling development-mode specific operations

The function includes special handling for block effects and development mode features, with proper cleanup in a try-finally block to ensure state is restored regardless of execution outcome.

  1. setup

    • Path: /benchmarking/benchmarks/reactivity/kairo/kairo_repeated.js:6-42
    • Summary: This function appears to be a test setup for a reactive state management system. It:
  2. Creates a reactive state variable 'head' initialized to 0

  3. Creates a derived state that multiplies 'head' by a predefined 'size'

  4. Sets up an effect system that tracks changes to the derived state

  5. Returns an object with:

    • A destroy method to clean up effects
    • A run method that tests the reactive system by:
      • Setting various values to 'head'
      • Verifying the derived state updates correctly
      • Ensuring the effect runs the expected number of times

The function seems designed to verify that state updates, derivations, and effects work properly in a reactive context.

  1. init
  • Path: /packages/svelte/src/internal/client/dom/legacy/lifecycle.js:12-68
  • Summary: Here's a summary for the init function:

This function handles legacy-mode lifecycle callbacks in a component context. It manages three types of lifecycle hooks: onMount, beforeUpdate, and afterUpdate. When immutable mode is enabled, it tracks prop changes by comparing previous and current values. The function sets up effect handlers to execute these lifecycle callbacks at appropriate times, with beforeUpdate running before state changes, onMount executing once when the component mounts (with cleanup handling), and afterUpdate running after state updates.

The function is specifically designed for legacy compatibility and won't execute if no callbacks are present in the component context.

  1. create_state_declarators
  • Path: /packages/svelte/src/compiler/phases/3-transform/client/visitors/VariableDeclaration.js:358-392
  • Summary: Here's a summary of the create_state_declarators function:

This function handles the creation of state declarations in legacy mode for a component system. It takes a variable declarator, component context, and a value expression as inputs. The function processes state declarations differently based on whether the declarator ID is a simple identifier or a more complex pattern:

  • For simple identifiers, it creates a mutable source using $.mutable_source
  • For complex patterns, it:
    1. Generates temporary variables
    2. Extracts paths and inserts from the declarator
    3. Creates derived values for arrays
    4. Handles state bindings with appropriate mutable or immutable declarations

The function returns an array of declarators that represent the transformed state declarations.

  1. push
  • Path: /packages/svelte/src/internal/client/context.js:103-133
  • Summary: Here's a summary of the push function:

This function appears to be part of a component management system that initializes a new component context. It takes component properties, a runes flag, and an optional function as parameters. The function:

  1. Creates a new component context object with various tracking properties
  2. Handles legacy mode initialization if enabled
  3. Sets up a teardown handler to mark the component as destroyed
  4. In development mode, stores reference to the component function

The function is primarily used for component lifecycle management and context initialization.

  1. non_reactive_update
  • Path: /packages/svelte/src/compiler/warnings.js:626-628
  • Summary: Here's a summary for the non_reactive_update function:

This function generates a warning when a variable is updated without being properly declared as a reactive state using $state(...). It takes a node and a variable name as parameters and issues a warning message indicating that changes to the variable won't trigger proper reactive updates. The function is used in Svelte's development tooling to help developers identify non-reactive state mutations.

Parameters:

  • node: A NodeLike object or null
  • name: The name of the variable being updated
  1. Bind_component_snippet
  • Path: /packages/svelte/tests/snapshot/samples/bind-component-snippet/_expected/server/index.svelte.js:8-35
  • Summary: This function appears to be a component renderer that implements a two-way data binding pattern. It manages a text input component with a reactive value property that triggers re-rendering when changed. The function uses a do-while loop to ensure all bindings are settled before completing the render cycle. It handles payload management for rendering and includes escape functionality for the output value.

Key features:

  • Two-way data binding implementation
  • Recursive rendering until settled
  • Payload management
  • Text input component integration
  • Value escaping for safe output
  1. toStore
  • Path: /packages/svelte/src/store/index-client.js:47-93
  • Summary: Here's a summary of the toStore function:

The toStore function creates a Svelte store from getter and optional setter functions. It can create either:

  1. A readable store (when only a getter is provided)
  2. A writable store (when both getter and setter are provided)

The function maintains reactivity by tracking effects and reactions, and sets up automatic subscription handling. It's particularly useful for converting state variables into stores, as shown in the example where a $state variable is wrapped into a store.

Key features:

  • Supports TypeScript generics
  • Handles both readable and writable store patterns
  • Preserves reactive context
  • Manages cleanup through teardown functions
  • Provides standard store interface (subscribe, set, update)

Example usage:

let count = $state(0);
const store = toStore(() => count, (v) => (count = v));
  1. setup_stores
  • Path: /packages/svelte/src/internal/client/reactivity/store.js:119-137
  • Summary: Here's a summary of the setup_stores function:

This function manages store subscriptions and their cleanup in a component lifecycle. It returns a tuple containing:

  1. A container object for store references
  2. A cleanup function that automatically unsubscribes from all stores when the component is destroyed

The cleanup function also marks the stores container as unmounted using a special property flag. This is typically used in reactive programming or state management systems to prevent memory leaks from lingering subscriptions.

  1. validate_mutation
  • Path: /packages/svelte/src/compiler/phases/3-transform/client/visitors/shared/utils.js:310-362
  • Summary: Here's a summary of the validate_mutation function:

This function validates mutations to props in development mode. It takes an assignment or update expression node, a context object, and an expression as parameters. The function:

  1. Checks if a property mutation is valid in the component's scope
  2. Tracks the property access path
  3. If validation is needed, wraps the expression with a validation call
  4. Returns either the original expression (if validation isn't needed) or a wrapped validation call

The function is primarily used for development-time prop mutation checking and helps maintain proper component state management.

  1. action
  • Path: /packages/svelte/src/internal/client/dom/elements/actions.js:13-43
  • Summary: This function implements an action system that binds DOM elements to reactive behaviors. Here's a summary:

The action function takes three parameters:

  • A DOM element
  • An action callback that generates an action payload
  • An optional getter function for values

It creates an effect that:

  1. Executes the provided action with the DOM element and initial value
  2. If a value getter is provided and the action has an update handler:
    • Sets up a render effect to track value changes
    • Calls the update handler when the value changes
  3. If the action has a destroy handler:
    • Returns a cleanup function that calls the destroy handler

The function is designed to work with both legacy reactive systems and modern state management approaches, ensuring proper tracking of state changes and cleanup.

  1. legacy_pre_effect_reset
  • Path: /packages/svelte/src/internal/client/reactivity/effects.js:294-319
  • Summary: This function implements a legacy pre-effect reset mechanism that:
  1. Executes within a render effect
  2. Processes dirty reactive statements (marked with $:)
  3. Updates effect statuses from CLEAN to MAYBE_DIRTY
  4. Checks and updates dirty effects
  5. Resets effect flags after processing

It's primarily used for handling legacy component state updates and effect management.

  1. build_assignment
  • Path: /packages/svelte/src/compiler/phases/3-transform/server/visitors/AssignmentExpression.js:26-100
  • Summary: Here's a summary of the build_assignment function:

This function handles assignment operations in a Svelte-like context, specifically dealing with state management and store assignments. It takes an operator, left and right expressions, and a context object as parameters.

Key functionality:

  1. Handles rune-based state assignments within class contexts
  2. Processes derived state assignments
  3. Manages store-related assignments and mutations
  4. Returns either a transformed Expression or null if no transformation is needed

The function primarily transforms assignments involving $store variables and state fields, while leaving other types of assignments unchanged (returning null).

  1. setup
  • Path: /benchmarking/benchmarks/reactivity/kairo/kairo_avoidable.js:5-35
  • Summary: This function appears to be a test or setup for a reactive system that demonstrates computation caching and state management. Here's a summary:

The function creates a chain of derived (computed) values starting from a head state, with each computation building on the previous one. It includes:

  • An initial state value (head)
  • Five computed values in sequence (computed1 through computed5)
  • A render effect that watches the final computed value
  • Some heavy computations (marked by busy() calls)
  • A test routine that verifies the computed values remain consistent through multiple state updates

The function returns an object with destroy and run methods to manage the reactive system's lifecycle and execute the test sequence.

  1. setup
  • Path: /benchmarking/benchmarks/reactivity/kairo/kairo_unstable.js:4-41
  • Summary: This function appears to be testing a reactive state management system. Here's a summary:

The function creates a reactive system with:

  • A base state value head
  • Two derived values: double (2x head) and inverse (-1x head)
  • A complex derived value current that performs calculations based on head's value
  • An effect system that tracks changes through a counter

The function returns an object with:

  • A destroy method to clean up the reactive system
  • A run method that tests the system by:
    1. Setting initial values and verifying calculations
    2. Running 100 state updates to ensure proper reactivity
    3. Verifying the counter tracked all updates correctly

This appears to be a test harness for validating reactive state management behavior.

  1. TransitionDirective
  • Path: /packages/svelte/src/compiler/phases/3-transform/client/visitors/TransitionDirective.js:12-29
  • Summary: This function processes transition directives in a component, handling both intro and outro transitions. It:
  1. Sets transition flags based on modifiers (global/intro/outro)
  2. Creates arguments array with flags, state node, and transition name
  3. Optionally adds transition expression if present
  4. Adds the transition call to the component's after_update queue

The function takes an AST TransitionDirective node and ComponentContext as parameters.Total tokens used while classifying functions: 8753

Assistant

I found 23 functions that manage state in the Svelte project. Here's an overview of the key state management functions:

Core State Management Functions

  1. add_state_transformers - Adds transformation rules for state management, handling state declarations, reading, assigning, mutating, and updating state values

  2. prop - Manages synchronization between component props and internal state, handling bindable props with two-way data binding and default values

  3. update_reaction - Manages the update cycle of reactions in the reactive system, handling dependency tracking and state updates

  4. update_effect - Updates effects in the reactive system, managing effect lifecycle, cleanup, and state restoration

State Creation and Initialization

  1. create_state_declarators - Creates state declarations in legacy mode, handling both simple identifiers and complex patterns

  2. setup_stores - Manages store subscriptions and cleanup in component lifecycle

  3. toStore - Creates Svelte stores from getter/setter functions, converting state variables into stores

Context and Component State

  1. push and pop - Manage component context stack and handle component effects with proper state management

  2. init - Handles legacy-mode lifecycle callbacks (onMount, beforeUpdate, afterUpdate) with state change tracking

State Validation and Mutation

  1. validate_mutation - Validates mutations to props in development mode

  2. non_reactive_update - Generates warnings for non-reactive state updates

  3. build_assignment - Handles assignment operations for state management and store assignments

Action and Effect Management

  1. action - Binds DOM elements to reactive behaviors with state tracking

  2. legacy_pre_effect_reset - Implements legacy pre-effect reset for handling component state updates

Test and Benchmark Functions

The remaining functions (15-23) are primarily test setup functions for benchmarking and testing the reactive state management system, including various scenarios like deep derivations, repeated updates, and unstable computations.

These functions collectively form Svelte's comprehensive state management system, handling everything from basic state creation to complex reactive updates and component synchronization.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment