create-sitecore-jss 22.2.0-canary.9 → 22.3.0-canary.2

package/dist/bin.js

@@ -35,7 +35,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.main = exports.promptDestination = exports.getDestinations = exports.parseArgs = void 0;
+exports.main = exports.promptDestination = exports.getDestination = exports.parseArgs = void 0;
 const fs_1 = __importDefault(require("fs"));
 const path_1 = __importStar(require("path"));
 const chalk_1 = __importDefault(require("chalk"));
@@ -43,7 +43,6 @@ const inquirer_1 = __importDefault(require("inquirer"));
 const init_runner_1 = require("./init-runner");
 const minimist_1 = __importDefault(require("minimist"));
 const common_1 = require("./common");
-const helpers_1 = require("./common/utils/helpers");
 const parseArgs = () => {
     // parse any command line arguments passed into `init sitecore-jss`
     // to pass to the generator prompts and skip them.
@@ -71,7 +70,7 @@ const parseArgs = () => {
     return args;
 };
 exports.parseArgs = parseArgs;
-const getDestinations = (args, templates) => __awaiter(void 0, void 0, void 0, function* () {
+const getDestination = (args, templates) => __awaiter(void 0, void 0, void 0, function* () {
     if (templates.length === 0) {
         throw new Error('Unable to get destinations, provided templates are empty');
     }
@@ -83,30 +82,9 @@ const getDestinations = (args, templates) => __awaiter(void 0, void 0, void 0, f
             ? defaultBaseDestination
             : yield (0, exports.promptDestination)('Where would you like your new app created?', defaultBaseDestination);
     }
-    // work with node-proxy destination if needed
-    const proxyApp = templates.find((template) => template.match(helpers_1.proxyAppMatcher));
-    if (proxyApp) {
-        // put the proxy alongside main app by default
-        const defaultProxyDestination = (0, helpers_1.getDefaultProxyDestination)(destination, proxyApp);
-        let proxyAppDestination = args.proxyAppDestination;
-        if (!proxyAppDestination) {
-            proxyAppDestination = args.yes
-                ? defaultProxyDestination
-                : yield (0, exports.promptDestination)('Where would you like your proxy app created?', defaultProxyDestination);
-        }
-        while (path_1.default.resolve(proxyAppDestination) === path_1.default.resolve(destination)) {
-            proxyAppDestination = yield (0, exports.promptDestination)('Proxy app and base app cannot be located in the same folder. Please input another path for proxy', defaultProxyDestination);
-        }
-        return {
-            destination,
-            proxyAppDestination,
-        };
-    }
-    return {
-        destination,
-    };
+    return destination;
 });
-exports.getDestinations = getDestinations;
+exports.getDestination = getDestination;
 const promptDestination = (prompt, defaultDestination) => __awaiter(void 0, void 0, void 0, function* () {
     return (yield inquirer_1.default.prompt({
         type: 'input',
@@ -153,24 +131,20 @@ const main = (args) => __awaiter(void 0, void 0, void 0, function* () {
         });
         templates.push(answer.template);
     }
-    const destinations = yield (0, exports.getDestinations)(args, templates);
-    for (const destination of [destinations.destination, destinations.proxyAppDestination]) {
-        if (!destination)
-            continue;
-        if (!args.force && fs_1.default.existsSync(destination) && fs_1.default.readdirSync(destination).length > 0) {
-            const answer = yield inquirer_1.default.prompt({
-                type: 'confirm',
-                name: 'continue',
-                message: `Directory '${destination}' not empty. Are you sure you want to continue?`,
-            });
-            if (!answer.continue) {
-                process.exit();
-            }
-        }
-        else {
-            args.force = true;
+    const destination = yield (0, exports.getDestination)(args, templates);
+    if (!args.force && fs_1.default.existsSync(destination) && fs_1.default.readdirSync(destination).length > 0) {
+        const answer = yield inquirer_1.default.prompt({
+            type: 'confirm',
+            name: 'continue',
+            message: `Directory '${destination}' not empty. Are you sure you want to continue?`,
+        });
+        if (!answer.continue) {
+            process.exit();
         }
     }
+    else {
+        args.force = true;
+    }
     if (!args.yes) {
         if (args.prePushHook === null) {
             const answer = yield inquirer_1.default.prompt({
@@ -188,7 +162,7 @@ const main = (args) => __awaiter(void 0, void 0, void 0, function* () {
         }
     }
     try {
-        yield (0, init_runner_1.initRunner)(templates.slice(), Object.assign(Object.assign(Object.assign({}, args), destinations), { templates }));
+        yield (0, init_runner_1.initRunner)(templates.slice(), Object.assign(Object.assign({}, args), { destination, templates }));
     }
     catch (error) {
         console.log(chalk_1.default.red('An error occurred: ', error));

package/dist/common/processes/next.js

@@ -20,6 +20,9 @@ const chalk_1 = __importDefault(require("chalk"));
  * @param {string[]} nextStepsArr next steps to be performed after app is created
  */
 const nextSteps = (appNames, nextStepsArr) => __awaiter(void 0, void 0, void 0, function* () {
+    const successMessage = appNames.length > 1
+        ? `JSS applications ${chalk_1.default.green(appNames.join(', '))} are ready!`
+        : `JSS application ${chalk_1.default.green(appNames[0])} is ready!`;
     console.log(chalk_1.default.red('                 -/oyhdmNNNNmdhyo/-                '));
     console.log(chalk_1.default.red('             :sdMMMMMMMMMMMMMMMMMMMMds:            '));
     console.log(chalk_1.default.red('          :yNMMMMMMMMMMMMMMMMMMMMMMMMMMNy:         '));
@@ -51,7 +54,7 @@ const nextSteps = (appNames, nextStepsArr) => __awaiter(void 0, void 0, void 0,
     console.log(chalk_1.default.white('                 / // /\\ \\_\\ \\  '));
     console.log(chalk_1.default.white('                 \\___/___/___/'));
     console.log();
-    console.log(`JSS application(s) ${chalk_1.default.green(appNames.join(', '))} is ready!`);
+    console.log(successMessage);
     console.log();
     console.log(chalk_1.default.yellow('Next steps:'));
     nextStepsArr.forEach((step) => {

package/dist/common/processes/transform.js

@@ -187,11 +187,6 @@ const populateEjsData = (answers, destination) => {
             getPascalCaseName: helpers_1.getPascalCaseName,
             getAppPrefix: helpers_1.getAppPrefix,
         } });
-    // When SPA application and XM Cloud proxy is used we need to calculate relative path between SPA app and proxy to apply that in EJS template
-    // Absolute path can't be used across all the machines
-    if (answers.proxyAppDestination) {
-        ejsData.helper.relativeProxyAppDestination = `${path_1.default.relative(path_1.default.resolve(answers.destination), path_1.default.resolve(answers.proxyAppDestination))}${path_1.sep}`;
-    }
     return ejsData;
 };
 exports.populateEjsData = populateEjsData;
@@ -209,16 +204,11 @@ exports.populateEjsData = populateEjsData;
  */
 const transform = (templatePath, answers, options = {}) => __awaiter(void 0, void 0, void 0, function* () {
     const { isFileForCopy, isFileForSkip, fileForCopyRegExp = FILE_FOR_COPY_REGEXP } = options;
-    let destination = undefined;
-    // allow proxy app to be installed separately alongside base app
-    if (templatePath.match(/.*node-.+-proxy$/g) && answers.proxyAppDestination) {
-        destination = answers.proxyAppDestination;
-    }
-    const destinationPath = path_1.default.resolve(destination || answers.destination);
+    const destinationPath = path_1.default.resolve(answers.destination);
     if (!answers.appPrefix) {
         answers.appPrefix = false;
     }
-    const ejsData = (0, exports.populateEjsData)(answers, destination);
+    const ejsData = (0, exports.populateEjsData)(answers);
     // the templates to be run through ejs render or copied directly
     const files = glob_1.default.sync('**/*', { cwd: templatePath, dot: true, nodir: true });
     for (const file of files) {

package/dist/common/prompts/base.js

@@ -38,19 +38,6 @@ exports.clientAppPrompts = [
             return !answers.appName;
         },
     },
-    {
-        type: 'list',
-        name: 'fetchWith',
-        message: 'How would you like to fetch Layout and Dictionary data?',
-        choices: Object.values(FetchWith),
-        default: exports.DEFAULT_FETCHWITH,
-        when: (answers) => {
-            if (answers.yes && !answers.fetchWith) {
-                answers.fetchWith = exports.DEFAULT_FETCHWITH;
-            }
-            return !answers.fetchWith;
-        },
-    },
 ];
 const missingAddonMsg = (source, missingAddon) => chalk_1.default.yellow(`Warning: ${source} add-on cannot be used without the ${missingAddon} add-on. This may cause unexpected results.`);
 exports.missingAddonMsg = missingAddonMsg;

package/dist/common/prompts/proxy.js

@@ -0,0 +1,35 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.proxyPrompts = exports.FALLBACK_PROXYNAME = void 0;
+const helpers_1 = require("../utils/helpers");
+const path_1 = __importDefault(require("path"));
+exports.FALLBACK_PROXYNAME = 'sitecore-jss-proxy-app';
+/**
+ * Set of CLI prompts for an SXP app
+ */
+exports.proxyPrompts = [
+    {
+        type: 'input',
+        name: 'proxyAppDestination',
+        message: 'Where would you like your proxy app created?',
+        default: (answers) => {
+            // default proxy destination should be under same root as main app
+            return (0, helpers_1.getDefaultProxyDestination)(answers.destination, answers.proxyName || exports.FALLBACK_PROXYNAME);
+        },
+        when: (answers) => {
+            if (answers.yes && !answers.proxyAppDestination) {
+                answers.proxyAppDestination = (0, helpers_1.getDefaultProxyDestination)(answers.destination, answers.proxyName || exports.FALLBACK_PROXYNAME);
+            }
+            return !answers.proxyAppDestination;
+        },
+        validate: (input, answers) => {
+            if (path_1.default.resolve(input) === path_1.default.resolve(answers.destination)) {
+                return 'Paths for main app and proxy cannot match. Please choose another destination';
+            }
+            return true;
+        },
+    },
+];

package/dist/common/prompts/sxp.js

@@ -1,6 +1,7 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.sxpPrompts = void 0;
+const base_1 = require("./base");
 /**
  * Set of CLI prompts for an SXP app
  */
@@ -9,12 +10,25 @@ exports.sxpPrompts = [
         type: 'input',
         name: 'hostName',
         message: 'What is your Sitecore hostname (used if deployed to Sitecore)?',
-        default: (answers) => `${answers.appName}.dev.local`,
+        default: (answers) => `${answers.appName || base_1.DEFAULT_APPNAME}.dev.local`,
         when: (answers) => {
             if (answers.yes && !answers.hostName) {
-                answers.hostName = `${answers.appName}.dev.local`;
+                answers.hostName = `${answers.appName || base_1.DEFAULT_APPNAME}.dev.local`;
             }
             return !answers.hostName;
         },
     },
+    {
+        type: 'list',
+        name: 'fetchWith',
+        message: 'How would you like to fetch Layout and Dictionary data?',
+        choices: Object.values(base_1.FetchWith),
+        default: base_1.DEFAULT_FETCHWITH,
+        when: (answers) => {
+            if (answers.yes && !answers.fetchWith) {
+                answers.fetchWith = base_1.DEFAULT_FETCHWITH;
+            }
+            return !answers.fetchWith;
+        },
+    },
 ];

package/dist/common/utils/helpers.js

@@ -1,4 +1,27 @@
 "use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
 var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
     function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
     return new (P || (P = Promise))(function (resolve, reject) {
@@ -12,10 +35,10 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.removeFile = exports.writeFileToPath = exports.getAppPrefix = exports.getBaseTemplates = exports.getAllTemplates = exports.sortKeys = exports.saveConfiguration = exports.writeJsonFile = exports.openJsonFile = exports.getPascalCaseName = exports.isDevEnvironment = exports.getDefaultProxyDestination = exports.proxyAppMatcher = void 0;
+exports.removeFile = exports.writeFileToPath = exports.getAppPrefix = exports.getBaseTemplates = exports.getAllTemplates = exports.sortKeys = exports.saveConfiguration = exports.writeJsonFile = exports.openJsonFile = exports.getPascalCaseName = exports.isDevEnvironment = exports.getRelativeProxyDestination = exports.getDefaultProxyDestination = exports.proxyAppMatcher = void 0;
 const chalk_1 = __importDefault(require("chalk"));
 const fs_1 = __importDefault(require("fs"));
-const path_1 = __importDefault(require("path"));
+const path_1 = __importStar(require("path"));
 const InitializerFactory_1 = require("../../InitializerFactory");
 // matched for proxy templates
 exports.proxyAppMatcher = /node-headless.+|node-xmcloud.+/g;
@@ -27,6 +50,8 @@ exports.proxyAppMatcher = /node-headless.+|node-xmcloud.+/g;
  */
 const getDefaultProxyDestination = (mainAppDestination, proxyName) => path_1.default.join(mainAppDestination, '..', proxyName);
 exports.getDefaultProxyDestination = getDefaultProxyDestination;
+const getRelativeProxyDestination = (mainDestination, proxyDestination) => `${path_1.default.relative(path_1.default.resolve(mainDestination), path_1.default.resolve(proxyDestination))}${path_1.sep}`;
+exports.getRelativeProxyDestination = getRelativeProxyDestination;
 /**
  * Determines whether you are in a dev environment.
  * It's `true` if you are inside the monorepo

package/dist/init-runner.js

@@ -53,7 +53,7 @@ const initRunner = (initializers, args) => __awaiter(void 0, void 0, void 0, fun
             }
             args.silent || console.log(chalk_1.default.cyan(`Initializing '${init}'...`));
             const response = yield initializer.init(args);
-            // App names can be multiple if the base template requires to setup additional standalone app (e.g. XM Cloud proxy)
+            // We can have multiple appNames if base template requires to setup an additional standalone app (e.g. XM Cloud proxy)
             appNames.add(response.appName);
             nextStepsArr = [...nextStepsArr, ...((_a = response.nextSteps) !== null && _a !== void 0 ? _a : [])];
             // process any returned initializers

package/dist/initializers/angular/prompts.js

@@ -11,14 +11,14 @@ exports.prompts = [
         default: false,
         when: (answers) => {
             // don't prompt if --yes or angular-xmcloud template was specified
-            if (answers.yes) {
-                return false;
-            }
-            else if (answers.templates.includes('angular-xmcloud') &&
+            if (answers.templates.includes('angular-xmcloud') &&
                 !answers.templates.includes('angular-sxp')) {
                 answers.xmcloud = true;
                 return false;
             }
+            if (answers.yes) {
+                return false;
+            }
             return true;
         },
     },

package/dist/initializers/angular-xmcloud/index.js

@@ -31,29 +31,43 @@ var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, ge
         step((generator = generator.apply(thisArg, _arguments || [])).next());
     });
 };
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
 Object.defineProperty(exports, "__esModule", { value: true });
 const path_1 = __importStar(require("path"));
 const common_1 = require("../../common");
+const proxy_1 = require("../../common/prompts/proxy");
+const inquirer_1 = __importDefault(require("inquirer"));
 const helpers_1 = require("../../common/utils/helpers");
 class AngularXmCloudInitializer {
     get isBase() {
         return false;
     }
     init(args) {
-        var _a, _b;
+        var _a, _b, _c, _d;
         return __awaiter(this, void 0, void 0, function* () {
             const pkg = (0, common_1.openJsonFile)(`${args.destination}${path_1.sep}package.json`);
             const addInitializers = [];
-            // when installing proxy alongside main app, have a separate path ready
-            if (!args.proxyAppDestination) {
-                args.proxyAppDestination = (0, helpers_1.getDefaultProxyDestination)(args.destination, 'node-xmcloud-proxy');
-            }
+            // angular-xmcloud requires node-xmcloud-proxy
             if (!args.templates.includes('node-xmcloud-proxy')) {
                 addInitializers.push('node-xmcloud-proxy');
             }
-            const mergedArgs = Object.assign(Object.assign({}, args), { appName: args.appName || ((_a = pkg === null || pkg === void 0 ? void 0 : pkg.config) === null || _a === void 0 ? void 0 : _a.appName) || common_1.DEFAULT_APPNAME, appPrefix: args.appPrefix || ((_b = pkg === null || pkg === void 0 ? void 0 : pkg.config) === null || _b === void 0 ? void 0 : _b.prefix) || false });
+            // ensure args.proxyAppDestination is populated
+            const promptArgs = {
+                yes: args.yes,
+                destination: args.destination,
+                proxyName: 'node-xmcloud-proxy',
+                proxyAppDestination: args.proxyAppDestination,
+            };
+            const proxyDetails = yield inquirer_1.default.prompt(proxy_1.proxyPrompts, promptArgs);
+            args.proxyAppDestination = proxyDetails.proxyAppDestination;
+            const finalArgs = Object.assign(Object.assign(Object.assign(Object.assign({}, args), { appName: args.appName || ((_a = pkg === null || pkg === void 0 ? void 0 : pkg.config) === null || _a === void 0 ? void 0 : _a.appName) || common_1.DEFAULT_APPNAME, appPrefix: args.appPrefix || ((_b = pkg === null || pkg === void 0 ? void 0 : pkg.config) === null || _b === void 0 ? void 0 : _b.prefix) || false }), proxyDetails), { relativeProxyAppDestination: (0, helpers_1.getRelativeProxyDestination)(args.destination, args.proxyAppDestination) });
             const templatePath = path_1.default.resolve(__dirname, '../../templates/angular-xmcloud');
-            yield (0, common_1.transform)(templatePath, mergedArgs);
+            yield (0, common_1.transform)(templatePath, finalArgs);
+            if (args.templates.includes('angular-sxp') || ((_d = (_c = pkg.config) === null || _c === void 0 ? void 0 : _c.templates) === null || _d === void 0 ? void 0 : _d.includes('angular-sxp'))) {
+                console.log((0, common_1.incompatibleAddonsMsg)('angular-xmcloud', 'angular-sxp'));
+            }
             const response = {
                 nextSteps: [],
                 appName: args.appName || common_1.DEFAULT_APPNAME,

package/dist/initializers/node-xmcloud-proxy/index.js

@@ -21,7 +21,8 @@ class AngularXmCloudInitializer {
     init(args) {
         return __awaiter(this, void 0, void 0, function* () {
             const templatePath = path_1.default.resolve(__dirname, '../../templates/node-xmcloud-proxy');
-            yield (0, common_1.transform)(templatePath, args);
+            const modifiedArgs = Object.assign(Object.assign({}, args), { destination: args.proxyAppDestination || args.destination });
+            yield (0, common_1.transform)(templatePath, modifiedArgs);
             const response = {
                 appName: 'node-xmcloud-proxy',
             };

package/dist/templates/angular/.env

@@ -1,3 +1,5 @@
+# ====== Sitecore Preview / Delivery Edge ======
+
 # Your Sitecore API key is needed to build the app. Typically, the API key is
 # defined in `scjssconfig.json` (as `sitecore.apiKey`). This file may not exist
 # when building locally (if you've never run `jss setup`), or when building in a
@@ -17,15 +19,12 @@ SITECORE_API_HOST=
 # the resolved Sitecore API hostname + the `graphQLEndpointPath` defined in your `package.json`.
 GRAPH_QL_ENDPOINT=
 
+# ==============================================
+
 # Your Sitecore site name.
 # Uses your `package.json` config `appName` if empty.
 SITECORE_SITE_NAME=
 
-<% if (!locals.xmcloud) { -%>
-# The way in which layout and dictionary data is fetched from Sitecore
-FETCH_WITH=<%- fetchWith %>
-<% } -%>
-
 # Your default app language.
 DEFAULT_LANGUAGE=
 

package/dist/templates/angular/.eslintrc

@@ -20,6 +20,7 @@
         "plugin:@angular-eslint/template/process-inline-templates"
       ],
       "rules": {
+        "@angular-eslint/no-host-metadata-property": "off",
         "@angular-eslint/component-selector": [
           "error",
           {

package/dist/templates/angular/gitignore

@@ -9,10 +9,15 @@ scjssconfig.json
 /dist-server
 /tmp
 /out-tsc
+/.angular
 
 # dependencies
 /node_modules
 
+# local env files
+.env.local
+.env.*.local
+
 # IDEs and editors
 /.idea
 .project

package/dist/templates/angular/package.json

@@ -1,6 +1,6 @@
 {
   "name": "<%- appName %>",
-  "version": "22.2.0-canary",
+  "version": "22.3.0-canary",
   "description": "Application utilizing Sitecore JavaScript Services and Angular (angular-cli).",
   "config": {
     "appName": "<%- appName %>",
@@ -22,7 +22,7 @@
     "build": "npm-run-all --serial bootstrap build:client build:server",
     "scaffold": "ng generate @sitecore-jss/sitecore-jss-angular-schematics:jss-component --no-manifest",
     "start:angular": "ng serve -o",
-    "start:watch-components": "ts-node --project src/tsconfig.webpack-server.json scripts/generate-component-factory.ts --watch",
+    "start:watch-components": "ts-node --project src/tsconfig.webpack-server.json scripts/generate-component-factory/index.ts --watch",
     "build:client": "cross-env-shell ng build --configuration=production --base-href $npm_package_config_sitecoreDistPath/browser/ --output-path=$npm_package_config_buildArtifactsPath/browser/",
     "build:server": "cross-env-shell ng run <%- appName %>:server:production --output-path=$npm_package_config_buildArtifactsPath",
     "postbuild:server": "move-cli ./dist/main.js ./dist/server.bundle.js",
@@ -57,7 +57,7 @@
     "@apollo/client": "^3.3.12",
     "@ngx-translate/core": "~15.0.0",
     "@ngx-translate/http-loader": "~8.0.0",
-    "@sitecore-jss/sitecore-jss-angular": "~22.2.0-canary",
+    "@sitecore-jss/sitecore-jss-angular": "~22.3.0-canary",
     "apollo-angular": "~6.0.0",
     "bootstrap": "^5.3.3",
     "core-js": "~3.37.1",
@@ -78,10 +78,9 @@
     "@angular/cli": "~17.3.8",
     "@angular/compiler-cli": "~17.3.11",
     "@angular/language-service": "~17.3.11",
-    "@sitecore-jss/sitecore-jss-angular-schematics": "~22.2.0-canary",
-    "@sitecore-jss/sitecore-jss-cli": "~22.2.0-canary",
-    "@sitecore-jss/sitecore-jss-dev-tools": "~22.2.0-canary",
-    "@types/isomorphic-fetch": "0.0.35",
+    "@sitecore-jss/sitecore-jss-angular-schematics": "~22.3.0-canary",
+    "@sitecore-jss/sitecore-jss-cli": "~22.3.0-canary",
+    "@sitecore-jss/sitecore-jss-dev-tools": "~22.3.0-canary",
     "@types/jasmine": "~3.6.7",
     "@types/jasminewd2": "~2.0.8",
     "@types/node": "~20.14.10",
@@ -99,7 +98,6 @@
     "eslint-plugin-import": "2.29.1",
     "eslint-plugin-jsdoc": "48.7.0",
     "eslint-plugin-prefer-arrow": "1.2.3",
-    "isomorphic-fetch": "^3.0.0",
     "jasmine-core": "~3.7.1",
     "jasmine-spec-reporter": "~6.0.0",
     "karma": "^6.3.2",

package/dist/templates/angular/scripts/config/plugins/fallback.ts

@@ -12,7 +12,6 @@ class FallbackPlugin implements ConfigPlugin {
   async exec(config: JssConfig) {
     return Object.assign({}, config, {
       defaultLanguage: config.defaultLanguage || 'en',
-      sitecoreApiKey: config.sitecoreApiKey || 'no-api-key-set',
       <% if (!locals.xmcloud) { -%>
       layoutServiceConfigurationName: config.layoutServiceConfigurationName || 'default',
       <% } -%>

package/dist/templates/angular/scripts/generate-component-factory/index.ts

@@ -0,0 +1,45 @@
+const plugins = require('scripts/temp/generate-component-factory-plugins');
+import { PackageDefinition } from '@sitecore-jss/sitecore-jss-dev-tools';
+
+export interface ComponentFactoryPluginConfig {
+  watch?: boolean;
+  packages: PackageDefinition[];
+  components: string[];
+}
+
+export interface ComponentFactoryPlugin {
+  /**
+   * Detect order when the plugin should be called, e.g. 0 - will be called first (can be a plugin which data is required for other plugins)
+   */
+  order: number;
+  /**
+   * A function which will be called during component factory generation
+   * @param {JssConfig} config Current (accumulated) config
+   */
+  exec(config: ComponentFactoryPluginConfig): ComponentFactoryPluginConfig;
+}
+
+/*
+  COMPONENT FACTORY GENERATION
+  Generates the /src/app/components/app-components.module.ts file which maps Angular components
+  to JSS components.
+
+  The component factory module defines a mapping between a string component name and a Angular component instance.
+  When the Sitecore Layout service returns a layout definition, it returns named components.
+  This mapping is used to construct the component hierarchy for the layout.
+
+  NOTE: this script can run in two modes. The default mode, the component factory file is written once.
+  But if `--watch` is a process argument, the component factory source folder will be watched,
+  and the componentFactory.js rewritten on added or deleted files.
+  This is used during `jss start` to pick up new or removed components at runtime.
+*/
+
+const defaultConfig: ComponentFactoryPluginConfig = {
+  watch: process.argv.some(arg => arg === '--watch'),
+  packages: [],
+  components: [],
+};
+
+(Object.values(plugins) as ComponentFactoryPlugin[])
+  .sort((p1, p2) => p1.order - p2.order)
+  .reduce((config, plugin) => plugin.exec(config), defaultConfig);