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

Modernize things #421

Merged
merged 10 commits into from
Mar 20, 2018
Merged

Modernize things #421

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
10 commits
Select commit Hold shift + click to select a range
6bc0286
Use babel-preset-env and remove transform-runtime
tusbar Dec 15, 2017
54bbe58
Load babel polyfill in gulpfile
tusbar Dec 15, 2017
166478c
Use preset-react only in tests
tusbar Dec 15, 2017
e743272
Merge branch 'master' into remove-transform-runtime
giuseppeg Dec 17, 2017
cebbc9f
Merge branch 'remove-transform-runtime' of https://github.com/tusbar/…
giuseppeg Mar 17, 2018
b7177b0
remove gulp
giuseppeg Mar 17, 2018
9ad047a
Remove a bunch of things, use arrays instead of Map
giuseppeg Mar 17, 2018
87a97ab
update dependencies and lint
giuseppeg Mar 17, 2018
c63ec6f
remove unncessary destructuring
giuseppeg Mar 17, 2018
e997315
arr not obj
giuseppeg Mar 17, 2018
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
12 changes: 8 additions & 4 deletions src/server.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,20 +2,24 @@ import React from 'react'
import { flush } from './style'

export default function flushToReact() {
return flush().map(([id, css]) =>
React.createElement('style', {
return flush().map(args => {
const id = args[0]
const css = args[1]
return React.createElement('style', {
id: `__${id}`,
// Avoid warnings upon render with a key
key: `__${id}`,
dangerouslySetInnerHTML: {
__html: css
}
})
)
})
}

export function flushToHTML() {
return flush().reduce((html, [id, css]) => {
return flush().reduce((html, args) => {
const id = args[0]
const css = args[1]
html += `<style id="__${id}">${css}</style>`
return html
}, '')
Expand Down
7 changes: 3 additions & 4 deletions src/style.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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
Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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"
      );
    }
  };
})();

Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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"
      );
    }
  };
})();

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

If you mean you want smaller output, you'll need to use other options like 'loose' mode because spec is default.

Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

You can apply loose mode to all plugins or do them individually yeah. Of course that works too

return styleSheetRegistry.computeId(baseId, props)
})
.map(tagInfo =>
styleSheetRegistry.computeId(tagInfo.baseId, tagInfo.props)
)
.join(' ')
}

Expand Down