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.
