From 61f672f36a28f3021d55dde6b9c94b3360f7f434 Mon Sep 17 00:00:00 2001 From: Roy Sommer Date: Fri, 23 Nov 2018 17:05:18 +0200 Subject: [PATCH 1/4] More accurate typescript typings According to the API, all but the `src` prop are optional, but the `Props` interface had no optional properties, making anyone who uses typescript **have** to pass everything (or it would throw a type error and will not compile). I updated the interface to make the denote the non-required props as optional :) --- src/index.tsx | 14 +++++++------- 1 file changed, 7 insertions(+), 7 deletions(-) diff --git a/src/index.tsx b/src/index.tsx index 53ed17b4f..691166c1b 100644 --- a/src/index.tsx +++ b/src/index.tsx @@ -10,14 +10,14 @@ export type OnInjected = ( ) => void interface Props { - evalScripts: 'always' | 'once' | 'never' - fallback: React.ReactType - loading: React.ReactType - onInjected: OnInjected - renumerateIRIElements: boolean + evalScripts?: 'always' | 'once' | 'never' + fallback?: React.ReactType + loading?: React.ReactType + onInjected?: OnInjected + renumerateIRIElements?: boolean src: string - svgClassName: string - svgStyle: React.CSSProperties + svgClassName?: string + svgStyle?: React.CSSProperties } interface State { From 0f71b53d611a5d672274881d786cbca9f8e08550 Mon Sep 17 00:00:00 2001 From: Roy Sommer Date: Fri, 23 Nov 2018 17:50:11 +0200 Subject: [PATCH 2/4] Non-null assertion I don't usually use the strict null check option, so wasn't expecting that ;) --- src/index.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/index.tsx b/src/index.tsx index 691166c1b..62aa5b1ee 100644 --- a/src/index.tsx +++ b/src/index.tsx @@ -110,7 +110,7 @@ export default class ReactSVG extends React.Component< isLoading: false }), () => { - onInjected(error, svg) + onInjected!(error, svg) } ) } From b662088c99b5c22aee8334895b6a30d34cc7afba Mon Sep 17 00:00:00 2001 From: Tane Morgan Date: Sun, 25 Nov 2018 12:24:10 +1300 Subject: [PATCH 3/4] Add example for older TypeScript version --- examples/{typescript => typescript-2.x}/.env | 0 .../{typescript => typescript-2.x}/.gitignore | 0 .../{typescript => typescript-2.x}/README.md | 2 +- examples/typescript-2.x/package.json | 32 +++++++++++++++++++ .../public/index.html | 0 .../public/svg.svg | 0 .../src/index.tsx | 0 .../src/react-app-env.d.ts | 0 .../tsconfig.json | 0 .../tslint.json | 0 examples/typescript-latest/.env | 1 + examples/typescript-latest/.gitignore | 1 + examples/typescript-latest/README.md | 15 +++++++++ .../package.json | 4 +-- examples/typescript-latest/public/index.html | 14 ++++++++ examples/typescript-latest/public/svg.svg | 3 ++ examples/typescript-latest/src/index.tsx | 5 +++ .../typescript-latest/src/react-app-env.d.ts | 1 + examples/typescript-latest/tsconfig.json | 20 ++++++++++++ examples/typescript-latest/tslint.json | 6 ++++ 20 files changed, 101 insertions(+), 3 deletions(-) rename examples/{typescript => typescript-2.x}/.env (100%) rename examples/{typescript => typescript-2.x}/.gitignore (100%) rename examples/{typescript => typescript-2.x}/README.md (92%) create mode 100644 examples/typescript-2.x/package.json rename examples/{typescript => typescript-2.x}/public/index.html (100%) rename examples/{typescript => typescript-2.x}/public/svg.svg (100%) rename examples/{typescript => typescript-2.x}/src/index.tsx (100%) rename examples/{typescript => typescript-2.x}/src/react-app-env.d.ts (100%) rename examples/{typescript => typescript-2.x}/tsconfig.json (100%) rename examples/{typescript => typescript-2.x}/tslint.json (100%) create mode 100644 examples/typescript-latest/.env create mode 100644 examples/typescript-latest/.gitignore create mode 100644 examples/typescript-latest/README.md rename examples/{typescript => typescript-latest}/package.json (87%) create mode 100644 examples/typescript-latest/public/index.html create mode 100644 examples/typescript-latest/public/svg.svg create mode 100644 examples/typescript-latest/src/index.tsx create mode 100644 examples/typescript-latest/src/react-app-env.d.ts create mode 100644 examples/typescript-latest/tsconfig.json create mode 100644 examples/typescript-latest/tslint.json diff --git a/examples/typescript/.env b/examples/typescript-2.x/.env similarity index 100% rename from examples/typescript/.env rename to examples/typescript-2.x/.env diff --git a/examples/typescript/.gitignore b/examples/typescript-2.x/.gitignore similarity index 100% rename from examples/typescript/.gitignore rename to examples/typescript-2.x/.gitignore diff --git a/examples/typescript/README.md b/examples/typescript-2.x/README.md similarity index 92% rename from examples/typescript/README.md rename to examples/typescript-2.x/README.md index b4770655c..a11b13657 100644 --- a/examples/typescript/README.md +++ b/examples/typescript-2.x/README.md @@ -1,4 +1,4 @@ -# ReactSVG Typescript Example +# ReactSVG Typescript 2.x Example This project was bootstrapped with [Create React App](https://github.com/facebookincubator/create-react-app). diff --git a/examples/typescript-2.x/package.json b/examples/typescript-2.x/package.json new file mode 100644 index 000000000..91002d8f7 --- /dev/null +++ b/examples/typescript-2.x/package.json @@ -0,0 +1,32 @@ +{ + "name": "typescript-2.x", + "description": "ReactSVG Typescript 2.x Example", + "keywords": [ + "react-svg" + ], + "main": "src/index.tsx", + "version": "0.1.0", + "private": true, + "dependencies": { + "react": "^16.6.3", + "react-dom": "^16.6.3", + "react-scripts": "^2.1.1", + "react-svg": "latest" + }, + "scripts": { + "start": "react-scripts start" + }, + "devDependencies": { + "@types/jest": "^23.3.9", + "@types/node": "^10.12.10", + "@types/react": "^16.7.7", + "@types/react-dom": "^16.0.10", + "typescript": "^2.9.2" + }, + "browserslist": [ + ">0.2%", + "not dead", + "not ie <= 11", + "not op_mini all" + ] +} diff --git a/examples/typescript/public/index.html b/examples/typescript-2.x/public/index.html similarity index 100% rename from examples/typescript/public/index.html rename to examples/typescript-2.x/public/index.html diff --git a/examples/typescript/public/svg.svg b/examples/typescript-2.x/public/svg.svg similarity index 100% rename from examples/typescript/public/svg.svg rename to examples/typescript-2.x/public/svg.svg diff --git a/examples/typescript/src/index.tsx b/examples/typescript-2.x/src/index.tsx similarity index 100% rename from examples/typescript/src/index.tsx rename to examples/typescript-2.x/src/index.tsx diff --git a/examples/typescript/src/react-app-env.d.ts b/examples/typescript-2.x/src/react-app-env.d.ts similarity index 100% rename from examples/typescript/src/react-app-env.d.ts rename to examples/typescript-2.x/src/react-app-env.d.ts diff --git a/examples/typescript/tsconfig.json b/examples/typescript-2.x/tsconfig.json similarity index 100% rename from examples/typescript/tsconfig.json rename to examples/typescript-2.x/tsconfig.json diff --git a/examples/typescript/tslint.json b/examples/typescript-2.x/tslint.json similarity index 100% rename from examples/typescript/tslint.json rename to examples/typescript-2.x/tslint.json diff --git a/examples/typescript-latest/.env b/examples/typescript-latest/.env new file mode 100644 index 000000000..139f18c34 --- /dev/null +++ b/examples/typescript-latest/.env @@ -0,0 +1 @@ +REACT_APP_DESCRIPTION=$npm_package_description \ No newline at end of file diff --git a/examples/typescript-latest/.gitignore b/examples/typescript-latest/.gitignore new file mode 100644 index 000000000..30bc16279 --- /dev/null +++ b/examples/typescript-latest/.gitignore @@ -0,0 +1 @@ +/node_modules \ No newline at end of file diff --git a/examples/typescript-latest/README.md b/examples/typescript-latest/README.md new file mode 100644 index 000000000..3f0c1c267 --- /dev/null +++ b/examples/typescript-latest/README.md @@ -0,0 +1,15 @@ +# ReactSVG Typescript Latest Example + +This project was bootstrapped with [Create React App](https://github.com/facebookincubator/create-react-app). + +## Available Scripts + +In the project directory, you can run: + +### `npm start` + +Runs the app in the development mode.
+Open [http://localhost:3000](http://localhost:3000) to view it in the browser. + +The page will reload if you make edits.
+You will also see any lint errors in the console. diff --git a/examples/typescript/package.json b/examples/typescript-latest/package.json similarity index 87% rename from examples/typescript/package.json rename to examples/typescript-latest/package.json index cb38ccf49..f541d8fe6 100644 --- a/examples/typescript/package.json +++ b/examples/typescript-latest/package.json @@ -1,6 +1,6 @@ { - "name": "typescript", - "description": "ReactSVG Typescript Example", + "name": "typescript-latest", + "description": "ReactSVG Typescript Latest Example", "keywords": [ "react-svg" ], diff --git a/examples/typescript-latest/public/index.html b/examples/typescript-latest/public/index.html new file mode 100644 index 000000000..c0da3d95a --- /dev/null +++ b/examples/typescript-latest/public/index.html @@ -0,0 +1,14 @@ + + + + + + + %REACT_APP_DESCRIPTION% + + + +
+ + + \ No newline at end of file diff --git a/examples/typescript-latest/public/svg.svg b/examples/typescript-latest/public/svg.svg new file mode 100644 index 000000000..7b625ac13 --- /dev/null +++ b/examples/typescript-latest/public/svg.svg @@ -0,0 +1,3 @@ + + + \ No newline at end of file diff --git a/examples/typescript-latest/src/index.tsx b/examples/typescript-latest/src/index.tsx new file mode 100644 index 000000000..dac3cda77 --- /dev/null +++ b/examples/typescript-latest/src/index.tsx @@ -0,0 +1,5 @@ +import * as React from 'react' +import * as ReactDOM from 'react-dom' +import ReactSVG from 'react-svg' + +ReactDOM.render(, document.getElementById('root')) diff --git a/examples/typescript-latest/src/react-app-env.d.ts b/examples/typescript-latest/src/react-app-env.d.ts new file mode 100644 index 000000000..6431bc5fc --- /dev/null +++ b/examples/typescript-latest/src/react-app-env.d.ts @@ -0,0 +1 @@ +/// diff --git a/examples/typescript-latest/tsconfig.json b/examples/typescript-latest/tsconfig.json new file mode 100644 index 000000000..6d9871723 --- /dev/null +++ b/examples/typescript-latest/tsconfig.json @@ -0,0 +1,20 @@ +{ + "compilerOptions": { + "target": "es5", + "allowJs": true, + "skipLibCheck": true, + "esModuleInterop": true, + "allowSyntheticDefaultImports": true, + "strict": true, + "forceConsistentCasingInFileNames": true, + "module": "esnext", + "moduleResolution": "node", + "resolveJsonModule": true, + "isolatedModules": true, + "noEmit": true, + "jsx": "preserve" + }, + "include": [ + "src" + ] +} diff --git a/examples/typescript-latest/tslint.json b/examples/typescript-latest/tslint.json new file mode 100644 index 000000000..870ccae68 --- /dev/null +++ b/examples/typescript-latest/tslint.json @@ -0,0 +1,6 @@ +{ + "extends": ["tslint:recommended", "tslint-react", "tslint-config-prettier"], + "linterOptions": { + "exclude": ["node_modules/**/*.ts"] + } +} From ce65c1435da326aa41d71b1a750fb414be72d2dd Mon Sep 17 00:00:00 2001 From: Tane Morgan Date: Sun, 25 Nov 2018 12:27:55 +1300 Subject: [PATCH 4/4] Update README with new TS example links --- README.md | 7 ++++--- 1 file changed, 4 insertions(+), 3 deletions(-) diff --git a/README.md b/README.md index ddf07901c..090fb99a6 100644 --- a/README.md +++ b/README.md @@ -24,13 +24,14 @@ render(, document.getElementById('root')) ## Live Examples -- Basic Usage: [Source](https://github.com/tanem/react-svg/tree/master/examples/basic-usage) | [Sandbox](https://codesandbox.io/s/github/tanem/react-svg/tree/master/examples/basic-usage) - API Usage: [Source](https://github.com/tanem/react-svg/tree/master/examples/api-usage) | [Sandbox](https://codesandbox.io/s/github/tanem/react-svg/tree/master/examples/api-usage) +- Basic Usage: [Source](https://github.com/tanem/react-svg/tree/master/examples/basic-usage) | [Sandbox](https://codesandbox.io/s/github/tanem/react-svg/tree/master/examples/basic-usage) +- CSS-in-JS: [Source](https://github.com/tanem/react-svg/tree/master/examples/css-in-js) | [Sandbox](https://codesandbox.io/s/github/tanem/react-svg/tree/master/examples/css-in-js) - External Stylesheet: [Source](https://github.com/tanem/react-svg/tree/master/examples/external-stylesheet) | [Sandbox](https://codesandbox.io/s/github/tanem/react-svg/tree/master/examples/external-stylesheet) - Fallbacks: [Source](https://github.com/tanem/react-svg/tree/master/examples/fallbacks) | [Sandbox](https://codesandbox.io/s/github/tanem/react-svg/tree/master/examples/fallbacks) - Loading: [Source](https://github.com/tanem/react-svg/tree/master/examples/loading) | [Sandbox](https://codesandbox.io/s/github/tanem/react-svg/tree/master/examples/loading) -- Typescript: [Source](https://github.com/tanem/react-svg/tree/master/examples/typescript) | [Sandbox](https://codesandbox.io/s/github/tanem/react-svg/tree/master/examples/typescript) -- CSS-in-JS: [Source](https://github.com/tanem/react-svg/tree/master/examples/css-in-js) | [Sandbox](https://codesandbox.io/s/github/tanem/react-svg/tree/master/examples/css-in-js) +- Typescript 2.x: [Source](https://github.com/tanem/react-svg/tree/master/examples/typescript-2.x) | [Sandbox](https://codesandbox.io/s/github/tanem/react-svg/tree/master/examples/typescript-2.x) +- Typescript Latest: [Source](https://github.com/tanem/react-svg/tree/master/examples/typescript-latest) | [Sandbox](https://codesandbox.io/s/github/tanem/react-svg/tree/master/examples/typescript-latest) - UMD Build (Development): [Source](https://github.com/tanem/react-svg/tree/master/examples/umd-dev) | [Sandbox](https://codesandbox.io/s/github/tanem/react-svg/tree/master/examples/umd-dev) - UMD Build (Production): [Source](https://github.com/tanem/react-svg/tree/master/examples/umd-prod) | [Sandbox](https://codesandbox.io/s/github/tanem/react-svg/tree/master/examples/umd-prod)