feat: add astro component

Author: stafyniaksacha

README.md

@@ -29,7 +29,7 @@ export default {
 Only needed if using local/custom fonts
 ```ts
 // main.ts
-import 'virtual:fonts.css'
+import 'unfonts.css'
 ```
 
 If using `nuxt@>3` or `nuxt-edge`, you can leverage the virtual file system to import the generated CSS.
@@ -40,7 +40,7 @@ import Fonts from 'vite-plugin-fonts'
 
 export default defineNuxtConfig({
   css: [
-    'virtual:fonts.css',
+    'unfonts.css',
   ],
   vite: {
     plugins: [

examples/astro/src/pages/index.astro

@@ -1,8 +1,9 @@
 ---
-// import "/@unplugin-fonts/fonts.css";
+import Unfont from 'unplugin-fonts/astro/component.astro';
 ---
 
 <div>
+  <Unfont />
   <h1>Hello Astro!</h1>
   <h2>I'm using a local font !</h2>
   <a href="https://vitejs.dev/guide/features.html" target="_blank">Documentation</a>

examples/nuxt/app.vue

@@ -1,6 +1,12 @@
+<script setup lang="ts">
+// @ts-ignore
+import { tags } from 'unplugin-fonts/head'
+</script>
+
 <template>
   <h1>Hello Nuxt!</h1>
   <h2>I'm using a local font !</h2>
+  <pre>{{ tags }}</pre>
   <a href="https://vitejs.dev/guide/features.html" target="_blank">Documentation</a>
 </template>
 

package.json

@@ -16,6 +16,13 @@
       "require": "./dist/astro.js",
       "import": "./dist/astro.mjs"
     },
+    "./astro/component.astro": {
+      "types": "./dist/astro/component.d.ts",
+      "import": "./dist/astro/component.astro"
+    },
+    "./head": {
+      "types": "./dist/head.d.ts"
+    },
     "./esbuild": {
       "types": "./dist/esbuild.d.ts",
       "require": "./dist/esbuild.js",

src/astro/component.astro

@@ -0,0 +1,15 @@
+---
+import type { HtmlTagDescriptor } from 'vite'
+
+// @ts-ignore
+import { links } from 'unplugin-fonts/head'
+---
+
+<>
+  {links.map((link: HtmlTagDescriptor) => {
+    const attrs = link?.attrs || {}
+    return (
+      <link {...attrs} />
+    )
+  })}
+</>

src/head.ts

@@ -0,0 +1,4 @@
+import type { HtmlTagDescriptor } from 'vite'
+
+// exposed via virtual module
+export const links: HtmlTagDescriptor[] = []

src/index.ts

@@ -4,8 +4,11 @@ import { getHeadLinkTags } from './loaders'
 import { fontsourceVirtualModule } from './loaders/fontsource'
 import { customVirtualModule } from './loaders/custom'
 
-const MODULE_ID = 'unfonts.css'
-const MODULE_ID_RESOLVED = '/@unplugin-fonts/fonts.css'
+const virtualStylesId = 'unfonts.css'
+const resolvedVirtualStylesId = '\0' + virtualStylesId
+
+const virtualModuleId = 'unplugin-fonts/head'
+const resolvedVirtualModuleId = '\0' + virtualModuleId
 
 export default createUnplugin<Options | undefined>((userOptions) => {
   const options = userOptions || {}
@@ -15,12 +18,21 @@ export default createUnplugin<Options | undefined>((userOptions) => {
     name: 'unplugin-fonts',
     enforce: 'pre',
     resolveId(id) {
-      if (id === MODULE_ID)
-        return MODULE_ID_RESOLVED
+      if (id === virtualStylesId) {
+        return resolvedVirtualStylesId
+      } 
+      
+      if (id === virtualModuleId) {
+        return resolvedVirtualModuleId
+      }
     },
 
     load(id) {
-      if (id === MODULE_ID_RESOLVED) {
+      if (id === resolvedVirtualModuleId) {
+        return `export const links = ${JSON.stringify(getHeadLinkTags(options, root))}`
+      }
+      
+      if (id === resolvedVirtualStylesId) {
         const source: string[] = []
 
         if (options.fontsource) {
@@ -31,7 +43,7 @@ export default createUnplugin<Options | undefined>((userOptions) => {
           source.push(customVirtualModule(options.custom, root))
         }
 
-        return source.join('\n\n')
+        return source.join('\n')
       }
     },
     vite: {

src/loaders/custom.ts

@@ -228,7 +228,7 @@ export function customVirtualModule(options: CustomFonts, root: string) {
     const faces = resolveFontfaceFiles({ src, root })
       .map((item) => ({
         name,
-        src: item.src.map(x => relative(root, x.replace(stripPrefix, ''))),
+        src: item.src.map(x => join('/', relative(root, x.replace(stripPrefix, '')))),
         weight: resolveWeight(item.srcNoExt),
         style: resolveStyle(item.srcNoExt),
         display,
@@ -271,7 +271,7 @@ export function customLoader(options: CustomFonts, root: string) {
 
     const hrefs = faces
       .flatMap(face => face.src)
-      .map(src => relative(root, src.replace(stripPrefix, '')))
+      .map(src => join('/', relative(root, src.replace(stripPrefix, ''))))
 
     // --- Generate `<link>` tags.
     // --- We can not do a prefetch and a preload for the same files.

src/nuxt.ts

@@ -1,4 +1,4 @@
-import { addVitePlugin, addWebpackPlugin, defineNuxtModule } from '@nuxt/kit'
+import { addVitePlugin, addWebpackPlugin, defineNuxtModule, addTemplate } from '@nuxt/kit'
 // Workaround for:
 // src/nuxt.ts(5,1): error TS2742: The inferred type of 'default' cannot be named without a reference to '.pnpm/@[email protected][email protected]/node_modules/@nuxt/schema'. This is likely not portable. A type annotation is necessary.
 import type {} from '@nuxt/schema'

tsup.config.ts

@@ -1,9 +1,13 @@
 import type { Options } from 'tsup'
 
 export default <Options>{
-  entryPoints: [
+  entry: [
     'src/*.ts',
+    'src/astro/component.astro',
   ],
+  loader: {
+    '.astro': 'copy'
+  },
   clean: true,
   format: ['cjs', 'esm'],
   dts: true,