feat: Issue #3336148: Add support for forms

playground/components/global/DrupalForm.vue

@@ -0,0 +1,14 @@
+<template>
+  <form :formId="formId" :method="method" v-bind="attributes" :action="useRoute().fullPath" class="drupal-form">
+    <slot><div v-html="content" /></slot>
+  </form>
+</template>
+
+<script setup lang="ts">
+const props = defineProps<{
+  formId: String,
+  attributes: Object,
+  method: String,
+  content?: String,
+}>()
+</script>

src/module.ts

@@ -1,5 +1,5 @@
 import { fileURLToPath } from 'url'
-import { defineNuxtModule, addPlugin, addServerPlugin, createResolver, addImportsDir, addServerHandler } from '@nuxt/kit'
+import { defineNuxtModule, addServerPlugin, createResolver, addImportsDir, addServerHandler } from '@nuxt/kit'
 import { defu } from 'defu'
 import type { NuxtOptionsWithDrupalCe } from './types'
 
@@ -59,11 +59,13 @@ export default defineNuxtModule<ModuleOptions>({
     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'))
     if (options.serverLogLevel) {
       addServerPlugin(resolve(runtimeDir, 'server/plugins/errorLogger'))
     }
     addImportsDir(resolve(runtimeDir, 'composables/useDrupalCe'))
+    addServerHandler({
+      handler: resolve(runtimeDir, 'server/middleware/drupalFormHandler'),
+    })
 
     const publicOptions = { ...options }
     // Server options are not needed in the client bundle.

src/runtime/composables/useDrupalCe/index.ts

@@ -4,7 +4,7 @@ import { appendResponseHeader } from 'h3'
 import type { UseFetchOptions } from '#app'
 import type { $Fetch, NitroFetchRequest } from 'nitropack'
 import { getDrupalBaseUrl, getMenuBaseUrl } from './server'
-import { useRuntimeConfig, useState, useFetch, navigateTo, createError, h, resolveComponent, setResponseStatus, useNuxtApp, useRequestHeaders, ref, watch } from '#imports'
+import { useRuntimeConfig, useState, useFetch, navigateTo, createError, h, resolveComponent, setResponseStatus, useNuxtApp, useRequestHeaders, ref, watch, useRequestEvent } from '#imports'
 
 export const useDrupalCe = () => {
   const config = useRuntimeConfig().public.drupalCe
@@ -116,9 +116,36 @@ export const useDrupalCe = () => {
       page_layout: 'default',
       title: '',
     }))
+    const serverResponse = useState('server-response', () => null)
     useFetchOptions.key = `page-${path}`
+    const page = ref(null)
+    const pageError = ref(null)
 
-    const { data: page, error } = await useCeApi(path, useFetchOptions, true)
+    if (import.meta.server) {
+      serverResponse.value = useRequestEvent(nuxtApp).context.drupalCeCustomPageResponse
+    }
+
+    // Check if the page data is already provided, e.g. by a form response.
+    if (serverResponse.value) {
+      if (serverResponse.value._data) {
+        page.value = serverResponse.value._data
+        passThroughHeaders(nuxtApp, serverResponse.value.headers)
+      } else if (serverResponse.value.error) {
+        pageError.value = serverResponse.value.error
+      }
+      // Clear the server response state after it was sent to the client.
+      if (import.meta.client) {
+        serverResponse.value = null
+      }
+    } else {
+      const { data, error } = await useCeApi(path, useFetchOptions, true)
+      page.value = data.value
+      pageError.value = error.value
+    }
+
+    if (page.value?.messages) {
+      pushMessagesToState(page.value.messages)
+    }
 
     if (page?.value?.redirect) {
       await callWithNuxt(nuxtApp, navigateTo, [
@@ -128,13 +155,11 @@ export const useDrupalCe = () => {
       return pageState
     }
 
-    if (error.value) {
-      overrideErrorHandler ? overrideErrorHandler(error) : pageErrorHandler(error, { config, nuxtApp })
-      page.value = error.value?.data
+    if (pageError.value) {
+      overrideErrorHandler ? overrideErrorHandler(pageError) : pageErrorHandler(pageError, { config, nuxtApp })
+      page.value = pageError.value?.data
     }
 
-    page.value?.messages && pushMessagesToState(page.value.messages)
-
     pageState.value = page
     return page
   }

src/runtime/server/middleware/drupalFormHandler.ts

@@ -0,0 +1,40 @@
+import { defineEventHandler, readFormData } from 'h3'
+import { getDrupalBaseUrl } from '../../composables/useDrupalCe/server'
+import { useRuntimeConfig } from '#imports'
+
+export default defineEventHandler(async (event) => {
+  const { ceApiEndpoint } = useRuntimeConfig().public.drupalCe
+
+  if (event.node.req.method === 'POST') {
+    const formData = await readFormData(event)
+
+    if (formData) {
+      const targetUrl = event.node.req.url
+      const response = await $fetch.raw(getDrupalBaseUrl() + ceApiEndpoint + targetUrl, {
+        method: 'POST',
+        body: formData,
+      }).catch((error) => {
+        event.context.drupalCeCustomPageResponse = {
+          error: {
+            data: error,
+            statusCode: error.statusCode || 400,
+            message: error.message || 'Error when POSTing form data (drupalFormHandler).',
+          },
+        }
+      })
+
+      if (response) {
+        event.context.drupalCeCustomPageResponse = {
+          _data: response._data,
+          headers: Object.fromEntries(response.headers.entries()),
+        }
+      }
+    } else {
+      throw createError({
+        statusCode: 400,
+        statusMessage: 'Bad Request',
+        message: 'POST requests without form data are not supported (drupalFormHandler).',
+      })
+    }
+  }
+})