npm - create-sitecore-jss - Versions diffs - 20.0.0-canary.78 - Mend

create-sitecore-jss 20.0.0-canary.78

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (166) hide show

package/dist/templates/nextjs/src/Navigation.tsx ADDED Viewed

@@ -0,0 +1,27 @@
+import { getPublicUrl } from '@sitecore-jss/sitecore-jss-nextjs';
+// Prefix public assets with a public URL to enable compatibility with Sitecore Experience Editor.
+// If you're not supporting the Experience Editor, you can remove this.
+const publicUrl = getPublicUrl();
+const Navigation = (): JSX.Element => (
+  <div>
+    <nav>
+      <ul>
+        <li>
+        <a href="https://sitecore.com">
+            <img src={`${publicUrl}/sc_logo.svg`} alt="Sitecore" />
+          </a>
+        </li>
+        <li>
+          <a href="https://jss.sitecore.com">JSS Documentation</a>
+        </li>
+        <li>
+          <a href="https://github.com/Sitecore/jss">JSS Repository</a>
+        </li>
+      </ul>
+    </nav>
+  </div>
+);
+export default Navigation;

package/dist/templates/nextjs/src/NotFound.tsx ADDED Viewed

@@ -0,0 +1,19 @@
+import Head from 'next/head';
+/**
+ * Rendered in case if we have 404 error
+ */
+const NotFound = (): JSX.Element => (
+  <>
+    <Head>
+      <title>404: NotFound</title>
+    </Head>
+    <div style={{ padding: 10 }}>
+      <h1>Page not found</h1>
+      <p>This page does not exist.</p>
+      <a href="/">Go to the Home page</a>
+    </div>
+  </>
+);
+export default NotFound;

package/dist/templates/nextjs/src/assets/app.css ADDED Viewed

@@ -0,0 +1,28 @@
+a[target='_blank']:after {
+  content: '\1F5D7'
+}
+/*
+  Hides Sitecore Experience Editor markup,
+  if you run the app in connected mode while the Sitecore cookies
+  are set to edit mode.
+*/
+.scChromeData, .scpm { display: none !important; }
+/*
+  Styles for default JSS error components
+*/
+.sc-jss-editing-error,
+.sc-jss-placeholder-error {
+  padding: 1em;
+  background-color: lightyellow;
+}
+/*
+  Style for default content block
+*/
+.contentTitle {
+    font-size: 3.5rem;
+    font-weight: 300;
+    line-height: 1.2;
+}

package/dist/templates/nextjs/src/components/ContentBlock.tsx ADDED Viewed

@@ -0,0 +1,24 @@
+import { Text, RichText, Field, withDatasourceCheck } from '@sitecore-jss/sitecore-jss-nextjs';
+import { ComponentProps } from 'lib/component-props';
+type ContentBlockProps = ComponentProps & {
+  fields: {
+    heading: Field<string>;
+    content: Field<string>;
+  };
+};
+/**
+ * A simple Content Block component, with a heading and rich text block.
+ * This is the most basic building block of a content site, and the most basic
+ * JSS component that's useful.
+ */
+const ContentBlock = ({ fields }: ContentBlockProps): JSX.Element => (
+  <div className="contentBlock">
+    <Text tag="h2" className="contentTitle" field={fields.heading} />
+    <RichText className="contentDescription" field={fields.content} />
+  </div>
+);
+export default withDatasourceCheck()<ContentBlockProps>(ContentBlock);

package/dist/templates/nextjs/src/lib/component-props/index.ts ADDED Viewed

@@ -0,0 +1,23 @@
+import {
+  ComponentParams,
+  ComponentRendering,
+  SitecoreContextValue,
+} from '@sitecore-jss/sitecore-jss-nextjs';
+/**
+ * Shared component props
+ */
+export type ComponentProps = {
+  rendering: ComponentRendering;
+  params: ComponentParams;
+};
+/**
+ * Component props with context
+ * You can access `sitecoreContext` by withSitecoreContext/useSitecoreContext
+ * @example withSitecoreContext()(ContentBlock)
+ * @example const { sitecoreContext } = useSitecoreContext()
+ */
+export type ComponentWithContextProps = ComponentProps & {
+  sitecoreContext: SitecoreContextValue;
+};

package/dist/templates/nextjs/src/lib/data-fetcher.ts ADDED Viewed

@@ -0,0 +1,16 @@
+import { AxiosResponse } from 'axios';
+import { AxiosDataFetcher } from '@sitecore-jss/sitecore-jss-nextjs';
+/**
+ * Implements a data fetcher using Axios - replace with your favorite
+ * SSR-capable HTTP or fetch library if you like. See HttpDataFetcher<T> type
+ * in sitecore-jss library for implementation details/notes.
+ * @param {string} url The URL to request; may include query string
+ * @param {unknown} data Optional data to POST with the request.
+ */
+export function dataFetcher<ResponseType>(
+  url: string,
+  data?: unknown
+): Promise<AxiosResponse<ResponseType>> {
+  return new AxiosDataFetcher().fetch<ResponseType>(url, data);
+}

package/dist/templates/nextjs/src/lib/dictionary-service-factory.ts ADDED Viewed

@@ -0,0 +1,30 @@
+import {
+  DictionaryService,
+  RestDictionaryService,
+  GraphQLDictionaryService,
+} from '@sitecore-jss/sitecore-jss-nextjs';
+import config from 'temp/config';
+export class DictionaryServiceFactory {
+  create(): DictionaryService {
+    return process.env.FETCH_WITH === 'GraphQL'
+      ? new GraphQLDictionaryService({
+          endpoint: config.graphQLEndpoint,
+          apiKey: config.sitecoreApiKey,
+          siteName: config.jssAppName,
+          /*
+            The Dictionary Service needs a root item ID in order to fetch dictionary phrases for the current
+            app. If your Sitecore instance only has 1 JSS App, you can specify the root item ID here;
+            otherwise, the service will attempt to figure out the root item for the current JSS App using GraphQL and app name.
+            rootItemId: '{GUID}'
+          */
+        })
+      : new RestDictionaryService({
+          apiHost: config.sitecoreApiHost,
+          apiKey: config.sitecoreApiKey,
+          siteName: config.jssAppName,
+        });
+  }
+}
+export const dictionaryServiceFactory = new DictionaryServiceFactory();

package/dist/templates/nextjs/src/lib/layout-service-factory.ts ADDED Viewed

@@ -0,0 +1,25 @@
+import {
+  LayoutService,
+  RestLayoutService,
+  GraphQLLayoutService,
+} from '@sitecore-jss/sitecore-jss-nextjs';
+import config from 'temp/config';
+export class LayoutServiceFactory {
+  create(): LayoutService {
+    return process.env.FETCH_WITH === 'GraphQL'
+      ? new GraphQLLayoutService({
+          endpoint: config.graphQLEndpoint,
+          apiKey: config.sitecoreApiKey,
+          siteName: config.jssAppName,
+        })
+      : new RestLayoutService({
+          apiHost: config.sitecoreApiHost,
+          apiKey: config.sitecoreApiKey,
+          siteName: config.jssAppName,
+          configurationName: 'default',
+        });
+  }
+}
+export const layoutServiceFactory = new LayoutServiceFactory();

package/dist/templates/nextjs/src/lib/next-config/plugins/graphql.js ADDED Viewed

@@ -0,0 +1,32 @@
+const graphqlPlugin = (nextConfig = {}) => {
+  return Object.assign({}, nextConfig, {
+    webpack: (config, options) => {
+      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',
+      });
+      // Overload the Webpack config if it was already overloaded
+      if (typeof nextConfig.webpack === 'function') {
+        return nextConfig.webpack(config, options);
+      }
+      return config;
+    }
+  });
+};
+module.exports = graphqlPlugin;

package/dist/templates/nextjs/src/lib/next-config/plugins/monorepo.js ADDED Viewed

@@ -0,0 +1,27 @@
+const withTM = require('next-transpile-modules')(['@sitecore-jss/sitecore-jss-nextjs'], {
+  resolveSymlinks: false,
+});
+const path = require('path');
+const CWD = process.cwd();
+const monorepoPlugin = (nextConfig = {}) => {
+  return withTM(Object.assign({}, nextConfig, {
+    webpack: (config, options) => {
+      if (options.isServer) {
+        config.externals = ['react', 'vertx', ...config.externals];
+      }
+      config.resolve.alias['react'] = path.resolve(CWD, '.', 'node_modules', 'react');
+      // Overload the Webpack config if it was already overloaded
+      if (typeof nextConfig.webpack === 'function') {
+        return nextConfig.webpack(config, options);
+      }
+      return config;
+    }
+  }));
+};
+module.exports = monorepoPlugin;

package/dist/templates/nextjs/src/lib/page-props-factory/index.ts ADDED Viewed

@@ -0,0 +1,50 @@
+import { GetServerSidePropsContext, GetStaticPropsContext } from 'next';
+import { SitecorePageProps } from 'lib/page-props';
+import * as plugins from 'temp/page-props-factory-plugins';
+/**
+ * Determines whether context is GetServerSidePropsContext (SSR) or GetStaticPropsContext (SSG)
+ * @param {GetServerSidePropsContext | GetStaticPropsContext} context
+ */
+export const isServerSidePropsContext = function (
+  context: GetServerSidePropsContext | GetStaticPropsContext
+): context is GetServerSidePropsContext {
+  return (<GetServerSidePropsContext>context).req !== undefined;
+};
+export interface Plugin {
+  /**
+   * Detect order when the plugin should be called, e.g. 0 - will be called first (can be a plugin which data is required for other plugins)
+   */
+  order: number;
+  /**
+   * A function which will be called during page props generation
+   */
+  exec(
+    props: SitecorePageProps,
+    context: GetServerSidePropsContext | GetStaticPropsContext
+  ): Promise<SitecorePageProps>;
+}
+export class SitecorePagePropsFactory {
+  /**
+   * Create SitecorePageProps for given context (SSR / GetServerSidePropsContext or SSG / GetStaticPropsContext)
+   * @param {GetServerSidePropsContext | GetStaticPropsContext} context
+   * @see SitecorePageProps
+   */
+  public async create(
+    context: GetServerSidePropsContext | GetStaticPropsContext
+  ): Promise<SitecorePageProps> {
+    const extendedProps = await (Object.values(plugins) as Plugin[])
+      .sort((p1, p2) => p1.order - p2.order)
+      .reduce(async (result, plugin) => {
+        const props = await result;
+        const newProps = await plugin.exec(props, context);
+        return newProps;
+      }, Promise.resolve({} as SitecorePageProps));
+    return extendedProps;
+  }
+}
+export const sitecorePagePropsFactory = new SitecorePagePropsFactory();

package/dist/templates/nextjs/src/lib/page-props-factory/plugins/componentProps.ts ADDED Viewed

@@ -0,0 +1,38 @@
+import { ComponentPropsService } from '@sitecore-jss/sitecore-jss-nextjs';
+import { SitecorePageProps } from 'lib/page-props';
+import { GetServerSidePropsContext, GetStaticPropsContext } from 'next';
+import { componentModule } from 'temp/componentFactory';
+import { Plugin, isServerSidePropsContext } from '..';
+class ComponentPropsPlugin implements Plugin {
+  private componentPropsService: ComponentPropsService;
+  order = 1;
+  constructor() {
+    this.componentPropsService = new ComponentPropsService();
+  }
+  async exec(props: SitecorePageProps, context: GetServerSidePropsContext | GetStaticPropsContext) {
+    if (!props.layoutData.sitecore.route) return props;
+    // Retrieve component props using side-effects defined on components level
+    if (isServerSidePropsContext(context)) {
+      props.componentProps = await this.componentPropsService.fetchServerSideComponentProps({
+        layoutData: props.layoutData,
+        context,
+        componentModule,
+      });
+    } else {
+      props.componentProps = await this.componentPropsService.fetchStaticComponentProps({
+        layoutData: props.layoutData,
+        context,
+        componentModule,
+      });
+    }
+    return props;
+  }
+}
+export const componentPropsPlugin = new ComponentPropsPlugin();

package/dist/templates/nextjs/src/lib/page-props-factory/plugins/normalMode.ts ADDED Viewed

@@ -0,0 +1,75 @@
+import { ParsedUrlQuery } from 'querystring';
+import { GetServerSidePropsContext, GetStaticPropsContext } from 'next';
+import { DictionaryService, LayoutService } from '@sitecore-jss/sitecore-jss-nextjs';
+import { dictionaryServiceFactory } from 'lib/dictionary-service-factory';
+import { layoutServiceFactory } from 'lib/layout-service-factory';
+import { SitecorePageProps } from 'lib/page-props';
+import { Plugin, isServerSidePropsContext } from '..';
+import pkg from '../../../../package.json';
+/**
+ * Extract normalized Sitecore item path from query
+ * @param {ParsedUrlQuery | undefined} params
+ */
+function extractPath(params: ParsedUrlQuery | undefined): string {
+  if (params === undefined) {
+    return '/';
+  }
+  let path = Array.isArray(params.path) ? params.path.join('/') : params.path ?? '/';
+  // Ensure leading '/'
+  if (!path.startsWith('/')) {
+    path = '/' + path;
+  }
+  return path;
+}
+class NormalModePlugin implements Plugin {
+  private dictionaryService: DictionaryService;
+  private layoutService: LayoutService;
+  order = 0;
+  constructor() {
+    this.dictionaryService = dictionaryServiceFactory.create();
+    this.layoutService = layoutServiceFactory.create();
+  }
+  async exec(props: SitecorePageProps, context: GetServerSidePropsContext | GetStaticPropsContext) {
+    if (context.preview) return props;
+    /**
+     * Normal mode
+     */
+    // Get normalized Sitecore item path
+    const path = extractPath(context.params);
+    // Use context locale if Next.js i18n is configured, otherwise use language defined in package.json
+    props.locale = context.locale ?? pkg.config.language;
+    // Fetch layout data, passing on req/res for SSR
+    props.layoutData = await this.layoutService.fetchLayoutData(
+      path,
+      props.locale,
+      // eslint-disable-next-line prettier/prettier
+      isServerSidePropsContext(context) ? (context as GetServerSidePropsContext).req : undefined,
+      isServerSidePropsContext(context) ? (context as GetServerSidePropsContext).res : undefined
+    );
+    if (!props.layoutData.sitecore.route) {
+      // A missing route value signifies an invalid path, so set notFound.
+      // Our page routes will return this in getStatic/ServerSideProps,
+      // which will trigger our custom 404 page with proper 404 status code.
+      // You could perform additional logging here to track these if desired.
+      props.notFound = true;
+    }
+    // Fetch dictionary data
+    props.dictionary = await this.dictionaryService.fetchDictionaryData(props.locale);
+    return props;
+  }
+}
+export const normalModePlugin = new NormalModePlugin();

package/dist/templates/nextjs/src/lib/page-props-factory/plugins/previewMode.ts ADDED Viewed

@@ -0,0 +1,27 @@
+import { editingDataService } from '@sitecore-jss/sitecore-jss-nextjs';
+import { SitecorePageProps } from 'lib/page-props';
+import { GetServerSidePropsContext, GetStaticPropsContext } from 'next';
+import { Plugin } from '..';
+class PreviewModePlugin implements Plugin {
+  order = 0;
+  async exec(props: SitecorePageProps, context: GetServerSidePropsContext | GetStaticPropsContext) {
+    if (!context.preview) return props;
+    // If we're in preview (editing) mode, use data already sent along with the editing request
+    const data = await editingDataService.getEditingData(context.previewData);
+    if (!data) {
+      throw new Error(
+        `Unable to get editing data for preview ${JSON.stringify(context.previewData)}`
+      );
+    }
+    props.locale = data.language;
+    props.layoutData = data.layoutData;
+    props.dictionary = data.dictionary;
+    return props;
+  }
+}
+export const previewModePlugin = new PreviewModePlugin();

package/dist/templates/nextjs/src/lib/page-props.ts ADDED Viewed

@@ -0,0 +1,16 @@
+import {
+  DictionaryPhrases,
+  ComponentPropsCollection,
+  LayoutServiceData,
+} from '@sitecore-jss/sitecore-jss-nextjs';
+/**
+ * Sitecore page props
+ */
+export type SitecorePageProps = {
+  locale: string;
+  dictionary: DictionaryPhrases;
+  componentProps: ComponentPropsCollection;
+  notFound: boolean;
+  layoutData: LayoutServiceData;
+};

package/dist/templates/nextjs/src/lib/sitemap-fetcher/index.ts ADDED Viewed

@@ -0,0 +1,25 @@
+import { GetStaticPathsContext } from 'next';
+import { StaticPath } from '@sitecore-jss/sitecore-jss-nextjs';
+import * as plugins from 'temp/sitemap-fetcher-plugins';
+export interface SitemapFetcherPlugin {
+  /**
+   * A function which will be called during page props generation
+   */
+  exec(context?: GetStaticPathsContext): Promise<StaticPath[]>;
+}
+export class SitecoreSitemapFetcher {
+  /**
+   * Generates SitecoreSitemap for given mode (Export / Disconnected Export / SSG)
+   * @param {GetStaticPathsContext} context
+   */
+  async fetch(context?: GetStaticPathsContext): Promise<StaticPath[]> {
+    const pluginsList = Object.values(plugins) as SitemapFetcherPlugin[];
+    const pluginsResults = await Promise.all(pluginsList.map((plugin) => plugin.exec(context)));
+    const results = pluginsResults.reduce((acc, cur) => [...acc, ...cur], []);
+    return results;
+  }
+}
+export const sitemapFetcher = new SitecoreSitemapFetcher();

package/dist/templates/nextjs/src/lib/sitemap-fetcher/plugins/graphqlSitemapService.ts ADDED Viewed

@@ -0,0 +1,36 @@
+import { GraphQLSitemapService } from '@sitecore-jss/sitecore-jss-nextjs';
+import config from 'temp/config';
+import { SitemapFetcherPlugin } from '..';
+import { GetStaticPathsContext } from 'next';
+import pkg from '../../../../package.json';
+import { StaticPath } from '@sitecore-jss/sitecore-jss-nextjs';
+class GraphqlSitemapServicePlugin implements SitemapFetcherPlugin {
+  _graphqlSitemapService: GraphQLSitemapService;
+  constructor() {
+    this._graphqlSitemapService = new GraphQLSitemapService({
+      endpoint: config.graphQLEndpoint,
+      apiKey: config.sitecoreApiKey,
+      siteName: config.jssAppName,
+      /*
+      The Sitemap Service needs a root item ID in order to fetch the list of pages for the current
+      app. If your Sitecore instance only has 1 JSS App, you can specify the root item ID here;
+      otherwise, the service will attempt to figure out the root item for the current JSS App using GraphQL and app name.
+      rootItemId: '{GUID}'
+      */
+    });
+  }
+  async exec(context?: GetStaticPathsContext): Promise<StaticPath[]> {
+    if (process.env.EXPORT_MODE) {
+      // Disconnected Export mode
+      if (process.env.JSS_MODE !== 'disconnected') {
+        return this._graphqlSitemapService.fetchExportSitemap(pkg.config.language);
+      }
+    }
+    return this._graphqlSitemapService.fetchSSGSitemap(context?.locales || []);
+  }
+}
+export const graphqlSitemapServicePlugin = new GraphqlSitemapServicePlugin();

package/dist/templates/nextjs/src/pages/404.tsx ADDED Viewed

@@ -0,0 +1,5 @@
+import NotFound from 'src/NotFound';
+const Custom404 = (): JSX.Element => <NotFound />;
+export default Custom404;

package/dist/templates/nextjs/src/pages/[[...path]].tsx ADDED Viewed

@@ -0,0 +1,91 @@
+import { useEffect } from 'react';
+<% if (prerender === 'SSG') { -%>
+import { GetStaticPaths, GetStaticProps } from 'next';
+<% } else if (prerender === 'SSR') { -%>
+import { GetServerSideProps } from 'next';
+<% } -%>
+import NotFound from 'src/NotFound';
+import Layout from 'src/Layout';
+import {
+  SitecoreContext,
+  ComponentPropsContext,
+  handleEditorFastRefresh,
+} from '@sitecore-jss/sitecore-jss-nextjs';
+import { SitecorePageProps } from 'lib/page-props';
+import { sitecorePagePropsFactory } from 'lib/page-props-factory';
+import { componentFactory } from 'temp/componentFactory';
+<% if (prerender === 'SSG') { -%>
+import { sitemapFetcher } from 'lib/sitemap-fetcher';
+<% } -%>
+const SitecorePage = ({ notFound, componentProps, layoutData }: SitecorePageProps): JSX.Element => {
+  useEffect(() => {
+    // Since Sitecore editors do not support Fast Refresh, need to refresh EE chromes after Fast Refresh finished
+    handleEditorFastRefresh();
+  }, []);
+  if (notFound || !layoutData.sitecore.route) {
+    // Shouldn't hit this (as long as 'notFound' is being returned below), but just to be safe
+    return <NotFound />;
+  }
+  return (
+    <ComponentPropsContext value={componentProps}>
+      <SitecoreContext componentFactory={componentFactory} layoutData={layoutData}>
+        <Layout />
+      </SitecoreContext>
+    </ComponentPropsContext>
+  );
+};
+<% if (prerender === 'SSG') { -%>
+// This function gets called at build and export time to determine
+// pages for SSG ("paths", as tokenized array).
+export const getStaticPaths: GetStaticPaths = async (context) => {
+  // Fallback, along with revalidate in getStaticProps (below),
+  // enables Incremental Static Regeneration. This allows us to
+  // leave certain (or all) paths empty if desired and static pages
+  // will be generated on request (development mode in this example).
+  // Alternatively, the entire sitemap could be pre-rendered
+  // ahead of time (non-development mode in this example).
+  // See https://nextjs.org/docs/basic-features/data-fetching#incremental-static-regeneration
+  if (process.env.NODE_ENV !== 'development') {
+    // Note: Next.js runs export in production mode
+    const paths = await sitemapFetcher.fetch(context);
+    return {
+      paths,
+      fallback: process.env.EXPORT_MODE ? false : 'blocking',
+    };
+  }
+  return {
+    paths: [],
+    fallback: 'blocking',
+  };
+};
+// This function gets called at build time on server-side.
+// It may be called again, on a serverless function, if
+// revalidation (or fallback) is enabled and a new request comes in.
+export const getStaticProps: GetStaticProps = async (context) => {
+<% } else if (prerender === 'SSR') { -%>
+// This function gets called at request time on server-side.
+export const getServerSideProps: GetServerSideProps = async (context) => {
+<% } -%>
+  const props = await sitecorePagePropsFactory.create(context);
+  return {
+    props,
+    <% if (prerender === 'SSG') { -%>
+    // Next.js will attempt to re-generate the page:
+    // - When a request comes in
+    // - At most once every 5 seconds
+    revalidate: 5, // In seconds
+    <% } -%>
+    notFound: props.notFound, // Returns custom 404 page with a status code of 404 when true
+  };
+};
+export default SitecorePage;

package/dist/templates/nextjs/src/pages/_app.tsx ADDED Viewed

@@ -0,0 +1,19 @@
+import type { AppProps } from 'next/app';
+import { I18nProvider } from 'next-localization';
+import 'assets/app.css';
+function App({ Component, pageProps }: AppProps): JSX.Element {
+  const { dictionary, ...rest } = pageProps;
+  return (
+    // Use the next-localization (w/ rosetta) library to provide our translation dictionary to the app.
+    // Note Next.js does not (currently) provide anything for translation, only i18n routing.
+    // If your app is not multilingual, next-localization and references to it can be removed.
+    <I18nProvider lngDict={dictionary} locale={pageProps.locale}>
+      <Component {...rest} />
+    </I18nProvider>
+  );
+}
+export default App;