chore(list-extension): use html instead of JSX

haorui · Oct 26, 2023 · 03f8747 · 03f8747
1 parent f922eab
commit 03f8747
Show file tree

Hide file tree

Showing 2 changed files with 20 additions and 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
@@ -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 }
+    />`;
 }
diff --git 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",