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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "create-sitecore-jss",
-  "version": "22.2.0-canary.9",
+  "version": "22.3.0-canary.1",
   "description": "Sitecore JSS initializer",
   "bin": "./dist/index.js",
   "scripts": {
@@ -63,5 +63,5 @@
     "ts-node": "^10.9.1",
     "typescript": "~4.9.5"
   },
-  "gitHead": "843696778d1ce2cb8cb4d0ff21bf60da5df3020e"
+  "gitHead": "204eb3427f26d4ba8c08f44cf9c772f19f2820a8"
 }

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

@@ -1,166 +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[] = [];
-
-  packages.forEach((p) => {
-    const variables = p.components
-      .map((c) => {
-        registrations.push(`{ name: '${c.componentName}', type: ${c.moduleName} },`);
-        declarations.push(`${c.moduleName},`);
-
-        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`;
-
-    // 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')}
-
-@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/src/app/lib/graphql-client-factory.ts

@@ -1,28 +0,0 @@
-import {
-  GraphQLRequestClientFactoryConfig,
-  GraphQLRequestClient,
-} from '@sitecore-jss/sitecore-jss-angular';
-import { environment as env } from '../../environments/environment';
-
-// The GraphQLRequestClientFactory serves as the central hub for executing GraphQL requests within the application
-
-/**
- * Creates a new GraphQLRequestClientFactory instance
- * @returns GraphQLRequestClientFactory instance
- */
-export const createGraphQLClientFactory = () => {
-  let clientConfig: GraphQLRequestClientFactoryConfig;
-
-  if (env.graphQLEndpoint && env.sitecoreApiKey) {
-    clientConfig = {
-      endpoint: env.graphQLEndpoint,
-      apiKey: env.sitecoreApiKey,
-    };
-  } else {
-    throw new Error('Please configure your graphQLEndpoint and sitecoreApiKey.');
-  }
-
-  return GraphQLRequestClient.createClientFactory(clientConfig);
-};
-
-export const clientFactory = createGraphQLClientFactory();

package/dist/templates/angular-xmcloud/src/app/lib/graphql-client-factory.ts

@@ -1,44 +0,0 @@
-import {
-  GraphQLRequestClientFactoryConfig,
-  GraphQLRequestClient,
-} from '@sitecore-jss/sitecore-jss-angular';
-import { environment as env } from '../../environments/environment';
-
-// The GraphQLRequestClientFactory serves as the central hub for executing GraphQL requests within the application
-
-/**
- * Creates a new GraphQLRequestClientFactory instance
- * @returns GraphQLRequestClientFactory instance
- */
-export const createGraphQLClientFactory = () => {
-  let clientConfig: GraphQLRequestClientFactoryConfig;
-
-  // If we are in a production environment we are going to use Node XM Cloud proxy
-  if (env.production === 'true') {
-    if (env.proxyHost && env.sitecoreApiKey && env.graphQLEndpoint) {
-      // Server side requests should go directly to the Sitecore, browser requests should go through the proxy.
-      clientConfig = {
-        endpoint:
-          typeof window === 'undefined'
-            ? env.graphQLEndpoint
-            : `${env.proxyHost}${env.graphQLEndpointPath}`,
-        apiKey: env.sitecoreApiKey,
-      };
-    } else {
-      throw new Error('Please configure your proxyHost, sitecoreApiKey, graphQLEndpoint.');
-    }
-  } else {
-    if (env.graphQLEndpoint && env.sitecoreApiKey) {
-      clientConfig = {
-        endpoint: env.graphQLEndpoint,
-        apiKey: env.sitecoreApiKey,
-      };
-    } else {
-      throw new Error('Please configure your graphQLEndpoint and sitecoreApiKey.');
-    }
-  }
-
-  return GraphQLRequestClient.createClientFactory(clientConfig);
-};
-
-export const clientFactory = createGraphQLClientFactory();

package/dist/templates/nextjs-xmcloud/src/lib/context/index.ts

@@ -1,22 +0,0 @@
-import { Context } from '@sitecore-jss/sitecore-jss-nextjs/context';
-import config from 'temp/config';
-
-import Events from './sdk/events';
-
-/**
- * List of SDKs to be initialized.
- * Each SDK is defined as a module with the @type {SDK} type.
- */
-const sdks = {
-  Events,
-};
-
-/**
- * Context instance that is used to initialize the application Context and associated Software Development Kits (SDKs).
- */
-export const context = new Context<typeof sdks>({
-  sitecoreEdgeUrl: config.sitecoreEdgeUrl,
-  sitecoreEdgeContextId: config.sitecoreEdgeContextId,
-  siteName: config.sitecoreSiteName,
-  sdks,
-});

package/dist/templates/nextjs-xmcloud/src/lib/context/sdk/events.ts

@@ -1,26 +0,0 @@
-import * as Events from '@sitecore-cloudsdk/events/browser';
-import { SDK } from '@sitecore-jss/sitecore-jss-nextjs/context';
-
-const sdkModule: SDK<typeof Events> = {
-  sdk: Events,
-  init: async (props) => {
-    // Events module can't be initialized on the server side
-    // We also don't want to initialize it in development mode
-    if (typeof window === 'undefined') 
-      throw 'Browser Events SDK is not initialized in server context';
-    if (process.env.NODE_ENV === 'development')
-      throw 'Browser Events SDK is not initialized in development environment';
-    
-    await Events.init({
-      siteName: props.siteName,
-      sitecoreEdgeUrl: props.sitecoreEdgeUrl,
-      sitecoreEdgeContextId: props.sitecoreEdgeContextId,
-      // Replace with the top level cookie domain of the website that is being integrated e.g ".example.com" and not "www.example.com"
-      cookieDomain: window.location.hostname.replace(/^www\./, ''),
-      // Cookie may be created in personalize middleware (server), but if not we should create it here
-      enableBrowserCookie: true,
-    });
-  },
-};
-
-export default sdkModule;