Skip to content

Commit

Permalink
fix: _realElement missing when nests element into Provider, close ksc…
Browse files Browse the repository at this point in the history 
…-fe/kpc#365
  • Loading branch information
@Javey
Javey committed Oct 17, 2019
1 parent 9508769 commit 40d85a7
Show file tree
Hide file tree
Showing 6 changed files with 67 additions and 24 deletions.
19 changes: 13 additions & 6 deletions dist/index.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -247,8 +247,8 @@ function functionalWrapper(Component) {
// invoked by React
var vNodes = Component(normalizeProps(props, context, { instance: context.__parent }), true);
if (isArray$1(vNodes)) {
return vNodes.map(function (vNode) {
return normalizeIntactVNodeToReactVNode(vNode);
return vNodes.map(function (vNode, index) {
return normalizeIntactVNodeToReactVNode(vNode, index);
});
}
return normalizeIntactVNodeToReactVNode(vNodes);
Expand All @@ -274,11 +274,11 @@ function functionalWrapper(Component) {
return ret;
}

function normalizeIntactVNodeToReactVNode(vNode) {
function normalizeIntactVNodeToReactVNode(vNode, key) {
if (isStringOrNumber$1(vNode)) {
return vNode;
} else if (vNode) {
return createElement(vNode.tag, vNode.props, vNode.props.children || vNode.children);
return createElement(vNode.tag, _extends({ key: key }, vNode.props), vNode.props.children || vNode.children);
}
}

Expand Down Expand Up @@ -382,8 +382,15 @@ var Wrapper = function () {
// if the parentVNode is a Intact component, it indicates that
// the Wrapper node is returned by parent component directly
// in this case we must fix the element property of parent component.
// 3 is textNode
var dom = this && this.nodeType === 3 ? this : ReactDOM.findDOMNode(this);
var dom = void 0;
if (this) {
dom = this.nodeType === 3 /* TextNode */ ? this : ReactDOM.findDOMNode(this);
} else {
// maybe this element is wrapped by Provider
// and we can not get the instance
// but the real element is inserted before the placeholder by React
dom = placeholder.previousSibling;
}
placeholder._realElement = dom;
resolve();
});
Expand Down
19 changes: 13 additions & 6 deletions dist/intact.react.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -249,8 +249,8 @@ function functionalWrapper(Component) {
// invoked by React
var vNodes = Component(normalizeProps(props, context, { instance: context.__parent }), true);
if (isArray$1(vNodes)) {
return vNodes.map(function (vNode) {
return normalizeIntactVNodeToReactVNode(vNode);
return vNodes.map(function (vNode, index) {
return normalizeIntactVNodeToReactVNode(vNode, index);
});
}
return normalizeIntactVNodeToReactVNode(vNodes);
Expand All @@ -276,11 +276,11 @@ function functionalWrapper(Component) {
return ret;
}

function normalizeIntactVNodeToReactVNode(vNode) {
function normalizeIntactVNodeToReactVNode(vNode, key) {
if (isStringOrNumber$1(vNode)) {
return vNode;
} else if (vNode) {
return createElement(vNode.tag, vNode.props, vNode.props.children || vNode.children);
return createElement(vNode.tag, _extends({ key: key }, vNode.props), vNode.props.children || vNode.children);
}
}

Expand Down Expand Up @@ -384,8 +384,15 @@ var Wrapper = function () {
// if the parentVNode is a Intact component, it indicates that
// the Wrapper node is returned by parent component directly
// in this case we must fix the element property of parent component.
// 3 is textNode
var dom = this && this.nodeType === 3 ? this : ReactDOM.findDOMNode(this);
var dom = void 0;
if (this) {
dom = this.nodeType === 3 /* TextNode */ ? this : ReactDOM.findDOMNode(this);
} else {
// maybe this element is wrapped by Provider
// and we can not get the instance
// but the real element is inserted before the placeholder by React
dom = placeholder.previousSibling;
}
placeholder._realElement = dom;
resolve();
});
Expand Down
2 changes: 1 addition & 1 deletion dist/intact.react.min.js
View file

Large diffs are not rendered by default.

11 changes: 9 additions & 2 deletions src/Wrapper.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -101,8 +101,15 @@ export default class Wrapper {
// if the parentVNode is a Intact component, it indicates that
// the Wrapper node is returned by parent component directly
// in this case we must fix the element property of parent component.
// 3 is textNode
const dom = this && this.nodeType === 3 ? this : ReactDOM.findDOMNode(this);
let dom;
if (this) {
dom = this.nodeType === 3 /* TextNode */ ? this : ReactDOM.findDOMNode(this);
} else {
// maybe this element is wrapped by Provider
// and we can not get the instance
// but the real element is inserted before the placeholder by React
dom = placeholder.previousSibling;
}
placeholder._realElement = dom;
resolve();
}
Expand Down
8 changes: 4 additions & 4 deletions src/functionalWrapper.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -13,8 +13,8 @@ export default function functionalWrapper(Component) {
// invoked by React
const vNodes = Component(normalizeProps(props, context, {instance: context.__parent}), true);
if (isArray(vNodes)) {
return vNodes.map(vNode => {
return normalizeIntactVNodeToReactVNode(vNode);
return vNodes.map((vNode, index) => {
return normalizeIntactVNodeToReactVNode(vNode, index);
});
}
return normalizeIntactVNodeToReactVNode(vNodes);
Expand All @@ -40,13 +40,13 @@ export default function functionalWrapper(Component) {
return ret;
}

export function normalizeIntactVNodeToReactVNode(vNode) {
export function normalizeIntactVNodeToReactVNode(vNode, key) {
if (isStringOrNumber(vNode)) {
return vNode;
} else if (vNode) {
return createElement(
vNode.tag,
vNode.props,
{key, ...vNode.props},
vNode.props.children || vNode.children
);
}
Expand Down
32 changes: 27 additions & 5 deletions test/index.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -122,7 +122,7 @@ describe('Unit test', function() {
it('render nested array children', () => {
render(
<ChildrenIntactComponent>
{[1, 2].map(item => <div>{item}</div>)}
{[1, 2].map(item => <div key={item}>{item}</div>)}
<div>3</div>
</ChildrenIntactComponent>
);
Expand Down Expand Up @@ -206,6 +206,9 @@ describe('Unit test', function() {
});
render(<Components>test<i>test</i></Components>);
expect(container.innerHTML).to.eql('<div>test<i>test</i></div><div>text</div>test');

render(<div><Components>test1</Components><Components>test2</Components></div>);
expect(container.innerHTML).to.eql('<div><div>test1</div><div>text</div>test<div>test2</div><div>text</div>test</div>');
});

it('render intact functional component with forwardRef', () => {
Expand Down Expand Up @@ -425,8 +428,8 @@ describe('Unit test', function() {
const instance = renderApp(function() {
return (
<div>
{this.state.list.map(item => {
return <ChildrenIntactComponent>{item}</ChildrenIntactComponent>
{this.state.list.map((item, index) => {
return <ChildrenIntactComponent key={index}>{item}</ChildrenIntactComponent>
})}
</div>
);
Expand All @@ -442,8 +445,8 @@ describe('Unit test', function() {
const instance = renderApp(function() {
return (
<ChildrenIntactComponent>
{this.state.list.map(item => {
return <div>{item}</div>
{this.state.list.map((item, index) => {
return <div key={index}>{item}</div>
})}
</ChildrenIntactComponent>
)
Expand Down Expand Up @@ -1238,4 +1241,23 @@ describe('Unit test', function() {
);
expect(container.innerHTML).to.eq('<div><div><div>c</div></div></div>');
});

it('should get element that element nested new context api', () => {
const Context = React.createContext();
const Component = createIntactComponent(
`<template>{self.get('children')}</template>`,
{
_mount() {
expect(this.element.outerHTML).to.eql('<div>test</div>');
},
}
);
render(
<Context.Provider>
<Component>
<div>test</div>
</Component>
</Context.Provider>
);
});
});

0 comments on commit 40d85a7

Please sign in to comment.