Remove use of deprecated dataApi (#744)

* Replace dataApi by RestLayoutService

* update docs

* Update react-native, embedded-jss-app

* Remove 'default'

* Changes after review

* Remove redundant interfaces

* Removed remaining LayoutServiceRequestOptions refs

* fix 'jss-layout.service' import in angular sample

Co-authored-by: Adam Brauer <[email protected]>

Author: illiakovalenko

docs/data/routes/docs/client-frameworks/angular/sample-app/en.md

@@ -199,7 +199,7 @@ There are several mechanisms of using/outputting translated values with `ngx-tra
 
 #### `JssTranslationLoaderService`
 
-This implementation loads the Sitecore dictionary from the Dictionary Service provided by JSS, found at `/sitecore/api/jss/dictionary/`, using `HttpClient`. It is used as a "fallback" during both client and server rendering.
+This implementation loads the Sitecore dictionary from the Dictionary Service provided by JSS, found at `/sitecore/api/jss/dictionary/`, using `RestDictionaryService`. It is used as a "fallback" during both client and server rendering.
 
 #### `JssTranslationServerLoaderService`
 

docs/data/routes/docs/fundamentals/services/layout-service/en.md

@@ -97,38 +97,33 @@ If you don't want analytics tracking for your JSS app, or for particular Layout
 
 ## Invoking the Layout Service from JSS
 
-The Sitecore JSS SDK provides a simple API to make utilizing the Layout Service easier. Enter your configuration into the `fetchOptions` object and pass it into `dataApi.fetchRouteData()`. The `fetcher` option enables you to implement whichever data access method you wish. JSS ships with axios, which can be imported from `src\dataFetcher.js`.
+The Sitecore JSS SDK provides a simple API to make utilizing the Layout Service easier. Create instance of `RestLayoutService` and pass your configuration into the constructor and call `layoutService.fetchLayoutData()`. The optional `dataFetcherResolver` option enables you to implement whichever data access method you wish. JSS ships with Axios by default.
 
-The `dataApi` object is found in the `@sitecore-jss\sitecore-jss` package but is also exposed via the framework-specific SDKs
+The `RestLayoutService` class is found in the `@sitecore-jss\sitecore-jss` package but is also exposed via the framework-specific SDKs
 
 ```javascript
-import { dataApi } from '@sitecore-jss/sitecore-jss-react';
-import { dataFetcher } from './dataFetcher'; 
-
-const fetchOptions = {
-    fetcher: dataFetcher, 
-    layoutServiceConfig: {
-        host: 'http://mysitecore',
-        configurationName: 'jss',
-    },
-    querystringParams: {
-        sc_lang: 'en',
-        tracking: false,
-        sc_apikey: '{00000000-0000-0000-0000-000000000000}',
-        sc_camp: 'FFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFF'
-    },
-    requestConfig: { 
-        // AxiosRequestConfig -- https://github.com/axios/axios#request-config
-        // Note: `withCredentials: true` is added automatically
-        timeout: 3000,
-        headers: {
-            'X-JSS': 'Experience is asynchronous'
-        }
-    },
-}
-
-dataApi.fetchRouteData('/', fetchOptions).then(route => {
-    console.log(JSON.stringify(route, null, 2));
+// ./layout-service.js
+
+import { RestLayoutService } from '@sitecore-jss/sitecore-jss-react';
+import { dataFetcher } from './dataFetcher';
+
+export const layoutService = new RestLayoutService({
+  apiHost: 'http://mysitecore',
+  apiKey: '{00000000-0000-0000-0000-000000000000}',
+  siteName: 'jssappname',
+  tracking: false,
+  dataFetcherResolver: () => dataFetcher,
+});
+```
+
+```javascript
+import { layoutService } from './layout-service';
+
+const language = 'en';
+const sitecoreRoutePath = '/styleguide';
+
+layoutService.fetchLayoutData(sitecoreRoutePath, language).then((route) => {
+  console.log(JSON.stringify(route, null, 2));
 });
 ```
 

docs/data/routes/docs/fundamentals/services/tracking/en.md

@@ -72,7 +72,7 @@ The tracking API ships with TypeScript typings, so with TS-aware editors like VS
 
 The tracking API supports tracking arbitrary page view events. This can be useful for things like tracking route changes that do not involve a Layout Service request (cached, custom routes, etc). When tracking page views, it's important to know:
 
-* Requests to [Layout Service](/docs/fundamentals/services/layout-service) will track a page view by default. This can be disabled by adding `tracking=false` to the Layout Service request query string (configurable via the `dataApi` object in JSS apps). Disabling LS tracking may make sense if all page tracking is to be handled using the tracking API.
+* Requests to [Layout Service](/docs/fundamentals/services/layout-service) will track a page view by default. This can be disabled by adding `tracking=false` to the Layout Service request query string (configurable via the `RestLayoutService` class in JSS apps). Disabling LS tracking may make sense if all page tracking is to be handled using the tracking API.
 * Page view events require a Sitecore Item ID to track against, even though the URL tracked is arbitrary. If tracking non-item-based routes, you may need to create surrogate items to track against.
 
 ```js

docs/data/routes/docs/techniques/extending-layout-service/extending-layout-service-overview/en.md

@@ -180,4 +180,13 @@ After patching in your custom configuration, you can utilize it in your JSS App
 </javaScriptServices>
 ```
 
-You'll need to ensure that you provide this configuration name in your client code as well when invoking Layout Service via the `dataApi` (see examples above).
+Provide configuration name in your client code as well when invoking Layout Service via the `RestLayoutService`.
+
+```javascript
+const layoutService = new RestLayoutService({
+  apiHost: 'http://mysitecore',
+  apiKey: '{00000000-0000-0000-0000-000000000000}',
+  siteName: 'jssappname',
+  configurationName: 'my-jss-config',
+});
+```

docs/data/routes/help/en.md

@@ -135,21 +135,6 @@ Attempt to connect to Node timed out after 60000ms.
 
 * Placeholders defined in JSS will use the global `key` field on their Placeholder Settings. This means that conflicts may arise if non-JSS and JSS apps use the same placeholder key on a multi-site Sitecore installation. This is not a JSS-specific issue, and to avoid it give JSS apps unique placeholder names such as `myapp-main`. Note that JSS apps will _not_ conflict with each other when using the same placeholder keys, if there are multiple JSS sites.
 
-* Site detection that is not based on `hostName` but on `virtualFolder` / `physicalFolder` attributes requires additional configuration and query string based site name specification. Search your app for `dataApi`, and find where the dataApi's `fetchRouteData()` function is being called. Add `sc_site` to the options passed to `fetchRouteData` like so:
-
-```
-const fetchOptions = {
-  // ...
-  querystringParams: {
-    // ... (i.e. 'sc_lang')
-    sc_site: 'name of your site definition in Sitecore'
-  },
-};
-
-// pseudocode
-dataApi.fetchRouteData(route, fetchOptions);
-```
-
 ## Troubleshooting
 
 ### Missing Layout Service Placeholder Data

packages/sitecore-jss-angular/src/layout-service-error.ts

@@ -25,7 +25,6 @@ import { RichTextDirective } from './components/rich-text.directive';
 import { RouterLinkDirective } from './components/router-link.directive';
 import { TextDirective } from './components/text.directive';
 import { JssComponentFactoryService } from './jss-component-factory.service';
-import { LayoutService } from './layout.service';
 
 @NgModule({
   imports: [CommonModule],
@@ -72,7 +71,7 @@ export class JssModule {
   static forRoot(): ModuleWithProviders<JssModule> {
     return {
       ngModule: JssModule,
-      providers: [LayoutService, DatePipe, JssComponentFactoryService],
+      providers: [DatePipe, JssComponentFactoryService],
     };
   }
 

packages/sitecore-jss-angular/src/layout.service.ts

@@ -17,23 +17,23 @@ export {
 } from './components/rendering-field';
 export { RichTextDirective } from './components/rich-text.directive';
 export { TextDirective } from './components/text.directive';
-export { LayoutService } from './layout.service';
-export { LayoutServiceError } from './layout-service-error';
 export { JssModule } from './lib.module';
 export {
-  dataApi,
   mediaApi,
   isEditorActive,
   resetEditorChromes,
   constants,
   isExperienceEditorActive,
   resetExperienceEditorChromes,
+  RestDictionaryService,
+  RestLayoutService,
+  LayoutService,
   LayoutServiceData,
   LayoutServiceContextData,
+  PlaceholderData,
   RouteData,
   Field,
   HtmlElementRendering,
-  LayoutServiceRequestOptions,
   getChildPlaceholder,
   getFieldValue,
   ComponentRendering,

packages/sitecore-jss-angular/src/lib.module.ts

@@ -1,5 +1,4 @@
 export {
-  dataApi,
   mediaApi,
   constants,
   // generic data access
@@ -21,7 +20,6 @@ export {
   LayoutServicePageState,
   LayoutServiceContext,
   LayoutServiceContextData,
-  LayoutServiceRequestOptions,
   GraphQLLayoutService,
   GraphQLLayoutServiceConfig,
   RestLayoutService,

packages/sitecore-jss-angular/src/public_api.ts

@@ -37,7 +37,7 @@ describe('utils', () => {
       process.env.VERCEL_URL = 'jss.uniqueid.vercel.com';
       const result = getPublicUrl();
       expect(result).to.equal('https://jss.uniqueid.vercel.com');
-    })
+    });
   });
   describe('getJssEditingSecret', () => {
     after(() => {

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

@@ -1,16 +1,16 @@
 export {
-  dataApi,
   mediaApi,
   isEditorActive,
   resetEditorChromes,
   isExperienceEditorActive,
   resetExperienceEditorChromes,
+  RestLayoutService,
+  LayoutService,
   LayoutServiceData,
   LayoutServiceContextData,
   RouteData,
   Field,
   HtmlElementRendering,
-  LayoutServiceRequestOptions,
   getChildPlaceholder,
   getFieldValue,
   ComponentRendering,

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

@@ -1,12 +1,13 @@
 export {
-  dataApi,
   mediaApi,
   isEditorActive,
   resetEditorChromes,
   constants,
   isExperienceEditorActive,
   resetExperienceEditorChromes,
   DictionaryPhrases,
+  LayoutService,
+  RestLayoutService,
   LayoutServiceData,
   LayoutServicePageState,
   LayoutServiceContext,
@@ -15,7 +16,6 @@ export {
   Field,
   Item,
   HtmlElementRendering,
-  LayoutServiceRequestOptions,
   getChildPlaceholder,
   getFieldValue,
   ComponentRendering,

packages/sitecore-jss-react-native/src/index.ts

@@ -1,17 +1,19 @@
 export {
-  dataApi,
   mediaApi,
   isEditorActive,
   resetEditorChromes,
   constants,
   isExperienceEditorActive,
   resetExperienceEditorChromes,
+  DictionaryService,
+  RestDictionaryService,
+  LayoutService,
+  RestLayoutService,
   LayoutServiceData,
   LayoutServiceContextData,
   RouteData,
   Field,
   HtmlElementRendering,
-  LayoutServiceRequestOptions,
   getChildPlaceholder,
   getFieldValue,
   ComponentRendering,

packages/sitecore-jss-react/src/index.ts

@@ -40,7 +40,11 @@ export class RestDictionaryService extends DictionaryServiceBase {
    * Provides default @see AxiosDataFetcher data fetcher
    */
   get defaultFetcher(): HttpDataFetcher<RestDictionaryServiceData> {
-    const dataFetcher = new AxiosDataFetcher({ debugger: debug.dictionary });
+    const dataFetcher = new AxiosDataFetcher({
+      debugger: debug.dictionary,
+      // CORS issue: Sitecore provides 'Access-Control-Allow-Origin' as wildcard '*', so we can't include credentials for the dictionary service
+      withCredentials: false,
+    });
     return (url: string) => dataFetcher.fetch<RestDictionaryServiceData>(url);
   }
 

packages/sitecore-jss-vue/src/index.ts

@@ -36,13 +36,6 @@ export {
   RestLayoutService,
   RestLayoutServiceConfig,
   DataFetcherResolver,
-  LayoutServiceConfig,
-  LayoutServiceRequestOptions,
 } from './layout/rest-layout-service';
 
 export { GraphQLLayoutService, GraphQLLayoutServiceConfig } from './layout/graphql-layout-service';
-
-// TODO: these are deprecated and we should stop exporting them
-import { fetchRouteData, fetchPlaceholderData } from './layout/rest-layout-service';
-const dataApi = { fetchRouteData, fetchPlaceholderData };
-export { dataApi };