create-sitecore-jss 22.2.0-canary.74 → 22.2.0-canary.75

package/dist/templates/angular/package.json

@@ -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",

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

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

@@ -0,0 +1,147 @@
+
+import * as fs from 'fs';
+import path from 'path';
+import chokidar from 'chokidar';
+import { componentFactoryTemplate } from '../template';
+import {
+  ComponentFactoryPluginConfig,
+  ComponentFactoryPlugin as ComponentFactoryPluginType,
+} from '..';
+
+export interface PackageDefinition {
+  name: string;
+  components: {
+    moduleName: string;
+    componentName: string;
+  }[];
+}
+
+const componentFactoryPath = path.resolve('src/app/components/app-components.module.ts');
+const componentRootPath = 'src/app/components';
+
+function watchComponentFactory(config: ComponentFactoryPluginConfig) {
+  console.log(`Watching for changes to component factory sources in ${componentRootPath}...`);
+
+  chokidar
+    .watch(componentRootPath, { ignoreInitial: true, awaitWriteFinish: true })
+    .on('add', writeComponentFactory.bind(null, config))
+    .on('unlink', writeComponentFactory.bind(null, config));
+}
+
+function writeComponentFactory(config: ComponentFactoryPluginConfig) {
+  const componentFactory = generateComponentFactory(config);
+
+  console.log(`Writing component factory to ${componentFactoryPath}`);
+
+  fs.writeFileSync(componentFactoryPath, componentFactory, { encoding: 'utf8' });
+}
+
+function generateComponentFactory(config: ComponentFactoryPluginConfig) {
+  // By convention, we expect to find Angular components
+  // under /src/app/components/component-name/component-name.component.ts
+  // If a component-name.module.ts file exists, we will treat it as lazy loaded.
+  // If you'd like to use your own convention, encode it below.
+  // NOTE: generating the component factory module is also totally optional,
+  // and it can be maintained manually if preferred.
+
+  const imports: string[] = [];
+  const registrations: string[] = [];
+  const lazyRegistrations: string[] = [];
+  const declarations: string[] = [];
+
+  config.packages.forEach((p) => {
+    const variables = p.components
+      .map((c) => {
+        registrations.push(`{ name: '${c.componentName}', type: ${c.moduleName} },`);
+        config.components.push(c.componentName);
+
+        return c.moduleName;
+      })
+      .join(', ');
+    imports.push(`import { ${variables} } from '${p.name}'`);
+  });
+
+  fs.readdirSync(componentRootPath).forEach((componentFolder) => {
+    // ignore ts files in component root folder
+    if (componentFolder.endsWith('.ts') || componentFolder === '.gitignore') {
+      return;
+    }
+
+    const componentFilePath = path.join(
+      componentRootPath,
+      componentFolder,
+      `${componentFolder}.component.ts`
+    );
+
+    if (!fs.existsSync(componentFilePath)) {
+      return;
+    }
+
+    const componentFileContents = fs.readFileSync(componentFilePath, 'utf8');
+
+    // ASSUMPTION: your component should export a class directly that follows Angular conventions,
+    // i.e. `export class FooComponent` - so we can detect the component's name for auto registration.
+    const componentClassMatch = /export class (.+?)Component\b/g.exec(componentFileContents);
+
+    if (componentClassMatch === null) {
+      console.debug(
+        `Component ${componentFilePath} did not seem to export a component class. It will be skipped.`
+      );
+      return;
+    }
+
+    const componentName = componentClassMatch[1];
+    const importVarName = `${componentName}Component`;
+
+    config.components.push(componentName);
+
+    // check for lazy loading needs
+    const moduleFilePath = path.join(
+      componentRootPath,
+      componentFolder,
+      `${componentFolder}.module.ts`
+    );
+    const isLazyLoaded = fs.existsSync(moduleFilePath);
+
+    if (isLazyLoaded) {
+      console.debug(`Registering JSS component (lazy) ${componentName}`);
+      lazyRegistrations.push(
+        `{ path: '${componentName}', loadChildren: () => import('./${componentFolder}/${componentFolder}.module').then(m => m.${componentName}Module) },`
+      );
+    } else {
+      console.debug(`Registering JSS component ${componentName}`);
+      imports.push(
+        `import { ${importVarName} } from './${componentFolder}/${componentFolder}.component';`
+      );
+      registrations.push(`{ name: '${componentName}', type: ${importVarName} },`);
+      declarations.push(`${importVarName},`);
+    }
+  });
+
+  return componentFactoryTemplate({
+    imports,
+    components: config.components,
+    registrations,
+    lazyRegistrations,
+    declarations,
+  });
+}
+
+/**
+ * Generates the component factory file.
+ */
+class ComponentFactoryPlugin implements ComponentFactoryPluginType {
+  order = 9999;
+
+  exec(config: ComponentFactoryPluginConfig) {
+    if (config.watch) {
+      watchComponentFactory(config);
+    } else {
+      writeComponentFactory(config);
+    }
+
+    return config;
+  }
+}
+
+export const componentFactoryPlugin = new ComponentFactoryPlugin();

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

@@ -0,0 +1,19 @@
+import { ComponentFactoryPlugin, ComponentFactoryPluginConfig } from '..';
+
+/**
+ * Provides custom components configuration
+ */
+class ComponentsPlugin implements ComponentFactoryPlugin {
+  order = 0;
+
+  exec(config: ComponentFactoryPluginConfig) {
+    /**
+     * You can specify components which you want to import using custom path
+    */
+    config.components = [];
+
+    return config;
+  }
+}
+
+export const componentsPlugin = new ComponentsPlugin();

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

@@ -0,0 +1,29 @@
+import { ComponentFactoryPlugin, ComponentFactoryPluginConfig } from '..';
+
+/**
+ * Provides custom packages configuration
+ */
+class PackagesPlugin implements ComponentFactoryPlugin {
+  order = 0;
+
+  exec(config: ComponentFactoryPluginConfig) {
+    /**
+     * You can specify components which you want to import from external/internal packages
+     * in format:
+     *  {
+     *    name: 'package name',
+     *    components: [
+     *      {
+     *        componentName: 'component name', // component rendering name,
+     *        moduleName: 'module name' // component name to import from the package
+     *      }
+     *    ]
+     *  }
+     */
+    config.packages = [];
+
+    return config;
+  }
+}
+
+export const packagesPlugin = new PackagesPlugin();

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

@@ -0,0 +1,46 @@
+export const componentFactoryTemplate = ({
+  imports,
+  components,
+  registrations,
+  lazyRegistrations,
+  declarations,
+}: {
+  imports: string[];
+  components: string[];
+  registrations: string[];
+  lazyRegistrations: string[];
+  declarations: string[];
+}) => `// Do not edit this file, it is auto-generated at build time!
+// See scripts/generate-component-factory/index.ts to modify the generation of this file.
+// Use app-components.shared.module.ts to modify the imports, etc of this module.
+// Note: code-generation is optional! See ./.gitignore for directions to remove it,
+// if you do not want it.
+
+import { NgModule } from '@angular/core';
+import { JssModule } from '@sitecore-jss/sitecore-jss-angular';
+import { AppComponentsSharedModule } from './app-components.shared.module';
+${imports.join('\n')}
+
+export const components = [
+  ${components.map((c) => `'${c}'`).join(',\n  ')}
+];
+
+@NgModule({
+  imports: [
+    AppComponentsSharedModule,
+    JssModule.withComponents([
+      ${registrations.join('\n      ')}
+    ], [
+      ${lazyRegistrations.join('\n      ')}
+    ]),
+  ],
+  exports: [
+    JssModule,
+    AppComponentsSharedModule,
+  ],
+  declarations: [
+    ${declarations.join('\n    ')}
+  ],
+})
+export class AppComponentsModule { }
+`;

package/dist/templates/angular/scripts/generate-plugins.ts

@@ -21,6 +21,11 @@ const pluginDefinitions: PluginDefinition[] = [
     rootPath: 'scripts/config/plugins',
     moduleType: ModuleType.ESM,
   },
+  {
+    distPath: 'scripts/temp/generate-component-factory-plugins.ts',
+    rootPath: 'scripts/generate-component-factory/plugins',
+    moduleType: ModuleType.ESM,
+  },
 ];
 
 pluginDefinitions.forEach((definition) => {

package/dist/templates/angular/src/app/components/gitignore

@@ -1,7 +1,7 @@
 # App component module is auto-generated by default.
 # To manually maintain the module,
 # - Remove this ignore file
-# - Delete /scripts/generate-component-factory.ts
+# - Delete /scripts/generate-component-factory/index.ts
 # - Remove the reference from /scripts/bootstrap.ts
 # - Consider merging app-components.shared and app-components modules
 app-components.module.ts

package/dist/templates/angular-xmcloud/scripts/generate-component-factory/plugins/packages.ts

@@ -0,0 +1,34 @@
+import { ComponentFactoryPlugin, ComponentFactoryPluginConfig } from '..';
+
+/**
+ * Provides custom packages configuration
+ */
+class PackagesPlugin implements ComponentFactoryPlugin {
+  order = 0;
+
+  exec(config: ComponentFactoryPluginConfig) {
+    /**
+     * You can specify components which you want to import from external/internal packages
+     * in format:
+     *  {
+     *    name: 'package name',
+     *    components: [
+     *      {
+     *        componentName: 'component name', // component rendering name,
+     *        moduleName: 'module name' // component name to import from the package
+     *      }
+     *    ]
+     *  }
+     */
+    config.packages = [
+      {
+        name: '@sitecore-jss/sitecore-jss-angular',
+        components: [{ componentName: 'Form', moduleName: 'FormComponent' }],
+      },
+    ];
+
+    return config;
+  }
+}
+
+export const packagesPlugin = new PackagesPlugin();

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

@@ -0,0 +1,57 @@
+export const componentFactoryTemplate = ({
+  imports,
+  components,
+  registrations,
+  lazyRegistrations,
+  declarations,
+}: {
+  imports: string[];
+  components: string[];
+  registrations: string[];
+  lazyRegistrations: string[];
+  declarations: string[];
+}) => `// Do not edit this file, it is auto-generated at build time!
+// See scripts/generate-component-factory/index.ts to modify the generation of this file.
+// Use app-components.shared.module.ts to modify the imports, etc of this module.
+// Note: code-generation is optional! See ./.gitignore for directions to remove it,
+// if you do not want it.
+
+import { NgModule } from '@angular/core';
+import { EDGE_CONFIG, JssModule } from '@sitecore-jss/sitecore-jss-angular';
+import { AppComponentsSharedModule } from './app-components.shared.module';
+import { environment } from '../../environments/environment';
+${imports.join('\n')}
+
+export const components = [
+  ${components.map((c) => `'${c}'`).join(',\n  ')}
+];
+
+@NgModule({
+  imports: [
+    AppComponentsSharedModule,
+    JssModule.withComponents([
+      ${registrations.join('\n      ')}
+    ], [
+      ${lazyRegistrations.join('\n      ')}
+    ]),
+  ],
+  providers: [
+    {
+      // This configuration is used to be able to integrate sitecore-jss-angular SDK with Sitecore Edge
+      provide: EDGE_CONFIG,
+      useValue: {
+        sitecoreEdgeUrl: environment.sitecoreEdgeUrl,
+        sitecoreEdgeContextId: environment.sitecoreEdgeContextId,
+      },
+    },
+  ],
+  exports: [
+    JssModule,
+    AppComponentsSharedModule,
+  ],
+  declarations: [
+    ${declarations.join('\n    ')}
+  ],
+})
+export class AppComponentsModule { }
+`;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "create-sitecore-jss",
-  "version": "22.2.0-canary.74",
+  "version": "22.2.0-canary.75",
   "description": "Sitecore JSS initializer",
   "bin": "./dist/index.js",
   "scripts": {
@@ -63,5 +63,5 @@
     "ts-node": "^10.9.1",
     "typescript": "~4.9.5"
   },
-  "gitHead": "1adfe83c042804e1316cd8e78c2f4965fb995850"
+  "gitHead": "cbf3579dc09eaf69b94deff40713e7b682146ffe"
 }

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

@@ -1,174 +0,0 @@
-import * as fs from 'fs';
-const path = require('path');
-const chokidar = require('chokidar');
-
-/*
-  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.
-*/
-
-export interface PackageDefinition {
-  name: string;
-  components: {
-    moduleName: string;
-    componentName: string;
-  }[];
-}
-
-const componentFactoryPath = path.resolve('src/app/components/app-components.module.ts');
-const componentRootPath = 'src/app/components';
-
-const isWatch = process.argv.some((arg) => arg === '--watch');
-
-if (isWatch) {
-  watchComponentFactory();
-} else {
-  writeComponentFactory();
-}
-
-function watchComponentFactory() {
-  console.log(`Watching for changes to component factory sources in ${componentRootPath}...`);
-
-  chokidar
-    .watch(componentRootPath, { ignoreInitial: true, awaitWriteFinish: true })
-    .on('add', writeComponentFactory)
-    .on('unlink', writeComponentFactory);
-}
-
-function writeComponentFactory() {
-  const componentFactory = generateComponentFactory();
-
-  console.log(`Writing component factory to ${componentFactoryPath}`);
-
-  fs.writeFileSync(componentFactoryPath, componentFactory, { encoding: 'utf8' });
-}
-
-function generateComponentFactory() {
-  // By convention, we expect to find Angular components
-  // under /src/app/components/component-name/component-name.component.ts
-  // If a component-name.module.ts file exists, we will treat it as lazy loaded.
-  // If you'd like to use your own convention, encode it below.
-  // NOTE: generating the component factory module is also totally optional,
-  // and it can be maintained manually if preferred.
-
-  const imports: string[] = [];
-  /**
-   * You can specify components which you want to import from external/internal packages
-   * in format:
-   *  {
-   *    name: 'package name',
-   *    components: [
-   *      {
-   *        componentName: 'component name', // component rendering name,
-   *        moduleName: 'module name' // component name to import from the package
-   *      }
-   *    ]
-   *  }
-   */
-  const packages: PackageDefinition[] = [];
-  const registrations: string[] = [];
-  const lazyRegistrations: string[] = [];
-  const declarations: string[] = [];
-  const components: string[] = [];
-
-  packages.forEach((p) => {
-    const variables = p.components
-      .map((c) => {
-        registrations.push(`{ name: '${c.componentName}', type: ${c.moduleName} },`);
-        declarations.push(`${c.moduleName},`);
-        components.push(c.componentName);
-
-        return c.moduleName;
-      })
-      .join(', ');
-    imports.push(`import { ${variables} } from '${p.name}'`);
-  });
-
-  fs.readdirSync(componentRootPath).forEach((componentFolder) => {
-    // ignore ts files in component root folder
-    if (componentFolder.endsWith('.ts') || componentFolder === '.gitignore') {
-      return;
-    }
-
-    const componentFilePath = path.join(componentRootPath, componentFolder, `${componentFolder}.component.ts`);
-
-    if (!fs.existsSync(componentFilePath)) {
-      return;
-    }
-
-    const componentFileContents = fs.readFileSync(componentFilePath, 'utf8');
-
-    // ASSUMPTION: your component should export a class directly that follows Angular conventions,
-    // i.e. `export class FooComponent` - so we can detect the component's name for auto registration.
-    const componentClassMatch = /export class (.+?)Component\b/g.exec(componentFileContents);
-
-    if (componentClassMatch === null) {
-      console.debug(`Component ${componentFilePath} did not seem to export a component class. It will be skipped.`);
-      return;
-    }
-
-    const componentName = componentClassMatch[1];
-    const importVarName = `${componentName}Component`;
-
-    components.push(componentName);
-
-    // check for lazy loading needs
-    const moduleFilePath = path.join(componentRootPath, componentFolder, `${componentFolder}.module.ts`);
-    const isLazyLoaded = fs.existsSync(moduleFilePath);
-
-    if (isLazyLoaded) {
-      console.debug(`Registering JSS component (lazy) ${componentName}`);
-      lazyRegistrations.push(`{ path: '${componentName}', loadChildren: () => import('./${componentFolder}/${componentFolder}.module').then(m => m.${componentName}Module) },`);
-    } else {
-      console.debug(`Registering JSS component ${componentName}`);
-      imports.push(`import { ${importVarName} } from './${componentFolder}/${componentFolder}.component';`);
-      registrations.push(`{ name: '${componentName}', type: ${importVarName} },`);
-      declarations.push(`${importVarName},`);
-    }
-  });
-
-  return `// Do not edit this file, it is auto-generated at build time!
-// See scripts/generate-component-factory.js to modify the generation of this file.
-// Use app-components.shared.module.ts to modify the imports, etc of this module.
-// Note: code-generation is optional! See ./.gitignore for directions to remove it,
-// if you do not want it.
-
-import { NgModule } from '@angular/core';
-import { JssModule } from '@sitecore-jss/sitecore-jss-angular';
-import { AppComponentsSharedModule } from './app-components.shared.module';
-${imports.join('\n')}
-
-export const components = [
-  ${components.map((c) => `'${c}'`).join(',\n  ')}
-];
-
-@NgModule({
-  imports: [
-    AppComponentsSharedModule,
-    JssModule.withComponents([
-      ${registrations.join('\n      ')}
-    ], [
-      ${lazyRegistrations.join('\n      ')}
-    ]),
-  ],
-  exports: [
-    JssModule,
-    AppComponentsSharedModule,
-  ],
-  declarations: [
-    ${declarations.join('\n    ')}
-  ],
-})
-export class AppComponentsModule { }
-`;
-}