create-sitecore-jss 22.2.0-canary.37 → 22.2.0-canary.39

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

@@ -79,12 +79,14 @@ function generateComponentFactory() {
   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;
       })
@@ -118,6 +120,8 @@ function generateComponentFactory() {
     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);
@@ -144,6 +148,10 @@ 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,

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

@@ -4,15 +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 { getGraphQLClientFactoryConfig } from './src/app/lib/graphql-client-factory/config';
-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');
 
@@ -101,20 +98,4 @@ function parseRouteUrl(url: string) {
   };
 }
 
-const apiKey = environment.sitecoreApiKey;
-const siteName = environment.sitecoreSiteName;
-const defaultLanguage = environment.defaultLanguage;
-const getClientFactoryConfig = getGraphQLClientFactoryConfig;
-
-export {
-  renderView,
-  parseRouteUrl,
-  setUpDefaultAgents,
-  apiKey,
-  siteName,
-  clientFactory,
-  getClientFactoryConfig,
-  dictionaryServiceFactory,
-  layoutServiceFactory,
-  defaultLanguage,
-};
+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-xmcloud/scripts/bootstrap.ts

@@ -0,0 +1,28 @@
+import 'dotenv/config';
+
+/*
+  BOOTSTRAPPING
+  The bootstrap process runs before build, and generates TS that needs to be
+  included into the build - specifically, the component name to component mapping,
+  and the global config module.
+*/
+
+/*
+   PLUGINS GENERATION
+*/
+require('./generate-plugins');
+
+/*
+  CONFIG GENERATION
+*/
+require('./generate-config');
+
+/*
+  COMPONENT FACTORY GENERATION
+*/
+require('./generate-component-factory');
+
+/*
+  METADATA GENERATION
+*/
+require('./generate-metadata');

package/dist/templates/angular-xmcloud/scripts/generate-metadata.ts

@@ -0,0 +1,25 @@
+import fs from 'fs';
+import path from 'path';
+import { Metadata, getMetadata } from '@sitecore-jss/sitecore-jss-dev-tools';
+
+/*
+  METADATA GENERATION
+  Generates the /src/environments/metadata.json file which contains application 
+  configuration metadata that is used for Sitecore XM Cloud integration.
+*/
+generateMetadata();
+
+function generateMetadata(): void {
+  const metadata: Metadata = getMetadata();
+  writeMetadata(metadata);
+}
+
+/**
+ * Writes the metadata object to disk.
+ * @param {Metadata} metadata metadata to write.
+ */
+function writeMetadata(metadata: Metadata): void {
+  const filePath = path.resolve('src/environments/metadata.json');
+  console.log(`Writing metadata to ${filePath}`);
+  fs.writeFileSync(filePath, JSON.stringify(metadata, null, 2), { encoding: 'utf8' });
+}

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

@@ -0,0 +1,28 @@
+import clientFactory from './src/app/lib/graphql-client-factory';
+import { getGraphQLClientFactoryConfig } from './src/app/lib/graphql-client-factory/config';
+import { dictionaryServiceFactory } from './src/app/lib/dictionary-service-factory';
+import { layoutServiceFactory } from './src/app/lib/layout-service-factory';
+import { environment } from './src/environments/environment';
+import { components } from './src/app/components/app-components.module';
+import metadata from './src/environments/metadata.json';
+
+/**
+ * Define the required configuration values to be exported from the server.bundle.ts.
+ */
+
+const apiKey = environment.sitecoreApiKey;
+const siteName = environment.sitecoreSiteName;
+const defaultLanguage = environment.defaultLanguage;
+const getClientFactoryConfig = getGraphQLClientFactoryConfig;
+
+export {
+  apiKey,
+  siteName,
+  clientFactory,
+  getClientFactoryConfig,
+  dictionaryServiceFactory,
+  layoutServiceFactory,
+  defaultLanguage,
+  components,
+  metadata,
+};

package/dist/templates/nextjs-xmcloud/src/lib/page-props-factory/plugins/preview-mode.ts

@@ -20,13 +20,14 @@ class PreviewModePlugin implements Plugin {
 
     // If we're in Pages preview (editing) Metadata Edit Mode, prefetch the editing data
     if (isEditingMetadataPreviewData(context.previewData)) {
-      const { site, itemId, language, version, variantIds } = context.previewData;
+      const { site, itemId, language, version, variantIds, layoutKind } = context.previewData;
 
       const data = await graphQLEditingService.fetchEditingData({
         siteName: site,
         itemId,
         language,
         version,
+        layoutKind,
       });
 
       if (!data) {

package/dist/templates/node-headless-ssr-proxy/src/config.ts

@@ -1,4 +1,4 @@
-import { ProxyConfig, ServerBundle } from '@sitecore-jss/sitecore-jss-proxy';
+import { headlessProxy } from '@sitecore-jss/sitecore-jss-proxy';
 import fs from 'fs';
 import { RestDictionaryService } from '@sitecore-jss/sitecore-jss/i18n';
 import { httpAgentsConfig } from './httpAgents';
@@ -13,7 +13,7 @@ let siteName = process.env.SITECORE_SITE_NAME || appName;
 
 const bundlePath = process.env.SITECORE_JSS_SERVER_BUNDLE || `../dist/${appName}/server.bundle`;
 
-const serverBundle = require(bundlePath) as ServerBundle;
+const serverBundle = require(bundlePath) as headlessProxy.ServerBundle;
 
 httpAgentsConfig.setUpDefaultAgents(serverBundle);
 
@@ -33,7 +33,7 @@ const dictionaryService = new RestDictionaryService({
 /**
  * @type {ProxyConfig}
  */
-export const config: ProxyConfig = {
+export const config: headlessProxy.ProxyConfig = {
   /**
    * The require'd server.bundle.js file from your pre-built JSS app
    */

package/dist/templates/node-headless-ssr-proxy/src/httpAgents.ts

@@ -1,4 +1,4 @@
-import { ServerBundle } from '@sitecore-jss/sitecore-jss-proxy';
+import { headlessProxy } from '@sitecore-jss/sitecore-jss-proxy';
 import keepAlive from 'agentkeepalive';
 import http from 'http';
 import https from 'https';
@@ -14,7 +14,7 @@ const httpAgent = new keepAlive(keepAliveConfig);
 const httpsAgent = (new keepAlive.HttpsAgent(keepAliveConfig) as unknown) as https.Agent;
 
 interface HttpAgentsConfig {
-  setUpDefaultAgents: (serverBundle: ServerBundle) => void;
+  setUpDefaultAgents: (serverBundle: headlessProxy.ServerBundle) => void;
   getAgent: (url: string) => http.Agent | https.Agent;
 }
 

package/dist/templates/node-headless-ssr-proxy/src/index.ts

@@ -1,7 +1,7 @@
 import express from 'express';
 import compression from 'compression';
 import 'dotenv/config';
-import scProxy from '@sitecore-jss/sitecore-jss-proxy';
+import { headlessProxy } from '@sitecore-jss/sitecore-jss-proxy';
 import { config } from './config';
 //import { cacheMiddleware } from './cacheMiddleware';
 
@@ -42,7 +42,14 @@ server.use((req, _res, next) => {
 });
 
 // For any other requests, we render app routes server-side and return them
-server.use('*', scProxy(config.serverBundle.renderView, config, config.serverBundle.parseRouteUrl));
+server.use(
+  '*',
+  headlessProxy.middleware(
+    config.serverBundle.renderView,
+    config,
+    config.serverBundle.parseRouteUrl
+  )
+);
 
 server.listen(port, () => {
   console.log(`server listening on port ${port}!`);

package/dist/templates/node-xmcloud-proxy/.env

@@ -1,3 +1,9 @@
+# To secure the Sitecore editor endpoint exposed by your proxy app
+# (`/api/editing/render` by default), a secret token is used.
+# The environment variable is used by `editingRouter`
+# We recommend an alphanumeric value of at least 16 characters.
+JSS_EDITING_SECRET=
+
 # Your proxy port (default: 3001)
 PROXY_PORT=
 

package/dist/templates/node-xmcloud-proxy/package.json

@@ -10,6 +10,7 @@
     "start": "ts-node ./src/index.ts"
   },
   "dependencies": {
+    "@sitecore-jss/sitecore-jss-proxy": "~22.2.0-canary",
     "compression": "^1.7.4",
     "express": "^4.18.2",
     "dotenv": "^16.0.3",

package/dist/templates/node-xmcloud-proxy/src/index.ts

@@ -3,6 +3,7 @@ import express, { Response } from 'express';
 import compression from 'compression';
 import { createProxyMiddleware } from 'http-proxy-middleware';
 import { debug } from '@sitecore-jss/sitecore-jss';
+import { editingRouter } from '@sitecore-jss/sitecore-jss-proxy';
 import { config } from './config';
 
 const server = express();
@@ -26,6 +27,8 @@ const requiredProperties = [
   'defaultLanguage',
   'layoutServiceFactory',
   'dictionaryServiceFactory',
+  'components',
+  'metadata',
 ];
 
 const missingProperties = requiredProperties.filter((property) => !config.serverBundle[property]);
@@ -46,7 +49,7 @@ const graphQLEndpoint = (() => {
 
   try {
     const graphQLEndpoint = new URL(clientFactoryConfig.endpoint);
-    // Browser request path to the proxy. Includes only the pathname. 
+    // Browser request path to the proxy. Includes only the pathname.
     const pathname = graphQLEndpoint.pathname;
     // Target URL for the proxy. Can't include the query string.
     const target = `${graphQLEndpoint.protocol}//${graphQLEndpoint.hostname}${pathname}`;
@@ -125,6 +128,19 @@ server.use(
   })
 );
 
+/**
+ * Proxy editing requests through the editing router
+ */
+server.use(
+  '/api/editing',
+  editingRouter({
+    config: {
+      components: config.serverBundle.components,
+      metadata: config.serverBundle.metadata,
+    },
+  })
+);
+
 server.use(async (req, res) => {
   debug.proxy(`performing SSR for ${req.originalUrl}`);
 

package/dist/templates/node-xmcloud-proxy/src/types.ts

@@ -3,44 +3,9 @@ import {
   GraphQLRequestClientFactoryConfig,
 } from '@sitecore-jss/sitecore-jss';
 import { DictionaryService } from '@sitecore-jss/sitecore-jss/i18n';
-import { LayoutService, LayoutServiceData } from '@sitecore-jss/sitecore-jss/layout';
-
-interface ServerResponse {
-  /**
-   * The rendered HTML to return to the client
-   */
-  html: string;
-  /**
-   * Set the HTTP status code. If not set, the status code returned from Layout Service is returned.
-   */
-  status?: number;
-  /**
-   * Sets a redirect URL, causing the reply to send a HTTP redirect instead of the HTML content.
-   * Note: when using this you must set the status code to 301 or 302.
-   */
-  redirect?: string;
-}
-
-declare type AppRenderer = (
-  callback: (error: Error | null, result: ServerResponse | null) => void,
-  path: string,
-  /**
-   * Data returned by Layout Service. If the route does not exist, null.
-   */
-  layoutData: LayoutServiceData,
-  viewBag: {
-    [key: string]: unknown;
-    dictionary: { [key: string]: string };
-  }
-) => void;
-
-declare type RouteUrlParser = (
-  url: string
-) => {
-  sitecoreRoute?: string;
-  lang?: string;
-  qsParams?: string;
-};
+import { Metadata } from '@sitecore-jss/sitecore-jss/utils';
+import { LayoutService } from '@sitecore-jss/sitecore-jss/layout';
+import { AppRenderer, RouteUrlParser } from '@sitecore-jss/sitecore-jss-proxy';
 
 export interface ServerBundle {
   [key: string]: unknown;
@@ -52,6 +17,8 @@ export interface ServerBundle {
   defaultLanguage: string;
   layoutServiceFactory: { create: () => LayoutService };
   dictionaryServiceFactory: { create: () => DictionaryService };
+  components: string[] | Map<string, unknown>;
+  metadata: Metadata;
 }
 
 export interface Config {

package/package.json

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