Feature: eeg-pipes in React Native

[elmines]

I am utilizing eeg-pipes in conjunction with a React Native Android app. I love eeg-pipes's API, but Babel doesn't run unless I have a debugger window open in the browser:

I presume the transpiler needs a browser window to run? I am quite new to front-end and am more than willing to add this feature myself and do a pull request; I may need a suggestion regarding where to start, however.

[jdpigeon]

Hey there! This is exciting stuff. I'm glad to see someone using the pipes on mobile!

This is an issue because the eeg pipes build process only produces code with ES6 syntax. That's been fine for us in the past running node, web, and Electron projects in the past, but maybe we should extend that by compiling all the way to vanilla JS? @alexcastillo

One workaround that may work for your app is to include @neurosity/pipes in your babel transpilation. Something like this might do it: babel/babel-loader#171

[alexcastillo]

Hey @elmines,

Thanks for opening an issue.

What version of React Native are you running? According to the docs, es6 is supported: https://facebook.github.io/react-native/docs/javascript-environment

[elmines]

Thank you, @alexcastillo; I am running React Native 0.57.3, the latest release. I don't think this is due to some breaking change in React Native, because I had this same issue with version 0.55.4.

I played some with the Babel transpiler before, but I will take another look.

[elmines]

I can now say with near certainty that Babel is not overlooking eeg-pipes; the issue is that it is not transpiling any of the ES6 code inside the eval() statements. I've replicated this error with a tiny module that does something similar:

"use strict";
const messages = ["Wow, I love new ECMAScript syntax tricks", "Don't you?"];
messages.forEach(element => console.log(element));
eval(" const warning = \"Apparently React Native doesn\'t transpile code inside of eval()\"; console.log(warning); ");

That const declaration in the eval() statement causes the same error shown in the screenshot above. I would assume React Native runs Babel before these eval() statements get a chance to run. I've also attached a (somewhat) pretty-printed version of eeg-pipes.umd.js. The error occurs at the eval() statement on line 36.

The easiest (but perhaps crudest) solution I can currently think of is an additional distribution with the eval() statements already executed.

pretty-eeg-pipes.umd.js.zip

[jdpigeon]

Good detective work.

So, those eval statements are how the UMD module system handles importing dependencies. Ideally, in a way that should support both browser and Node (and React Native).

Before we get too deep in troubleshooting our build configuration or generating another distribution, can you check that this issue isn't because you're on an old version of node? https://stackoverflow.com/questions/36789889/syntaxerror-use-of-const-in-strict-mode

const and let should be able to be used in strict mode in the newest version of node, I believe

[elmines]

I actually did consider that and upgraded to Node 11.0.0. I'm currently looking into a Babel plugin that also transforms code inside eval() statements: https://babeljs.io/docs/en/babel-plugin-transform-eval

[jdpigeon]

Hmmm ok. Don't worry about that babel plugin, the problem is on our side with our umd config then.

Until we fix it, try pointing your app to our other bundles instead. You can do that by changing eeg pipes package.json "main" value to "dist/eeg-pipes.var.js" or "dist/electron.js"

[elmines]

I actually did try out the other bundles and encountered the same issue. By all means let me know if there is any way I can help; I don't want to make a feature request without being willing to pitch in.

[elmines]

Since React Native has its own Babel transformations, its sufficient to just produce a distribution in ES6, as long as it has no code in eval() statements.

My changes can be summarized as follows:

• Add an extra dist to the webpack.config.js (eeg-pipes.react.js)
• Upgrade webpack-cli to 3.1.2 (I could not get the build scripts to run correctly otherwise)

That said, it is apparently difficult to install the exact packages in the yarn.lock file; so I fear that the slight version changes to the installed packages (in addition to my changing the webpack-cli dependency) could break the code on other machines.

I have a commit at elmines@7932778. I'm happy to make whatever modifications are necessary before a pull request.

EDIT: I did not have all my faculties writing this late yesterday evening. While it does still work to just import the src/index.js file in ES6, what I did was produce a transpiled dist/eeg-pipes.react.js without eval() statements.