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

package/dist/templates/angular-sxp/proxy.conf.js

@@ -0,0 +1,43 @@
+/*
+  When the app runs in disconnected mode, and Sitecore is not present, we need to give
+  the app copies of the Sitecore APIs it depends on (layout service, dictionary service, content service)
+  to talk to so that the app can run using the locally defined disconnected data.
+
+  When the app runs in connected mode, Sitecore is present and some of the requests should be
+  proxied to the Sitecore API
+
+  This is accomplished by spinning up a small Express server that mocks the APIs, and then
+  telling angular-cli to proxy requests to the API paths to this express instance.
+
+*/
+const constants = require('@sitecore-jss/sitecore-jss-angular/cjs').constants;
+const environment = require('./src/environments/environment.js').environment;
+
+const port = 3043;
+
+const PROXY_CONFIG =
+  process.env.JSS_MODE === constants.JSS_MODE.DISCONNECTED
+    ? [
+        {
+          context: ['/data', '/sitecore'],
+          target: `http://localhost:${port}`,
+          secure: false,
+        },
+      ]
+    : [
+        {
+          context: [
+            // API endpoints
+            '/sitecore',
+            // media items
+            '/-',
+            // visitor identification
+            '/layouts',
+          ],
+          target: environment.sitecoreApiHost,
+          secure: false,
+          changeOrigin: true,
+        },
+      ];
+
+module.exports = PROXY_CONFIG;

package/dist/templates/angular-sxp/scripts/config/plugins/disconnected.ts

@@ -0,0 +1,29 @@
+import { JssConfig } from 'lib/config';
+import { ConfigPlugin } from '..';
+import { constants } from '@sitecore-jss/sitecore-jss-angular/cjs';
+const chalk = require('chalk');
+
+/**
+ * This plugin will check if fetchwith graphgl is beeing used in disconnected mode and throw error if so
+ */
+class DisconnectedPlugin implements ConfigPlugin {
+  // should come before other plugins
+  order = 2;
+
+  async exec(config: JssConfig) {
+    const disconnected = process.env.JSS_MODE === constants.JSS_MODE.DISCONNECTED;
+    if (disconnected && process.env.FETCH_WITH === constants.FETCH_WITH.GRAPHQL) {
+      throw new Error(
+        chalk.red(
+          'GraphQL requests to Dictionary and Layout services are not supported in disconnected mode.'
+        )
+      );
+    }
+
+    return Object.assign({}, config, {
+      sitecoreApiKey: config.sitecoreApiKey || 'no-api-key-set',
+    });
+  }
+}
+
+export const disconnectedPlugin = new DisconnectedPlugin();

package/dist/templates/{angular → angular-sxp}/sitecore/config/{{appName}}.config

@@ -1,90 +1,90 @@
-<!--
-  JSS Sitecore Configuration Patch File
-
-  This configuration file registers the JSS site with Sitecore, and configures the Layout Service
-  to work with it. Config patches need to be deployed to the Sitecore server.
-
-  Normally `jss deploy config` can do this for local development. To manually deploy, or to deploy via CI,
-  this file can be placed in the `App_Config/Include` folder, or a subfolder of it, within the Sitecore site.
--->
-<configuration xmlns:patch="http://www.sitecore.net/xmlconfig/"
-               xmlns:set="http://www.sitecore.net/xmlconfig/set/"
-               xmlns:role="http://www.sitecore.net/xmlconfig/role/">
-  <sitecore>
-    <settings>
-      <!--
-        PROXY CONFIGURATION
-        When running JSS with the headless proxy (node-headless-ssr-proxy),
-        the original IP address of clients is obscured by the proxy.
-        This setting tells Sitecore to read the forwarded header the proxy sends,
-        thus making analytics track the correct original client IP address.
-      -->
-      <setting name="Analytics.ForwardedRequestHttpHeader" set:value="X-Forwarded-For" />
-    </settings>
-    <sites>
-      <!--
-        JSS Site Registration
-        This configures the site with Sitecore - i.e. host headers, item paths.
-        If your JSS app lives within an existing Sitecore site, this may not be necessary.
-
-        IMPORTANT: JSS sites ship in 'live mode', which makes development and testing easy,
-        but disables workflow and publishing. Before going to production, change the `database`
-        below to `web` instead of `master`.
-      -->
-      <site patch:before="site[@name='website']"
-            inherits="website"
-            name="<%- appName %>"
-            hostName="<%- hostName.replace(/^https?:\/\//, '') %>"
-            rootPath="/sitecore/content/<%- appName %>"
-            startItem="/home"
-            database="master" />
-    </sites>
-    <javaScriptServices>
-      <apps>
-        <!--
-          JSS App Registration
-          The JSS app needs to be registered in order to support layout service and import services.
-
-          There are many available attributes, and they inherit the defaults if not explicitly specified here.
-          Defaults are defined in `/App_Config/Sitecore/JavaScriptServices/Sitecore.JavaScriptServices.Apps.config`
-
-          NOTE: graphQLEndpoint enables _Integrated GraphQL_. If not using integrated GraphQL, it can be removed.
-
-          NOTE: layoutServiceConfiguration should be set to "default" when using GraphQL Edge schema.
-          When using integrated GraphQL with Edge schema, a $language value is injected
-          since language is required in all Edge queries. "jss" configuration does not do this (which is backwards
-          compatible with JSS versions < 18.0.0).
-        -->
-        <app name="<%- appName %>"
-             layoutServiceConfiguration="default"
-             sitecorePath="/sitecore/content/<%- appName %>"
-             inherits="defaults"
-             useLanguageSpecificLayout="true"
-             graphQLEndpoint="/sitecore/api/graph/edge" />
-      </apps>
-      <!--
-        IMAGE RESIZING WHITELIST
-        Using Sitecore server-side media resizing (i.e. the `imageParams` or `srcSet` props on the `<Image/>` helper component)
-        could expose your Sitecore server to a denial-of-service attack by rescaling an image with many arbitrary dimensions.
-        In JSS resizing param sets that are unknown are rejected by a whitelist.
-
-        Sets of image sizing parameters that are used in app components must be whitelisted here.
-        If a param set is not whitelisted, the image will be returned _without resizing_.
-
-        To determine the image parameters being used, look at the query string on the `src` of the rendered image, i.e. '/img.jpg?mw=100&h=72' -> mw=100,h=72
-        Note: the parameter sets defined here are comma-delimited (,) instead of &-delimited like the query string. Multiple sets are endline-delimited.
-      -->
-      <allowedMediaParams>
-        <!-- XML element name is arbitary, useful for organizing and patching -->
-        <styleguide-image-sample>
-          mw=100,
-          mh=50
-        </styleguide-image-sample>
-        <styleguide-image-sample-adaptive>
-          mw=300
-          mw=100
-        </styleguide-image-sample-adaptive>
-      </allowedMediaParams>
-    </javaScriptServices>
-  </sitecore>
-</configuration>
+<!--
+  JSS Sitecore Configuration Patch File
+
+  This configuration file registers the JSS site with Sitecore, and configures the Layout Service
+  to work with it. Config patches need to be deployed to the Sitecore server.
+
+  Normally `jss deploy config` can do this for local development. To manually deploy, or to deploy via CI,
+  this file can be placed in the `App_Config/Include` folder, or a subfolder of it, within the Sitecore site.
+-->
+<configuration xmlns:patch="http://www.sitecore.net/xmlconfig/"
+               xmlns:set="http://www.sitecore.net/xmlconfig/set/"
+               xmlns:role="http://www.sitecore.net/xmlconfig/role/">
+  <sitecore>
+    <settings>
+      <!--
+        PROXY CONFIGURATION
+        When running JSS with the headless proxy (node-headless-ssr-proxy),
+        the original IP address of clients is obscured by the proxy.
+        This setting tells Sitecore to read the forwarded header the proxy sends,
+        thus making analytics track the correct original client IP address.
+      -->
+      <setting name="Analytics.ForwardedRequestHttpHeader" set:value="X-Forwarded-For" />
+    </settings>
+    <sites>
+      <!--
+        JSS Site Registration
+        This configures the site with Sitecore - i.e. host headers, item paths.
+        If your JSS app lives within an existing Sitecore site, this may not be necessary.
+
+        IMPORTANT: JSS sites ship in 'live mode', which makes development and testing easy,
+        but disables workflow and publishing. Before going to production, change the `database`
+        below to `web` instead of `master`.
+      -->
+      <site patch:before="site[@name='website']"
+            inherits="website"
+            name="<%- appName %>"
+            hostName="<%- hostName.replace(/^https?:\/\//, '') %>"
+            rootPath="/sitecore/content/<%- appName %>"
+            startItem="/home"
+            database="master" />
+    </sites>
+    <javaScriptServices>
+      <apps>
+        <!--
+          JSS App Registration
+          The JSS app needs to be registered in order to support layout service and import services.
+
+          There are many available attributes, and they inherit the defaults if not explicitly specified here.
+          Defaults are defined in `/App_Config/Sitecore/JavaScriptServices/Sitecore.JavaScriptServices.Apps.config`
+
+          NOTE: graphQLEndpoint enables _Integrated GraphQL_. If not using integrated GraphQL, it can be removed.
+
+          NOTE: layoutServiceConfiguration should be set to "default" when using GraphQL Edge schema.
+          When using integrated GraphQL with Edge schema, a $language value is injected
+          since language is required in all Edge queries. "jss" configuration does not do this (which is backwards
+          compatible with JSS versions < 18.0.0).
+        -->
+        <app name="<%- appName %>"
+             layoutServiceConfiguration="default"
+             sitecorePath="/sitecore/content/<%- appName %>"
+             inherits="defaults"
+             useLanguageSpecificLayout="true"
+             graphQLEndpoint="/sitecore/api/graph/edge" />
+      </apps>
+      <!--
+        IMAGE RESIZING WHITELIST
+        Using Sitecore server-side media resizing (i.e. the `imageParams` or `srcSet` props on the `<Image/>` helper component)
+        could expose your Sitecore server to a denial-of-service attack by rescaling an image with many arbitrary dimensions.
+        In JSS resizing param sets that are unknown are rejected by a whitelist.
+
+        Sets of image sizing parameters that are used in app components must be whitelisted here.
+        If a param set is not whitelisted, the image will be returned _without resizing_.
+
+        To determine the image parameters being used, look at the query string on the `src` of the rendered image, i.e. '/img.jpg?mw=100&h=72' -> mw=100,h=72
+        Note: the parameter sets defined here are comma-delimited (,) instead of &-delimited like the query string. Multiple sets are endline-delimited.
+      -->
+      <allowedMediaParams>
+        <!-- XML element name is arbitary, useful for organizing and patching -->
+        <styleguide-image-sample>
+          mw=100,
+          mh=50
+        </styleguide-image-sample>
+        <styleguide-image-sample-adaptive>
+          mw=300
+          mw=100
+        </styleguide-image-sample-adaptive>
+      </allowedMediaParams>
+    </javaScriptServices>
+  </sitecore>
+</configuration>

package/dist/templates/{angular → angular-sxp}/sitecore/definitions/components/graph-ql-integrated-demo.sitecore.graphql

@@ -1,71 +1,71 @@
-# This file contains a GraphQL query that will be executed and the result provided to
-# your JSS component. You can run this query in GraphiQL ($endpoint/ui) for a nice editing experience.
-
-# Note that we're executing _two queries_ (datasource and contextItem)
-# within the context of the IntegratedDemoQuery _operation_. This makes it
-# very efficient at gathering data from multiple sources.
-
-query IntegratedDemoQuery($datasource: String!, $contextItem: String!, $language: String!) {
-  # Datasource query
-  # $datasource will always be set to the ID of the rendering's datasource item
-  # (as long as the GraphQLData helper is used)
-  datasource: item(path: $datasource, language: $language) {
-    id
-    name
-    # Strongly-typed querying on known templates is possible!
-    ...on <%- helper.getAppPrefix(appPrefix, appName, false) %>GraphQLIntegratedDemo {
-      # Single-line text field
-      sample1 {
-        # the 'jsonValue' field is a JSON blob that represents the object that
-        # should be passed to JSS field rendering helpers (i.e. text, image, link)
-        jsonValue
-        value
-      }
-      # General Link field
-      sample2 {
-        jsonValue
-        # Structured querying of the field's values is possible
-        text
-        target
-        url
-        # Access to the template definition is possible
-        definition {
-          type
-          shared
-        }
-      }
-    }
-  }
-
-  # Context/route item query
-  # $contextItem will always be set to the ID of the current context item (the route item)
-  # (as long as the GraphQLData helper is used)
-  contextItem: item(path: $contextItem, language: $language) {
-    id
-    # Get the page title from the app route template
-    ...on <%- helper.getAppPrefix(appPrefix, appName, false) %>AppRoute {
-      pageTitle {
-        value
-      }
-    }
-
-    # List the children of the current route
-    children(hasLayout: true) {
-      results {
-        id
-        # typing fragments can be used anywhere!
-        # so in this case, we're grabbing the 'pageTitle'
-        # field on all child route items.
-        ...on <%- helper.getAppPrefix(appPrefix, appName, false) %>AppRoute {
-          pageTitle {
-            jsonValue
-            value
-          }
-        }
-        url {
-          path
-        }
-      }
-    }
-  }
-}
+# This file contains a GraphQL query that will be executed and the result provided to
+# your JSS component. You can run this query in GraphiQL ($endpoint/ui) for a nice editing experience.
+
+# Note that we're executing _two queries_ (datasource and contextItem)
+# within the context of the IntegratedDemoQuery _operation_. This makes it
+# very efficient at gathering data from multiple sources.
+
+query IntegratedDemoQuery($datasource: String!, $contextItem: String!, $language: String!) {
+  # Datasource query
+  # $datasource will always be set to the ID of the rendering's datasource item
+  # (as long as the GraphQLData helper is used)
+  datasource: item(path: $datasource, language: $language) {
+    id
+    name
+    # Strongly-typed querying on known templates is possible!
+    ...on <%- helper.getAppPrefix(appPrefix, appName, false) %>GraphQLIntegratedDemo {
+      # Single-line text field
+      sample1 {
+        # the 'jsonValue' field is a JSON blob that represents the object that
+        # should be passed to JSS field rendering helpers (i.e. text, image, link)
+        jsonValue
+        value
+      }
+      # General Link field
+      sample2 {
+        jsonValue
+        # Structured querying of the field's values is possible
+        text
+        target
+        url
+        # Access to the template definition is possible
+        definition {
+          type
+          shared
+        }
+      }
+    }
+  }
+
+  # Context/route item query
+  # $contextItem will always be set to the ID of the current context item (the route item)
+  # (as long as the GraphQLData helper is used)
+  contextItem: item(path: $contextItem, language: $language) {
+    id
+    # Get the page title from the app route template
+    ...on <%- helper.getAppPrefix(appPrefix, appName, false) %>AppRoute {
+      pageTitle {
+        value
+      }
+    }
+
+    # List the children of the current route
+    children(hasLayout: true) {
+      results {
+        id
+        # typing fragments can be used anywhere!
+        # so in this case, we're grabbing the 'pageTitle'
+        # field on all child route items.
+        ...on <%- helper.getAppPrefix(appPrefix, appName, false) %>AppRoute {
+          pageTitle {
+            jsonValue
+            value
+          }
+        }
+        url {
+          path
+        }
+      }
+    }
+  }
+}

package/dist/templates/{angular → angular-sxp}/sitecore/gitignore

@@ -1,3 +1,3 @@
-manifest
-update-package
+manifest
+update-package
 package

package/dist/templates/angular-sxp/src/app/components/app-components.shared.module.ts

@@ -0,0 +1,35 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { FormsModule } from '@angular/forms';
+import { TranslateModule } from '@ngx-translate/core';
+import { RouterModule } from '@angular/router';
+import { StyleguideSpecimenComponent } from './shared/styleguide-specimen/styleguide-specimen.component';
+import { JssModule } from '@sitecore-jss/sitecore-jss-angular';
+
+/*
+  This module is imported by the generated app-components.module.ts.
+  You can use this module to provide shared Angular components that are not
+  JSS components, etc to the generated module.
+
+  Don't want code generation? See ./.gitignore for instructions to turn it off.
+*/
+@NgModule({
+  imports: [
+    CommonModule,
+    TranslateModule,
+    RouterModule,
+    JssModule,
+    FormsModule,
+  ],
+  exports: [
+    CommonModule,
+    TranslateModule,
+    RouterModule,
+    FormsModule,
+    StyleguideSpecimenComponent
+  ],
+  declarations: [
+    StyleguideSpecimenComponent
+  ],
+})
+export class AppComponentsSharedModule { }

package/dist/templates/{angular → angular-sxp}/src/app/components/graph-ql-connected-demo/graph-ql-connected-demo.component.graphql

@@ -1,69 +1,69 @@
-# This file contains a GraphQL query that will be executed and the result provided to
-# your JSS component. You can run this query in GraphiQL ($endpoint/ui) for a nice editing experience.
-
-# Note that we're executing _two queries_ (datasource and contextItem)
-# within the context of the ConnectedDemoQuery _operation_. This makes it
-# very efficient at gathering data from multiple sources.
-
-query ConnectedDemoQuery($datasource: String!, $contextItem: String!, $language: String!) {
-  # Datasource query
-  # $datasource should be set to the ID of the rendering's datasource item
-  datasource: item(path: $datasource, language: $language) {
-    id
-    name
-    # Strongly-typed querying on known templates is possible!
-    ...on <%- helper.getAppPrefix(appPrefix, appName, false) %>GraphQLConnectedDemo {
-      # Single-line text field
-      sample1 {
-        # the 'jsonValue' field is a JSON blob that represents the object that
-        # should be passed to JSS field rendering helpers (i.e. text, image, link)
-        jsonValue
-        value
-      }
-      # General Link field
-      sample2 {
-        jsonValue
-        # Structured querying of the field's values is possible
-        text
-        target
-        url
-        # Access to the template definition is possible
-        definition {
-          type
-          shared
-        }
-      }
-    }
-  }
-
-  # Context/route item query
-  # $contextItem should be set to the ID of the current context item (the route item)
-  contextItem: item(path: $contextItem, language: $language) {
-    id
-    # Get the page title from the app route template
-    ...on <%- helper.getAppPrefix(appPrefix, appName, false) %>AppRoute {
-      pageTitle {
-        value
-      }
-    }
-
-    # List the children of the current route
-    children(hasLayout: true) {
-      results {
-        id
-        # typing fragments can be used anywhere!
-        # so in this case, we're grabbing the 'pageTitle'
-        # field on all child route items.
-        ...on <%- helper.getAppPrefix(appPrefix, appName, false) %>AppRoute {
-          pageTitle {
-            jsonValue
-            value
-          }
-        }
-        url {
-          path
-        }
-      }
-    }
-  }
-}
+# This file contains a GraphQL query that will be executed and the result provided to
+# your JSS component. You can run this query in GraphiQL ($endpoint/ui) for a nice editing experience.
+
+# Note that we're executing _two queries_ (datasource and contextItem)
+# within the context of the ConnectedDemoQuery _operation_. This makes it
+# very efficient at gathering data from multiple sources.
+
+query ConnectedDemoQuery($datasource: String!, $contextItem: String!, $language: String!) {
+  # Datasource query
+  # $datasource should be set to the ID of the rendering's datasource item
+  datasource: item(path: $datasource, language: $language) {
+    id
+    name
+    # Strongly-typed querying on known templates is possible!
+    ...on <%- helper.getAppPrefix(appPrefix, appName, false) %>GraphQLConnectedDemo {
+      # Single-line text field
+      sample1 {
+        # the 'jsonValue' field is a JSON blob that represents the object that
+        # should be passed to JSS field rendering helpers (i.e. text, image, link)
+        jsonValue
+        value
+      }
+      # General Link field
+      sample2 {
+        jsonValue
+        # Structured querying of the field's values is possible
+        text
+        target
+        url
+        # Access to the template definition is possible
+        definition {
+          type
+          shared
+        }
+      }
+    }
+  }
+
+  # Context/route item query
+  # $contextItem should be set to the ID of the current context item (the route item)
+  contextItem: item(path: $contextItem, language: $language) {
+    id
+    # Get the page title from the app route template
+    ...on <%- helper.getAppPrefix(appPrefix, appName, false) %>AppRoute {
+      pageTitle {
+        value
+      }
+    }
+
+    # List the children of the current route
+    children(hasLayout: true) {
+      results {
+        id
+        # typing fragments can be used anywhere!
+        # so in this case, we're grabbing the 'pageTitle'
+        # field on all child route items.
+        ...on <%- helper.getAppPrefix(appPrefix, appName, false) %>AppRoute {
+          pageTitle {
+            jsonValue
+            value
+          }
+        }
+        url {
+          path
+        }
+      }
+    }
+  }
+}