[BYOC] Fix type errors when creating custom BYOC components that use …

…context SDKs (#1675)

* Remove undefined from getSDK return type. This matches the augmented type we have in @sitecore/components/context. If an invalid SDK is passed somehow then we return a rejected promise instead.

Also import @sitecore/components/context in byoc/index so that the augmented types are included by default.

* CHANGELOG update

CHANGELOG.md

@@ -14,7 +14,7 @@ Our versioning strategy is as follows:
 ### 🎉 New Features & Improvements
 
 * `[templates/react]` `[templates/angular]` `[templates/vue]` `[templates/node-headless-ssr-proxy]` `[templates/node-headless-ssr-experience-edge]` ([#1647](https://github.com/Sitecore/jss/pull/1647)) ([#1672](https://github.com/Sitecore/jss/pull/1672)) Switch from using JSS_APP_NAME to SITECORE_SITE_NAME - environment and config variables in React, Vue, Angular templates as well as ssr node proxy apps templates have been renamed. 
-* `[templates/nextjs]` `[sitecore-jss-nextjs]` `[sitecore-jss]` ([#1640](https://github.com/Sitecore/jss/pull/1640)) ([#1662](https://github.com/Sitecore/jss/pull/1662))([#1661](https://github.com/Sitecore/jss/pull/1661)) ([#1672](https://github.com/Sitecore/jss/pull/1672)) Sitecore Edge Platform and Context support:
+* `[templates/nextjs]` `[sitecore-jss-nextjs]` `[sitecore-jss]` ([#1640](https://github.com/Sitecore/jss/pull/1640)) ([#1662](https://github.com/Sitecore/jss/pull/1662))([#1661](https://github.com/Sitecore/jss/pull/1661)) ([#1672](https://github.com/Sitecore/jss/pull/1672)) ([#1675](https://github.com/Sitecore/jss/pull/1675)) Sitecore Edge Platform and Context support:
   * Introducing the _clientFactory_ property. This property can be utilized by GraphQL-based services, the previously used _endpoint_ and _apiKey_ properties are deprecated. The _clientFactory_ serves as the central hub for executing GraphQL requests within the application.
   * New SITECORE_EDGE_CONTEXT_ID environment variable has been added.
   * The JSS_APP_NAME environment variable has been updated and is now referred to as SITECORE_SITE_NAME.

packages/create-sitecore-jss/src/templates/nextjs-xmcloud/src/byoc/index.ts

@@ -1,4 +1,5 @@
 import * as FEAAS from '@sitecore-feaas/clientside/react';
+import '@sitecore/components/context';
 import dynamic from 'next/dynamic';
 import { context } from 'lib/context';
 /**

packages/create-sitecore-jss/src/templates/nextjs-xmcloud/src/components/CdpPageView.tsx

@@ -47,7 +47,7 @@ const CdpPageView = (): JSX.Element => {
       scope
     );
 
-    context.getSDK('Events')?.then((Events) =>
+    context.getSDK('Events').then((Events) =>
       Events.pageView({
         channel: 'WEB',
         currency: 'USD',

packages/sitecore-jss-nextjs/src/context/context.test.ts

@@ -77,13 +77,13 @@ describe('Context', () => {
       expect(context.sdks.Foo).to.equal(undefined);
 
       Promise.all([
-        context.getSDK('Foo')?.then((sdk) => {
+        context.getSDK('Foo').then((sdk) => {
           expect(fooInitSpy.calledOnce).to.be.true;
           expect(sdk).to.deep.equal(sdks.Foo.sdk);
 
           return;
         }),
-        context.getSDK('Bar')?.then((sdk) => {
+        context.getSDK('Bar').then((sdk) => {
           expect(barInitSpy.calledOnce).to.be.true;
           expect(sdk).to.deep.equal(sdks.Bar.sdk);
 
@@ -109,13 +109,13 @@ describe('Context', () => {
       expect(context.sdks.Foo).to.equal(undefined);
 
       Promise.all([
-        context.getSDK('Foo')?.then((sdk) => {
+        context.getSDK('Foo').then((sdk) => {
           expect(fooInitSpy.calledOnce).to.be.true;
           expect(sdk).to.deep.equal(sdks.Foo.sdk);
 
           return;
         }),
-        context.getSDK('Bar')?.then((sdk) => {
+        context.getSDK('Bar').then((sdk) => {
           expect(barInitSpy.calledOnce).to.be.true;
           expect(sdk).to.deep.equal(sdks.Bar.sdk);
 
@@ -152,13 +152,13 @@ describe('Context', () => {
       expect(context.sdks.Foo).to.equal(undefined);
 
       Promise.all([
-        context.getSDK('Foo')?.then((sdk) => {
+        context.getSDK('Foo').then((sdk) => {
           expect(fooInitSpy.calledOnce).to.be.true;
           expect(sdk).to.deep.equal(sdks.Foo.sdk);
 
           return;
         }),
-        context.getSDK('Bar')?.then((sdk) => {
+        context.getSDK('Bar').then((sdk) => {
           expect(barInitSpy.calledOnce).to.be.true;
           expect(sdk).to.deep.equal(sdks.Bar.sdk);
 
@@ -171,5 +171,21 @@ describe('Context', () => {
         done();
       });
     });
+
+    it('should reject unknown SDK', async () => {
+      const context = new Context<typeof sdks>(props);
+      const sdk = 'Baz';
+
+      context.init();
+
+      return context
+        .getSDK(sdk)
+        .then(() => {
+          throw new Error('should not resolve');
+        })
+        .catch((e) => {
+          expect(e).to.equal(`Unknown SDK '${sdk}'`);
+        });
+    });
   });
 });

packages/sitecore-jss-nextjs/src/context/context.ts

@@ -111,10 +111,8 @@ export class Context<SDKModules extends SDKModulesType> {
    * @param {string} name SDK name
    * @returns initialized SDK
    */
-  public getSDK = <T extends keyof SDKModules>(
-    name: T
-  ): Promise<SDKModules[T]['sdk']> | undefined => {
-    return this.sdkPromises[name];
+  public getSDK = <T extends keyof SDKModules>(name: T): Promise<SDKModules[T]['sdk']> => {
+    return this.sdkPromises[name] || Promise.reject(`Unknown SDK '${String(name)}'`);
   };
 
   /**