From 428f6171aa2650ed636a4eb82cbd88d6da032901 Mon Sep 17 00:00:00 2001
From: Martin Stamm <martin.stamm@camunda.com>
Date: Thu, 26 Oct 2023 10:38:28 +0200
Subject: [PATCH] chore(list-extension): use html instead of JSX

---
 .../app/provider/magic/parts/ExtensionList.js | 37 ++++++++++---------
 properties-panel-list-extension/package.json  |  1 +
 2 files changed, 20 insertions(+), 18 deletions(-)

diff --git a/properties-panel-list-extension/app/provider/magic/parts/ExtensionList.js b/properties-panel-list-extension/app/provider/magic/parts/ExtensionList.js
index 95da40ba..dde8c037 100644
--- a/properties-panel-list-extension/app/provider/magic/parts/ExtensionList.js
+++ b/properties-panel-list-extension/app/provider/magic/parts/ExtensionList.js
@@ -1,3 +1,5 @@
+import { html } from 'htm/preact';
+
 import { without } from 'min-dash';
 
 import { getBusinessObject } from 'bpmn-js/lib/util/ModelUtil';
@@ -90,15 +92,15 @@ export default function ExtensionList(props) {
     });
   }
 
-  return <ListEntry
-    element={ element }
-    autoFocusEntry={ `[data-entry-id="${id}-extension-${extensionsList.length - 1}"] input` }
-    id={ id }
-    label={ translate('Extensions') }
-    items={ extensionsList }
-    component={ Extension }
-    onAdd={ addExtension }
-    onRemove={ removeExtension } />;
+  return html`<${ListEntry}
+    element=${ element }
+    autoFocusEntry=${ `[data-entry-id="${id}-extension-${extensionsList.length - 1}"] input` }
+    id=${ id }
+    label=${ translate('Extensions') }
+    items=${ extensionsList }
+    component=${ Extension }
+    onAdd=${ addExtension }
+    onRemove=${ removeExtension } />`;
 }
 
 function Extension(props) {
@@ -114,17 +116,16 @@ function Extension(props) {
 
   const id = `${ idPrefix }-extension-${ index }`;
 
-  return (
-    <CollapsibleEntry
-      id={ id }
-      element={ element }
-      entries={ ExtensionProps({
+  return html`
+    <${CollapsibleEntry}
+      id=${ id }
+      element=${ element }
+      entries=${ ExtensionProps({
         extension,
         element,
         idPrefix: id
       }) }
-      label={ extension.get('key') || translate('<empty>') }
-      open={ open }
-    />
-  );
+      label=${ extension.get('key') || translate('<empty>') }
+      open=${ open }
+    />`;
 }
\ No newline at end of file
diff --git a/properties-panel-list-extension/package.json b/properties-panel-list-extension/package.json
index 2f83e4ac..c16f9fc6 100644
--- a/properties-panel-list-extension/package.json
+++ b/properties-panel-list-extension/package.json
@@ -50,6 +50,7 @@
     "bpmn-js": "^14.2.0",
     "bpmn-js-properties-panel": "^5.0.0",
     "camunda-bpmn-js-behaviors": "^1.0.0",
+    "htm": "^3.1.1",
     "ids": "^1.0.0",
     "jquery": "^3.5.1",
     "min-dash": "^4.0.0",