chore: use htm instead of JSX

This makes it easier to adopt the examples in existing Projects closes #206
bpmn-io · May 8, 2023 · 81a7d3b · 81a7d3b
1 parent 3b8f775
commit 81a7d3b
Show file tree

Hide file tree

Showing 9 changed files with 37 additions and 87 deletions.
diff --git a/properties-panel-async-extension/.babelrc b/properties-panel-async-extension/.babelrc
diff --git a/properties-panel-async-extension/app/provider/magic/parts/SpellProps.js b/properties-panel-async-extension/app/provider/magic/parts/SpellProps.js
@@ -1,3 +1,5 @@
+import { html } from 'htm/preact';
+
 import { SelectEntry, isSelectEntryEdited } from '@bpmn-io/properties-panel';
 import { useService } from 'bpmn-js-properties-panel'
 
@@ -57,14 +59,14 @@ function Spell(props) {
     ];
   }
 
-  return <SelectEntry
-    id={ id }
-    element={ element }
-    description={ translate('Apply a black magic spell') }
-    label={ translate('Spell') }
-    getValue={ getValue }
-    setValue={ setValue }
-    getOptions={ getOptions }
-    debounce={ debounce }
-  />
+  return html`<${SelectEntry}
+    id=${ id }
+    element=${ element }
+    description=${ translate('Apply a black magic spell') }
+    label=${ translate('Spell') }
+    getValue=${ getValue }
+    setValue=${ setValue }
+    getOptions=${ getOptions }
+    debounce=${ debounce }
+  />`
 }
diff --git a/properties-panel-async-extension/package.json b/properties-panel-async-extension/package.json
@@ -31,9 +31,6 @@
   ],
   "license": "MIT",
   "devDependencies": {
-    "@babel/core": "^7.16.5",
-    "@babel/plugin-transform-react-jsx": "^7.16.5",
-    "babel-loader": "^8.2.3",
     "copy-webpack-plugin": "^10.1.0",
     "css-loader": "^6.5.1",
     "less": "^4.1.2",
@@ -51,6 +48,7 @@
     "bpmn-js-properties-panel": "^1.9.0",
     "cors": "^2.8.5",
     "express": "^4.17.2",
+    "htm": "^3.1.1",
     "jquery": "^3.5.1",
     "min-dash": "^4.0.0"
   }

diff --git a/properties-panel-async-extension/webpack.config.js b/properties-panel-async-extension/webpack.config.js
@@ -16,21 +16,6 @@ module.exports = {
   devtool: 'source-map',
   module: {
     rules: [
-      {
-        test: /\.m?js$/,
-        exclude: /node_modules/,
-        use: {
-          loader: 'babel-loader',
-          options: {
-            plugins: [
-              [ '@babel/plugin-transform-react-jsx', {
-                'importSource': '@bpmn-io/properties-panel/preact',
-                'runtime': 'automatic'
-              } ]
-            ]
-          }
-        }
-      },
       {
         test: /\.less$/i,
         use: [
@@ -54,9 +39,6 @@ module.exports = {
       'module',
       'main'
     ],
-    alias: {
-      'react': '@bpmn-io/properties-panel/preact/compat'
-    },
     modules: [
       'node_modules',
       absoluteBasePath

diff --git a/properties-panel-extension/.babelrc b/properties-panel-extension/.babelrc
diff --git a/properties-panel-extension/README.md b/properties-panel-extension/README.md
@@ -95,9 +95,11 @@ function createMagicGroup(element, translate) {
 
 ### Define an Entry
 
-The "spell" entry is defined in [`SpellProps`](app/provider/magic/parts/SpellProps.js). We reuse [`TextFieldEntry`](https://github.com/bpmn-io/properties-panel/blob/main/src/components/entries/TextField.js) to create a text field for the property.
+The "spell" entry is defined in [`SpellProps`](app/provider/magic/parts/SpellProps.js). We reuse [`TextFieldEntry`](https://github.com/bpmn-io/properties-panel/blob/main/src/components/entries/TextField.js) to create a text field for the property. The `component` needs to be a Preact component. We use [`htm`](https://github.com/developit/htm) to create a Preact component from a tagged template.
 
 ```javascript
+import { html } from 'htm/preact';
+
 import { TextFieldEntry, isTextFieldEntryEdited } from '@bpmn-io/properties-panel';
 import { useService } from 'bpmn-js-properties-panel'
 
@@ -130,15 +132,15 @@ function Spell(props) {
     });
   }
 
-  return <TextFieldEntry
-    id={ id }
-    element={ element }
-    description={ translate('Apply a black magic spell') }
-    label={ translate('Spell') }
-    getValue={ getValue }
-    setValue={ setValue }
-    debounce={ debounce }
-  />;
+  return html`<${TextFieldEntry}
+    id=${ id }
+    element=${ element }
+    description=${ translate('Apply a black magic spell') }
+    label=${ translate('Spell') }
+    getValue=${ getValue }
+    setValue=${ setValue }
+    debounce=${ debounce }
+  />`
 }
 ```
 

diff --git a/properties-panel-extension/app/provider/magic/parts/SpellProps.js b/properties-panel-extension/app/provider/magic/parts/SpellProps.js
@@ -1,3 +1,5 @@
+import { html } from 'htm/preact';
+
 import { TextFieldEntry, isTextFieldEntryEdited } from '@bpmn-io/properties-panel';
 import { useService } from 'bpmn-js-properties-panel';
 
@@ -30,13 +32,13 @@ function Spell(props) {
     });
   }
 
-  return <TextFieldEntry
-    id={ id }
-    element={ element }
-    description={ translate('Apply a black magic spell') }
-    label={ translate('Spell') }
-    getValue={ getValue }
-    setValue={ setValue }
-    debounce={ debounce }
-  />
+  return html`<${TextFieldEntry}
+    id=${ id }
+    element=${ element }
+    description=${ translate('Apply a black magic spell') }
+    label=${ translate('Spell') }
+    getValue=${ getValue }
+    setValue=${ setValue }
+    debounce=${ debounce }
+  />`
 }
diff --git a/properties-panel-extension/package.json b/properties-panel-extension/package.json
@@ -31,9 +31,6 @@
   ],
   "license": "MIT",
   "devDependencies": {
-    "@babel/core": "^7.16.5",
-    "@babel/plugin-transform-react-jsx": "^7.16.5",
-    "babel-loader": "^8.2.3",
     "copy-webpack-plugin": "^10.1.0",
     "css-loader": "^6.5.1",
     "less": "^4.1.2",
@@ -49,6 +46,7 @@
     "@bpmn-io/properties-panel": "^1.0.0",
     "bpmn-js": "^13.0.3",
     "bpmn-js-properties-panel": "^1.9.0",
+    "htm": "^3.1.1",
     "jquery": "^3.5.1",
     "min-dash": "^4.0.0"
   }

diff --git a/properties-panel-extension/webpack.config.js b/properties-panel-extension/webpack.config.js
@@ -16,21 +16,6 @@ module.exports = {
   devtool: 'source-map',
   module: {
     rules: [
-      {
-        test: /\.m?js$/,
-        exclude: /node_modules/,
-        use: {
-          loader: 'babel-loader',
-          options: {
-            plugins: [
-              [ '@babel/plugin-transform-react-jsx', {
-                'importSource': '@bpmn-io/properties-panel/preact',
-                'runtime': 'automatic'
-              } ]
-            ]
-          }
-        }
-      },
       {
         test: /\.less$/i,
         use: [
@@ -54,9 +39,6 @@ module.exports = {
       'module',
       'main'
     ],
-    alias: {
-      'react': '@bpmn-io/properties-panel/preact/compat'
-    },
     modules: [
       'node_modules',
       absoluteBasePath