Migration start of the mindplot module

This commit is contained in:
Ezequiel-Vega 2021-09-07 17:31:46 -03:00
parent 3ca7840dcf
commit cbc461e760
27 changed files with 641 additions and 207 deletions

View File

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

View File

@ -20,8 +20,8 @@ const core = Core();
const web2D = require('@wismapping/web2d'); const web2D = require('@wismapping/web2d');
const web2d = 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 Topic = require('./Topic').default;
const ConnectionLine = new Class({ const ConnectionLine = new Class({

View File

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

View File

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

View File

@ -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,
};

View File

@ -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,
};

View File

@ -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,
};

View File

@ -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,
};

View File

@ -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,
};

View File

@ -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,
};

View File

@ -3,59 +3,29 @@ module.exports = mindplot; //eslint-disable-line
function mindplot() { function mindplot() {
// Commands // 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 // 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 { 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,
},
}; };
} }

View File

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

View File

@ -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'
);
});

View File

@ -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()],
};

View File

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

0
packages/webcomponent/.gitignore vendored Normal file
View File

View File

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

View File

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

View File

@ -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"
}
}

View File

@ -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>

View File

@ -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;

View File

@ -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'));

View File

@ -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"]
}

View File

@ -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',
}),
],
};

View File

@ -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);

View File

@ -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);