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

package/dist/templates/nextjs-styleguide/src/components/graphql/GraphQL-ConnectedDemo.dynamic.tsx

@@ -8,24 +8,67 @@ import {
   withDatasourceCheck,
 } from '@sitecore-jss/sitecore-jss-nextjs';
 import { GraphQLRequestClient } from '@sitecore-jss/sitecore-jss-nextjs/graphql';
-import {
-  resetEditorChromes
-} from '@sitecore-jss/sitecore-jss-nextjs/utils';
+import { resetEditorChromes } from '@sitecore-jss/sitecore-jss-nextjs/utils';
 import NextLink from 'next/link';
-import { ConnectedDemoQueryDocument } from './GraphQL-ConnectedDemo.dynamic.graphql';
-import {
-  <%- helper.getAppPrefix(appPrefix, appName, false) %>AppRoute as AppRoute,
-  Item,
-  <%- helper.getAppPrefix(appPrefix, appName, false) %>GraphQlConnectedDemo as GrapQLConnectedDemoDatasource,
-} from 'graphql-types';
+import ConnectedDemoQuery from './GraphQL-ConnectedDemo.dynamic.graphql';
 import { ComponentProps } from 'lib/component-props';
 import config from 'temp/config';
 
-type RouteItem = AppRoute & Item;
+type GraphQLConnectedDemoDataSource = {
+  sample1: {
+    jsonValue: {
+      value: string;
+    };
+    value: string;
+  };
+  sample2: {
+    definition: {
+      type: string;
+      shared: boolean;
+    };
+    jsonValue: {
+      value: {
+        href: string;
+        linktype: string;
+        target: string;
+        text: string;
+        url: string;
+      };
+    };
+    target: string;
+    text: string;
+    url: string;
+  };
+  name: string;
+  id: string;
+};
+
+type Item = {
+  id: string;
+  url: {
+    path: string;
+  };
+  pageTitle: {
+    value: string;
+    jsonValue: {
+      value: string;
+    };
+  };
+};
+
+type ItemSearchResults = {
+  results: Item[];
+};
 
 type GraphQLConnectedDemoData = {
-  datasource: GrapQLConnectedDemoDatasource;
-  contextItem: RouteItem;
+  datasource: GraphQLConnectedDemoDataSource;
+  contextItem: {
+    id: string;
+    children: ItemSearchResults;
+    pageTitle: {
+      value: string;
+    };
+  };
 };
 
 type GraphQLConnectedDemoProps = ComponentProps & GraphQLConnectedDemoData;
@@ -82,7 +125,7 @@ const GraphQLConnectedDemo = (props: GraphQLConnectedDemoProps): JSX.Element =>
           children:
           <ul>
             {props.contextItem.children.results.map((child) => {
-              const routeItem = child as RouteItem;
+              const routeItem = child as Item;
 
               return (
                 <li key={routeItem.id}>
@@ -115,7 +158,7 @@ export const getStaticProps: GetStaticComponentProps = async (rendering, layoutD
 
   const result = await graphQLClient.request<GraphQLConnectedDemoData>(
     // eslint-disable-next-line @typescript-eslint/no-explicit-any
-    ConnectedDemoQueryDocument as any,
+    ConnectedDemoQuery,
     {
       datasource: rendering.dataSource,
       contextItem: layoutData?.sitecore?.route?.itemId,
@@ -143,7 +186,7 @@ export const getServerSideProps: GetServerSideComponentProps = async (rendering,
 
   const result = await graphQLClient.request<GraphQLConnectedDemoData>(
     // eslint-disable-next-line @typescript-eslint/no-explicit-any
-    ConnectedDemoQueryDocument as any,
+    ConnectedDemoQuery,
     {
       datasource: rendering.dataSource,
       contextItem: layoutData?.sitecore?.route?.itemId,

package/dist/templates/nextjs-styleguide/src/components/styleguide/Styleguide-Layout-Tabs-Tab.tsx

@@ -8,13 +8,15 @@ import {
 } from '@sitecore-jss/sitecore-jss-nextjs';
 import { ComponentProps } from 'lib/component-props';
 
-type StyleguideLayoutTabsTabProps = ComponentProps & {
+export type TabProps = {
   fields: {
     content: Field<string>;
     title: Field<string>;
   };
 };
 
+type StyleguideLayoutTabsTabProps = ComponentProps & TabProps;
+
 /**
  * This is a single tab within the tabs sample component. These are added to the tabs placeholder.
  * This component demonstrates conditionally altering rendering when in the Sitecore Experience Editor to improve

package/dist/templates/nextjs-styleguide/src/components/styleguide/Styleguide-Layout-Tabs.tsx

@@ -3,6 +3,7 @@ import { withPlaceholder, withSitecoreContext, Text } from '@sitecore-jss/siteco
 import StyleguideSpecimen from './Styleguide-Specimen';
 import { ComponentWithContextProps } from 'lib/component-props';
 import { StyleguideSpecimenFields } from 'lib/component-props/styleguide';
+import { TabProps } from './Styleguide-Layout-Tabs-Tab';
 
 interface StyleguideLayoutTabsState {
   activeTabIndex: number;
@@ -55,7 +56,7 @@ class StyleguideLayoutTabs extends React.Component<
           */}
           {!isEditing &&
             (tabsPlaceholder || [])
-              .filter((tab: ReactElement) => tab.props && tab.props.fields)
+              .filter((tab: ReactElement) => tab.props && (tab.props as TabProps).fields)
               .map((tab: ReactElement, index: number) => (
                 <li className="nav-item" key={`tab${index}`}>
                   <a
@@ -63,14 +64,14 @@ class StyleguideLayoutTabs extends React.Component<
                     onClick={() => this.setActiveTab(index)}
                     href="#t"
                   >
-                    <Text field={tab.props.fields.title} />
+                    <Text field={(tab.props as TabProps).fields.title} />
                   </a>
                 </li>
               ))}
         </ul>
         <div className="p-3 border-left border-right border-bottom">
           {(tabsPlaceholder || []).map((tab: ReactElement) => {
-            const isValid = tab.props && tab.props.fields;
+            const isValid = tab.props && (tab.props as TabProps).fields;
 
             // allow experience editor markup components to render
             if (!isValid && isEditing) return tab;

package/dist/templates/{nextjs → nextjs-styleguide}/src/lib/next-config/plugins/graphql.js

@@ -7,19 +7,7 @@ const graphqlPlugin = (nextConfig = {}) => {
       config.module.rules.push({
         test: /\.graphql$/,
         exclude: /node_modules/,
-        use: [options.defaultLoaders.babel, { loader: 'graphql-let/loader' }],
-      });
-    
-      config.module.rules.push({
-        test: /\.graphqls$/,
-        exclude: /node_modules/,
-        use: ['graphql-let/schema/loader'],
-      });
-    
-      config.module.rules.push({
-        test: /\.ya?ml$/,
-        type: 'json',
-        use: 'yaml-loader',
+        loader: 'graphql-tag/loader',
       });
 
       // Overload the Webpack config if it was already overloaded
@@ -28,7 +16,7 @@ const graphqlPlugin = (nextConfig = {}) => {
       }
 
       return config;
-    }
+    },
   });
 };
 

package/dist/templates/nextjs-styleguide-tracking/data/dictionary/en.yml

@@ -1,5 +1,5 @@
-styleguide-sample: This is a dictionary entry in English as a demonstration
-Documentation: Documentation
-Styleguide: Styleguide
-GraphQL: GraphQL
-Tracking: Tracking
+styleguide-sample: This is a dictionary entry in English as a demonstration
+Documentation: Documentation
+Styleguide: Styleguide
+GraphQL: GraphQL
+Tracking: Tracking

package/dist/templates/nextjs-styleguide-tracking/data/routes/tracking/en.yml

@@ -1,8 +1,8 @@
-fields:
-  pageTitle: Styleguide Tracking | Sitecore JSS
-placeholders:
-  <%- helper.getAppPrefix(appPrefix, appName) %>jss-main:
-    - componentName: Styleguide-Tracking
-      fields:
-        heading: Tracking
-        description: <p><small>JSS supports tracking Sitecore analytics events from within apps. Give it a try with this handy interactive demo.</small></p>
+fields:
+  pageTitle: Styleguide Tracking | Sitecore JSS
+placeholders:
+  <%- helper.getAppPrefix(appPrefix, appName) %>jss-main:
+    - componentName: Styleguide-Tracking
+      fields:
+        heading: Tracking
+        description: <p><small>JSS supports tracking Sitecore analytics events from within apps. Give it a try with this handy interactive demo.</small></p>

package/dist/templates/nextjs-styleguide-tracking/src/components/styleguide/Styleguide-Tracking.tsx

@@ -18,13 +18,13 @@ type StyleguideTrackingProps = ComponentWithContextProps & StyleguideSpecimenFie
  * Demonstrates analytics tracking patterns (xDB)
  */
 class StyleguideTracking extends React.Component<StyleguideTrackingProps> {
-  private event: RefObject<HTMLInputElement>;
-  private goal: RefObject<HTMLInputElement>;
-  private outcomeName: RefObject<HTMLInputElement>;
-  private outcomeValue: RefObject<HTMLInputElement>;
-  private campaign: RefObject<HTMLInputElement>;
-  private pageId: RefObject<HTMLInputElement>;
-  private pageUrl: RefObject<HTMLInputElement>;
+  private event: RefObject<HTMLInputElement | null>;
+  private goal: RefObject<HTMLInputElement | null>;
+  private outcomeName: RefObject<HTMLInputElement | null>;
+  private outcomeValue: RefObject<HTMLInputElement | null>;
+  private campaign: RefObject<HTMLInputElement | null>;
+  private pageId: RefObject<HTMLInputElement | null>;
+  private pageUrl: RefObject<HTMLInputElement | null>;
 
   private trackingApiOptions: TrackingRequestOptions;
 

package/dist/templates/react/data/component-content/Styleguide/ContentReuse/LoremIpsumContentBlock/en.yml

@@ -1,9 +1,9 @@
-# We can reuse this content definition in multiple places because it:
-# - has an ID
-# - is under component-content (normally) or content
-# Reuse is accomplished by referencing the content by ID in a route definition.
-id: lorem-ipsum-content-block
-componentName: ContentBlock
-displayName: Lorem Ipsum Dolor Sit Amet
-fields:
-  content: <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque felis mauris, pretium id neque vitae, vulputate pellentesque tortor. Mauris hendrerit dolor et ipsum lobortis bibendum non finibus neque. Morbi volutpat aliquam magna id posuere. Duis commodo cursus dui, nec interdum velit congue nec. Aliquam erat volutpat. Aliquam facilisis, sapien quis fringilla tincidunt, magna nulla feugiat neque, a consectetur arcu orci eu augue.</p>
+# We can reuse this content definition in multiple places because it:
+# - has an ID
+# - is under component-content (normally) or content
+# Reuse is accomplished by referencing the content by ID in a route definition.
+id: lorem-ipsum-content-block
+componentName: ContentBlock
+displayName: Lorem Ipsum Dolor Sit Amet
+fields:
+  content: <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque felis mauris, pretium id neque vitae, vulputate pellentesque tortor. Mauris hendrerit dolor et ipsum lobortis bibendum non finibus neque. Morbi volutpat aliquam magna id posuere. Duis commodo cursus dui, nec interdum velit congue nec. Aliquam erat volutpat. Aliquam facilisis, sapien quis fringilla tincidunt, magna nulla feugiat neque, a consectetur arcu orci eu augue.</p>

package/dist/templates/react/data/content/Styleguide/ContentListField/Item1/en.yml

@@ -1,6 +1,6 @@
-id: styleguide-content-list-field-shared-1
-displayName: Styleguide Content List Item 1 (Shared)
-# Template defines the available fields. See /sitecore/definitions/templates/Styleguide-ContentList-Template.sitecore.js
-template: <%- helper.getAppPrefix(appPrefix, appName) %>Styleguide-ContentList-Item-Template
-fields:
-  textField: ContentList Demo (Shared) Item 1 Text Field
+id: styleguide-content-list-field-shared-1
+displayName: Styleguide Content List Item 1 (Shared)
+# Template defines the available fields. See /sitecore/definitions/templates/Styleguide-ContentList-Template.sitecore.js
+template: <%- helper.getAppPrefix(appPrefix, appName) %>Styleguide-ContentList-Item-Template
+fields:
+  textField: ContentList Demo (Shared) Item 1 Text Field

package/dist/templates/react/data/content/Styleguide/ContentListField/Item2/en.yml

@@ -1,6 +1,6 @@
-id: styleguide-content-list-field-shared-2
-displayName: Styleguide Content List Item 2 (Shared)
-# Template defines the available fields. See /sitecore/definitions/templates/Styleguide-ContentList-Template.sitecore.js
-template: <%- helper.getAppPrefix(appPrefix, appName) %>Styleguide-ContentList-Item-Template
-fields:
-  textField: ContentList Demo (Shared) Item 2 Text Field
+id: styleguide-content-list-field-shared-2
+displayName: Styleguide Content List Item 2 (Shared)
+# Template defines the available fields. See /sitecore/definitions/templates/Styleguide-ContentList-Template.sitecore.js
+template: <%- helper.getAppPrefix(appPrefix, appName) %>Styleguide-ContentList-Item-Template
+fields:
+  textField: ContentList Demo (Shared) Item 2 Text Field

package/dist/templates/react/data/content/Styleguide/EditFrameDemo/Item1/en.yml

@@ -1,6 +1,6 @@
-id: styleguide-edit-frame-list-item-1
-displayName: EditFrame Demo List Item 1
-# Template defines the available fields. See /sitecore/definitions/templates/Styleguide-EditFrame-ListItem-Template.js
-template: <%- helper.getAppPrefix(appPrefix, appName) %>Styleguide-EditFrame-ListItem-Template
-fields:
-  title: Edit Frame Demo List Item 1
+id: styleguide-edit-frame-list-item-1
+displayName: EditFrame Demo List Item 1
+# Template defines the available fields. See /sitecore/definitions/templates/Styleguide-EditFrame-ListItem-Template.js
+template: <%- helper.getAppPrefix(appPrefix, appName) %>Styleguide-EditFrame-ListItem-Template
+fields:
+  title: Edit Frame Demo List Item 1

package/dist/templates/react/data/content/Styleguide/EditFrameDemo/Item2/en.yml

@@ -1,6 +1,6 @@
-id: styleguide-edit-frame-list-item-2
-displayName: EditFrame Demo List Item 2
-# Template defines the available fields. See /sitecore/definitions/templates/Styleguide-EditFrame-ListItem-Template.js
-template: <%- helper.getAppPrefix(appPrefix, appName) %>Styleguide-EditFrame-ListItem-Template
-fields:
-  title: Edit Frame Demo List Item 2
+id: styleguide-edit-frame-list-item-2
+displayName: EditFrame Demo List Item 2
+# Template defines the available fields. See /sitecore/definitions/templates/Styleguide-EditFrame-ListItem-Template.js
+template: <%- helper.getAppPrefix(appPrefix, appName) %>Styleguide-EditFrame-ListItem-Template
+fields:
+  title: Edit Frame Demo List Item 2

package/dist/templates/react/data/content/Styleguide/ItemLinkField/Item1/en.yml

@@ -1,6 +1,6 @@
-id: styleguide-item-link-field-shared-1
-displayName: Styleguide Item Link Item 1 (Shared)
-# Template defines the available fields. See /sitecore/definitions/templates/Styleguide-ItemLink-Template.sitecore.js
-template: <%- helper.getAppPrefix(appPrefix, appName) %>Styleguide-ItemLink-Item-Template
-fields:
-  textField: ItemLink Demo (Shared) Item 1 Text Field
+id: styleguide-item-link-field-shared-1
+displayName: Styleguide Item Link Item 1 (Shared)
+# Template defines the available fields. See /sitecore/definitions/templates/Styleguide-ItemLink-Template.sitecore.js
+template: <%- helper.getAppPrefix(appPrefix, appName) %>Styleguide-ItemLink-Item-Template
+fields:
+  textField: ItemLink Demo (Shared) Item 1 Text Field

package/dist/templates/react/data/content/Styleguide/ItemLinkField/Item2/en.yml

@@ -1,6 +1,6 @@
-id: styleguide-item-link-field-shared-2
-displayName: Styleguide Item Link Item 2 (Shared)
-# Template defines the available fields. See /sitecore/definitions/templates/Styleguide-ItemLink-Template.sitecore.js
-template: <%- helper.getAppPrefix(appPrefix, appName) %>Styleguide-ItemLink-Item-Template
-fields:
-  textField: ItemLink Demo (Shared) Item 2 Text Field
+id: styleguide-item-link-field-shared-2
+displayName: Styleguide Item Link Item 2 (Shared)
+# Template defines the available fields. See /sitecore/definitions/templates/Styleguide-ItemLink-Template.sitecore.js
+template: <%- helper.getAppPrefix(appPrefix, appName) %>Styleguide-ItemLink-Item-Template
+fields:
+  textField: ItemLink Demo (Shared) Item 2 Text Field

package/dist/templates/react/data/dictionary/en.yml

@@ -1,4 +1,4 @@
-styleguide-sample: This is a dictionary entry in English as a demonstration
-Documentation: Documentation
-Styleguide: Styleguide
-GraphQL: GraphQL
+styleguide-sample: This is a dictionary entry in English as a demonstration
+Documentation: Documentation
+Styleguide: Styleguide
+GraphQL: GraphQL

package/dist/templates/react/data/dictionary/{{language}}.yml

@@ -1,4 +1,4 @@
-styleguide-sample: '[<%- language %>] This is a dictionary entry in English as a demonstration'
-Documentation: '[<%- language %>] Documentation'
-Styleguide: '[<%- language %>] Styleguide'
-GraphQL: '[<%- language %>] GraphQL'
+styleguide-sample: '[<%- language %>] This is a dictionary entry in English as a demonstration'
+Documentation: '[<%- language %>] Documentation'
+Styleguide: '[<%- language %>] Styleguide'
+GraphQL: '[<%- language %>] GraphQL'

package/dist/templates/react/data/routes/en.yml

@@ -1,61 +1,61 @@
-# This is a route layout definition.
-# The route definition defines which Sitecore components are present on a route,
-# what their content data is, and which _placeholder_ they are placed in.
-
-# This particular route definition is for the home route - '/', so it defines the
-# components shown on the initial page of the app.
-
-# You may use equivalent JSON files instead of YAML if you prefer;
-# however YAML is simpler to read and allows comments like this one :)
-
-# Setting an ID is optional, but it will allow referring to this item in internal links
-# the ID can be a app-wide-unique string, or a GUID value.
-id: home-page
-
-# Route-level fields are appropriate for page level data like <title> contents
-# Define route level fields in /sitecore/definitions/routes.sitecore
-fields:
-  pageTitle: Welcome to Sitecore JSS
-# Define the page layout starting at the root placeholder - in this case, '<%- helper.getAppPrefix(appPrefix, appName) %>main'
-# root placeholder names are defined in the package.json config section (required for Sitecore deployment)
-placeholders:
-  <%- helper.getAppPrefix(appPrefix, appName) %>jss-main:
-    - componentName: ContentBlock
-      fields:
-        heading: Welcome to Sitecore JSS
-        # to author content in YAML, use _multi-line values_ (prefixed with | + endline)
-        # as long as the same indent is preserved at the beginning of each line, no escaping
-        # is required at all in the value, making it easy to read
-        content: |
-          <p>Thanks for using JSS!! Here are some resources to get you started:</p>
-
-          <h3><a href="https://jss.sitecore.com" rel="noopener noreferrer">Documentation</a></h3>
-          <p>The official JSS documentation can help you with any JSS task from getting started to advanced techniques.</p>
-
-          <h3><a href="/styleguide">Styleguide</a></h3>
-          <p>The JSS styleguide is a living example of how to use JSS, hosted right in this app.
-          It demonstrates most of the common patterns that JSS implementations may need to use,
-          as well as useful architectural patterns.</p>
-
-          <h3><a href="/graphql">GraphQL</a></h3>
-          <p>JSS features integration with the Sitecore GraphQL API to enable fetching non-route data from Sitecore - or from other internal backends as an API aggregator or proxy.
-          This route is a living example of how to use an integrate with GraphQL data in a JSS app.</p>
-
-          <div class="alert alert-dark">
-            <h4>This app is a boilerplate</h4>
-            <p>The JSS samples are a boilerplate, not a library. That means that any code in this app is meant for you to own and customize to your own requirements.</p>
-            <p>Want to change the lint settings? Do it. Want to read manifest data from a MongoDB database? Go for it. This app is yours.</p>
-          </div>
-
-          <div class="alert alert-dark">
-            <h4>How to start with an empty app</h4>
-            <p>To remove all of the default sample content (the Styleguide and GraphQL routes) and start out with an empty JSS app:</p>
-            <ol>
-              <li>Delete <code>/src/components/Styleguide*</code> and <code>/src/components/GraphQL*</code></li>
-              <li>Delete <code>/sitecore/definitions/components/Styleguide*</code>, <code>/sitecore/definitions/templates/Styleguide*</code>, and <code>/sitecore/definitions/components/GraphQL*</code></li>
-              <li>Delete <code>/data/component-content/Styleguide</code></li>
-              <li>Delete <code>/data/content/Styleguide</code></li>
-              <li>Delete <code>/data/routes/styleguide</code> and <code>/data/routes/graphql</code></li>
-              <li>Delete <code>/data/dictionary/*.yml</code></li>
-            </ol>
-          </div>
+# This is a route layout definition.
+# The route definition defines which Sitecore components are present on a route,
+# what their content data is, and which _placeholder_ they are placed in.
+
+# This particular route definition is for the home route - '/', so it defines the
+# components shown on the initial page of the app.
+
+# You may use equivalent JSON files instead of YAML if you prefer;
+# however YAML is simpler to read and allows comments like this one :)
+
+# Setting an ID is optional, but it will allow referring to this item in internal links
+# the ID can be a app-wide-unique string, or a GUID value.
+id: home-page
+
+# Route-level fields are appropriate for page level data like <title> contents
+# Define route level fields in /sitecore/definitions/routes.sitecore
+fields:
+  pageTitle: Welcome to Sitecore JSS
+# Define the page layout starting at the root placeholder - in this case, '<%- helper.getAppPrefix(appPrefix, appName) %>main'
+# root placeholder names are defined in the package.json config section (required for Sitecore deployment)
+placeholders:
+  <%- helper.getAppPrefix(appPrefix, appName) %>jss-main:
+    - componentName: ContentBlock
+      fields:
+        heading: Welcome to Sitecore JSS
+        # to author content in YAML, use _multi-line values_ (prefixed with | + endline)
+        # as long as the same indent is preserved at the beginning of each line, no escaping
+        # is required at all in the value, making it easy to read
+        content: |
+          <p>Thanks for using JSS!! Here are some resources to get you started:</p>
+
+          <h3><a href="https://jss.sitecore.com" rel="noopener noreferrer">Documentation</a></h3>
+          <p>The official JSS documentation can help you with any JSS task from getting started to advanced techniques.</p>
+
+          <h3><a href="/styleguide">Styleguide</a></h3>
+          <p>The JSS styleguide is a living example of how to use JSS, hosted right in this app.
+          It demonstrates most of the common patterns that JSS implementations may need to use,
+          as well as useful architectural patterns.</p>
+
+          <h3><a href="/graphql">GraphQL</a></h3>
+          <p>JSS features integration with the Sitecore GraphQL API to enable fetching non-route data from Sitecore - or from other internal backends as an API aggregator or proxy.
+          This route is a living example of how to use an integrate with GraphQL data in a JSS app.</p>
+
+          <div class="alert alert-dark">
+            <h4>This app is a boilerplate</h4>
+            <p>The JSS samples are a boilerplate, not a library. That means that any code in this app is meant for you to own and customize to your own requirements.</p>
+            <p>Want to change the lint settings? Do it. Want to read manifest data from a MongoDB database? Go for it. This app is yours.</p>
+          </div>
+
+          <div class="alert alert-dark">
+            <h4>How to start with an empty app</h4>
+            <p>To remove all of the default sample content (the Styleguide and GraphQL routes) and start out with an empty JSS app:</p>
+            <ol>
+              <li>Delete <code>/src/components/Styleguide*</code> and <code>/src/components/GraphQL*</code></li>
+              <li>Delete <code>/sitecore/definitions/components/Styleguide*</code>, <code>/sitecore/definitions/templates/Styleguide*</code>, and <code>/sitecore/definitions/components/GraphQL*</code></li>
+              <li>Delete <code>/data/component-content/Styleguide</code></li>
+              <li>Delete <code>/data/content/Styleguide</code></li>
+              <li>Delete <code>/data/routes/styleguide</code> and <code>/data/routes/graphql</code></li>
+              <li>Delete <code>/data/dictionary/*.yml</code></li>
+            </ol>
+          </div>

package/dist/templates/react/data/routes/graphql/en.yml

@@ -1,27 +1,27 @@
-fields:
-  pageTitle: GraphQL | Sitecore JSS
-placeholders:
-  <%- helper.getAppPrefix(appPrefix, appName) %>jss-main:
-  - componentName: ContentBlock
-    fields:
-      heading: Using GraphQL with JSS
-      content: |
-        <p>This is a live example of using Integrated GraphQL and Connected GraphQL with a JSS app.
-        For more information on GraphQL use in JSS, please see <a href="https://jss.sitecore.com" target="_blank" rel="noopener noreferrer">the documentation</a>.</p>
-  - componentName: GraphQL-Layout
-    placeholders:
-      <%- helper.getAppPrefix(appPrefix, appName) %>jss-graphql-layout:
-      - componentName: GraphQL-IntegratedDemo
-        fields:
-          sample1: Hello integrated GraphQL world!
-          sample2:
-            href: https://www.sitecore.com
-            target: _blank
-            text: GraphQL lets you get structured field data too
-      - componentName: GraphQL-ConnectedDemo
-        fields:
-          sample1: Hello connected GraphQL world!
-          sample2:
-            href: https://www.sitecore.com
-            target: _blank
-            text: GraphQL lets you get structured field data too
+fields:
+  pageTitle: GraphQL | Sitecore JSS
+placeholders:
+  <%- helper.getAppPrefix(appPrefix, appName) %>jss-main:
+  - componentName: ContentBlock
+    fields:
+      heading: Using GraphQL with JSS
+      content: |
+        <p>This is a live example of using Integrated GraphQL and Connected GraphQL with a JSS app.
+        For more information on GraphQL use in JSS, please see <a href="https://jss.sitecore.com" target="_blank" rel="noopener noreferrer">the documentation</a>.</p>
+  - componentName: GraphQL-Layout
+    placeholders:
+      <%- helper.getAppPrefix(appPrefix, appName) %>jss-graphql-layout:
+      - componentName: GraphQL-IntegratedDemo
+        fields:
+          sample1: Hello integrated GraphQL world!
+          sample2:
+            href: https://www.sitecore.com
+            target: _blank
+            text: GraphQL lets you get structured field data too
+      - componentName: GraphQL-ConnectedDemo
+        fields:
+          sample1: Hello connected GraphQL world!
+          sample2:
+            href: https://www.sitecore.com
+            target: _blank
+            text: GraphQL lets you get structured field data too

package/dist/templates/react/data/routes/graphql/sample-1/en.yml

@@ -1,9 +1,9 @@
-fields:
-  pageTitle: Sample 1 Page Title
-placeholders:
-  <%- helper.getAppPrefix(appPrefix, appName) %>jss-main:
-  - componentName: ContentBlock
-    fields:
-      heading: GraphQL Sample 1
-      content: |
-        <p>A child route here to illustrate the power of GraphQL queries. <a href="/graphql">Back to GraphQL route</a></p>
+fields:
+  pageTitle: Sample 1 Page Title
+placeholders:
+  <%- helper.getAppPrefix(appPrefix, appName) %>jss-main:
+  - componentName: ContentBlock
+    fields:
+      heading: GraphQL Sample 1
+      content: |
+        <p>A child route here to illustrate the power of GraphQL queries. <a href="/graphql">Back to GraphQL route</a></p>

package/dist/templates/react/data/routes/graphql/sample-2/en.yml

@@ -1,9 +1,9 @@
-fields:
-  pageTitle: Sample 2 Page Title
-placeholders:
-  <%- helper.getAppPrefix(appPrefix, appName) %>jss-main:
-  - componentName: ContentBlock
-    fields:
-      heading: GraphQL Sample 2
-      content: |
-        <p>A child route here to illustrate the power of GraphQL queries. <a href="/graphql">Back to GraphQL route</a></p>
+fields:
+  pageTitle: Sample 2 Page Title
+placeholders:
+  <%- helper.getAppPrefix(appPrefix, appName) %>jss-main:
+  - componentName: ContentBlock
+    fields:
+      heading: GraphQL Sample 2
+      content: |
+        <p>A child route here to illustrate the power of GraphQL queries. <a href="/graphql">Back to GraphQL route</a></p>

package/dist/templates/react/data/routes/styleguide/custom-route-type/en.yml

@@ -1,12 +1,12 @@
-# Using a Custom Route Type enables adding more field data to the route level.
-template: <%- helper.getAppPrefix(appPrefix, appName) %>ExampleCustomRouteType
-fields:
-  # Note that custom route types inherit from the default route type automatically.
-  # This is what makes the `pageTitle` field available here, when it's not defined on the custom route type.
-  pageTitle: Custom Route Type | Sitecore JSS
-  headline: A Treatise on Route-Level Fields in JSS
-  author: Myrtle
-  content: <p>Custom route type fields are good for things like articles, where you may wish to have a filter UI on content fields, such as author or category. Route level fields are easy to query against, whereas component-level fields are not because it's possible to remove a component from a route. Note that route level fields <em>cannot be personalized</em> because you cannot conditionally swap out the route item for a different content item.</p>
-placeholders:
-  <%- helper.getAppPrefix(appPrefix, appName) %>jss-main:
-  - componentName: Styleguide-CustomRouteType
+# Using a Custom Route Type enables adding more field data to the route level.
+template: <%- helper.getAppPrefix(appPrefix, appName) %>ExampleCustomRouteType
+fields:
+  # Note that custom route types inherit from the default route type automatically.
+  # This is what makes the `pageTitle` field available here, when it's not defined on the custom route type.
+  pageTitle: Custom Route Type | Sitecore JSS
+  headline: A Treatise on Route-Level Fields in JSS
+  author: Myrtle
+  content: <p>Custom route type fields are good for things like articles, where you may wish to have a filter UI on content fields, such as author or category. Route level fields are easy to query against, whereas component-level fields are not because it's possible to remove a component from a route. Note that route level fields <em>cannot be personalized</em> because you cannot conditionally swap out the route item for a different content item.</p>
+placeholders:
+  <%- helper.getAppPrefix(appPrefix, appName) %>jss-main:
+  - componentName: Styleguide-CustomRouteType