Try make wrappers

Signed-off-by: Egor Savkin <es@m-labs.hk>

package-lock.json

@@ -12,6 +12,7 @@
         "@babel/core": "^7.23.2",
         "@babel/preset-env": "^7.23.2",
         "@babel/preset-react": "^7.22.15",
+        "@dnd-kit/core": "^6.1.0",
         "@hello-pangea/dnd": "^16.5.0",
         "@uidotdev/usehooks": "^2.4.1",
         "babel-loader": "^9.1.3",
@@ -19,6 +20,7 @@
         "bootstrap": "^5.3.0",
         "jquery": "^3.7.0",
         "json-logic-js": "^2.0.2",
+        "preact": "^10.19.3",
         "prop-types": "^15.8.1",
         "react": "^18.2.0",
         "react-bootstrap": "^2.9.1",
@@ -1855,6 +1857,45 @@
         "node": ">=10.0.0"
       }
     },
+    "node_modules/@dnd-kit/accessibility": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/@dnd-kit/accessibility/-/accessibility-3.1.0.tgz",
+      "integrity": "sha512-ea7IkhKvlJUv9iSHJOnxinBcoOI3ppGnnL+VDJ75O45Nss6HtZd8IdN8touXPDtASfeI2T2LImb8VOZcL47wjQ==",
+      "dev": true,
+      "dependencies": {
+        "tslib": "^2.0.0"
+      },
+      "peerDependencies": {
+        "react": ">=16.8.0"
+      }
+    },
+    "node_modules/@dnd-kit/core": {
+      "version": "6.1.0",
+      "resolved": "https://registry.npmjs.org/@dnd-kit/core/-/core-6.1.0.tgz",
+      "integrity": "sha512-J3cQBClB4TVxwGo3KEjssGEXNJqGVWx17aRTZ1ob0FliR5IjYgTxl5YJbKTzA6IzrtelotH19v6y7uoIRUZPSg==",
+      "dev": true,
+      "dependencies": {
+        "@dnd-kit/accessibility": "^3.1.0",
+        "@dnd-kit/utilities": "^3.2.2",
+        "tslib": "^2.0.0"
+      },
+      "peerDependencies": {
+        "react": ">=16.8.0",
+        "react-dom": ">=16.8.0"
+      }
+    },
+    "node_modules/@dnd-kit/utilities": {
+      "version": "3.2.2",
+      "resolved": "https://registry.npmjs.org/@dnd-kit/utilities/-/utilities-3.2.2.tgz",
+      "integrity": "sha512-+MKAJEOfaBe5SmV6t34p80MMKhjvUz0vRrvVJbPT0WElzaOJ/1xs+D+KDv+tD/NE5ujfrChEcshd4fLn0wpiqg==",
+      "dev": true,
+      "dependencies": {
+        "tslib": "^2.0.0"
+      },
+      "peerDependencies": {
+        "react": ">=16.8.0"
+      }
+    },
     "node_modules/@hello-pangea/dnd": {
       "version": "16.5.0",
       "resolved": "https://registry.npmjs.org/@hello-pangea/dnd/-/dnd-16.5.0.tgz",
@@ -3992,6 +4033,16 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
+    "node_modules/preact": {
+      "version": "10.19.3",
+      "resolved": "https://registry.npmjs.org/preact/-/preact-10.19.3.tgz",
+      "integrity": "sha512-nHHTeFVBTHRGxJXKkKu5hT8C/YWBkPso4/Gad6xuj5dbptt9iF9NZr9pHbPhBrnT2klheu7mHTxTZ/LjwJiEiQ==",
+      "dev": true,
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/preact"
+      }
+    },
     "node_modules/prop-types": {
       "version": "15.8.1",
       "resolved": "https://registry.npmjs.org/prop-types/-/prop-types-15.8.1.tgz",

package.json

@@ -32,7 +32,9 @@
     "json-logic-js": "^2.0.2",
     "zustand": "^4.4.7",
     "@uidotdev/usehooks":"^2.4.1",
-    "webpack-preprocessor-loader": "^1.3.0"
+    "webpack-preprocessor-loader": "^1.3.0",
+    "preact": "^10.19.3",
+    "@dnd-kit/core": "^6.1.0"
   },
   "babel": {
     "presets": [

static/js/shop/Backlog.jsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import {Droppable} from "@hello-pangea/dnd";
+import {Droppable} from './dnd/Droppable';
 import {ProductItem} from "./ProductItem";
 import {useShopStore} from "./shop_store";
 // #!render_count

static/js/shop/Cart.jsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import {Droppable} from "@hello-pangea/dnd";
+import {Droppable} from './dnd/Droppable';
 import {cartStyle, compareArraysWithIds} from "./utils";
 import {ProductCartItem} from "./ProductCartItem";
 import {FakePlaceholder} from "./FakePlaceholder";

static/js/shop/ProductCartItem.jsx

@@ -1,5 +1,6 @@
 import React from 'react'
-import {Draggable} from "@hello-pangea/dnd";
+//import {Draggable} from "@hello-pangea/dnd";
+import {Draggable} from './dnd/Draggable';
 import {compareObjectsEmptiness, productStyle} from "./utils";
 import {Resources} from "./Resources";
 import {CardWarnings} from "./CardWarnings";

static/js/shop/ProductItem.jsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import {Draggable} from "@hello-pangea/dnd";
+import {Draggable} from './dnd/Draggable';
 import {formatMoney, productStyle} from "./utils";
 import {useShopStore} from "./shop_store";
 

static/js/shop/Shop.jsx

@@ -1,5 +1,6 @@
 import React, {useEffect} from 'react';
-import {DragDropContext} from "@hello-pangea/dnd";
+//import {DragDropContext} from "@hello-pangea/dnd";
+import {DndContext, useSensor, useSensors, TouchSensor, MouseSensor} from "@dnd-kit/core";
 
 // #!render_count
 import {useRenderCount} from "@uidotdev/usehooks";
@@ -23,7 +24,16 @@ export function Shop() {
     const deleteCard = useShopStore((state) => state.deleteCard);
     const cardIndexById = useShopStore((state) => state.cardIndexById);
 
-    const handleOnDragEnd = (drop_result, _provided) => {
+    const mouseSensor = useSensor(MouseSensor);
+    const touchSensor = useSensor(TouchSensor);
+    const sensors = useSensors(
+        mouseSensor,
+        touchSensor,
+    );
+
+    const handleOnDragEnd = (event) => {
+        console.log(event);
+
         if (!drop_result.destination) {
             console.warn("No drop destination");
             return;
@@ -44,7 +54,7 @@ export function Shop() {
     console.log("Shop renders: ", renderCount)
 
     return (
-        <DragDropContext onDragEnd={handleOnDragEnd}>
+        <DndContext sensors={sensors} onDragEnd={handleOnDragEnd}>
             <Layout
                 aside={
                     <Backlog/>
@@ -62,7 +72,7 @@ export function Shop() {
                     />
                 )}>
             </Layout>
-        </DragDropContext>
+        </DndContext>
     );
 
 }

static/js/shop/dnd/Draggable.jsx

@@ -0,0 +1,15 @@
+import React from 'react';
+import {useDraggable} from '@dnd-kit/core';
+
+export function Draggable(props) {
+    const Element = props.element || 'div';
+    const {attributes, listeners, setNodeRef} = useDraggable({
+        id: props.id,
+    });
+
+    return (
+        <Element ref={setNodeRef} {...listeners} {...attributes}>
+            {props.children}
+        </Element>
+    );
+}

static/js/shop/dnd/Droppable.jsx

@@ -0,0 +1,14 @@
+import {useDroppable} from '@dnd-kit/core';
+import React from 'react'
+
+export function Droppable(props) {
+    const {setNodeRef} = useDroppable({
+        id: props.id,
+    });
+
+    return (
+        <div ref={setNodeRef}>
+            {props.children}
+        </div>
+    );
+}

static/js/shop/options/components/Switch.jsx

@@ -35,7 +35,6 @@ class Switch extends Component {
                         id={key}
                         checked={this.state.checked}
                         onClick={this.handleClick}
-                        onChange={this.handleClick}
                     />
                     <label className="form-check-label" htmlFor={key} style={{"display": "inline"}}>
                         {this.props.icon && <img src={`/images${this.props.icon}`} className="options-icon"/>}

static/js/shop/options/components/SwitchLine.jsx

@@ -46,7 +46,6 @@ class SwitchLine extends Component {
                         id={key + "switch"}
                         checked={this.state.checked}
                         onClick={this.handleCheck}
-                        onChange={this.handleCheck}
                     />
                     <label className="form-check-label" htmlFor={key + "switch"}>
                         {this.props.icon && <img src={`/images${this.props.icon}`} className="options-icon"/>}

webpack.config.js

@@ -36,6 +36,12 @@ module.exports = {
     },
     resolve: {
         extensions: ['.tsx', '.ts', '.js', '.jsx'],
+        "alias": {
+            "react": "preact/compat",
+            "react-dom/test-utils": "preact/test-utils",
+            "react-dom": "preact/compat",     // Must be below test-utils
+            "react/jsx-runtime": "preact/jsx-runtime"
+        },
     },
     //devtool: "inline-source-map",
     //mode: "development"