In ReactSpa, use isomorphic-fetch for IE/Edge compatibility

Author: SteveSandersonMS

templates/KnockoutSpa/ClientApp/components/fetch-data/fetch-data.ts

@@ -1,5 +1,5 @@
 import * as ko from 'knockout';
-import * as fetch from 'isomorphic-fetch';
+import 'isomorphic-fetch';
 
 interface WeatherForecast {
     dateFormatted: string;

templates/ReactSpa/ClientApp/components/FetchData.tsx

@@ -1,4 +1,5 @@
 import * as React from 'react';
+import 'isomorphic-fetch';
 
 interface FetchDataExampleState {
     forecasts: WeatherForecast[];

templates/ReactSpa/package.json

@@ -22,6 +22,7 @@
   },
   "dependencies": {
     "babel-core": "^6.5.2",
+    "isomorphic-fetch": "^2.2.1",
     "react": "^15.0.1",
     "react-dom": "^15.0.1",
     "react-router": "^2.1.1"

templates/ReactSpa/tsd.json

@@ -17,8 +17,8 @@
     "react-router/history.d.ts": {
       "commit": "dade4414712ce84e3c63393f1aae407e9e7e6af7"
     },
-    "whatwg-fetch/whatwg-fetch.d.ts": {
-      "commit": "dade4414712ce84e3c63393f1aae407e9e7e6af7"
+    "isomorphic-fetch/isomorphic-fetch.d.ts": {
+      "commit": "57ec5fbb76060329c10959d449eb1d4e70b15a65"
     }
   }
 }

templates/ReactSpa/typings/isomorphic-fetch/isomorphic-fetch.d.ts

@@ -0,0 +1,119 @@
+// Type definitions for isomorphic-fetch
+// Project: https://github.com/matthew-andrews/isomorphic-fetch
+// Definitions by: Todd Lucas <https://github.com/toddlucas>
+// Definitions: https://github.com/DefinitelyTyped/DefinitelyTyped
+
+declare enum RequestContext {
+    "audio", "beacon", "cspreport", "download", "embed", "eventsource",
+    "favicon", "fetch", "font", "form", "frame", "hyperlink", "iframe",
+    "image", "imageset", "import", "internal", "location", "manifest",
+    "object", "ping", "plugin", "prefetch", "script", "serviceworker",
+    "sharedworker", "subresource", "style", "track", "video", "worker",
+    "xmlhttprequest", "xslt"
+}
+declare enum RequestMode { "same-origin", "no-cors", "cors" }
+declare enum RequestCredentials { "omit", "same-origin", "include" }
+declare enum RequestCache {
+    "default", "no-store", "reload", "no-cache", "force-cache",
+    "only-if-cached"
+}
+declare enum ResponseType { "basic", "cors", "default", "error", "opaque" }
+
+declare type HeaderInit = Headers | Array<string>;
+declare type BodyInit = ArrayBuffer | ArrayBufferView | Blob | FormData | string;
+declare type RequestInfo = Request | string;
+
+interface RequestInit {
+    method?: string;
+    headers?: HeaderInit | { [index: string]: string };
+    body?: BodyInit;
+    mode?: string | RequestMode;
+    credentials?: string | RequestCredentials;
+    cache?: string | RequestCache;
+}
+
+interface IHeaders {
+    get(name: string): string;
+    getAll(name: string): Array<string>;
+    has(name: string): boolean;
+}
+
+declare class Headers implements IHeaders {
+    append(name: string, value: string): void;
+    delete(name: string):void;
+    get(name: string): string;
+    getAll(name: string): Array<string>;
+    has(name: string): boolean;
+    set(name: string, value: string): void;
+}
+
+interface IBody {
+    bodyUsed: boolean;
+    arrayBuffer(): Promise<ArrayBuffer>;
+    blob(): Promise<Blob>;
+    formData(): Promise<FormData>;
+    json(): Promise<any>;
+    json<T>(): Promise<T>;
+    text(): Promise<string>;
+}
+
+declare class Body implements IBody {
+    bodyUsed: boolean;
+    arrayBuffer(): Promise<ArrayBuffer>;
+    blob(): Promise<Blob>;
+    formData(): Promise<FormData>;
+    json(): Promise<any>;
+    json<T>(): Promise<T>;
+    text(): Promise<string>;
+}
+
+interface IRequest extends IBody {
+    method: string;
+    url: string;
+    headers: Headers;
+    context: string | RequestContext;
+    referrer: string;
+    mode: string | RequestMode;
+    credentials: string | RequestCredentials;
+    cache: string | RequestCache;
+}
+
+declare class Request extends Body implements IRequest {
+    constructor(input: string | Request, init?: RequestInit);
+    method: string;
+    url: string;
+    headers: Headers;
+    context: string | RequestContext;
+    referrer: string;
+    mode: string | RequestMode;
+    credentials: string | RequestCredentials;
+    cache: string | RequestCache;
+}
+
+interface IResponse extends IBody {
+    url: string;
+    status: number;
+    statusText: string;
+    ok: boolean;
+    headers: IHeaders;
+    type: string | ResponseType;
+    size: number;
+    timeout: number;
+    redirect(url: string, status: number): IResponse;
+    error(): IResponse;
+    clone(): IResponse;
+}
+
+interface IFetchStatic {
+    Promise: any;
+    Headers: IHeaders
+    Request: IRequest;
+    Response: IResponse;
+    (url: string | IRequest, init?: RequestInit): Promise<IResponse>;
+}
+
+declare var fetch: IFetchStatic;
+
+declare module "isomorphic-fetch" {
+    export = fetch;
+}

templates/ReactSpa/typings/tsd.d.ts

@@ -3,4 +3,4 @@
 /// <reference path="react-router/history.d.ts" />
 /// <reference path="react-router/react-router.d.ts" />
 /// <reference path="react/react-dom.d.ts" />
-/// <reference path="whatwg-fetch/whatwg-fetch.d.ts" />
+/// <reference path="isomorphic-fetch/isomorphic-fetch.d.ts" />

templates/ReactSpa/typings/whatwg-fetch/whatwg-fetch.d.ts

@@ -15,7 +15,7 @@ module.exports = {
         ]
     },
     entry: {
-        vendor: ['bootstrap', 'bootstrap/dist/css/bootstrap.css', 'react', 'react-dom', 'react-router', 'style-loader', 'jquery'],
+        vendor: ['bootstrap', 'bootstrap/dist/css/bootstrap.css', 'isomorphic-fetch', 'react', 'react-dom', 'react-router', 'style-loader', 'jquery'],
     },
     output: {
         path: path.join(__dirname, 'wwwroot', 'dist'),