create-sitecore-jss 22.2.1 → 22.3.0-canary.10

package/dist/templates/angular/package.json

@@ -1,127 +1,115 @@
-{
-  "name": "<%- appName %>",
-  "version": "22.2.1",
-  "description": "Application utilizing Sitecore JavaScript Services and Angular (angular-cli).",
-  "config": {
-    "appName": "<%- appName %>",
-    "rootPlaceholders": [
-      "<%- helper.getAppPrefix(appPrefix, appName) %>jss-main"
-    ],
-    "sitecoreDistPath": "/dist/<%- appName %>",
-    "sitecoreConfigPath": "/App_Config/Include/zzz",
-    "buildArtifactsPath": "./dist",
-    "graphQLEndpointPath": "/sitecore/api/graph/edge",
-    "language": "en"
-  },
-  "scripts": {
-    "ng": "ng",
-    "lint:yml": "ts-node ./scripts/lint-yml.ts",
-    "lint": "ng lint <%- appName %> --fix && npm run lint:yml",
-    "e2e": "ng e2e",
-    "jss": "jss",
-    "start": "cross-env-shell JSS_MODE=disconnected \"npm-run-all --serial bootstrap --parallel start:angular start:proxy start:watch-components\"",
-    "start:connected": "npm-run-all --serial bootstrap start:angular start:watch-components",
-    "build": "npm-run-all --serial bootstrap --serial build:client build:server",
-    "scaffold": "ng generate @sitecore-jss/sitecore-jss-angular-schematics:jss-component",
-    "start:angular": "ng serve -o",
-    "start:proxy": "ts-node --project src/tsconfig.webpack-server.json scripts/disconnected-mode-proxy.ts",
-    "start:watch-components": "ts-node --project src/tsconfig.webpack-server.json scripts/generate-component-factory.ts --watch",
-    "build:client": "cross-env-shell ng build --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",
-    "bootstrap": "ts-node --project src/tsconfig.webpack-server.json scripts/bootstrap.ts",
-    "graphql:update": "ts-node --project src/tsconfig.webpack-server.json ./scripts/update-graphql-fragment-data.ts",
-    "install-pre-push-hook": "ts-node --project src/tsconfig.webpack-server.json ./scripts/install-pre-push-hook.ts"
-  },
-  "private": true,
-  "author": {
-    "name": "Sitecore Corporation",
-    "url": "https://jss.sitecore.com"
-  },
-  "repository": {
-    "type": "git",
-    "url": "git+https://github.com/sitecore/jss.git"
-  },
-  "bugs": {
-    "url": "https://github.com/sitecore/jss/issues"
-  },
-  "homepage": "https://jss.sitecore.com",
-  "license": "Apache-2.0",
-  "dependencies": {
-    "@angular/animations": "~17.3.11",
-    "@angular/common": "~17.3.11",
-    "@angular/compiler": "~17.3.11",
-    "@angular/core": "~17.3.11",
-    "@angular/forms": "~17.3.11",
-    "@angular/platform-browser": "~17.3.11",
-    "@angular/platform-browser-dynamic": "~17.3.11",
-    "@angular/platform-server": "~17.3.11",
-    "@angular/router": "~17.3.11",
-    "@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.1",
-    "apollo-angular": "~6.0.0",
-    "bootstrap": "^5.3.3",
-    "core-js": "~3.37.1",
-    "graphql": "15.5.0",
-    "graphql-tag": "~2.11.0",
-    "lodash": "^4.17.21",
-    "rxjs": "~7.8.1",
-    "tslib": "^2.6.3",
-    "zone.js": "~0.14.7"
-  },
-  "devDependencies": {
-    "@angular-builders/custom-webpack": "^17.0.2",
-    "@angular-devkit/build-angular": "^17.3.8",
-    "@angular-eslint/builder": "^17.5.2",
-    "@angular-eslint/eslint-plugin": "^17.5.2",
-    "@angular-eslint/eslint-plugin-template": "^17.5.2",
-    "@angular-eslint/schematics": "^17.5.2",
-    "@angular-eslint/template-parser": "^17.5.2",
-    "@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.1",
-    "@sitecore-jss/sitecore-jss-cli": "~22.2.1",
-    "@sitecore-jss/sitecore-jss-dev-tools": "~22.2.1",
-    "@types/isomorphic-fetch": "0.0.35",
-    "@types/jasmine": "~3.6.7",
-    "@types/jasminewd2": "~2.0.8",
-    "@types/node": "~20.14.10",
-    "@typescript-eslint/eslint-plugin": "^7.16.0",
-    "@typescript-eslint/parser": "^7.16.0",
-    "body-parser": "~1.20.2",
-    "chalk": "~4.1.0",
-    "chokidar": "^3.5.2",
-    "codelyzer": "~6.0.1",
-    "constant-case": "^3.0.4",
-    "cookie-parser": "~1.4.5",
-    "cross-env": "~7.0.3",
-    "del-cli": "^5.0.0",
-    "dotenv": "^16.0.0",
-    "dotenv-webpack": "^7.1.0",
-    "enhanced-resolve": "5.7.0",
-    "eslint": "^8.56.0",
-    "eslint-plugin-import": "2.29.1",
-    "eslint-plugin-jsdoc": "48.7.0",
-    "eslint-plugin-prefer-arrow": "1.2.3",
-    "express": "~4.17.1",
-    "fs-extra": "~9.1.0",
-    "isomorphic-fetch": "^3.0.0",
-    "jasmine-core": "~3.7.1",
-    "jasmine-spec-reporter": "~6.0.0",
-    "karma": "^6.3.2",
-    "karma-chrome-launcher": "~3.1.0",
-    "karma-cli": "~2.0.0",
-    "karma-coverage-istanbul-reporter": "~3.0.3",
-    "karma-jasmine": "~4.0.1",
-    "karma-jasmine-html-reporter": "~1.5.4",
-    "move-cli": "^2.0.0",
-    "npm-run-all": "~4.1.5",
-    "protractor": "^7.0.0",
-    "ts-node": "~10.9.2",
-    "typescript": "~5.2.2",
-    "yaml-lint": "^1.2.4"
-  }
-}
+{
+  "name": "<%- appName %>",
+  "version": "22.3.0-canary",
+  "description": "Application utilizing Sitecore JavaScript Services and Angular (angular-cli).",
+  "config": {
+    "appName": "<%- appName %>",
+    "rootPlaceholders": [
+      "<%- helper.getAppPrefix(appPrefix, appName) %>jss-main"
+    ],
+    "sitecoreDistPath": "/dist/<%- appName %>",
+    "sitecoreConfigPath": "/App_Config/Include/zzz",
+    "buildArtifactsPath": "./dist",
+    "graphQLEndpointPath": "/sitecore/api/graph/edge",
+    "language": "en"
+  },
+  "scripts": {
+    "ng": "ng",
+    "lint": "ng lint <%- appName %> --fix",
+    "e2e": "ng e2e",
+    "jss": "jss",
+    "start:connected": "npm-run-all --serial bootstrap start:angular start:watch-components",
+    "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/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",
+    "bootstrap": "ts-node --project src/tsconfig.webpack-server.json scripts/bootstrap.ts",
+    "graphql:update": "ts-node --project src/tsconfig.webpack-server.json ./scripts/update-graphql-fragment-data.ts",
+    "install-pre-push-hook": "ts-node --project src/tsconfig.webpack-server.json ./scripts/install-pre-push-hook.ts"
+  },
+  "private": true,
+  "author": {
+    "name": "Sitecore Corporation",
+    "url": "https://jss.sitecore.com"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/sitecore/jss.git"
+  },
+  "bugs": {
+    "url": "https://github.com/sitecore/jss/issues"
+  },
+  "homepage": "https://jss.sitecore.com",
+  "license": "Apache-2.0",
+  "dependencies": {
+    "@angular/animations": "~17.3.11",
+    "@angular/common": "~17.3.11",
+    "@angular/compiler": "~17.3.11",
+    "@angular/core": "~17.3.11",
+    "@angular/forms": "~17.3.11",
+    "@angular/platform-browser": "~17.3.11",
+    "@angular/platform-browser-dynamic": "~17.3.11",
+    "@angular/platform-server": "~17.3.11",
+    "@angular/router": "~17.3.11",
+    "@apollo/client": "^3.3.12",
+    "@ngx-translate/core": "~15.0.0",
+    "@ngx-translate/http-loader": "~8.0.0",
+    "@sitecore-jss/sitecore-jss-angular": "~22.3.0-canary",
+    "apollo-angular": "~6.0.0",
+    "bootstrap": "^5.3.3",
+    "core-js": "~3.37.1",
+    "graphql": "15.5.0",
+    "graphql-tag": "~2.11.0",
+    "rxjs": "~7.8.1",
+    "tslib": "^2.6.3",
+    "zone.js": "~0.14.7"
+  },
+  "devDependencies": {
+    "@angular-builders/custom-webpack": "^17.0.2",
+    "@angular-devkit/build-angular": "^17.3.8",
+    "@angular-eslint/builder": "^17.5.2",
+    "@angular-eslint/eslint-plugin": "^17.5.2",
+    "@angular-eslint/eslint-plugin-template": "^17.5.2",
+    "@angular-eslint/schematics": "^17.5.2",
+    "@angular-eslint/template-parser": "^17.5.2",
+    "@angular/cli": "~17.3.8",
+    "@angular/compiler-cli": "~17.3.11",
+    "@angular/language-service": "~17.3.11",
+    "@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",
+    "@typescript-eslint/eslint-plugin": "^7.16.0",
+    "@typescript-eslint/parser": "^7.16.0",
+    "chalk": "~4.1.0",
+    "chokidar": "^3.5.2",
+    "codelyzer": "~6.0.1",
+    "constant-case": "^3.0.4",
+    "cross-env": "~7.0.3",
+    "del-cli": "^5.0.0",
+    "dotenv": "^16.0.0",
+    "dotenv-webpack": "^7.1.0",
+    "eslint": "^8.56.0",
+    "eslint-plugin-import": "2.29.1",
+    "eslint-plugin-jsdoc": "48.7.0",
+    "eslint-plugin-prefer-arrow": "1.2.3",
+    "jasmine-core": "~3.7.1",
+    "jasmine-spec-reporter": "~6.0.0",
+    "karma": "^6.3.2",
+    "karma-chrome-launcher": "~3.1.0",
+    "karma-cli": "~2.0.0",
+    "karma-coverage-istanbul-reporter": "~3.0.3",
+    "karma-jasmine": "~4.0.1",
+    "karma-jasmine-html-reporter": "~1.5.4",
+    "move-cli": "^2.0.0",
+    "npm-run-all": "~4.1.5",
+    "protractor": "^7.0.0",
+    "ts-node": "~10.9.2",
+    "typescript": "~5.2.2"
+  }
+}

package/dist/templates/angular/proxy.conf.js

@@ -1,28 +1,10 @@
 /*
-  When the app runs in disconnected mode, and Sitecore is not present, we need to give
-  the app copies of the Sitecore APIs it depends on (layout service, dictionary service, content service)
-  to talk to so that the app can run using the locally defined disconnected data.
-
-  When the app runs in connected mode, Sitecore is present and some of the requests should be
+  When the app runs in connected mode, some of the requests should be
   proxied to the Sitecore API
-
-  This is accomplished by spinning up a small Express server that mocks the APIs, and then
-  telling angular-cli to proxy requests to the API paths to this express instance.
-
-  See /scripts/disconnected-mode-proxy.ts for the proxy API server configuration.
 */
-const constants = require('@sitecore-jss/sitecore-jss-angular/cjs').constants;
 const environment = require('./src/environments/environment.js').environment;
 
-const port = 3043;
-
-const PROXY_CONFIG = process.env.JSS_MODE === constants.JSS_MODE.DISCONNECTED ? [
-  {
-    context: ['/data', '/sitecore'],
-    target: `http://localhost:${port}`,
-    secure: false,
-  },
-] : [
+const PROXY_CONFIG = [
   {
     context: [
       // API endpoints
@@ -30,12 +12,12 @@ const PROXY_CONFIG = process.env.JSS_MODE === constants.JSS_MODE.DISCONNECTED ?
       // media items
       '/-',
       // visitor identification
-      '/layouts'
+      '/layouts',
     ],
     target: environment.sitecoreApiHost,
     secure: false,
-    changeOrigin: true
-  }
+    changeOrigin: true,
+  },
 ];
 
 module.exports = PROXY_CONFIG;

package/dist/templates/angular/scripts/bootstrap.ts

@@ -1,8 +1,4 @@
 import 'dotenv/config';
-import { constants } from '@sitecore-jss/sitecore-jss-angular/cjs';
-import { generateConfig } from './generate-config';
-const projects = require('../angular.json').projects;
-const chalk = require('chalk');
 
 /*
   BOOTSTRAPPING
@@ -11,30 +7,15 @@ const chalk = require('chalk');
   and the global config module.
 */
 
-const disconnected = process.env.JSS_MODE === constants.JSS_MODE.DISCONNECTED;
-
-if (disconnected && process.env.FETCH_WITH === constants.FETCH_WITH.GRAPHQL) {
-  throw new Error(chalk.red("GraphQL requests to Dictionary and Layout services are not supported in disconnected mode."))
-}
+/*
+   PLUGINS GENERATION
+*/
+require('./generate-plugins');
 
 /*
   CONFIG GENERATION
-  Generates the /src/environments/environment.js file which contains runtime configuration
-  that the app can import and use.
-
-  This is generated rather than using Angular environments because of the need to set config params
-  based on build arguments, which env files don't directly allow.
 */
-function writeConfig(configOverride: { production: boolean, sitecoreApiHost?: string }, outputPath?: string) {
-  if (disconnected) {
-    configOverride.sitecoreApiHost = `http://localhost:${projects['<%- appName %>'].architect.serve.options.port}`;
-  }
-
-  generateConfig(configOverride, outputPath);
-}
-
-writeConfig({ production: false });
-writeConfig({ production: true }, 'src/environments/environment.prod.js');
+require('./generate-config');
 
 /*
   COMPONENT FACTORY GENERATION

package/dist/templates/angular/scripts/config/index.ts

@@ -0,0 +1,28 @@
+// eslint-disable-next-line @typescript-eslint/no-var-requires
+const plugins = require('scripts/temp/config-plugins');
+import { JssConfig } from 'lib/config';
+
+export interface ConfigPlugin {
+  /**
+   * 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 config generation
+   * @param {JssConfig} config Current (accumulated) config
+   */
+  exec(config: JssConfig): Promise<JssConfig>;
+}
+
+export class JssConfigFactory {
+  public async create(defaultConfig: JssConfig = {}): Promise<JssConfig> {
+    return (Object.values(plugins) as ConfigPlugin[])
+      .sort((p1, p2) => p1.order - p2.order)
+      .reduce(
+        (promise, plugin) => promise.then((config) => plugin.exec(config)),
+        Promise.resolve(defaultConfig)
+      );
+  }
+}
+
+export const jssConfigFactory = new JssConfigFactory();

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

@@ -0,0 +1,21 @@
+import { JssConfig } from 'lib/config';
+import { ConfigPlugin } from '..';
+
+/**
+ * This plugin will set computed config props.
+ * The "graphQLEndpoint" is an example of making a _computed_ config setting
+ * based on other config settings.
+ */
+class ComputedPlugin implements ConfigPlugin {
+  // should come after other plugins (but before fallback)
+  order = 10;
+
+  async exec(config: JssConfig) {
+    return Object.assign({}, config, {
+      graphQLEndpoint:
+        config.graphQLEndpoint || `${config.sitecoreApiHost}${config.graphQLEndpointPath}`,
+    });
+  }
+}
+
+export const computedPlugin = new ComputedPlugin();

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

@@ -0,0 +1,22 @@
+import { JssConfig } from 'lib/config';
+import { ConfigPlugin } from '..';
+
+/**
+ * This config will set fallback values for properties that were left empty
+ * If neither env, nor other places had a proper value, this will ensure a fallback is set
+ */
+class FallbackPlugin implements ConfigPlugin {
+  // should always come last
+  order = 100;
+
+  async exec(config: JssConfig) {
+    return Object.assign({}, config, {
+      defaultLanguage: config.defaultLanguage || 'en',
+      <% if (!locals.xmcloud) { -%>
+      layoutServiceConfigurationName: config.layoutServiceConfigurationName || 'default',
+      <% } -%>
+    });
+  }
+}
+
+export const fallbackPlugin = new FallbackPlugin();

package/dist/templates/angular/scripts/config/plugins/package-json.ts

@@ -0,0 +1,22 @@
+import { JssConfig } from 'lib/config';
+import { ConfigPlugin } from '..';
+import packageConfig from 'package.json';
+
+/**
+ * This plugin will set config props based on package.json.
+ */
+class PackageJsonPlugin implements ConfigPlugin {
+  order = 1;
+
+  async exec(config: JssConfig) {
+    if (!packageConfig.config) return config;
+
+    return Object.assign({}, config, {
+      sitecoreSiteName: config.sitecoreSiteName || packageConfig.config.appName,
+      graphQLEndpointPath: config.graphQLEndpointPath || packageConfig.config.graphQLEndpointPath,
+      defaultLanguage: config.defaultLanguage || packageConfig.config.language,
+    });
+  }
+}
+
+export const packageJsonPlugin = new PackageJsonPlugin();

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

@@ -0,0 +1,29 @@
+import { JssConfig } from 'lib/config';
+import { ConfigPlugin } from '..';
+
+/**
+ * This plugin will set config props based on scjssconfig.json.
+ * scjssconfig.json may not exist if you've never run `jss setup` (development)
+ * or are depending on environment variables instead (production).
+ */
+class ScJssConfigPlugin implements ConfigPlugin {
+  order = 1;
+
+  async exec(config: JssConfig) {
+    let scJssConfig;
+    try {
+      scJssConfig = require('scjssconfig.json');
+    } catch (e) {
+      return config;
+    }
+
+    if (!scJssConfig) return config;
+
+    return Object.assign({}, config, {
+      sitecoreApiKey: config.sitecoreApiKey || scJssConfig.sitecore?.apiKey,
+      sitecoreApiHost: config.sitecoreApiHost || scJssConfig.sitecore?.layoutServiceHost,
+    });
+  }
+}
+
+export const scjssconfigPlugin = new ScJssConfigPlugin();

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);