chore(gene-tools): update setupNodeEvents configuration (#43)

Author: kopach

.github/workflows/npm-publish.yml

@@ -1,4 +1,5 @@
 name: Publish to NPM on GH Release Publish
+run-name: Publish to NPM ${{ github.event.inputs.version || github.event.release.tag_name }}
 
 on:
   workflow_dispatch:

package.json

@@ -34,7 +34,6 @@
     "@storybook/addon-actions": "6.5.16",
     "@storybook/builder-webpack5": "6.5.4",
     "@storybook/core-server": "6.5.16",
-    "@storybook/manager-webpack5": "6.5.4",
     "@tanstack/react-query": "5.55.4",
     "chalk": "2.4.2",
     "classnames": "2.5.1",
@@ -96,6 +95,7 @@
     "@babel/runtime": "7.16.7",
     "@badeball/cypress-cucumber-preprocessor": "13.0.2",
     "@bahmutov/cypress-esbuild-preprocessor": "2.1.5",
+    "@cypress/webpack-preprocessor": "6.0.2",
     "@next/bundle-analyzer": "12.3.4",
     "@nrwl/cypress": "15.8.9",
     "@nrwl/jest": "15.8.9",
@@ -175,9 +175,11 @@
     "tailwindcss": "3.4.14",
     "tailwindcss-animate": "1.0.7",
     "ts-jest": "29.0.5",
+    "ts-loader": "9.5.1",
     "ts-node": "10.9.1",
     "tsconfig-paths-webpack-plugin": "3.5.1",
     "typescript": "4.7.4",
+    "webpack": "5.74.0",
     "zod": "3.22.3",
     "zod-to-ts": "1.2.0"
   },

packages/gene-tools/src/generators/bff-app-generator/files/e2e/cypress.config.ts__tmpl__

@@ -1,6 +1,6 @@
 import { defineConfig } from 'cypress';
 import {nxE2EPreset} from '@nrwl/cypress/plugins/cypress-preset';
-import * as setupNodeEvents from './src/plugins/index';
+import {setupNodeEvents} from './src/plugins';
 
 export default defineConfig({
   e2e: {

packages/gene-tools/src/generators/bff-app-generator/files/e2e/src/plugins/index.js__tmpl__

@@ -1,17 +1,41 @@
+const webpack = require('@cypress/webpack-preprocessor');
 const {
   addCucumberPreprocessorPlugin,
 } = require('@badeball/cypress-cucumber-preprocessor');
-const {
-  preprocessor,
-} = require('@badeball/cypress-cucumber-preprocessor/browserify');
 
-module.exports = async (on, config) => {
+export async function setupNodeEvents(on, config) {
+  // This is required for the preprocessor to be able to generate JSON reports after each run, and more,
   await addCucumberPreprocessorPlugin(on, config);
 
   on(
     'file:preprocessor',
-    preprocessor(config, {
-      typescript: require.resolve('typescript'),
+    webpack({
+      webpackOptions: {
+        resolve: {
+          extensions: ['.ts', '.js'],
+        },
+        module: {
+          rules: [
+            {
+              test: /\.feature$/,
+              use: [
+                {
+                  loader: '@badeball/cypress-cucumber-preprocessor/webpack',
+                  options: config,
+                },
+              ],
+            },
+            {
+              test: /\.tsx?$/,
+              exclude: /node_modules/,
+              loader: 'ts-loader',
+              options: {
+                transpileOnly: true,
+              },
+            },
+          ],
+        },
+      },
     })
   );
 
@@ -25,5 +49,6 @@ module.exports = async (on, config) => {
     }
   });
 
+  // Make sure to return the config object as it might have been modified by the plugin.
   return config;
-};
+}

packages/gene-tools/src/generators/core-module-generator/files/e2e/cypress.config.ts__tmpl__

@@ -1,6 +1,6 @@
 import { defineConfig } from 'cypress';
 import {nxE2EPreset} from '@nrwl/cypress/plugins/cypress-preset';
-import * as setupNodeEvents from './src/plugins/index';
+import {setupNodeEvents} from './src/plugins';
 
 export default defineConfig({
   e2e: {

packages/gene-tools/src/generators/core-module-generator/files/e2e/src/plugins/index.js__tmpl__

@@ -1,17 +1,41 @@
+const webpack = require('@cypress/webpack-preprocessor');
 const {
   addCucumberPreprocessorPlugin,
 } = require('@badeball/cypress-cucumber-preprocessor');
-const {
-  preprocessor,
-} = require('@badeball/cypress-cucumber-preprocessor/browserify');
 
-module.exports = async (on, config) => {
+export async function setupNodeEvents(on, config) {
+  // This is required for the preprocessor to be able to generate JSON reports after each run, and more,
   await addCucumberPreprocessorPlugin(on, config);
 
   on(
     'file:preprocessor',
-    preprocessor(config, {
-      typescript: require.resolve('typescript'),
+    webpack({
+      webpackOptions: {
+        resolve: {
+          extensions: ['.ts', '.js'],
+        },
+        module: {
+          rules: [
+            {
+              test: /\.feature$/,
+              use: [
+                {
+                  loader: '@badeball/cypress-cucumber-preprocessor/webpack',
+                  options: config,
+                },
+              ],
+            },
+            {
+              test: /\.tsx?$/,
+              exclude: /node_modules/,
+              loader: 'ts-loader',
+              options: {
+                transpileOnly: true,
+              },
+            },
+          ],
+        },
+      },
     })
   );
 
@@ -25,5 +49,6 @@ module.exports = async (on, config) => {
     }
   });
 
+  // Make sure to return the config object as it might have been modified by the plugin.
   return config;
-};
+}

packages/gene-tools/src/generators/module-generator/files/e2e-with-library/cypress.config.ts__tmpl__

@@ -1,6 +1,6 @@
 import { defineConfig } from 'cypress';
 import {nxE2EPreset} from '@nrwl/cypress/plugins/cypress-preset';
-import * as setupNodeEvents from './src/plugins/index';
+import {setupNodeEvents} from './src/plugins';
 
 export default defineConfig({
   e2e: {

packages/gene-tools/src/generators/module-generator/files/e2e-with-library/src/plugins/index.js__tmpl__

@@ -1,17 +1,41 @@
+const webpack = require('@cypress/webpack-preprocessor');
 const {
   addCucumberPreprocessorPlugin,
 } = require('@badeball/cypress-cucumber-preprocessor');
-const {
-  preprocessor,
-} = require('@badeball/cypress-cucumber-preprocessor/browserify');
 
-module.exports = async (on, config) => {
+export async function setupNodeEvents(on, config) {
+  // This is required for the preprocessor to be able to generate JSON reports after each run, and more,
   await addCucumberPreprocessorPlugin(on, config);
 
   on(
     'file:preprocessor',
-    preprocessor(config, {
-      typescript: require.resolve('typescript'),
+    webpack({
+      webpackOptions: {
+        resolve: {
+          extensions: ['.ts', '.js'],
+        },
+        module: {
+          rules: [
+            {
+              test: /\.feature$/,
+              use: [
+                {
+                  loader: '@badeball/cypress-cucumber-preprocessor/webpack',
+                  options: config,
+                },
+              ],
+            },
+            {
+              test: /\.tsx?$/,
+              exclude: /node_modules/,
+              loader: 'ts-loader',
+              options: {
+                transpileOnly: true,
+              },
+            },
+          ],
+        },
+      },
     })
   );
 
@@ -25,5 +49,6 @@ module.exports = async (on, config) => {
     }
   });
 
+  // Make sure to return the config object as it might have been modified by the plugin.
   return config;
-};
+}

packages/gene-tools/src/generators/nextjs-app-generator/files/e2e/cypress.config.ts__tmpl__

@@ -1,6 +1,6 @@
 import { defineConfig } from 'cypress';
 import {nxE2EPreset} from '@nrwl/cypress/plugins/cypress-preset';
-import * as setupNodeEvents from './src/plugins/index';
+import {setupNodeEvents} from './src/plugins';
 
 export default defineConfig({
   e2e: {

packages/gene-tools/src/generators/nextjs-app-generator/files/e2e/src/plugins/index.js__tmpl__

@@ -1,17 +1,41 @@
+const webpack = require('@cypress/webpack-preprocessor');
 const {
   addCucumberPreprocessorPlugin,
 } = require('@badeball/cypress-cucumber-preprocessor');
-const {
-  preprocessor,
-} = require('@badeball/cypress-cucumber-preprocessor/browserify');
 
-module.exports = async (on, config) => {
+export async function setupNodeEvents(on, config) {
+  // This is required for the preprocessor to be able to generate JSON reports after each run, and more,
   await addCucumberPreprocessorPlugin(on, config);
 
   on(
     'file:preprocessor',
-    preprocessor(config, {
-      typescript: require.resolve('typescript'),
+    webpack({
+      webpackOptions: {
+        resolve: {
+          extensions: ['.ts', '.js'],
+        },
+        module: {
+          rules: [
+            {
+              test: /\.feature$/,
+              use: [
+                {
+                  loader: '@badeball/cypress-cucumber-preprocessor/webpack',
+                  options: config,
+                },
+              ],
+            },
+            {
+              test: /\.tsx?$/,
+              exclude: /node_modules/,
+              loader: 'ts-loader',
+              options: {
+                transpileOnly: true,
+              },
+            },
+          ],
+        },
+      },
     })
   );
 
@@ -25,5 +49,6 @@ module.exports = async (on, config) => {
     }
   });
 
+  // Make sure to return the config object as it might have been modified by the plugin.
   return config;
-};
+}