refactor: sections-map

wp-content/themes/ccat/app/components/sections/SectionTextBlock.vue

@@ -7,6 +7,5 @@ defineProps<SectionTextBlockFragment>();
 <template>
   <section data-section-type="text-block">
     <div :class="layoutSettings?.contentWidth" v-html="content" />
-    <pre>{{ layoutSettings }}</pre>
   </section>
 </template>

wp-content/themes/ccat/app/composables/useSection.ts

@@ -1,12 +0,0 @@
-import type { SectionTextBlockFragment, TheSectionFragment } from "#graphql-operations";
-import { SectionTextBlock } from "#components";
-
-export function useSection(section: TheSectionFragment) {
-  const { fieldGroupName, ...attrs } = section;
-  switch (fieldGroupName) {
-    case "GroupAbstractBuilderSectionsTextBlockLayout":
-      return { component: SectionTextBlock, attrs: attrs as SectionTextBlockFragment };
-    default:
-      throw createError({ statusCode: 500, statusMessage: "Erreur interne", message: `Type de section invalide: ${fieldGroupName}` });
-  }
-}

wp-content/themes/ccat/includes/vendors/acf.php

@@ -51,9 +51,8 @@ function ccat_acf_init() {
 
 // Helper: Get GraphQL field group name for flexible content layout
 function ccat_get_graphql_field_group_name( $field_group_key, $layout_name ) {
-	$field_group_name = \WPGraphQL\Utils\Utils::format_type_name( $field_group_key );
 	$layout_type_name = \WPGraphQL\Utils\Utils::format_type_name( $layout_name );
-	return "{$field_group_name}{$layout_type_name}Layout";
+	return "GroupAbstractBuilderSections{$layout_type_name}Layout";
 }
 
 // Helper: Convert field name to GraphQL format

wp-content/themes/ccat/server/api/preview.post.ts

@@ -1,14 +1,13 @@
 import { renderToString } from "vue/server-renderer";
 import { createSSRApp, h } from "vue";
+import type { TheSectionFragment } from "#graphql-operations";
 
 export default defineEventHandler(async (event) => {
-  const { fieldGroupName, ...attrs } = await readBody(event);
-  const componentName = fieldGroupName.replace(/^GroupAbstractBuilder(.*)Layout$/, "Section$1");
+  const { fieldGroupName, ...attrs } = await readBody<TheSectionFragment>(event);
   try {
-    const componentModule = await import(`../../app/components/sections/${componentName}.vue`);
     const app = createSSRApp({
       render() {
-        return h(componentModule.default, attrs);
+        return h(sectionsMap[fieldGroupName as FieldGroupName], attrs);
       },
     });
     const html = await renderToString(app);
@@ -16,6 +15,6 @@ export default defineEventHandler(async (event) => {
   }
   catch (error) {
     const message = error instanceof Error ? error.message : "Une erreur est survenue.";
-    throw createError({ statusCode: 500, statusMessage: "Erreur interne", message });
+    return `<div style="color: red">${message}</div>`;
   }
 });

wp-content/themes/ccat/shared/utils/sections-map.ts

@@ -0,0 +1,15 @@
+import SectionTextBlock from "~/components/sections/SectionTextBlock.vue";
+import type { TheSectionFragment } from "#graphql-operations";
+
+export const sectionsMap = {
+  GroupAbstractBuilderSectionsTextBlockLayout: SectionTextBlock,
+} as const;
+
+export type FieldGroupName = keyof typeof sectionsMap;
+
+export function useSection(section: TheSectionFragment) {
+  const { fieldGroupName, ...attrs } = section;
+  const component = sectionsMap[fieldGroupName as FieldGroupName];
+  if (!component) throw createError({ statusCode: 500, statusMessage: "Erreur interne", message: "Section invalide." });
+  return { component, attrs };
+}