Skip to content

Commit 2866022

Browse files
committed
docs: add Windows platform documentation
Covers setup, running, debugging, publishing to the Microsoft Store, App_Resources/Windows, the windows config block, marshalling, native code, subclassing and the WinUI 3 native component of each UI element.
1 parent 6348ab7 commit 2866022

50 files changed

Lines changed: 1476 additions & 18 deletions

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

‎content/best-practices/platform-file-split-or-not.md‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -23,12 +23,13 @@ Using platform files:
2323

2424
- `file.ios.ts`
2525
- `file.android.ts`
26+
- `file.windows.ts` (when targeting [Windows](/guide/windows/))
2627

2728
The advent of tree shaking and webpack builds does away with quite a bit of worry in this area however there's a few things to consider here.
2829

2930
## Conditional with tree shaking
3031

31-
When speaking of tree shaking ever since NativeScript 7, you've been able to use `__ANDROID__` or `global.isIOS` and anytime those are used as conditional splits in your code, only the applicable code for the platform that's being built would actually end up in your compiled code alleviating a lot of concern here.
32+
When speaking of tree shaking ever since NativeScript 7, you've been able to use `__ANDROID__`, `__WINDOWS__` or `global.isIOS` and anytime those are used as conditional splits in your code, only the applicable code for the platform that's being built would actually end up in your compiled code alleviating a lot of concern here.
3233

3334
## Future maintenance
3435

‎content/configuration/nativescript.md‎

Lines changed: 51 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -37,7 +37,7 @@ export default {
3737
id: string = 'com.mycompany.myapp'
3838
```
3939

40-
Controls the Application ID of your app, this setting can be overridden per platform via [ios.id](#ios-id) and [android.id](#android-id).
40+
Controls the Application ID of your app, this setting can be overridden per platform via [ios.id](#ios-id), [android.id](#android-id) and [windows.id](#windows-id).
4141

4242
### main
4343

@@ -163,6 +163,14 @@ ios: Object = {}
163163

164164
See [iOS Configuration Reference](#ios-configuration-reference)
165165

166+
### windows
167+
168+
```ts
169+
windows: Object = {}
170+
```
171+
172+
See [Windows Configuration Reference](#windows-configuration-reference)
173+
166174
### hooks
167175

168176
```ts
@@ -508,6 +516,48 @@ ios: {
508516
}
509517
```
510518

519+
## Windows Configuration Reference
520+
521+
::: warning Experimental
522+
The Windows platform is experimental. See [Developing for Windows](/guide/windows/).
523+
:::
524+
525+
### <span>windows.id</span>
526+
527+
```ts
528+
windows.id: string = 'com.mycompany.myapp';
529+
```
530+
531+
Controls the package identity name of your Windows app, this setting overrides the value set in [id](#id). The value is written to the `Name` attribute of the `<Identity>` element in the generated `Package.appxmanifest`, and the CLI uses it to find, install and remove the app package.
532+
533+
### windows.sourceProtect
534+
535+
```ts
536+
windows.sourceProtect: boolean = true;
537+
```
538+
539+
When enabled, **release** builds seal the bundled JavaScript into an encrypted `app.nsbundle` instead of shipping it as plain `.js` files. Defaults to `false`.
540+
541+
This can be overridden per build with `--source-protect` or `--no-source-protect`. The encryption key can be provided with `--source-protect-key-hex <key>` or the `NS_WINDOWS_BUNDLE_KEY` environment variable.
542+
543+
```ts
544+
export default {
545+
// ...
546+
windows: {
547+
sourceProtect: true,
548+
},
549+
} as NativeScriptConfig
550+
```
551+
552+
### windows.phoneProductId / windows.phonePublisherId
553+
554+
```ts
555+
windows.phoneProductId: string = '00000000-0000-0000-0000-000000000000';
556+
windows.phonePublisherId: string = '00000000-0000-0000-0000-000000000000';
557+
```
558+
559+
Values written to the `mp:PhoneIdentity` element of the generated `Package.appxmanifest`. When `phoneProductId` isn't set (or is empty/all zeros), the CLI generates a stable GUID derived from the app id. Can be overridden with `--phone-product-id` and `--phone-publisher-id`.
560+
511561
## Hooks Configuration Reference
512562

513563
```ts

‎content/configuration/vite.md‎

Lines changed: 8 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -360,7 +360,8 @@ Additional env flags that are passed by the CLI automatically
360360
- `--env.android` - `true` when running on Android
361361
- `--env.ios` - `true` when running on iOS
362362
- `--env.visionos` - `true` when running on visionOS
363-
- `--env.platform=<platform>` - for specifying the platform to use. Can be `android`, `ios`, or `visionos`.
363+
- `--env.windows` - `true` when running on Windows
364+
- `--env.platform=<platform>` - for specifying the platform to use. Can be `android`, `ios`, `visionos`, or `windows`.
364365
- `--env.hmr` - `true` when building with HMR enabled
365366

366367
## Global "magic" variables
@@ -397,6 +398,12 @@ We define a few useful globally available variables that you can use to alter lo
397398
// we are running on an Apple platform
398399
}
399400
```
401+
- `__WINDOWS__`, `true` when the platform is Windows
402+
```ts
403+
if (__WINDOWS__) {
404+
// we are running on Windows
405+
}
406+
```
400407

401408
::: details The following variables are also defined, but are primarily intended to be used by NativeScript Core internally, or plugins that wish to use these.
402409

‎content/configuration/webpack.md‎

Lines changed: 9 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -96,7 +96,9 @@ Additional env flags that are usually passed by the CLI automatically
9696
- `--env.nativescriptLibPath` - path to the currently running CLI's library.
9797
- `--env.android` - `true` when running on android
9898
- `--env.ios` - `true` when running on ios
99-
- `--env.platform=<platform>` - for specifying the platform to use. Can be `android` or `ios`, or a custom platform in the future.
99+
- `--env.visionos` - `true` when running on visionOS
100+
- `--env.windows` - `true` when running on Windows
101+
- `--env.platform=<platform>` - for specifying the platform to use. Can be `android`, `ios`, `visionos`, `windows`, or a custom platform.
100102
- `--env.hmr` - `true` when building with HMR enabled
101103

102104
## Global "magic" variables
@@ -121,6 +123,12 @@ We define a few useful globally available variables that you can use to alter lo
121123
// we are running on iOS
122124
}
123125
```
126+
- `__WINDOWS__` (also available as `global.isWindows`) - `true` when the platform is Windows
127+
```ts
128+
if (__WINDOWS__) {
129+
// we are running on Windows
130+
}
131+
```
124132

125133
::: details The following variables are also defined, but are primarily intended to be used by NativeScript Core internally, or plugins that wish to use these.
126134

‎content/guide/adding-native-code.md‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -30,6 +30,7 @@ ns native add java com.company.OtherAwesomeClass
3030
1. You can also manually add native code to [App_Resources](/project-structure/app-resources):
3131
- [Adding Java/Kotlin code to an application](/guide/native-code/android)
3232
- [Adding ObjectiveC/Swift Code to an application](/guide/native-code/ios)
33+
- [Adding Windows native code (C#, C++/WinRT, Win32) to an application](/guide/native-code/windows)
3334
2. Optionally [generate TypeScript types for the added APIs](/guide/native-code/generate-typings)
3435

3536
Additionally, NativeScript also supports Jetpack Compose and SwiftUI through plugins.

‎content/guide/cli-basics.md‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -57,6 +57,8 @@ Example output:
5757
| 3 | iPhone 14 Pro | iOS | XXXXXXXX-XXXX-XXXX-XXXX-XXXXXXXXXXXX | Emulator | Connected | Local |
5858
```
5959

60+
On a Windows host, the local machine is also listed as a `Windows` device, which is the target used by `ns run windows` (see [Developing for Windows](/guide/windows/)).
61+
6062
## Setting the default package manager
6163

6264
To set the default package manager that the CLI uses (unless overridden in [nativescript.config.ts](/project-structure/nativescript-config#cli-packagemanager)):

‎content/guide/debugging.md‎

Lines changed: 61 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@ contributors:
55
- rigor789
66
---
77

8-
There are multiple ways to debug issues in your apps, starting with the simplest form using `console.logs`. For more complex issues, you may need to use an actual debugger, like Chrome DevTools, XCode developer tools and instruments or the Android Studio developer tools.
8+
There are multiple ways to debug issues in your apps, starting with the simplest form using `console.logs`. For more complex issues, you may need to use an actual debugger, like Chrome DevTools, XCode developer tools and instruments, the Android Studio developer tools or Visual Studio on Windows.
99

1010
## Console
1111

@@ -41,7 +41,7 @@ console.timeEnd('myLabel')
4141
To start a Chrome debugging session, run your app in debug mode:
4242

4343
```bash
44-
ns debug android|ios
44+
ns debug android|ios|windows
4545
```
4646

4747
The `ns debug` command builds and deploys the app on a connected device or emulator, in case you have multiple devices available you will need to pick one from a list, or pass in the `--device <id>` from `ns devices`.
@@ -163,3 +163,62 @@ Since NativeScript follows a standard gradle/android application structure, you
163163
- [Android Studio: Layout Inspector](https://developer.android.com/studio/debug/layout-inspector)
164164
- [Android Studio: view Logcat logs](https://developer.android.com/studio/debug/am-logcat)
165165
- [Androud Studio: Debug your app](https://developer.android.com/studio/debug#startdebug)
166+
167+
## Debugging on Windows
168+
169+
::: warning Experimental
170+
The Windows platform is experimental. See [Developing for Windows](/guide/windows/).
171+
:::
172+
173+
### Chrome DevTools
174+
175+
Start a debug session on the local machine with:
176+
177+
```bash
178+
ns debug windows
179+
```
180+
181+
The command builds, deploys and launches the app with the V8 inspector enabled. Once the inspector is listening, a URL is printed to the console:
182+
183+
```bash
184+
# NativeScript Debugger started #
185+
To start debugging, open the following URL in Chrome:
186+
devtools://devtools/bundled/inspector.html?ws=127.0.0.1:43000
187+
```
188+
189+
Open the printed URL in Google Chrome to attach to the debugger session. The inspector listens on port `43000` (iOS uses `41000` and Android `42000`), or the next free port if `43000` is taken.
190+
191+
Alternatively open `chrome://inspect` in Chrome, click **Configure...**, add `127.0.0.1:43000`, and select the app from the **Remote Target** list. Any other client that speaks the Chrome DevTools Protocol can connect to the same address.
192+
193+
The same options as on the other platforms are supported:
194+
195+
- `--debug-brk` - pauses on the first line of JavaScript until the debugger connects. The app waits up to 30 seconds for a debugger, then continues.
196+
- `--start` - attaches to an app that is already running with the debugger enabled (started with `ns debug windows`), without restarting it.
197+
- `--timeout` - number of seconds the CLI waits for the inspector to start. Default is 60 seconds.
198+
199+
`ns run windows` doesn't start the inspector, use `ns debug windows` instead.
200+
201+
The debugger, console, sources, CPU profiling and memory snapshots are provided by V8's inspector. Network requests made with `@nativescript/core` HTTP APIs are shown in the **Network** tab.
202+
203+
### Console output
204+
205+
`ns run windows` and `ns debug windows` stream the app's console output to your terminal. The output is also written to:
206+
207+
- the debugger output (visible in the Visual Studio **Output** window or [DebugView](https://learn.microsoft.com/sysinternals/downloads/debugview))
208+
- `%LOCALAPPDATA%\Packages\<PackageFamilyName>\LocalState\console.log`
209+
210+
### Crash logs
211+
212+
When the app crashes, the runtime writes diagnostic files to the app's `LocalState` folder (`%LOCALAPPDATA%\Packages\<PackageFamilyName>\LocalState\`):
213+
214+
- `nativescript-crash.log` &mdash; unhandled JavaScript and XAML errors (also streamed to the terminal)
215+
- `nativescript-panic.log` &mdash; internal runtime errors
216+
- `nativescript-veh.log` &mdash; fatal native exceptions
217+
218+
In debug builds, an uncaught JavaScript error during startup shows a **NativeScript Runtime Error** dialog with the error details and the option to copy them or restart the app.
219+
220+
Some XAML errors terminate the process immediately (for example error `0xC000027B`) without reaching these logs. In that case check **Event Viewer › Windows Logs › Application**, or capture a crash dump with [ProcDump](https://learn.microsoft.com/sysinternals/downloads/procdump). See [Troubleshooting › Windows](/troubleshooting#windows).
221+
222+
### Debugging native code with Visual Studio
223+
224+
To debug native (C#, C++ or WinRT) code, run the app with `ns run windows`, then in [Visual Studio](https://visualstudio.microsoft.com/) use **Debug › Attach to Process...**, select your app's process, and choose the **Managed** and/or **Native** code types. You can also open the generated host project in `platforms/windows/<ProjectName>/` in Visual Studio to browse and set breakpoints in its code.
Lines changed: 88 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,88 @@
1+
---
2+
title: Extending WinRT classes and implementing interfaces
3+
description: Subclass Windows Runtime classes and implement WinRT interfaces from JavaScript.
4+
contributors:
5+
- triniwiz
6+
---
7+
8+
::: warning Experimental
9+
Subclassing and interface implementation on Windows are experimental and more limited than on Android and iOS. For most use cases prefer composition (wrapping native controls, as `@nativescript/core` does), or implement the native part in [C# or C++/WinRT](/guide/native-code/windows) and call it from JavaScript.
10+
:::
11+
12+
On Windows, extending a native class or implementing a native interface creates a real .NET type behind the scenes. That type forwards the members you override to your JavaScript implementation, while all other members keep their native behavior.
13+
14+
## Implementing WinRT interfaces
15+
16+
Use `Object.extend` with an `interfaces` list, and implement the interface members using their WinRT names:
17+
18+
```ts
19+
const Stringable = Object.extend({
20+
interfaces: [Windows.Foundation.IStringable],
21+
ToString() {
22+
return 'Hello from JavaScript'
23+
},
24+
})
25+
26+
const instance = new Stringable()
27+
console.log(instance.ToString()) // Hello from JavaScript
28+
```
29+
30+
Multiple interfaces can be listed, and all of their members implemented in the same object.
31+
32+
## Extending WinRT classes
33+
34+
Call `extend` on the base class and pass the members to override. An optional name can be passed as the first argument:
35+
36+
```ts
37+
const MyClass = SomeNamespace.SomeUnsealedClass.extend('MyClass', {
38+
init() {
39+
// called after the instance is constructed
40+
},
41+
SomeVirtualMethod(arg) {
42+
// override
43+
},
44+
})
45+
46+
const instance = new MyClass()
47+
```
48+
49+
- Only the members listed in the overrides object are overridden, all other members use the base implementation.
50+
- `init(...args)` is called after the instance is constructed, with the constructor arguments.
51+
- Getters and setters in the overrides object override the corresponding WinRT properties.
52+
53+
::: warning Sealed classes
54+
Only classes that can be derived from (unsealed, "composable" classes) can be extended. Most WinRT runtime classes, for example `Windows.Data.Json.JsonObject`, are **sealed**. Overrides passed to `extend` on a sealed class have no effect.
55+
:::
56+
57+
### Using TypeScript classes
58+
59+
With TypeScript, decorate a class that extends a WinRT class with `@NativeClass()`, and optionally with the `@Interfaces` and `@CSharpProxy` decorators:
60+
61+
```ts
62+
@NativeClass()
63+
@Interfaces([Windows.Foundation.IStringable])
64+
@CSharpProxy('MyApp.Native.MyStringable')
65+
class MyStringable extends SomeNamespace.SomeUnsealedClass {
66+
ToString() {
67+
return 'MyStringable'
68+
}
69+
}
70+
```
71+
72+
- `@Interfaces([...])` lists the interfaces implemented by the class.
73+
- `@CSharpProxy(name)` sets the full name of the generated .NET type.
74+
75+
::: tip Note
76+
As on Android and iOS, `@NativeClass()` makes sure the class is compiled in a way the runtime can intercept. See [the NativeClass decorator](/best-practices/native-class).
77+
:::
78+
79+
## How it works
80+
81+
At build time the CLI scans your bundled JavaScript for `extend` calls and decorated classes, and generates matching C# proxy types that are compiled into the app. This is similar to the static binding generator used on Android.
82+
83+
In development builds, types that weren't found at build time are generated at runtime instead.
84+
85+
## Limitations
86+
87+
- Sealed classes can't be extended.
88+
- JavaScript overrides are only called on the UI thread, see [Multithreading](/guide/multithreading#windows).

‎content/guide/marshalling/index.md‎

Lines changed: 4 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -2,11 +2,12 @@
22
title: Marshalling in NativeScript
33
---
44

5-
Marshalling in NativeScript refers to the conversion of JavaScript data types to native platform language (Swift/Objective C and Kotlin/Java) data types and vice versa.
5+
Marshalling in NativeScript refers to the conversion of JavaScript data types to native platform language (Swift/Objective C, Kotlin/Java and Windows Runtime) data types and vice versa.
66

7-
The conversion is handled implicitly by the NativeScript iOS and Android runtimes.
7+
The conversion is handled implicitly by the NativeScript iOS, Android and Windows runtimes.
88

99
For more information about how NativeScript converts data types for each platform, read the following articles:
1010

1111
- [iOS Marshalling](/guide/ios-marshalling)
12-
- [Android Marshalling](/guide/android-marshalling)
12+
- [Android Marshalling](/guide/android-marshalling)
13+
- [Windows Marshalling](/guide/windows-marshalling)

‎content/guide/metadata.md‎

Lines changed: 23 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -133,3 +133,26 @@ if (android.os.Build.VERSION.SDK_INT >= 21) {
133133
## iOS Metadata
134134

135135
This is our own custom data format for listing the iOS APIs we are aware of and can handle. It stores the minimal required information and provides a small size and highly efficient read access. iOS supports type introspection to some extent but along with the C APIs embedded all the way in the native APIs we had to store a lot of extra information. The Metadata is pre-generated at compile time from the SDK header files and embedded in the app package (ipa).
136+
137+
## Windows Metadata
138+
139+
::: warning Experimental
140+
The Windows platform is experimental. See [Developing for Windows](/guide/windows/).
141+
:::
142+
143+
Unlike iOS and Android, Windows doesn't need metadata to be generated at build time. The Windows Runtime describes every API in `.winmd` metadata files, which the NativeScript Windows runtime reads on demand while the app is running:
144+
145+
- The system `Windows.*` APIs are resolved from the metadata that ships with Windows.
146+
- `Microsoft.*` (WinUI 3 and the Windows App SDK) is resolved from the Windows App SDK the app depends on.
147+
- Any other `.winmd` file placed next to the app executable or in the app root is loaded automatically on startup. See [Adding C++/WinRT components](/guide/native-code/windows#adding-c-winrt-components).
148+
149+
As a result there are no metadata filtering rules on Windows: every WinRT API available on the machine running the app can be called.
150+
151+
::: tip Inspecting a type
152+
To see what the runtime knows about a type, call `__nsDescribeWinRTType` with its full name. It returns a JSON description of the type's methods and properties:
153+
154+
```ts
155+
console.log(__nsDescribeWinRTType('Windows.Foundation.Uri'))
156+
```
157+
158+
:::

0 commit comments

Comments
 (0)