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

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

@@ -0,0 +1,210 @@
+import 'dotenv/config';
+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 { healthCheck } from '@sitecore-jss/sitecore-jss-proxy';
+import { config } from './config';
+
+const server = express();
+
+const {
+  renderView,
+  parseRouteUrl,
+  dictionaryServiceFactory,
+  layoutServiceFactory,
+} = config.serverBundle;
+
+/**
+ * Required server bundle properties
+ */
+const requiredProperties = [
+  'renderView',
+  'parseRouteUrl',
+  'clientFactory',
+  'getClientFactoryConfig',
+  'defaultLanguage',
+  'layoutServiceFactory',
+  'dictionaryServiceFactory',
+  'components',
+  'metadata',
+];
+
+const missingProperties = requiredProperties.filter((property) => !config.serverBundle[property]);
+
+if (missingProperties.length > 0) {
+  throw new Error(
+    `ERROR: The serverBundle should export the following properties: ${missingProperties.join(
+      ', '
+    )}. Please check your server bundle.`
+  );
+}
+
+const layoutService = layoutServiceFactory.create();
+
+const dictionaryService = dictionaryServiceFactory.create();
+
+const clientFactoryConfig = config.serverBundle.getClientFactoryConfig();
+
+/**
+ * GraphQL endpoint resolution to meet the requirements of the http-proxy-middleware
+ */
+const graphQLEndpoint = (() => {
+  try {
+    const graphQLEndpoint = new URL(clientFactoryConfig.endpoint);
+    // 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}`;
+
+    return {
+      target,
+      path: pathname,
+    };
+  } catch (error) {
+    throw new Error(
+      `ERROR: The serverBundle should export a getClientFactoryConfig function with valid GraphQL endpoint URL returned, current value is ${clientFactoryConfig.endpoint}. ` +
+        'Please check your server bundle.'
+    );
+  }
+})();
+
+/**
+ * Parse requested url in order to detect current route and language
+ * @param {string} reqRoute requested route
+ */
+const getRouteParams = (reqRoute: string) => {
+  const routeParams = parseRouteUrl(reqRoute);
+  let lang;
+  let route;
+
+  if (routeParams) {
+    route = routeParams.sitecoreRoute || '/';
+
+    if (!route.startsWith('/')) {
+      route = `/${route}`;
+    }
+
+    lang = routeParams.lang || '';
+  }
+
+  return { route, lang };
+};
+
+/**
+ * Handle unexpected error
+ * @param {Response} res server response
+ * @param {Error} err error
+ */
+const handleError = (res: Response, err: unknown) => {
+  debug.proxy('response error %o', err);
+
+  res.status(500).send('Internal Server Error');
+};
+
+// enable gzip compression for appropriate file types
+server.use(compression());
+
+// turn off x-powered-by http header
+server.settings['x-powered-by'] = false;
+
+// Serve static app assets from local /dist folder
+server.use(
+  '/dist',
+  express.static('dist', {
+    fallthrough: false, // force 404 for unknown assets under /dist
+  })
+);
+
+/**
+ * Proxy browser GraphQL requests to the Sitecore GraphQL endpoint
+ */
+server.use(
+  graphQLEndpoint.path,
+  createProxyMiddleware({
+    target: graphQLEndpoint.target,
+    changeOrigin: true,
+  })
+);
+
+/**
+ * The health check endpoint
+ */
+server.use(healthCheck());
+
+/**
+ * Proxy editing requests through the editing router
+ */
+server.use(
+  '/api/editing',
+  editingRouter({
+    config: {
+      components: config.serverBundle.components,
+      metadata: config.serverBundle.metadata,
+    },
+    render: {
+      clientFactory: config.serverBundle.clientFactory,
+      renderView,
+    },
+  })
+);
+
+server.use(async (req, res) => {
+  debug.proxy(`performing SSR for ${req.originalUrl}`);
+
+  try {
+    const { route, lang } = getRouteParams(req.originalUrl);
+
+    if (!route) {
+      debug.proxy('no route detected, returning 404');
+
+      res.sendStatus(404);
+
+      return;
+    }
+
+    // Language is required. In case it's not specified in the requested URL, fallback to the default language from the app configuration.
+    const layoutData = await layoutService.fetchLayoutData(
+      route,
+      lang || config.serverBundle.defaultLanguage
+    );
+
+    const viewBag = { dictionary: {} };
+
+    viewBag.dictionary = await dictionaryService.fetchDictionaryData(
+      layoutData.sitecore.context.language || config.serverBundle.defaultLanguage
+    );
+
+    renderView(
+      (err, result) => {
+        if (err) {
+          handleError(res, err);
+          return;
+        }
+
+        if (!result) {
+          debug.proxy('no result returned from renderView, returning 204');
+
+          res.status(204).send();
+          return;
+        }
+
+        const statusCode = layoutData.sitecore.route ? 200 : 404;
+
+        debug.proxy('sending response with status %s', statusCode);
+
+        res.status(statusCode).send(result.html);
+      },
+      route,
+      layoutData,
+      viewBag
+    );
+  } catch (err) {
+    handleError(res, err);
+  }
+});
+
+server.listen(config.port, () => {
+  console.log(`server listening on port ${config.port}!`);
+});

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

@@ -0,0 +1,27 @@
+import {
+  GraphQLRequestClientFactory,
+  GraphQLRequestClientFactoryConfig,
+} from '@sitecore-jss/sitecore-jss';
+import { DictionaryService } from '@sitecore-jss/sitecore-jss/i18n';
+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;
+  renderView: AppRenderer;
+  parseRouteUrl: RouteUrlParser;
+  clientFactory: GraphQLRequestClientFactory;
+  getClientFactoryConfig: () => GraphQLRequestClientFactoryConfig;
+  defaultLanguage: string;
+  layoutServiceFactory: { create: () => LayoutService };
+  dictionaryServiceFactory: { create: () => DictionaryService };
+  components: string[] | Map<string, unknown>;
+  metadata: Metadata;
+}
+
+export interface Config {
+  [key: string]: unknown;
+  port: string | number;
+  serverBundle: ServerBundle;
+}

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

@@ -0,0 +1,22 @@
+{
+  "compilerOptions": {
+    "newLine": "LF",
+    "emitDecoratorMetadata": true,
+    "experimentalDecorators": true,
+    "noFallthroughCasesInSwitch": true,
+    "rootDir": ".",
+    "esModuleInterop": true,
+    "forceConsistentCasingInFileNames": true,
+    "strict": true,
+    "noImplicitAny": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "noImplicitReturns": true,
+    "strictFunctionTypes": false,
+    "downlevelIteration": true,
+    "moduleResolution": "node",
+    "isolatedModules": true,
+    "allowSyntheticDefaultImports": true
+  },
+  "exclude": ["node_modules", "dist"]
+}

package/dist/templates/react/package.json

@@ -1,7 +1,7 @@
 {
   "name": "<%- appName %>",
   "description": "Application utilizing Sitecore JavaScript Services and React (create-react-app).",
-  "version": "22.2.0-canary",
+  "version": "22.3.0-canary",
   "private": true,
   "config": {
     "appName": "<%- appName %>",
@@ -28,7 +28,7 @@
   "license": "Apache-2.0",
   "dependencies": {
     "@apollo/client": "^3.7.1",
-    "@sitecore-jss/sitecore-jss-react": "~22.2.0-canary",
+    "@sitecore-jss/sitecore-jss-react": "~22.3.0-canary",
     "axios": "^1.2.0",
     "bootstrap": "^5.2.3",
     "cross-fetch": "^3.1.5",
@@ -53,9 +53,9 @@
     "@babel/preset-env": "^7.20.2",
     "@babel/preset-react": "^7.18.6",
     "@babel/register": "~7.18.9",
-    "@sitecore-jss/sitecore-jss-cli": "~22.2.0-canary",
-    "@sitecore-jss/sitecore-jss-dev-tools": "~22.2.0-canary",
-    "@sitecore-jss/sitecore-jss-rendering-host": "~22.2.0-canary",
+    "@sitecore-jss/sitecore-jss-cli": "~22.3.0-canary",
+    "@sitecore-jss/sitecore-jss-dev-tools": "~22.3.0-canary",
+    "@sitecore-jss/sitecore-jss-rendering-host": "~22.3.0-canary",
     "babel-loader": "~9.1.0",
     "babel-preset-react-app": "~10.0.1",
     "chalk": "~4.1.2",

package/dist/templates/react/scripts/generate-config.js

@@ -31,6 +31,11 @@ generateConfig();
  * NOTE! Any configs returned here will be written into the client-side JS bundle. DO NOT PUT SECRETS HERE.
  */
 function generateConfig() {
+  // Handle undefined values
+  Object.keys(defaultConfig).forEach((prop) => {
+    defaultConfig[prop] = defaultConfig[prop] || '';
+  });
+
   try {
     config = jssConfigFactory.create(defaultConfig);
   } catch (error) {
@@ -50,9 +55,11 @@ const config = {};\n`;
 
   // Set base configuration values, allowing override with environment variables
   Object.keys(config).forEach(prop => {
-    configText += `config.${prop} = process.env.REACT_APP_${constantCase(prop)} || "${
-      config[prop]?.trim()
-    }";\n`;
+    // Handle undefined values
+    const value = config[prop] || '';
+    configText += `config.${prop} = process.env.REACT_APP_${constantCase(
+      prop
+    )} || "${value.trim()}";\n`;
   });
   configText += 'module.exports = config;';
 

package/dist/templates/react-native/package.json

@@ -1,6 +1,6 @@
 {
   "name": "<%- appName %>",
-  "version": "22.2.0-canary",
+  "version": "22.3.0-canary",
   "description": "A basic React Native app utilizing Sitecore JavaScript Services",
   "config": {
     "appName": "<%- appName %>",
@@ -23,7 +23,7 @@
   },
   "dependencies": {
     "@react-native-community/masked-view": "^0.1.10",
-    "@sitecore-jss/sitecore-jss-react-native": "~22.2.0-canary",
+    "@sitecore-jss/sitecore-jss-react-native": "~22.3.0-canary",
     "prop-types": "^15.6.0",
     "react": "16.13.1",
     "react-native": "^0.63.4",
@@ -37,8 +37,8 @@
   },
   "private": true,
   "devDependencies": {
-    "@sitecore-jss/sitecore-jss-cli": "~22.2.0-canary",
-    "@sitecore-jss/sitecore-jss-dev-tools": "~22.2.0-canary",
+    "@sitecore-jss/sitecore-jss-cli": "~22.3.0-canary",
+    "@sitecore-jss/sitecore-jss-dev-tools": "~22.3.0-canary",
     "babel-core": "^6.26.0",
     "babel-eslint": "^8.2.1",
     "babel-plugin-inline-replace-variables": "^1.3.1",

package/dist/templates/vue/package.json

@@ -1,6 +1,6 @@
 {
   "name": "<%- appName %>",
-  "version": "22.2.0-canary",
+  "version": "22.3.0-canary",
   "description": "Application utilizing Sitecore JavaScript Services and Vue (vue-cli).",
   "private": true,
   "config": {
@@ -45,7 +45,7 @@
   "dependencies": {
     "@apollo/client": "^3.7.4",
     "@panter/vue-i18next": "~0.15.2",
-    "@sitecore-jss/sitecore-jss-vue": "~22.2.0-canary",
+    "@sitecore-jss/sitecore-jss-vue": "~22.3.0-canary",
     "@vue/apollo-composable": "4.0.0-beta.2",
     "@vue/apollo-option": "^4.0.0-alpha.20",
     "@vue/apollo-ssr": "^4.0.0-alpha.18",
@@ -64,8 +64,8 @@
   "devDependencies": {
     "@babel/eslint-parser": "^7.19.1",
     "@babel/register": "7.18.9",
-    "@sitecore-jss/sitecore-jss-cli": "~22.2.0-canary",
-    "@sitecore-jss/sitecore-jss-dev-tools": "~22.2.0-canary",
+    "@sitecore-jss/sitecore-jss-cli": "~22.3.0-canary",
+    "@sitecore-jss/sitecore-jss-dev-tools": "~22.3.0-canary",
     "@vue/cli-plugin-babel": "~5.0.8",
     "@vue/cli-plugin-eslint": "~5.0.8",
     "@vue/cli-service": "~5.0.8",

package/dist/templates/vue/scripts/generate-config.js

@@ -33,6 +33,11 @@ module.exports = function generateConfig(configOverrides) {
   // and finally config passed in the configOverrides param wins.
   const config = Object.assign(defaultConfig, scjssConfig, packageJson, configOverrides);
 
+  // Handle undefined values
+  Object.keys(config).forEach((prop) => {
+    config[prop] = config[prop] || '';
+  });
+
   // The GraphQL endpoint is an example of making a _computed_ config setting
   // based on other config settings.
   const computedConfig = {};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "create-sitecore-jss",
-  "version": "22.2.0-canary.83",
+  "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": "d56b18ae5aabcf3095dac9d45b9f28959bf10b64"
+  "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/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();