1
- ## C# Tooling
1
+ # C# Tooling
2
2
3
3
## Building a Component with ` componentize-dotnet `
4
4
@@ -115,10 +115,12 @@ The previous example uses a WIT file that exports a function. However, to use yo
115
115
another component, it must export an interface. That being said, you rarely find WIT that does not
116
116
contain an interface. (Most WITs you'll see in the wild do use interfaces; we've been simplifying by
117
117
exporting a function.) Let's expand our ` example ` world to export an interface rather than directly
118
- export the function.
118
+ export the function. We are also adding the ` hostapp ` world to our WIT file which we will implement
119
+ in [ the next section] ( #building-a-component-that-imports-an-interface ) to demonstrate how to build a
120
+ component that * imports* an interface.
119
121
120
122
``` wit
121
- // add-interface .wit
123
+ // add.wit
122
124
package example:component;
123
125
124
126
interface add {
@@ -165,12 +167,17 @@ The component will be available at `bin/Debug/net9.0/wasi-wasm/native/adder.wasm
165
167
166
168
## Building a component that imports an interface
167
169
168
- So far, we've been dealing with class libraries. Now we will be taking the adder component and executing it from an executable WebAssembly component.
170
+ So far, we've been dealing with library components. Now we will be creating a command component that
171
+ implements the ` hostapp ` world. This component will import the ` add ` interface that is exported from
172
+ our ` adder ` component and call the ` add ` function. We will later compose this command component with
173
+ the ` adder ` library component we just built.
174
+
175
+ Now we will be taking the ` adder ` component and executing it from another WebAssembly component.
169
176
` dotnet new console ` creates a new project that creates an executable.
170
177
171
178
``` sh
172
- dotnet new console -o hello-wasm
173
- cd hello-wasm
179
+ dotnet new console -o host-app
180
+ cd host-app
174
181
```
175
182
176
183
The ` componentize-dotnet ` package depends on the ` NativeAOT-LLVM ` package, which resides at the
@@ -214,7 +221,7 @@ In the .csproj project file, add the following to the `<PropertyGroup>`:
214
221
Copy the same WIT file as before into your project:
215
222
216
223
``` wit
217
- // add-interface .wit
224
+ // add.wit
218
225
package example:component;
219
226
220
227
interface add {
@@ -242,9 +249,11 @@ Notice how the `World` changed from `example` to `hostapp`. The previous example
242
249
implementing the class library for this WIT file - the ` export ` functions. Now we'll be focusing on
243
250
the executable side of the application - the ` hostapp ` world.
244
251
245
- Modify Program.cs to look like this:
252
+ Modify ` Program.cs ` to look like this:
246
253
247
254
``` csharp
255
+ // Pull in all imports of the `hostapp` world, namely the `add` interface.
256
+ // example.component refers to the package name defined in the WIT file.
248
257
using HostappWorld .wit .imports .example .component ;
249
258
250
259
var left = 1 ;
@@ -253,26 +262,29 @@ var result = AddInterop.Add(left, right);
253
262
Console .WriteLine ($" {left } + {right } = {result }" );
254
263
```
255
264
256
- Once again, compile your executable with ` dotnet build ` :
265
+ Once again, compile your component with ` dotnet build ` :
257
266
258
267
``` sh
259
268
$ dotnet build
260
269
Restore complete (0.4s)
261
270
You are using a preview version of .NET. See: https://aka.ms/dotnet-support-policy
262
- hello-wasm succeeded (1.1s) → bin/Debug/net9.0/wasi-wasm/hello-wasm .dll
271
+ host-app succeeded (1.1s) → bin/Debug/net9.0/wasi-wasm/host-app .dll
263
272
264
273
Build succeeded in 2.5s
265
274
```
266
275
267
276
At this point, you'll have two Webassembly components:
268
277
269
- 1 . A component that implements the ` example ` world
270
- 2 . A component that calls ` add ` from within the ` hostapp ` world.
278
+ 1 . A component that implements the ` example ` world.
279
+ 2 . A component that implements the ` hostapp ` world.
271
280
272
- Since the ` hello-wasm ` component is no longer a self-contained application, it needs to be composed the first component that implements the ` add ` function. You can compose your ` hello-wasm ` component with your ` adder ` component by running [ ` wac plug ` ] ( https://github.com/bytecodealliance/wac ) :
281
+ Since the ` host-app ` component depends on the ` add ` function which is defined in the ` example `
282
+ world, it needs to be composed the first component. You can
283
+ compose your ` host-app ` component with your ` adder ` component by running [ `wac
284
+ plug`] ( https://github.com/bytecodealliance/wac ) :
273
285
274
286
``` sh
275
- wac plug bin/Debug/net9.0/wasi-wasm/native/hello-wasm .wasm --plug ../adder/bin/Debug/net9.0/wasi-wasm/native/adder.wasm -o main.wasm
287
+ wac plug bin/Debug/net9.0/wasi-wasm/native/host-app .wasm --plug ../adder/bin/Debug/net9.0/wasi-wasm/native/adder.wasm -o main.wasm
276
288
```
277
289
278
290
Then you can run the composed component:
0 commit comments