FluxComponent does not work on IE10 about flummox HOT 24 CLOSED

@voronianski I'm confident that the following config fixes this issue:

{
    "presets": [
        "es2015-loose",
        "react",
        "stage-0"
    ],
    "plugins": [["transform-es2015-classes", {"loose": true}]]
} 

Note: the code generated for addons/FluxComponent.js is different than present in 3.6.5, so apparently "es2015-loose" is not 'loose-enough' and plugins do more.

from flummox.

@Pavek

Note: it reportedly can be fixed by using some babel build options

Please share the options that can fix that babel behavior.

Not sure why and if this is relevant, but bundles in '/dist/' are missed now completely

dist folder is available now in 3.6.5, it was missed accidentally.

but we have another issue here: Flummox npm module comes with already transplied code. I'm not sure why so, and it seems generally incorrect.

It's a general rule for npm modules to be shipped already transplied.

from flummox.

Please share the options that can fix that babel behavior.

Please see this comment: https://phabricator.babeljs.io/T3041#66105

from flummox.

@Pavek

that's strange that Flummox has this bug, as we're already using "loose" es5 preset - https://github.com/acdlite/flummox/blob/master/.babelrc#L3

from flummox.

If that might help, here's the root cause as we debugged down:
In transplied FluxComponent.js:

function _inherits(subClass, superClass) {
...
 if (superClass) Object.setPrototypeOf ? 
      Object.setPrototypeOf(subClass, superClass) :
      subClass.__proto__ = superClass; }

}

IE10 do not support both setPrototypeOf and __proto__ thus _inherits() basically do not deliver what is expected to. I'm not aware of the correct way to fix this with Babel. One option was listed on first link above -- protoToAssign -- but I failed to find a documentation for it because old docs of Babel are gone :(

from flummox.

@voronianski That's not the only problem with the new version of Babel.

There's also a problem with IE8 (yeah, I know...) due to new Babel behavior. Preset es2015 does not include ES3 transformations, which replace unsafe usage of reserved keywords like default.

You need to have

        "plugins": [
          "transform-es3-member-expression-literals",
          "transform-es3-property-literals",
          ...
        ]

to fix that problem.

I would really appreciate if you added those and made Flummox 3.6 IE8-compatible.

from flummox.

@pycbouh probably it's better to open a new bug for this to make it more track-able.

from flummox.

@Pavek @pycbouh oh babel.. 5th version was so good 😢

from flummox.

I can take a closer look and experiment with plugins, presets and options a bit later, however I cannot test it 'cause I don't have IE.. maybe you have time to play with it right now? @Pavek @pycbouh

from flummox.

@Pavek Ideally, it has to be a bug about Babel configuration, I think. Well, created #272 anyway.

@voronianski Yeah, this change was massive. We just moved to Babel 6, it was very tricky.

from flummox.

@voronianski Sure.

I can say right now, though, that we have this configuration, and it seems to work fine:

      {
        "presets": ["es2015", "react"],
        "plugins": [
          "transform-es3-member-expression-literals",
          "transform-es3-property-literals",
          ["transform-es2015-classes", {"loose": true}],
          "add-module-exports",
          "transform-es2015-modules-commonjs",
          "transform-jscript"
        ]
      }

Note, that add-module-exports is unofficial plugin, that fixes new behavior with export. See this.
Also note, that transform-jscript is for nasty issues with older browsers as well, but is not obligatory. It wasn't enabled by default in v5, and Flummox worked fine.

from flummox.

I will test now ["transform-es2015-classes", {"loose": true}] option from the config @pycbouh kindly shared -- this one seems to be relevant for this issue.

from flummox.

@Pavek @pycbouh thanks guys!

from flummox.

@Pavek thanks, then I'll add necessary plugins to .babelrc instead of es2015 presets later today.

from flummox.

@voronianski I'm pretty sure ["transform-es2015-classes", {"loose": true}] complements es2015 preset, and not replaces it.

And please consider adding

"transform-es3-member-expression-literals",
"transform-es3-property-literals"

for IE8 support (#272).

from flummox.

@Pavek @pycbouh that's weird but update to ["transform-es2015-classes", {"loose": true}] causes a lot of tests to fail.. investigating.

from flummox.

@voronianski Any update regarding this? Thanks.

from flummox.

@Pavek @pycbouh for now I cannot make tests pass when loose within ["transform-es2015-classes", {"loose": true}] is enabled, async/await methods on class instance are not transpiled properly.

from flummox.

@voronianski
Did you keep es2015 preset? It seems to transpile async functions, but only with an appropriate syntax plugin.

Also, if you've used es1015-loose, it has settings to disable regenerator plugin from creating async methods when it otherwise would.

from flummox.

@pycbouh I've checked several setups once more and after chat in Babel's Slack account I'm aware that it's a known bug in Babel that will be fixed in next version. Hopefully it will be asap.

from flummox.

@pycbouh @Pavek good news! new version was published several seconds ago and this bug fixed - babel/babel#3135

from flummox.

@Pavek @pycbouh added in 3.6.6

from flummox.

Thanks!

from flummox.

Thanks

from flummox.