Register.js: `Unexpected use of 'self'`

[cambiata]

Hello agan, Ben!

Eperimenting with replacing a creat-react-app cli generated test application with Haxe-generated and genes-modified code, wich seem to work well apart from one minor problem:

The webpack runner invoked with npm run start complains about Unexpected use of 'self':

Easy solved by replacing the genes.Register.hx line 8 to include window.self instead of self on the two occasions where it occurs: public static final _global = js.Syntax.code('typeof window != "undefined" ? window : typeof global != "undefined" ? global : typeof self != "undefined" ? self : this');

should replaced with

public static final _global = js.Syntax.code('typeof window != "undefined" ? window : typeof global != "undefined" ? global : typeof window.self != "undefined" ? window.self : this');

Then it works.

Maybe this could be a compile define option?

/ Jonas

[benmerckx]

Well, self is the "global" context in a web worker, where window is unavailable. So prefixing it with window would not work there. The error message you get comes from eslint: https://eslint.org/docs/rules/no-restricted-globals

We could instead use globalThis or add an eslint disable comment. I'll have to try those to see what works.

[benmerckx]

I've replaced it with globalThis here: https://github.com/benmerckx/genes/commit/1ff616cee186c1d83ea5c342a3840b649563d290

I would like to test if popular bundlers polyfill that though before making a release.

[cambiata]

Ah, cool!

Thank you very much for working on this library - big deal when it comes to integration with js ecosystem, as you know..!

[benmerckx]

big deal when it comes to integration with js ecosystem, as you know..!

Hopefully HaxeFoundation will share that sentiment someday soon :)

I've reverted that change because it does not seem to be polyfilled. So far the only step to have genes generated code working in older environments is transpile the language features (classes, arrow functions, etc). I would like to keep that as easy as possible without introducing the need to polyfill.

Running eslint on any of these generated files is a little nonsensical (it will eventually report more things over which you have no control at all since you're writing Haxe, not Javascript). However if I remember correctly with create react app it might not be configurable. I've introduced a new define that will help disable it. With -D genes.banner you can add a string at the top of output files. You can just add -D genes.banner=/* eslint-disable */ to your hxml so eslint will not report "errors" in any of your generated files.

[benmerckx]

Out of interest: what is the reason for using create-react-app in your setup? Bundling? The dev server?

[cambiata]

The reason is that I'm now working together with at js team using React, Preact, Next.js etc, and for me - being a self-taught non-programmer mostly working in Haxe, I need to find ways learn and interact with the established js ecosystems and workflows, including the dark wizardry going on (webpack, babel etc).

The ultimate situation for me would be to just point the Haxe output directory into any es6 js source library, and the current js framework dev and build workflows should "just work". So far, genes has got me a lot closer to that kind of integration.

[cambiata]

Ah, -D genes.banner=/* eslint-disable */ - great! Thankx!