feat: improvements

support _level, normalizeComponents, add tests and improve resolving

Author: pi0

.gitignore

@@ -5,3 +5,4 @@ node_modules
 coverage
 dist
 types
+.nuxt

README.md

@@ -48,8 +48,6 @@ export default resolveConfig({
 })
 ```
 
-**Note:** While it is not necessary, it is recommended to also follow [Theme Author](#theme-author) section for your project so it is reusable for others.
-
 ### Theme Author
 
 - Update `nuxt.config` and ensure required `rootDir` and `name` properties are provided
@@ -63,6 +61,8 @@ export default resolveConfig({
 }
 ```
 
+**Note:** If you are extending another theme, `rootDir` should be ONLY provided if you want to also extend project.
+
 - Instead of using `~/` or `@/` aliases, use `~myTheme` or `@myTheme`
 
 ## License

package.json

@@ -11,6 +11,7 @@
   ],
   "scripts": {
     "build": "siroc build",
+    "dev": "nuxt test/fixture/app -c nuxt.config.cjs.js",
     "lint": "eslint --ext .ts src",
     "prepublish": "yarn build",
     "release": "yarn test && yarn build && standard-version && git push --follow-tags && npm publish",
@@ -22,12 +23,15 @@
     "jiti": "^0.1.12"
   },
   "devDependencies": {
+    "@nuxt/components": "^1.1.1",
     "@nuxt/types": "^2.14.7",
+    "@nuxt/typescript-runtime": "^2.0.0",
     "@nuxtjs/eslint-config-typescript": "latest",
     "@types/jest": "latest",
     "@types/node": "latest",
     "eslint": "latest",
     "jest": "latest",
+    "nuxt": "^2.14.7",
     "siroc": "^0.4.0",
     "standard-version": "latest",
     "ts-jest": "latest",

src/index.ts

@@ -1,22 +1,47 @@
 import { dirname } from 'path'
 import Hookable, { configHooksT } from 'hookable'
 import defu from 'defu'
-import { NuxtConfig } from '@nuxt/types'
+import type { NuxtConfig } from '@nuxt/types'
 
 declare module '@nuxt/types' {
   interface NuxtConfig {
-    hooks: configHooksT
+    _level?: Number
+    hooks?: configHooksT
     name?: string
     extends?: string
     alias?: { [key: string]: string }
   }
 }
 
-export function extendConfig (base: NuxtConfig | string, target: NuxtConfig): NuxtConfig {
-  // Resolve Configs
-  base = resolveConfig(base)
-  target = resolveConfig(target)
+export function resolveConfig (config: string | NuxtConfig, from: string = process.cwd()): NuxtConfig {
+  if (typeof config === 'string') {
+    const jiti = require('jiti')(from)
+    const name = config
+    const nuxtConfigFile = jiti.resolve(config)
+    config = jiti(nuxtConfigFile) as NuxtConfig
+
+    if (!config.rootDir) {
+      config.rootDir = dirname(nuxtConfigFile)
+    }
+
+    if (!config.name) {
+      config.name = name
+    }
+  }
+
+  if (!config.rootDir) {
+    config.rootDir = from
+  }
+
+  if (config.extends) {
+    const _resolvedExtends = resolveConfig(config.extends, config.rootDir)
+    config = extendConfig(config, _resolvedExtends)
+  }
+
+  return config
+}
 
+export function extendConfig (target: NuxtConfig, base: NuxtConfig): NuxtConfig {
   // Ensure base has require fileds
   if (!base.name) {
     throw new Error('Base config is missing `name` property')
@@ -28,6 +53,10 @@ export function extendConfig (base: NuxtConfig | string, target: NuxtConfig): Nu
     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)
@@ -41,35 +70,37 @@ export function extendConfig (base: NuxtConfig | string, target: NuxtConfig): Nu
   base.alias['@@' + base.name] = base.rootDir
 
   // Custom merges
-  const override = {
-    hooks: Hookable.mergeHooks(base.hooks || {}, target.hooks || {})
+  const override: NuxtConfig = {}
+
+  // Merge hooks
+  override.hooks = Hookable.mergeHooks(base.hooks || {}, target.hooks || {})
+
+  // Merge components prop
+  if (base.components || target.components) {
+    override.components = [
+      ...normalizeComponents(base.components, { level: base._level }),
+      ...normalizeComponents(target.components, { level: target._level })
+    ]
   }
 
   // Merge with defu
   return defu.arrayFn(override, target, base)
 }
 
-export function resolveConfig (config: string | NuxtConfig): NuxtConfig {
-  if (typeof config === 'string') {
-    const jiti = require('jiti')()
-
-    const name = config
-    const nuxtConfigFile = jiti.resolve(config)
-
-    config = jiti(nuxtConfigFile) as NuxtConfig
-
-    if (!config.rootDir) {
-      config.rootDir = dirname(nuxtConfigFile)
-    }
-
-    if (!config.name) {
-      config.name = name
-    }
+function normalizeComponents (components: NuxtConfig['components'], dirOverride = {}) {
+  if (typeof components === 'boolean') {
+    components = []
   }
 
-  if (config.extends) {
-    config = extendConfig(config.extends, config)
+  if (!Array.isArray(components)) {
+    // TODO: Deprecate components: { dirs } support from @nuxt/components
+    throw new TypeError('`components` should be an array')
   }
 
-  return config
+  components = components.map(dir => ({
+    ...(typeof dir === 'string' ? { dir } : dir),
+    ...dirOverride
+  }))
+
+  return components
 }

test/__snapshots__/index.test.ts.snap

@@ -0,0 +1,25 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`matches snapshot 1`] = `
+Object {
+  "_level": Object {},
+  "alias": Object {
+    "@@baseTheme": "{test}/fixture/themes/base",
+    "@@baseThemeEx": "{test}/fixture/themes/red",
+    "@baseTheme": "{test}/fixture/themes/base",
+    "@baseThemeEx": "{test}/fixture/themes/base",
+    "~baseTheme": "{test}/fixture/themes/base",
+    "~baseThemeEx": "{test}/fixture/themes/base",
+    "~~baseTheme": "{test}/fixture/themes/base",
+    "~~baseThemeEx": "{test}/fixture/themes/red",
+  },
+  "extends": "../themes/red/nuxt.config",
+  "hooks": Object {},
+  "name": "myApp",
+  "publicRuntimeConfig": Object {
+    "color": "red",
+  },
+  "rootDir": "{test}/fixture/app",
+  "srcDir": "{test}/fixture/themes/base",
+}
+`;

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

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

test/fixture/app/nuxt.config.ts

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

test/fixture/themes/base/nuxt.config.ts

@@ -0,0 +1,12 @@
+import type { NuxtConfig } from '@nuxt/types'
+import { resolveConfig } from '../../../../src/index'
+
+export default <NuxtConfig>resolveConfig({
+  name: 'baseTheme',
+  rootDir: __dirname,
+  srcDir: __dirname,
+
+  publicRuntimeConfig: {
+    color: 'blue'
+  }
+})

test/fixture/themes/base/pages/index.vue

@@ -0,0 +1,7 @@
+<template>
+  <div>
+    Hello world from base!
+
+    <br>Color: {{ $config.color }}
+  </div>
+</template>

test/fixture/themes/red/nuxt.config.ts

@@ -0,0 +1,9 @@
+export default {
+  name: 'baseThemeEx',
+  rootDir: __dirname,
+  extends: '../base/nuxt.config',
+
+  publicRuntimeConfig: {
+    color: 'red'
+  }
+}