### HTML: Vue SFC Example for Plugin Processing

Source: https://context7.com/johnsoncodehk/muggle-string/llms.txt

An example Vue Single File Component (SFC) that would be processed by a language plugin like the one shown in the TypeScript example. It contains a standard script block and a custom block ('more-script') which the plugin is designed to interact with.

```html
<script>problems = 99</script>

<more-script lang="js">console.log( answer )</more-script>
```

--------------------------------

### TypeScript Segment Type Definition and Examples

Source: https://context7.com/johnsoncodehk/muggle-string/llms.txt

Defines the Segment type, the core building block for muggle-string, representing text with optional source mapping. Demonstrates simple, mapped, and custom data segments.

```typescript
type Segment<T = typeof NO_DATA_SYMBOL> = string | (
    T extends typeof NO_DATA_SYMBOL ?
    [text: string, source: string | undefined, sourceOffset: number] :
    [text: string, source: string | undefined, sourceOffset: number, data: T]
);

// Simple string segment
const simple: Segment = 'hello world';

// Segment with source mapping
const mapped: Segment = ['hello world', undefined, 0];

// Segment with custom data (e.g., language capabilities)
const withData: Segment<{ hover: boolean }> = [
    'console.log(answer)',
    'source.ts',
    0,
    { hover: true }
];
```

--------------------------------

### Complex Pattern Replacement with Capture Groups (TypeScript)

Source: https://context7.com/johnsoncodehk/muggle-string/llms.txt

Shows how to use the `replace` function with regular expressions, including capture groups and dynamic replacer functions. This example adds type annotations to a JavaScript function signature.

```typescript
import { replace, toString, Segment } from 'muggle-string';

const s: Segment[] = ['function add(a, b) { return a + b; }'];

// Add type annotations
replace(s, /function\s+(\w+)\s*\(([^)]+)\)/, (match) => {
    return 'function add(a: number, b: number): number';
});

console.log(toString(s));
// 'function add(a: number, b: number): number { return a + b; }'
```

--------------------------------

### TypeScript Text Replacement: replaceAll

Source: https://context7.com/johnsoncodehk/muggle-string/llms.txt

Replaces all occurrences of a global regular expression pattern within an array of segments. Examples include capitalizing words and replacing all digits.

```typescript
import { replaceAll, toString, Segment } from 'muggle-string';

const s: Segment[] = ['foo bar baz'];

// Capitalize first letter of each word
replaceAll(s, /\b\w/g, (match) => match.toUpperCase());
console.log(toString(s)); // 'Foo Bar Baz'

// Replace all digits
const s2: Segment[] = ['code: 123, line: 456'];
replaceAll(s2, /\d+/g, 'X');
console.log(toString(s2)); // 'code: X, line: X'
```

--------------------------------

### TypeScript String Conversion: toString

Source: https://context7.com/johnsoncodehk/muggle-string/llms.txt

Converts an array of muggle-string segments into a plain string by concatenating their text content. Shows an example with mixed segment types.

```typescript
import { toString, Segment } from 'muggle-string';

const segments: Segment[] = [
    'hello',
    [' world', undefined, 0],
    '!'
];

const result = toString(segments);
console.log(result); // 'hello world!'
```

--------------------------------

### TypeScript: Vue Language Plugin for SFC Transformation

Source: https://context7.com/johnsoncodehk/muggle-string/llms.txt

Provides a complete example of a Vue.js language plugin using `muggle-string` to transform Vue Single File Component (SFC) content. This plugin allows for modification of script content and processing of custom blocks while preserving language service capabilities like hover, references, and definitions. It leverages `replace` and array manipulation methods on the `Segment[]` content.

```typescript
import { toString, replace, Segment } from 'muggle-string';

/** @type {import('@volar/vue-language-core').VueLanguagePlugin} */
const plugin = () => {
    return {
        name: 'example-vue-language-plugin',
        version: 1,
        resolveEmbeddedFile(fileName, sfc, embeddedFile) {
            if (embeddedFile.fileName.replace(fileName, '').match(/^\.(js|ts|jsx|tsx)$/)) {

                const s = embeddedFile.content; // Already a Segment[]

                // Original: 'problems = 99'
                console.log(toString(s));

                // Transform the script content
                replace(s, 'problems', 'answer');
                console.log(toString(s)); // 'answer = 99'

                replace(s, '99', '42');
                console.log(toString(s)); // 'answer = 42'

                // Add variable declaration
                s.unshift('var ');
                s.push(';');
                console.log(toString(s)); // 'var answer = 42;'

                // Process custom blocks with language capabilities
                for (const block of sfc.customBlocks) {
                    if (block.type === 'more-script') {
                        s.push([
                            block.content,      // text to add
                            block.name,         // source file name
                            0,                  // offset in source
                            {
                                // Enable language service features
                                hover: true,
                                references: true,
                                definition: true,
                                diagnostic: true,
                                rename: true,
                                completion: true,
                                semanticTokens: true,
                            },
                        ]);
                        console.log(toString(s));
                        // 'var answer = 42;console.log( answer )'
                    }
                }
            }
        }
    };
};

module.exports = plugin;
```

--------------------------------

### Vue Language Plugin with muggle-string - TypeScript

Source: https://github.com/johnsoncodehk/muggle-string/blob/master/README.md

Complete example demonstrating how to use muggle-string functions (toString, replace) within a Vue language plugin to manipulate embedded file content. The plugin processes JavaScript/TypeScript blocks and custom blocks, applying string transformations and adding language capabilities metadata. This shows practical usage of the library for code generation within Vue SFC files.

```typescript
import {
	toString,
	replace,
} from 'muggle-string';

/** @type {import('@volar/vue-language-core').VueLanguagePlugin} */
const plugin = () => {
	return {
		name: 'example-vue-language-plugin',
		version: 1,
		resolveEmbeddedFile(fileName, sfc, embeddedFile) {
			if (embeddedFile.fileName.replace(fileName, '').match(/^\.(js|ts|jsx|tsx)$/)) {

				const s = embeddedFile.content;
				toString(s); // 'problems = 99'

				replace(s, 'problems', 'answer');
				toString(s); // 'answer = 99'

				replace(s, '99', '42');
				toString(s); // 'answer = 42'

				// add string by Array method directly
				s.unshift('var ');
				s.push(';');
				toString(s); // 'var answer = 42;'

				for (const block of sfc.customBlocks) {
					if (block.type === 'more-script') {
						s.push([
							block.content, // text to add
							block.name, // source
							0, // content offset in source
							{
								// language capabilities to enable in this segment
								hover: true,
								references: true,
								definition: true,
								diagnostic: true,
								rename: true,
								completion: true,
								semanticTokens: true,
							},
						]);
						toString(s); // 'var answer = 42;console.log( answer )'
					}
				}
			}
		}
	};
};
module.exports = plugin;
```

--------------------------------

### Combine Source-Mapped and Unmapped Segments (TypeScript)

Source: https://context7.com/johnsoncodehk/muggle-string/llms.txt

Illustrates creating a segment, modifying it with unmapped string segments (like wrappers), while preserving the original source-mapped segment for IDE features. This allows targeted IDE support.

```typescript
import { create, replaceRange, Segment } from 'muggle-string';

const s = create('userInput');
console.log(s); // [['userInput', undefined, 0]]

// Wrap with sanitization function (unmapped)
s.unshift('sanitize(');
s.push(')');

// The original 'userInput' remains source-mapped
console.log(s);
// ['sanitize(', ['userInput', undefined, 0], ')']

// IDE can still provide features for 'userInput' but not the wrapper
```

--------------------------------

### TypeScript String Creation: create

Source: https://context7.com/johnsoncodehk/muggle-string/llms.txt

Creates a new array of muggle-string segments from a source string, automatically applying full source mapping tracking. Shows the resulting segment structure and its string representation.

```typescript
import { create, toString } from 'muggle-string';

const segments = create('problems = 99');
console.log(segments);
// [['problems = 99', undefined, 0]]

console.log(toString(segments));
// 'problems = 99'
```

--------------------------------

### Attach Metadata to Segments for IDE Features (TypeScript)

Source: https://context7.com/johnsoncodehk/muggle-string/llms.txt

Demonstrates attaching language-specific capabilities as metadata to code segments. This allows IDEs to provide features like hover, references, and definition for the segment.

```typescript
import { Segment } from 'muggle-string';

interface LanguageCapabilities {
    hover: boolean;
    references: boolean;
    definition: boolean;
    diagnostic: boolean;
    rename: boolean;
    completion: boolean;
    semanticTokens: boolean;
}

const segments: Segment<LanguageCapabilities>[] = [
    'import React from "react";\n',
    [
        'function MyComponent() { return <div>Hello</div>; }',
        'source.tsx',
        0,
        {
            hover: true,
            references: true,
            definition: true,
            diagnostic: true,
            rename: true,
            completion: true,
            semanticTokens: true,
        }
    ],
    '\nexport default MyComponent;'
];
```

--------------------------------

### TypeScript: Chained String Transformations with Source Mapping

Source: https://context7.com/johnsoncodehk/muggle-string/llms.txt

Illustrates advanced usage patterns of `muggle-string`, specifically chaining multiple string transformations while preserving source mapping information. The `create` function initializes a Segment array from a string, and `replaceRange` is used to modify parts of the string, maintaining offsets for subsequent operations. `toString` then renders the final transformed string.

```typescript
import { create, replaceRange, toString, Segment } from 'muggle-string';

// Start with source-mapped content
const s = create('const x = getValue();');
console.log(s);
// [['const x = getValue();', undefined, 0]]

// Replace 'const' with 'let'
replaceRange(s, 0, 5, 'let');
console.log(s);
// ['let', [' x = getValue();', undefined, 5]]

// Replace function call with inline value
replaceRange(s, 9, 21, '42');
console.log(s);
// ['let', [' x = ', undefined, 5], '42']

console.log(toString(s)); // 'let x = 42'
```

--------------------------------

### TypeScript Text Replacement: replaceRange

Source: https://context7.com/johnsoncodehk/muggle-string/llms.txt

Replaces a range of text within segments by character offsets. Demonstrates basic replacement, preservation of source mapping, and using mapped segments as replacements.

```typescript
import { replaceRange, toString, Segment, create } from 'muggle-string';

// Basic replacement without source mapping
const s: Segment[] = ['problems = 99'];
replaceRange(s, 0, 8, 'answer');
console.log(toString(s)); // 'answer = 99'

replaceRange(s, 9, 11, '42');
console.log(toString(s)); // 'answer = 42'

// Replacement with source mapping preservation
const s2 = create('problems = 99');
console.log(s2); // [['problems = 99', undefined, 0]]

replaceRange(s2, 0, 8, 'answer');
console.log(s2); // ['answer', [' = 99', undefined, 8]]

replaceRange(s2, 9, 11, '42');
console.log(s2); // ['answer', [' = ', undefined, 8], '42']

// Using mapped segments as replacements
const s3 = create('problems = 99');
replaceRange(s3, 9, 10, ['-', undefined, 123]);
console.log(s3);
// [['problems ', undefined, 0], ['-', undefined, 123], [' 99', undefined, 10]]
console.log(toString(s3)); // 'problems - 99'
```

--------------------------------

### TypeScript Text Replacement: replace

Source: https://context7.com/johnsoncodehk/muggle-string/llms.txt

Replaces the first occurrence of a specified string or regular expression within an array of segments. Supports both string and function-based replacements.

```typescript
import { replace, toString, Segment } from 'muggle-string';

const s: Segment[] = ['problems = 99'];

replace(s, 'problems', 'answer');
console.log(toString(s)); // 'answer = 99'

replace(s, '99', '42');
console.log(toString(s)); // 'answer = 42'

// Using function replacer
const s2: Segment[] = ['value = 99'];
replace(s2, /\d+/, (match) => String(Number(match) + 1));
console.log(toString(s2)); // 'value = 100'
```

--------------------------------

### TypeScript String Conversion: getLength

Source: https://context7.com/johnsoncodehk/muggle-string/llms.txt

Calculates the total character length of a string represented by an array of muggle-string segments. Demonstrates usage with mapped segments.

```typescript
import { getLength, Segment } from 'muggle-string';

const segments: Segment[] = [
    'hello',
    [' world', undefined, 0]
];

const length = getLength(segments);
console.log(length); // 11
```

--------------------------------

### TypeScript: Array Manipulation for Segments

Source: https://context7.com/johnsoncodehk/muggle-string/llms.txt

Demonstrates how to use native JavaScript array methods to manipulate the Segment array, which stores the string data. Methods like `unshift`, `push`, and `splice` can be used to add or insert elements at the beginning, end, or middle of the segment list, respectively. These operations directly modify the array and affect the final string output when `toString` is called.

```typescript
import { toString, Segment } from 'muggle-string';

const s: Segment[] = ['answer = 42'];

// Add to beginning
s.unshift('var ');
console.log(toString(s)); // 'var answer = 42'

// Add to end
s.push(';');
console.log(toString(s)); // 'var answer = 42;'

// Insert in middle using splice
s.splice(2, 0, ' /* calculated */ ');
console.log(toString(s)); // 'var answer /* calculated */  = 42;'
```

--------------------------------

### TypeScript: Replace Text by Source Range in Segments

Source: https://context7.com/johnsoncodehk/muggle-string/llms.txt

Replaces text within a Segment array using original source offsets, not the current generated text offsets. This function is useful for transformations where the original source structure needs to be maintained. It returns a boolean indicating success and modifies the Segment array in place. Invalid ranges will result in a 'false' return value.

```typescript
import { replaceSourceRange, toString, Segment } from 'muggle-string';

const s: Segment[] = [['problems = 99', undefined, 0]];

// Replace "problems" (source offsets 0-8) with "answer"
const success1 = replaceSourceRange(s, undefined, 0, 8, 'answer');
console.log(success1); // true
console.log(s); // ['answer', [' = 99', undefined, 8]]

// Replace "99" (source offsets 11-13) with "42"
const success2 = replaceSourceRange(s, undefined, 11, 13, '42');
console.log(success2); // true
console.log(s); // ['answer', [' = ', undefined, 8], '42']

s.unshift('var ');
s.push(';');
console.log(toString(s)); // 'var answer = 42;'

// Failed replacements (invalid ranges return false)
const s2: Segment[] = [['problems = 99', undefined, 0]];
console.log(replaceSourceRange(s2, undefined, -1, 0)); // false
console.log(replaceSourceRange(s2, undefined, 0, 14)); // false
console.log(replaceSourceRange(s2, undefined, 14, 15)); // false
```

=== COMPLETE CONTENT === This response contains all available snippets from this library. No additional content exists. Do not make further requests.