create-sitecore-jss 22.6.0-canary.9 → 22.7.0-canary.1

package/dist/templates/angular/tsconfig.json

@@ -1,38 +1,38 @@
-{
-  "compileOnSave": false,
-  "compilerOptions": {
-    "importHelpers": true,
-    "outDir": "./dist/out-tsc",
-    "sourceMap": true,
-    "declaration": false,
-    "moduleResolution": "node",
-    "emitDecoratorMetadata": true,
-    "allowSyntheticDefaultImports": true,
-    "experimentalDecorators": true,
-    "resolveJsonModule": true,
-    "skipLibCheck": true,
-    "allowJs": true,
-    "target": "es2022",
-    "module": "es2022",
-    "noImplicitAny": true,
-    "noImplicitReturns": true,
-    "noImplicitThis": true,
-    "noUnusedLocals": true,
-    "noUnusedParameters": true,
-    "newLine": "LF",
-    "types": ["node"],
-    // add additional type root in case of monorepo where dependencies are hoisted to root node_modules
-    "typeRoots": ["node_modules/@types", "../node_modules/@types"],
-    "lib": ["es2019", "dom", "esnext.asynciterable"],
-    "paths": {
-      "@angular/*": ["../node_modules/@angular/*"],
-      "rxjs": ["node_modules/rxjs", "../node_modules/rxjs"],
-      "lib/*": ["src/app/lib/*"],
-    },
-    "baseUrl": "./",
-    "esModuleInterop": true
-  },
-  "ts-node": {
-    "require": ["tsconfig-paths/register"]
-  }
-}
+{
+  "compileOnSave": false,
+  "compilerOptions": {
+    "importHelpers": true,
+    "outDir": "./dist/out-tsc",
+    "sourceMap": true,
+    "declaration": false,
+    "moduleResolution": "node",
+    "emitDecoratorMetadata": true,
+    "allowSyntheticDefaultImports": true,
+    "experimentalDecorators": true,
+    "resolveJsonModule": true,
+    "skipLibCheck": true,
+    "allowJs": true,
+    "target": "es2022",
+    "module": "es2022",
+    "noImplicitAny": true,
+    "noImplicitReturns": true,
+    "noImplicitThis": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "newLine": "LF",
+    "types": ["node"],
+    // add additional type root in case of monorepo where dependencies are hoisted to root node_modules
+    "typeRoots": ["node_modules/@types", "../node_modules/@types"],
+    "lib": ["es2019", "dom", "esnext.asynciterable"],
+    "paths": {
+      "@angular/*": ["../node_modules/@angular/*"],
+      "rxjs": ["node_modules/rxjs", "../node_modules/rxjs"],
+      "lib/*": ["src/app/lib/*"],
+    },
+    "baseUrl": "./",
+    "esModuleInterop": true
+  },
+  "ts-node": {
+    "require": ["tsconfig-paths/register"]
+  }
+}

package/dist/templates/angular-sxp/.env

@@ -1,2 +1,2 @@
-# The way in which layout and dictionary data is fetched from Sitecore
-FETCH_WITH=<%- fetchWith %>
+# The way in which layout and dictionary data is fetched from Sitecore
+FETCH_WITH=<%- fetchWith %>

package/dist/templates/angular-sxp/angular.json

@@ -1,13 +1,13 @@
-{
-  "projects": {
-    "<%- appName %>": {
-      "architect": {
-        "build": {
-          "options": {
-            "styles": ["node_modules/bootstrap/dist/css/bootstrap.min.css"]
-          }
-        }
-      }
-    }
-  }
-}
+{
+  "projects": {
+    "<%- appName %>": {
+      "architect": {
+        "build": {
+          "options": {
+            "styles": ["node_modules/bootstrap/dist/css/bootstrap.min.css"]
+          }
+        }
+      }
+    }
+  }
+}

package/dist/templates/angular-sxp/package.json

@@ -1,12 +1,12 @@
-{
-  "scripts": {
-    "start": "cross-env-shell JSS_MODE=disconnected \"npm-run-all --serial bootstrap --parallel start:angular start:proxy start:watch-components\"",
-    "start:proxy": "ts-node --project src/tsconfig.webpack-server.json scripts/disconnected-mode-proxy.ts",
-    "lint:yml": "ts-node ./scripts/lint-yml.ts",
-    "lint": "ng lint <%- appName %> --fix && npm run lint:yml",
-    "scaffold": "ng generate @sitecore-jss/sitecore-jss-angular-schematics:jss-component"
-  },
-  "devDependencies": {
-    "yaml-lint": "^1.2.4"
-  }
-}
+{
+  "scripts": {
+    "start": "cross-env-shell JSS_MODE=disconnected \"npm-run-all --serial bootstrap --parallel start:angular start:proxy start:watch-components\"",
+    "start:proxy": "ts-node --project src/tsconfig.webpack-server.json scripts/disconnected-mode-proxy.ts",
+    "lint:yml": "ts-node ./scripts/lint-yml.ts",
+    "lint": "ng lint <%- appName %> --fix && npm run lint:yml",
+    "scaffold": "ng generate @sitecore-jss/sitecore-jss-angular-schematics:jss-component"
+  },
+  "devDependencies": {
+    "yaml-lint": "^1.2.4"
+  }
+}

package/dist/templates/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
+        }
+      }
+    }
+  }
+}

package/dist/templates/angular-sxp/src/app/components/graph-ql-connected-demo/graph-ql-connected-demo.component.html

@@ -1,55 +1,55 @@
-<div data-e2e-id="graphql-connected">
-  <h2>GraphQL Connected Demo</h2>
-
-  <p>
-    Connected GraphQL executes GraphQL queries directly against the Sitecore GraphQL endpoint.
-    You can review the query execution in the browser devtools network tab. Note that Apollo
-    Client maintains a query cache - so the same query will not execute twice (i.e. after route
-    changes) unless either the page is refreshed, or the <em>fetch policy</em> is set to not use
-    the cache. Consult the Apollo documentation for details.
-  </p>
-
-  <div *ngIf="query$ | async as queryResult; else loading">
-    <div>
-      <h4>Datasource Item (via Connected GraphQL)</h4>
-      id: {{ queryResult.data.datasource.id }}
-      <br />
-      name: {{ queryResult.data.datasource.name }}
-      <br />
-      sample1: {{ queryResult.data.datasource.sample1.value }}
-      <br />
-      sample1 (editable): <span *scText="queryResult.data.datasource.sample1.jsonValue"></span>
-      <br />
-      sample2:<br />
-      <ul>
-        <li>text: {{ queryResult.data.datasource.sample2.text }}</li>
-        <li>url: {{ queryResult.data.datasource.sample2.url }}</li>
-        <li>target: {{ queryResult.data.datasource.sample2.target }}</li>
-        <li>
-          editable: <a *scLink="queryResult.data.datasource.sample2.jsonValue"></a>
-        </li>
-        <li>field type: {{ queryResult.data.datasource.sample2.definition.type }}</li>
-        <li>field is shared?: {{ queryResult.data.datasource.sample2.definition.shared.toString() }}</li>
-      </ul>
-    </div>
-
-    <div>
-      <h4>Route Item (via Connected GraphQL)</h4>
-      id: {{ queryResult.data.contextItem.id }}
-      <br />
-      page title: {{ queryResult.data.contextItem.pageTitle.value }}
-      <br />
-      children:
-      <ul>
-        <li *ngFor="let child of queryResult.data.contextItem.children.results">
-          <a [routerLink]="child.url.path">{{ child.pageTitle.value }}</a>
-          (editable title too! <span *scText="child.pageTitle.jsonValue"></span>)
-        </li>
-      </ul>
-    </div>
-  </div>
-
-  <ng-template #loading>
-    <p class="alert alert-info">GraphQL query is loading...</p>
-  </ng-template>
-</div>
+<div data-e2e-id="graphql-connected">
+  <h2>GraphQL Connected Demo</h2>
+
+  <p>
+    Connected GraphQL executes GraphQL queries directly against the Sitecore GraphQL endpoint.
+    You can review the query execution in the browser devtools network tab. Note that Apollo
+    Client maintains a query cache - so the same query will not execute twice (i.e. after route
+    changes) unless either the page is refreshed, or the <em>fetch policy</em> is set to not use
+    the cache. Consult the Apollo documentation for details.
+  </p>
+
+  <div *ngIf="query$ | async as queryResult; else loading">
+    <div>
+      <h4>Datasource Item (via Connected GraphQL)</h4>
+      id: {{ queryResult.data.datasource.id }}
+      <br />
+      name: {{ queryResult.data.datasource.name }}
+      <br />
+      sample1: {{ queryResult.data.datasource.sample1.value }}
+      <br />
+      sample1 (editable): <span *scText="queryResult.data.datasource.sample1.jsonValue"></span>
+      <br />
+      sample2:<br />
+      <ul>
+        <li>text: {{ queryResult.data.datasource.sample2.text }}</li>
+        <li>url: {{ queryResult.data.datasource.sample2.url }}</li>
+        <li>target: {{ queryResult.data.datasource.sample2.target }}</li>
+        <li>
+          editable: <a *scLink="queryResult.data.datasource.sample2.jsonValue"></a>
+        </li>
+        <li>field type: {{ queryResult.data.datasource.sample2.definition.type }}</li>
+        <li>field is shared?: {{ queryResult.data.datasource.sample2.definition.shared.toString() }}</li>
+      </ul>
+    </div>
+
+    <div>
+      <h4>Route Item (via Connected GraphQL)</h4>
+      id: {{ queryResult.data.contextItem.id }}
+      <br />
+      page title: {{ queryResult.data.contextItem.pageTitle.value }}
+      <br />
+      children:
+      <ul>
+        <li *ngFor="let child of queryResult.data.contextItem.children.results">
+          <a [routerLink]="child.url.path">{{ child.pageTitle.value }}</a>
+          (editable title too! <span *scText="child.pageTitle.jsonValue"></span>)
+        </li>
+      </ul>
+    </div>
+  </div>
+
+  <ng-template #loading>
+    <p class="alert alert-info">GraphQL query is loading...</p>
+  </ng-template>
+</div>

package/dist/templates/angular-sxp/src/app/components/graph-ql-integrated-demo/graph-ql-integrated-demo.component.html

@@ -1,47 +1,47 @@
-<div data-e2e-id="graphql-integrated">
-  <h2>GraphQL Integrated Demo</h2>
-
-  <p>
-    Integrated GraphQL executes GraphQL queries within the Layout Service endpoint, and merges
-    the query results into the Layout Service result JSON. The query results can be seen by
-    inspecting the Layout Service response in the browser devtools network tab.
-  </p>
-
-  <div>
-    <h4>Datasource Item (via Integrated GraphQL)</h4>
-    id: {{ queryResult.data.datasource.id }}
-    <br />
-    name: {{ queryResult.data.datasource.name }}
-    <br />
-    sample1: {{ queryResult.data.datasource.sample1.value }}
-    <br />
-    sample1 (editable): <span *scText="queryResult.data.datasource.sample1.jsonValue"></span>
-    <br />
-    sample2:<br />
-    <ul>
-      <li>text: {{ queryResult.data.datasource.sample2.text }}</li>
-      <li>url: {{ queryResult.data.datasource.sample2.url }}</li>
-      <li>target: {{ queryResult.data.datasource.sample2.target }}</li>
-      <li>
-        editable: <a *scLink="queryResult.data.datasource.sample2.jsonValue"></a>
-      </li>
-      <li>field type: {{ queryResult.data.datasource.sample2.definition.type }}</li>
-      <li>field is shared?: {{ queryResult.data.datasource.sample2.definition.shared.toString() }}</li>
-    </ul>
-  </div>
-
-  <div>
-    <h4>Route Item (via Integrated GraphQL)</h4>
-    id: {{ queryResult.data.contextItem.id }}
-    <br />
-    page title: {{ queryResult.data.contextItem.pageTitle.value }}
-    <br />
-    children:
-    <ul>
-      <li *ngFor="let child of queryResult.data.contextItem.children.results">
-        <a [routerLink]="child.url.path">{{ child.pageTitle.value }}</a>
-        (editable title too! <span *scText="child.pageTitle.jsonValue"></span>)
-      </li>
-    </ul>
-  </div>
-</div>
+<div data-e2e-id="graphql-integrated">
+  <h2>GraphQL Integrated Demo</h2>
+
+  <p>
+    Integrated GraphQL executes GraphQL queries within the Layout Service endpoint, and merges
+    the query results into the Layout Service result JSON. The query results can be seen by
+    inspecting the Layout Service response in the browser devtools network tab.
+  </p>
+
+  <div>
+    <h4>Datasource Item (via Integrated GraphQL)</h4>
+    id: {{ queryResult.data.datasource.id }}
+    <br />
+    name: {{ queryResult.data.datasource.name }}
+    <br />
+    sample1: {{ queryResult.data.datasource.sample1.value }}
+    <br />
+    sample1 (editable): <span *scText="queryResult.data.datasource.sample1.jsonValue"></span>
+    <br />
+    sample2:<br />
+    <ul>
+      <li>text: {{ queryResult.data.datasource.sample2.text }}</li>
+      <li>url: {{ queryResult.data.datasource.sample2.url }}</li>
+      <li>target: {{ queryResult.data.datasource.sample2.target }}</li>
+      <li>
+        editable: <a *scLink="queryResult.data.datasource.sample2.jsonValue"></a>
+      </li>
+      <li>field type: {{ queryResult.data.datasource.sample2.definition.type }}</li>
+      <li>field is shared?: {{ queryResult.data.datasource.sample2.definition.shared.toString() }}</li>
+    </ul>
+  </div>
+
+  <div>
+    <h4>Route Item (via Integrated GraphQL)</h4>
+    id: {{ queryResult.data.contextItem.id }}
+    <br />
+    page title: {{ queryResult.data.contextItem.pageTitle.value }}
+    <br />
+    children:
+    <ul>
+      <li *ngFor="let child of queryResult.data.contextItem.children.results">
+        <a [routerLink]="child.url.path">{{ child.pageTitle.value }}</a>
+        (editable title too! <span *scText="child.pageTitle.jsonValue"></span>)
+      </li>
+    </ul>
+  </div>
+</div>

package/dist/templates/angular-sxp/src/app/components/graph-ql-layout/graph-ql-layout.component.html

@@ -1,22 +1,22 @@
-<div data-e2e-id="graphql-layout">
-  <ng-container *ngIf="disconnectedMode">
-    <p>
-      This app is running in disconnected mode. GraphQL requires connected mode, headless connected
-      mode, or integrated mode to work.
-    </p>
-    <p>
-      Libraries such as <code>graphql-tools</code> can provide GraphQL API mocking capabilities,
-      which could enable disconnected GraphQL. This is not supported out of the box, however.
-    </p>
-    <p>
-      To view the GraphQL samples, restart the app using <code>jss start:connected</code>&nbsp; or
-      deploy the app to Sitecore to run in integrated mode per the JSS documentation.
-    </p>
-  </ng-container>
-  <ng-container *ngIf="!disconnectedMode">
-    <sc-placeholder
-      name="<%- helper.getAppPrefix(appPrefix, appName) %>jss-graphql-layout"
-      [rendering]="rendering"
-    ></sc-placeholder>
-  </ng-container>
-</div>
+<div data-e2e-id="graphql-layout">
+  <ng-container *ngIf="disconnectedMode">
+    <p>
+      This app is running in disconnected mode. GraphQL requires connected mode, headless connected
+      mode, or integrated mode to work.
+    </p>
+    <p>
+      Libraries such as <code>graphql-tools</code> can provide GraphQL API mocking capabilities,
+      which could enable disconnected GraphQL. This is not supported out of the box, however.
+    </p>
+    <p>
+      To view the GraphQL samples, restart the app using <code>jss start:connected</code>&nbsp; or
+      deploy the app to Sitecore to run in integrated mode per the JSS documentation.
+    </p>
+  </ng-container>
+  <ng-container *ngIf="!disconnectedMode">
+    <sc-placeholder
+      name="<%- helper.getAppPrefix(appPrefix, appName) %>jss-graphql-layout"
+      [rendering]="rendering"
+    ></sc-placeholder>
+  </ng-container>
+</div>

package/dist/templates/angular-sxp/src/app/components/styleguide-angular-lazy-loading/styleguide-angular-lazy-loading.component.html

@@ -1,5 +1,5 @@
-<app-styleguide-specimen [rendering]="rendering">
-  <p>JSS can <em>lazy-load</em> Angular components. This removes them from the main app JS bundle, reducing its size. Lazy-loading is very good for components that are used on few routes, since they are not downloaded until used on a route. This can greatly improve initial page load times.</p>
-  <p>This works very similarly to route-based Angular lazy-loading, but for an individual component. The component has its own Angular module defined for it, and the loader is added as lazy instead.</p>
-  <p>To see this lazy loading working, inspect network traffic in your browser's dev tools, and look for <code>styleguide-angular-lazy-loading-styleguide-angular-lazy-loading-module.js</code> (in production mode, the file name will be hash value), which is the request that loads this component's JS.</p>
-</app-styleguide-specimen>
+<app-styleguide-specimen [rendering]="rendering">
+  <p>JSS can <em>lazy-load</em> Angular components. This removes them from the main app JS bundle, reducing its size. Lazy-loading is very good for components that are used on few routes, since they are not downloaded until used on a route. This can greatly improve initial page load times.</p>
+  <p>This works very similarly to route-based Angular lazy-loading, but for an individual component. The component has its own Angular module defined for it, and the loader is added as lazy instead.</p>
+  <p>To see this lazy loading working, inspect network traffic in your browser's dev tools, and look for <code>styleguide-angular-lazy-loading-styleguide-angular-lazy-loading-module.js</code> (in production mode, the file name will be hash value), which is the request that loads this component's JS.</p>
+</app-styleguide-specimen>

package/dist/templates/angular-sxp/src/app/components/styleguide-component-params/styleguide-component-params.component.html

@@ -1,19 +1,19 @@
-<app-styleguide-specimen [rendering]="rendering" e2eId="styleguide-componentparams">
-  <p class="{{ cssClass }}">
-    The CSS class of this paragraph (<code>{{ cssClass }}</code>) is set using a param
-  </p>
-  <div>
-    <!-- Note that all params come in as string values, like this boolean-like param here: -->
-    useCallToAction param: <code>{{ useCta }}</code>
-    <br />
-    param type: <code>{{ useCtaType }}</code>
-    <!-- because the param is a string, you need to compare it as a string - if(`useCta`) won't work correctly. -->
-    <div *ngIf="useCta === 'true'" class="alert alert-info">the call to action is shown</div>
-  </div>
-  <p>columns param: {{ columns }}</p>
-  <div class="row">
-    <div class="col-sm" *ngFor="let column of columnsArray">
-      Column {{ column }}
-    </div>
-  </div>
-</app-styleguide-specimen>
+<app-styleguide-specimen [rendering]="rendering" e2eId="styleguide-componentparams">
+  <p class="{{ cssClass }}">
+    The CSS class of this paragraph (<code>{{ cssClass }}</code>) is set using a param
+  </p>
+  <div>
+    <!-- Note that all params come in as string values, like this boolean-like param here: -->
+    useCallToAction param: <code>{{ useCta }}</code>
+    <br />
+    param type: <code>{{ useCtaType }}</code>
+    <!-- because the param is a string, you need to compare it as a string - if(`useCta`) won't work correctly. -->
+    <div *ngIf="useCta === 'true'" class="alert alert-info">the call to action is shown</div>
+  </div>
+  <p>columns param: {{ columns }}</p>
+  <div class="row">
+    <div class="col-sm" *ngFor="let column of columnsArray">
+      Column {{ column }}
+    </div>
+  </div>
+</app-styleguide-specimen>

package/dist/templates/angular-sxp/src/app/components/styleguide-custom-route-type/styleguide-custom-route-type.component.html

@@ -1,14 +1,14 @@
-
-<div data-e2e-id="styleguide-customroutetype">
-  <h3 *scText="contextFields.headline"></h3>
-
-  <p>
-    <em>
-      By <span *scText="contextFields.author"></span>
-    </em>
-  </p>
-
-  <div *scRichText="contextFields.content"></div>
-
-  <a routerLink="/styleguide">Return to the Styleguide</a>
-</div>
+
+<div data-e2e-id="styleguide-customroutetype">
+  <h3 *scText="contextFields.headline"></h3>
+
+  <p>
+    <em>
+      By <span *scText="contextFields.author"></span>
+    </em>
+  </p>
+
+  <div *scRichText="contextFields.content"></div>
+
+  <a routerLink="/styleguide">Return to the Styleguide</a>
+</div>