From 1ce8a2215c7572f178adc00581e31e1485a40f50 Mon Sep 17 00:00:00 2001 From: SteveSandersonMS Date: Fri, 19 Aug 2016 01:40:35 +0100 Subject: [PATCH] In ReactSpa, use isomorphic-fetch for IE/Edge compatibility --- .../components/fetch-data/fetch-data.ts | 2 +- .../ClientApp/components/FetchData.tsx | 1 + templates/ReactSpa/package.json | 1 + templates/ReactSpa/tsd.json | 4 +- .../isomorphic-fetch/isomorphic-fetch.d.ts | 119 ++++++++++++++++++ templates/ReactSpa/typings/tsd.d.ts | 2 +- .../typings/whatwg-fetch/whatwg-fetch.d.ts | 85 ------------- templates/ReactSpa/webpack.config.vendor.js | 2 +- 8 files changed, 126 insertions(+), 90 deletions(-) create mode 100644 templates/ReactSpa/typings/isomorphic-fetch/isomorphic-fetch.d.ts delete mode 100644 templates/ReactSpa/typings/whatwg-fetch/whatwg-fetch.d.ts diff --git a/templates/KnockoutSpa/ClientApp/components/fetch-data/fetch-data.ts b/templates/KnockoutSpa/ClientApp/components/fetch-data/fetch-data.ts index 3dc781c..a6618cd 100644 --- a/templates/KnockoutSpa/ClientApp/components/fetch-data/fetch-data.ts +++ b/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; diff --git a/templates/ReactSpa/ClientApp/components/FetchData.tsx b/templates/ReactSpa/ClientApp/components/FetchData.tsx index a010bac..2ee2f1d 100644 --- a/templates/ReactSpa/ClientApp/components/FetchData.tsx +++ b/templates/ReactSpa/ClientApp/components/FetchData.tsx @@ -1,4 +1,5 @@ import * as React from 'react'; +import 'isomorphic-fetch'; interface FetchDataExampleState { forecasts: WeatherForecast[]; diff --git a/templates/ReactSpa/package.json b/templates/ReactSpa/package.json index a66c99d..9e07d1b 100644 --- a/templates/ReactSpa/package.json +++ b/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" diff --git a/templates/ReactSpa/tsd.json b/templates/ReactSpa/tsd.json index 523893d..b69d22f 100644 --- a/templates/ReactSpa/tsd.json +++ b/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" } } } diff --git a/templates/ReactSpa/typings/isomorphic-fetch/isomorphic-fetch.d.ts b/templates/ReactSpa/typings/isomorphic-fetch/isomorphic-fetch.d.ts new file mode 100644 index 0000000..19754db --- /dev/null +++ b/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 +// 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; +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; + 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; + has(name: string): boolean; + set(name: string, value: string): void; +} + +interface IBody { + bodyUsed: boolean; + arrayBuffer(): Promise; + blob(): Promise; + formData(): Promise; + json(): Promise; + json(): Promise; + text(): Promise; +} + +declare class Body implements IBody { + bodyUsed: boolean; + arrayBuffer(): Promise; + blob(): Promise; + formData(): Promise; + json(): Promise; + json(): Promise; + text(): Promise; +} + +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; +} + +declare var fetch: IFetchStatic; + +declare module "isomorphic-fetch" { + export = fetch; +} diff --git a/templates/ReactSpa/typings/tsd.d.ts b/templates/ReactSpa/typings/tsd.d.ts index f54e1c6..6491ac9 100644 --- a/templates/ReactSpa/typings/tsd.d.ts +++ b/templates/ReactSpa/typings/tsd.d.ts @@ -3,4 +3,4 @@ /// /// /// -/// +/// diff --git a/templates/ReactSpa/typings/whatwg-fetch/whatwg-fetch.d.ts b/templates/ReactSpa/typings/whatwg-fetch/whatwg-fetch.d.ts deleted file mode 100644 index 64dd904..0000000 --- a/templates/ReactSpa/typings/whatwg-fetch/whatwg-fetch.d.ts +++ /dev/null @@ -1,85 +0,0 @@ -// Type definitions for fetch API -// Project: https://github.com/github/fetch -// Definitions by: Ryan Graham -// Definitions: https://github.com/borisyankov/DefinitelyTyped - -declare class Request extends Body { - 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 RequestInit { - method?: string; - headers?: HeaderInit|{ [index: string]: string }; - body?: BodyInit; - mode?: string|RequestMode; - credentials?: string|RequestCredentials; - cache?: string|RequestCache; -} - -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 class Headers { - append(name: string, value: string): void; - delete(name: string):void; - get(name: string): string; - getAll(name: string): Array; - has(name: string): boolean; - set(name: string, value: string): void; -} - -declare class Body { - bodyUsed: boolean; - arrayBuffer(): Promise; - blob(): Promise; - formData(): Promise; - json(): Promise; - json(): Promise; - text(): Promise; -} -declare class Response extends Body { - constructor(body?: BodyInit, init?: ResponseInit); - error(): Response; - redirect(url: string, status: number): Response; - type: string|ResponseType; - url: string; - status: number; - ok: boolean; - statusText: string; - headers: Headers; - clone(): Response; -} - -declare enum ResponseType { "basic", "cors", "default", "error", "opaque" } - -interface ResponseInit { - status: number; - statusText?: string; - headers?: HeaderInit; -} - -declare type HeaderInit = Headers|Array; -declare type BodyInit = Blob|FormData|string; -declare type RequestInfo = Request|string; - -interface Window { - fetch(url: string|Request, init?: RequestInit): Promise; -} - -declare var fetch: typeof window.fetch; diff --git a/templates/ReactSpa/webpack.config.vendor.js b/templates/ReactSpa/webpack.config.vendor.js index 814f23d..ac56c0c 100644 --- a/templates/ReactSpa/webpack.config.vendor.js +++ b/templates/ReactSpa/webpack.config.vendor.js @@ -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'),