Skip to content

Commit 286c02f

Browse files
Refactor typescript code (software-mansion#1806)
Co-authored-by: Eric Butler <[email protected]>
1 parent a7a31ca commit 286c02f

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

44 files changed

+3539
-3749
lines changed

.github/workflows/js-build-test.yml

+35
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,35 @@
1+
name: Test JS build
2+
on:
3+
pull_request:
4+
branches:
5+
- main
6+
push:
7+
branches:
8+
- main
9+
jobs:
10+
build:
11+
runs-on: ubuntu-latest
12+
concurrency:
13+
group: js-${{ github.ref }}
14+
cancel-in-progress: true
15+
steps:
16+
- name: checkout
17+
uses: actions/checkout@v2
18+
- name: Use Node.js 14
19+
uses: actions/setup-node@v2
20+
with:
21+
node-version: 14
22+
cache: 'yarn'
23+
cache-dependency-path: 'yarn.lock'
24+
- name: Install node dependencies
25+
run: yarn
26+
- name: Build
27+
run: yarn bob
28+
- name: Lint
29+
run: yarn lint
30+
- name: Tests
31+
run: yarn jest
32+
- name: Build Example App
33+
working-directory: Example/
34+
run: yarn && yarn tsc
35+

Example/ios/Podfile.lock

+4-4
Original file line numberDiff line numberDiff line change
@@ -347,7 +347,7 @@ PODS:
347347
- React-jsi (= 0.68.0-rc.1)
348348
- React-logger (= 0.68.0-rc.1)
349349
- React-perflogger (= 0.68.0-rc.1)
350-
- RNSVG (12.3.0):
350+
- RNSVG (12.4.0):
351351
- React-Core
352352
- SocketRocket (0.6.0)
353353
- Yoga (1.14.0)
@@ -501,7 +501,7 @@ SPEC CHECKSUMS:
501501
CocoaAsyncSocket: 065fd1e645c7abab64f7a6a2007a48038fdc6a99
502502
DoubleConversion: 831926d9b8bf8166fd87886c4abab286c2422662
503503
FBLazyVector: bcdeff523be9f87a135b7c6fde8736db94904716
504-
FBReactNativeSpec: c01fba40ea819e68030d0d9b9094a173b2a3d127
504+
FBReactNativeSpec: 226f8b0f1a2e736a49301883ee34bca88cdc24f6
505505
Flipper: 26fc4b7382499f1281eb8cb921e5c3ad6de91fe0
506506
Flipper-Boost-iOSX: fd1e2b8cbef7e662a122412d7ac5f5bea715403c
507507
Flipper-DoubleConversion: 57ffbe81ef95306cc9e69c4aa3aeeeeb58a6a28c
@@ -540,11 +540,11 @@ SPEC CHECKSUMS:
540540
React-RCTVibration: 5cab6419b68d5750482b0fc34dbb27af550469cc
541541
React-runtimeexecutor: 10cda3a396b14a764a5f86088e7e3810b9c66cec
542542
ReactCommon: 73a01eb83f22c84a6b09dfb60f3463888ebd4975
543-
RNSVG: 302bfc9905bd8122f08966dc2ce2d07b7b52b9f8
543+
RNSVG: 3dd44d99d1c18e1342aee4bfa53ab3f6a8c4865f
544544
SocketRocket: fccef3f9c5cedea1353a9ef6ada904fde10d6608
545545
Yoga: d29dba374c1a582b40cfb736647b5e1b5ed35dba
546546
YogaKit: f782866e155069a2cca2517aafea43200b01fd5a
547547

548548
PODFILE CHECKSUM: e30a289393eb06dc243ea6a44784bc9e84b1129f
549549

550-
COCOAPODS: 1.11.2
550+
COCOAPODS: 1.11.3

Example/package.json

+3-1
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,8 @@
99
"start": "react-native start",
1010
"start-webpack": "webpack serve",
1111
"test": "jest",
12-
"lint": "eslint ."
12+
"lint": "eslint .",
13+
"tsc": "tsc --noEmit"
1314
},
1415
"dependencies": {
1516
"react": "17.0.2",
@@ -31,6 +32,7 @@
3132
"metro-react-native-babel-preset": "^0.67.0",
3233
"react-native-gradle-plugin": "^0.0.4",
3334
"react-test-renderer": "17.0.2",
35+
"typescript": "^4.6.4",
3436
"webpack": "^5.69.1",
3537
"webpack-cli": "^4.9.2",
3638
"webpack-dev-server": "^4.7.4"

Example/src/App.tsx

+3-3
Original file line numberDiff line numberDiff line change
@@ -94,7 +94,7 @@ const styles = StyleSheet.create({
9494
},
9595
});
9696

97-
const names = [
97+
const names: (keyof typeof examples)[] = [
9898
'Svg',
9999
'Stroking',
100100
'Path',
@@ -126,7 +126,7 @@ export default class SvgExample extends Component {
126126
scroll?: boolean;
127127
} = initialState;
128128

129-
show = name => {
129+
show = (name: keyof typeof examples) => {
130130
if (this.state.modal) {
131131
return;
132132
}
@@ -145,7 +145,7 @@ export default class SvgExample extends Component {
145145
))}
146146
</View>
147147
),
148-
scroll: example.scroll !== false,
148+
scroll: (example as {scroll?: boolean}).scroll !== false,
149149
});
150150
}
151151
};

Example/src/examples/Image.tsx

+2-2
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import React, {Component} from 'react';
2-
import {Platform} from 'react-native';
2+
import {Alert, Platform} from 'react-native';
33
import {Svg, Circle, Text, Rect, Defs, ClipPath, Image} from 'react-native-svg';
44

55
class ImageExample extends Component {
@@ -49,7 +49,7 @@ class ClipImage extends Component {
4949
</ClipPath>
5050
</Defs>
5151
<Image
52-
onPress={() => alert('press on Image')}
52+
onPress={() => Alert.alert('press on Image')}
5353
x="5%"
5454
y="5%"
5555
width="90%"

Example/src/examples/PanResponder.tsx

+4-4
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,11 @@
11
import React, {PureComponent} from 'react';
22
import {
3-
PanResponder,
4-
View,
53
Animated,
4+
PanResponder,
65
TouchableWithoutFeedback,
6+
View,
77
} from 'react-native';
8-
import {Svg, G, Text, Path, Polyline, Line} from 'react-native-svg';
8+
import {G, Line, Path, Polyline, Svg, Text} from 'react-native-svg';
99

1010
const AnimatedSvg = Animated.createAnimatedComponent(Svg);
1111

@@ -14,7 +14,7 @@ const zeroDelta = {x: 0, y: 0};
1414
class PanExample extends PureComponent {
1515
static title = 'Bind PanResponder on the SVG Shape';
1616
panXY: any;
17-
constructor(props, context) {
17+
constructor(props: {}, context: {}) {
1818
super(props, context);
1919
const xy = new Animated.ValueXY();
2020
const {x: dx, y: dy} = xy;

Example/src/examples/Svg.tsx

+2-2
Original file line numberDiff line numberDiff line change
@@ -132,13 +132,13 @@ class SvgNativeMethods extends Component {
132132
base64: null,
133133
};
134134
alert = () => {
135-
this.root.toDataURL(base64 => {
135+
this.root?.toDataURL((base64: string) => {
136136
this.setState({
137137
base64,
138138
});
139139
});
140140
};
141-
root: any;
141+
root?: Svg | null;
142142
render() {
143143
return (
144144
<View>

Example/src/examples/TouchEvents.tsx

+5-4
Original file line numberDiff line numberDiff line change
@@ -10,6 +10,7 @@ import {
1010
Defs,
1111
ClipPath,
1212
} from 'react-native-svg';
13+
import {Alert} from 'react-native';
1314

1415
class PressExample extends Component {
1516
static title =
@@ -22,15 +23,15 @@ class PressExample extends Component {
2223
cy="50%"
2324
r="38%"
2425
fill="red"
25-
onPress={() => alert('Press on Circle')}
26+
onPress={() => Alert.alert('Press on Circle')}
2627
/>
2728
<Rect
2829
x="20%"
2930
y="20%"
3031
width="60%"
3132
height="60%"
3233
fill="blue"
33-
onLongPress={() => alert('Long press on Rect')}
34+
onLongPress={() => Alert.alert('Long press on Rect')}
3435
/>
3536
<Path d="M50,5L20,99L95,39L5,39L80,99z" fill="pink" />
3637
</Svg>
@@ -75,14 +76,14 @@ class GroupExample extends Component {
7576
render() {
7677
return (
7778
<Svg height="120" width="120" viewBox="0 0 240 240">
78-
<G onPress={() => alert('Pressed on G')} scale="1.4">
79+
<G onPress={() => Alert.alert('Pressed on G')} scale="1.4">
7980
<Circle cx="80" cy="80" r="30" fill="green" x="20" scale="1.2" />
8081
<Text
8182
fontWeight="bold"
8283
fontSize="40"
8384
x="100"
8485
y="40"
85-
onPress={() => alert('Pressed on Text')}>
86+
onPress={() => Alert.alert('Pressed on Text')}>
8687
H
8788
</Text>
8889
<Rect x="20" y="20" width="40" height="40" fill="yellow" />

Example/tsconfig.json

+4
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
{
2+
"extends": "../tsconfig.json",
3+
"include": ["src/**/*"]
4+
}

Example/yarn.lock

+46-43
Original file line numberDiff line numberDiff line change
@@ -2925,29 +2925,29 @@ css-in-js-utils@^2.0.0:
29252925
hyphenate-style-name "^1.0.2"
29262926
isobject "^3.0.1"
29272927

2928-
css-select@^4.2.1:
2929-
version "4.2.1"
2930-
resolved "https://registry.yarnpkg.com/css-select/-/css-select-4.2.1.tgz#9e665d6ae4c7f9d65dbe69d0316e3221fb274cdd"
2931-
integrity sha512-/aUslKhzkTNCQUB2qTX84lVmfia9NyjP3WpDGtj/WxhwBzWBYUV3DgUpurHTme8UTPcPlAD1DJ+b0nN/t50zDQ==
2928+
css-select@^5.1.0:
2929+
version "5.1.0"
2930+
resolved "https://registry.yarnpkg.com/css-select/-/css-select-5.1.0.tgz#b8ebd6554c3637ccc76688804ad3f6a6fdaea8a6"
2931+
integrity sha512-nwoRF1rvRRnnCqqY7updORDsuqKzqYJ28+oSMaJMMgOauh3fvwHqMS7EZpIPqK8GL+g9mKxF1vP/ZjSeNjEVHg==
29322932
dependencies:
29332933
boolbase "^1.0.0"
2934-
css-what "^5.1.0"
2935-
domhandler "^4.3.0"
2936-
domutils "^2.8.0"
2934+
css-what "^6.1.0"
2935+
domhandler "^5.0.2"
2936+
domutils "^3.0.1"
29372937
nth-check "^2.0.1"
29382938

2939-
css-tree@^1.0.0-alpha.39:
2939+
css-tree@^1.1.3:
29402940
version "1.1.3"
29412941
resolved "https://registry.yarnpkg.com/css-tree/-/css-tree-1.1.3.tgz#eb4870fb6fd7707327ec95c2ff2ab09b5e8db91d"
29422942
integrity sha512-tRpdppF7TRazZrjJ6v3stzv93qxRcSsFmW6cX0Zm2NVKpxE1WV1HblnghVv9TreireHkqI/VDEsfolRF1p6y7Q==
29432943
dependencies:
29442944
mdn-data "2.0.14"
29452945
source-map "^0.6.1"
29462946

2947-
css-what@^5.1.0:
2948-
version "5.1.0"
2949-
resolved "https://registry.yarnpkg.com/css-what/-/css-what-5.1.0.tgz#3f7b707aadf633baf62c2ceb8579b545bb40f7fe"
2950-
integrity sha512-arSMRWIIFY0hV8pIxZMEfmMI47Wj3R/aWpZDDxWYCPEiOMv6tfOrnpDtgxBYPEQD4V0Y/958+1TdC3iWTFcUPw==
2947+
css-what@^6.1.0:
2948+
version "6.1.0"
2949+
resolved "https://registry.yarnpkg.com/css-what/-/css-what-6.1.0.tgz#fb5effcf76f1ddea2c81bdfaa4de44e79bac70f4"
2950+
integrity sha512-HTUrgRJ7r4dsZKU6GjmpfRK1O76h97Z8MfS1G0FozR+oF2kG6Vfe8JE6zwrkbxigziPHinCJ+gCPjA9EaBDtRw==
29512951

29522952
cssom@^0.4.4:
29532953
version "0.4.4"
@@ -3190,19 +3190,19 @@ doctrine@^3.0.0:
31903190
dependencies:
31913191
esutils "^2.0.2"
31923192

3193-
dom-serializer@^1.0.1:
3194-
version "1.3.2"
3195-
resolved "https://registry.yarnpkg.com/dom-serializer/-/dom-serializer-1.3.2.tgz#6206437d32ceefaec7161803230c7a20bc1b4d91"
3196-
integrity sha512-5c54Bk5Dw4qAxNOI1pFEizPSjVsx5+bpJKmL2kPn8JhBUq2q09tTCa3mjijun2NfK78NMouDYNMBkOrPZiS+ig==
3193+
dom-serializer@^2.0.0:
3194+
version "2.0.0"
3195+
resolved "https://registry.yarnpkg.com/dom-serializer/-/dom-serializer-2.0.0.tgz#e41b802e1eedf9f6cae183ce5e622d789d7d8e53"
3196+
integrity sha512-wIkAryiqt/nV5EQKqQpo3SToSOV9J0DnbJqwK7Wv/Trc92zIAYZ4FlMu+JPFW1DfGFt81ZTCGgDEabffXeLyJg==
31973197
dependencies:
3198-
domelementtype "^2.0.1"
3199-
domhandler "^4.2.0"
3200-
entities "^2.0.0"
3198+
domelementtype "^2.3.0"
3199+
domhandler "^5.0.2"
3200+
entities "^4.2.0"
32013201

3202-
domelementtype@^2.0.1, domelementtype@^2.2.0:
3203-
version "2.2.0"
3204-
resolved "https://registry.yarnpkg.com/domelementtype/-/domelementtype-2.2.0.tgz#9a0b6c2782ed6a1c7323d42267183df9bd8b1d57"
3205-
integrity sha512-DtBMo82pv1dFtUmHyr48beiuq792Sxohr+8Hm9zoxklYPfa6n0Z3Byjj2IV7bmr2IyqClnqEQhfgHJJ5QF0R5A==
3202+
domelementtype@^2.3.0:
3203+
version "2.3.0"
3204+
resolved "https://registry.yarnpkg.com/domelementtype/-/domelementtype-2.3.0.tgz#5c45e8e869952626331d7aab326d01daf65d589d"
3205+
integrity sha512-OLETBj6w0OsagBwdXnPdN0cnMfF9opN69co+7ZrbfPGrdpPVNBUj02spi6B1N7wChLQiPn4CSH/zJvXw56gmHw==
32063206

32073207
domexception@^2.0.1:
32083208
version "2.0.1"
@@ -3211,21 +3211,21 @@ domexception@^2.0.1:
32113211
dependencies:
32123212
webidl-conversions "^5.0.0"
32133213

3214-
domhandler@^4.2.0, domhandler@^4.3.0:
3215-
version "4.3.0"
3216-
resolved "https://registry.yarnpkg.com/domhandler/-/domhandler-4.3.0.tgz#16c658c626cf966967e306f966b431f77d4a5626"
3217-
integrity sha512-fC0aXNQXqKSFTr2wDNZDhsEYjCiYsDWl3D01kwt25hm1YIPyDGHvvi3rw+PLqHAl/m71MaiF7d5zvBr0p5UB2g==
3214+
domhandler@^5.0.1, domhandler@^5.0.2:
3215+
version "5.0.3"
3216+
resolved "https://registry.yarnpkg.com/domhandler/-/domhandler-5.0.3.tgz#cc385f7f751f1d1fc650c21374804254538c7d31"
3217+
integrity sha512-cgwlv/1iFQiFnU96XXgROh8xTeetsnJiDsTc7TYCLFd9+/WNkIqPTxiM/8pSd8VIrhXGTf1Ny1q1hquVqDJB5w==
32183218
dependencies:
3219-
domelementtype "^2.2.0"
3219+
domelementtype "^2.3.0"
32203220

3221-
domutils@^2.8.0:
3222-
version "2.8.0"
3223-
resolved "https://registry.yarnpkg.com/domutils/-/domutils-2.8.0.tgz#4437def5db6e2d1f5d6ee859bd95ca7d02048135"
3224-
integrity sha512-w96Cjofp72M5IIhpjgobBimYEfoPjx1Vx0BSX9P30WBdZW2WIKU0T1Bd0kz2eNZ9ikjKgHbEyKx8BB6H1L3h3A==
3221+
domutils@^3.0.1:
3222+
version "3.0.1"
3223+
resolved "https://registry.yarnpkg.com/domutils/-/domutils-3.0.1.tgz#696b3875238338cb186b6c0612bd4901c89a4f1c"
3224+
integrity sha512-z08c1l761iKhDFtfXO04C7kTdPBLi41zwOZl00WS8b5eiaebNpY00HKbztwBq+e3vyqWNwWF3mP9YLUeqIrF+Q==
32253225
dependencies:
3226-
dom-serializer "^1.0.1"
3227-
domelementtype "^2.2.0"
3228-
domhandler "^4.2.0"
3226+
dom-serializer "^2.0.0"
3227+
domelementtype "^2.3.0"
3228+
domhandler "^5.0.1"
32293229

32303230
32313231
version "1.1.1"
@@ -3279,10 +3279,10 @@ enquirer@^2.3.5:
32793279
dependencies:
32803280
ansi-colors "^4.1.1"
32813281

3282-
entities@^2.0.0:
3283-
version "2.2.0"
3284-
resolved "https://registry.yarnpkg.com/entities/-/entities-2.2.0.tgz#098dc90ebb83d8dffa089d55256b351d34c4da55"
3285-
integrity sha512-p92if5Nz619I0w+akJrLZH0MX0Pb5DX39XOwQTtXSdQQOaYH03S1uIQp4mhOZtAXrxq4ViO67YTiLBo2638o9A==
3282+
entities@^4.2.0:
3283+
version "4.3.1"
3284+
resolved "https://registry.yarnpkg.com/entities/-/entities-4.3.1.tgz#c34062a94c865c322f9d67b4384e4169bcede6a4"
3285+
integrity sha512-o4q/dYJlmyjP2zfnaWDUC6A3BQFmVTX+tZPezK7k0GLSU9QYCauscf5Y+qcEPzKL+EixVouYDgLQK5H9GrLpkg==
32863286

32873287
envinfo@^7.7.2, envinfo@^7.7.3:
32883288
version "7.8.1"
@@ -7075,10 +7075,8 @@ react-native-macos@^0.66.0-0:
70757075
ws "^6.1.4"
70767076

70777077
"react-native-svg@link:..":
7078-
version "12.3.0"
7079-
dependencies:
7080-
css-select "^4.2.1"
7081-
css-tree "^1.0.0-alpha.39"
7078+
version "0.0.0"
7079+
uid ""
70827080

70837081
react-native-web@^0.17.7:
70847082
version "0.17.7"
@@ -8311,6 +8309,11 @@ typedarray-to-buffer@^3.1.5:
83118309
dependencies:
83128310
is-typedarray "^1.0.0"
83138311

8312+
typescript@^4.6.4:
8313+
version "4.6.4"
8314+
resolved "https://registry.yarnpkg.com/typescript/-/typescript-4.6.4.tgz#caa78bbc3a59e6a5c510d35703f6a09877ce45e9"
8315+
integrity sha512-9ia/jWHIEbo49HfjrLGfKbZSuWo9iTMwXO+Ca3pRsSpbsMbc7/IU8NKdCZVRRBafVPGnoJeFL76ZOAA84I9fEg==
8316+
83148317
ua-parser-js@^0.7.30:
83158318
version "0.7.31"
83168319
resolved "https://registry.yarnpkg.com/ua-parser-js/-/ua-parser-js-0.7.31.tgz#649a656b191dffab4f21d5e053e27ca17cbff5c6"

0 commit comments

Comments
 (0)