@cley_faye/boilerplate 3.1.1 → 3.3.0

package/README.md

@@ -19,6 +19,8 @@ required, and for what. It's up to the calling project to have the proper depend
 
 For webapp building:
 
+- resolve-typescript-plugin (due to the way webpack plugins are handled, this is mandatory for dev
+  install)
 - babel-loader
 - eslint-webpack-plugin
 - @babel/core
@@ -27,14 +29,14 @@ For webapp building:
 - babel-plugin-transform-define
 - core-js
 - @babel/plugin-transform-runtime
-- @keeex/grunt-contrib-imagemin
 - grunt-contrib-pug
 - grunt-contrib-copy
 - grunt-contrib-watch
 - grunt-sass
-- node-sass
+- sass
 - grunt-webpack
 - grunt
+- ts-loader (for supporting TypeScript import in webpack/babel)
 
 For express:
 
@@ -155,6 +157,7 @@ The webpack options support a host of properties:
 - babelPlugins: array of plugins for Babel
 - mode: The build mode. "development", "production" or "none"
 - defines: a record of value to define using Babel transform-define
+- resolve: a custom "resolve" object for webpack config
 
 ### SASS
 All `.sass` and `.scss` files in the webapp directory will be processed as `.css` files in the
@@ -200,7 +203,7 @@ module.exports = grunt => {
     )
   );
   grunt.initConfig(baseGruntConfig);
-  grunt.register(
+  grunt.registerTask(
     "myWebApp",
     "Build the webapp",
     requiredTasks
@@ -426,8 +429,10 @@ Typical use of TypeScript implies converting `.ts` file to `.js`.
 For a React app using webpack, there's two approach: either instruct webpack to accept `.ts` files
 (for example, using `ts-loader`) or have your entry point be a `.js` file that imports the generated
 output from TypeScript.
-Either way, watch mode will be capable of detecting change in the source material, as long as the
-TypeScript compiler is also running.
+If you reference the output of the TypeScript compiler, you can keep it updated using `npx tsc -w`.
+
+Using `ts-loader` can be done automatically by setting the `typescript` property in the webpack
+configuration to `true`.
 
 For Express app, there is no particular things to take care, except that if you use a facility like
 `nodemon` you have to watch the TypeScript output instead of the actual source files.

package/lib/grunt/args.d.ts

@@ -66,6 +66,10 @@ export declare type OptionDefinition = OptionDefinitionString | OptionDefinition
  * Expected options from command line
  */
 export declare type ConfigDefinition = Record<string, OptionDefinition>;
+/**
+ * Display help to the user
+ */
+export declare const displayHelp: (configDef: ConfigDefinition) => void;
 /**
  * Construct the full config object from command line values.
  *

package/lib/grunt/args.js

@@ -26,7 +26,7 @@
  */
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.getOptionsFromGruntCLI = exports.OptType = void 0;
+exports.getOptionsFromGruntCLI = exports.displayHelp = exports.OptType = void 0;
 const util_js_1 = require("../util.js");
 // eslint-disable-next-line no-shadow
 var OptType;
@@ -125,6 +125,7 @@ const displayHelp = (configDef) => {
     outputHelp("Accepted command line arguments:");
     Object.keys(configDef).forEach(configKey => displayHelpForConfigKey(configKey, configDef[configKey]));
 };
+exports.displayHelp = displayHelp;
 /**
  * Construct the full config object from command line values.
  *
@@ -132,7 +133,7 @@ const displayHelp = (configDef) => {
  */
 const getOptionsFromGruntCLI = (optionProvider, configDef) => {
     if (getFromOptionProvider("help", optionProvider) === true) {
-        displayHelp(configDef);
+        (0, exports.displayHelp)(configDef);
         return null;
     }
     const result = {};

package/lib/grunt/reactapp/image.d.ts

@@ -18,10 +18,10 @@ export interface ImageOptions extends BaseOptions {
  * Options for the image task configuration.
  *
  * @param [imageOptions.options]
- * Options to pass to grunt-contrib-imagemin.
+ * Options to pass to @cley_faye/imagemin-lite.
  *
  * @param [imageOptions.sourcePath]
- * Path where the pug templates can be found. Subdirectories will be searched.
+ * Path where the source images can be found. Subdirectories will be searched.
  * Default to "webres/<targetName>"
  *
  * @param [imageOptions.outputPath]

package/lib/grunt/reactapp/image.js

@@ -47,10 +47,10 @@ const handledExtensions = [
  * Options for the image task configuration.
  *
  * @param [imageOptions.options]
- * Options to pass to grunt-contrib-imagemin.
+ * Options to pass to @cley_faye/imagemin-lite.
  *
  * @param [imageOptions.sourcePath]
- * Path where the pug templates can be found. Subdirectories will be searched.
+ * Path where the source images can be found. Subdirectories will be searched.
  * Default to "webres/<targetName>"
  *
  * @param [imageOptions.outputPath]
@@ -63,6 +63,7 @@ const handledExtensions = [
  */
 const handle = (gruntConfig, targetName, imageOptions) => {
     const handledFiles = handledExtensions.map(ext => `**/*${ext}`);
+    // TODO use @cley_faye/imagemin-lite once it exists
     const newImageTask = {
         options: imageOptions.options,
         files: [
@@ -75,7 +76,7 @@ const handle = (gruntConfig, targetName, imageOptions) => {
         ],
     };
     const requiredTasks = [
-        (0, util_js_1.insertTask)(gruntConfig, "imagemin", targetName, newImageTask),
+        (0, util_js_1.insertTask)(gruntConfig, "copy", `${targetName}_image`, newImageTask),
     ];
     const watchTasks = [
         {

package/lib/grunt/reactapp/webpack.d.ts

@@ -9,6 +9,7 @@ export interface WebpackLoadersOptions {
         targets?: string;
         plugins?: Array<Record<string, unknown>>;
     };
+    typescript?: boolean;
 }
 /** Build the default webpack loaders list.
  *
@@ -30,6 +31,9 @@ export interface WebpackLoadersOptions {
  *
  * @param [options.babel.plugins]
  * Plugins to add to babel
+ *
+ * @param [options.typescript]
+ * Add support for importing .ts and .tsx files
  */
 export declare const webpackLoadersDefault: (options: WebpackLoadersOptions) => Array<Record<string, unknown>>;
 export interface WebpackOptions extends BaseOptions {
@@ -45,6 +49,8 @@ export interface WebpackOptions extends BaseOptions {
     plugins?: Array<Record<string, unknown>>;
     babelPlugins?: Array<Record<string, unknown>>;
     defines?: Record<string, string>;
+    resolve?: Record<string, unknown>;
+    typescript?: boolean;
 }
 /** Add a webpack task for the reactApp recipe
  *
@@ -98,6 +104,9 @@ export interface WebpackOptions extends BaseOptions {
  * Build mode. "development", "production" or "none".
  * Defaults to "development"
  *
+ * @param [webpackOptions.typescript]
+ * Allow loading typescript source for webpack/babel.
+ *
  * @return
  * List of tasks added.
  * This function add "webpack:<targetName>".

package/lib/grunt/reactapp/webpack.js

@@ -33,6 +33,7 @@ exports.handle = exports.webpackLoadersDefault = void 0;
 const path_1 = require("path");
 const util_js_1 = require("./util.js");
 const eslint_webpack_plugin_1 = __importDefault(require("eslint-webpack-plugin"));
+const resolve_typescript_plugin_1 = __importDefault(require("resolve-typescript-plugin"));
 const defaultCoreJS = 3;
 const eslintPlugin = () => new eslint_webpack_plugin_1.default({ cache: true });
 const defaultLoadersDefine = (options) => [
@@ -78,27 +79,43 @@ const defaultLoadersReact = (options) => [
  *
  * @param [options.babel.plugins]
  * Plugins to add to babel
+ *
+ * @param [options.typescript]
+ * Add support for importing .ts and .tsx files
  */
-const webpackLoadersDefault = (options) => [
-    {
-        test: /.js$/u,
-        exclude: /node_modules/u,
-        use: {
-            loader: "babel-loader",
-            options: {
-                cacheDirectory: true,
-                presets: [
-                    defaultLoadersPresetEnv(options),
-                    defaultLoadersReact(options),
-                ],
-                plugins: [
-                    defaultLoadersDefine(options),
-                    ...(options.babel?.plugins ?? []),
-                ],
+const webpackLoadersDefault = (options) => {
+    const allFilesCheck = options.typescript
+        ? /.(?:js|ts|tsx)$/u
+        : /.js$/u;
+    const res = [
+        {
+            test: allFilesCheck,
+            exclude: /node_modules/u,
+            use: {
+                loader: "babel-loader",
+                options: {
+                    cacheDirectory: true,
+                    presets: [
+                        defaultLoadersPresetEnv(options),
+                        defaultLoadersReact(options),
+                    ],
+                    plugins: [
+                        defaultLoadersDefine(options),
+                        ...(options.babel?.plugins ?? []),
+                    ],
+                },
             },
         },
-    },
-];
+    ];
+    if (options.typescript) {
+        res.push({
+            test: /.(?:ts|tsx)$/u,
+            use: "ts-loader",
+            exclude: /node_modules/u,
+        });
+    }
+    return res;
+};
 exports.webpackLoadersDefault = webpackLoadersDefault;
 const computeWebpackOutput = (webpackOptions, targetName) => webpackOptions.output ?? {
     path: (0, path_1.resolve)("dist", targetName, "js"),
@@ -143,6 +160,16 @@ const registerTasks = (gruntConfig, targetName, webpackConfig) => {
         (0, util_js_1.insertTask)(gruntConfig, "webpack", targetName, webpackConfig),
     ];
 };
+const computeWebpackResolve = (webpackOptions) => {
+    const res = { ...webpackOptions.resolve };
+    if (webpackOptions.typescript) {
+        if (res.plugins === undefined) {
+            res.plugins = [];
+        }
+        res.plugins.push(new resolve_typescript_plugin_1.default());
+    }
+    return res;
+};
 /** Add a webpack task for the reactApp recipe
  *
  * @param gruntConfig
@@ -195,6 +222,9 @@ const registerTasks = (gruntConfig, targetName, webpackConfig) => {
  * Build mode. "development", "production" or "none".
  * Defaults to "development"
  *
+ * @param [webpackOptions.typescript]
+ * Allow loading typescript source for webpack/babel.
+ *
  * @return
  * List of tasks added.
  * This function add "webpack:<targetName>".
@@ -209,7 +239,9 @@ const handle = (gruntConfig, targetName, webpackOptions) => {
             development: webpackOptions.mode === "development",
             defines: webpackOptions.defines,
             babel: { plugins: webpackOptions.babelPlugins },
+            typescript: webpackOptions.typescript,
         });
+    const resolve = computeWebpackResolve(webpackOptions);
     const webpackConfig = {
         mode: webpackOptions.mode,
         devtool: webpackOptions.mode === "development" ? "eval-source-map" : false,
@@ -221,6 +253,7 @@ const handle = (gruntConfig, targetName, webpackOptions) => {
             eslintPlugin(),
             ...webpackOptions.plugins ?? [],
         ],
+        resolve,
     };
     // Special case: I'm not sure I can move options in the task-specific part of
     // the configuration, so I add it at the toplevel of the "webpack" task.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cley_faye/boilerplate",
-  "version": "3.1.1",
+  "version": "3.3.0",
   "description": "Boilerplate code generator for generic projects",
   "repository": {
     "type": "git",
@@ -41,7 +41,6 @@
     "@babel/plugin-transform-runtime": "7.x",
     "@babel/preset-env": "7.x",
     "@babel/preset-react": "7.x",
-    "@keeex/grunt-contrib-imagemin": "4.x",
     "babel-loader": "8.x",
     "babel-plugin-transform-define": "2.x",
     "core-js": "3.x",
@@ -54,7 +53,9 @@
     "grunt-contrib-watch": "1.x",
     "grunt-sass": "3.x",
     "grunt-webpack": "5.x",
+    "resolve-typescript-plugin": "^1.1.1",
     "sass": "1.x",
+    "ts-loader": "^9.2.6",
     "winston": "3.x"
   },
   "peerDependenciesMeta": {
@@ -79,9 +80,6 @@
     "grunt-contrib-pug": {
       "optional": true
     },
-    "grunt-contrib-imagemin": {
-      "optional": true
-    },
     "@babel/plugin-transform-runtime": {
       "optional": true
     },