chore: use library builder in ui package

packages/library-builder/src/builder/build-nuxt.ts

@@ -7,19 +7,21 @@ export const buildNuxt = async (options: {
   cwd: string,
   outDir: string,
   nuxtDir: string,
+  entry: string,
 }) => {
-  const { cwd, outDir, nuxtDir } = options
+  const { cwd, outDir, nuxtDir, entry } = options
 
   const nuxtModulePath = join(cwd, nuxtDir)
 
   if (!existsSync(nuxtModulePath)) {
-    console.warn('Skipping building nuxt module, because it does not exist')
+    console.warn('Skipping building nuxt module, because it does not exist in ' + nuxtModulePath)
     return
   }
 
   return buildNuxtModule({
     rootDir: nuxtModulePath,
     outDir: join(cwd, outDir, '/nuxt'),
+    entry,
     cwd,
   })
 }

packages/library-builder/src/builder/index.ts

@@ -102,7 +102,8 @@ export const build = async (options: {
     if (targets.includes('nuxt')) {
       tasks.push(
         buildNuxt({
-          cwd, 
+          cwd,
+          entry,
           outDir,
           nuxtDir
         })

packages/library-builder/src/cli/args.ts

@@ -42,4 +42,4 @@ export const args = yargs(process.argv)
     default: 'dist',
   })
   .help(true)
-  .parseSync()
+  .parseSync()

packages/library-builder/src/cli/index.ts

@@ -3,6 +3,5 @@ import { args } from './args'
 
 build({
   cwd: process.cwd(),
-  outDir: args.outDir,
-  entry: args.entry,
+  ...args,
 })

packages/library-builder/src/nuxt.shim.d.ts

@@ -0,0 +1,12 @@
+declare module '#app' {
+  export * from 'nuxt/app'
+}
+
+declare module '#app/components/nuxt-link' {
+  export * from 'nuxt/dist/app/components/nuxt-link.ts'
+  export { default as default } from 'nuxt/dist/app/components/nuxt-link.ts'
+}
+
+declare module '#imports' {
+  export * from '@unhead/vue'
+}

packages/library-builder/src/nuxt/builder.ts

@@ -8,6 +8,7 @@ import { buildModule } from './module-builder';
 
 export async function buildNuxtModule(options: {
   cwd: string,
+  entry: string,
   rootDir: string,
   outDir?: string,
 }) {
@@ -34,6 +35,10 @@ export async function buildNuxtModule(options: {
       cwd: options.cwd,
       rootDir: options.rootDir,
       outDir: outDir,
+      externals: dependencies,
+      paths: packageJson.name ? {
+        [packageJson.name]: [join(options.cwd, options.entry)],
+      } : {}
     })
   ])
 }

packages/library-builder/src/nuxt/module-builder.ts

@@ -10,10 +10,13 @@ import { replaceNext } from '../plugins/replace-next';
 async function buildModule(opts: {
   cwd: string,
   rootDir: string,
+  externals?: string[],
+  paths?: Record<string, string[]>,
   outDir?: string,
 }) {
   const { build } = await import('unbuild');
   const outDir = opts.outDir || "dist";
+  const { externals = [], paths = {} } = opts
 
   return build(opts.cwd, false, {
     failOnWarn: false, // Disable process.exit(1) on warnings
@@ -30,6 +33,15 @@ async function buildModule(opts: {
       cjsBridge: true,
       dts: {
         tsconfig: join(opts.cwd, "tsconfig.json"),
+        compilerOptions: {
+          moduleResolution: 2,
+          paths: paths,
+          skipLibCheck: true,
+          strict: false,
+          skipDefaultLibCheck: true,
+          rootDir: '',
+          emitDeclarationOnly: true,
+        },
       },
     },
     externals: [
@@ -41,7 +53,8 @@ async function buildModule(opts: {
       "nuxt-edge",
       "nuxt3",
       "vue",
-      "vue-demi"
+      "vue-demi",
+      ...externals,
     ],
     hooks: {
       "rollup:options"(_ctx, options) {
@@ -54,6 +67,22 @@ async function buildModule(opts: {
         } else {
           options.plugins = [plugin, options.plugins];
         }
+
+        options.external = (source, importer, isResolved) => {
+          // Resolve '#app' imports
+          if (source.startsWith('#')) {
+            return true
+          }
+
+          if (source.includes('node_modules')) {
+            return true
+          }
+
+          if (source.startsWith('/') || source.startsWith('.')) {
+            return false
+          }
+          return true
+        }
       },
       async "rollup:done"(ctx) {
         await writeCJSStub(ctx.options.outDir);

packages/library-builder/src/nuxt/runtime-builder.ts

@@ -13,6 +13,7 @@ export const nuxtRuntimeDirViteConfig = (options: {
 
   return defineViteConfig({
     root: entryDir,
+
     build: {
       lib: {
         entry: inputs,
@@ -27,17 +28,24 @@ export const nuxtRuntimeDirViteConfig = (options: {
             return true
           }
 
-          const importName = source.split('/')[0]
-
-          if (external.includes(importName)) {
+          if (source.includes('node_modules')) {
             return true
           }
 
-          return false
+          if (source.startsWith('/') || source.startsWith('.')) {
+            return false
+          }
+          return true
         },
       },
 
       outDir: outDir,
+
+      ssr: true,
+    },
+
+    optimizeDeps: {
+      disabled: true,
     },
 
     plugins: [

packages/library-builder/src/utils/define-vite-config.ts

@@ -3,7 +3,6 @@ import { type InlineConfig } from 'vite';
 export const defineViteConfig = <T extends InlineConfig>(config: T) => {
   config.configFile = false
   config.logLevel = 'warn'
-  config.appType = 'custom'
   config.build!.ssr = true
 
   return config;

packages/library-builder/tests/demo/src/nuxt/runtime/plugin.ts

@@ -1,9 +1,6 @@
 // @ts-ignore // TODO: mimic #app module
 import { defineNuxtPlugin } from '#app'
-
-// @replace-next-line: import { createLibraryPlugin } from 'my-cool-library'
-import { createLibraryPlugin } from '../../main'
-// @replace-next-line: import 'my-cool-library'
+import { createLibraryPlugin } from 'my-cool-library'
 
 export default defineNuxtPlugin((nuxtApp: any) => {
   nuxtApp.vueApp.use(createLibraryPlugin())

packages/library-builder/tests/demo/tsconfig.json

@@ -17,6 +17,9 @@
     "paths": {
       "@/*": [
         "src/*"
+      ],
+      "my-cool-library": [
+        "./src/main.ts"
       ]
     },
   }

packages/ui/package.json

@@ -30,6 +30,7 @@
     "serve": "vue-cli-service serve --mode book",
     "serve:production": "vue-cli-service serve --mode production",
     "build": "tsx build/build.ts",
+    "build:builder": "library-build",
     "build:types": "vue-tsc --declaration --emitDeclarationOnly --outDir dist/types",
     "build:book": "vue-cli-service build --mode book",
     "lint": "vue-cli-service lint",
@@ -146,6 +147,7 @@
   },
   "exports": {
     ".": {
+      "types": "./dist/types/main.d.ts",
       "import": {
         "node": "./dist/esm-node/main.mjs",
         "default": "./dist/es/main.js"
@@ -154,15 +156,29 @@
     },
     "./css": {
       "import": {
-        "node": "./dist/vuestic-ui.css",
+        "node": "./dist/main.css",
         "default": "./dist/styles/index.css"
       }
     },
-    "./web-components": "./dist/web-components/main.js",
+    "./web-components": {
+      "types": "./dist/types/main.d.ts",
+      "default": "./dist/web-components/main.js"
+    },
     "./iife": "./dist/iife/main.js",
     "./types": "./dist/types/main.d.ts",
     "./styles/*": "./dist/styles/*",
-    "./dist/*": "./dist/*"
+    "./dist/*": "./dist/*",
+    "./components/*": {
+      "types": "./dist/types/components/*",
+      "import": {
+        "node": "./dist/esm-node/components/*",
+        "default": "./dist/es/components/*"
+      }
+    },
+    "./nuxt": {
+      "import": "./dist/nuxt/module.mjs",
+      "require": "./dist/nuxt/module.cjs"
+    }
   },
   "typesVersions": {
     "*": {

packages/ui/src/nuxt/composables/use-components.ts

@@ -0,0 +1,18 @@
+import { addComponent } from '@nuxt/kit'
+import importNames from '../config/components'
+
+/** Register vuestic composables globally with auto-import */
+export const useVuesticComponents = () => {
+  importNames.forEach((name) => {
+    /**
+     * Add component from vuestic-ui package.
+     * Nuxt will tree-shake components that not included in options.
+     * Nuxt also will add component to auto-import.
+     */
+    addComponent({
+      name,
+      export: name,
+      filePath: 'vuestic-ui',
+    })
+  })
+}

packages/ui/src/nuxt/composables/use-composables.ts

@@ -0,0 +1,20 @@
+import { resolveInRuntime } from '../utils/resolve'
+import type { Import } from 'unimport'
+
+import { addImports } from '@nuxt/kit'
+import importNames from '../config/composables'
+
+/** Register vuestic composables globally with auto-import */
+export const useVuesticComposables = () => {
+  const composablesFrom = resolveInRuntime('./runtime/composables.mjs')
+  const autoImportsList = importNames
+    .map<Import>((item) => ({
+      name: item,
+      // TODO: We probably need to rename all composables to `useVuesticGlobalConfig`, `useVuesticModal`, etc.
+      // Let's have it as an option in the future if there will be any issues.
+      as: item,
+      from: composablesFrom,
+    }))
+
+  addImports(autoImportsList)
+}

packages/ui/src/nuxt/composables/use-config-file.ts

@@ -0,0 +1,29 @@
+import { existsSync, writeFileSync, readFileSync } from 'fs'
+import { resolveAlias, useNuxt } from '@nuxt/kit'
+import { resolve } from 'pathe'
+import { resolveInRuntime } from '../utils/resolve'
+import { watch } from 'chokidar'
+
+export const useConfigFile = async () => {
+  const root = resolveAlias('~/')
+  const configPath = resolve(root, 'vuestic.config.ts')
+  const nuxtConfigPath = resolve(root, 'nuxt.config.ts')
+  const nuxt = useNuxt()
+
+  const restartNuxt = () => {
+    writeFileSync(nuxtConfigPath, readFileSync(nuxtConfigPath, 'utf-8'))
+  }
+
+  if (existsSync(configPath)) {
+    nuxt.options.alias['#vuestic-config'] = configPath
+  } else {
+    nuxt.options.alias['#vuestic-config'] = resolveInRuntime('./runtime/config.mjs')
+  }
+
+  const watcher = watch(configPath)
+    .on('ready', () => {
+      watcher
+        .on('add', restartNuxt)
+        .on('unlink', restartNuxt)
+    })
+}

packages/ui/src/nuxt/composables/use-css.ts

@@ -0,0 +1,38 @@
+import { useNuxt } from '@nuxt/kit'
+import type { Nuxt, NuxtOptions } from '@nuxt/schema'
+import type { VuesticOptions } from '../types'
+
+const VUESTIC_DEFAULT_FONTS = [
+  { rel: 'stylesheet', href: 'https://fonts.googleapis.com/css2?family=Source+Sans+Pro:ital,wght@0,400;1,700&display=swap' },
+  { rel: 'stylesheet', href: 'https://fonts.googleapis.com/icon?family=Material+Icons&display=swap' },
+]
+
+const registerDefaultFonts = (nuxt: Nuxt) => {
+  nuxt.options.app = nuxt.options.app || {} as NuxtOptions['app']
+  nuxt.options.app.head = nuxt.options.app.head || {}
+  nuxt.options.app.head.link = nuxt.options.app.head.link || []
+  nuxt.options.app.head.link.push(...VUESTIC_DEFAULT_FONTS)
+}
+
+/** Register CSS modules */
+export const useVuesticCSS = (options: VuesticOptions) => {
+  const nuxt = useNuxt()
+
+  if (Array.isArray(options.css)) {
+    /** Register essential css. Vuestic will not work without essential.css */
+    nuxt.options.css.push('vuestic-ui/styles/essential.css')
+
+    /** Register other css modules that user has chosen */
+    options.css.forEach((cssModuleName) => {
+      nuxt.options.css.push(`vuestic-ui/styles/${cssModuleName}.css`)
+    })
+  } else if (options.css === true) {
+    /** Register all CSS */
+    nuxt.options.css.push('vuestic-ui/dist/styles/index.css')
+  }
+
+  if (options.fonts) {
+    registerDefaultFonts(nuxt)
+  }
+  // Do not register any CSS if `options.css` is `false`
+}

packages/ui/src/nuxt/composables/use-plugin.ts

@@ -0,0 +1,20 @@
+import { addPluginTemplate } from '@nuxt/kit'
+
+import { resolveInRuntime } from '../utils/resolve'
+
+import type { VuesticOptions } from '../types'
+
+/** Register vuestic nuxt plugin */
+export const useVuesticPlugin = (options: VuesticOptions) => {
+  const pluginPath = resolveInRuntime('./runtime/plugin.mjs')
+
+  addPluginTemplate({
+    src: pluginPath,
+    filename: pluginPath.split('/').pop(),
+
+    // Use JSON.stringify() here, because it will be inserted in ejs template as string. Then we will JSON.parse it.
+    options: {
+      value: JSON.stringify(options),
+    },
+  })
+}

packages/ui/src/nuxt/composables/use-transpile.ts

@@ -0,0 +1,8 @@
+import { useNuxt } from '@nuxt/kit'
+
+/** Transpile vuestic-ui */
+export const useTranspile = () => {
+  const nuxt = useNuxt()
+
+  nuxt.options.build.transpile.push('vuestic-ui')
+}