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-export rc-pluggable-widgets-tools/configs/eslint.ts.base.json
  • prettier.config.js - configuration for Prettier. We recommend to just re-export rc-pluggable-widgets-tools/configs/prettier.base.json
  • tsconfig.json - configuration for TypeScript. We recommend to just extend rc-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 rc-pluggable-widgets-tools/configs/webpack.config.dev.js for web and from rc-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.