feat(esm): adapt frontend bundle with global esm

.eslintrc.json

@@ -46,7 +46,12 @@
       "error",
       "ignorePackages"
     ],
-    "import/no-extraneous-dependencies": ["error", {"devDependencies": ["src/frontend/**/*.jsx", "src/south/**/*.jsx", "src/north/**/*.jsx"]}],
+    "import/no-extraneous-dependencies": ["error", {"devDependencies": [
+      "src/frontend/**/*.jsx",
+      "src/south/**/*.jsx",
+      "src/north/**/*.jsx",
+      "webpack.*.js"
+    ]}],
     "arrow-parens": ["error", "always"],
     "react/forbid-prop-types": [
       "error",

babel.config.json

@@ -0,0 +1,11 @@
+{
+  "presets": [
+    "@babel/preset-env",
+    "@babel/preset-react"
+  ],
+  "plugins": [
+    "@babel/plugin-proposal-class-properties",
+    "@babel/plugin-proposal-optional-chaining",
+    "@babel/plugin-proposal-nullish-coalescing-operator"
+  ]
+}

package.json

@@ -24,14 +24,14 @@
     "lint:fix": "eslint src --ext .jsx --ext .js --fix",
     "build:all": "npm ci && npm run build:win && npm run build:macos && npm run build:linux",
     "build:web-client": "webpack --mode production --config webpack.frontend.js",
-    "build:backend": "webpack --mode production --config webpack.backend.js",
     "build:win": "npm run build:web-client && npm run internal:build:lib-win && rimraf ./build/bin/win && pkg ./src/index.js --public --compress GZip --config package.json --output ./build/bin/win/oibus --target node16-win-x64 && ncp ./build/deps/win ./build/bin/win",
     "build:macos": "npm run build:web-client && npm run internal:build:lib-macos && rimraf ./build/bin/macos && pkg ./src/index.js --public --compress GZip --config package.json --output ./build/bin/macos/oibus --target node16-macos-x64",
     "build:linux": "npm run build:web-client && npm run internal:build:lib-linux && rimraf ./build/bin/linux && pkg ./src/index.js --public --compress GZip --config package.json --output ./build/bin/linux/oibus --target node16-linux-x64 && ncp ./build/deps/linux ./build/bin/linux && ncp ./src/config/default-config.json ./build/bin/linux/default-config.json",
     "build:win-setup": "rimraf ./build/bin/win/win-setup-release && C:\\\"Program Files (x86)\"\\\"Inno Setup 6\"\\iscc.exe \"./build/deps/win/setup.iss\" \"/DMyAppVersion=\"%npm_package_version% \"/DMyCertFile=\"%PFX_PATH% \"/DMyCertPassword=\"%PFX_PASSWORD% \"/ssigntool=./build/deps/signtool/signtool.exe sign /debug $p\"",
     "internal:build:lib-win": "npm run --prefix node_modules/better-sqlite3 build-release -- --target=v16.16.0 --arch=x64",
     "internal:build:lib-macos": "npm run --prefix node_modules/better-sqlite3 build-release -- --target=v16.16.0 --arch=x64",
-    "internal:build:lib-linux": "npm run --prefix node_modules/better-sqlite3 build-release -- --target=v16.16.0 --arch=x64"
+    "internal:build:lib-linux": "npm run --prefix node_modules/better-sqlite3 build-release -- --target=v16.16.0 --arch=x64",
+    "internal:build:backend": "webpack --mode production --config webpack.backend.js"
   },
   "keywords": [
     "Optimistik"

src/frontend/about/about.jsx

@@ -1,7 +1,7 @@
 import React from 'react'
 import { Container, ListGroup, ListGroupItem } from 'reactstrap'
-import apis from '../service/apis'
-import utils from '../helpers/utils'
+import apis from '../service/apis.js'
+import utils from '../helpers/utils.js'
 import { AlertContext } from '../context/alert-context.jsx'
 import logo from '../oibus.png'
 

src/frontend/activation/activation.jsx

@@ -2,10 +2,10 @@ import React from 'react'
 import { Container, Label } from 'reactstrap'
 import { create, formatters } from 'jsondiffpatch'
 import 'jsondiffpatch/dist/formatters-styles/html.css'
-import apis from '../service/apis'
+import apis from '../service/apis.js'
 import { AlertContext } from '../context/alert-context.jsx'
 import { ConfigContext } from '../context/config-context.jsx'
-import utils from '../helpers/utils'
+import utils from '../helpers/utils.js'
 import ConfigDiffRenderer from './components/config-diff-renderer.jsx'
 import ConfigJsonRenderer from './components/config-json-renderer.jsx'
 import ActionButtons from './components/action-buttons.jsx'

src/frontend/activation/components/config-diff-renderer.jsx

@@ -1,7 +1,7 @@
 import React from 'react'
 import { Label } from 'reactstrap'
 import { PropTypes } from 'prop-types'
-import Constants from '../../helpers/constants'
+import Constants from '../../helpers/constants.js'
 
 const ConfigDiffRenderer = ({ deltaHTML, diffError }) => (
   <div>

src/frontend/components/editable-id-field.jsx

@@ -1,7 +1,7 @@
 import React, { useEffect } from 'react'
 import PropTypes from 'prop-types'
 import { FaCheck } from 'react-icons/fa'
-import { OibText } from './oib-form'
+import { OibText } from './oib-form/index.js'
 
 const EditableIdField = ({
   connectorName,

src/frontend/components/points-component.jsx

@@ -7,9 +7,9 @@ import Table from './table/table.jsx'
 import TablePagination from './table/table-pagination.jsx'
 import Modal from './modal.jsx'
 import SouthSchemas from '../south/south-types.jsx'
-import * as Controls from './oib-form'
-import utils from '../helpers/utils'
-import validation from '../south/form/south.validation'
+import * as Controls from './oib-form/index.js'
+import utils from '../helpers/utils.js'
+import validation from '../south/form/south.validation.js'
 
 const PointsComponent = ({
   southId,

src/frontend/context/config-context.jsx

@@ -4,8 +4,8 @@
 import React from 'react'
 import PropTypes from 'prop-types'
 import objectPath from 'object-path'
-import apis from '../service/apis'
-import utils from '../helpers/utils'
+import apis from '../service/apis.js'
+import utils from '../helpers/utils.js'
 
 const reducer = (state, action) => {
   const { name, value, config, type, validity } = action

src/frontend/engine/engine.jsx

@@ -1,14 +1,14 @@
 import React from 'react'
 import { Col, Row, Form, Spinner, Container } from 'reactstrap'
 import { ConfigContext } from '../context/config-context.jsx'
-import { OibInteger, OibText, OibPassword, OibTitle, OibCheckbox } from '../components/oib-form'
+import { OibInteger, OibText, OibPassword, OibTitle, OibCheckbox } from '../components/oib-form/index.js'
 import Filters from './filters.jsx'
 import Logging from './logging/logging.jsx'
 import ScanModes from './scan-modes.jsx'
 import Proxies from './proxies.jsx'
 import HealthSignal from './health-signal.jsx'
 import ExternalSources from './external-sources.jsx'
-import validation from './engine.validation'
+import validation from './engine.validation.js'
 
 const Engine = () => {
   const {

src/frontend/engine/engine.validation.js

@@ -1,5 +1,5 @@
-import { isIp, notEmpty, inRange, minLength, isHost, hasLengthBetween } from '../../service/validation.service'
-import utils from '../helpers/utils'
+import { isIp, notEmpty, inRange, minLength, isHost, hasLengthBetween } from '../../service/validation.service.js'
+import utils from '../helpers/utils.js'
 
 const validation = {
   engine: {

src/frontend/engine/external-sources.jsx

@@ -2,9 +2,9 @@ import React from 'react'
 import PropTypes from 'prop-types'
 import { Row, Col } from 'reactstrap'
 import Table from '../components/table/table.jsx'
-import { OibText, OibTitle } from '../components/oib-form'
+import { OibText, OibTitle } from '../components/oib-form/index.js'
 import { ConfigContext } from '../context/config-context.jsx'
-import validation from './engine.validation'
+import validation from './engine.validation.js'
 
 const ExternalSources = ({ externalSources }) => {
   const { dispatchNewConfig } = React.useContext(ConfigContext)

src/frontend/engine/filters.jsx

@@ -2,9 +2,9 @@ import React from 'react'
 import PropTypes from 'prop-types'
 import { Row, Col } from 'reactstrap'
 import Table from '../components/table/table.jsx'
-import { OibText, OibTitle } from '../components/oib-form'
+import { OibText, OibTitle } from '../components/oib-form/index.js'
 import { ConfigContext } from '../context/config-context.jsx'
-import validation from './engine.validation'
+import validation from './engine.validation.js'
 
 const Filters = ({ filters }) => {
   const { dispatchNewConfig } = React.useContext(ConfigContext)

src/frontend/engine/health-signal.jsx

@@ -1,8 +1,8 @@
 import React from 'react'
 import PropTypes from 'prop-types'
 import { Col, Row } from 'reactstrap'
-import { OibText, OibTitle, OibCheckbox, OibInteger, OibProxy, OibAuthentication } from '../components/oib-form'
-import validation from './engine.validation'
+import { OibText, OibTitle, OibCheckbox, OibInteger, OibProxy, OibAuthentication } from '../components/oib-form/index.js'
+import validation from './engine.validation.js'
 
 const HealthSignal = ({ onChange, healthSignal }) => (
   <>

src/frontend/engine/logging/file-logging.jsx

@@ -1,7 +1,7 @@
 import React from 'react'
 import PropTypes from 'prop-types'
 import OibForm from '../../components/oib-form/oib-form.jsx'
-import { minValue, inRange } from '../../../service/validation.service'
+import { minValue, inRange } from '../../../service/validation.service.js'
 
 const schema = { name: 'FileLogging' }
 schema.form = {

src/frontend/engine/logging/loki-logging.jsx

@@ -1,7 +1,7 @@
 import React from 'react'
 import PropTypes from 'prop-types'
 import OibForm from '../../components/oib-form/oib-form.jsx'
-import { minValue, optional } from '../../../service/validation.service'
+import { minValue, optional } from '../../../service/validation.service.js'
 
 const schema = { name: 'LokiLogging' }
 schema.form = {

src/frontend/engine/logging/sqlite-logging.jsx

@@ -1,7 +1,7 @@
 import React from 'react'
 import PropTypes from 'prop-types'
 import OibForm from '../../components/oib-form/oib-form.jsx'
-import { minValue } from '../../../service/validation.service'
+import { minValue } from '../../../service/validation.service.js'
 
 const schema = { name: 'SQLiteLogging' }
 schema.form = {

src/frontend/engine/proxies.jsx

@@ -2,9 +2,9 @@ import React from 'react'
 import PropTypes from 'prop-types'
 import { Col, Row } from 'reactstrap'
 import Table from '../components/table/table.jsx'
-import { OibTitle, OibText, OibSelect, OibInteger, OibPassword } from '../components/oib-form'
+import { OibTitle, OibText, OibSelect, OibInteger, OibPassword } from '../components/oib-form/index.js'
 import { ConfigContext } from '../context/config-context.jsx'
-import validation from './engine.validation'
+import validation from './engine.validation.js'
 
 const Proxies = ({ proxies }) => {
   const { dispatchNewConfig } = React.useContext(ConfigContext)

src/frontend/engine/scan-modes.jsx

@@ -2,10 +2,10 @@ import React from 'react'
 import PropTypes from 'prop-types'
 import { Row, Col } from 'reactstrap'
 import Table from '../components/table/table.jsx'
-import { OibTitle, OibText, OibCron } from '../components/oib-form'
+import { OibTitle, OibText, OibCron } from '../components/oib-form/index.js'
 import { ConfigContext } from '../context/config-context.jsx'
-import validation from './engine.validation'
-import utils from '../helpers/utils'
+import validation from './engine.validation.js'
+import utils from '../helpers/utils.js'
 
 const ScanModes = ({ scanModes }) => {
   const { dispatchNewConfig } = React.useContext(ConfigContext)

src/frontend/history-query/configure-history-query.jsx

@@ -2,7 +2,7 @@ import React from 'react'
 import { useParams } from 'react-router'
 import { Spinner } from 'reactstrap'
 import HistoryQueryForm from './form/history-query-form.jsx'
-import apis from '../service/apis'
+import apis from '../service/apis.js'
 
 const ConfigureHistoryQuery = () => {
   const { id } = useParams()

src/frontend/history-query/form/history-query-form.jsx

@@ -3,12 +3,12 @@ import PropTypes from 'prop-types'
 import { Button, Col, Container, Form, Row } from 'reactstrap'
 import { useNavigate } from 'react-router-dom'
 import { FaArrowLeft, FaArrowRight } from 'react-icons/fa'
-import { OibCheckbox, OibInteger, OibText, OibTextArea, OibTitle } from '../../components/oib-form'
+import { OibCheckbox, OibInteger, OibText, OibTextArea, OibTitle } from '../../components/oib-form/index.js'
 import OibDate from '../../components/oib-form/oib-date.jsx'
 import { ConfigContext } from '../../context/config-context.jsx'
 import PointsSection from './points-section.jsx'
-import apis from '../../service/apis'
-import utils from '../../helpers/utils'
+import apis from '../../service/apis.js'
+import utils from '../../helpers/utils.js'
 import { AlertContext } from '../../context/alert-context.jsx'
 import ConnectorButton from '../connector-button.jsx'
 

src/frontend/history-query/history-query.jsx

@@ -5,7 +5,7 @@ import { nanoid } from 'nanoid'
 import Table from '../components/table/table.jsx'
 import { ConfigContext } from '../context/config-context.jsx'
 import NewHistoryQueryRow from './new-history-query-row.jsx'
-import apis from '../service/apis'
+import apis from '../service/apis.js'
 
 const HistoryQuery = () => {
   const { newConfig } = React.useContext(ConfigContext)

src/frontend/history-query/new-history-query-row.jsx

@@ -1,7 +1,7 @@
 import React from 'react'
 import { Button, Form, Col, Row } from 'reactstrap'
 import PropTypes from 'prop-types'
-import { OibSelect } from '../components/oib-form/index'
+import { OibSelect } from '../components/oib-form/index.js'
 import SouthSchemas from '../south/south-types.jsx'
 
 const HISTORY_QUERY_CAPABLE_SOUTH_CONNECTORS = [

src/frontend/home/engine-node.jsx

@@ -3,7 +3,7 @@ import PropTypes from 'prop-types'
 import { Link } from 'react-router-dom'
 import { Badge } from 'reactstrap'
 import EngineMenu from './engine-menu.jsx'
-import utils from '../helpers/utils'
+import utils from '../helpers/utils.js'
 
 const EngineNode = ({ name, safeMode, onRestart, onShutdown }) => {
   const [oibusEngineData, setOibusEngineData] = React.useState({})

src/frontend/home/home-page.jsx

@@ -1,10 +1,10 @@
 import React from 'react'
 import { Spinner } from 'reactstrap'
-import apis from '../service/apis'
+import apis from '../service/apis.js'
 import { AlertContext } from '../context/alert-context.jsx'
 import { ConfigContext } from '../context/config-context.jsx'
 import NodeView from './node-view.jsx'
-import utils from '../helpers/utils'
+import utils from '../helpers/utils.js'
 
 const HomePage = () => {
   const [loading, setLoading] = React.useState(false)

src/frontend/home/new-north.jsx

@@ -4,9 +4,9 @@ import PropTypes from 'prop-types'
 import { Button, Container, Row, Modal, ModalHeader, ModalBody, ModalFooter } from 'reactstrap'
 import { useNavigate } from 'react-router-dom'
 import { ConfigContext } from '../context/config-context.jsx'
-import validationNorth from '../north/form/north.validation'
-import { OibText } from '../components/oib-form'
-import imageCategories from './image-categories'
+import validationNorth from '../north/form/north.validation.js'
+import { OibText } from '../components/oib-form/index.js'
+import imageCategories from './image-categories.js'
 
 const NewNorth = ({
   modal,

src/frontend/home/new-south.jsx

@@ -4,9 +4,9 @@ import PropTypes from 'prop-types'
 import { Row, Container, Button, Modal, ModalHeader, ModalBody, ModalFooter } from 'reactstrap'
 import { useNavigate } from 'react-router-dom'
 import { ConfigContext } from '../context/config-context.jsx'
-import validationSouth from '../south/form/south.validation'
-import { OibText } from '../components/oib-form'
-import imageCategories from './image-categories'
+import validationSouth from '../south/form/south.validation.js'
+import { OibText } from '../components/oib-form/index.js'
+import imageCategories from './image-categories.js'
 
 const NewSouth = ({
   modal,

src/frontend/home/north-node.jsx

@@ -4,7 +4,7 @@ import { Link } from 'react-router-dom'
 import { Tooltip } from 'reactstrap'
 import NorthMenu from './north-menu.jsx'
 import NorthSchemas from '../north/north-types.jsx'
-import imageCategories from './image-categories'
+import imageCategories from './image-categories.js'
 import OibCheckbox from '../components/oib-form/oib-checkbox.jsx'
 
 const NorthNode = ({ north, northIndex, onChange }) => {

src/frontend/home/south-node.jsx

@@ -3,7 +3,7 @@ import PropTypes from 'prop-types'
 import { Link } from 'react-router-dom'
 import { Tooltip } from 'reactstrap'
 import SouthMenu from './south-menu.jsx'
-import imageCategories from './image-categories'
+import imageCategories from './image-categories.js'
 import OibCheckbox from '../components/oib-form/oib-checkbox.jsx'
 import SouthSchemas from '../south/south-types.jsx'
 

src/frontend/logs/logs.jsx

@@ -10,7 +10,7 @@ import {
   Row,
   Col, Container,
 } from 'reactstrap'
-import apis from '../service/apis'
+import apis from '../service/apis.js'
 import { AlertContext } from '../context/alert-context.jsx'
 import OibDate from '../components/oib-form/oib-date.jsx'
 

src/frontend/north/form/north-form.jsx

@@ -7,9 +7,9 @@ import {
   OibTitle,
   OibCheckbox,
   OibInteger,
-} from '../../components/oib-form'
+} from '../../components/oib-form/index.js'
 import SubscribedTo from './subscribed-to.jsx'
-import validation from './north.validation'
+import validation from './north.validation.js'
 import EditableIdField from '../../components/editable-id-field.jsx'
 import { ConfigContext } from '../../context/config-context.jsx'
 import OibForm from '../../components/oib-form/oib-form.jsx'

src/frontend/north/form/subscribed-to.jsx

@@ -2,7 +2,7 @@ import React from 'react'
 import PropTypes from 'prop-types'
 import { Row, Col } from 'reactstrap'
 import Table from '../../components/table/table.jsx'
-import { OibSelect, OibTitle } from '../../components/oib-form'
+import { OibSelect, OibTitle } from '../../components/oib-form/index.js'
 import { ConfigContext } from '../../context/config-context.jsx'
 
 const SubscribedTo = ({ subscribedTo, northIndex }) => {

src/frontend/north/north-status.jsx

@@ -4,7 +4,7 @@ import { useParams, useNavigate } from 'react-router-dom'
 import { FaArrowLeft } from 'react-icons/fa'
 import { ConfigContext } from '../context/config-context.jsx'
 import Table from '../components/table/table.jsx'
-import utils from '../helpers/utils'
+import utils from '../helpers/utils.js'
 
 /**
  * Generate row entry for the status table.

src/frontend/south/configure-points.jsx

@@ -4,7 +4,7 @@ import { Button, Container, Spinner } from 'reactstrap'
 import { FaArrowLeft } from 'react-icons/fa'
 import { AlertContext } from '../context/alert-context.jsx'
 import { ConfigContext } from '../context/config-context.jsx'
-import utils from '../helpers/utils'
+import utils from '../helpers/utils.js'
 import PointsComponent from '../components/points-component.jsx'
 import StatusButton from '../components/status-button.jsx'
 

src/frontend/south/form/south-form.jsx

@@ -7,9 +7,9 @@ import {
   OibTitle,
   OibCheckbox,
   OibScanMode,
-} from '../../components/oib-form'
+} from '../../components/oib-form/index.js'
 import OibForm from '../../components/oib-form/oib-form.jsx'
-import validation from './south.validation'
+import validation from './south.validation.js'
 import EditableIdField from '../../components/editable-id-field.jsx'
 import { ConfigContext } from '../../context/config-context.jsx'
 import SouthSchemas from '../south-types.jsx'