Merge main with 0.66 release (#149)

* Update sample to use nuget.org (#143)

* Update project url on nuget.org (#145)

* Link to nuget packages in the README

* fix typo (#140)

* Add version info (#139)

* edits to readme (#146)

* updates

* Update README.md

* feedback

* Copy notifications code to sample (#147)

* Copy notifications code to sample

* Button is not needed

* update sample image/readme (#148)

* update image and readme

* Update sample-app.png

* Update sample-app.png

Co-authored-by: angelazhangmsft <angzhang@microsoft.com>

Author: dunhor

README.md

@@ -2,19 +2,33 @@
 
 React Native WinRT is a module for [React Native for Windows](https://microsoft.github.io/react-native-windows/) developers who want to call native (non-XAML) WinRT APIs in their apps. It uses components from [xlang](https://github.com/Microsoft/xlang) to [parse metadata](https://github.com/microsoft/winmd) for public or private WinRT COM APIs and generate JSI (JavaScript Interface) wrappers for [C++/WinRT](https://github.com/microsoft/cppwinrt) types at compile-time. The code generator was itself derived from `cppwinrt.exe`.
 
-This repo generates the **Microsoft.ReactNative.WinRT** NuGet package for specific versions of React Native Windows. 
+This repo generates the [Microsoft.ReactNative.WinRT NuGet packages](https://www.nuget.org/packages/Microsoft.ReactNative.WinRT) for specific versions of React Native Windows. 
 
 ## Getting started
 
 Refer to the [usage docs](docs/USAGE.md) for instructions on how to use React Native WinRT in your React Native Windows app to call projected WinRT APIs in Javascript.
 
 ### Sample code
 
-See the [sample app](/samples/RNWinRTTestApp/) for an example of using the **Microsoft.ReactNative.WinRT** package to consume WinRT APIs.
+See the [sample app](/samples/RNWinRTTestApp/) for an example of using React Native WinRT to consume WinRT APIs.
+
+<img src="samples/RNWinRTTestApp/images/sample-app.png" width="500">
+
+*Note: This is an example of the sample app. The image is pulled from the user's photo library and will likely be different.*
+
+## Versioning
+
+The versioning scheme for React Native WinRT aligns with versions of React Native for Windows. A new major version of React Native for Windows is not guaranteed to be supported by a mismatched version of React Native WinRT. For example, a React Native for Windows 0.67 app may not be compatible with **Microsoft.ReactNative.WinRT** 0.66.* package versions due to potential breaking changes.
+
+React Native WinRT currently supports the following versions of React Native for Windows: 
+
+- [release/0.66](https://github.com/microsoft/react-native-winrt/tree/release/0.66)
+- [release/0.65](https://github.com/microsoft/react-native-winrt/tree/release/0.65)
+- [release/0.64](https://github.com/microsoft/react-native-winrt/tree/release/0.64)
 
 ## Contributing
 
-This project welcomes contributions and suggestions of all types. See our [Contributor's Guide](/CONTRIBUTING.md) for more information.
+_We want to hear from you!_ File a [new issue](https://github.com/microsoft/react-native-winrt/issues/new) to report a bug, ask a question, or make a suggestion. See our [Contributor's Guide](/CONTRIBUTING.md) for more information.
 
 ## Trademarks
 

docs/USAGE.md

@@ -68,9 +68,9 @@ The following steps demonstrate how to use the Microsoft.ReactNative.WinRT NuGet
 - When running Debug, you may see the error: "ReferenceError: Windows is not defined". The browser debugger is not supported with React Native Windows, so you may need to change this line in `App.cpp`:
 
     ```cpp
-    `InstanceSettings().UseWebDebugger(true);`
+    InstanceSettings().UseWebDebugger(true);
     ```
     to this:
     ```cpp
-    `InstanceSettings().UseWebDebugger(false);`
+    InstanceSettings().UseWebDebugger(false);
     ```

rnwinrt/README

@@ -12,7 +12,7 @@
     <tags>RN WinRT RNW rnwinrt WinMD xlang</tags>
     <copyright>© Microsoft Corporation. All rights reserved.</copyright>
     <license type="file">LICENSE</license>
-    <projectUrl>https://github.com/microsoft/react-native-windows/tree/main/</projectUrl>
+    <projectUrl>https://github.com/microsoft/react-native-winrt</projectUrl>
   </metadata>
   <files>
     <file src="LICENSE"/>
@@ -25,4 +25,4 @@
     <file src="$reactnative_files$\WinRTTurboModule.targets" target="build\native" />
     <file src="$reactnative_files$\WinRTTurboModule.props" target="build\native" />
   </files>
-</package>
+</package>

rnwinrt/nuget/Microsoft.ReactNative.WinRT.nuspec

@@ -1,4 +1,4 @@
-// Copyright (c) Microsoft Corporation. 
+// Copyright (c) Microsoft Corporation.
 // Licensed under the MIT License.
 
 import React from "react";
@@ -10,18 +10,21 @@ import {
     View,
     Text,
     StatusBar,
+    Pressable,
 } from "react-native";
 
 import {
     Colors,
     Header,
 } from "react-native/Libraries/NewAppScreen";
 
+import {showNotification} from './Notifications'
+
 async function updateJumpListAsync(): Promise<void> {
     try {
         const StartScreenApi = Windows.UI.StartScreen;
         const jumplist = await StartScreenApi.JumpList.loadCurrentAsync();
-        
+
         jumplist.systemGroupKind = StartScreenApi.JumpListSystemGroupKind.recent;
 
         const items = jumplist.items;
@@ -97,7 +100,7 @@ async function getPictureThumbnailAsync(): Promise<string> {
 
         const library = StorageApi.KnownFolders.picturesLibrary;
         let files = await library.getFilesAsync();
-        
+
         let file: StorageApi.StorageFile | null = null;
         if (files.size > 0) {
             file = files.getAt(0);
@@ -199,6 +202,27 @@ const App = () => {
                             </Text>
                         </View>
                     </View>
+                    <View style={styles.body}>
+                        <View style={styles.sectionContainer}>
+                            <Text style={styles.sectionTitle}>Windows.UI.Notifications Example</Text>
+                            <View style={{ flexDirection: 'row', flexWrap: 'wrap', alignItems: 'center' }}>
+                                <Text style={[{ paddingRight: 10 }, styles.sectionDescription]}>Click the button to show a notification: </Text>
+                                <Pressable style={styles.sectionDescriptionButton} onPress={() => {
+                                    showNotification({
+                                        template: Windows.UI.Notifications.ToastTemplateType.toastImageAndText01,
+                                        // The template schema can be found at https://docs.microsoft.com/previous-versions/windows/apps/hh761494(v=win.10)
+                                        text: "hello world",
+                                        image: {
+                                            src: "https://microsoft.github.io/react-native-windows/img/header_logo.svg",
+                                            alt: "React logo",
+                                        }
+                                    });
+                                }}>
+                                    <Text style={styles.sectionDescriptionButtonText}>Press</Text>
+                                </Pressable>
+                            </View>
+                        </View>
+                    </View>
                     <View style={styles.body}>
                         <View style={styles.sectionContainer}>
                             <Text style={styles.sectionTitle}>Windows.Storage API + picturesLibrary capability Example</Text>
@@ -241,6 +265,19 @@ const styles = StyleSheet.create({
         fontWeight: "400",
         color: Colors.dark,
     },
+    sectionDescriptionButton: {
+        alignItems: 'center',
+        justifyContent: 'center',
+        paddingVertical: 4,
+        paddingHorizontal: 24,
+        borderRadius: 1,
+        backgroundColor: Colors.light,
+    },
+    sectionDescriptionButtonText: {
+        fontSize: 18,
+        fontWeight: "400",
+        color: Colors.dark,
+    },
     highlight: {
         fontWeight: "700",
     },

samples/RNWinRTTestApp/App.tsx

@@ -0,0 +1,56 @@
+
+const Notifications = Windows.UI.Notifications;
+const ToastTemplateType = Notifications.ToastTemplateType;
+const ToastNotificationManager = Notifications.ToastNotificationManager;
+const ToastNotification = Notifications.ToastNotification;
+
+export function showNotification(notification) {
+  var type = ToastTemplateType.toastText01;
+
+  var obj = {};
+  if (typeof(notification) == 'string') {
+    obj['text'] = notification;
+  } else {
+    obj = notification;
+  }
+
+  if (obj.template != undefined) {
+    type = obj.template;
+  }
+
+  var xml = ToastNotificationManager.getTemplateContent(type);
+  for (var tagName in obj) {
+    var xmlElements = xml.getElementsByTagName(tagName);
+    var value = obj[tagName];
+    if (typeof(value) == 'string') {
+      fillXmlElements(xml, xmlElements, [value]);
+    } else if (Array.isArray(value)) {
+      fillXmlElements(xml, xmlElements, value);
+    } else if (typeof(value) == 'object') {
+      fillXmlElements(xml, xmlElements, [value]);
+    }
+  }
+
+  var toast = new ToastNotification(xml);
+  ToastNotificationManager.createToastNotifier().show(toast);
+}
+
+function fillXmlElements(xml, xmlElements, arr) {
+  var i = 0;
+  for (var arrValue of arr) {
+    var node = xmlElements[i++];
+    if (typeof(arrValue) == 'string') {
+      node.appendChild(xml.createTextNode(arrValue));
+    } else if (typeof(arrValue) == 'object') {
+      for (var attrName in arrValue) {
+        var attr = node.attributes.getNamedItem(attrName);
+        if (!attr) {
+          attr = xml.createAttribute(attrName);
+          node.attributes.setNamedItem(attr);
+        }
+
+        attr.nodeValue = arrValue[attrName];
+      }
+    }
+  }
+}

samples/RNWinRTTestApp/Notifications.js

@@ -7,6 +7,7 @@ The WinRT APIs demonstrated in this sample include:
 - `Windows.Foundation.Uri`
 - `Windows.Storage`
 - `Windows.Foundation.Diagnostics`
+- `Windows.UI.Notifications`
 
 ## Prerequisites
 

samples/RNWinRTTestApp/README.md

@@ -21,7 +21,7 @@
     <CppWinRTRootNamespaceAutoMerge>true</CppWinRTRootNamespaceAutoMerge>
     <CppWinRTGenerateWindowsMetadata>true</CppWinRTGenerateWindowsMetadata>
     <CppWinRTParameters>-base</CppWinRTParameters>
-    <RnWinRTParameters>-include Windows.Foundation -include Windows.UI.StartScreen -include Windows.UI.ViewManagement -include Windows.Storage -include Windows.Security.Cryptography.CryptographicBuffer -include Windows.Security.Cryptography.ICryptographicBufferStatics -include Windows.Security.Cryptography.BinaryStringEncoding</RnWinRTParameters>
+    <RnWinRTParameters>-include Windows.Foundation -include Windows.UI.StartScreen -include Windows.UI.ViewManagement -include Windows.Storage -include Windows.Security.Cryptography.CryptographicBuffer -include Windows.Security.Cryptography.ICryptographicBufferStatics -include Windows.Security.Cryptography.BinaryStringEncoding -include Windows.UI.Notifications -include Windows.Data.Xml.Dom</RnWinRTParameters>
   </PropertyGroup>
   <PropertyGroup Label="ReactNativeWindowsProps">
     <ReactNativeWindowsDir Condition="'$(ReactNativeWindowsDir)' == ''">$([MSBuild]::GetDirectoryNameOfFileAbove($(SolutionDir), 'node_modules\react-native-windows\package.json'))\node_modules\react-native-windows\</ReactNativeWindowsDir>