feat: Add defineENV option

Author: DaPotatoMan

.env.local

@@ -1,5 +1,5 @@
 VITE_OFFICE_ID=c6890c26-5bbb-40ed-a321-37f07909a2f0
-VITE_OFFICE_DOMAIN=https://www.contoso.com
+VITE_OFFICE_DOMAIN=https://contoso.com
 VITE_OFFICE_PROVIDER_NAME=Contoso, Ltd
 VITE_OFFICE_DISPLAY_NAME=Contoso App
 VITE_OFFICE_DESCRIPTION=Office add-in for Contoso App

README.md

@@ -25,6 +25,7 @@ MS Office addin for Nuxt and Vite
 <!-- Highlight some of the features your module provide here -->
 - 🌍 Supports both Nuxt & Vite
 - ⚙️ ENV variables support in manifest files
+- 🪝 Define dynamic env variables
 - 🧬 Same manifest routes in dev and build
 - 💉 Auto inject Office.js in routes
 
@@ -33,6 +34,8 @@ MS Office addin for Nuxt and Vite
 - [Nuxt](docs/nuxt-setup.md)
 - [Vite](docs/vite-setup.md)
 
+## [Configuration](docs/config.md)
+
 ## Contribution
 
 <details>

docs/config.md

@@ -0,0 +1,37 @@
+## Configuration
+
+### `manifests`
+
+- **Type:** `ManifestEntry[]`
+- **Description:** An array of manifest entries that define the input manifests for the Office Add-in.
+
+### `injectOfficeJS`
+
+- **Type:** `(string | RegExp)[]`
+- **Description:** An array of strings or regular expressions that specify the routes where the `office.js` library should be injected.
+
+### `defineENV`
+
+- **Type:** `(env: Readonly<ImportMetaEnv & object>) => Record<EnvKey, string>`
+- **Description:** An optional hook function that allows you to define additional environment variables for your application. The function takes an `env` parameter, which is an object containing the environment variables loaded from your environment. The function should return an object with environment variables, where the keys must be prefixed with either `NUXT_` or `VITE_`.
+
+## Usage
+
+To configure the Microsoft Office Add-in in your Nuxt.js application, you can create a `nuxt.config.ts` file in the root of your project and add the following configuration:
+
+```ts
+export default defineNuxtConfig({
+  msOfficeAddin: {
+    manifests: [
+      // Add your manifest entries here
+    ],
+    injectOfficeJS: [
+      // Add your routes where office.js should be injected
+    ],
+    // Optionally, define additional environment variables
+    defineENV: env => ({
+      VITE_VAR_DATA: 'my-value',
+      VITE_DYNAMIC_DATA: env.VITE_VAR.replace('content', 'new content'),
+    }),
+  },
+})

manifest.xml

@@ -14,4 +14,13 @@
     <SourceLocation DefaultValue="https://www.contoso.com/search_app/Default.aspx" />
   </DefaultSettings>
   <Permissions>ReadWriteDocument</Permissions>
+  <WebApplicationInfo>
+    <Id>{VITE_OFFICE_ID}</Id>
+    <Resource>api://{VITE_OFFICE_HOST}/outlook/{VITE_OFFICE_ID}</Resource>
+    <Scopes>
+      <Scope>openid</Scope>
+      <Scope>profile</Scope>
+      <Scope>User.Read</Scope>
+    </Scopes>
+  </WebApplicationInfo>
 </OfficeApp>

playground/nuxt/nuxt.config.ts

@@ -22,5 +22,9 @@ export default defineNuxtConfig({
     ],
 
     injectOfficeJS: ['/'],
+
+    defineENV: env => ({
+      VITE_OFFICE_HOST: new URL(env.VITE_OFFICE_DOMAIN).host,
+    }),
   },
 })

playground/vite/vite.config.ts

@@ -16,6 +16,10 @@ export default defineConfig({
 
       /** Office.js will be injected to index.html page */
       injectOfficeJS: ['/outlook.html'],
+
+      defineENV: env => ({
+        VITE_OFFICE_HOST: new URL(env.VITE_OFFICE_DOMAIN).host,
+      }),
     }),
   ],
 

src/core/types.ts

@@ -1,3 +1,5 @@
+type EnvKey = `VITE_${string}` | `NUXT_${string}`
+
 export interface ManifestEntry {
   src: string
 
@@ -18,6 +20,13 @@ export interface MSOfficeAddinConfig {
 
   /** Routes where office.js will be injected */
   injectOfficeJS: (string | RegExp)[]
+
+  /**
+   * Use this hook to define additional env variables.
+   * Variables must be prefixed with `NUXT_` or `VITE_`
+   * @param env ENV variables loaded from your environment
+   */
+  defineENV?: (env: Readonly<ImportMetaEnv & object>) => Record<EnvKey, string>
 }
 
 export interface OfficeAddinVirtualContext {

src/core/utils.ts

@@ -1,23 +1,26 @@
 import fs from 'node:fs'
 import { resolve } from 'node:path'
-import { loadEnv, normalizePath } from 'vite'
-import type { GeneratedManifest, ManifestEntry } from './types'
+import { loadEnv } from 'vite'
+import type { GeneratedManifest, MSOfficeAddinConfig, ManifestEntry } from './types'
 
 export const OFFICE_JS_URL = 'https://appsforoffice.microsoft.com/lib/1.1/hosted/office.js'
 export const OFFICE_JS_LOADER_SNIPPET = `<script src="${OFFICE_JS_URL}" async defer></script>`
 
-export function getPath(paths: string[]) {
-  return normalizePath(resolve(...paths))
-}
-
 export function transformManifests(params: {
   inputs: ManifestEntry[]
   mode: string
   envDir: string
+  defineENV?: MSOfficeAddinConfig['defineENV']
 }) {
   const entries = <GeneratedManifest[]>[]
   const env = loadEnv(params.mode, params.envDir)
 
+  // Configure env variables
+  if (params.defineENV) {
+    const data = params.defineENV({ ...env } as any)
+    Object.assign(env, data)
+  }
+
   for (const { src, route } of params.inputs) {
     const absoluteSrc = resolve(src)
 

src/module.ts

@@ -16,6 +16,7 @@ export default defineNuxtModule<MSOfficeAddinConfig>({
       mode: vite.mode!,
       envDir: vite.envDir ?? process.cwd(),
       inputs: options.manifests,
+      defineENV: options.defineENV,
     })
 
     const contextImportKey = '#office-addin-content'

src/vite.ts

@@ -9,8 +9,9 @@ export default function MSOfficeAddin(params: MSOfficeAddinConfig): Plugin {
   function generate() {
     return transformManifests({
       mode,
-      inputs: params.manifests,
       envDir: viteConfig.envDir ?? process.cwd(),
+      inputs: params.manifests,
+      defineENV: params.defineENV,
     })
   }
 

test/__snapshots__/basic.test.ts.snap

@@ -9,13 +9,22 @@ exports[`ssr > renders office manifest 1`] = `
   <DefaultLocale>en-US</DefaultLocale>
   <DisplayName DefaultValue="Contoso App" />
   <Description DefaultValue="Office add-in for Contoso App"/>
-  <SupportUrl DefaultValue="https://www.contoso.com/support" />
+  <SupportUrl DefaultValue="https://contoso.com/support" />
   <AppDomains>
-    <AppDomain>https://www.contoso.com</AppDomain>
+    <AppDomain>https://contoso.com</AppDomain>
   </AppDomains>
   <DefaultSettings>
     <SourceLocation DefaultValue="https://www.contoso.com/search_app/Default.aspx" />
   </DefaultSettings>
   <Permissions>ReadWriteDocument</Permissions>
+  <WebApplicationInfo>
+    <Id>c6890c26-5bbb-40ed-a321-37f07909a2f0</Id>
+    <Resource>api://contoso.com/outlook/c6890c26-5bbb-40ed-a321-37f07909a2f0</Resource>
+    <Scopes>
+      <Scope>openid</Scope>
+      <Scope>profile</Scope>
+      <Scope>User.Read</Scope>
+    </Scopes>
+  </WebApplicationInfo>
 </OfficeApp>"
 `;