Splitting globals into smaller chunks and removing side-effects

[edusperoni]

The current globals file is a side-effect of @nativescript/core. This is especially an issue in workers as ui-dialogs will pull most of the core into the worker chunks, which can't even display dialogs.

Proposal: split globals in:

globals/core.ts // defines the way globals are polyfilled and polyfills the minimum required (tslib, loadModule, extends)
// all the files below import core.ts
globals/timer.ts // setTimeout...
globals/animation.ts // requestAnimationFrame...
globals/dialogs.ts // alert()
globals/text.ts // TextDecoder, TextEncoder
globals/xhr.ts // XMLHttpRequest...
globals/fetch.ts // fetch
globals/index.ts // import all of the above (backwards compatibility and "hassle-free" configuration)
globals/worker.ts // still up for debate, imports all non-ui polyfills

Remove the globals import from @nativescript/core.

Change the way globals are imported:

1. the developer must manually polyfill them before importing @nativescript/core or inside workers (angular flavor will likely go this route, at least for non-worker polyfills)
2. webpack will ensure @nativescript/core/globals is being imported before main.ts and the core team will maintain which polyfills are required for workers and webpack will also ensure they're polyfilled on each worker.

Breaking changes:

The split itself will generate no breaking changes as the functionality of index.ts will remain the same.

After removing the import from @nativescript/core, approach 1 will require the polyfills to be specified by the developer while approach 2 will required the user to upgrade to the latest webpack release.

[rigor789]

I'd be curios if we could "autoload" globals with https://webpack.js.org/plugins/provide-plugin/ or a custom loader?

[edusperoni]

We can, but it's probably a bit too much work. As I see it, you have to individually provide each polyfill like this:

plugins: [
  new webpack.ProvidePlugin({
    setTimeout: ['@nativescript/core/timer', 'setTimeout'],
    setInterval: ['@nativescript/core/timer', 'setInterval'],
    // keep going one for each function
  })
]

and I don't think calling global.setTimeout will work at all.

I believe this can be done better with adding the polyfills to the application entrypoint:

entry: {
    bundle: ['@nativescript/core/globals/index.ts', './src/main.ts']
}

webpack has a couple of ways of doing it, maybe this one can work too: https://webpack.js.org/guides/shimming/#global-exports

[rigor789]

@edusperoni I don't think that'd be a huge deal given the new webpack implementation I'm working on - we can extract a function that generates that object for all globals if we decide to go that route. I think it would be convenient!

The entry way is also feasible as long as it does it in the right order?

Definitely worth trying the different options before we decide on either.

[edusperoni]

The entry way is also feasible as long as it does it in the right order?

Yeah. That's what we're going for with the angular webpack:

const entries = [ './src/main.ts' ];
if(fs.existsSync('./src/polyfills.tns.ts') { // .tns depending on code sharing or not
  entries.unshift('./src/polyfills.tns.ts');
}
...
entry: {
    bundle: entries
}

This will allow us to have a place where the developer can also add some polyfills of their own, like nativescript-websockets and others.

[farfromrefug]

@rigor789 can we talk about this again? I really would like that to happen.
I have AbortController coming soon as a Shim and @nativescript/canvas-polyfill from @triniwiz also has a lot of them which also should be handled in wepback

[rigor789]

We are loading globals through the entry file - and any additional globals/polyfills could be added there through the webpack config (or through the plugin webpack config). Is that what you are looking for, or something else?

[farfromrefug]

@rigor789 yes that what i am looking for. We should have an easy way to do it and to start doing it with N shims.
I am thinking right now they should be added by default(to not break existing apps) but have a way to disable them through webpack.
Maybe a webpack plugin on which we can tap to change the list of shims?