@cley_faye/boilerplate 3.2.2 → 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
@@ -34,6 +36,7 @@ For webapp building:
 - sass
 - grunt-webpack
 - grunt
+- ts-loader (for supporting TypeScript import in webpack/babel)
 
 For express:
 
@@ -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/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,7 +49,8 @@ export interface WebpackOptions extends BaseOptions {
     plugins?: Array<Record<string, unknown>>;
     babelPlugins?: Array<Record<string, unknown>>;
     defines?: Record<string, string>;
-    resolve?: unknown;
+    resolve?: Record<string, unknown>;
+    typescript?: boolean;
 }
 /** Add a webpack task for the reactApp recipe
  *
@@ -99,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,7 +253,7 @@ const handle = (gruntConfig, targetName, webpackOptions) => {
             eslintPlugin(),
             ...webpackOptions.plugins ?? [],
         ],
-        resolve: webpackOptions.resolve,
+        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.2.2",
+  "version": "3.3.0",
   "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": {