From 81a7d3b5e332cc14e62d8f33d742996477f1ae1e Mon Sep 17 00:00:00 2001 From: Martin Stamm Date: Mon, 8 May 2023 18:58:34 +0200 Subject: [PATCH] chore: use htm instead of JSX This makes it easier to adopt the examples in existing Projects closes #206 --- properties-panel-async-extension/.babelrc | 8 ------- .../app/provider/magic/parts/SpellProps.js | 22 ++++++++++--------- properties-panel-async-extension/package.json | 4 +--- .../webpack.config.js | 18 --------------- properties-panel-extension/.babelrc | 8 ------- properties-panel-extension/README.md | 22 ++++++++++--------- .../app/provider/magic/parts/SpellProps.js | 20 +++++++++-------- properties-panel-extension/package.json | 4 +--- properties-panel-extension/webpack.config.js | 18 --------------- 9 files changed, 37 insertions(+), 87 deletions(-) delete mode 100644 properties-panel-async-extension/.babelrc delete mode 100644 properties-panel-extension/.babelrc diff --git a/properties-panel-async-extension/.babelrc b/properties-panel-async-extension/.babelrc deleted file mode 100644 index cecc2736..00000000 --- a/properties-panel-async-extension/.babelrc +++ /dev/null @@ -1,8 +0,0 @@ -{ - "plugins": [ - [ "@babel/plugin-transform-react-jsx", { - "importSource": "@bpmn-io/properties-panel/preact", - "runtime": "automatic" - } ] - ] -} diff --git a/properties-panel-async-extension/app/provider/magic/parts/SpellProps.js b/properties-panel-async-extension/app/provider/magic/parts/SpellProps.js index 2d3e594b..2c5de45a 100644 --- 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 + 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 index c8aa229f..fd36078f 100644 --- 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 index c7f2b906..09d86a9c 100644 --- 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 deleted file mode 100644 index cecc2736..00000000 --- a/properties-panel-extension/.babelrc +++ /dev/null @@ -1,8 +0,0 @@ -{ - "plugins": [ - [ "@babel/plugin-transform-react-jsx", { - "importSource": "@bpmn-io/properties-panel/preact", - "runtime": "automatic" - } ] - ] -} diff --git a/properties-panel-extension/README.md b/properties-panel-extension/README.md index 44970b7d..7a47bf65 100644 --- 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 ; + 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 index d3119853..c63f16f9 100644 --- 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 + 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 index e10bf385..a689123c 100644 --- 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 index c7f2b906..09d86a9c 100644 --- 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