@cley_faye/boilerplate 3.2.0 → 3.3.1

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
@@ -31,9 +33,10 @@ For webapp building:
 - 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:
 
@@ -154,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
@@ -199,7 +203,7 @@ module.exports = grunt => {
     )
   );
   grunt.initConfig(baseGruntConfig);
-  grunt.register(
+  grunt.registerTask(
     "myWebApp",
     "Build the webapp",
     requiredTasks
@@ -425,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/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/lib/grunt/reactapp.js

@@ -103,9 +103,6 @@ const createWatchTasks = (gruntConfig, mergedResults, watchMode) => {
     if (watchMode === false) {
         return;
     }
-    if (mergedResults.watchTasks.length > 0) {
-        (0, util_js_2.insertTask)(gruntConfig, "watch", "options", getWatcherOptions(watchMode));
-    }
     mergedResults.watchTasks.forEach(watchTask => {
         (0, util_js_2.insertTask)(gruntConfig, "watch", getWatchTaskName(watchTask), {
             options: getWatcherOptions(watchMode),

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cley_faye/boilerplate",
-  "version": "3.2.0",
+  "version": "3.3.1",
   "description": "Boilerplate code generator for generic projects",
   "repository": {
     "type": "git",
@@ -53,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": {