Migration start of the mindplot module

packages/editor/package.json

@@ -25,6 +25,7 @@
   },
   "dependencies": {
     "@types/styled-components": "^5.1.4",
+    "@wismapping/core-js": "^0.0.1",
     "react": "^17.0.1",
     "react-dom": "^17.0.1",
     "styled-components": "^5.2.1"

packages/mindplot/lib/components/ConnectionLine.js

@@ -20,8 +20,8 @@ const core = Core();
 const web2D = require('@wismapping/web2d');
 const web2d = web2D();
 
-const INodeModel,
+const INodeModel = require('./model/INodeModel').default;
-    { TopicShape } = require('./model/INodeModel').default;
+const { TopicShape } = require('./model/INodeModel').default;
 const Topic = require('./Topic').default;
 
 const ConnectionLine = new Class({

packages/mindplot/lib/components/Events.js

@@ -1,5 +1,4 @@
 const Events = new Class({
-
     $events: {},
 
     _removeOn: function (string) {
@@ -20,11 +19,15 @@ const Events = new Class({
         type = this._removeOn(type);
         var events = this.$events[type];
         if (!events) return this;
-        args = Array.from(args);
+        args = Array.isArray(args) ? args : [args];
-        _.each(events, function (fn) {
+        _.each(
+            events,
+            function (fn) {
                 if (delay) fn.delay(delay, this, args);
                 else fn.apply(this, args);
-        }, this);
+            },
+            this
+        );
         return this;
     },
 
@@ -36,8 +39,7 @@ const Events = new Class({
             if (index != -1) events.splice(index, 1);
         }
         return this;
-    }
+    },
-
 });
 
 export default Events;

packages/mindplot/lib/components/NodeGraph.js

@@ -15,13 +15,12 @@
  *   See the License for the specific language governing permissions and
  *   limitations under the License.
  */
-const Topic = require('./Topic').default
+const Topic = require('./Topic').default;
 const DragTopic = require('./DragTopic').default;
 const INodeModel = require('./model/INodeModel').default;
-const CentralTopic = require('./CentralTopic').default;
-const MainTopic = require('./MainTopic').default;
 
-const NodeGraph = new Class(/** @lends NodeGraph */{
+const NodeGraph = new Class(
+    /** @lends NodeGraph */ {
         /**
          * @constructs
          * @param {mindplot.model.NodeModel} nodeModel
@@ -29,13 +28,13 @@ const NodeGraph = new Class(/** @lends NodeGraph */{
          * @throws will throw an error if nodeModel is null or undefined
          */
         initialize: function (nodeModel, options) {
-        $assert(nodeModel, "model can not be null");
+            $assert(nodeModel, 'model can not be null');
 
             this._options = options;
             this._mouseEvents = true;
             this.setModel(nodeModel);
             this._onFocus = false;
-        this._size = {width: 50, height: 20};
+            this._size = { width: 50, height: 20 };
         },
 
         /** @return true if option is set to read-only */
@@ -54,7 +53,7 @@ const NodeGraph = new Class(/** @lends NodeGraph */{
          * @throws will throw an error if the topic id is not a number
          */
         setId: function (id) {
-        $assert(typeof  topic.getId() == "number", "id is not a number:" + id);
+            $assert(typeof topic.getId() == 'number', 'id is not a number:' + id);
             this.getModel().setId(id);
         },
 
@@ -73,7 +72,7 @@ const NodeGraph = new Class(/** @lends NodeGraph */{
 
         /** @abstract */
         setPosition: function (point, fireEvent) {
-        throw "Unsupported operation";
+            throw 'Unsupported operation';
         },
 
         /** */
@@ -140,13 +139,11 @@ const NodeGraph = new Class(/** @lends NodeGraph */{
         /** */
         setOnFocus: function (focus) {
             if (this._onFocus != focus) {
-
                 this._onFocus = focus;
                 var outerShape = this.getOuterShape();
                 if (focus) {
                     outerShape.setFill(Topic.OUTER_SHAPE_ATTRIBUTES_FOCUS.fillColor);
                     outerShape.setOpacity(1);
-
                 } else {
                     outerShape.setFill(Topic.OUTER_SHAPE_ATTRIBUTES.fillColor);
                     outerShape.setOpacity(0);
@@ -158,7 +155,6 @@ const NodeGraph = new Class(/** @lends NodeGraph */{
 
                 // Fire event ...
                 this.fireEvent(focus ? 'ontfocus' : 'ontblur', this);
-
             }
         },
 
@@ -187,8 +183,9 @@ const NodeGraph = new Class(/** @lends NodeGraph */{
         getPosition: function () {
             var model = this.getModel();
             return model.getPosition();
+        },
     }
-});
+);
 
 /**
  * creates a new topic from the given node model
@@ -202,6 +199,8 @@ const NodeGraph = new Class(/** @lends NodeGraph */{
  * @return {mindplot.CentralTopic|mindplot.MainTopic} the new topic
  */
 NodeGraph.create = function (nodeModel, options) {
+    const CentralTopic = require('./CentralTopic').default;
+    const MainTopic = require('./MainTopic').default;
     $assert(nodeModel, 'Model can not be null');
 
     var type = nodeModel.getType();
@@ -213,7 +212,7 @@ NodeGraph.create = function (nodeModel, options) {
     } else if (type == INodeModel.MAIN_TOPIC_TYPE) {
         result = new MainTopic(nodeModel, options);
     } else {
-        $assert(false, "unsupported node type:" + type);
+        $assert(false, 'unsupported node type:' + type);
     }
 
     return result;

packages/mindplot/lib/components/commands/index.js

@@ -0,0 +1,21 @@
+const addFeatureToTopicCommand = require('./AddFeatureToTopicCommand').default;
+const addRelationshipCommand = require('./AddRelationshipCommand').default;
+const addTopicCommand = require('./AddTopicCommand').default;
+const changeFeatureToTopicCommand = require('./ChangeFeatureToTopicCommand').default;
+const deleteCommand = require('./DeleteCommand').default;
+const dragTopicCommand = require('./DragTopicCommand').default;
+const genericFunctionCommand = require('./GenericFunctionCommand').default;
+const moveControlPointCommand = require('./MoveControlPointCommand').default;
+const removeFeatureFromTopicCommand = require('./RemoveFeatureFromTopicCommand').default;
+
+export const Commands = {
+    AddFeatureToTopicCommand: addFeatureToTopicCommand,
+    AddRelationshipCommand: addRelationshipCommand,
+    AddTopicCommand: addTopicCommand,
+    ChangeFeatureToTopicCommand: changeFeatureToTopicCommand,
+    DeleteCommand: deleteCommand,
+    DragTopicCommand: dragTopicCommand,
+    GenericFunctionCommand: genericFunctionCommand,
+    MoveControlPointCommand: moveControlPointCommand,
+    RemoveFeatureFromTopicCommand: removeFeatureFromTopicCommand,
+};

packages/mindplot/lib/components/index.js

@@ -0,0 +1,108 @@
+const acitonDispatcher = require('./ActionDispatcher').default;
+const actionIcon = require('./ActionIcon').default;
+const centralTopic = require('./CentralTopic').default;
+const command = require('./Command').default;
+const connectionLine = require('./ConnectionLine').default;
+const controlPoint = require('./ControlPoint').default;
+const designer = require('./Designer').default;
+const designerAcitonRun = require('./DesignerActionRunner').default;
+const designerKeyboard = require('./DesignerKeyboard').default;
+const desginerModel = require('./DesignerModel').default;
+const desginerUndoManager = require('./DesignerUndoManager').default;
+const dragConnector = require('./DragConnector').default;
+const dragManager = require('./DragManager').default;
+const dragPivot = require('./DragPivot').default;
+const dragTopic = require('./DragTopic').default;
+const editorOptions = require('./EditorOptions').default;
+const editorProperties = require('./EditorProperties').default;
+const events = require('./Events').default;
+const footer = require('./footer');
+//const header =require('./header');
+const icon = require('./Icon').default;
+const iconGroup = require('./IconGroup').default;
+const imageIcon = require('./ImageIcon').default;
+const keyboard = require('./Keyboard').default;
+const linkIcon = require('./LinkIcon').default;
+const localStorageManager = require('./LocalStorageManager').default;
+const mainTopic = require('./MainTopic').default;
+const messages = require('./Messages').default;
+const messageBundle_ca = require('./MessageBundle_ca').default;
+const messageBundle_de = require('./MessageBundle_de').default;
+const messageBundle_en = require('./MessageBundle_en').default;
+const messageBundle_es = require('./MessageBundle_es').default;
+const messageBundle_fr = require('./MessageBundle_fr').default;
+const messageBundle_pt_BR = require('./MessageBundle_pt_BR').default;
+const messageBundle_zh_CN = require('./MessageBundle_zh_CN').default;
+const messageBundle_zh_TW = require('./MessageBundle_zh_TW').default;
+const multilineTextEditor = require('./MultilineTextEditor').default;
+const nodeGraph = require('./NodeGraph').default;
+const noteIcon = require('./NoteIcon').default;
+const options = require('./Options').default;
+const persistenceManger = require('./PersistenceManager').default;
+const relationship = require('./Relationship').default;
+const relationshipPivot = require('./RelationshipPivot').default;
+const restPersistenceManager = require('./RestPersistenceManager').default;
+const screenManager = require('./ScreenManager').default;
+const shrinkConnector = require('./ShrinkConnector').default;
+const standaloneActionDispatcher = require('./StandaloneActionDispatcher').default;
+const textEditor = require('./TextEditor').default;
+//const textEditorFacotry = require('./TextEditorFactory').default;
+const topic = require('./Topic').default;
+const topicEventDispatcher = require('./TopicEventDispatcher').default;
+const topicFeature = require('./TopicFeature').default;
+const topicStyle = require('./TopicStyle').default;
+const workspace = require('./Workspace').default;
+
+export const Components = {
+    ActionDispatcher: acitonDispatcher,
+    ActionIcon: actionIcon,
+    CentralTopic: centralTopic,
+    Command: command,
+    ConnectionLine: connectionLine,
+    ControlPoint: controlPoint,
+    Designer: designer,
+    DesignerActionRunner: designerAcitonRun,
+    DesignerKeyboard: designerKeyboard,
+    DesignerModel: desginerModel,
+    DesignerUndoManager: desginerUndoManager,
+    DragConnector: dragConnector,
+    DragManager: dragManager,
+    DragPivot: dragPivot,
+    DragTopic: dragTopic,
+    EditorOptions: editorOptions,
+    EditorProperties: editorProperties,
+    Events: events,
+    Icon: icon,
+    IconGroup: iconGroup,
+    ImageIcon: imageIcon,
+    Keyboard: keyboard,
+    LinkIcon: linkIcon,
+    LocalStorageManager: localStorageManager,
+    MainTopic: mainTopic,
+    MessageBundle_ca: messageBundle_ca,
+    MessageBundle_de: messageBundle_de,
+    MessageBundle_en: messageBundle_en,
+    MessageBundle_es: messageBundle_es,
+    MesasgeBundle_fr: messageBundle_fr,
+    MessageBundle_pt_BR: messageBundle_pt_BR,
+    MessageBundle_zh_CN: messageBundle_zh_CN,
+    MessageBundle_zh_TW: messageBundle_zh_TW,
+    Messages: messages,
+    MultilineTextEditor: multilineTextEditor,
+    NodeGraph: nodeGraph,
+    NoteIcon: noteIcon,
+    Options: options,
+    PersistenceManager: persistenceManger,
+    Relationship: relationship,
+    RelationshipPivot: relationshipPivot,
+    RestPersistenceManager: restPersistenceManager,
+    ScreenManager: screenManager,
+    StandaloneActionDispatcher: standaloneActionDispatcher,
+    TextEditor: textEditor,
+    //TextEditorFactory: textEditorFacotry,
+    Topic: topic,
+    TopicEventDispatcher: topicEventDispatcher,
+    TopicFeature: topicFeature,
+    TopicStyle: topicStyle,
+    Workspace: workspace,
+};

packages/mindplot/lib/components/layout/index.js

@@ -0,0 +1,27 @@
+const abstractBasicSorter = require('./AbstractBasicSorter').default;
+const balancedSorter = require('./BalancedSorter').default;
+const changeEvent = require('./ChangeEvent').default;
+const childrenSorterStrategy = require('./ChildrenSorterStrategy').default;
+const eventBus = require('./EventBus').default;
+const eventBusDispatcher = require('./EventBusDispatcher').default;
+const gridSorter = require('./GridSorter').default;
+const layoutManager = require('./LayoutManager').default;
+const node = require('./Node').default;
+const originalLayout = require('./OriginalLayout').default;
+const rootedTreeSet = require('./RootedTreeSet').default;
+const symmetricSorter = require('./SymmetricSorter').default;
+
+export const Layout = {
+    AbstractBasicSorter: abstractBasicSorter,
+    BalancedSorter: balancedSorter,
+    ChangeEvent: changeEvent,
+    ChildrenSorterStrategy: childrenSorterStrategy,
+    EventBus: eventBus,
+    EventBusDispatcher: eventBusDispatcher,
+    GridSorter: gridSorter,
+    LayoutManager: layoutManager,
+    Node: node,
+    OriginalLayout: originalLayout,
+    RootedTreeSet: rootedTreeSet,
+    SymmetricSorter: symmetricSorter,
+};

packages/mindplot/lib/components/model/index.js

@@ -0,0 +1,21 @@
+const featureModel = require('./FeatureModel').default;
+const iconModel = require('./IconModel').default;
+const imindmap = require('./IMindmap').default;
+const inodeModel = require('./INodeModel').default;
+const linkModel = require('./LinkModel').default;
+const mindmap = require('./Mindmap').default;
+const nodeModel = require('./NodeModel').default;
+const noteModel = require('./NoteModel').default;
+const relationshipModel = require('./RelationshipModel').default;
+
+export const Models = {
+    FeatureModel: featureModel,
+    IconModel: iconModel,
+    IMindmap: imindmap,
+    INodeModel: inodeModel,
+    LinkModel: linkModel,
+    Mindmap: mindmap,
+    NodeModel: nodeModel,
+    NoteModel: noteModel,
+    RelationshipModel: relationshipModel,
+};

packages/mindplot/lib/components/persistence/index.js

@@ -0,0 +1,17 @@
+const beta2PelaMigrator = require('./Beta2PelaMigrator').default;
+const modelCodeName = require('./ModelCodeName').default;
+const pela2TangoMigrator = require('./Pela2TangoMigrator').default;
+const xmlSerializer_Beta = require('./XMLSerializer_Beta').default;
+const xmlSerializer_Pela = require('./XMLSerializer_Pela').default;
+const xmlSerializer_Tango = require('./XMLSerializer_Tango').default;
+const xmlSerializerFactory = require('./XMLSerializerFactory').default;
+
+export const Persistence = {
+    Beta2PelaMigrator: beta2PelaMigrator,
+    ModelCodeName: modelCodeName,
+    Pela2TangoMigrator: pela2TangoMigrator,
+    XMLSerializer_Beta: xmlSerializer_Beta,
+    XMLSerializer_Pela: xmlSerializer_Pela,
+    XMLSerializer_Tango: xmlSerializer_Tango,
+    XMLSerializerFactory: xmlSerializerFactory,
+};

packages/mindplot/lib/components/widget/index.js

@@ -0,0 +1,37 @@
+const colorPalettePanel = require('./ColorPalettePanel').default;
+const floatingTip = require('./FloatingTip').default;
+const fontFamilyPanel = require('./FontFamilyPanel').default;
+const fontSizePanel = require('./FontSizePanel').default;
+const iconPanel = require('./IconPanel').default;
+const imenu = require('./IMenu').default;
+const keyboardShortcutTooltip = require('./KeyboardShortcutTooltip').default;
+const linkEditor = require('./LinkEditor').default;
+const linkIconTooltip = require('./LinkIconTooltip').default;
+const listToolbarPanel = require('./ListToolbarPanel').default;
+const menu = require('./Menu').default;
+const modalDialogNotifier = require('./ModalDialogNotifier');
+const noteEditor = require('./NoteEditor');
+const toolbarItem = require('./ToolbarItem');
+const toolbarNotifier = require('./ToolbarNotifier');
+const toolbarPanelItem = require('./ToolbarPaneItem');
+const topicShapePanel = require('./TopicShapePanel');
+
+export const Widgets = {
+    ColorPalettePanel: colorPalettePanel,
+    FloatingTip: floatingTip,
+    FontFamilyPanel: fontFamilyPanel,
+    FontSizePanel: fontSizePanel,
+    IconPanel: iconPanel,
+    Imenu: imenu,
+    KeyboardShortcutTooltip: keyboardShortcutTooltip,
+    LinkEditor: linkEditor,
+    LinkIconTooltip: linkIconTooltip,
+    ListToolbarPanel: listToolbarPanel,
+    Menu: menu,
+    ModalDialogNotifier: modalDialogNotifier,
+    NoteEditor: noteEditor,
+    ToolbarItem: toolbarItem,
+    ToolbarNotifier: toolbarNotifier,
+    ToolbarPaneItem: toolbarPanelItem,
+    TopicShapePanel: topicShapePanel,
+};

packages/mindplot/lib/mindplot.js

@@ -3,59 +3,29 @@ module.exports = mindplot; //eslint-disable-line
 
 function mindplot() {
     // Commands
-    const addFeatureToTopicCommand = require('./components/commands/AddFeatureToTopicCommand')
+    const { Commands } = require('./components/commands');
-        .default;
-    const addRelationshipCommand = require('./components/commands/AddRelationshipCommand').default;
-    const addTopicCommand = require('./components/commands/AddTopicCommand').default;
-    const changeFeatureToTopicCommand = require('./components/commands/ChangeFeatureToTopicCommand')
-        .default;
-    const deleteCommand = require('./components/commands/DeleteCommand').default;
-    const dragTopicCommand = require('./components/commands/DragTopicCommand').default;
-    const genericFunctionCommand = require('./components/commands/GenericFunctionCommand').default;
-    const moveControlPointCommand = require('./components/commands/MoveControlPointCommand')
-        .default;
-    const removeFeatureFromTopicCommand = require('./components/commands/RemoveFeatureFromTopicCommand')
-        .default;
 
     // Layout
-    const abstractBasicSorter = require('./components/layout/AbstractBasicSorter').default;
+    const { Layout } = require('./components/layout');
-    const balancedSorter = require('./components/layout/BalancedSorter').default;
+
-    const changeEvent = require('./components/layout/ChangeEvent').default;
+    // Model
-    const childrenSorterStrategy = require('./components/layout/ChildrenSorterStrategy').default;
+    const { Models } = require('./components/model');
-    const eventBus = require('./components/layout/EventBus').default;
+
-    const eventBusDispatcher = require('./components/layout/EventBusDispatcher').default;
+    // Persistence
-    const gridSorter = require('./components/layout/GridSorter').default;
+    const { Persistence } = require('./components/persistence');
-    const layoutManager = require('./components/layout/LayoutManager').default;
+
-    const node = require('./components/layout/Node').default;
+    // Widgets
-    const originalLayout = require('./components/layout/OriginalLayout').default;
+    const { Widgets } = require('./components/widget');
-    const rootedTreeSet = require('./components/layout/RootedTreeSet').default;
+
-    const symmetricSorter = require('./components/layout/SymmetricSorter').default;
+    // Commponents
+    const { Components } = require('./components');
 
     return {
-        Commands: {
+        Commands,
-            AddFeatureToTopicCommand: addFeatureToTopicCommand,
+        Layout,
-            AddRelationshipCommand: addRelationshipCommand,
+        Models,
-            AddTopicCommand: addTopicCommand,
+        Persistence,
-            ChangeFeatureToTopicCommand: changeFeatureToTopicCommand,
+        Widgets,
-            DeleteCommand: deleteCommand,
+        Components,
-            DragTopicCommand: dragTopicCommand,
-            GenericFunctionCommand: genericFunctionCommand,
-            MoveControlPointCommand: moveControlPointCommand,
-            RemoveFeatureFromTopicCommand: removeFeatureFromTopicCommand,
-        },
-        Layout: {
-            AbstractBasicSorter: abstractBasicSorter,
-            BalancedSorter: balancedSorter,
-            ChangeEvent: changeEvent,
-            ChildrenSorterStrategy: childrenSorterStrategy,
-            EventBus: eventBus,
-            EventBusDispatcher: eventBusDispatcher,
-            GridSorter: gridSorter,
-            LayoutManager: layoutManager,
-            Node: node,
-            OriginalLayout: originalLayout,
-            RootedTreeSet: rootedTreeSet,
-            SymmetricSorter: symmetricSorter,
-        },
     };
 }

packages/mindplot/package.json

@@ -25,8 +25,7 @@
     },
     "dependencies": {
         "@wismapping/core-js": "^0.0.1",
-        "@wismapping/web2d": "^0.0.1",
+        "@wismapping/web2d": "^0.0.1"
-        "mootools": "^1.5.2"
     },
     "devDependencies": {
         "@babel/core": "^7.14.6",

packages/mindplot/test/javascript/static/test/testPalette.js

@@ -0,0 +1,16 @@
+const Mindplot = require('../../../../lib/mindplot');
+const mindplot = Mindplot();
+
+window.addEventListener('load', function (e) {
+    var model = {
+        getValue: function () {},
+        setValue: function (value) {
+            console.log('value:' + value);
+        },
+    };
+    var palette = new mindplot.widget.ColorPalettePanel(
+        'myButton',
+        model,
+        '/mindplot/src/main/javascript/widget'
+    );
+});

packages/mindplot/webpack.test.js

@@ -0,0 +1,29 @@
+const path = require('path');
+const { CleanWebpackPlugin } = require('clean-webpack-plugin');
+
+/** @type {import('webpack').Configuration} */
+module.exports = {
+    entry: './lib/mindplot',
+    output: {
+        path: path.resolve(__dirname, 'dist', 'test'),
+        filename: '[name].js',
+        publicPath: '',
+    },
+    module: {
+        rules: [
+            {
+                use: 'babel-loader',
+                test: /.(js|jsx)$/,
+                exclude: /node_modules/,
+            },
+            {
+                type: 'asset',
+                test: /\.(png|svg|jpg|jpeg|gif)$/i,
+            },
+        ],
+    },
+    resolve: {
+        extensions: ['.js', '.jsx', '.json'],
+    },
+    plugins: [new CleanWebpackPlugin()],
+};

packages/webapp/package.json

@@ -53,6 +53,7 @@
         "@material-ui/icons": "^4.11.2",
         "@material-ui/lab": "^4.0.0-alpha.57",
         "@reduxjs/toolkit": "^1.5.0",
+        "@wismapping/core-js": "^0.0.1",
         "axios": "^0.21.0",
         "dayjs": "^1.10.4",
         "react": "^17.0.0",

packages/webcomponent/README.md

@@ -0,0 +1,11 @@
+# `webcomponent`
+
+> TODO: description
+
+## Usage
+
+```
+const webcomponent = require('webcomponent');
+
+// TODO: DEMONSTRATE API
+```

packages/webcomponent/__tests__/webcomponent.test.js

@@ -0,0 +1,7 @@
+'use strict';
+
+const webcomponent = require('..');
+
+describe('webcomponent', () => {
+    it('needs tests');
+});

packages/webcomponent/package.json

@@ -0,0 +1,50 @@
+{
+  "name": "webcomponent",
+  "version": "0.0.1",
+  "description": "webcomponent Wisemapping",
+  "author": "Ezequiel-Vega <vegaezequiel51@gmail.com>",
+  "homepage": "https://www.wisemapping.com",
+  "license": "MIT",
+  "main": "dist/webcomponent.js",
+  "private": false,
+  "directories": {
+    "lib": "lib",
+    "test": "__tests__"
+  },
+  "files": [
+    "lib"
+  ],
+  "publishConfig": {
+    "registry": "https://registry.yarnpkg.com"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://ezequielVega@bitbucket.org/lilabyus/wisemapping-frontend.git"
+  },
+  "scripts": {
+    "start": "webpack serve --config webpack.dev.js",
+    "build": "webpack --config webpack.prod.js"
+  },
+  "devDependencies": {
+    "@typescript-eslint/eslint-plugin": "^4.31.0",
+    "@typescript-eslint/parser": "^4.31.0",
+    "babel-loader": "^8.2.2",
+    "clean-webpack-plugin": "^4.0.0",
+    "html-webpack-plugin": "^5.3.2",
+    "prettier": "^2.3.2",
+    "ts-loader": "^9.2.5",
+    "typescript": "^4.4.2",
+    "webpack": "^5.52.0",
+    "webpack-cli": "^4.8.0",
+    "webpack-merge": "^5.8.0",
+    "webpack-server": "^0.1.2"
+  },
+  "dependencies": {
+    "@wisemapping/mindplot": "^0.0.1",
+    "@wismapping/core-js": "^0.0.1",
+    "@wismapping/web2d": "^0.0.1",
+    "mootools": "1.4.5",
+    "react": "^17.0.2",
+    "react-dom": "^17.0.2"
+  }
+}

packages/webcomponent/public/index.html

@@ -0,0 +1,11 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+        <meta charset="UTF-8">
+        <meta name="viewport" content="width=device-width, initial-scale=1.0">
+        <title>Document</title>
+</head>
+<body>
+        <div id="root"></div>
+</body>
+</html>

packages/webcomponent/src/App.tsx

@@ -0,0 +1,10 @@
+import React from 'react';
+import Mindplot from '@wismapping/web2d';
+
+const App = (): React.ReactElement => {
+    const mindplot = Mindplot();
+    console.log(mindplot);
+    return <div>Webcomponent</div>;
+};
+
+export default App;

packages/webcomponent/src/index.tsx

@@ -0,0 +1,6 @@
+import React from 'react';
+import ReactDOM from 'react-dom';
+import App from './App';
+import 'mootools';
+
+ReactDOM.render(<App />, document.getElementById('root'));

packages/webcomponent/tsconfig.json

@@ -0,0 +1,16 @@
+{
+  "compilerOptions": {
+    "outDir": "./lib/",
+    "sourceMap": true,
+    "noImplicitAny": false,
+    "types": ["node"],
+    "moduleResolution": "node",
+    "module": "es6",
+    "target": "es6",
+    "jsx": "react",
+    "allowJs": true,
+    "esModuleInterop": true
+  },
+  "include": ["./src/**/*"],
+  "exclude": ["node_modules"]
+}

packages/webcomponent/webpack.common.js

@@ -0,0 +1,40 @@
+const path = require('path');
+const HtmlWebpackPlugin = require('html-webpack-plugin');
+const { CleanWebpackPlugin } = require('clean-webpack-plugin');
+
+/** @type {import('webpack').Configuration} */
+module.exports = {
+    entry: './src/index.tsx',
+    output: {
+        path: path.resolve(__dirname, 'lib'),
+        filename: 'webcomponent.js',
+        publicPath: '/',
+    },
+    module: {
+        rules: [
+            {
+                use: 'babel-loader',
+                test: /.(js|jsx)$/,
+                exclude: /node_modules/,
+            },
+            {
+                use: 'ts-loader',
+                test: /\.(ts|tsx)$/,
+                exclude: /node_modules/,
+            },
+            {
+                type: 'asset',
+                test: /\.(png|svg|jpg|jpeg|gif)$/i,
+            },
+        ],
+    },
+    resolve: {
+        extensions: ['.ts', '.tsx', '.js', '.jsx', '.json'],
+    },
+    plugins: [
+        new CleanWebpackPlugin(),
+        new HtmlWebpackPlugin({
+            template: './public/index.html',
+        }),
+    ],
+};

packages/webcomponent/webpack.dev.js

@@ -0,0 +1,20 @@
+const path = require('path');
+const { HotModuleReplacementPlugin } = require('webpack');
+const { merge } = require('webpack-merge');
+const common = require('./webpack.common');
+
+/** @type {import('webpack').Configuration} */
+const devConfig = {
+    mode: 'development',
+    devServer: {
+        contentBase: path.join(__dirname, 'lib'),
+        compress: true,
+        port: 8080,
+        hot: true,
+    },
+    target: 'web',
+    plugins: [new HotModuleReplacementPlugin()],
+    devtool: 'eval-source-map',
+};
+
+module.exports = merge(common, devConfig);

packages/webcomponent/webpack.prod.js

@@ -0,0 +1,15 @@
+const { merge } = require('webpack-merge');
+const common = require('./webpack.common');
+
+/** @type {import('webpack').Configuration} */
+const prodConfig = {
+    mode: 'production',
+    devtool: 'source-map',
+    optimization: {
+        splitChunks: {
+            chunks: 'all',
+        },
+    },
+};
+
+module.exports = merge(common, prodConfig);