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

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,3 +1,4 @@
+import 'dotenv/config';
 import * as fs from 'fs';
 import * as path from 'path';
 import { constantCase } from 'constant-case';
@@ -23,8 +24,16 @@ const defaultConfigValue: JssConfig = {
   defaultServerRoute: '/',
 };
 
-generateConfig('src/environments/environment.js', defaultConfigValue, { production: false });
-generateConfig('src/environments/environment.prod.js', defaultConfigValue, { production: true });
+async function main() {
+  await generateConfig('src/environments/environment.js', defaultConfigValue, {
+    production: false,
+  });
+  await generateConfig('src/environments/environment.prod.js', defaultConfigValue, {
+    production: true,
+  });
+}
+
+main();
 
 /**
  * Generates the JSS config based on config plugins (under ./config/plugins)
@@ -38,7 +47,15 @@ export function generateConfig(
   defaultConfig: JssConfig = defaultConfigValue,
   configOverrides?: { [key: string]: unknown }
 ) {
-  jssConfigFactory
+  // Handle undefined values
+  defaultConfig = Object.keys(defaultConfig).reduce((acc, key) => {
+    return {
+      ...acc,
+      [key]: defaultConfig[key] || '',
+    };
+  }, {});
+
+  return jssConfigFactory
     .create(defaultConfig)
     .then((config) => {
       writeConfig(Object.assign(config, configOverrides), outputPath);
@@ -67,9 +84,11 @@ export function writeConfig(config: JssConfig, outputPath?: string) {
 
   // 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`;
+    // Handle undefined values
+    const value = config[prop] || '';
+    configText += `config.${prop} = process.env.${constantCase(
+      prop
+    )} || "${value.toString().trim()}";\n`;
   });
 
   configText += `module.exports.environment = config;`;

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/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('src/environments/environment.js');
+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,22 +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,14 +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';
-import { clientFactory } from './src/app/lib/graphql-client-factory';
-import { dictionaryServiceFactory } from './src/app/lib/dictionary-service-factory';
-import { layoutServiceFactory } from './src/app/lib/layout-service-factory';
 
 export * from './src/main.server';
 
+export * from './server.exports';
+
 const http = require('http');
 const https = require('https');
 
@@ -100,22 +98,4 @@ function parseRouteUrl(url: string) {
   };
 }
 
-const apiKey = environment.sitecoreApiKey;
-const siteName = environment.sitecoreSiteName;
-const defaultLanguage = environment.defaultLanguage;
-const graphQLEndpointPath = environment.graphQLEndpointPath;
-const graphQLEndpoint = environment.graphQLEndpoint;
-
-export {
-  renderView,
-  parseRouteUrl,
-  setUpDefaultAgents,
-  apiKey,
-  siteName,
-  clientFactory,
-  dictionaryServiceFactory,
-  layoutServiceFactory,
-  defaultLanguage,
-  graphQLEndpointPath,
-  graphQLEndpoint,
-};
+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.module.ts

@@ -1,9 +1,8 @@
 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';
@@ -11,6 +10,7 @@ import { JssTranslationClientLoaderService } from './i18n/jss-translation-client
 import { JssTranslationLoaderService } from './i18n/jss-translation-loader.service';
 import { GraphQLModule } from './jss-graphql.module';
 import { JssMetaService } from './jss-meta.service';
+import { JssContextService } from './jss-context.service';
 
 @NgModule({
   imports: [
@@ -20,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,

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],
       },
     }),
   ],

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/src/app/i18n/jss-translation-client-loader.service.ts

@@ -1,16 +1,24 @@
-import { makeStateKey, Injectable } from '@angular/core';
+import { Injectable, TransferState } from '@angular/core';
 import { TranslateLoader } from '@ngx-translate/core';
-import { EMPTY } from 'rxjs';
-
-export const dictionaryStateKey = makeStateKey('jssDictionary');
+import { DictionaryPhrases } from '@sitecore-jss/sitecore-jss-angular';
+import { EMPTY, Observable, of } from 'rxjs';
+import { JssTranslationLoaderService } from './jss-translation-loader.service';
+import { dictionaryStateKey } from './jss-translation-server-loader.service';
 
 @Injectable()
 export class JssTranslationClientLoaderService implements TranslateLoader {
   constructor(
-    private fallbackLoader: TranslateLoader,
-  ) { }
+    private fallbackLoader: JssTranslationLoaderService,
+    private transferState: TransferState
+  ) {}
+
+  getTranslation(lang: string): Observable<DictionaryPhrases> {
+    const dictionary = this.transferState.get(dictionaryStateKey, null);
+
+    if (dictionary) {
+      return of(dictionary);
+    }
 
-  getTranslation(lang: string) {
     if (!this.fallbackLoader) {
       return EMPTY;
     }

package/dist/templates/angular/src/app/i18n/jss-translation-server-loader.service.ts

@@ -1,17 +1,29 @@
-import { Inject, Injectable } from '@angular/core';
+import { Inject, Injectable, makeStateKey, StateKey, TransferState } from '@angular/core';
 import { TranslateLoader } from '@ngx-translate/core';
+import { DictionaryPhrases } from '@sitecore-jss/sitecore-jss-angular';
 import { of as observableOf, EMPTY } from 'rxjs';
 
+export const dictionaryStateKey: StateKey<DictionaryPhrases> = makeStateKey<DictionaryPhrases>(
+  'dictionary'
+);
+
 @Injectable()
 export class JssTranslationServerLoaderService implements TranslateLoader {
   constructor(
     // this initial state from sitecore is injected by server.bundle for "integrated" mode
     @Inject('JSS_SERVER_VIEWBAG')
-    private serverViewBag: { [key: string]: unknown; dictionary: { [key: string]: string } }
+    private serverViewBag: { [key: string]: unknown; dictionary: DictionaryPhrases },
+    private transferState: TransferState
   ) {}
   getTranslation(_lang: string) {
     // read initial dictionary from data injected via server.bundle wrapper
     const dictionary = this.serverViewBag.dictionary;
+
+    // set the dictionary in transfer state for the client
+    // since for ng-translate there is no obvious way to pass the server side dictionary to the client
+    // https://github.com/ngx-translate/core/issues/1207#issuecomment-700741671
+    this.transferState.set(dictionaryStateKey, dictionary);
+
     if (dictionary) {
       return observableOf(dictionary);
     }

package/dist/templates/angular/src/app/jss-context.server-side.service.ts

@@ -3,6 +3,7 @@ import { JssContextService, jssKey } from './jss-context.service';
 import { JssState } from './JssState';
 import { Observable, of as observableOf } from 'rxjs';
 import { JssLayoutService } from './layout/jss-layout.service';
+import { JssStateService } from '@sitecore-jss/sitecore-jss-angular';
 
 /**
  * Stores the JSS app's context (current route and Sitecore context data).
@@ -14,10 +15,11 @@ export class JssContextServerSideService extends JssContextService {
   constructor(
     protected transferState: TransferState,
     protected layoutService: JssLayoutService,
+    protected stateService: JssStateService<JssState>,
     // this initial state from sitecore is injected by server.bundle for "integrated" mode
     @Inject('JSS_SERVER_LAYOUT_DATA') private serverToSsrState: JssState
   ) {
-    super(transferState, layoutService);
+    super(transferState, layoutService, stateService);
   }
   changeRoute(_route: string, _language: string): Observable<JssState> {
     // console.log('Server route change to ' + route);
@@ -34,7 +36,7 @@ export class JssContextServerSideService extends JssContextService {
     }
 
     // read initial state from data injected via server.bundle wrapper
-    this.state.next(this.serverToSsrState);
+    this.stateService.setState(this.serverToSsrState);
 
     // place the initial state into TransferState for the client
     this.transferState.set<JssState>(jssKey, this.serverToSsrState);