Pluggable Widgets Tools
About
A toolset to build, test, format, run, release and lint your Pluggable Widgets
How to install
Install via NPM using npm install rc-pluggable-widgets-tools
(use node.js version >= 12). When installing via NPM v7.x.x, use npm install rc-pluggable-widgets-tools --legacy-peer-deps
.
Even better is creating your widget using Pluggable Widgets Generator which 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 widget -
start: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 widget -
build:web
Build your Web widget -
build:native
Build your Native widget -
release:web
Create a release build of your Web widget -
release:native
Create a release build of your Native widget -
lint
Lint your project using ESLint and Prettier -
lint:fix
Fix lint problems/warning of ESLint and Prettier -
format
Format your code using Prettier -
test: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": {
"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 definition -
MyWidget.[tj]sx
- widget client componet -
MyWidget.editorPreview.[tj]sx
- (optional) widget preview -
MyWidget.editorConfig.[tj]s
- (optional) widget editor configuration -
comopnents/
-
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-exportrc-pluggable-widgets-tools/configs/eslint.ts.base.json
-
prettier.config.js
- configuration for Prettier. We recommend to just re-exportrc-pluggable-widgets-tools/configs/prettier.base.json
-
tsconfig.json
- configuration for TypeScript. We recommend to just extendrc-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 fromrc-pluggable-widgets-tools/configs/webpack.config.dev.js
for web and fromrc-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
andconfig.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.