insightful commentary from software addicts...
Say Hello to Scoped @NativeScript
As of today if you are building on top of Nx with our xplat tools, you can now use a much simpler import path.
## Say Hello to @nativescript
Recently [the NativeScript team said goodbye to short imports](https://www.nativescript.org/blog/say-goodbye-to-short-imports-in-nativescript) which comes as great news to us as we have never been fond of that particular short import style. However, we have [strived for more](https://github.com/NativeScript/NativeScript/issues/4041).
Whether you've been using NativeScript for a while or just started, it's quite possible one thing may strike you as awkward or even frustrating... **The import paths.**
## The Inconvenient Truth
* `import { Page } from 'tns-core-modules/ui/page';` and prior to 5.2: `import { Page } from 'ui/page';`
* `import { ObservableArray } from 'tns-core-modules/data/observable-array';` and prior to 5.2: `import { ObservableArray } from 'data/observable-array';`
* `import { NativeScriptModule } from 'nativescript-angular/nativescript.module';`
* `import { NativeScriptHttpClientModule } from 'nativescript-angular/http-client';`
These are just a few small examples which lead to the following observations in practice:
1. Try typing an import which contains a ***dash*** several hundred times throughout even a couple month's worth of real-world development.
2. What is `tns`? We know this is some type of `core` or fundamental feature and we know it's a `module` making `tns-core-modules` rather redundant.
3. All the above are related to NativeScript however that's not entirely clear.
4. The nesting of symbols inside certain paths is confusing and often not intuitive (unless you study API docs every day). Note: We have auto import in IDE's but it's more than that; the extraneous nesting creates the need for multiple import lines instead of just 1 or 2 for often used things.
5. Wait, why is `NativeScriptModule` imported from what appears to be a direct import path to a module file where `NativeScriptHttpClientModule` is imported from what appears to be a barrel or folder import?
If any of the above rings true to thoughts you've found circling your head while working with NativeScript you are in luck.
## The future of clarity with @nativescript in xplat
As of today if you are building on top of [Nx](https://nrwl.io/nx/) with our [xplat](https://nstudio.io/xplat/) tools, you can now use a much simpler import path. Plus it's backwards compatible meaning you can still use the old style and introduce the new style overtime or simply use this improved style throughout your workspace today.
Here's a look at the clarity this brings to your code:
#### Transform the Bad...
#### ...Into the Good
## Mappings for Reference
Luckily most everything is found in 1-2 imports instead of potentially 10-20 so using this today should be more intuitive but just in case below you will find what all packages are included in each scope.
*Note:* In addition to being able to access all symbols as you would expect, due to various ambiguously named symbols and collisions throughout various NativeScript modules a few extra conveneint `ns` prefixed wrappers are provided to help ensure the ambiguous symbols don't collide as well as make it clear which symbol is part of a particular grouping (Noted in **bold** below).
### @nativescript/core
### @nativescript/ui
### @nativescript/angular
## Switch your existing workspace to this right now
Make sure you've updated to the latest `@nstudio/schematics` (at least `7.3.x`) and then execute the following:
| tns-core-modules/application |
| nsApp = { on, off, ios, android } i.e. nsApp.on('event', handler) nsApp.android.foregroundActivity |
| tns-core-modules/application-settings |
| nsSettings = { clear, flush, hasKey, remove, setString, getString, getAllKeys, getBoolean, setBoolean, getNumber, setNumber } i.e. nsSettings.clear() nsSettings.setString('my-key', 'text') |
| tns-core-modules/color |
| tns-core-modules/connectivity |
| tns-core-modules/data/observable-array |
| tns-core-modules/data/observable |
| tns-core-modules/fetch |
| tns-core-modules/file-system |
| tns-core-modules/http |
| nsHttp = { getFile, getImage, getJSON, getString, request } i.e. nsHttp.getFile(...) |
| tns-core-modules/image-asset |
| tns-core-modules/image-source |
| tns-core-modules/platform |
| tns-core-modules/text |
| tns-core-modules/timer |
| nsTimer = { clearInterval, clearTimeout, setInterval, setTimeout } i.e. nsTimer.setTimeout(...) |
| tns-core-modules/trace |
| tns-core-modules/utils/utils |
| nsUtils = { GC, isDataURI, ad, convertString, eliminateDuplicates, escapeRegexSymbols, hasDuplicates, ios, isFileOrResourcePath, mergeSort, openUrl, layout } i.e. nsUtils.ios.getter(...) |
| tns-core-modules/ui/animation |
| tns-core-modules/ui/button |
| tns-core-modules/ui/core/view |
| tns-core-modules/ui/date-picker |
| tns-core-modules/ui/dialogs |
| nsDialogs = { action, alert, confirm, login, prompt } i.e. nsDialogs.alert('hello') |
| tns-core-modules/ui/editable-text-base |
| tns-core-modules/ui/enums/enums |
| tns-core-modules/ui/frame |
| tns-core-modules/ui/gestures |
| tns-core-modules/ui/html-view |
| tns-core-modules/ui/image |
| tns-core-modules/ui/image-cache |
| tns-core-modules/ui/label |
| tns-core-modules/ui/layouts/absolute-layout |
| tns-core-modules/ui/layouts/dock-layout |
| tns-core-modules/ui/layouts/flexbox-layout |
| tns-core-modules/ui/layouts/grid-layout |
| tns-core-modules/ui/layouts/stack-layout |
| tns-core-modules/ui/layouts/wrap-layout |
| tns-core-modules/ui/list-picker |
| tns-core-modules/ui/list-view |
| tns-core-modules/ui/page |
| tns-core-modules/ui/placeholder |
| tns-core-modules/ui/progress |
| tns-core-modules/ui/proxy-view-container |
| tns-core-modules/ui/repeater |
| tns-core-modules/ui/scroll-view |
| tns-core-modules/ui/search-bar |
| tns-core-modules/ui/segmented-bar |
| tns-core-modules/ui/slider |
| tns-core-modules/ui/switch |
| tns-core-modules/ui/tab-view |
| tns-core-modules/ui/text-base |
| tns-core-modules/ui/text-field |
| tns-core-modules/ui/text-view |
| tns-core-modules/ui/time-picker |
| tns-core-modules/ui/transition |
| tns-core-modules/ui/web-view |
| nativescript-angular/nativescript.module |
| nativescript-angular/animations |
| nativescript-angular/commons |
| nativescript-angular/directives/dialogs |
| nativescript-angular/element-registry |
| nativescript-angular/forms |
| nativescript-angular/http-client |
| nativescript-angular/platform |
| nativescript-angular/platform-common |
| nativescript-angular/router |
ng g xplat-helper imports --platforms=nativescript
This will add support for the `@nativescript` namespace allowing you to begin using it.
## Future compatibility
If you like this improved clarity be sure to upvote [this Github issue](https://github.com/NativeScript/NativeScript/issues/4041) and eventually the NativeScript team may make this official. Until they do, this is entirely safe to use today. When/if they officially republish their packages with the `@nativescript` namespace you will be able to continue using the new style uninterrupted.
## Using outside of xplat?
We've considered publishing a package which would bring this convenience to any NativeScript project whether it's vanilla JS, plain TypeScript or even Vue projects. We would prefer the NativeScript team just go ahead and publish themselves officially however please [comment on this issue](https://github.com/NativeScript/NativeScript/issues/4041) if you'd like to see this right away and we may consider doing that soon.
Enjoy developing with more clarity.
