Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

fix(es/react): Allow spread children #6505

Merged
merged 7 commits into from Nov 24, 2022
Merged

fix(es/react): Allow spread children #6505

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
2085936
Add a test
kdy1 Nov 24, 2022
f47cb1b
fixup
kdy1 Nov 24, 2022
7641abc
Fix
kdy1 Nov 24, 2022
ff2ba27
Update test refs
kdy1 Nov 24, 2022
54ee5fc
Update test refs
kdy1 Nov 24, 2022
c0ce420
Update test refs
kdy1 Nov 24, 2022
60edc5c
Update test refs
kdy1 Nov 24, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
5 changes: 4 additions & 1 deletion crates/swc/tests/fixture/issues-2xxx/2037/case1/output/index.js
View file
Open in desktop
@@ -1,3 +1,6 @@
var A = function() {
return /*#__PURE__*/ React.createElement("div", null);
return /*#__PURE__*/ React.createElement.apply(React, [
"div",
null
]);
};
120 changes: 102 additions & 18 deletions crates/swc/tests/tsc-references/inlineJsxFactoryDeclarationsLocalTypes.1.normal.js
View file
Open in desktop
Expand Up @@ -3,22 +3,106 @@ export { };
//// [renderer2.d.ts]
export { };
//// [component.tsx]
//!
//! x Spread children are not supported in React.
//! ,----
//! 4 | export const MySFC = (props: {x: number, y: number, children?: predom.JSX.Element[]}) => <p>{props.x} + {props.y} = {props.x + props.y}{...this.props.children}</p>;
//! : ^^^^^^^^^^^^^^^^^^^^^^^^
//! `----
//!
//! x Spread children are not supported in React.
//! ,----
//! 12 | {...this.props.children}
//! : ^^^^^^^^^^^^^^^^^^^^^^^^
//! `----
/** @jsx predom */ import _class_call_check from "@swc/helpers/src/_class_call_check.mjs";
import _to_consumable_array from "@swc/helpers/src/_to_consumable_array.mjs";
var _this = this;
import { predom } from "./renderer2";
export var MySFC = function(props) {
return /*#__PURE__*/ predom.apply(void 0, [
"p",
null,
props.x,
" + ",
props.y,
" = ",
props.x + props.y
].concat(_to_consumable_array(_this.props.children)));
};
export var MyClass = /*#__PURE__*/ function() {
"use strict";
function MyClass(props) {
_class_call_check(this, MyClass);
this.props = props;
}
var _proto = MyClass.prototype;
_proto.render = function render() {
return /*#__PURE__*/ predom.apply(void 0, [
"p",
null,
this.props.x,
" + ",
this.props.y,
" = ",
this.props.x + this.props.y
].concat(_to_consumable_array(this.props.children)));
};
return MyClass;
}();
export var tree = /*#__PURE__*/ predom(MySFC, {
x: 1,
y: 2
}, /*#__PURE__*/ predom(MyClass, {
x: 3,
y: 4
}), /*#__PURE__*/ predom(MyClass, {
x: 5,
y: 6
}));
export default /*#__PURE__*/ predom("h", null);
//// [index.tsx]
//!
//! x Spread children are not supported in React.
//! ,----
//! 13 | return <p>{this.props.x} + {this.props.y} = {this.props.x + this.props.y}{...this.props.children}</p>;
//! : ^^^^^^^^^^^^^^^^^^^^^^^^
//! `----
/** @jsx dom */ import _class_call_check from "@swc/helpers/src/_class_call_check.mjs";
import _to_consumable_array from "@swc/helpers/src/_to_consumable_array.mjs";
import { dom } from "./renderer";
import prerendered, { MySFC, MyClass, tree } from "./component";
var elem = prerendered;
elem = /*#__PURE__*/ dom("h", null); // Expect assignability error here
var DOMSFC = function(props) {
return /*#__PURE__*/ dom("p", null, props.x, " + ", props.y, " = ", props.x + props.y, props.children);
};
var DOMClass = /*#__PURE__*/ function() {
"use strict";
function DOMClass(props) {
_class_call_check(this, DOMClass);
this.props = props;
}
var _proto = DOMClass.prototype;
_proto.render = function render() {
return /*#__PURE__*/ dom.apply(void 0, [
"p",
null,
this.props.x,
" + ",
this.props.y,
" = ",
this.props.x + this.props.y
].concat(_to_consumable_array(this.props.children)));
};
return DOMClass;
}();
// Should work, everything is a DOM element
var _tree = /*#__PURE__*/ dom(DOMSFC, {
x: 1,
y: 2
}, /*#__PURE__*/ dom(DOMClass, {
x: 3,
y: 4
}), /*#__PURE__*/ dom(DOMClass, {
x: 5,
y: 6
}));
// Should fail, no dom elements
var _brokenTree = /*#__PURE__*/ dom(MySFC, {
x: 1,
y: 2
}, /*#__PURE__*/ dom(MyClass, {
x: 3,
y: 4
}), /*#__PURE__*/ dom(MyClass, {
x: 5,
y: 6
}));
// Should fail, nondom isn't allowed as children of dom
var _brokenTree2 = /*#__PURE__*/ dom(DOMSFC, {
x: 1,
y: 2
}, tree, tree);
65 changes: 47 additions & 18 deletions crates/swc/tests/tsc-references/inlineJsxFactoryDeclarationsLocalTypes.2.minified.js
View file
Open in desktop
Expand Up @@ -3,22 +3,51 @@ export { };
//// [renderer2.d.ts]
export { };
//// [component.tsx]
//!
//! x Spread children are not supported in React.
//! ,----
//! 4 | export const MySFC = (props: {x: number, y: number, children?: predom.JSX.Element[]}) => <p>{props.x} + {props.y} = {props.x + props.y}{...this.props.children}</p>;
//! : ^^^^^^^^^^^^^^^^^^^^^^^^
//! `----
//!
//! x Spread children are not supported in React.
//! ,----
//! 12 | {...this.props.children}
//! : ^^^^^^^^^^^^^^^^^^^^^^^^
//! `----
import _class_call_check from "@swc/helpers/src/_class_call_check.mjs";
import _to_consumable_array from "@swc/helpers/src/_to_consumable_array.mjs";
var _this = this;
import { predom } from "./renderer2";
export var MySFC = function(props) {
return predom.apply(void 0, [
"p",
null,
props.x,
" + ",
props.y,
" = ",
props.x + props.y
].concat(_to_consumable_array(_this.props.children)));
};
export var MyClass = function() {
"use strict";
function MyClass(props) {
_class_call_check(this, MyClass), this.props = props;
}
return MyClass.prototype.render = function() {
return predom.apply(void 0, [
"p",
null,
this.props.x,
" + ",
this.props.y,
" = ",
this.props.x + this.props.y
].concat(_to_consumable_array(this.props.children)));
}, MyClass;
}();
export var tree = predom(MySFC, {
x: 1,
y: 2
}, predom(MyClass, {
x: 3,
y: 4
}), predom(MyClass, {
x: 5,
y: 6
}));
export default predom("h", null);
//// [index.tsx]
//!
//! x Spread children are not supported in React.
//! ,----
//! 13 | return <p>{this.props.x} + {this.props.y} = {this.props.x + this.props.y}{...this.props.children}</p>;
//! : ^^^^^^^^^^^^^^^^^^^^^^^^
//! `----
import _class_call_check from "@swc/helpers/src/_class_call_check.mjs";
import _to_consumable_array from "@swc/helpers/src/_to_consumable_array.mjs";
import { dom } from "./renderer";
import prerendered, { MySFC, MyClass, tree } from "./component";
25 changes: 19 additions & 6 deletions crates/swc/tests/tsc-references/tsxSpreadChildren.1.normal.js
View file
Open in desktop
@@ -1,7 +1,20 @@
//// [tsxSpreadChildren.tsx]
//!
//! x Spread children are not supported in React.
//! ,----
//! 22 | {...todos.map(todo => <Todo key={todo.id} todo={todo.todo}/>)}
//! : ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
//! `----
import _extends from "@swc/helpers/src/_extends.mjs";
import _to_consumable_array from "@swc/helpers/src/_to_consumable_array.mjs";
function Todo(prop) {
return /*#__PURE__*/ React.createElement("div", null, prop.key.toString() + prop.todo);
}
function TodoList(param) {
var todos = param.todos;
return /*#__PURE__*/ React.createElement.apply(React, [
"div",
null
].concat(_to_consumable_array(todos.map(function(todo) {
return /*#__PURE__*/ React.createElement(Todo, {
key: todo.id,
todo: todo.todo
});
}))));
}
var x;
/*#__PURE__*/ React.createElement(TodoList, _extends({}, x));
10 changes: 4 additions & 6 deletions crates/swc/tests/tsc-references/tsxSpreadChildren.2.minified.js
View file
Open in desktop
@@ -1,7 +1,5 @@
//// [tsxSpreadChildren.tsx]
//!
//! x Spread children are not supported in React.
//! ,----
//! 22 | {...todos.map(todo => <Todo key={todo.id} todo={todo.todo}/>)}
//! : ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
//! `----
var x;
import _extends from "@swc/helpers/src/_extends.mjs";
import _to_consumable_array from "@swc/helpers/src/_to_consumable_array.mjs";
_extends({}, x);
31 changes: 19 additions & 12 deletions crates/swc/tests/tsc-references/tsxSpreadChildrenInvalidType(target=es2015).1.normal.js
View file
Open in desktop
@@ -1,13 +1,20 @@
//// [tsxSpreadChildrenInvalidType.tsx]
//!
//! x Spread children are not supported in React.
//! ,----
//! 21 | {...<Todo key={todos[0].id} todo={todos[0].todo} />}
//! : ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
//! `----
//!
//! x Spread children are not supported in React.
//! ,----
//! 27 | {...(<Todo key={todos[0].id} todo={todos[0].todo} /> as any)}
//! : ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
//! `----
import _extends from "@swc/helpers/src/_extends.mjs";
function Todo(prop) {
return /*#__PURE__*/ React.createElement("div", null, prop.key.toString() + prop.todo);
}
function TodoList({ todos }) {
return /*#__PURE__*/ React.createElement("div", null, .../*#__PURE__*/ React.createElement(Todo, {
key: todos[0].id,
todo: todos[0].todo
}));
}
function TodoListNoError({ todos }) {
// any is not checked
return /*#__PURE__*/ React.createElement("div", null, .../*#__PURE__*/ React.createElement(Todo, {
key: todos[0].id,
todo: todos[0].todo
}));
}
let x;
/*#__PURE__*/ React.createElement(TodoList, _extends({}, x));
15 changes: 3 additions & 12 deletions crates/swc/tests/tsc-references/tsxSpreadChildrenInvalidType(target=es2015).2.minified.js
View file
Open in desktop
@@ -1,13 +1,4 @@
//// [tsxSpreadChildrenInvalidType.tsx]
//!
//! x Spread children are not supported in React.
//! ,----
//! 21 | {...<Todo key={todos[0].id} todo={todos[0].todo} />}
//! : ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
//! `----
//!
//! x Spread children are not supported in React.
//! ,----
//! 27 | {...(<Todo key={todos[0].id} todo={todos[0].todo} /> as any)}
//! : ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
//! `----
let x;
import _extends from "@swc/helpers/src/_extends.mjs";
_extends({}, x);
40 changes: 28 additions & 12 deletions crates/swc/tests/tsc-references/tsxSpreadChildrenInvalidType(target=es5).1.normal.js
View file
Open in desktop
@@ -1,13 +1,29 @@
//// [tsxSpreadChildrenInvalidType.tsx]
//!
//! x Spread children are not supported in React.
//! ,----
//! 21 | {...<Todo key={todos[0].id} todo={todos[0].todo} />}
//! : ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
//! `----
//!
//! x Spread children are not supported in React.
//! ,----
//! 27 | {...(<Todo key={todos[0].id} todo={todos[0].todo} /> as any)}
//! : ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
//! `----
import _extends from "@swc/helpers/src/_extends.mjs";
import _to_consumable_array from "@swc/helpers/src/_to_consumable_array.mjs";
function Todo(prop) {
return /*#__PURE__*/ React.createElement("div", null, prop.key.toString() + prop.todo);
}
function TodoList(param) {
var todos = param.todos;
return /*#__PURE__*/ React.createElement.apply(React, [
"div",
null
].concat(_to_consumable_array(/*#__PURE__*/ React.createElement(Todo, {
key: todos[0].id,
todo: todos[0].todo
}))));
}
function TodoListNoError(param) {
var todos = param.todos;
// any is not checked
return /*#__PURE__*/ React.createElement.apply(React, [
"div",
null
].concat(_to_consumable_array(/*#__PURE__*/ React.createElement(Todo, {
key: todos[0].id,
todo: todos[0].todo
}))));
}
var x;
/*#__PURE__*/ React.createElement(TodoList, _extends({}, x));
16 changes: 4 additions & 12 deletions crates/swc/tests/tsc-references/tsxSpreadChildrenInvalidType(target=es5).2.minified.js
View file
Open in desktop
@@ -1,13 +1,5 @@
//// [tsxSpreadChildrenInvalidType.tsx]
//!
//! x Spread children are not supported in React.
//! ,----
//! 21 | {...<Todo key={todos[0].id} todo={todos[0].todo} />}
//! : ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
//! `----
//!
//! x Spread children are not supported in React.
//! ,----
//! 27 | {...(<Todo key={todos[0].id} todo={todos[0].todo} /> as any)}
//! : ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
//! `----
var x;
import _extends from "@swc/helpers/src/_extends.mjs";
import _to_consumable_array from "@swc/helpers/src/_to_consumable_array.mjs";
_extends({}, x);
12 changes: 4 additions & 8 deletions crates/swc_ecma_transforms_react/src/jsx/mod.rs
View file
Open in desktop
Expand Up @@ -769,14 +769,10 @@ where
}) => return None,
JSXElementChild::JSXElement(el) => self.jsx_elem_to_expr(*el).as_arg(),
JSXElementChild::JSXFragment(el) => self.jsx_frag_to_expr(el).as_arg(),
JSXElementChild::JSXSpreadChild(JSXSpreadChild { span, .. }) => {
HANDLER.with(|handler| {
handler
.struct_span_err(span, "Spread children are not supported in React.")
.emit();
});
return None;
}
JSXElementChild::JSXSpreadChild(JSXSpreadChild { span, expr, .. }) => ExprOrSpread {
spread: Some(span),
expr,
},
})
}

Expand Down
0 ...react/tests/jsx/fixture/vercel/3/input.js → ...sforms_react/tests/jsx/fixture/3/input.js
View file
Open in desktop
File renamed without changes.
0 ...act/tests/jsx/fixture/vercel/3/output.mjs → ...orms_react/tests/jsx/fixture/3/output.mjs
View file
Open in desktop
File renamed without changes.
3 changes: 3 additions & 0 deletions crates/swc_ecma_transforms_react/tests/jsx/fixture/issue-2037/input.js
View file
Open in desktop
@@ -0,0 +1,3 @@
const A = () => {
return <div>{...[]}</div>;
};
3 changes: 3 additions & 0 deletions crates/swc_ecma_transforms_react/tests/jsx/fixture/issue-2037/output.mjs
View file
Open in desktop
@@ -0,0 +1,3 @@
const A = ()=>{
return /*#__PURE__*/ React.createElement("div", null, ...[]);
};
2 changes: 1 addition & 1 deletion ...sforms_react/tests/jsx/fixture/react-automatic/should-disallow-spread-children/output.mjs
View file
Open in desktop
@@ -1 +1 @@
/*#__PURE__*/ React.createElement("div", null);
/*#__PURE__*/ React.createElement("div", null, ...children);
6 changes: 0 additions & 6 deletions ...rms_react/tests/jsx/fixture/react-automatic/should-disallow-spread-children/output.stderr
View file
Open in desktop

This file was deleted.

2 changes: 1 addition & 1 deletion ..._ecma_transforms_react/tests/jsx/fixture/react/should-disallow-spread-children/output.mjs
View file
Open in desktop
@@ -1 +1 @@
/*#__PURE__*/ React.createElement("div", null);
/*#__PURE__*/ React.createElement("div", null, ...children);
6 changes: 0 additions & 6 deletions ...ma_transforms_react/tests/jsx/fixture/react/should-disallow-spread-children/output.stderr
View file
Open in desktop

This file was deleted.