• This repository has been archived on 03/Mar/2022
  • Stars
    star
    131
  • Rank 275,867 (Top 6 %)
  • Language
    TypeScript
  • License
    MIT License
  • Created over 2 years ago
  • Updated over 2 years ago

Reviews

There are no reviews yet. Be the first to send feedback to the community and the maintainers!

Repository Details

Extended magic-string with extra utilities

DEPRECATED. It has been ported back to magic-string >= 0.26.0


magic-string-extra

NPM version

Extended Rich-Harris/magic-string with extra utilities.

Install

npm i magic-string-extra

magic-string-extra can be a drop-in replacement for magic-string:

- import MagicString from 'magic-string'
+ import MagicString from 'magic-string-extra'

Extra Utils

Check magic-string's documentation for the base utils.

.replace()

Shares the same signature as String.prototype.replace. Supports RegExp and replacer functions.

import MagicString from 'magic-string-extra'

const s = new MagicString(source)

s.replace(foo, 'bar')
s.replace(/foo/g, 'bar')
s.replace(/(\w)(\d+)/g, (_, $1, $2) => $1.toUpperCase() + $2)

The differences from String.replace:

  • It will always match against the original string
  • It mutates the magic string state (use .clone() to be immutable)

.hasChanged()

In some cases, when the string does not change you might be able to skip the sourcemap generation to improve the performance (e.g. Rollup and Vite's transform hook). This function allows you to check the state without tracking it externally.

import MagicString from 'magic-string-extra'

const s = new MagicString(source)

s.hasChanged() // false

s.prepend('foo')

s.hasChanged() // true

.toRollupResult()

It's common to use the magic string for code transformations in plugins. This function provides a shorthand to generate the result in Rollup's TransformResult format. When the string has not changed, null will be returned to skip the Rollup transformation.

import MagicString from 'magic-string-extra'

const s = new MagicString(source)

s.toRollupResult() // { code, map } | null

Included Upstream PRs

Sponsors

License

MIT License © 2022 Anthony Fu

More Repositories

1

vitesse

🏕 Opinionated Vite + Vue Starter Template
TypeScript
8,522
star
2

ni

💡 Use the right package manager
TypeScript
4,527
star
3

icones

⚡️ Icon Explorer with Instant searching, powered by Iconify
Vue
4,525
star
4

unplugin-vue-components

📲 On-demand components auto importing for Vue
TypeScript
3,011
star
5

unocss

The instant on-demand atomic CSS engine.
TypeScript
2,990
star
6

unplugin-icons

🤹 Access thousands of icons as components on-demand universally.
TypeScript
2,793
star
7

vitesse-webext

⚡️ WebExtension Vite Starter Template
TypeScript
2,581
star
8

unplugin-auto-import

Auto import APIs on-demand for Vite, Webpack and Rollup
TypeScript
2,307
star
9

vscode-file-nesting-config

Config of File Nesting for VS Code
JavaScript
2,132
star
10

vue-starport

🛰 Shared component across routes with animations
TypeScript
1,744
star
11

vscode-settings

My VS Code settings and extensions
1,739
star
12

eslint-config

Anthony's ESLint config presets
JavaScript
1,605
star
13

vitesse-nuxt3

Vitesse for Nuxt 3 🏔💚⚡️
TypeScript
1,510
star
14

shikiji

A syntax highlighter based on TextMate grammars. ESM rewrite of shiki, with more features and capabilities.
TypeScript
1,465
star
15

reactivue

🙊 Use Vue Composition API in React components
TypeScript
1,415
star
16

taze

🥦 A modern cli tool that keeps your deps fresh
TypeScript
1,233
star
17

vite-ssg

Static site generation for Vue 3 on Vite
TypeScript
1,198
star
18

handle

A Chinese Hanzi variation of Wordle - 汉字 Wordle
TypeScript
1,194
star
19

qrcode-toolkit

Anthony's QR Code Toolkit for AI generated QR Codes
Vue
1,111
star
20

case-police

🚨 Make the case correct, PLEASE!
TypeScript
1,098
star
21

vite-plugin-inspect

Inspect the intermediate state of Vite plugins
Vue
1,009
star
22

use

Things I am using
991
star
23

vitesse-lite

⛺️ Lightweight version of Vitesse
TypeScript
901
star
24

drauu

Headless SVG-based drawboard in browser.
TypeScript
817
star
25

broz

A simple, frameless browser for screenshots
JavaScript
745
star
26

iroiro

Beautiful Colors Lookup in CLI
TypeScript
735
star
27

retypewriter

Replay the steps of your changes at ease.
TypeScript
715
star
28

live-draw

A tool allows you to draw on screen real-time.
C#
706
star
29

sd-webui-qrcode-toolkit

Anthony's QR Toolkit for Stable Diffusion WebUI
JavaScript
640
star
30

changelogithub

Generate changelog for GitHub
TypeScript
613
star
31

vite-plugin-md

Markdown with Vue for Vite
TypeScript
602
star
32

vscode-smart-clicks

Smart selection with double clicks for VS Code.
TypeScript
601
star
33

unplugin-vue2-script-setup

💡 Bring `<script setup>` to Vue 2.
TypeScript
567
star
34

sponsorkit

💖 Toolkit for generating sponsors images 😄
TypeScript
550
star
35

eslint-flat-config-viewer

A visual tool to help you view and understand your ESLint Flat config.
Vue
549
star
36

unconfig

A universal solution for loading configurations.
TypeScript
524
star
37

utils

Collection of common JavaScript / TypeScript utils
TypeScript
493
star
38

100

My 100-day project of exploring design, compform, and new things.
Vue
491
star
39

v-lazy-show

Compile-time directive to lazy initialize v-show for Vue
TypeScript
487
star
40

antfu.me

My personal website
Markdown
463
star
41

raycast-multi-translate

A Raycast extension that translates text to multiple languages at once
TypeScript
454
star
42

vue-reuse-template

Define and reuse Vue template inside the component scope.
TypeScript
440
star
43

vite-node

Vite as Node.js runtime
JavaScript
428
star
44

vscode-browse-lite

🚀 An embedded browser in VS Code
TypeScript
425
star
45

vscode-vite

One step faster for Vite in VS Code ⚡️
TypeScript
404
star
46

vscode-theme-vitesse

🏕 Vitesse theme for VS Code
TypeScript
395
star
47

starter-ts

Starter template for TypeScript library
TypeScript
386
star
48

vue-template-promise

Template as Promise in Vue
TypeScript
373
star
49

vue-global-api

Use Vue Composition API globally
TypeScript
331
star
50

vue-router-better-scroller

Enhanced scroll behavior for Vue Router
TypeScript
327
star
51

qr-scanner-wechat

QR Code scanner in JS with Open CV and WeChat's Algorithm
JavaScript
322
star
52

starter-vscode

Starter template for VS Code Extension
TypeScript
299
star
53

vscode-iconify

🙂 Iconify IntelliSense for VS Code
TypeScript
294
star
54

1990-script

Make your GitHub history back to 1990
Shell
293
star
55

p

Toolkit for managing multiple promises
TypeScript
284
star
56

wenyan-lang-vscode

文言 Wenyan Lang for VS Code
TypeScript
277
star
57

pnpm-patch-i

A better and interactive pnpm patch
TypeScript
265
star
58

fsxx

File system in zx style
JavaScript
262
star
59

birpc

Message-based two-way remote procedure call.
TypeScript
245
star
60

vue-minesweeper

A tiny minesweeper clone in Vue 3
TypeScript
242
star
61

contribute

Contribution guide for my projects
231
star
62

purge-icons

🎐 Bundles icons on demand
TypeScript
229
star
63

vscode-open-in-github-button

Add a button to go to the GitHub on the status bar.
TypeScript
224
star
64

github-doorcat

😼 Supercharges GitHub navbar for fast navigation [WIP]
TypeScript
214
star
65

vscode-goto-alias

Go to Definition following alias redirections.
TypeScript
211
star
66

refined-github-notifications

UserScript that enhances the GitHub Notifications
JavaScript
208
star
67

eslint-plugin-command

Comment-as-command for one-off codemod with ESLint.
TypeScript
195
star
68

nuxt-server-fn

Server functions in client for Nuxt 3
TypeScript
194
star
69

magic-string-stack

magic-string with the capability of committing changes.
TypeScript
190
star
70

vscode-array-index-inlay

Show array index inlay hints for large arrays for VS Code
TypeScript
185
star
71

eslint-typegen

Generate types from ESLint rule schemas, with auto-completion and type-checking for rule options.
TypeScript
185
star
72

prism-theme-vars

A customizable Prism.js theme using CSS variables
CSS
178
star
73

what-time

What time works for you?
Vue
177
star
74

esbuild-node-loader

Transpile TypeScript to ESM with Node.js loader.
JavaScript
175
star
75

userscript-clean-twitter

Bring back the peace on Twitter
JavaScript
174
star
76

vitesse-nuxt-bridge

🏕 Vitesse experience for Nuxt 2 and Vue 2
Vue
174
star
77

vscode-icons-carbon

Carbon Visual Studio Code product icon theme
TypeScript
170
star
78

talks

Slides & code for my talks
Vue
170
star
79

fs-spy

Monitoring fs accessing for Node process
TypeScript
166
star
80

vite-plugin-glob

The design experiment for import.meta.glob from Vite.
TypeScript
164
star
81

diff-match-patch-es

ESM and TypeScript rewrite of Google's diff-match-patch for JavaScript
TypeScript
159
star
82

vite-plugin-optimize-persist

Persist dynamically analyzed dependencies optimization
TypeScript
155
star
83

eslint-ts-patch

Support loading eslint.config.mjs and eslint.config.ts as flat config files for ESLint.
JavaScript
155
star
84

markdown-it-github-alerts

Support GitHub-style alerts for markdown-it
TypeScript
153
star
85

regex-doctor

Monitor your RegExp consumption and provide suggestions to improve performance.
TypeScript
152
star
86

v-dollar

jQuery-like Vue Reactivity API
TypeScript
146
star
87

.github

The default community health files for all my repos on GitHub
146
star
88

p5i

p5.js, but with more friendly instance mode APIs
TypeScript
139
star
89

vscode-pnpm-catalog-lens

Show versions inline for PNPM catalog: field
TypeScript
136
star
90

export-size

Analysis bundle cost for each export of a package
TypeScript
130
star
91

eslint-plugin-format

Format various languages with formatters in ESLint
TypeScript
129
star
92

local-pkg

Get information on local packages.
TypeScript
126
star
93

vite-plugin-restart

Custom files/globs to restart Vite server
TypeScript
124
star
94

pkg-exports

Get exports of an local npm package.
TypeScript
118
star
95

qr-verify

A CLI to verify scannable QR Code in batch
TypeScript
114
star
96

eslint-plugin-antfu

Anthony extended ESLint rules.
TypeScript
114
star
97

install-pkg

Install package programmatically.
TypeScript
114
star
98

deploy-check

WIP, Prevent runtime errors earlier in CI
TypeScript
113
star
99

fast-npm-meta

A lightweight API server to get npm package metadata, resolve the latest versions on server, and batch multiple package resolutions in one request.
TypeScript
110
star
100

markdown-it-mdc

MDC (Markdown Components) syntax for markdown-it.
TypeScript
106
star