Skip to content

Commit c2ddedc

Browse files
SimonCroppSimonCropp
authored
add Blazor support (#198)
1 parent b7c8b3d commit c2ddedc

19 files changed

Lines changed: 502 additions & 8 deletions

‎readme.md‎

Lines changed: 65 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -24,8 +24,10 @@ Support is available via a [Tidelift Subscription](https://tidelift.com/subscrip
2424
* [GetTextAsync](#gettextasync)
2525
* [GetText](#gettext)
2626
* [Instance API](#instance-api)
27+
* [Dependency Injection](#dependency-injection)
2728
* [Supported on](#supported-on)
28-
* [Notes on Linux](#notes-on-linux)
29+
* [Blazor WebAssembly](#blazor-webassembly)
30+
* [Linux](#linux)
2931
* [Security contact information](#security-contact-information)<!-- endtoc -->
3032

3133

@@ -95,6 +97,19 @@ clipboard.SetText("Text to place in clipboard");
9597
<!-- endsnippet -->
9698

9799

100+
### Dependency Injection
101+
102+
An instance of `IClipboard` can be injected into `IServiceCollection`:
103+
104+
<!-- snippet: InjectClipboard -->
105+
<a id='snippet-injectclipboard'/></a>
106+
```cs
107+
serviceCollection.InjectClipboard();
108+
```
109+
<sup><a href='/src/BlazorSample/Program.cs#L16-L18' title='File snippet `injectclipboard` was extracted from'>snippet source</a> | <a href='#snippet-injectclipboard' title='Navigate to start of snippet `injectclipboard`'>anchor</a></sup>
110+
<!-- endsnippet -->
111+
112+
98113
## Supported on
99114

100115
* Windows with .NET Framework 4.6.1 and up
@@ -107,9 +122,57 @@ clipboard.SetText("Text to place in clipboard");
107122
* Xamarin.Android 9.0 and up
108123
* Xamarin.iOS 10.0 and up
109124
* Universal Windows Platform version 10.0.16299 and up
125+
* Blazor WebAssembly
126+
127+
128+
## Blazor WebAssembly
129+
130+
Due to the dependency on `JSInterop` the static `ClipboardService` is not supported on Blazor.
131+
132+
Instead inhect an `IClipboard`:
133+
134+
<!-- snippet: BlazorStartup -->
135+
<a id='snippet-blazorstartup'/></a>
136+
```cs
137+
var builder = WebAssemblyHostBuilder.CreateDefault();
138+
var serviceCollection = builder.Services;
139+
serviceCollection.InjectClipboard();
140+
builder.RootComponents.Add<App>("app");
141+
```
142+
<sup><a href='/src/BlazorSample/Program.cs#L13-L20' title='File snippet `blazorstartup` was extracted from'>snippet source</a> | <a href='#snippet-blazorstartup' title='Navigate to start of snippet `blazorstartup`'>anchor</a></sup>
143+
<!-- endsnippet -->
144+
145+
Then consume it:
146+
147+
<!-- snippet: Inject -->
148+
<a id='snippet-inject'/></a>
149+
```cs
150+
public partial class IndexModel :
151+
ComponentBase
152+
{
153+
[Inject]
154+
public IClipboard Clipboard { get; set; }
155+
156+
public string Content { get; set; }
157+
158+
public Task CopyTextToClipboard()
159+
{
160+
return Clipboard.SetTextAsync(Content);
161+
}
162+
163+
public async Task ReadTextFromClipboard()
164+
{
165+
Content = await Clipboard.GetTextAsync();
166+
}
167+
}
168+
```
169+
<sup><a href='/src/BlazorSample/Pages/IndexModel.cs#L9-L28' title='File snippet `inject` was extracted from'>snippet source</a> | <a href='#snippet-inject' title='Navigate to start of snippet `inject`'>anchor</a></sup>
170+
<!-- endsnippet -->
171+
172+
Blazor support requires the browser APIs [clipboard.readText](https://caniuse.com/#feat=mdn-api_clipboard_readtext) and [clipboard.writeText](https://caniuse.com/#feat=mdn-api_clipboard_writetext).
110173

111174

112-
## Notes on Linux
175+
## Linux
113176

114177
Linux uses [xclip](https://github.com/astrand/xclip) to access the clipboard. As such it needs to be installed and callable.
115178

‎readme.source.md‎

Lines changed: 24 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -46,6 +46,13 @@ In adition to the above static API, there is an instance API exposed:
4646
snippet: SetTextInstance
4747

4848

49+
### Dependency Injection
50+
51+
An instance of `IClipboard` can be injected into `IServiceCollection`:
52+
53+
snippet: InjectClipboard
54+
55+
4956
## Supported on
5057

5158
* Windows with .NET Framework 4.6.1 and up
@@ -58,9 +65,25 @@ snippet: SetTextInstance
5865
* Xamarin.Android 9.0 and up
5966
* Xamarin.iOS 10.0 and up
6067
* Universal Windows Platform version 10.0.16299 and up
68+
* Blazor WebAssembly
69+
70+
71+
## Blazor WebAssembly
72+
73+
Due to the dependency on `JSInterop` the static `ClipboardService` is not supported on Blazor.
74+
75+
Instead inhect an `IClipboard`:
76+
77+
snippet: BlazorStartup
78+
79+
Then consume it:
80+
81+
snippet: Inject
82+
83+
Blazor support requires the browser APIs [clipboard.readText](https://caniuse.com/#feat=mdn-api_clipboard_readtext) and [clipboard.writeText](https://caniuse.com/#feat=mdn-api_clipboard_writetext).
6184

6285

63-
## Notes on Linux
86+
## Linux
6487

6588
Linux uses [xclip](https://github.com/astrand/xclip) to access the clipboard. As such it needs to be installed and callable.
6689

‎src/BlazorSample/App.razor‎

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
@using BlazorSample.Shared
2+
<Router AppAssembly="@typeof(Program).Assembly">
3+
<Found Context="routeData">
4+
<RouteView RouteData="@routeData" DefaultLayout="@typeof(MainLayout)" />
5+
</Found>
6+
<NotFound>
7+
<LayoutView Layout="@typeof(MainLayout)">
8+
<p>Sorry, there's nothing at this address.</p>
9+
</LayoutView>
10+
</NotFound>
11+
</Router>

‎src/BlazorSample/BlazorSample.csproj‎

Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
<Project Sdk="Microsoft.NET.Sdk.Web">
2+
3+
<PropertyGroup>
4+
<TargetFramework>netstandard2.1</TargetFramework>
5+
<RazorLangVersion>3.0</RazorLangVersion>
6+
</PropertyGroup>
7+
8+
<ItemGroup>
9+
<PackageReference Include="Fody" Version="6.1.1" PrivateAssets="all" />
10+
<PackageReference Include="Microsoft.AspNetCore.Blazor.HttpClient" Version="3.2.0-preview2.20160.5" />
11+
<PackageReference Include="Microsoft.AspNetCore.Components.WebAssembly" Version="3.2.0" />
12+
<PackageReference Include="Microsoft.AspNetCore.Components.WebAssembly.Build" Version="3.2.0" />
13+
<PackageReference Include="Microsoft.AspNetCore.Components.WebAssembly.DevServer" Version="3.2.0" />
14+
<PackageReference Include="PropertyChanged.Fody" Version="3.2.8" PrivateAssets="all" />
15+
<ProjectReference Include="..\TextCopy\TextCopy.csproj" />
16+
</ItemGroup>
17+
18+
</Project>

‎src/BlazorSample/FodyWeavers.xml‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
<Weavers GenerateXsd="false">
2+
<PropertyChanged />
3+
</Weavers>

‎src/BlazorSample/Pages/Index.razor‎

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
@page "/"
2+
@inherits IndexModel
3+
4+
<div class="card">
5+
<div class="card-body border-dark">
6+
<input @bind="Content" />
7+
<button type="button" class="btn btn-primary" @onclick="CopyTextToClipboard">Copy</button>
8+
<button type="button" class="btn btn-primary" @onclick="ReadTextFromClipboard">Read</button>
9+
</div>
10+
</div>

‎src/BlazorSample/Pages/IndexModel.cs‎

Lines changed: 29 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,29 @@
1+
using System.Threading.Tasks;
2+
using Microsoft.AspNetCore.Components;
3+
using PropertyChanged;
4+
using TextCopy;
5+
6+
namespace BlazorSample
7+
{
8+
[AddINotifyPropertyChangedInterface]
9+
#region Inject
10+
public partial class IndexModel :
11+
ComponentBase
12+
{
13+
[Inject]
14+
public IClipboard Clipboard { get; set; }
15+
16+
public string Content { get; set; }
17+
18+
public Task CopyTextToClipboard()
19+
{
20+
return Clipboard.SetTextAsync(Content);
21+
}
22+
23+
public async Task ReadTextFromClipboard()
24+
{
25+
Content = await Clipboard.GetTextAsync();
26+
}
27+
}
28+
#endregion
29+
}

‎src/BlazorSample/Pages/_ViewImports.razor‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
@layout MainLayout

‎src/BlazorSample/Program.cs‎

Lines changed: 29 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,29 @@
1+
using System;
2+
using System.Net.Http;
3+
using System.Threading.Tasks;
4+
using BlazorSample;
5+
using Microsoft.AspNetCore.Components.WebAssembly.Hosting;
6+
using Microsoft.Extensions.DependencyInjection;
7+
using TextCopy;
8+
9+
public class Program
10+
{
11+
public static Task Main()
12+
{
13+
#region BlazorStartup
14+
var builder = WebAssemblyHostBuilder.CreateDefault();
15+
var serviceCollection = builder.Services;
16+
#region InjectClipboard
17+
serviceCollection.InjectClipboard();
18+
#endregion
19+
builder.RootComponents.Add<App>("app");
20+
#endregion
21+
serviceCollection.AddTransient(
22+
provider => new HttpClient
23+
{
24+
BaseAddress = new Uri(builder.HostEnvironment.BaseAddress)
25+
});
26+
27+
return builder.Build().RunAsync();
28+
}
29+
}

‎src/BlazorSample/Shared/MainLayout.razor‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
@inherits LayoutComponentBase
2+
<div class="main">
3+
<div class="content px-4">
4+
@Body
5+
</div>
6+
</div>

0 commit comments

Comments
 (0)