chore: migrate to rolli bundler

package.json

@@ -28,7 +28,7 @@
   ],
   "scripts": {
     "dev": "nuxt dev playground",
-    "build": "nuxt-module-build",
+    "build": "rolli",
     "build:play": "nuxt build playground",
     "generate:play": "nuxt generate playground",
     "preview:play": "nuxt preview playground",
@@ -39,13 +39,13 @@
     "prepublishOnly": "npm run build"
   },
   "devDependencies": {
-    "@nuxt/module-builder": "^0.5.1",
-    "@types/node": "^20.5.9",
+    "@types/node": "^20.6.0",
     "bummp": "^0.2.0",
-    "configshare": "^0.1.4",
-    "eslint": "^8.48.0",
+    "configshare": "^0.1.5",
+    "eslint": "^8.49.0",
     "nuxt": "^3.7.1",
     "prettier": "^3.0.3",
+    "rolli": "^0.6.0",
     "typescript": "^5.1.6"
   }
 }

playground/components/NavMain.vue

@@ -0,0 +1,6 @@
+<template>
+  <nav id="nav-main">
+    <NuxtLink to="/" style="margin-right: 1rem">Home</NuxtLink>
+    <NuxtLink to="/about">About</NuxtLink>
+  </nav>
+</template>

playground/layouts/default.vue

@@ -0,0 +1,28 @@
+<template>
+  <div id="__default">
+    <NavMain />
+    <slot />
+  </div>
+</template>
+
+<style>
+body {
+  font-family: 'AspektaPRO-VF', sans-serif;
+  font-variation-settings: 'wght' 400;
+  background: #111;
+  color: #fff;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+h1 {
+  font-variation-settings: 'wght' 600;
+}
+
+a,
+a:hover,
+a:visited {
+  color: #fff;
+  text-decoration: none;
+}
+</style>

playground/nuxt.config.ts

@@ -3,20 +3,15 @@ import Module from '../src/module'
 
 export default defineNuxtConfig({
   telemetry: false,
-  components: false,
-  imports: {
-    autoImport: false,
-  },
 
   modules: [Module],
 
   fontLoader: {
     local: [
       {
-        src: '/fonts/AspektaVF.woff2',
-        family: 'Aspekta Variable',
+        src: '/fonts/AspektaPRO-VF.woff2',
+        family: 'AspektaPRO-VF',
         weight: '100 900',
-        class: 'font-aspekta',
       },
     ],
   },

playground/pages/about/index.vue

@@ -0,0 +1,5 @@
+<template>
+  <div id="page-about">
+    <h1>About Page</h1>
+  </div>
+</template>

playground/pages/index.vue

@@ -0,0 +1,5 @@
+<template>
+  <div id="page-index">
+    <h1>Index Page</h1>
+  </div>
+</template>

rolli.config.js

@@ -0,0 +1,49 @@
+import { defineConfig } from 'rolli'
+import pkg from './package.json' assert { type: 'json' }
+import {
+  generateModuleMeta,
+  generateModuleTypes,
+  logModuleTemplates,
+} from './src/utils/templates.js'
+
+export default defineConfig({
+  tsconfig: 'playground/.nuxt/tsconfig.json',
+  exports: false,
+  bin: false,
+
+  entries: [
+    // Module Core
+    {
+      input: './src/module.ts',
+      output: './dist/module.mjs',
+      externals: [/@nuxt/],
+      replace: {
+        preventAssignment: true,
+        __name__: pkg.name,
+        __version__: pkg.version,
+      },
+    },
+    {
+      input: './src/types/module.ts',
+      output: './dist/module.d.ts',
+    },
+    // Runtime Composables
+    {
+      input: './src/runtime/composables/index.ts',
+      output: './dist/runtime/composables/index.mjs',
+      externals: ['#imports'],
+    },
+    {
+      input: './src/types/runtime/composables/index.ts',
+      output: './dist/runtime/composables/index.d.ts',
+    },
+  ],
+
+  hooks: {
+    'rolli:end': async () => {
+      await generateModuleMeta(pkg.name, pkg.version)
+      await generateModuleTypes()
+      logModuleTemplates()
+    },
+  },
+})

src/meta.js

@@ -0,0 +1,6 @@
+export const name = '__name__'
+export const version = '__version__'
+export const configKey = 'fontLoader'
+export const compatibility = {
+  nuxt: '>=3.0.0',
+}

src/module.ts

@@ -1,16 +1,14 @@
 import { defineNuxtModule, createResolver, addImports } from '@nuxt/kit'
-import { generateStyles, parseFormat } from './runtime/utils'
-import type { ModuleOptions } from './types'
-
-export * from './types'
+import { generateStyles, parseFormat } from './utils'
+import { name, version, configKey, compatibility } from './meta'
+import type { ModuleOptions } from './types/module'
 
 export default defineNuxtModule<ModuleOptions>({
   meta: {
-    name: 'nuxt-font-loader',
-    configKey: 'fontLoader',
-    compatibility: {
-      nuxt: '>=3.0.0',
-    },
+    name,
+    version,
+    configKey,
+    compatibility,
   },
 
   defaults: {

src/runtime/composables/index.ts

@@ -1,2 +1,2 @@
-export * from './useExternalFont'
-export * from './useLocalFont'
+export * from './use-external-font'
+export * from './use-local-font'

src/runtime/composables/useExternalFont.ts → src/runtime/composables/use-external-font.ts

@@ -1,22 +1,7 @@
 import { useHead } from '#imports'
-import { generateStyles } from '../utils'
-import type { ExternalOptions } from '../../types'
+import { generateStyles } from '../../utils'
+import type { ExternalOptions } from '../../types/options'
 
-/**
- * Loads fonts directly from third-party servers.
- *
- * @example
- *
- * ```js
- * useExternalFont([
- *     {
- *       src: 'path-to-external-source'
- *     }
- * ])
- * ```
- *
- * @since 2.2.0
- */
 export const useExternalFont = (external: ExternalOptions[]) => {
   const { classes, root } = generateStyles(external)
   const styles = `${classes}${root}`

src/runtime/composables/useLocalFont.ts → src/runtime/composables/use-local-font.ts

@@ -1,26 +1,7 @@
 import { useHead } from '#imports'
-import { generateStyles, parseFormat } from '../utils'
-import type { LocalOptions } from '../../types'
+import { generateStyles, parseFormat } from '../../utils'
+import type { LocalOptions } from '../../types/options'
 
-/**
- * Loads fonts from the same domain as your deployment.
- *
- * At the moment, this is the most recommended method for handling fonts.
- *
- * @example
- *
- * ```js
- * useLocalFont([
- *     {
- *       src: '/fonts/AspektaVF.woff2',
- *       family: 'Aspekta Variable',
- *       weight: '100 900'
- *     }
- * ])
- * ```
- *
- * @since 2.2.0
- */
 export const useLocalFont = (local: LocalOptions[]) => {
   const { fontFace, classes, root } = generateStyles(local)
   const styles = `${fontFace}${classes}${root}`

src/types/module.ts

@@ -1,10 +1,6 @@
-import type { LocalOptions, ExternalOptions } from './index'
+import type { NuxtModule } from '@nuxt/schema'
+import type { LocalOptions, ExternalOptions } from './options'
 
-/**
- * Module Options.
- *
- * @since 2.0.0
- */
 export interface ModuleOptions {
   /**
    * An array of objects that specifies `local` font sources.
@@ -66,25 +62,6 @@ export interface ModuleOptions {
   autoImport?: boolean
 }
 
-declare module '@nuxt/schema' {
-  interface NuxtConfig {
-    /**
-     * Nuxt Font Loader
-     *
-     * Simple, modern and lightweight font loader for Nuxt.
-     *
-     * @see [source](https://github.com/ivodolenc/nuxt-font-loader)
-     */
-    fontLoader?: ModuleOptions
-  }
-  interface NuxtOptions {
-    /**
-     * Nuxt Font Loader
-     *
-     * Simple, modern and lightweight font loader for Nuxt.
-     *
-     * @see [source](https://github.com/ivodolenc/nuxt-font-loader)
-     */
-    fontLoader?: ModuleOptions
-  }
-}
+declare const module: NuxtModule<ModuleOptions>
+
+export { module as default }

src/types/external.ts → src/types/options/external.ts

@@ -1,8 +1,3 @@
-/**
- * External Options.
- *
- * @since 2.1.0
- */
 export interface ExternalOptions {
   /**
    * Specifies path to the external source.

src/types/index.ts → src/types/options/index.ts

@@ -1,3 +1,2 @@
 export * from './external'
 export * from './local'
-export * from './module'

src/types/local.ts → src/types/options/local.ts

@@ -1,8 +1,3 @@
-/**
- * Local Options.
- *
- * @since 2.0.0
- */
 export interface LocalOptions {
   /**
    * Specifies path to the font file.

src/types/runtime/composables/index.ts

@@ -0,0 +1,2 @@
+export * from './use-external-font'
+export * from './use-local-font'

src/types/runtime/composables/use-external-font.ts

@@ -0,0 +1,18 @@
+import type { ExternalOptions } from '../../options'
+
+/**
+ * Loads fonts directly from third-party servers.
+ *
+ * @example
+ *
+ * ```js
+ * useExternalFont([
+ *     {
+ *       src: 'path-to-external-source'
+ *     }
+ * ])
+ * ```
+ *
+ * @since 2.2.0
+ */
+export declare const useExternalFont: (external: ExternalOptions[]) => any

src/types/runtime/composables/use-local-font.ts

@@ -0,0 +1,22 @@
+import type { LocalOptions } from '../../options'
+
+/**
+ * Loads fonts from the same domain as your deployment.
+ *
+ * At the moment, this is the most recommended method for handling fonts.
+ *
+ * @example
+ *
+ * ```js
+ * useLocalFont([
+ *     {
+ *       src: '/fonts/AspektaVF.woff2',
+ *       family: 'Aspekta Variable',
+ *       weight: '100 900'
+ *     }
+ * ])
+ * ```
+ *
+ * @since 2.2.0
+ */
+export declare const useLocalFont: (local: LocalOptions[]) => any

src/runtime/utils/generateStyles.ts → src/utils/generate-styles.ts

@@ -1,5 +1,5 @@
-import { parseFormat } from './parseFormat'
-import type { LocalOptions, ExternalOptions } from '../../types'
+import { parseFormat } from './parse-format'
+import type { LocalOptions, ExternalOptions } from '../types/options'
 
 /**
  * Generates head styles from options entered by the user.

src/utils/index.ts

@@ -0,0 +1,2 @@
+export * from './generate-styles'
+export * from './parse-format'