feat: use AppConfig to define CompilerOptions (#37)

- use AppConfig to add RuntimeCompilerOptions at runtime - use AppConfig to add RuntimeCompilerOptions at build time - update README
huang-julien · Feb 5, 2023 · e39b6be · e39b6be
1 parent b690367
commit e39b6be
Show file tree

Hide file tree

Showing 10 changed files with 358 additions and 11 deletions.
diff --git a/README.md b/README.md
@@ -28,7 +28,7 @@ interface NuxtRuntimeCompilerOptions {
 
 You can specify the node_modules root directory if your `node_modules` directory is not at your `process.cwd()`.
 
-Default value is `./`
+- Default value is `./`
 
 For example if you are running `nuxt build` from a project in `root/packages/{YOUR_WORKSPACE}` while your `node_modules` is in `root/`
 then the nodeModulesRoot should be 
@@ -39,3 +39,27 @@ export default defineNuxtConfig({
     }]
 })
 ```
+
+## RuntimeCompilerOptions
+
+See [app.config documentation](https://nuxt.com/docs/examples/app/app-config)
+This module overloads the `AppConfig` exported by `app.config.ts` to pass the [RuntimeCompilerOptions](https://github.com/vuejs/core/blob/dbe7109c8f6417770129dc92313f05feac0c0edb/packages/runtime-core/src/componentOptions.ts#L213-L218) to your VueApp in runtime.
+
+Compatible options from [RuntimeCompilerOptions](https://github.com/vuejs/core/blob/dbe7109c8f6417770129dc92313f05feac0c0edb/packages/runtime-core/src/componentOptions.ts#L213-L218) in `app.config` will also be used by the builder during build time.
+
+`app.config.ts`
+
+```ts
+export default defineAppConfig({
+  vue: {
+    compilerOptions: {
+      isCustomElement: (tag) => {
+        return [
+          'math',
+          'maction',
+        ].includes(tag)
+      }
+    }
+  }
+})
+```
diff --git a/package.json b/package.json
@@ -25,12 +25,12 @@
     "dev": "nuxi dev playground",
     "dev:build": "nuxi build playground",
     "dev:prepare": "nuxt-module-build --stub && nuxi prepare playground",
-    "test": "vitest --dir test",
+    "test": "yarn nuxi prepare ./test/fixtures/basic && vitest --dir test",
     "test:dev": "npx cross-env NUXT_TEST_DEV=true yarn test",
-    "test:webpack": "npx cross-env BUILDER=webpack vitest --dir test", 
+    "test:webpack": "npx cross-env BUILDER=webpack vitest --dir test",
     "test:external-vue-disabled": "npx cross-env FIXTURE=external-vue-disabled yarn test",
     "test:external-vue-disabled:dev": "npx cross-env NUXT_TEST_DEV=true FIXTURE=external-vue-disabled yarn test",
-    "test:external-vue-disabled:webpack": "npx cross-env BUILDER=webpack FIXTURE=external-vue-disabled yarn test",    
+    "test:external-vue-disabled:webpack": "npx cross-env BUILDER=webpack FIXTURE=external-vue-disabled yarn test",
     "lint": "eslint --ext .vue,.js,.ts ./"
   },
   "dependencies": {

diff --git a/playground/app.config.ts b/playground/app.config.ts
@@ -0,0 +1,94 @@
+export default defineAppConfig({
+  vue: {
+    compilerOptions: {
+      isCustomElement: (tag) => {
+        return ['math',
+          'maction',
+          'maligngroup',
+          'malignmark',
+          'menclose',
+          'merror',
+          'mfenced',
+          'mfrac',
+          'mi',
+          'mlongdiv',
+          'mmultiscripts',
+          'mn',
+          'mo',
+          'mover',
+          'mpadded',
+          'mphantom',
+          'mroot',
+          'mrow',
+          'ms',
+          'mscarries',
+          'mscarry',
+          'mscarries',
+          'msgroup',
+          'mstack',
+          'mlongdiv',
+          'msline',
+          'mstack',
+          'mspace',
+          'msqrt',
+          'msrow',
+          'mstack',
+          'mstack',
+          'mstyle',
+          'msub',
+          'msup',
+          'msubsup',
+          'mtable',
+          'mtd',
+          'mtext',
+          'mtr',
+          'munder',
+          'munderover',
+          'semantics',
+          'math',
+          'mi',
+          'mn',
+          'mo',
+          'ms',
+          'mspace',
+          'mtext',
+          'menclose',
+          'merror',
+          'mfenced',
+          'mfrac',
+          'mpadded',
+          'mphantom',
+          'mroot',
+          'mrow',
+          'msqrt',
+          'mstyle',
+          'mmultiscripts',
+          'mover',
+          'mprescripts',
+          'msub',
+          'msubsup',
+          'msup',
+          'munder',
+          'munderover',
+          'none',
+          'maligngroup',
+          'malignmark',
+          'mtable',
+          'mtd',
+          'mtr',
+          'mlongdiv',
+          'mscarries',
+          'mscarry',
+          'msgroup',
+          'msline',
+          'msrow',
+          'mstack',
+          'maction',
+          'semantics',
+          'annotation',
+          'annotation-xml'
+        ].includes(tag)
+      }
+    }
+  }
+})
diff --git a/src/module.ts b/src/module.ts
@@ -1,5 +1,7 @@
-import { defineNuxtModule, isNuxt2, isNuxt3 } from '@nuxt/kit'
-import { resolve } from 'pathe'
+import { resolve } from 'path'
+import { existsSync } from 'fs'
+import { addPlugin, createResolver, defineNuxtModule, isNuxt2, isNuxt3, resolvePath } from '@nuxt/kit'
+import type { AppConfig } from '@nuxt/schema'
 
 interface NuxtRuntimeCompilerOptions {
   nodeModulesRoot?: string
@@ -10,9 +12,7 @@ export default defineNuxtModule({
     name: 'nuxt-runtime-compiler',
     configKey: 'nuxtRuntimeCompiler'
   },
-  setup (options: NuxtRuntimeCompilerOptions, nuxt) {
-    const { nodeModulesRoot = './' } = options
-
+  async setup ({ nodeModulesRoot = './' } : NuxtRuntimeCompilerOptions, nuxt) {
     if (isNuxt2(nuxt)) {
       /** override all nuxt default vue aliases to force uses of the full bundle of VueJS  */
       const vueFullCommonPath = 'vue/dist/vue.common.js'
@@ -124,6 +124,52 @@ export default defineNuxtModule({
           }
         })
       })
+
+      const resolver = createResolver(import.meta.url)
+      const runtimeDir = await resolver.resolve('./runtime')
+      nuxt.options.build.transpile.push(runtimeDir)
+
+      addPlugin(resolve(runtimeDir, 'nuxt-runtime-compiler.plugin.ts'))
+
+      nuxt.hook('prepare:types', ({ references }) => {
+        references.push({ path: resolve(runtimeDir, 'types.d.ts') })
+      })
+
+      const appConfigPath = await resolvePath('app.config')
+
+      // use AppConfig to define vue compiler options at build time
+      if (existsSync(appConfigPath)) {
+        const globalDefineAppConfig = (globalThis as any).defineAppConfig
+
+        if (!globalDefineAppConfig) {
+          // allow defineAppConfig
+          (globalThis as any).defineAppConfig = (c: any) => c
+        }
+        const appConfig = await import(appConfigPath) as AppConfig
+
+        nuxt.options.vite.vue = {
+          ...nuxt.options.vite.vue,
+          template: {
+            ...nuxt.options.vite.vue?.template,
+            compilerOptions: {
+              ...nuxt.options.vite.vue?.template?.compilerOptions,
+              ...appConfig.vue?.compilerOptions
+            }
+          }
+        }
+
+        nuxt.options.webpack.loaders.vue = {
+          ...nuxt.options.webpack.loaders.vue,
+          compilerOptions: {
+            ...nuxt.options.webpack.loaders.vue.compilerOptions,
+            ...appConfig.vue?.compilerOptions
+          }
+        }
+
+        if (!globalDefineAppConfig) {
+          delete (globalThis as any).defineAppConfig
+        }
+      }
     }
   }
 })
diff --git a/src/runtime/nuxt-runtime-compiler.plugin.ts b/src/runtime/nuxt-runtime-compiler.plugin.ts
@@ -0,0 +1,6 @@
+import { defineNuxtPlugin, useAppConfig } from '#imports'
+
+export default defineNuxtPlugin((nuxtApp) => {
+  const appConfig = useAppConfig()
+  nuxtApp.vueApp.config.compilerOptions.isCustomElement = appConfig.vue?.compilerOptions?.isCustomElement
+})
diff --git a/src/runtime/types.d.ts b/src/runtime/types.d.ts
@@ -0,0 +1,16 @@
+
+import { RuntimeCompilerOptions } from 'vue'
+
+declare module '@nuxt/schema' {
+    interface AppConfig {
+        vue?: {
+            compilerOptions?: RuntimeCompilerOptions
+        }
+    }
+
+    interface AppConfigInput {
+        vue?: {
+            compilerOptions?: RuntimeCompilerOptions
+        }
+    }
+}
diff --git a/test/fixtures/basic/app.config.ts b/test/fixtures/basic/app.config.ts
@@ -0,0 +1,95 @@
+export default defineAppConfig({
+  vue: {
+    compilerOptions: {
+      isCustomElement: (tag) => {
+        return [
+          'math',
+          'maction',
+          'maligngroup',
+          'malignmark',
+          'menclose',
+          'merror',
+          'mfenced',
+          'mfrac',
+          'mi',
+          'mlongdiv',
+          'mmultiscripts',
+          'mn',
+          'mo',
+          'mover',
+          'mpadded',
+          'mphantom',
+          'mroot',
+          'mrow',
+          'ms',
+          'mscarries',
+          'mscarry',
+          'mscarries',
+          'msgroup',
+          'mstack',
+          'mlongdiv',
+          'msline',
+          'mstack',
+          'mspace',
+          'msqrt',
+          'msrow',
+          'mstack',
+          'mstack',
+          'mstyle',
+          'msub',
+          'msup',
+          'msubsup',
+          'mtable',
+          'mtd',
+          'mtext',
+          'mtr',
+          'munder',
+          'munderover',
+          'semantics',
+          'math',
+          'mi',
+          'mn',
+          'mo',
+          'ms',
+          'mspace',
+          'mtext',
+          'menclose',
+          'merror',
+          'mfenced',
+          'mfrac',
+          'mpadded',
+          'mphantom',
+          'mroot',
+          'mrow',
+          'msqrt',
+          'mstyle',
+          'mmultiscripts',
+          'mover',
+          'mprescripts',
+          'msub',
+          'msubsup',
+          'msup',
+          'munder',
+          'munderover',
+          'none',
+          'maligngroup',
+          'malignmark',
+          'mtable',
+          'mtd',
+          'mtr',
+          'mlongdiv',
+          'mscarries',
+          'mscarry',
+          'msgroup',
+          'msline',
+          'msrow',
+          'mstack',
+          'maction',
+          'semantics',
+          'annotation',
+          'annotation-xml'
+        ].includes(tag)
+      }
+    }
+  }
+})
diff --git a/test/fixtures/basic/nuxt.config.ts b/test/fixtures/basic/nuxt.config.ts
@@ -1,4 +1,3 @@
-import { defineNuxtConfig } from 'nuxt/config'
 import nuxtRuntimeCompiler from '../../../src/module'
 
 export default defineNuxtConfig({