Skip to content

Instantly share code, notes, and snippets.

@faraazahmad
Created September 8, 2025 07:26
Show Gist options
  • Select an option

  • Save faraazahmad/d20057a8fade5e6818a59df652b455b3 to your computer and use it in GitHub Desktop.

Select an option

Save faraazahmad/d20057a8fade5e6818a59df652b455b3 to your computer and use it in GitHub Desktop.

User

Use similar_functions tool to find all functions that handle template expression parsing.

Assistant

I'll use the similar_functions tool to find functions that handle template expression parsing in the Svelte codebase.

Tool Call: Run MCP tool similar_functions Status: Completed

Found 10 similar functions:

  1. TaggedTemplateExpression
    • Path: /packages/svelte/src/compiler/phases/2-analyze/visitors/TaggedTemplateExpression.js:9-16
    • Summary: Here's a summary for the TaggedTemplateExpression function:

This function handles tagged template expressions in JavaScript, taking a node and context as parameters. It checks if there's an active expression and if the template tag is not pure. If both conditions are met, it marks the expression as having a call and state. Finally, it advances to the next context state.

The function appears to be part of a code analysis or transformation system, specifically dealing with template literal expressions that have tags (e.g., tag`template`).

  1. transform_template
    • Path: /packages/svelte/src/compiler/phases/3-transform/client/transform-template/index.js:38-68
    • Summary: Here's a summary for the transform_template function:

This function transforms a component's template state into a function call expression. It handles both tree and HTML representations of templates, supports different namespaces (HTML, SVG, MathML), and includes special handling for script tags. In development mode, it adds source location information to the template. The function takes a component state object, namespace string, and optional flags as parameters, and returns a function call expression.

The function appears to be part of a template compilation system, likely for a UI framework or component library.

  1. element
    • Path: /packages/svelte/src/compiler/phases/1-parse/state/element.js:52-417
    • Summary: Here's a summary of the element function:

This function parses HTML/SVelte elements in a template, handling various element types and their attributes. It:

  1. Processes HTML comments
  2. Handles both opening and closing tags
  3. Validates element names and special Svelte tags
  4. Manages element attributes and directives
  5. Handles special cases for <script>, <style>, and <textarea> elements
  6. Supports self-closing tags and void elements
  7. Maintains a stack of nested elements
  8. Provides error handling for invalid syntax
  9. Supports loose parsing mode for incomplete/malformed markup

The function is a core part of Svelte's template parser, responsible for converting HTML-like syntax into an Abstract Syntax Tree (AST).

Parameters:

  • parser: A Parser instance that maintains the parsing state and provides utility methods

The function doesn't return a value but modifies the parser's state and AST structure.

  1. text
    • Path: /packages/svelte/src/compiler/phases/1-parse/state/text.js:6-23
    • Summary: Here's a summary of the text function:

This function parses plain text content in a template until it encounters either a < or { character. It takes a Parser object as input, tracks the starting position, accumulates characters into a data string, and creates a Text node in the AST (Abstract Syntax Tree) with both raw text and decoded character references.

The function is primarily used for template parsing and handles the text content between HTML tags or template expressions.

  1. tag
    • Path: /packages/svelte/src/compiler/phases/1-parse/state/tag.js:18-48
    • Summary: Here's a summary for the tag function:

This function parses different types of tags in a template/markup language. It handles:

  • Opening tags (starting with #)
  • Next tags (starting with :)
  • Special tags (starting with @)
  • Closing tags (starting with /)
  • Expression tags (containing JavaScript expressions)

The function takes a Parser object as input, processes the tag based on its prefix, and appends the parsed result to the parser's output. For expression tags, it includes metadata about the expression.

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

This function processes an array of text nodes and expression tags to build a template literal or string literal expression. It:

  1. Takes an array of AST nodes (either Text or ExpressionTag), a component context, state, and a memoization function
  2. Combines text nodes and simple literal expressions directly into template strings
  3. Handles more complex expressions by:
    • Evaluating them when possible
    • Adding null coalescing operators where needed
    • Memoizing expressions as configured
  4. Returns an object containing:
    • A final expression (either a template literal or string literal)
    • A boolean indicating if the template contains stateful expressions

The function is particularly useful for optimizing template rendering by consolidating multiple nodes into a single expression where possible.

  1. read_sequence
    • Path: /packages/svelte/src/compiler/phases/1-parse/state/element.js:777-855
    • Summary: Here's a summary of the read_sequence function:

This function parses a template string to extract text and expression tags. It takes a Parser object, a completion check callback, and a location string as parameters. The function reads through the template character by character, identifying plain text and expressions wrapped in curly braces ({}). It handles special cases for block (#) and element (@) tags, validates their placement, and processes character references in text chunks. The function returns an array of Text and ExpressionTag nodes that represent the parsed template sequence.

Key features:

  • Processes both plain text and expression tags
  • Handles character reference decoding
  • Validates block and element tag placement
  • Supports loose parsing mode
  • Returns an AST (Abstract Syntax Tree) fragment
  1. ExpressionTag
    • Path: /packages/svelte/src/compiler/phases/2-analyze/visitors/ExpressionTag.js:11-26
    • Summary: Here's a summary for the ExpressionTag function:
/**
 * Processes an expression tag within an AST, validating its placement within a template
 * and marking the subtree as dynamic. Handles template context and expression metadata.
 * 
 * @param {AST.ExpressionTag} node - The expression tag node to process
 * @param {Context} context - The current compilation context
 */

This summary captures the main purposes of the function:

  1. Processing expression tags

  2. Validating tag placement in templates

  3. Marking subtrees as dynamic

  4. Managing context and expression metadata

  5. template_effect

    • Path: /packages/svelte/src/internal/client/reactivity/effects.js:335-353
    • Summary: Here's a summary for the template_effect function:

This function creates an effect for handling template expressions. It takes three parameters:

  • fn: A function that either accepts expressions or returns a void function
  • thunks: An array of thunk functions (optional)
  • d: A function that creates derived values (optional)

In development mode, it wraps the effect with additional stack trace information. In all cases, it creates derived values from the thunks and executes the function with the resolved derived values as arguments. Returns an Effect object.

The function is primarily used for template handling in a reactive context, managing derived values and their effects.

  1. next
  • Path: /packages/svelte/src/compiler/phases/1-parse/state/tag.js:437-548
  • Summary: Here's a summary of the next function:

This function handles the parsing of continuation blocks in a template language, specifically processing:

  1. else and else if clauses for IfBlocks
  2. else clauses for EachBlocks
  3. then and catch clauses for AwaitBlocks

The function takes a parser object as input and updates the parser's state by:

  • Validating correct syntax and token placement
  • Creating appropriate fragments and block structures
  • Managing the parser's stack and fragments
  • Throwing errors for invalid or duplicate clauses

It's primarily used for parsing control flow structures in what appears to be a template or markup language parser.Total tokens used while classifying functions: 4561

Assistant

Based on the search results, I found several functions that handle template expression parsing in the Svelte codebase. Here are the key functions:

Core Template Expression Parsing Functions:

  1. read_sequence - /packages/svelte/src/compiler/phases/1-parse/state/element.js:777-855

    • This is a key function that parses template strings to extract text and expression tags
    • Reads through templates character by character, identifying expressions wrapped in curly braces {}
    • Returns an array of Text and ExpressionTag nodes
  2. ExpressionTag - /packages/svelte/src/compiler/phases/2-analyze/visitors/ExpressionTag.js:11-26

    • Processes expression tag nodes within the AST
    • Validates tag placement within templates
    • Marks subtrees as dynamic and manages expression metadata
  3. tag - /packages/svelte/src/compiler/phases/1-parse/state/tag.js:18-48

    • Parses different types of tags including expression tags containing JavaScript expressions
    • Handles opening tags (#), next tags (:), special tags (@), and closing tags (/)
  4. TaggedTemplateExpression - /packages/svelte/src/compiler/phases/2-analyze/visitors/TaggedTemplateExpression.js:9-16

    • Handles tagged template expressions in JavaScript (e.g., tag`template`)
    • Part of the analysis phase for template literal expressions

Template Building and Transformation:

  1. build_template_chunk - /packages/svelte/src/compiler/phases/3-transform/client/visitors/shared/utils.js:39-125

    • Processes arrays of text nodes and expression tags to build template literals
    • Combines text nodes and expressions into optimized template strings
    • Handles memoization and null coalescing for complex expressions
  2. transform_template - /packages/svelte/src/compiler/phases/3-transform/client/transform-template/index.js:38-68

    • Transforms component template state into function call expressions
    • Handles both tree and HTML representations of templates
  3. template_effect - /packages/svelte/src/internal/client/reactivity/effects.js:335-353

    • Creates effects for handling template expressions in a reactive context
    • Manages derived values and their effects

These functions work together to parse, analyze, and transform template expressions throughout the Svelte compilation pipeline, from initial parsing through final code generation.

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