fix: discover collections installed by a layer (#519)

Author: zsilbi

src/bundle-server.ts

@@ -1,7 +1,9 @@
+import { relative } from 'node:path'
 import { addTemplate } from '@nuxt/kit'
+import { resolveModule } from 'local-pkg'
 import type { NuxtIconRuntimeOptions } from './types'
 import { getResolvePaths } from './collections'
-import { getCollectionPath } from './core/collections'
+import { getCollectionPath, resolveCollectionFile } from './core/collections'
 import type { NuxtIconModuleContext } from './context'
 
 export function registerServerBundle(
@@ -49,13 +51,26 @@ export function registerServerBundle(
             return `  '${collection}': createRemoteCollection(${JSON.stringify(getRemoteEndpoint(collection))}),`
           }
 
-          const path = getCollectionPath(collection, getResolvePaths(nuxt))
+          const resolvePaths = getResolvePaths(nuxt)
+          const path = getCollectionPath(collection, resolvePaths)
 
-          // When in dev mode, we avoid bundling the icons to improve performance
-          // Get rid of the require() when ESM JSON modules are widely supported
-          return isBundling
-            ? `  '${collection}': () => import('${path}', { with: { type: 'json' } }).then(m => m.default),`
-            : `  '${collection}': () => require('${path}'),`
+          if (!isBundling) {
+            // When in dev mode, we avoid bundling the icons to improve performance
+            // Get rid of the require() when ESM JSON modules are widely supported
+            return `  '${collection}': () => require('${path}'),`
+          }
+
+          // A collection owned by a layer does not resolve from the app, so the bare specifier above
+          // reaches the build unresolved and throws at runtime. Import the resolved file instead
+          const file = resolveModule(path, { paths: [nuxt.options.rootDir] })
+            ? undefined
+            : resolveCollectionFile(collection, resolvePaths)
+          if (file) {
+            const relPath = relative(nuxt.options.buildDir, file).replaceAll('\\', '/')
+            return `  '${collection}': () => import('${relPath.startsWith('.') ? relPath : `./${relPath}`}').then(m => m.default),`
+          }
+
+          return `  '${collection}': () => import('${path}', { with: { type: 'json' } }).then(m => m.default),`
         }
         else {
           const { prefix } = collection

src/collections.ts

@@ -1,7 +1,16 @@
+import { getLayerDirectories } from '@nuxt/kit'
 import type { Nuxt } from '@nuxt/schema'
 
 export function getResolvePaths(nuxt: Nuxt): string[] {
-  return Array.from(new Set(
-    [nuxt.options.rootDir, nuxt.options.workspaceDir].filter(Boolean),
-  ))
+  const layerDirs = getLayerDirectories(nuxt).map(
+    dir => dir.root,
+  )
+
+  return Array.from(
+    new Set(
+      [nuxt.options.rootDir, nuxt.options.workspaceDir, ...layerDirs].filter(
+        Boolean,
+      ),
+    ),
+  )
 }

src/core/collections.ts

@@ -4,7 +4,7 @@ import { consola } from 'consola'
 import { glob } from 'tinyglobby'
 import type { IconifyIcon, IconifyJSON } from '@iconify/types'
 import { parseSVGContent, convertParsedSVG } from '@iconify/utils/lib/svg/parse'
-import { isPackageExists } from 'local-pkg'
+import { isPackageExists, resolveModule } from 'local-pkg'
 import { collectionNames } from '../collection-names'
 import type { CustomCollection, ServerBundleOptions, RemoteCollection } from './types'
 
@@ -33,6 +33,14 @@ export function getCollectionPath(collection: string, resolvePaths: string[]) {
     : `@iconify-json/${collection}/icons.json`
 }
 
+/**
+ * The file a collection's specifier points at, searched across every resolve path.
+ * Returns `undefined` when the collection is not installed.
+ */
+export function resolveCollectionFile(collection: string, resolvePaths: string[]): string | undefined {
+  return resolveModule(getCollectionPath(collection, resolvePaths), { paths: resolvePaths })
+}
+
 // https://github.com/iconify/iconify/blob/2274c033b49c01a50dc89b490b89d803d19d95dc/packages/utils/src/icon/name.ts#L15-L18
 const validIconNameRE = /^[a-z0-9]+(?:-[a-z0-9]+)*$/
 

test/client-bundle.test.ts

@@ -27,9 +27,13 @@ function installCollection(dir: string, prefix: string, icon: string) {
   }))
 }
 
-function createContext(rootDir: string, workspaceDir: string, icons: string[], hookIcons: string[] = []) {
+function createContext(rootDir: string, workspaceDir: string, icons: string[], hookIcons: string[] = [], layerDirs: string[] = []) {
   const nuxt = {
-    options: { rootDir, workspaceDir },
+    options: {
+      rootDir,
+      workspaceDir,
+      _layers: [{ cwd: rootDir, config: { rootDir } }, ...layerDirs.map(dir => ({ cwd: dir, config: { rootDir: dir } }))],
+    },
     // Mimic a module contributing icons through the `icon:clientBundleIcons` hook
     callHook: async (_name: string, set: Set<string>) => {
       for (const icon of hookIcons)
@@ -48,11 +52,13 @@ let root: string
 const appDir = () => join(root, 'app')
 const wsDir = () => join(root, 'ws')
 const emptyDir = () => join(root, 'empty')
+const layerDir = () => join(root, 'layer')
 
 beforeAll(() => {
   root = mkdtempSync(join(tmpdir(), 'nuxt-icon-client-bundle-'))
   installCollection(appDir(), 'nuxt-icon-test', 'foo')
   installCollection(wsDir(), 'nuxt-icon-test-ws', 'bar')
+  installCollection(layerDir(), 'nuxt-icon-test-layer', 'baz')
   mkdirSync(emptyDir(), { recursive: true })
 })
 
@@ -80,6 +86,16 @@ it('falls back to workspaceDir when the collection is not under rootDir', async
   expect(result.collections.find(c => c.prefix === 'nuxt-icon-test-ws')?.icons.bar).toBeTruthy()
 })
 
+it('resolves a collection installed by a layer rather than the app', async () => {
+  // The layer owns the dependency, so it resolves from neither `rootDir` nor `workspaceDir`.
+  const context = createContext(emptyDir(), emptyDir(), ['nuxt-icon-test-layer:baz'], [], [layerDir()])
+  const result = await context.loadClientBundleCollections()
+
+  expect(result.failed).toEqual([])
+  expect(result.count).toBe(1)
+  expect(result.collections.find(c => c.prefix === 'nuxt-icon-test-layer')?.icons.baz).toBeTruthy()
+})
+
 it('does not hard-fail when a hook-contributed icon cannot be resolved', async () => {
   // A module adds an icon from a collection that is not installed. It must be
   // best-effort: omitted from the bundle (so it falls back to runtime loading)