TASK: remove plow-js and refactor build stack

Configuration/Settings.yaml

@@ -10,6 +10,9 @@ Neos:
         javascript:
           'Psmb.FlatNav:FlatNav':
             resource: resource://Psmb.FlatNav/Public/JavaScript/FlatNav/Plugin.js
+        stylesheets:
+          'Psmb.FlatNav:FlatNav':
+              resource: resource://Psmb.FlatNav/Public/JavaScript/FlatNav/Plugin.css
       frontendConfiguration:
         Psmb_FlatNav:
           presets:

Resources/Private/FlatNav/.nvmrc

@@ -0,0 +1 @@
+20

Resources/Private/FlatNav/build.js

@@ -0,0 +1,33 @@
+const esbuild = require('esbuild');
+const CssModulesPlugin = require('esbuild-css-modules-plugin');
+const extensibilityMap = require('@neos-project/neos-ui-extensibility/extensibilityMap.json');
+const isWatch = process.argv.includes('--watch');
+
+/** @type {import("esbuild").BuildOptions} */
+const options = {
+    logLevel: 'info',
+    bundle: true,
+    target: 'es2020',
+    entryPoints: {Plugin: 'src/index.js'},
+    loader: {
+        '.js': 'tsx',
+        '.css': 'css'
+    },
+    outdir: '../../Public/JavaScript/FlatNav',
+    alias: extensibilityMap,
+    plugins: [
+        CssModulesPlugin({
+            force: true,
+            emitDeclarationFile: true,
+            localsConvention: 'camelCaseOnly',
+            namedExports: true,
+            inject: false
+        })
+    ]
+};
+
+if (isWatch) {
+    esbuild.context(options).then((ctx) => ctx.watch());
+} else {
+    esbuild.build(options);
+}

Resources/Private/FlatNav/package.json

@@ -2,18 +2,12 @@
   "description": "FlatNav",
   "private": true,
   "scripts": {
-    "build": "neos-react-scripts build",
-    "watch": "neos-react-scripts watch"
+    "build": "node build.js",
+    "watch": "node build.js --watch"
   },
   "devDependencies": {
-    "@neos-project/neos-ui-extensibility": "*"
-  },
-  "neos": {
-    "buildTargetDirectory": "../../Public/JavaScript/FlatNav"
-  },
-  "dependencies": {
-    "@neos-project/eslint-config-neos": "^2.1.2",
-    "lodash.debounce": "^4.0.8",
-    "lodash.upperfirst": "^4.3.1"
+    "@neos-project/neos-ui-extensibility": "^8.3.0",
+    "esbuild": "^0.17.0",
+    "esbuild-css-modules-plugin": "^3.1.2"
   }
 }

Resources/Private/FlatNav/src/DeleteSelectedNode.js

@@ -1,16 +1,16 @@
 import React, {PureComponent} from 'react';
 import PropTypes from 'prop-types';
 import {connect} from 'react-redux';
-import {$transform, $get} from 'plow-js';
 import {neos} from '@neos-project/neos-ui-decorators';
 import {IconButton} from '@neos-project/react-ui-components';
 import {selectors, actions} from '@neos-project/neos-ui-redux-store';
 
 @neos(globalRegistry => ({
     i18nRegistry: globalRegistry.get('i18n')
 }))
-@connect($transform({
-    node: selectors.CR.Nodes.focusedSelector
+
+@connect(state => ({
+    node: selectors.CR.Nodes.focusedSelector(state)
 }), {
     commenceNodeRemoval: actions.CR.Nodes.commenceRemoval
 })
@@ -25,7 +25,7 @@ export default class DeleteSelectedNode extends PureComponent {
 
     handleDeleteSelectedNodeClick = () => {
         const {node, commenceNodeRemoval} = this.props;
-        commenceNodeRemoval($get('contextPath', node));
+        commenceNodeRemoval(node?.contextPath);
     }
 
     render() {

Resources/Private/FlatNav/src/FlatNav.js

@@ -1,14 +1,13 @@
 import React, {Component} from 'react';
 import PropTypes from 'prop-types';
-import {$get, $transform} from 'plow-js';
 import {Button, Icon, IconButton, TextInput} from '@neos-project/react-ui-components';
 import {connect} from 'react-redux';
 import {actions, selectors} from '@neos-project/neos-ui-redux-store';
 import {neos} from '@neos-project/neos-ui-decorators';
 import HideSelectedNode from './HideSelectedNode';
 import DeleteSelectedNode from './DeleteSelectedNode';
 import mergeClassNames from 'classnames';
-import style from './style.css';
+import style from './style.modules.css';
 import RefreshNodes from "./RefreshNodes";
 import SearchInput from "./SearchInput";
 @neos(globalRegistry => ({
@@ -23,18 +22,18 @@ import SearchInput from "./SearchInput";
             const focusedNodeContextPath = selectors.UI.PageTree.getFocused(state);
             const getNodeByContextPathSelector = selectors.CR.Nodes.makeGetNodeByContextPathSelector(focusedNodeContextPath);
             const focusedNode = getNodeByContextPathSelector(state);
-            const canBeDeleted = $get('policy.canRemove', focusedNode) || false;
-            const canBeEdited = $get('policy.canEdit', focusedNode) || false;
+            const canBeDeleted = focusedNode?.policy?.canRemove || false;
+            const canBeEdited = focusedNode?.policy?.canEdit || false;
             const context = focusedNodeContextPath.split('@')[1];
             const isAllowedToAddChildOrSiblingNodes = isAllowedToAddChildOrSiblingNodesSelector(state, {
                 reference: newReferenceNodePath + '@' + context
             });
             return {
-                nodeData: $get('cr.nodes.byContextPath', state),
+                nodeData: state?.cr?.nodes?.byContextPath,
                 focused: selectors.CR.Nodes.focusedNodePathSelector(state),
                 siteNodeContextPath: selectors.CR.Nodes.siteNodeContextPathSelector(state),
-                baseWorkspaceName: $get('cr.workspaces.personalWorkspace.baseWorkspace', state),
-                publishableNodes: $get('cr.workspaces.personalWorkspace.publishableNodes', state),
+                baseWorkspaceName: state?.cr?.workspaces?.personalWorkspace?.baseWorkspace,
+                publishableNodes: state?.cr?.workspaces?.personalWorkspace?.publishableNodes,
                 isAllowedToAddChildOrSiblingNodes,
                 canBeDeleted,
                 canBeEdited
@@ -74,7 +73,7 @@ export default class FlatNav extends Component {
     componentDidUpdate() {
         if (
             // Node data not available for some nodes (e.g. after tree reload)
-            !this.props.nodes.every(contextPath => $get([contextPath], this.props.nodeData))
+            !this.props.nodes.every(contextPath => this.props.nodeData?.[contextPath])
         ) {
             this.props.fetchNodes();
             this.props.fetchNewReference();
@@ -86,7 +85,7 @@ export default class FlatNav extends Component {
 
         const getNodeByContextPathSelector = selectors.CR.Nodes.makeGetNodeByContextPathSelector(feedbackPayload.contextPath);
         const node = getNodeByContextPathSelector(state);
-        const nodeTypeName = $get('nodeType', node);
+        const nodeTypeName = node?.nodeType;
 
         if (nodeTypeName === this.props.preset.newNodeType) {
             this.refreshFlatNav();
@@ -108,16 +107,17 @@ export default class FlatNav extends Component {
     }
 
     getNodeIconComponent(node) {
-        const nodeTypeName = $get('nodeType', node);
+        const nodeTypeName = node?.nodeType;
         const nodeType = this.props.nodeTypesRegistry.getNodeType(nodeTypeName);
-        const isHidden = $get('properties._hidden', node);
-        const isHiddenBefore = $get('properties._hiddenBeforeDateTime', node);
-        const isHiddenAfter = $get('properties._hiddenAfterDateTime', node);
+        const isHidden = node?.properties?._hidden;
+        const isHiddenBefore = node?.properties?._hiddenBeforeDateTime;
+        const isHiddenAfter = node?.properties?._hiddenAfterDateTime;
+        const nodeTypeIcon = nodeType?.ui?.icon;
 
         if (isHidden) {
             return (
                 <span className="fa-layers fa-fw">
-                    <Icon icon={$get('ui.icon', nodeType)} />
+                    <Icon icon={nodeTypeIcon} className={style.baseIcon} />
                     <Icon icon="circle" color="error" transform="shrink-3 down-6 right-4" />
                     <Icon icon="times" transform="shrink-7 down-6 right-4" />
                 </span>
@@ -127,15 +127,15 @@ export default class FlatNav extends Component {
         if (isHiddenBefore || isHiddenAfter) {
             return (
                 <span className="fa-layers fa-fw">
-                    <Icon icon={$get('ui.icon', nodeType)} />
+                    <Icon icon={nodeTypeIcon} className={style.baseIcon} />
                     <Icon icon="circle" color="primaryBlue" transform="shrink-5 down-6 right-4" />
                     <Icon icon="clock" transform="shrink-9 down-6 right-4" />
                 </span>
             );
         }
 
         return (
-            <Icon icon={$get('ui.icon', nodeType)} />
+            <Icon icon={nodeTypeIcon} className={style.baseIcon} />
         );
     }
 
@@ -145,41 +145,42 @@ export default class FlatNav extends Component {
         }
         return this.props.nodes
             .map(contextPath => {
-                const item = $get([contextPath], this.props.nodeData);
+                const item = this.props.nodeData?.[contextPath];
 
                 if (item) {
                     const isFocused = this.props.focused === contextPath;
                     const isDirty = this.props.publishableNodes.filter(i => (
-                        $get('contextPath', i) === contextPath ||
-                        $get('documentContextPath', i) === contextPath
+                        i?.contextPath === contextPath ||
+                        i?.documentContextPath === contextPath
                     )).length > 0;
-                    const isRemoved = $get('properties._removed', item);
+                    const isRemoved = item?.properties?._removed;
                     const nodeIconComponent = this.getNodeIconComponent(item);
+                    const nodeItemClassNames = mergeClassNames({
+                        [style.node]: true,
+                        [style.nodeFocused]: isFocused,
+                        [style.nodeDirty]: isDirty,
+                        [style.nodeRemoved]: isRemoved
+                    })
 
                     return (
                         <div
-                            className={mergeClassNames({
-                                [style.node]: true,
-                                [style['node--focused']]: isFocused,
-                                [style['node--dirty']]: isDirty,
-                                [style['node--removed']]: isRemoved
-                            })}
+                            className={nodeItemClassNames}
                             key={contextPath}
                             onClick={() => {
                                 if ( ! isRemoved) {
-                                    this.props.setSrc($get('uri', item));
+                                    this.props.setSrc(item?.uri);
                                     this.props.focus(contextPath);
                                 }
                             }}
                             role="button"
                             >
                             <div
-                                className={style.node__iconWrapper}>
+                                className={style.nodeIconWrapper}>
                                 {nodeIconComponent}
                             </div>
                             <span
-                                className={style.node__label}>
-                                {$get('label', item)}
+                                className={style.nodeLabel}>
+                                {item?.label}
                             </span>
                         </div>
                     );

Resources/Private/FlatNav/src/Helper/debounce.js

@@ -0,0 +1,13 @@
+const debounce = (callback, wait) => {
+    let timeoutId = null;
+
+    return (...args) => {
+        window.clearTimeout(timeoutId);
+
+        timeoutId = window.setTimeout(() => {
+            callback.apply(null, args);
+        }, wait);
+    };
+}
+
+export default debounce;

Resources/Private/FlatNav/src/HideSelectedNode.js

@@ -2,16 +2,15 @@ import React, {PureComponent} from 'react';
 import PropTypes from 'prop-types';
 import {connect} from 'react-redux';
 import {neos} from '@neos-project/neos-ui-decorators';
-import {$transform, $get} from 'plow-js';
 import {IconButton} from '@neos-project/react-ui-components';
 
 import {selectors, actions} from '@neos-project/neos-ui-redux-store';
 
 @neos(globalRegistry => ({
     i18nRegistry: globalRegistry.get('i18n')
 }))
-@connect($transform({
-    node: selectors.CR.Nodes.focusedSelector
+@connect(state => ({
+    node: selectors.CR.Nodes.focusedSelector(state)
 }), {
     hideNode: actions.CR.Nodes.hide,
     showNode: actions.CR.Nodes.show
@@ -29,18 +28,18 @@ export default class HideSelectedNode extends PureComponent {
     handleHideNode = () => {
         const {node, hideNode} = this.props;
 
-        hideNode($get('contextPath', node));
+        hideNode(node?.contextPath);
     }
 
     handleShowNode = () => {
         const {node, showNode} = this.props;
 
-        showNode($get('contextPath', node));
+        showNode(node?.contextPath);
     }
 
     render() {
         const {className, disabled, node, i18nRegistry} = this.props;
-        const isHidden = $get('properties._hidden', node);
+        const isHidden = node?.properties?._hidden;
 
         return (
             <IconButton

Resources/Private/FlatNav/src/RefreshNodes.js

@@ -3,7 +3,7 @@ import PropTypes from 'prop-types';
 import mergeClassNames from 'classnames';
 import {neos} from '@neos-project/neos-ui-decorators';
 import {IconButton} from '@neos-project/react-ui-components';
-import style from './style.css';
+import style from './style.modules.css';
 
 @neos(globalRegistry => ({
     i18nRegistry: globalRegistry.get('i18n')
@@ -36,7 +36,7 @@ export default class RefreshNodes extends PureComponent {
                 disabled={disabled}
                 onClick={this.handleClick}
                 icon="sync"
-                hoverStyle="clean"
+                hoverStyle="brand"
                 title={i18nRegistry.translate('refresh')}
             />
         );

Resources/Private/FlatNav/src/SearchInput.js

@@ -1,5 +1,5 @@
 import React from 'react'
-import style from './style.css';
+import style from './style.modules.css';
 import {IconButton, TextInput} from '@neos-project/react-ui-components';
 
 const SearchInput = ({onChange, searchTerm, placeholder}) => {