From 4643b51c55016add301167f333c02b471b5709fb Mon Sep 17 00:00:00 2001
From: Dirk Rudolph <drudolph@adobe.com>
Date: Wed, 31 Jul 2024 09:47:02 +0200
Subject: [PATCH] feat: fragment block for crosswalk (#36)

* feat: add fragment def and model

* feat: add fragment def and model

* feat: preserve the fragment block, replace contents with fragment
---
 blocks/fragment/fragment.js |  7 +++++--
 component-definition.json   | 15 +++++++++++++++
 component-filters.json      |  3 ++-
 component-models.json       | 10 ++++++++++
 4 files changed, 32 insertions(+), 3 deletions(-)

diff --git a/blocks/fragment/fragment.js b/blocks/fragment/fragment.js
index 648a70e103..b6910ad9f4 100644
--- a/blocks/fragment/fragment.js
+++ b/blocks/fragment/fragment.js
@@ -19,6 +19,8 @@ import {
  */
 export async function loadFragment(path) {
   if (path && path.startsWith('/')) {
+    // eslint-disable-next-line no-param-reassign
+    path = path.replace(/(\.plain)?\.html/, '');
     const resp = await fetch(`${path}.plain.html`);
     if (resp.ok) {
       const main = document.createElement('main');
@@ -48,8 +50,9 @@ export default async function decorate(block) {
   if (fragment) {
     const fragmentSection = fragment.querySelector(':scope .section');
     if (fragmentSection) {
-      block.closest('.section').classList.add(...fragmentSection.classList);
-      block.closest('.fragment').replaceWith(...fragment.childNodes);
+      block.classList.add(...fragmentSection.classList);
+      block.classList.remove('section');
+      block.replaceChildren(...fragmentSection.childNodes);
     }
   }
 }
diff --git a/component-definition.json b/component-definition.json
index 5100d0bcd8..d1706da214 100644
--- a/component-definition.json
+++ b/component-definition.json
@@ -135,6 +135,21 @@
               }
             }
           }
+        },
+        {
+          "title": "Fragment",
+          "id": "fragment",
+          "plugins": {
+            "xwalk": {
+              "page": {
+                "resourceType": "core/franklin/components/block/v1/block",
+                "template": {
+                  "name": "Fragment",
+                  "model": "fragment"
+                }
+              }
+            }
+          }
         }
       ]
     }
diff --git a/component-filters.json b/component-filters.json
index 1f64a75654..a4158e1b35 100644
--- a/component-filters.json
+++ b/component-filters.json
@@ -27,7 +27,8 @@
       "title",
       "hero",
       "cards",
-      "columns"
+      "columns",
+      "fragment"
     ]
   },
   {
diff --git a/component-models.json b/component-models.json
index ef36352158..082d6d4eb4 100644
--- a/component-models.json
+++ b/component-models.json
@@ -185,5 +185,15 @@
         "valueType": "string"
       }
     ]
+  },
+  {
+    "id": "fragment",
+    "fields": [
+      {
+        "component": "aem-content",
+        "name": "reference",
+        "label": "Reference"
+      }
+    ]
   }
 ]