Pluggable Widgets Tools
About
A toolset to build, test, format, run, release and lint your Pluggable Widgets
How to install
Install from npm using npm install @mendix/pluggable-widgets-tools
. Or better create your widget using Pluggable Widgets Generator that scaffolds the correct project setup.
How to use
In your package.json
scripts, use the following command with the desired task: pluggable-widgets-tools task
Available tasks
start:web
Build and watch the changes of your Web widgetstart:server
Build and watch the changes of your Web widget. Start a web server, that reloads the widget code without the need to re-run the Mendix project. Accepts option --open
to automatically open your browser.start:native
Build and watch the changes of your Native widgetbuild:web
Build your Web widgetbuild:native
Build your Native widgetrelease:web
Create a release build of your Web widgetrelease:native
Create a release build of your Native widgetlint
Lint your project using ESLint and Prettierlint:fix
Fix lint problems/warning of ESLint and Prettierformat
Format your code using Prettiertest:unit:web
Run unit tests for your Web widget. Accepts option --u
to update snapshots, --no-cache
to remove existing caches, --ci
assumes use of a CI environment, --coverage
to support coverage test.test:unit:native
Run unit tests for your Native widget. Accepts option --u
to update snapshots, --no-cache
to remove existing caches, --ci
assumes use of a CI environment, --coverage
to support coverage test.test:e2e
Execute end-to-end tests in your Web widget
Example
"name": "MyWidget",
"widgetName": "com.company.widgets.MyWidget",
"version": "1.0.0",
"config": {
"widgetPath": "../MxTestProject/widgets",
"projectPath": "../MxTestProject/",
"mendixHost": "http://localhost:8080",
"developmentPort": "3000"
},
"scripts": {
"build": "pluggable-widgets-tools build:web",
"lint": "pluggable-widgets-tools lint",
"lint:fix": "pluggable-widgets-tools lint:fix",
"test:unit": "pluggable-widgets-tools test:unit --coverage"
}
Project layout
src/
MyWidget.xml
- widget definitionMyWidget.[tj]sx
- widget client componetMyWidget.editorPreview.[tj]sx
- (optional) widget previewMyWidget.editorConfig.[tj]s
- (optional) widget editor configurationcomopnents/
MyComponent.[tj]s
- code of widget's components__tests__/
MyComponent.spec.[tj]s
- tests for widget's components
.eslint.js
- configuration for ESLint. We recoommend to just re-export @mendix/pluggable-widgets-tools/configs/eslint.ts.base.json
prettier.config.js
- configuration for Prettier. We recommend to just re-export @mendix/pluggable-widgets-tools/configs/prettier.base.json
tsconfig.json
- configuration for TypeScript. We recommend to just extend @mendix/pluggable-widgets-tools/configs/tsconfig.base.json
webpack.config.dev.js
- (optional) custom configurations for webpack bundler (both for client and preview components) when running in development mode. The standard confiugration can be imported from @mendix/pluggable-widgets-tools/configs/webpack.config.dev.js
for web and from @mendix/pluggable-widgets-tools/configs/webpack.native.config.js
for native apps.webpack.config.prod.js
- (optional) custom configuration for webpack bundler in release mode.package.json
- widget package definitions, inluding its dependencies, scripts, and basic configuration (widgetName
and config.projectPath
in particular)
Migrating from 8.9 to 8.10
React-hot-loader is not anymore needed to provide auto refresh functionality. That is, you can remove its usage from the code: your main entry point can simply be export default MyWidget;
instead of export default hot(MyWidget);
.
If you do not change your widget, hot will be replaced with a noop function that has no effect.