chore: use magic string

stafyniaksacha · stafyniaksacha · commit 861c6fdddeaf · 2023-03-19T22:43:31.000+01:00
diff --git a/README.md b/README.md
@@ -23,7 +23,7 @@ export default defineConfig({
 })
 ```
 
-Example: [`playground/`](./playground/)
+Example: [`examples/vite`](./examples/vite)
 
 <br></details>
 
@@ -77,6 +77,8 @@ export default {
 }
 ```
 
+Example: [`examples/nuxt`](./examples/nuxt)
+
 <br></details>
 
 <!-- <details>
@@ -115,6 +117,8 @@ export default defineConfig({
 })
 ```
 
+Example: [`examples/sveltekit`](./examples/sveltekit)
+
 <br></details>
 
 <details>
@@ -134,6 +138,24 @@ export default defineConfig({
 })
 ```
 
+```astro
+---
+// src/pages/index.astro
+import Unfont from 'unplugin-fonts/astro/component.astro';
+---
+
+<html>
+  <head>
+    <Unfont />
+  </head>
+  <body>
+    <!-- ... -->
+  </body>
+</html>
+```
+
+Example: [`examples/astro`](./examples/astro)
+
 <br></details>
 
 
diff --git a/examples/nuxt/app.vue b/examples/nuxt/app.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { links } from 'unplugin-fonts/head'
-import src from 'unfonts.css'
+import src from 'unfonts.css?raw'
 </script>
 
 <template>
diff --git a/examples/nuxt/tsconfig.json b/examples/nuxt/tsconfig.json
@@ -2,6 +2,6 @@
   // https://nuxt.com/docs/guide/concepts/typescript
   "extends": "./.nuxt/tsconfig.json",
   "compilerOptions": {
-    "types": ["unplugin-fonts/client"]
+    "types": ["vite/client", "unplugin-fonts/client"]
   }
 }
diff --git a/package.json b/package.json
@@ -71,6 +71,7 @@
     "client.d.ts"
   ],
   "scripts": {
+    "prepack": "npm run build",
     "build": "tsup",
     "dev": "tsup --watch src",
     "build:fix": "esno scripts/postbuild.ts",
@@ -103,6 +104,7 @@
     "eslint": "^8.36.0",
     "eslint-plugin-eslint-comments": "^3.2.0",
     "esno": "^0.16.3",
+    "magic-string": "^0.30.0",
     "pathe": "^1.1.0",
     "rollup": "^3.19.1",
     "tsup": "^6.6.3",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
diff --git a/src/index.ts b/src/index.ts
@@ -1,3 +1,4 @@
+import MagicString from 'magic-string'
 import { createUnplugin } from 'unplugin'
 import type { Options } from './types'
 import { getHeadLinkTags } from './loaders'
@@ -17,32 +18,37 @@ export default createUnplugin<Options | undefined>((userOptions) => {
   return {
     name: 'unplugin-fonts',
     enforce: 'pre',
-    resolveId(_id) {
-      const id = _id.replace(/\?.*$/, '')
-
-      if (id === virtualStylesId)
+    resolveId(id) {
+      if (id.startsWith(virtualStylesId))
         return resolvedVirtualStylesId
 
-      if (id === virtualModuleId)
+      if (id.startsWith(virtualModuleId))
         return resolvedVirtualModuleId
     },
 
-    load(_id) {
-      const id = _id.replace(/\?.*$/, '')
+    load(id) {
+      if (id.startsWith(resolvedVirtualModuleId)) {
+        const s = new MagicString(`export const links = ${JSON.stringify(getHeadLinkTags(options, root))};\n`)
 
-      if (id === resolvedVirtualModuleId)
-        return `export const links = ${JSON.stringify(getHeadLinkTags(options, root))}`
+        return {
+          code: s.toString(),
+          map: s.generateMap({ source: id, includeContent: true }),
+        }
+      }
 
-      if (id === resolvedVirtualStylesId) {
-        const source: string[] = []
+      if (id.startsWith(resolvedVirtualStylesId)) {
+        const s = new MagicString('')
 
         if (options.fontsource)
-          source.push(fontsourceVirtualModule(options.fontsource))
+          s.append(`${fontsourceVirtualModule(options.fontsource)}\n`)
 
         if (options.custom)
-          source.push(customVirtualModule(options.custom, root))
+          s.append(`${customVirtualModule(options.custom, root)}\n`)
 
-        return source.join('\n')
+        return {
+          code: s.toString(),
+          map: s.generateMap({ source: id, includeContent: true }),
+        }
       }
     },
     vite: {

Original file line number	Diff line number	Diff line change
`@@ -2,6 +2,6 @@`
`2`	`2`	`// https://nuxt.com/docs/guide/concepts/typescript`
`3`	`3`	`"extends": "./.nuxt/tsconfig.json",`
`4`	`4`	`"compilerOptions": {`
`5`		`- "types": ["unplugin-fonts/client"]`
	`5`	`+ "types": ["vite/client", "unplugin-fonts/client"]`
`6`	`6`	`}`
`7`	`7`	`}`