Say Hello to Scoped @NativeScript

Nathan Walker

Nathan Walker

Posted Feb 18, Updated Mar 31

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... ![the-bad](https://cdn.tipe.io/5a7276537cdf7d001322af1b/ed4b6232-da8d-40a1-8649-0d2198048b0a/Screen%20Shot%202019-02-18%20at%209.15.07%20PM.png) #### ...Into the Good ![the-good](https://cdn.tipe.io/5a7276537cdf7d001322af1b/bf3fdfde-f767-41d4-9ea0-2db336187215/Screen%20Shot%202019-02-18%20at%209.15.36%20PM.png) ## 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
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(...)
### @nativescript/ui
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-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
## 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:
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.