# muggle-string

> This library aims to provide codegen helpers and data structure for Vue language plugin API v1.x that does not depend on Volar runtime.

Latest version **0.4.1** (published 2023-12-06) · MIT license · 0 weekly downloads

## Install

```sh
npm install muggle-string
pnpm add muggle-string
yarn add muggle-string
bun add muggle-string
```

## Health

**Score 35/100 (D)** — status: abandoned.

Positive: has types; no vulnerabilities; high quality score.

Warnings: low downloads; no esm support; pre 1.0.

Negative: abandoned.

## Facts

| | |
|---|---|
| Version | 0.4.1 |
| Published | 2023-12-06 |
| First published | 2022-09-29 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | CommonJS |
| Dependencies | 0 |
| Unpacked size | 43.7 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 11 |
| Maintainers | johnsoncodehk |

## Links

- npm: https://www.npmjs.com/package/muggle-string
- Repository: https://github.com/johnsoncodehk/muggle-string
- Homepage: https://github.com/johnsoncodehk/muggle-string#readme
- Issues: https://github.com/johnsoncodehk/muggle-string/issues
- npm.io page: https://npm.io/package/muggle-string

## Recent versions

- 0.4.1 (latest) — 2023-12-06
- 0.4.0 — 2023-11-26
- 0.3.1 — 2023-05-09
- 0.3.0 — 2023-05-08
- 0.2.2 — 2023-01-18
- 0.2.1 — 2022-12-26
- 0.2.0 — 2022-12-26
- 0.1.0 — 2022-09-29

## README

This library aims to provide codegen helpers and data structure for Vue language plugin API v1.x that does not depend on Volar runtime.

## Why "Muggle"?

A better situation is Volar can use magic-string on the Vue plugin API, but currently can't do this easily.

This solution is just for Vue language plugin API v1.x and planned to be deprecate in v2.

## Usage

The example is base-on [magic-string readme](https://github.com/rich-harris/magic-string#usage).

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

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

```ts
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;
```

---
_Source: https://npm.io/package/muggle-string · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._