feat: components level

Author: pi0

src/index.ts

@@ -5,15 +5,15 @@ import type { NuxtConfig } from '@nuxt/types'
 
 declare module '@nuxt/types' {
   interface NuxtConfig {
-    _level?: Number
+    _level?: number
     hooks?: configHooksT
     name?: string
     extends?: string
     alias?: { [key: string]: string }
   }
 }
 
-export function resolveConfig (config: string | NuxtConfig, from: string = process.cwd()): NuxtConfig {
+export function resolveConfig (config: string | NuxtConfig, from: string = process.cwd(), level = 0): NuxtConfig {
   if (typeof config === 'string') {
     const jiti = require('jiti')(from)
     const name = config
@@ -33,8 +33,10 @@ export function resolveConfig (config: string | NuxtConfig, from: string = proce
     config.rootDir = from
   }
 
+  config._level = level
+
   if (config.extends) {
-    const _resolvedExtends = resolveConfig(config.extends, config.rootDir)
+    const _resolvedExtends = resolveConfig(config.extends, config.rootDir, level + 1)
     config = extendConfig(config, _resolvedExtends)
   }
 
@@ -53,10 +55,6 @@ export function extendConfig (target: NuxtConfig, base: NuxtConfig): NuxtConfig
     base.srcDir = base.rootDir
   }
 
-  // Set _level
-  target._level = target._level || 0
-  base._level = target.level + 1
-
   // Ensure there is no name conflict
   if (target.alias && target.alias['~' + base.name]) {
     throw new Error('Theme name conflict: ' + base.name)
@@ -78,28 +76,28 @@ export function extendConfig (target: NuxtConfig, base: NuxtConfig): NuxtConfig
   // Merge components prop
   if (base.components || target.components) {
     override.components = [
-      ...normalizeComponents(base.components, { level: base._level }),
-      ...normalizeComponents(target.components, { level: target._level })
+      ...normalizeComponents(target.components, { level: target._level }),
+      ...normalizeComponents(base.components, { level: base._level })
     ]
   }
 
   // Merge with defu
-  return defu.arrayFn(override, target, base)
+  return { ...defu.arrayFn(target, base), ...override }
 }
 
-function normalizeComponents (components: NuxtConfig['components'], dirOverride = {}) {
-  if (typeof components === 'boolean') {
+function normalizeComponents (components: NuxtConfig['components'], defaults = {}) {
+  if (typeof components === 'boolean' || !components) {
     components = []
   }
 
   if (!Array.isArray(components)) {
     // TODO: Deprecate components: { dirs } support from @nuxt/components
-    throw new TypeError('`components` should be an array')
+    throw new TypeError('`components` should be an array: ' + typeof components)
   }
 
   components = components.map(dir => ({
-    ...(typeof dir === 'string' ? { dir } : dir),
-    ...dirOverride
+    ...defaults,
+    ...(typeof dir === 'string' ? { path: dir } : dir)
   }))
 
   return components

test/__snapshots__/index.test.ts.snap

@@ -2,7 +2,7 @@
 
 exports[`matches snapshot 1`] = `
 Object {
-  "_level": Object {},
+  "_level": 0,
   "alias": Object {
     "@@baseTheme": "{test}/fixture/themes/base",
     "@@baseThemeEx": "{test}/fixture/themes/red",
@@ -13,6 +13,21 @@ Object {
     "~~baseTheme": "{test}/fixture/themes/base",
     "~~baseThemeEx": "{test}/fixture/themes/red",
   },
+  "components": Array [
+    Object {
+      "level": 0,
+      "path": "{test}/fixture/app/components",
+    },
+    Object {
+      "level": 1,
+      "path": "{test}/fixture/themes/red/components",
+    },
+    Object {
+      "global": true,
+      "level": 2,
+      "path": "{test}/fixture/themes/base/components",
+    },
+  ],
   "extends": "../themes/red/nuxt.config",
   "hooks": Object {},
   "name": "myApp",

test/fixture/app/components/.gitkeep

@@ -0,0 +1 @@
+console.log(require('jiti')(__dirname)('./nuxt.config.ts'))

test/fixture/app/logconfig.js

@@ -1 +1,3 @@
 export default require('jiti')(__dirname)('./nuxt.config.ts')
+
+console.log(require('jiti')(__dirname)('./nuxt.config.ts').default.components)

test/fixture/app/nuxt.config.cjs.js

@@ -1,8 +1,13 @@
+import { resolve } from 'path'
 import type { NuxtConfig } from '@nuxt/types'
 import { resolveConfig } from '../../../src/index'
 
 export default <NuxtConfig>resolveConfig({
   name: 'myApp',
   rootDir: __dirname,
-  extends: '../themes/red/nuxt.config'
+  extends: '../themes/red/nuxt.config',
+
+  components: [
+    resolve(__dirname, 'components')
+  ]
 })

test/fixture/app/nuxt.config.ts

@@ -1,3 +1,4 @@
+import { resolve } from 'path'
 import type { NuxtConfig } from '@nuxt/types'
 import { resolveConfig } from '../../../../src/index'
 
@@ -6,6 +7,10 @@ export default <NuxtConfig>resolveConfig({
   rootDir: __dirname,
   srcDir: __dirname,
 
+  components: [
+    { path: resolve(__dirname, 'components'), global: true }
+  ],
+
   publicRuntimeConfig: {
     color: 'blue'
   }

test/fixture/themes/base/components/.gitkeep

@@ -1,8 +1,14 @@
+import { resolve } from 'path'
+
 export default {
   name: 'baseThemeEx',
   rootDir: __dirname,
   extends: '../base/nuxt.config',
 
+  components: [
+    resolve(__dirname, 'components')
+  ],
+
   publicRuntimeConfig: {
     color: 'red'
   }