[WTF-1751] Improve Widget Generator DevX by introducing npx command line (#76)

## What is the purpose of this PR?

This PR introduces a npx command line to quickly scaffold a widget
without the need to install Yeoman Generator and the
@medix/generator-widget package.

Currently, to generate a widget you need to first install the `yeoman`
package globally together with the `@medix/widget-generator`.

With this change you can just call the @medix/widget-generator package
directly from the command line using npx.
Example:

`npx @mendix/generator-widget MyWidgetName`

Author: jeffersonRibeiro

README.md

@@ -16,7 +16,13 @@ A toolset to build, test, format, run, release and lint Mendix Pluggable Widgets
 
 ## Generator widget
 
-Yeoman scaffolding tool to let you quickly create a Mendix Pluggable Widget.
+Scaffolding tool to let you quickly create a Mendix Pluggable Widget.
+
+#### Note
+
+-   If you are running the generator through multiple operating systems (e.g. running a virtualized OS with Parallels on MacOS or any other virtualization software), make sure you have the right privileges and use the same OS for generation and file manipulation.
+
+-   If you want to test locally your changes to the Generator Widget, simply link the package running `npm link` inside the `packages/generator-widget/` folder and then you will be able to run `yo widget SomeWidgetName`
 
 [Source](./packages/generator-widget/) | [NPM Package](https://www.npmjs.com/package/@mendix/generator-widget)
 

packages/generator-widget/CHANGELOG.md

@@ -6,6 +6,10 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 
 ## [Unreleased]
 
+### Changed
+
+-   We introduced an easier way to scaffold a pluggable widget using an npx command without the need to install Yeoman Generator and the @mendix/generator-widget package.
+
 ## [10.5.0] - 2023-12-01
 
 ### Changed

packages/generator-widget/README.md

@@ -1,4 +1,4 @@
-# Pluggable Widgets Generator
+# Mendix Pluggable Widgets Generator
 
 ![npm version](https://badge.fury.io/js/%40mendix%2Fgenerator-widget.svg)
 ![Mendix 8](https://img.shields.io/badge/mendix-8.0.0-brightgreen.svg)
@@ -7,39 +7,26 @@
 ![GitHub release](https://img.shields.io/github/release/mendix/widgets-tools)
 ![GitHub issues](https://img.shields.io/github/issues/mendix/widgets-tools)
 
-> [Yeoman](http://yeoman.io) generator for Mendix Pluggable Widgets.
-
 ## About
 
-This generator uses the Yeoman scaffolding tool to let you quickly create a [Mendix Pluggable Widget](https://docs.mendix.com/howto/extensibility/pluggable-widgets).
+The Mendix Pluggable Widget Generator is a scaffolding tool to let you quickly create a [Mendix Pluggable Widget](https://docs.mendix.com/howto/extensibility/pluggable-widgets).
 
 ## Installation
 
-1. Install [node.js](https://nodejs.org/) (version >= 12).
-1. Install [Yeoman](http://yeoman.io):
-
-    ```bash
-    npm install -g yo
-    ```
-
-1. Install Pluggable Widgets Generator:
-
-    ```bash
-    npm install -g @mendix/generator-widget
-    ```
+1. Install [node.js](https://nodejs.org/) (version >= 16).
 
 ## Scaffold a widget project
 
 1. Generate your new project inside an empty folder:
 
     ```bash
-    yo @mendix/widget
+    npx @mendix/generator-widget
     ```
 
     or automatically create the folder using:
 
     ```bash
-    yo @mendix/widget MyWidgetName
+    npx @mendix/generator-widget MyWidgetName
     ```
 
     Note that `MyWidgetName` can consist of space characters as well.
@@ -113,10 +100,6 @@ npm run release
     npm start
     ```
 
--   If you are running the generator through multiple operating systems (e.g. running a virtualized OS with Parallels on MacOS or any other virtualization software), make sure you have the right privileges and use the same OS for generation and file manipulation.
-
--   If you want to test locally your changes to the Generator Widget, simply link the package running `npm link` inside the `packages/generator-widget/` folder and then you will be able to run `yo widget SomeWidgetName`
-
 ## Issues
 
 Issues can be reported on [Github](https://github.com/mendix/widgets-tools/issues).

packages/generator-widget/bin.js

@@ -0,0 +1,14 @@
+#!/usr/bin/env node
+
+const { readFileSync } = require("fs");
+var { join } = require("path");
+const { execSync } = require("child_process");
+const chalk = require("chalk");
+
+const packageJson = readFileSync(join(__dirname, "package.json"));
+const version = JSON.parse(packageJson).version;
+const args = process.argv.slice(2);
+
+console.log(chalk.bold.blueBright("Running widget generator..."));
+execSync(`npm install -g yo @mendix/generator-widget@${version}`);
+execSync(`yo @mendix/widget@${version} ${args.join(" ")}`, { stdio: "inherit" });

packages/generator-widget/generators/app/lib/text.js

@@ -19,7 +19,7 @@ module.exports = {
     `,
 
     DIR_NOT_EMPTY_ERROR: chalk.bold.red(
-        "The directory you are trying to use is not empty, please open the generator in an empty folder or type yo @mendix/widget WidgetName\n"
+        "The directory you are trying to use is not empty, please open the generator in an empty folder or type npx @mendix/generator-widget WidgetName\n"
     ),
     INSTALL_FINISH_MSG:
         "File configuration done, now running " + chalk.blueBright("npm install") + " to install dependencies",