Modernize things #421
Merged
Modernize things #421
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
babel-plugin-transform-runtime factorizes the helpers by using core-js. This was making this library way too big. core-js adds 7KB (gzipped) of overhead, while inlining the helpers (even though some are duplicated) only adds 0.6KB (gzipped). babel-preset-es2015 is pretty much deprecated, using preset-env allows to stay up to date with the transforms. Also remove preset-stage3 to only add transform-object-rest-spread as it was the only transform necessary. Finally, remove preset-minify as it was not used.
…styled-jsx into modernize-things
giuseppeg
commented
Mar 17, 2018
src/style.js
Outdated
| @@ -6,10 +6,9 @@ const styleSheetRegistry = new StyleSheetRegistry() | |||
| export default class JSXStyle extends Component { | |||
| static dynamic(info) { | |||
| return info | |||
| .map(tagInfo => { | |||
| const [baseId, props] = tagInfo | |||
There was a problem hiding this comment.
We can just get rid of this and Babel won't inline the following helper :)
var _slicedToArray = (function() {
function sliceIterator(arr, i) {
var _arr = [];
var _n = true;
var _d = false;
var _e = undefined;
try {
for (
var _i = arr[Symbol.iterator](), _s;
!(_n = (_s = _i.next()).done);
_n = true
) {
_arr.push(_s.value);
if (i && _arr.length === i) break;
}
} catch (err) {
_d = true;
_e = err;
} finally {
try {
if (!_n && _i["return"]) _i["return"]();
} finally {
if (_d) throw _e;
}
}
return _arr;
}
return function(arr, i) {
if (Array.isArray(arr)) {
return arr;
} else if (Symbol.iterator in Object(arr)) {
return sliceIterator(arr, i);
} else {
throw new TypeError(
"Invalid attempt to destructure non-iterable instance"
);
}
};
})();
giuseppeg
commented
Mar 17, 2018
| @@ -7,7 +7,8 @@ export default class JSXStyle extends Component { | |||
| static dynamic(info) { | |||
| return info | |||
| .map(tagInfo => { | |||
| const [baseId, props] = tagInfo | |||
There was a problem hiding this comment.
by getting rid of this Babel won't inline the following helper:
var _slicedToArray = (function() {
function sliceIterator(arr, i) {
var _arr = [];
var _n = true;
var _d = false;
var _e = undefined;
try {
for (
var _i = arr[Symbol.iterator](), _s;
!(_n = (_s = _i.next()).done);
_n = true
) {
_arr.push(_s.value);
if (i && _arr.length === i) break;
}
} catch (err) {
_d = true;
_e = err;
} finally {
try {
if (!_n && _i["return"]) _i["return"]();
} finally {
if (_d) throw _e;
}
}
return _arr;
}
return function(arr, i) {
if (Array.isArray(arr)) {
return arr;
} else if (Symbol.iterator in Object(arr)) {
return sliceIterator(arr, i);
} else {
throw new TypeError(
"Invalid attempt to destructure non-iterable instance"
);
}
};
})();
There was a problem hiding this comment.
If you mean you want smaller output, you'll need to use other options like 'loose' mode because spec is default.
There was a problem hiding this comment.
good point but I don't know if I can configure that per-plugin when using preset-env. In this case I can just write es5 myself
There was a problem hiding this comment.
You can apply loose mode to all plugins or do them individually yeah. Of course that works too
nkzawa
approved these changes
Mar 20, 2018
rmdort
pushed a commit
to rmdort/styled-jsx
that referenced
this pull request
Jun 20, 2018
* Use babel-preset-env and transform-object-rest-spread * Remove transform-runtime and babel-polyfill * Get rid of Gulp and use babel cli to build * Use an array instead of a Map in styled-jsx/style (`flush`). This way we don't need polyfills
rmdort
pushed a commit
to rmdort/styled-jsx
that referenced
this pull request
Jul 3, 2018
* Use babel-preset-env and transform-object-rest-spread * Remove transform-runtime and babel-polyfill * Get rid of Gulp and use babel cli to build * Use an array instead of a Map in styled-jsx/style (`flush`). This way we don't need polyfills
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
I am removing gulp, babel-polyfill which we only needed because we used a
Mapinsrc/style.js.I replaced the Map with an array. Also switched to babel-preset-env. Finally I am removing the benchmarks since there are better ones around http://necolas.github.io/react-native-web/benchmarks/ https://github.com/A-gambit/CSS-IN-JS-Benchmarks