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

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-config.ts

@@ -1,7 +1,9 @@
+import 'dotenv/config';
 import * as fs from 'fs';
 import * as path from 'path';
 import { constantCase } from 'constant-case';
-const packageConfig = require('../package.json');
+import { jssConfigFactory } from './config';
+import { JssConfig } from 'lib/config';
 
 /**
  * Generate config
@@ -10,91 +12,88 @@ const packageConfig = require('../package.json');
  * settings as variables into the JSS app.
  * NOTE! Any configs returned here will be written into the client-side JS bundle. DO NOT PUT SECRETS HERE.
  */
-export function generateConfig(configOverrides?: { [key: string]: unknown }, outputPath?: string) {
-  const defaultConfig = {
+
+const defaultConfigValue: JssConfig = {
+  production: false,
+  sitecoreApiKey: process.env[`${constantCase('sitecoreApiKey')}`],
+  sitecoreApiHost: process.env[`${constantCase('sitecoreApiHost')}`],
+  sitecoreSiteName: process.env[`${constantCase('sitecoreSiteName')}`],
+  defaultLanguage: process.env[`${constantCase('defaultLanguage')}`],
+  graphQLEndpoint: process.env[`${constantCase('graphQLEndpoint')}`],
+  graphQLEndpointPath: process.env[`${constantCase('graphQLEndpointPath')}`],
+  defaultServerRoute: '/',
+};
+
+async function main() {
+  await generateConfig('src/environments/environment.js', defaultConfigValue, {
     production: false,
-    sitecoreApiHost: '',
-    sitecoreApiKey: 'no-api-key-set',
-    sitecoreSiteName: process.env.SITECORE_SITE_NAME,
-    sitecoreLayoutServiceConfig: 'jss',
-    defaultLanguage: 'en',
-    defaultServerRoute: '/',
-    layoutServiceConfigurationName: 'default',
-  };
+  });
+  await generateConfig('src/environments/environment.prod.js', defaultConfigValue, {
+    production: true,
+  });
+}
 
-  if (!outputPath) {
-    outputPath = 'src/environments/environment.js';
-  }
+main();
 
-  // require + combine config sources
-  const scjssConfig = transformScJssConfig();
-  const packageJson = transformPackageConfig();
+/**
+ * Generates the JSS config based on config plugins (under ./config/plugins)
+ * and then writes the config to disk.
+ * @param {string} outputPath the output path of the generated config.
+ * @param {JssConfig} [defaultConfig] Default configuration.
+ * @param {[key: string]:unknown} [configOverrides] configuration values that override the generated ones.
+ */
+export function generateConfig(
+  outputPath: string,
+  defaultConfig: JssConfig = defaultConfigValue,
+  configOverrides?: { [key: string]: unknown }
+) {
+  // Handle undefined values
+  defaultConfig = Object.keys(defaultConfig).reduce((acc, key) => {
+    return {
+      ...acc,
+      [key]: defaultConfig[key] || '',
+    };
+  }, {});
 
-  // optional:
-  // do any other dynamic config source (e.g. environment-specific config files)
-  // Object.assign merges the objects in order, so the
-  // package.json config can override the calculated config,
-  // scjssconfig.json overrides it,
-  // and finally config passed in the configOverrides param wins.
-  const config = Object.assign(defaultConfig, scjssConfig, packageJson, configOverrides);
+  return jssConfigFactory
+    .create(defaultConfig)
+    .then((config) => {
+      writeConfig(Object.assign(config, configOverrides), outputPath);
+    })
+    .catch((e) => {
+      console.error('Error generating config');
+      console.error(e);
+      process.exit(1);
+    });
+}
 
-  // The GraphQL endpoint is an example of making a _computed_ config setting
-  // based on other config settings.
-  const computedConfig: { [key: string]: string } = {};
-  computedConfig.graphQLEndpoint = '`${config.sitecoreApiHost}${config.graphQLEndpointPath}`';
+/**
+ * Writes the config object to disk with support for environment variables.
+ * @param {JssConfig} config JSS configuration to write.
+ * @param {string} outputPath the outputh path of the generated config.
+ */
+export function writeConfig(config: JssConfig, outputPath?: string) {
+  if (!outputPath) {
+    outputPath = 'src/environments/environment.js';
+  }
 
   let configText = `/* eslint-disable */
-// Do not edit this file, it is auto-generated at build time!
-// See scripts/bootstrap.ts to modify the generation of this file.
-const config = {};\n`;
+  // Do not edit this file, it is auto-generated at build time!
+  // See scripts/bootstrap.ts to modify the generation of this file.
+  const config = {};\n`;
 
   // Set base configuration values, allowing override with environment variables
   Object.keys(config).forEach((prop) => {
-    configText += `config.${prop} = process.env.${constantCase(prop)} || "${config[prop]?.toString().trim()}";\n`;
-  });
-  // Set computed values, allowing override with environment variables
-  Object.keys(computedConfig).forEach((prop) => {
-    configText += `config.${prop} = process.env.${constantCase(prop)} || ${
-      computedConfig[prop]?.toString().trim()
-    };\n`;
+    // Handle undefined values
+    const value = config[prop] || '';
+    configText += `config.${prop} = process.env.${constantCase(
+      prop
+    )} || "${value.toString().trim()}";\n`;
   });
+
   configText += `module.exports.environment = config;`;
 
   const configPath = path.resolve(outputPath);
   console.log(`Writing runtime config to ${configPath}`);
   fs.writeFileSync(configPath, configText, { encoding: 'utf8' });
 }
-
-function transformScJssConfig() {
-  // scjssconfig.json may not exist if you've never run setup
-  // so if it doesn't we substitute a fake object
-  let config;
-  try {
-    config = require('../scjssconfig.json');
-  } catch (e) {
-    return {};
-  }
-
-  if (!config) {
-    return {};
-  }
-
-  return {
-    sitecoreApiKey: config.sitecore.apiKey,
-    sitecoreApiHost: config.sitecore.layoutServiceHost,
-  };
-}
-
-function transformPackageConfig() {
-  const packageAny = packageConfig;
-
-  if (!packageAny.config) {
-    return {};
-  }
-
-  return {
-    sitecoreSiteName: packageAny.config.appName,
-    defaultLanguage: packageAny.config.language || 'en',
-    graphQLEndpointPath: packageAny.config.graphQLEndpointPath || null,
-  };
-}

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

@@ -0,0 +1,33 @@
+import {
+  generatePlugins,
+  ModuleType,
+  PluginDefinition,
+} from '@sitecore-jss/sitecore-jss-dev-tools';
+
+/*
+  PLUGINS GENERATION
+  NOTE: pluginName: the name of the plugin in the src/lib folder
+  Generates the `/src/temp/{pluginName}-plugins.ts` file, which exports list of plugins
+
+  Generating the plugins is optional, and it can be maintained manually if preferred.
+
+  The default convention uses the plugin's filename (without the extension) as the first part of the component
+  name. For example, the file `/lib/page-props-factory/plugins/exampleName.ts` would map to plugin `exampleNamePlugin`.
+*/
+
+const pluginDefinitions: PluginDefinition[] = [
+  {
+    distPath: 'scripts/temp/config-plugins.ts',
+    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) => {
+  generatePlugins(definition);
+});

package/dist/templates/angular/scripts/temp/gitignore

@@ -0,0 +1,2 @@
+*
+!.gitignore

package/dist/templates/angular/scripts/update-graphql-fragment-data.ts

@@ -1,6 +1,6 @@
-import * as fetch from 'isomorphic-fetch';
 import * as fs from 'fs';
-import { generateConfig } from './generate-config';
+import clientFactory from 'lib/graphql-client-factory';
+import { getGraphQLClientFactoryConfig } from 'lib/graphql-client-factory/config';
 
 // Apollo Client supports caching GraphQL responses, which can greatly reduce network traffic needs.
 // In order to work correctly with interfaces in GraphQL, it needs to know some basic information about
@@ -9,28 +9,23 @@ import { generateConfig } from './generate-config';
 //
 // The `jss graphql:update` command should be executed when Sitecore templates related to the site are altered.
 
-generateConfig();
+import './generate-config';
 
-let jssConfig;
+const clientFactoryConfig = getGraphQLClientFactoryConfig();
 
-try {
-  jssConfig = require('../src/environments/environment').environment;
-} catch (e) {
-  console.error(
-    'Unable to require JSS config. Ensure `jss setup` has been run, and the app has been started at least once after setup.'
-  );
-  console.error(e);
-  process.exit(1);
-}
+console.log(`Updating GraphQL fragment type data from ${clientFactoryConfig.endpoint}...`);
 
-console.log(`Updating GraphQL fragment type data from ${jssConfig.graphQLEndpoint}...`);
-
-fetch(jssConfig.graphQLEndpoint, {
-  method: 'POST',
-  headers: { 'Content-Type': 'application/json', sc_apikey: jssConfig.sitecoreApiKey },
-  body: JSON.stringify({
-    query: `
-      {
+clientFactory()
+  .request<{
+    [key: string]: unknown;
+    __schema: {
+      kind: string;
+      name: string;
+      types: { possibleTypes?: { name: string } }[];
+    };
+  }>(
+    `
+      { 
         __schema {
           types {
             kind
@@ -41,20 +36,18 @@ fetch(jssConfig.graphQLEndpoint, {
           }
         }
       }
-    `,
-  }),
-})
-  .then((result) => result.json())
+    `
+  )
   .then((result) => {
     // here we're filtering out any type information unrelated to unions or interfaces
-    const filteredData = result.data.__schema.types.filter((type: { possibleTypes: Array<string>; }) => type.possibleTypes !== null);
+    const filteredData = result.__schema.types.filter((type) => type.possibleTypes !== null);
 
     const filteredResult = { ...result };
-    filteredResult.data.__schema.types = filteredData;
+    filteredResult.__schema.types = filteredData;
 
     fs.writeFile(
       './src/graphql-fragment-types.ts',
-      `export default ${JSON.stringify(filteredResult.data, null, 2)}`,
+      `export default ${JSON.stringify(filteredResult, null, 2)}`,
       (err) => {
         if (err) {
           console.error('Error writing GraphQLFragmentTypes file', err);

package/dist/templates/angular/server.bundle.ts

@@ -4,11 +4,12 @@ import { join } from 'path';
 import 'reflect-metadata';
 import 'zone.js';
 import { JssRouteBuilderService } from './src/app/routing/jss-route-builder.service';
-import { environment } from './src/environments/environment';
 import { AppServerModule, renderModule } from './src/main.server';
 
 export * from './src/main.server';
 
+export * from './server.exports';
+
 const http = require('http');
 const https = require('https');
 
@@ -97,7 +98,4 @@ function parseRouteUrl(url: string) {
   };
 }
 
-const apiKey = environment.sitecoreApiKey;
-const siteName = environment.sitecoreSiteName;
-
-export { renderView, parseRouteUrl, setUpDefaultAgents, apiKey, siteName };
+export { renderView, parseRouteUrl, setUpDefaultAgents };

package/dist/templates/angular/server.exports.ts

@@ -0,0 +1,13 @@
+import { environment } from './src/environments/environment';
+
+/**
+ * Define the required configuration values to be exported from the server.bundle.ts.
+ */
+
+const apiKey = environment.sitecoreApiKey;
+const siteName = environment.sitecoreSiteName;
+
+export {
+  apiKey,
+  siteName,
+};

package/dist/templates/angular/src/app/JssState.ts

@@ -1,15 +1,8 @@
-import {
-  RouteData,
-  LayoutServiceContextData,
-} from '@sitecore-jss/sitecore-jss-angular';
+import { BaseJssState } from '@sitecore-jss/sitecore-jss-angular';
 import { LayoutServiceError } from './layout/jss-layout.service';
 
-export class JssState<Fields = Record<string, unknown>> {
+export class JssState extends BaseJssState {
   language: string;
   serverRoute: string;
   routeFetchError?: LayoutServiceError;
-  sitecore?: LayoutServiceContextData & {
-    route: RouteData<Fields>;
-  };
-  viewBag: { [key: string]: unknown };
 }

package/dist/templates/angular/src/app/app.component.html

@@ -1 +1 @@
-<router-outlet></router-outlet>
+<router-outlet></router-outlet>

package/dist/templates/angular/src/app/app.module.ts

@@ -1,17 +1,16 @@
 import { APP_ID, NgModule, TransferState } from '@angular/core';
 import { APP_BASE_HREF } from '@angular/common';
-import { HttpClientModule, HttpClient } from '@angular/common/http';
+import { HttpClientModule } from '@angular/common/http';
 import { RoutingModule } from './routing/routing.module';
 import { JssLayoutService } from './layout/jss-layout.service';
-import { JssContextService } from './jss-context.service';
 import { AppComponentsModule } from './components/app-components.module';
 import { AppComponent } from './app.component';
 import { TranslateModule, TranslateLoader } from '@ngx-translate/core';
 import { JssTranslationClientLoaderService } from './i18n/jss-translation-client-loader.service';
 import { JssTranslationLoaderService } from './i18n/jss-translation-loader.service';
 import { GraphQLModule } from './jss-graphql.module';
-import { JssDataFetcherService } from './jss-data-fetcher.service';
 import { JssMetaService } from './jss-meta.service';
+import { JssContextService } from './jss-context.service';
 
 @NgModule({
   imports: [
@@ -21,8 +20,9 @@ import { JssMetaService } from './jss-meta.service';
     TranslateModule.forRoot({
       loader: {
         provide: TranslateLoader,
-        useFactory: () => new JssTranslationClientLoaderService(new JssTranslationLoaderService()),
-        deps: [HttpClient, TransferState],
+        useFactory: (transferState: TransferState) =>
+          new JssTranslationClientLoaderService(new JssTranslationLoaderService(), transferState),
+        deps: [TransferState],
       },
     }),
     AppComponentsModule,
@@ -31,7 +31,6 @@ import { JssMetaService } from './jss-meta.service';
     // The token is needed in cases when multiple applications are bootstrapped on a page
     { provide: APP_ID, useValue: 'my-app' },
     JssContextService,
-    JssDataFetcherService,
     JssLayoutService,
     JssMetaService,
     // IMPORTANT: you must set the base href with this token, not a <base> tag in the HTML.

package/dist/templates/angular/src/app/app.server.module.ts

@@ -1,4 +1,4 @@
-import { NgModule } from '@angular/core';
+import { NgModule, TransferState } from '@angular/core';
 import { ServerModule } from '@angular/platform-server';
 import { TranslateModule, TranslateLoader } from '@ngx-translate/core';
 
@@ -18,11 +18,14 @@ import { JssTranslationServerLoaderService } from './i18n/jss-translation-server
       // <-- *Important* to get translation values server-side
       loader: {
         provide: TranslateLoader,
-        useFactory: (ssrViewBag: {
-          [key: string]: unknown;
-          dictionary: { [key: string]: string };
-        }) => new JssTranslationServerLoaderService(ssrViewBag),
-        deps: ['JSS_SERVER_VIEWBAG'],
+        useFactory: (
+          ssrViewBag: {
+            [key: string]: unknown;
+            dictionary: { [key: string]: string };
+          },
+          transferState: TransferState
+        ) => new JssTranslationServerLoaderService(ssrViewBag, transferState),
+        deps: ['JSS_SERVER_VIEWBAG', TransferState],
       },
     }),
   ],