Skip to content

Commit 990797f

Browse files
eps1loneps1lon
committed
Apply string-refs codemod
```bash # in react-codemod fork $ ./bin/react-codemod.js --parser flow string-refs $REACT_FORK All done. Results: 1 errors 1876 unmodified 0 skipped 32 ok # in react fork $ yarn prettier-all $ yarn lint --fix
1 parent 460d9d5 commit 990797f

32 files changed

+688
-108
lines changed

‎fixtures/legacy-jsx-runtimes/react-14/react-14.test.js

Lines changed: 44 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -93,7 +93,15 @@ it('does not reuse the object that is spread into props', () => {
9393
});
9494

9595
it('extracts key and ref from the rest of the props', () => {
96-
const element = <Component key="12" ref="34" foo="56" />;
96+
const element = (
97+
<Component
98+
key="12"
99+
ref={current => {
100+
this.refs['34'] = current;
101+
}}
102+
foo="56"
103+
/>
104+
);
97105
expect(element.type).toBe(Component);
98106
expect(element.key).toBe('12');
99107
expect(element.ref).toBe('34');
@@ -535,7 +543,14 @@ xit('does not call lazy initializers eagerly', () => {
535543
it('supports classic refs', () => {
536544
class Foo extends React.Component {
537545
render() {
538-
return <div className="foo" ref="inner" />;
546+
return (
547+
<div
548+
className="foo"
549+
ref={current => {
550+
this.refs['inner'] = current;
551+
}}
552+
/>
553+
);
539554
}
540555
}
541556
const container = document.createElement('div');
@@ -559,9 +574,20 @@ it('should support refs on owned components', () => {
559574

560575
class Component extends React.Component {
561576
render() {
562-
const inner = <Wrapper object={innerObj} ref="inner" />;
577+
const inner = (
578+
<Wrapper
579+
object={innerObj}
580+
ref={current => {
581+
this.refs['inner'] = current;
582+
}}
583+
/>
584+
);
563585
const outer = (
564-
<Wrapper object={outerObj} ref="outer">
586+
<Wrapper
587+
object={outerObj}
588+
ref={current => {
589+
this.refs['outer'] = current;
590+
}}>
565591
{inner}
566592
</Wrapper>
567593
);
@@ -743,7 +769,11 @@ it('should warn when `ref` is being accessed', () => {
743769
render() {
744770
return (
745771
<div>
746-
<Child ref="childElement" />
772+
<Child
773+
ref={current => {
774+
this.refs['childElement'] = current;
775+
}}
776+
/>
747777
</div>
748778
);
749779
}
@@ -770,7 +800,15 @@ it('should NOT warn when owner and self are different for string refs', () => {
770800
class ClassParent extends React.Component {
771801
render() {
772802
return (
773-
<ClassWithRenderProp>{() => <div ref="myRef" />}</ClassWithRenderProp>
803+
<ClassWithRenderProp>
804+
{() => (
805+
<div
806+
ref={current => {
807+
this.refs['myRef'] = current;
808+
}}
809+
/>
810+
)}
811+
</ClassWithRenderProp>
774812
);
775813
}
776814
}

‎fixtures/legacy-jsx-runtimes/react-15/react-15.test.js

Lines changed: 44 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -93,7 +93,15 @@ it('does not reuse the object that is spread into props', () => {
9393
});
9494

9595
it('extracts key and ref from the rest of the props', () => {
96-
const element = <Component key="12" ref="34" foo="56" />;
96+
const element = (
97+
<Component
98+
key="12"
99+
ref={current => {
100+
this.refs['34'] = current;
101+
}}
102+
foo="56"
103+
/>
104+
);
97105
expect(element.type).toBe(Component);
98106
expect(element.key).toBe('12');
99107
expect(element.ref).toBe('34');
@@ -530,7 +538,14 @@ xit('does not call lazy initializers eagerly', () => {
530538
it('supports classic refs', () => {
531539
class Foo extends React.Component {
532540
render() {
533-
return <div className="foo" ref="inner" />;
541+
return (
542+
<div
543+
className="foo"
544+
ref={current => {
545+
this.refs['inner'] = current;
546+
}}
547+
/>
548+
);
534549
}
535550
}
536551
const container = document.createElement('div');
@@ -554,9 +569,20 @@ it('should support refs on owned components', () => {
554569

555570
class Component extends React.Component {
556571
render() {
557-
const inner = <Wrapper object={innerObj} ref="inner" />;
572+
const inner = (
573+
<Wrapper
574+
object={innerObj}
575+
ref={current => {
576+
this.refs['inner'] = current;
577+
}}
578+
/>
579+
);
558580
const outer = (
559-
<Wrapper object={outerObj} ref="outer">
581+
<Wrapper
582+
object={outerObj}
583+
ref={current => {
584+
this.refs['outer'] = current;
585+
}}>
560586
{inner}
561587
</Wrapper>
562588
);
@@ -738,7 +764,11 @@ it('should warn when `ref` is being accessed', () => {
738764
render() {
739765
return (
740766
<div>
741-
<Child ref="childElement" />
767+
<Child
768+
ref={current => {
769+
this.refs['childElement'] = current;
770+
}}
771+
/>
742772
</div>
743773
);
744774
}
@@ -765,7 +795,15 @@ it('should NOT warn when owner and self are different for string refs', () => {
765795
class ClassParent extends React.Component {
766796
render() {
767797
return (
768-
<ClassWithRenderProp>{() => <div ref="myRef" />}</ClassWithRenderProp>
798+
<ClassWithRenderProp>
799+
{() => (
800+
<div
801+
ref={current => {
802+
this.refs['myRef'] = current;
803+
}}
804+
/>
805+
)}
806+
</ClassWithRenderProp>
769807
);
770808
}
771809
}

‎fixtures/legacy-jsx-runtimes/react-16/react-16.test.js

Lines changed: 44 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -93,7 +93,15 @@ it('does not reuse the object that is spread into props', () => {
9393
});
9494

9595
it('extracts key and ref from the rest of the props', () => {
96-
const element = <Component key="12" ref="34" foo="56" />;
96+
const element = (
97+
<Component
98+
key="12"
99+
ref={current => {
100+
this.refs['34'] = current;
101+
}}
102+
foo="56"
103+
/>
104+
);
97105
expect(element.type).toBe(Component);
98106
expect(element.key).toBe('12');
99107
expect(element.ref).toBe('34');
@@ -525,7 +533,14 @@ it('does not call lazy initializers eagerly', () => {
525533
it('supports classic refs', () => {
526534
class Foo extends React.Component {
527535
render() {
528-
return <div className="foo" ref="inner" />;
536+
return (
537+
<div
538+
className="foo"
539+
ref={current => {
540+
this.refs['inner'] = current;
541+
}}
542+
/>
543+
);
529544
}
530545
}
531546
const container = document.createElement('div');
@@ -549,9 +564,20 @@ it('should support refs on owned components', () => {
549564

550565
class Component extends React.Component {
551566
render() {
552-
const inner = <Wrapper object={innerObj} ref="inner" />;
567+
const inner = (
568+
<Wrapper
569+
object={innerObj}
570+
ref={current => {
571+
this.refs['inner'] = current;
572+
}}
573+
/>
574+
);
553575
const outer = (
554-
<Wrapper object={outerObj} ref="outer">
576+
<Wrapper
577+
object={outerObj}
578+
ref={current => {
579+
this.refs['outer'] = current;
580+
}}>
555581
{inner}
556582
</Wrapper>
557583
);
@@ -729,7 +755,11 @@ it('should warn when `ref` is being accessed', () => {
729755
render() {
730756
return (
731757
<div>
732-
<Child ref="childElement" />
758+
<Child
759+
ref={current => {
760+
this.refs['childElement'] = current;
761+
}}
762+
/>
733763
</div>
734764
);
735765
}
@@ -752,7 +782,15 @@ it('should warn when owner and self are different for string refs', () => {
752782
class ClassParent extends React.Component {
753783
render() {
754784
return (
755-
<ClassWithRenderProp>{() => <div ref="myRef" />}</ClassWithRenderProp>
785+
<ClassWithRenderProp>
786+
{() => (
787+
<div
788+
ref={current => {
789+
this.refs['myRef'] = current;
790+
}}
791+
/>
792+
)}
793+
</ClassWithRenderProp>
756794
);
757795
}
758796
}

‎fixtures/legacy-jsx-runtimes/react-17/react-17.test.js

Lines changed: 44 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -93,7 +93,15 @@ it('does not reuse the object that is spread into props', () => {
9393
});
9494

9595
it('extracts key and ref from the rest of the props', () => {
96-
const element = <Component key="12" ref="34" foo="56" />;
96+
const element = (
97+
<Component
98+
key="12"
99+
ref={current => {
100+
this.refs['34'] = current;
101+
}}
102+
foo="56"
103+
/>
104+
);
97105
expect(element.type).toBe(Component);
98106
expect(element.key).toBe('12');
99107
expect(element.ref).toBe('34');
@@ -525,7 +533,14 @@ it('does not call lazy initializers eagerly', () => {
525533
it('supports classic refs', () => {
526534
class Foo extends React.Component {
527535
render() {
528-
return <div className="foo" ref="inner" />;
536+
return (
537+
<div
538+
className="foo"
539+
ref={current => {
540+
this.refs['inner'] = current;
541+
}}
542+
/>
543+
);
529544
}
530545
}
531546
const container = document.createElement('div');
@@ -549,9 +564,20 @@ it('should support refs on owned components', () => {
549564

550565
class Component extends React.Component {
551566
render() {
552-
const inner = <Wrapper object={innerObj} ref="inner" />;
567+
const inner = (
568+
<Wrapper
569+
object={innerObj}
570+
ref={current => {
571+
this.refs['inner'] = current;
572+
}}
573+
/>
574+
);
553575
const outer = (
554-
<Wrapper object={outerObj} ref="outer">
576+
<Wrapper
577+
object={outerObj}
578+
ref={current => {
579+
this.refs['outer'] = current;
580+
}}>
555581
{inner}
556582
</Wrapper>
557583
);
@@ -729,7 +755,11 @@ it('should warn when `ref` is being accessed', () => {
729755
render() {
730756
return (
731757
<div>
732-
<Child ref="childElement" />
758+
<Child
759+
ref={current => {
760+
this.refs['childElement'] = current;
761+
}}
762+
/>
733763
</div>
734764
);
735765
}
@@ -752,7 +782,15 @@ it('should warn when owner and self are different for string refs', () => {
752782
class ClassParent extends React.Component {
753783
render() {
754784
return (
755-
<ClassWithRenderProp>{() => <div ref="myRef" />}</ClassWithRenderProp>
785+
<ClassWithRenderProp>
786+
{() => (
787+
<div
788+
ref={current => {
789+
this.refs['myRef'] = current;
790+
}}
791+
/>
792+
)}
793+
</ClassWithRenderProp>
756794
);
757795
}
758796
}

‎packages/react-dom/src/__tests__/ReactComponent-test.js

Lines changed: 25 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -37,7 +37,13 @@ describe('ReactComponent', () => {
3737
});
3838

3939
it('should throw when supplying a ref outside of render method', () => {
40-
let instance = <div ref="badDiv" />;
40+
let instance = (
41+
<div
42+
ref={current => {
43+
this.refs.badDiv = current;
44+
}}
45+
/>
46+
);
4147
expect(function() {
4248
instance = ReactTestUtils.renderIntoDocument(instance);
4349
}).toThrow();
@@ -118,9 +124,20 @@ describe('ReactComponent', () => {
118124

119125
class Component extends React.Component {
120126
render() {
121-
const inner = <Wrapper object={innerObj} ref="inner" />;
127+
const inner = (
128+
<Wrapper
129+
object={innerObj}
130+
ref={current => {
131+
this.refs.inner = current;
132+
}}
133+
/>
134+
);
122135
const outer = (
123-
<Wrapper object={outerObj} ref="outer">
136+
<Wrapper
137+
object={outerObj}
138+
ref={current => {
139+
this.refs.outer = current;
140+
}}>
124141
{inner}
125142
</Wrapper>
126143
);
@@ -141,7 +158,11 @@ describe('ReactComponent', () => {
141158
render() {
142159
return (
143160
<Child>
144-
<div ref="test" />
161+
<div
162+
ref={current => {
163+
this.refs.test = current;
164+
}}
165+
/>
145166
</Child>
146167
);
147168
}

0 commit comments

Comments
 (0)