Use Rolldown native MagicString for faster sourcemap generation

packages/iles/package.json

@@ -69,7 +69,6 @@
     "es-module-lexer": "^1.5.4",
     "fast-glob": "^3.3.2",
     "local-pkg": "^0.5.0",
-    "magic-string": "^0.29",
     "mico-spinner": "^1.4.0",
     "micromatch": "^4.0.7",
     "minimist": "^1.2.8",

packages/iles/src/node/build/rebaseImports.ts

@@ -1,6 +1,6 @@
 import { posix } from 'path'
 import { init as initESLexer, parse as parseESModules } from 'es-module-lexer'
-import MagicString from 'magic-string'
+import { RolldownMagicString as MagicString } from 'rolldown'
 import type { AppConfig } from '../shared'
 
 export default async function rebaseImports ({ base, assetsDir }: AppConfig, codeStr: string) {
@@ -15,7 +15,7 @@ export default async function rebaseImports ({ base, assetsDir }: AppConfig, cod
         s += 1
         e -= 1
       }
-      code.overwrite(s, e, posix.join(assetsBase, code.slice(s, e)), { contentOnly: true })
+      code.overwrite(s, e, posix.join(assetsBase, code.slice(s, e)))
     })
     return code.toString()
   }

packages/iles/src/node/plugin/plugin.ts

@@ -3,7 +3,7 @@ import { basename, resolve, relative } from 'pathe'
 import type { PluginOption, ResolvedConfig, ViteDevServer } from 'vite'
 import { transformWithOxc } from 'vite'
 
-import MagicString from 'magic-string'
+import type { RolldownMagicString as MagicString } from 'rolldown'
 
 import type { AppConfig, AppClientConfig } from '../shared'
 import { ILES_APP_ENTRY } from '../constants'
@@ -128,25 +128,25 @@ export default function IslandsPlugins (appConfig: AppConfig): PluginOption[] {
     {
       name: 'iles:detect-islands-in-vue',
       enforce: 'pre',
-      async transform (code, id) {
+      async transform (code, id, meta) {
         const { path, query } = parseId(id)
 
         if (query.vue !== undefined && query.type === 'script-client')
           return 'export default {}; if (import.meta.hot) import.meta.hot.accept()'
 
         if (isSFCMain(path, query) && code.includes('client:') && code.includes('<template'))
-          return wrapIslandsInSFC(appConfig, code, path)
+          return wrapIslandsInSFC(appConfig, code, path, (meta as any).magicString)
       },
     },
     {
       name: 'iles:layouts',
       enforce: 'pre',
-      transform (code, id) {
+      transform (code, id, meta) {
         const { path, query } = parseId(id)
         if (!isSFCMain(path, query) || !isLayout(path)) return
         const layoutName = code.match(templateLayoutRegex)?.[1] || false
         if (String(layoutName) === 'false') return
-        return wrapLayout(code, path)
+        return wrapLayout(code, path, (meta as any).magicString)
       },
     },
 
@@ -171,7 +171,7 @@ export default function IslandsPlugins (appConfig: AppConfig): PluginOption[] {
     {
       name: 'iles:page-data',
       enforce: 'post',
-      async transform (code, id, options) {
+      async transform (code, id, transformMeta) {
         const { path, query } = parseId(id)
         const isMdx = isMarkdown(path)
         if (!isMdx && !isVueScript(path, query)) return
@@ -184,13 +184,13 @@ export default function IslandsPlugins (appConfig: AppConfig): PluginOption[] {
         if (!sfcIndex || sfcIndex === -1)
           return
 
-        const s = new MagicString(code)
+        const s = (transformMeta as any).magicString as MagicString
         const appendToSfc = (key: string, value?: string) =>
           s.appendRight(sfcIndex, value ? `${key}:${value},` : `${key},`)
 
         if (isLayoutFile) {
           appendToSfc('name', `'${pascalCase(basename(path).replace('.vue', 'Layout'))}'`)
-          return s.toString()
+          return { code: s }
         }
 
         appendToSfc('inheritAttrs', serialize(false))
@@ -222,7 +222,7 @@ export default function IslandsPlugins (appConfig: AppConfig): PluginOption[] {
             : `() => import('${layoutsRoot}/${layout}.vue').then(m => m.default)`)
         }
 
-        return s.toString()
+        return { code: s }
       },
     },
 

packages/iles/src/node/plugin/wrap.ts

@@ -1,4 +1,4 @@
-import MagicString from 'magic-string'
+import type { RolldownMagicString as MagicString } from 'rolldown'
 import type { SFCBlock } from 'vue/compiler-sfc'
 import { parse } from 'vue/compiler-sfc'
 import type { ComponentInfo, PublicPluginAPI as ComponentsApi } from 'unplugin-vue-components/types'
@@ -15,12 +15,10 @@ interface SfcRootNode extends RootNode {
 
 export const unresolvedIslandKey = '__viteIslandComponent'
 
-export async function wrapLayout (code: string, filename: string) {
+export async function wrapLayout (code: string, filename: string, s: MagicString) {
   const { descriptor: { template }, errors } = parse(code, { filename })
   if (errors.length > 0 || !template || !isString(template.attrs.layout)) return
 
-  const s = new MagicString(code)
-
   const nodes = template.ast?.children
   if (!nodes?.length) {
     return
@@ -33,14 +31,19 @@ export async function wrapLayout (code: string, filename: string) {
   s.appendLeft(nodes[0].loc.start.offset, `<${Layout}>`)
   s.appendRight(nodes[nodes.length - 1].loc.end.offset, `</${Layout}>`)
 
-  return { code: s.toString(), map: s.generateMap({ hires: true }) }
+  return { code: s }
 }
 
 const scriptClientRE = /<script\b([^>]*\bclient:[^>]*)>([^]*?)<\/script>/
 
-export async function wrapIslandsInSFC (config: AppConfig, code: string, filename: string) {
-  code = code.replace(scriptClientRE, (_, attrs, content) =>
-    `<script-client${attrs}>${content}</script-client>`)
+export async function wrapIslandsInSFC (config: AppConfig, code: string, filename: string, s: MagicString) {
+  const match = scriptClientRE.exec(code)
+  if (match) {
+    const [full, attrs, content] = match
+    const replacement = `<script-client${attrs}>${content}</script-client>`
+    s.overwrite(match.index, match.index + full.length, replacement)
+    code = s.toString()
+  }
 
   const { descriptor: { template, script, scriptSetup, customBlocks }, errors } = parse(code, { filename })
   const scriptClientIndex = customBlocks.findIndex(b => b.type === 'script-client')
@@ -55,8 +58,6 @@ export async function wrapIslandsInSFC (config: AppConfig, code: string, filenam
     return
   }
   const sfcRootNode = template.ast as any as SfcRootNode
-
-  const s = new MagicString(code)
   const components: ComponentsApi = config.namedPlugins.components.api
 
   if (scriptClient) { await injectClientScript(sfcRootNode, s, filename, scriptClientIndex, scriptClient) }
@@ -77,7 +78,7 @@ export async function wrapIslandsInSFC (config: AppConfig, code: string, filenam
   if (!scriptSetup && injectionOffset === 0)
     s.appendRight(0, '\n</script>\n')
 
-  return { code: s.toString(), map: s.generateMap({ hires: true }) }
+  return { code: s }
 
   async function resolveComponentImport (strategy: string, tagName: string): Promise<ComponentInfo> {
     debug.detect(`<${tagName} ${strategy}>`)
@@ -114,11 +115,11 @@ async function visitSFCNode (node: ElementNode, s: MagicString, resolveComponent
 
     // Replace opening tag.
     s.overwrite(start.offset + 1, start.offset + 1 + tag.length,
-      `Island ${componentProps.replace(/\n\s*/g, ' ')}`, { contentOnly: true })
+      `Island ${componentProps.replace(/\n\s*/g, ' ')}`)
 
     // Replace closing tag.
     if (!node.isSelfClosing)
-      s.overwrite(end.offset - 1 - tag.length, end.offset - 1, 'Island', { contentOnly: true })
+      s.overwrite(end.offset - 1 - tag.length, end.offset - 1, 'Island')
   }
 
   if ('children' in node) {