Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

New JS interop #27083

Merged
merged 35 commits into from
Oct 21, 2022
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
35 commits
Select commit Hold shift + click to select a range
2206412
New JS interop
guardrex Sep 23, 2022
bd0c425
Updates
guardrex Sep 26, 2022
af4f6c3
Setup for two classes/two modules
guardrex Sep 26, 2022
25e9650
New section for one module approach
guardrex Sep 26, 2022
a6339d8
Updates
guardrex Sep 26, 2022
a81553f
Rename and collocate the C# classes
guardrex Sep 26, 2022
37f3c82
Updates
guardrex Sep 27, 2022
7397bad
Updates
guardrex Sep 27, 2022
21c7a0c
Updates
guardrex Sep 28, 2022
e1b797a
Updates
guardrex Sep 28, 2022
090159f
Updates
guardrex Sep 28, 2022
590bd65
Update aspnetcore/blazor/javascript-interoperability/import-export-in…
guardrex Sep 28, 2022
d582795
Updates
guardrex Sep 28, 2022
c5154a0
Updates
guardrex Sep 29, 2022
6d5f2fb
Updates
guardrex Sep 29, 2022
afa4377
Updates
guardrex Oct 1, 2022
e100d54
Updates
guardrex Oct 1, 2022
8fa3a09
Updates
guardrex Oct 4, 2022
35ce08a
Updates
guardrex Oct 4, 2022
37fc696
Apply suggestions from code review
guardrex Oct 6, 2022
8778281
Updates
guardrex Oct 11, 2022
d3a1a93
Updates
guardrex Oct 12, 2022
dcb25a0
Updates
guardrex Oct 12, 2022
82bd973
Update aspnetcore/client-side/import-export-interop.md
guardrex Oct 18, 2022
981ccce
Apply suggestions from code review
guardrex Oct 18, 2022
19ba9ba
Updates
guardrex Oct 18, 2022
7d5b15c
Update aspnetcore/blazor/javascript-interoperability/import-export-in…
guardrex Oct 18, 2022
f032b69
Updates
guardrex Oct 18, 2022
7e6b02d
Updates
guardrex Oct 18, 2022
1b89ec8
Apply suggestions from code review
guardrex Oct 20, 2022
10747cd
Updates
guardrex Oct 20, 2022
c499c34
Updates
guardrex Oct 21, 2022
cd7dac8
Updates
guardrex Oct 21, 2022
bae4f5d
Updates
guardrex Oct 21, 2022
d457fe4
Updates
guardrex Oct 21, 2022
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Original file line number Diff line number Diff line change
Expand Up @@ -2135,6 +2135,14 @@ In the preceding example:

[!INCLUDE[](~/blazor/includes/js-interop/6.0/size-limits.md)]

## JavaScript `[JSImport]`/`[JSExport]` interop

*This section applies to Blazor WebAssembly apps.*

As an alternative to interacting with JavaScript (JS) in Blazor WebAssembly apps using Blazor's JS interop mechanism based on the <xref:Microsoft.JSInterop.IJSRuntime> interface, a JS `[JSImport]`/`[JSExport]` interop API is available to apps targeting .NET 7 or later.

For more information, see <xref:blazor/js-interop/import-export-interop>.

## Additional resources

* <xref:blazor/js-interop/call-javascript-from-dotnet>
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -2436,79 +2436,6 @@ For information on using a byte array when calling .NET from JavaScript, see <xr

[!INCLUDE[](~/blazor/includes/js-interop/6.0/size-limits.md)]

## Unmarshalled JavaScript interop

Blazor WebAssembly components may experience poor performance when .NET objects are serialized for JavaScript (JS) interop and either of the following are true:

* A high volume of .NET objects are rapidly serialized. For example, poor performance may result when JS interop calls are made on the basis of moving an input device, such as spinning a mouse wheel.
* Large .NET objects or many .NET objects must be serialized for JS interop. For example, poor performance may result when JS interop calls require serializing dozens of files.

<xref:Microsoft.JSInterop.IJSUnmarshalledObjectReference> represents a reference to an JS object whose functions can be invoked without the overhead of serializing .NET data.

In the following example:

* A [struct](/dotnet/csharp/language-reference/builtin-types/struct) containing a string and an integer is passed unserialized to JS.
* JS functions process the data and return either a boolean or string to the caller.
* A JS string isn't directly convertible into a .NET `string` object. The `unmarshalledFunctionReturnString` function calls `BINDING.js_string_to_mono_string` to manage the conversion of a JS string.

> [!NOTE]
> The following examples aren't typical use cases for this scenario because the [struct](/dotnet/csharp/language-reference/builtin-types/struct) passed to JS doesn't result in poor component performance. The example uses a small object merely to demonstrate the concepts for passing unserialized .NET data.

```javascript
<script>
window.returnObjectReference = () => {
return {
unmarshalledFunctionReturnBoolean: function (fields) {
const name = Blazor.platform.readStringField(fields, 0);
const year = Blazor.platform.readInt32Field(fields, 8);

return name === "Brigadier Alistair Gordon Lethbridge-Stewart" &&
year === 1968;
},
unmarshalledFunctionReturnString: function (fields) {
const name = Blazor.platform.readStringField(fields, 0);
const year = Blazor.platform.readInt32Field(fields, 8);

return BINDING.js_string_to_mono_string(`Hello, ${name} (${year})!`);
}
};
}
</script>
```

[!INCLUDE[](~/blazor/includes/js-location.md)]

> [!WARNING]
> The `js_string_to_mono_string` function name, behavior, and existence is subject to change in a future release of .NET. For example:
>
> * The function is likely to be renamed.
> * The function itself might be removed in favor of automatic conversion of strings by the framework.

`Pages/CallJsExample10.razor`:

:::code language="razor" source="~/../blazor-samples/7.0/BlazorSample_WebAssembly/Pages/call-js-from-dotnet/CallJsExample10.razor":::

If an <xref:Microsoft.JSInterop.IJSUnmarshalledObjectReference> instance isn't disposed in C# code, it can be disposed in JS. The following `dispose` function disposes the object reference when called from JS:

```javascript
window.exampleJSObjectReferenceNotDisposedInCSharp = () => {
return {
dispose: function () {
DotNet.disposeJSObjectReference(this);
},

...
};
}
```

Array types can be converted from JS objects into .NET objects using `js_typed_array_to_array`, but the JS array must be a typed array. Arrays from JS can be read in C# code as a .NET object array (`object[]`).

Other data types, such as string arrays, can be converted but require creating a new Mono array object (`mono_obj_array_new`) and setting its value (`mono_obj_array_set`).

> [!WARNING]
> JS functions provided by the Blazor framework, such as `js_typed_array_to_array`, `mono_obj_array_new`, and `mono_obj_array_set`, are subject to name changes, behavioral changes, or removal in future releases of .NET.

## Stream from .NET to JavaScript

Blazor supports streaming data directly from .NET to JavaScript. Streams are created using a <xref:Microsoft.JSInterop.DotNetStreamReference>.
Expand Down Expand Up @@ -2652,6 +2579,22 @@ longRunningFn: 3
longRunningFn aborted!
```

## JavaScript `[JSImport]`/`[JSExport]` interop

*This section applies to Blazor WebAssembly apps.*

As an alternative to interacting with JavaScript (JS) in Blazor WebAssembly apps using Blazor's JS interop mechanism based on the <xref:Microsoft.JSInterop.IJSRuntime> interface, a JS `[JSImport]`/`[JSExport]` interop API is available to apps targeting .NET 7 or later.

For more information, see <xref:blazor/js-interop/import-export-interop>.

## Unmarshalled JavaScript interop

*This section applies to Blazor WebAssembly apps.*

Unmarshalled interop using the <xref:Microsoft.JSInterop.IJSUnmarshalledRuntime> interface is obsolete and should be replaced with JavaScript `[JSImport]`/`[JSExport]` interop.

For more information, see <xref:blazor/js-interop/import-export-interop>.

## Additional resources

* <xref:blazor/js-interop/call-dotnet-from-javascript>
Expand Down
Loading