From a41c8bbdf14f3f5689ab7b6e14033a7ea3fa25e0 Mon Sep 17 00:00:00 2001 From: Illia Kovalenko <23364749+illiakovalenko@users.noreply.github.com> Date: Fri, 26 Apr 2024 03:13:26 +0300 Subject: [PATCH] [Chore] Removed deprecated props, updated samples to use clientFactory (#1784) * [Chore] Removed deprecated props, updated samples to use clientFactory (#1783) * Updated Angular sample and exposed GraphQLRequestClient * Upgraded React app, removed deprecated defaultProps property * Updated node-headless-ssr-experience-edge and vue samples * Updated comments * Updated CHANGELOG * Updated CHANGELOG --- CHANGELOG.md | 7 +++-- .../angular/src/app/lib/client-factory.ts | 28 +++++++++++++++++++ .../src/app/lib/dictionary-service-factory.ts | 4 +-- .../src/app/lib/layout-service-factory.ts | 4 +-- .../src/client-factory.ts | 28 +++++++++++++++++++ .../src/index.ts | 7 ++--- .../templates/react/src/lib/client-factory.js | 25 +++++++++++++++++ .../src/lib/dictionary-service-factory.js | 4 +-- .../react/src/lib/layout-service-factory.js | 4 +-- .../templates/vue/src/lib/client-factory.js | 25 +++++++++++++++++ .../vue/src/lib/dictionary-service-factory.js | 4 +-- .../vue/src/lib/layout-service-factory.js | 4 +-- .../sitecore-jss-angular/src/public_api.ts | 2 ++ .../src/components/Link.tsx | 6 +--- .../src/components/NextImage.tsx | 6 +--- .../src/components/RichText.tsx | 14 +++++----- .../src/components/Date.tsx | 6 +--- .../src/components/Image.tsx | 6 +--- .../src/components/Link.tsx | 6 +--- .../src/components/RichText.tsx | 7 +---- .../src/components/Text.tsx | 9 ++---- packages/sitecore-jss-react/src/index.ts | 2 ++ packages/sitecore-jss-vue/src/index.ts | 2 ++ 23 files changed, 146 insertions(+), 64 deletions(-) create mode 100644 packages/create-sitecore-jss/src/templates/angular/src/app/lib/client-factory.ts create mode 100644 packages/create-sitecore-jss/src/templates/node-headless-ssr-experience-edge/src/client-factory.ts create mode 100644 packages/create-sitecore-jss/src/templates/react/src/lib/client-factory.js create mode 100644 packages/create-sitecore-jss/src/templates/vue/src/lib/client-factory.js diff --git a/CHANGELOG.md b/CHANGELOG.md index 39be20524d..2ceb754896 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -9,9 +9,6 @@ Our versioning strategy is as follows: - Minor: may include breaking changes in framework packages (e.g. framework upgrades, new features, improvements) - Major: may include breaking changes in core packages (e.g. major architectural changes, major features) -## Unreleased - - ## 22.0.0 ### 🛠 Breaking Changes @@ -30,6 +27,10 @@ Our versioning strategy is as follows: * `[sitecore-jss-react]` Deprecated `media` prop is removed from Image component. Use `field` prop instead ([#1780](https://github.com/Sitecore/jss/pull/1780)). +* `[templates/react]` `[templates/angular]` `[templates/vue]` `[templates/node-headless-ssr-experience-edge]` `[sitecore-jss-react]` `[sitecore-jss-nextjs]` ([#1783](https://github.com/Sitecore/jss/pull/1783)): + * GraphQL-based services can now only be initialized with clientFactory parameter. Previously deprecated option of providing endpoint and apiKey has been removed + * Removed deprecated _defaultProps_ react component property + * `[templates/nextjs]` GraphQL-based services can now only be initialized with clientFactory parameter. Previously deprecated option of providing endpoint and apiKey has been removed ([#1780](https://github.com/Sitecore/jss/pull/1780)). * `[templates/nextjs]` `[templates/react]` `[templates/vue]` `[templates/angular]` Deprecated JSS_APP_NAME environment variable has been removed ([#1780](https://github.com/Sitecore/jss/pull/1780)). diff --git a/packages/create-sitecore-jss/src/templates/angular/src/app/lib/client-factory.ts b/packages/create-sitecore-jss/src/templates/angular/src/app/lib/client-factory.ts new file mode 100644 index 0000000000..1563e05d39 --- /dev/null +++ b/packages/create-sitecore-jss/src/templates/angular/src/app/lib/client-factory.ts @@ -0,0 +1,28 @@ +import { + GraphQLRequestClientFactoryConfig, + GraphQLRequestClient, +} from '@sitecore-jss/sitecore-jss-angular'; +import { environment as env } from '../../environments/environment'; + +// The GraphQLRequestClientFactory serves as the central hub for executing GraphQL requests within the application + +/** + * Creates a new GraphQLRequestClientFactory instance + * @returns GraphQLRequestClientFactory instance + */ +export const createGraphQLClientFactory = () => { + let clientConfig: GraphQLRequestClientFactoryConfig; + + if (env.graphQLEndpoint && env.sitecoreApiKey) { + clientConfig = { + endpoint: env.graphQLEndpoint, + apiKey: env.sitecoreApiKey, + }; + } else { + throw new Error('Please configure your graphQLEndpoint and sitecoreApiKey.'); + } + + return GraphQLRequestClient.createClientFactory(clientConfig); +}; + +export const clientFactory = createGraphQLClientFactory(); diff --git a/packages/create-sitecore-jss/src/templates/angular/src/app/lib/dictionary-service-factory.ts b/packages/create-sitecore-jss/src/templates/angular/src/app/lib/dictionary-service-factory.ts index e10e93f7d2..f221bcfd19 100644 --- a/packages/create-sitecore-jss/src/templates/angular/src/app/lib/dictionary-service-factory.ts +++ b/packages/create-sitecore-jss/src/templates/angular/src/app/lib/dictionary-service-factory.ts @@ -5,13 +5,13 @@ import { constants, } from '@sitecore-jss/sitecore-jss-angular'; import { environment as env } from '../../environments/environment'; +import { clientFactory } from './client-factory'; export class DictionaryServiceFactory { create(): DictionaryService { return process.env.FETCH_WITH === constants.FETCH_WITH.GRAPHQL ? new GraphQLDictionaryService({ - endpoint: env.graphQLEndpoint, - apiKey: env.sitecoreApiKey, + clientFactory, siteName: env.sitecoreSiteName, /* The Dictionary Service needs a root item ID in order to fetch dictionary phrases for the current diff --git a/packages/create-sitecore-jss/src/templates/angular/src/app/lib/layout-service-factory.ts b/packages/create-sitecore-jss/src/templates/angular/src/app/lib/layout-service-factory.ts index 7fffd4f165..2ea4b32d38 100644 --- a/packages/create-sitecore-jss/src/templates/angular/src/app/lib/layout-service-factory.ts +++ b/packages/create-sitecore-jss/src/templates/angular/src/app/lib/layout-service-factory.ts @@ -5,13 +5,13 @@ import { constants, } from '@sitecore-jss/sitecore-jss-angular'; import { environment } from '../../environments/environment'; +import { clientFactory } from './client-factory'; export class LayoutServiceFactory { create(): LayoutService { return process.env.FETCH_WITH === constants.FETCH_WITH.GRAPHQL ? new GraphQLLayoutService({ - endpoint: environment.graphQLEndpoint, - apiKey: environment.sitecoreApiKey, + clientFactory, siteName: environment.sitecoreSiteName, }) : new RestLayoutService({ diff --git a/packages/create-sitecore-jss/src/templates/node-headless-ssr-experience-edge/src/client-factory.ts b/packages/create-sitecore-jss/src/templates/node-headless-ssr-experience-edge/src/client-factory.ts new file mode 100644 index 0000000000..ef93ec6ba9 --- /dev/null +++ b/packages/create-sitecore-jss/src/templates/node-headless-ssr-experience-edge/src/client-factory.ts @@ -0,0 +1,28 @@ +import { + GraphQLRequestClientFactoryConfig, + GraphQLRequestClient, +} from '@sitecore-jss/sitecore-jss'; +import { config } from './config'; + +// The GraphQLRequestClientFactory serves as the central hub for executing GraphQL requests within the application + +/** + * Creates a new GraphQLRequestClientFactory instance + * @returns GraphQLRequestClientFactory instance + */ +export const createGraphQLClientFactory = () => { + let clientConfig: GraphQLRequestClientFactoryConfig; + + if (config.endpoint && config.apiKey) { + clientConfig = { + endpoint: config.endpoint, + apiKey: config.apiKey, + }; + } else { + throw new Error('Please configure your endpoint and apiKey.'); + } + + return GraphQLRequestClient.createClientFactory(clientConfig); +}; + +export const clientFactory = createGraphQLClientFactory(); diff --git a/packages/create-sitecore-jss/src/templates/node-headless-ssr-experience-edge/src/index.ts b/packages/create-sitecore-jss/src/templates/node-headless-ssr-experience-edge/src/index.ts index 9b82e12485..74b745383e 100644 --- a/packages/create-sitecore-jss/src/templates/node-headless-ssr-experience-edge/src/index.ts +++ b/packages/create-sitecore-jss/src/templates/node-headless-ssr-experience-edge/src/index.ts @@ -4,18 +4,17 @@ import 'dotenv/config'; import { GraphQLLayoutService } from '@sitecore-jss/sitecore-jss/layout'; import { GraphQLDictionaryService } from '@sitecore-jss/sitecore-jss/i18n'; import { config } from './config'; +import { clientFactory } from './client-factory'; const server = express(); const layoutService = new GraphQLLayoutService({ - endpoint: config.endpoint, - apiKey: config.apiKey, + clientFactory, siteName: config.siteName, }); const dictionaryService = new GraphQLDictionaryService({ - endpoint: config.endpoint, - apiKey: config.apiKey, + clientFactory, siteName: config.siteName, /* The Dictionary Service needs a root item ID in order to fetch dictionary phrases for the current diff --git a/packages/create-sitecore-jss/src/templates/react/src/lib/client-factory.js b/packages/create-sitecore-jss/src/templates/react/src/lib/client-factory.js new file mode 100644 index 0000000000..0b71735488 --- /dev/null +++ b/packages/create-sitecore-jss/src/templates/react/src/lib/client-factory.js @@ -0,0 +1,25 @@ +import { GraphQLRequestClient } from '@sitecore-jss/sitecore-jss-react'; +import config from '../temp/config'; + +// The GraphQLRequestClientFactory serves as the central hub for executing GraphQL requests within the application + +/** + * Creates a new GraphQLRequestClientFactory instance + * @returns GraphQLRequestClientFactory instance + */ +export const createGraphQLClientFactory = () => { + let clientConfig; + + if (config.graphQLEndpoint && config.sitecoreApiKey) { + clientConfig = { + endpoint: config.graphQLEndpoint, + apiKey: config.sitecoreApiKey, + }; + } else { + throw new Error('Please configure your graphQLEndpoint and sitecoreApiKey.'); + } + + return GraphQLRequestClient.createClientFactory(clientConfig); +}; + +export const clientFactory = createGraphQLClientFactory(); diff --git a/packages/create-sitecore-jss/src/templates/react/src/lib/dictionary-service-factory.js b/packages/create-sitecore-jss/src/templates/react/src/lib/dictionary-service-factory.js index e7652ac554..ae0203cec7 100644 --- a/packages/create-sitecore-jss/src/templates/react/src/lib/dictionary-service-factory.js +++ b/packages/create-sitecore-jss/src/templates/react/src/lib/dictionary-service-factory.js @@ -4,13 +4,13 @@ import { constants, } from '@sitecore-jss/sitecore-jss-react'; import config from '../temp/config'; +import { clientFactory } from './client-factory'; export class DictionaryServiceFactory { create() { return process.env.REACT_APP_FETCH_WITH === constants.FETCH_WITH.GRAPHQL ? new GraphQLDictionaryService({ - endpoint: config.graphQLEndpoint, - apiKey: config.sitecoreApiKey, + clientFactory, siteName: config.sitecoreSiteName, /* The Dictionary Service needs a root item ID in order to fetch dictionary phrases for the current diff --git a/packages/create-sitecore-jss/src/templates/react/src/lib/layout-service-factory.js b/packages/create-sitecore-jss/src/templates/react/src/lib/layout-service-factory.js index 8895c04035..ad33e7ad6f 100644 --- a/packages/create-sitecore-jss/src/templates/react/src/lib/layout-service-factory.js +++ b/packages/create-sitecore-jss/src/templates/react/src/lib/layout-service-factory.js @@ -4,13 +4,13 @@ import { constants, } from '@sitecore-jss/sitecore-jss-react'; import config from '../temp/config'; +import { clientFactory } from './client-factory'; export class LayoutServiceFactory { create() { return process.env.REACT_APP_FETCH_WITH === constants.FETCH_WITH.GRAPHQL ? new GraphQLLayoutService({ - endpoint: config.graphQLEndpoint, - apiKey: config.sitecoreApiKey, + clientFactory, siteName: config.sitecoreSiteName, }) : new RestLayoutService({ diff --git a/packages/create-sitecore-jss/src/templates/vue/src/lib/client-factory.js b/packages/create-sitecore-jss/src/templates/vue/src/lib/client-factory.js new file mode 100644 index 0000000000..6c25d202db --- /dev/null +++ b/packages/create-sitecore-jss/src/templates/vue/src/lib/client-factory.js @@ -0,0 +1,25 @@ +import { GraphQLRequestClient } from '@sitecore-jss/sitecore-jss-vue'; +import config from '../temp/config'; + +// The GraphQLRequestClientFactory serves as the central hub for executing GraphQL requests within the application + +/** + * Creates a new GraphQLRequestClientFactory instance + * @returns GraphQLRequestClientFactory instance + */ +export const createGraphQLClientFactory = () => { + let clientConfig; + + if (config.graphQLEndpoint && config.sitecoreApiKey) { + clientConfig = { + endpoint: config.graphQLEndpoint, + apiKey: config.sitecoreApiKey, + }; + } else { + throw new Error('Please configure your graphQLEndpoint and sitecoreApiKey.'); + } + + return GraphQLRequestClient.createClientFactory(clientConfig); +}; + +export const clientFactory = createGraphQLClientFactory(); diff --git a/packages/create-sitecore-jss/src/templates/vue/src/lib/dictionary-service-factory.js b/packages/create-sitecore-jss/src/templates/vue/src/lib/dictionary-service-factory.js index 55abb6e276..f907096411 100644 --- a/packages/create-sitecore-jss/src/templates/vue/src/lib/dictionary-service-factory.js +++ b/packages/create-sitecore-jss/src/templates/vue/src/lib/dictionary-service-factory.js @@ -4,13 +4,13 @@ import { constants, } from '@sitecore-jss/sitecore-jss-vue'; import config from '../temp/config'; +import { clientFactory } from './client-factory'; export class DictionaryServiceFactory { create() { return process.env.VUE_APP_FETCH_WITH === constants.FETCH_WITH.GRAPHQL ? new GraphQLDictionaryService({ - endpoint: config.graphQLEndpoint, - apiKey: config.sitecoreApiKey, + clientFactory, siteName: config.sitecoreSiteName, /* The Dictionary Service needs a root item ID in order to fetch dictionary phrases for the current diff --git a/packages/create-sitecore-jss/src/templates/vue/src/lib/layout-service-factory.js b/packages/create-sitecore-jss/src/templates/vue/src/lib/layout-service-factory.js index 826cc210ee..ed19700c61 100644 --- a/packages/create-sitecore-jss/src/templates/vue/src/lib/layout-service-factory.js +++ b/packages/create-sitecore-jss/src/templates/vue/src/lib/layout-service-factory.js @@ -1,12 +1,12 @@ import { GraphQLLayoutService, RestLayoutService, constants } from '@sitecore-jss/sitecore-jss-vue'; import config from '../temp/config'; +import { clientFactory } from './client-factory'; export class LayoutServiceFactory { create() { return process.env.VUE_APP_FETCH_WITH === constants.FETCH_WITH.GRAPHQL ? new GraphQLLayoutService({ - endpoint: config.graphQLEndpoint, - apiKey: config.sitecoreApiKey, + clientFactory, siteName: config.sitecoreSiteName, }) : new RestLayoutService({ diff --git a/packages/sitecore-jss-angular/src/public_api.ts b/packages/sitecore-jss-angular/src/public_api.ts index 182b303b20..063522b749 100644 --- a/packages/sitecore-jss-angular/src/public_api.ts +++ b/packages/sitecore-jss-angular/src/public_api.ts @@ -60,6 +60,8 @@ export { RetryStrategy, DefaultRetryStrategy, GraphQLClientError, + GraphQLRequestClientFactoryConfig, + GraphQLRequestClient, } from '@sitecore-jss/sitecore-jss/graphql'; export { constants, diff --git a/packages/sitecore-jss-nextjs/src/components/Link.tsx b/packages/sitecore-jss-nextjs/src/components/Link.tsx index 4d8a1eb3c6..3d78151708 100644 --- a/packages/sitecore-jss-nextjs/src/components/Link.tsx +++ b/packages/sitecore-jss-nextjs/src/components/Link.tsx @@ -21,7 +21,7 @@ export const Link = forwardRef( (props: LinkProps, ref): JSX.Element | null => { const { field, - editable, + editable = true, children, internalLinkMatcher = /^\//g, showLinkTextWithChildrenPresent, @@ -72,10 +72,6 @@ export const Link = forwardRef( } ); -Link.defaultProps = { - editable: true, -}; - Link.displayName = 'NextLink'; Link.propTypes = { diff --git a/packages/sitecore-jss-nextjs/src/components/NextImage.tsx b/packages/sitecore-jss-nextjs/src/components/NextImage.tsx index 57a9795cd9..480f85b8e8 100644 --- a/packages/sitecore-jss-nextjs/src/components/NextImage.tsx +++ b/packages/sitecore-jss-nextjs/src/components/NextImage.tsx @@ -13,7 +13,7 @@ import Image, { ImageProps as NextImageProperties } from 'next/image'; type NextImageProps = ImageProps & Partial; export const NextImage: React.FC = ({ - editable, + editable = true, imageParams, field, mediaUrlPrefix, @@ -105,8 +105,4 @@ NextImage.propTypes = { ), }; -NextImage.defaultProps = { - editable: true, -}; - NextImage.displayName = 'NextImage'; diff --git a/packages/sitecore-jss-nextjs/src/components/RichText.tsx b/packages/sitecore-jss-nextjs/src/components/RichText.tsx index a89a2b081a..9e8d88a804 100644 --- a/packages/sitecore-jss-nextjs/src/components/RichText.tsx +++ b/packages/sitecore-jss-nextjs/src/components/RichText.tsx @@ -25,9 +25,14 @@ export type RichTextProps = ReactRichTextProps & { const prefetched: { [cacheKey: string]: boolean } = {}; export const RichText = (props: RichTextProps): JSX.Element => { - const { internalLinksSelector = 'a[href^="/"]', prefetchLinks = true, ...rest } = props; + const { + internalLinksSelector = 'a[href^="/"]', + prefetchLinks = true, + editable = true, + ...rest + } = props; const hasText = props.field && props.field.value; - const isEditing = props.editable && props.field && props.field.editable; + const isEditing = editable && props.field && props.field.editable; const router = useRouter(); const richTextRef = useRef(null); @@ -77,9 +82,4 @@ RichText.propTypes = { ...RichTextPropTypes, }; -RichText.defaultProps = { - tag: 'div', - editable: true, -}; - RichText.displayName = 'NextRichText'; diff --git a/packages/sitecore-jss-react/src/components/Date.tsx b/packages/sitecore-jss-react/src/components/Date.tsx index 3ec447496a..4a5eedb4a0 100644 --- a/packages/sitecore-jss-react/src/components/Date.tsx +++ b/packages/sitecore-jss-react/src/components/Date.tsx @@ -24,7 +24,7 @@ export interface DateFieldProps { export const DateField: React.FC = ({ field, tag, - editable, + editable = true, render, ...otherProps }) => { @@ -68,8 +68,4 @@ DateField.propTypes = { render: PropTypes.func, }; -DateField.defaultProps = { - editable: true, -}; - DateField.displayName = 'Date'; diff --git a/packages/sitecore-jss-react/src/components/Image.tsx b/packages/sitecore-jss-react/src/components/Image.tsx index 2659d0394a..f7ada0b4e1 100644 --- a/packages/sitecore-jss-react/src/components/Image.tsx +++ b/packages/sitecore-jss-react/src/components/Image.tsx @@ -143,7 +143,7 @@ export const getEEMarkup = ( }; export const Image: React.FC = ({ - editable, + editable = true, imageParams, field, mediaUrlPrefix, @@ -206,8 +206,4 @@ Image.propTypes = { ), }; -Image.defaultProps = { - editable: true, -}; - Image.displayName = 'Image'; diff --git a/packages/sitecore-jss-react/src/components/Link.tsx b/packages/sitecore-jss-react/src/components/Link.tsx index a4906694a6..b05a85932f 100644 --- a/packages/sitecore-jss-react/src/components/Link.tsx +++ b/packages/sitecore-jss-react/src/components/Link.tsx @@ -41,7 +41,7 @@ export type LinkProps = React.DetailedHTMLProps< }; export const Link = forwardRef( - ({ field, editable, showLinkTextWithChildrenPresent, ...otherProps }, ref) => { + ({ field, editable = true, showLinkTextWithChildrenPresent, ...otherProps }, ref) => { const children = otherProps.children as React.ReactNode; const dynamicField: LinkField | LinkFieldValue = field; @@ -143,8 +143,4 @@ export const LinkPropTypes = { Link.propTypes = LinkPropTypes; -Link.defaultProps = { - editable: true, -}; - Link.displayName = 'Link'; diff --git a/packages/sitecore-jss-react/src/components/RichText.tsx b/packages/sitecore-jss-react/src/components/RichText.tsx index 6192998a7e..0039c8c025 100644 --- a/packages/sitecore-jss-react/src/components/RichText.tsx +++ b/packages/sitecore-jss-react/src/components/RichText.tsx @@ -24,7 +24,7 @@ export interface RichTextProps { } export const RichText: React.FC = forwardRef( - ({ field, tag, editable, ...otherProps }, ref) => { + ({ field, tag = 'div', editable = true, ...otherProps }, ref) => { if (!field || (!field.editable && !field.value)) { return null; } @@ -52,9 +52,4 @@ export const RichTextPropTypes = { RichText.propTypes = RichTextPropTypes; -RichText.defaultProps = { - tag: 'div', - editable: true, -}; - RichText.displayName = 'RichText'; diff --git a/packages/sitecore-jss-react/src/components/Text.tsx b/packages/sitecore-jss-react/src/components/Text.tsx index a45d86b0a1..ff06983160 100644 --- a/packages/sitecore-jss-react/src/components/Text.tsx +++ b/packages/sitecore-jss-react/src/components/Text.tsx @@ -29,8 +29,8 @@ export interface TextProps { export const Text: FunctionComponent = ({ field, tag, - editable, - encode, + editable = true, + encode = true, ...otherProps }) => { if (!field || (!field.editable && (field.value === undefined || field.value === ''))) { @@ -107,9 +107,4 @@ Text.propTypes = { encode: PropTypes.bool, }; -Text.defaultProps = { - editable: true, - encode: true, -}; - Text.displayName = 'Text'; diff --git a/packages/sitecore-jss-react/src/index.ts b/packages/sitecore-jss-react/src/index.ts index 057df7c5d5..2a930795c0 100644 --- a/packages/sitecore-jss-react/src/index.ts +++ b/packages/sitecore-jss-react/src/index.ts @@ -48,6 +48,8 @@ export { GraphQLClientError, RetryStrategy, DefaultRetryStrategy, + GraphQLRequestClientFactoryConfig, + GraphQLRequestClient, } from '@sitecore-jss/sitecore-jss/graphql'; export { mediaApi } from '@sitecore-jss/sitecore-jss/media'; export { ComponentFactory } from './components/sharedTypes'; diff --git a/packages/sitecore-jss-vue/src/index.ts b/packages/sitecore-jss-vue/src/index.ts index 7a7e2090c7..7f751a2151 100644 --- a/packages/sitecore-jss-vue/src/index.ts +++ b/packages/sitecore-jss-vue/src/index.ts @@ -43,6 +43,8 @@ export { RetryStrategy, DefaultRetryStrategy, GraphQLClientError, + GraphQLRequestClientFactoryConfig, + GraphQLRequestClient, } from '@sitecore-jss/sitecore-jss/graphql'; export { mediaApi } from '@sitecore-jss/sitecore-jss/media'; export { EditFrame } from './components/EditFrame';