feat: Issue #3336148: Add support for forms

package.json

@@ -18,7 +18,8 @@
     "dist",
     "playground/components",
     "playground/pages",
-    "playground/app.vue"
+    "playground/app.vue",
+    "playground/middleware"
   ],
   "scripts": {
     "prepack": "nuxt-module-build",

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>

playground/middleware/formHandler.ts

@@ -0,0 +1,34 @@
+import { readFormData, createError } from 'h3'
+import { useRuntimeConfig, useRequestEvent } from '#imports'
+
+export default defineNuxtRouteMiddleware(async (from) => {
+  if (import.meta.server) {
+    const runtimeConfig = useRuntimeConfig()
+    const event = useRequestEvent()
+    const { ceApiEndpoint } = runtimeConfig.public.drupalCe
+    const drupalBaseUrl = getDrupalBaseUrl()
+
+    if (event?.node?.req?.method === 'POST') {
+      const formData = await readFormData(event)
+
+      if (formData) {
+        const targetUrl = from.fullPath
+        const response = await $fetch.raw(drupalBaseUrl + ceApiEndpoint + targetUrl, {
+          method: 'POST',
+          body: formData,
+        })
+
+        event.context.drupalCeCustomPageResponse = {
+          _data: response._data,
+          headers: Object.fromEntries(response.headers.entries()),
+        }
+      } else {
+        throw createError({
+          statusCode: 400,
+          statusMessage: 'Bad Request',
+          message: 'The request contains invalid form data or no form data at all.',
+        })
+      }
+    }
+  }
+})

playground/pages/[...slug].vue

@@ -16,6 +16,7 @@ const page = await fetchPage(useRoute().path, { query: useRoute().query })
 // Set to false to support custom layouts, using <NuxtLayout> instead.
 definePageMeta({
   layout: false,
+  middleware: 'form-handler',
 })
 const layout = computed(() => {
   return page.value.page_layout || 'default'

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,7 +59,6 @@ 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'))
     }

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,32 @@ 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 && serverResponse.value._data) {
+      page.value = serverResponse.value._data
+      passThroughHeaders(nuxtApp, serverResponse.value.headers)
+      // 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 +151,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
   }