create-sitecore-jss 22.8.0-canary.1 → 22.8.0-canary.3

package/dist/templates/nextjs/package.json

@@ -26,8 +26,6 @@
   "license": "Apache-2.0",
   "dependencies": {
     "@sitecore-jss/sitecore-jss-nextjs": "<%- version %>",
-    "graphql": "~15.8.0",
-    "graphql-tag": "^2.12.6",
     "next": "^15.3.1",
     "next-localization": "^0.12.0",
     "react": "^19.1.0",
@@ -35,14 +33,6 @@
     "sharp": "0.32.6"
   },
   "devDependencies": {
-    "@graphql-codegen/cli": "^5.0.0",
-    "@graphql-codegen/import-types-preset": "^3.0.0",
-    "@graphql-codegen/plugin-helpers": "^5.0.1",
-    "@graphql-codegen/typed-document-node": "^5.0.1",
-    "@graphql-codegen/typescript": "^4.0.1",
-    "@graphql-codegen/typescript-operations": "^4.0.1",
-    "@graphql-codegen/typescript-resolvers": "^4.0.1",
-    "@graphql-typed-document-node/core": "^3.2.0",
     "@sitecore-jss/sitecore-jss-cli": "<%- version %>",
     "@sitecore-jss/sitecore-jss-dev-tools": "<%- version %>",
     "@types/node": "^22.9.0",
@@ -61,20 +51,17 @@
     "eslint-plugin-prettier": "^4.2.1",
     "eslint-plugin-react": "^7.37.5",
     "eslint-plugin-yaml": "^0.5.0",
-    "graphql-let": "^0.18.6",
     "npm-run-all": "~4.1.5",
     "prettier": "^2.8.3",
     "ts-node": "^10.9.1",
     "tsconfig-paths": "^4.1.2",
-    "typescript": "~5.4.0",
-    "yaml-loader": "^0.8.0"
+    "typescript": "~5.4.0"
   },
   "scripts": {
     "jss": "jss",
     "lint": "eslint ./src/**/*.tsx ./src/**/*.ts ./scripts/**/*.ts",
-    "bootstrap": "ts-node --require dotenv-flow/config --project tsconfig.scripts.json scripts/bootstrap.ts && graphql-let",
+    "bootstrap": "ts-node --require dotenv-flow/config --project tsconfig.scripts.json scripts/bootstrap.ts",
     "build": "cross-env NODE_ENV=production npm-run-all --serial bootstrap next:build",
-    "graphql:update": "ts-node --project tsconfig.scripts.json ./scripts/fetch-graphql-introspection-data.ts",
     "next:build": "next build",
     "next:dev": "cross-env NODE_OPTIONS='--inspect' next dev",
     "next:start": "next start",

package/dist/templates/nextjs/src/temp/gitignore

@@ -1,3 +1,2 @@
 *
 !.gitignore
-!GraphQLIntrospectionResult.json

package/dist/templates/nextjs/tsconfig.json

@@ -6,7 +6,6 @@
       "lib/*": ["src/lib/*"],
       "temp/*": ["src/temp/*"],
       "assets/*": ["src/assets/*"],
-      "graphql-types": ["node_modules/@types/graphql-let/__generated__/__types__"],
       "react": ["node_modules/react"]
     },
     "target": "es5",

package/dist/templates/nextjs-styleguide/graphql.d.ts

@@ -0,0 +1,5 @@
+declare module '*.graphql' {
+  import { DocumentNode } from 'graphql';
+  const document: DocumentNode;
+  export default document;
+}

package/dist/templates/nextjs-styleguide/package.json

@@ -5,7 +5,9 @@
   },
   "devDependencies": {
     "@sitecore-jss/sitecore-jss-dev-tools": "<%- version %>",
-    "@types/nprogress": "^0.2.0"
+    "@types/nprogress": "^0.2.0",
+    "graphql": "^16.11.0",
+    "graphql-tag": "^2.12.6"
   },
   "scripts": {
     "start": "cross-env NODE_ENV=development JSS_MODE=disconnected \"npm-run-all --serial bootstrap --parallel next:dev start:disconnected-proxy start:watch-components\"",

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/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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "create-sitecore-jss",
-  "version": "22.8.0-canary.1",
+  "version": "22.8.0-canary.3",
   "description": "Sitecore JSS initializer",
   "bin": "./dist/index.js",
   "scripts": {
@@ -65,5 +65,5 @@
     "ts-node": "^10.9.1",
     "typescript": "~5.6.3"
   },
-  "gitHead": "970cbaf93d540940cc9b85ebec0023011e92d73c"
+  "gitHead": "79696336a6cfd4ee3fd533cc28ebd87dd748ad41"
 }

package/dist/templates/nextjs/.graphql-let.yml

@@ -1,8 +0,0 @@
-schema:
-  - './src/temp/GraphQLIntrospectionResult.json'
-documents: 'src/**/*.graphql'
-plugins:
-  - typescript-operations
-  - typed-document-node
-config:
-    useIndexSignature: true

package/dist/templates/nextjs/scripts/fetch-graphql-introspection-data.ts

@@ -1,46 +0,0 @@
-import { GraphQLRequestClient } from '@sitecore-jss/sitecore-jss-nextjs/graphql';
-import fs from 'fs';
-import { getIntrospectionQuery } from 'graphql';
-
-// This script load graphql introspection data in order to use graphql code generator and generate typescript types
-// The `jss graphql:update` command should be executed when Sitecore templates related to the site are altered.
-
-let jssConfig;
-
-try {
-  // eslint-disable-next-line
-  jssConfig = require('../src/temp/config');
-} catch (e) {
-  console.error(
-    'Unable to require JSS config. Ensure `jss setup` has been run, and the app has been started at least once after setup.'
-  );
-  console.error(e);
-  process.exit(1);
-}
-
-console.log(`Fetch graphql introspection data from ${jssConfig.graphQLEndpoint}...`);
-
-const client = new GraphQLRequestClient(jssConfig.graphQLEndpoint, {
-  apiKey: jssConfig.sitecoreApiKey,
-});
-
-client
-  .request(getIntrospectionQuery())
-  .then(result => {
-    fs.writeFile(
-      './src/temp/GraphQLIntrospectionResult.json',
-      JSON.stringify(result, null, 2),
-      err => {
-        if (err) {
-          console.error('Error writing GraphQLIntrospectionResult file', err);
-          return;
-        }
-
-        console.log('GraphQL Introspection Data successfully fetched!');
-      }
-    );
-  })
-  .catch(e => {
-    console.error(e);
-    process.exit(1);
-  });