improve!: LDP-2461: remove deprecated baseURL option and fix configuration fallbacks to apply at runtime (#204)

* improve: LDP-2461: Rename routeRules to serverApiProxy

* LDP-2461: Add BC for exposeAPIRouteRules

* LDP-2461: Remove check for absolute URL in serverApiProxy

* LDP-2461: Add dist for testing

* LDP-2461: Remove baseURL, add utility functions for base urls

* LDP-2461: Update tests

* improve: Rename exposeAPIRouteRules to serverApiProxy and fix type errors

* LDP-2461: Remove dist

* LDP-2461: Add useFetchDrupal helper

* LDP-2461: Add getCeApiEndpoint helper

* LDP-2461: Create composable for base urls

* LDP-2461: Add dist

* LDP-2461: Add server compatible utils for getBaseUrls

* LDP-2461: Add useDrupalCe server composables

* LDP-2461: Improve variable name in menu route

* LDP-2461: Remove dist

Author: alexieremia

playground/nuxt.config.ts

@@ -6,6 +6,6 @@ export default defineNuxtConfig({
     DrupalCe
   ],
   drupalCe: {
-    baseURL: 'https://8080-drunomics-lupusdecouple-ih6hr5d3dwc.ws-eu106.gitpod.io/ce-api'
+    drupalBaseUrl: 'https://8080-drunomics-lupusdecouple-x5qe3h51r0o.ws-eu110.gitpod.io'
   }
 })

playground/nuxt.config4test.ts

@@ -6,6 +6,8 @@ export default defineNuxtConfig({
     DrupalCe
   ],
   drupalCe: {
-    baseURL: '/api'
+    drupalBaseUrl: '',
+    ceApiEndpoint: '/api',
+    serverApiProxy: false // to-do: improve tests to cover this option
   }
 })

src/module.ts

@@ -1,10 +1,9 @@
 import { fileURLToPath } from 'url'
-import { defineNuxtModule, addPlugin, createResolver, addImportsDir, addServerHandler } from '@nuxt/kit'
+import { defineNuxtModule, addPlugin, createResolver, addImportsDir, addServerHandler, addServerImports, addImports } from '@nuxt/kit'
 import { defu } from 'defu'
 import type { NuxtOptionsWithDrupalCe } from './types'
 
 export interface ModuleOptions {
-  baseURL?: string,
   drupalBaseUrl: string,
   serverDrupalBaseUrl?: string,
   ceApiEndpoint: string,
@@ -49,31 +48,17 @@ export default defineNuxtModule<ModuleOptions>({
     if (!nuxtOptions.drupalCe?.serverApiProxy && options.exposeAPIRouteRules !== undefined) {
       options.serverApiProxy = options.exposeAPIRouteRules
     }
-    // Keep backwards compatibility for baseURL(deprecated).
-    if (options.baseURL && options.baseURL.startsWith('http')) {
-      const baseURL = new URL(options.baseURL)
-      if (!options.drupalBaseUrl) {
-        options.drupalBaseUrl = baseURL.origin
-      }
-      options.ceApiEndpoint = baseURL.pathname
-    } else if (!options.baseURL) {
-      options.baseURL = options.drupalBaseUrl + options.ceApiEndpoint
-    }
-
-    if (!options.menuBaseUrl) {
-      options.menuBaseUrl = options.drupalBaseUrl + options.ceApiEndpoint
-    }
 
-    // Disable the server routes for static sites OR when baseURL is not a full URL.
-    if (nuxt.options._generate || !options.baseURL.startsWith('http')) {
+    // Disable the server routes for static sites.
+    if (nuxt.options._generate) {
       options.serverApiProxy = false
     }
 
     const { resolve } = createResolver(import.meta.url)
     const runtimeDir = fileURLToPath(new URL('./runtime', import.meta.url))
     nuxt.options.build.transpile.push(runtimeDir)
     addPlugin(resolve(runtimeDir, 'plugin'))
-    addImportsDir(resolve(runtimeDir, 'composables'))
+    addImportsDir(resolve(runtimeDir, 'composables/useDrupalCe'))
 
     nuxt.options.runtimeConfig.public.drupalCe = defu(nuxt.options.runtimeConfig.public.drupalCe ?? {}, options)
 

src/runtime/composables/useDrupalCe.ts renamed to src/runtime/composables/useDrupalCe/index.ts

@@ -2,22 +2,22 @@ import { callWithNuxt } from '#app'
 import { defu } from 'defu'
 import { appendResponseHeader } from 'h3'
 import type { UseFetchOptions } from '#app'
+import { getDrupalBaseUrl, getMenuBaseUrl } from './server'
 import { useRuntimeConfig, useState, useFetch, navigateTo, createError, h, resolveComponent, setResponseStatus, useNuxtApp, useRequestHeaders, ref, watch } from '#imports'
 
 export const useDrupalCe = () => {
-
   const config = useRuntimeConfig().public.drupalCe
 
   /**
    * Processes the given fetchOptions to apply module defaults
    * @param fetchOptions Optional Nuxt useFetch options
    * @returns UseFetchOptions<any>
    */
-  const processFetchOptions = (fetchOptions:UseFetchOptions<any> = {}) => {
+  const processFetchOptions = (fetchOptions: UseFetchOptions<any> = {}) => {
     if (config.serverApiProxy) {
       fetchOptions.baseURL = '/api/drupal-ce'
     } else {
-      fetchOptions.baseURL = fetchOptions.baseURL ?? config.baseURL
+      fetchOptions.baseURL = fetchOptions.baseURL ?? getDrupalBaseUrl() + config.ceApiEndpoint
     }
     fetchOptions = defu(fetchOptions, config.fetchOptions)
 
@@ -28,6 +28,17 @@ export const useDrupalCe = () => {
     return fetchOptions
   }
 
+  /**
+   * Returns the API endpoint with localization (if available)
+   */
+  const getCeApiEndpoint = (localize: boolean = true) => {
+    const nuxtApp = useNuxtApp()
+    if (localize && nuxtApp.$i18n?.locale && nuxtApp.$i18n.locale.value !== nuxtApp.$i18n.defaultLocale) {
+      return `${config.ceApiEndpoint}/${nuxtApp.$i18n.locale.value}`
+    }
+    return config.ceApiEndpoint
+  }
+
   /**
    * Fetches page data from Drupal, handles redirects, errors and messages
    * @param path Path of the Drupal page to fetch
@@ -186,7 +197,10 @@ export const useDrupalCe = () => {
     getMessages,
     getPage,
     renderCustomElements,
-    passThroughHeaders
+    passThroughHeaders,
+    getCeApiEndpoint,
+    getDrupalBaseUrl,
+    getMenuBaseUrl
   }
 }
 

src/runtime/composables/useDrupalCe/server.ts

@@ -0,0 +1,11 @@
+import { useRuntimeConfig } from '#imports'
+
+export const getDrupalBaseUrl = () => {
+  const config = useRuntimeConfig().public.drupalCe
+  return import.meta.server && config.serverDrupalBaseUrl ? config.serverDrupalBaseUrl : config.drupalBaseUrl
+}
+
+export const getMenuBaseUrl = () => {
+  const config = useRuntimeConfig().public.drupalCe
+  return config.menuBaseUrl ? config.menuBaseUrl : getDrupalBaseUrl() + config.ceApiEndpoint
+}

src/runtime/server/api/drupalCe.ts

@@ -1,12 +1,12 @@
 import { defineEventHandler, proxyRequest, getRouterParams } from 'h3'
+import { getDrupalBaseUrl } from '../../composables/useDrupalCe/server'
 import { useRuntimeConfig } from '#imports'
 
 export default defineEventHandler(async (event) => {
   const params = getRouterParams(event)._
   const path = params ? '/' + params : ''
-  const drupalCe = useRuntimeConfig().public.drupalCe
-  const drupalUrl = (drupalCe.serverDrupalBaseUrl || drupalCe.drupalBaseUrl) + drupalCe.ceApiEndpoint
+  const { ceApiEndpoint } = useRuntimeConfig().public.drupalCe
   // Remove x-forwarded-proto header as it causes issues with the request.
   delete event.req.headers['x-forwarded-proto']
-  return await proxyRequest(event, drupalUrl + path)
+  return await proxyRequest(event, getDrupalBaseUrl() + ceApiEndpoint + path)
 })

src/runtime/server/api/menu.ts

@@ -1,12 +1,10 @@
 import { defineEventHandler, proxyRequest, getRouterParams } from 'h3'
-import { useRuntimeConfig } from '#imports'
+import { getMenuBaseUrl } from '../../composables/useDrupalCe/server'
 
 export default defineEventHandler(async (event) => {
-  const drupalCe = useRuntimeConfig().public.drupalCe
-  const { serverDrupalBaseUrl, drupalBaseUrl, menuBaseUrl: ceMenuBaseUrl, ceApiEndpoint } = drupalCe
-  const menuBaseUrl = ceMenuBaseUrl || (serverDrupalBaseUrl || drupalBaseUrl) + ceApiEndpoint
-  const menu = getRouterParams(event)._
-  return await proxyRequest(event, `${menuBaseUrl}/${menu}`, {
+  // Get the menu path along with the localization prefix.
+  const menuPath = getRouterParams(event)._
+  return await proxyRequest(event, `${getMenuBaseUrl()}/${menuPath}`, {
     headers: {
       'Cache-Control': 'max-age=300'
     }

src/types.d.ts

@@ -11,4 +11,3 @@ declare module 'nuxt/schema' {
 export interface NuxtOptionsWithDrupalCe extends NuxtOptions {
   drupalCe?: ModuleOptions
 }
-

test/addRequestContentFormat/json.test.ts

@@ -11,8 +11,10 @@ describe('Module addRequestContentFormat option set to json', async () => {
         DrupalCe
       ],
       drupalCe: {
-        baseURL: '/api',
-        addRequestContentFormat: 'json'
+        drupalBaseUrl: '',
+        ceApiEndpoint: '/api',
+        addRequestContentFormat: 'json',
+        serverApiProxy: false
       }
     }
   })

test/addRequestContentFormat/markup.test.ts

@@ -11,8 +11,10 @@ describe('Module addRequestContentFormat set to markup', async () => {
         DrupalCe
       ],
       drupalCe: {
-        baseURL: '/api',
-        addRequestContentFormat: 'markup'
+        drupalBaseUrl: '',
+        ceApiEndpoint: '/api',
+        addRequestContentFormat: 'markup',
+        serverApiProxy: false
       }
     }
   })