Remove use of deprecated dataApi

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

@@ -97,37 +97,32 @@ 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 `dataFetcherResolver` option enables you to implement whichever data access method you wish. JSS ships with axios, which can be imported from `src\dataFetcher.js`.
 
-The `dataApi` object is found in the `@sitecore-jss\sitecore-jss` package but is also exposed via the framework-specific SDKs
+The `RestLayoutService` instance 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';
+// ./layout-service.js
+
+import { RestLayoutService } 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 => {
+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,4 @@ 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).
+You'll need to ensure that you provide this configuration name in your client code as well when invoking Layout Service via the `RestLayoutService` (see examples above).

docs/data/routes/help/en.md

@@ -135,19 +135,20 @@ 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:
+* 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 `RestLayoutService`, and find where the RestLayoutService's `fetchLayoutData()` function is being called. Add `sc_site` to the options passed to `fetchLayoutData` like so:
 
-```
-const fetchOptions = {
-  // ...
-  querystringParams: {
-    // ... (i.e. 'sc_lang')
-    sc_site: 'name of your site definition in Sitecore'
-  },
-};
+```javascript
+import { RestLayoutService } from '@sitecore-jss/sitecore-jss-react'; 
+
+const layoutService = new RestLayoutService({
+  apiHost: 'http://mysitecore',
+  apiKey: '{00000000-0000-0000-0000-000000000000}',
+	// ... (i.e. 'sc_lang')
+  siteName: 'name of your site definition in Sitecore',
+});
 
 // pseudocode
-dataApi.fetchRouteData(route, fetchOptions);
+layoutService.fetchLayoutData(route, language)
 ```
 
 ## Troubleshooting

packages/sitecore-jss-angular/src/lib.module.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/public_api.ts

@@ -17,19 +17,20 @@ 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,

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

@@ -1,5 +1,4 @@
 export {
-  dataApi,
   mediaApi,
   constants,
   // generic data access

packages/sitecore-jss-nextjs/src/utils.test.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-react-native/src/index.ts

@@ -1,10 +1,11 @@
 export {
-  dataApi,
   mediaApi,
   isEditorActive,
   resetEditorChromes,
   isExperienceEditorActive,
   resetExperienceEditorChromes,
+  RestLayoutService,
+  LayoutService,
   LayoutServiceData,
   LayoutServiceContextData,
   RouteData,

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

@@ -1,12 +1,13 @@
 export {
-  dataApi,
   mediaApi,
   isEditorActive,
   resetEditorChromes,
   constants,
   isExperienceEditorActive,
   resetExperienceEditorChromes,
   DictionaryPhrases,
+  LayoutService,
+  RestLayoutService,
   LayoutServiceData,
   LayoutServicePageState,
   LayoutServiceContext,

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

@@ -1,11 +1,14 @@
 export {
-  dataApi,
   mediaApi,
   isEditorActive,
   resetEditorChromes,
   constants,
   isExperienceEditorActive,
   resetExperienceEditorChromes,
+  DictionaryService,
+  RestDictionaryService,
+  LayoutService,
+  RestLayoutService,
   LayoutServiceData,
   LayoutServiceContextData,
   RouteData,

packages/sitecore-jss/src/i18n/rest-dictionary-service.ts

@@ -40,7 +40,10 @@ 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,
+      withCredentials: false,
+    });
     return (url: string) => dataFetcher.fetch<RestDictionaryServiceData>(url);
   }
 

packages/sitecore-jss/src/index.ts

@@ -41,8 +41,3 @@ export {
 } 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 };

samples/angular/src/app/JssState.ts

@@ -1,8 +1,8 @@
 import {
   RouteData,
   LayoutServiceContextData,
-  LayoutServiceError,
 } from '@sitecore-jss/sitecore-jss-angular';
+import { LayoutServiceError } from './layout/jss-layout-loader.service';
 
 export class JssState {
   language: string;

samples/angular/src/app/app.module.ts

@@ -4,6 +4,7 @@ import { APP_BASE_HREF } from '@angular/common';
 import { HttpClientModule, HttpClient } from '@angular/common/http';
 import { MetaModule } from '@ngx-meta/core';
 import { RoutingModule } from './routing/routing.module';
+import { JssLayoutLoaderService } from './layout/jss-layout-loader.service';
 import { JssContextService } from './jss-context.service';
 import { AppComponentsModule } from './components/app-components.module';
 import { AppComponent } from './app.component';
@@ -25,7 +26,7 @@ import { JssDataFetcherService } from './jss-data-fetcher.service';
     TranslateModule.forRoot({
       loader: {
         provide: TranslateLoader,
-        useFactory: (http: HttpClient) => new JssTranslationClientLoaderService(new JssTranslationLoaderService(http)),
+        useFactory: () => new JssTranslationClientLoaderService(new JssTranslationLoaderService()),
         deps: [HttpClient, TransferState]
       }
     }),
@@ -34,6 +35,7 @@ import { JssDataFetcherService } from './jss-data-fetcher.service';
   providers: [
     JssContextService,
     JssDataFetcherService,
+    JssLayoutLoaderService,
     // IMPORTANT: you must set the base href with this token, not a <base> tag in the HTML.
     // the Sitecore Experience Editor will not work correctly when a base tag is used.
     { provide: APP_BASE_HREF, useValue: '/' },

samples/angular/src/app/i18n/jss-translation-loader.service.ts

@@ -1,29 +1,18 @@
 import { Injectable } from '@angular/core';
 import { TranslateLoader } from '@ngx-translate/core';
-import { Observable } from 'rxjs';
-import { HttpClient } from '@angular/common/http';
+import { Observable, from as fromPromise } from 'rxjs';
+import { RestDictionaryService } from '@sitecore-jss/sitecore-jss-angular';
 import { environment as env } from '../../environments/environment';
-import { map } from 'rxjs/operators';
 
-class DictionaryResult {
-  phrases: any;
-}
+export const dictionaryService = new RestDictionaryService({
+  apiHost: env.sitecoreApiHost,
+  apiKey: env.sitecoreApiKey,
+  siteName: env.jssAppName,
+});
 
 @Injectable()
 export class JssTranslationLoaderService implements TranslateLoader {
-  constructor(
-    private http: HttpClient
-  ) { }
-
   getTranslation(lang: string): Observable<any> {
-    const options = {
-      params: {
-        sc_apikey: env.sitecoreApiKey
-      }
-    };
-    return this.http.get(`${env.sitecoreApiHost}/sitecore/api/jss/dictionary/${env.jssAppName}/${lang}`, options)
-      .pipe(
-        map((dictionary: DictionaryResult) => dictionary.phrases),
-      );
+    return fromPromise(dictionaryService.fetchDictionaryData(lang));
   }
 }

samples/angular/src/app/jss-context.server-side.service.ts

@@ -1,10 +1,10 @@
 import { Injectable, Inject } from '@angular/core';
 import { TransferState } from '@angular/platform-browser';
-import { LayoutService } from '@sitecore-jss/sitecore-jss-angular';
 import { JssContextService, jssKey } from './jss-context.service';
 import { JssState } from './JssState';
 import { Observable, of as observableOf } from 'rxjs';
 import { JssDataFetcherService } from './jss-data-fetcher.service';
+import { JssLayoutLoaderService } from './layout/jss-layout-loader.service';
 
 /**
  * Stores the JSS app's context (current route and Sitecore context data).
@@ -15,7 +15,7 @@ import { JssDataFetcherService } from './jss-data-fetcher.service';
 export class JssContextServerSideService extends JssContextService {
   constructor(
     protected transferState: TransferState,
-    protected layoutService: LayoutService,
+    protected layoutService: JssLayoutLoaderService,
     protected dataFetcher: JssDataFetcherService,
     // this initial state from sitecore is injected by server.bundle for "integrated" mode
     @Inject('JSS_SERVER_LAYOUT_DATA') private serverToSsrState: JssState,