Gotrays.WebActuator 0.0.1

dotnet add package Gotrays.WebActuator --version 0.0.1                
NuGet\Install-Package Gotrays.WebActuator -Version 0.0.1                
This command is intended to be used within the Package Manager Console in Visual Studio, as it uses the NuGet module's version of Install-Package.
<PackageReference Include="Gotrays.WebActuator" Version="0.0.1" />                
For projects that support PackageReference, copy this XML node into the project file to reference the package.
paket add Gotrays.WebActuator --version 0.0.1                
#r "nuget: Gotrays.WebActuator, 0.0.1"                
#r directive can be used in F# Interactive and Polyglot Notebooks. Copy this into the interactive tool or source code of the script to reference the package.
// Install Gotrays.WebActuator as a Cake Addin
#addin nuget:?package=Gotrays.WebActuator&version=0.0.1

// Install Gotrays.WebActuator as a Cake Tool
#tool nuget:?package=Gotrays.WebActuator&version=0.0.1                

WebActuator

介绍WebActuator

基于.NET Core WebAssembly实现的在线编译c#的功能。提供了c#的API,也封装了js的API,让js更容易嵌入Web 编译的功能!

使用SDK功能

项目将简单的介绍在JavaScript中使用动态编辑c#的SDK

实现我们需要拉去SDK的代码

git clone https://github.com/239573049/WebActuator.git

然后使用vs打开WebActuator.sln解决方案,

选中WebActuator.WebAssembly项目进行发布

发布以后打开发布的文件夹,打开_framework 文件夹,然后删除文件夹下面的*.gz文件,因为默认使用的br压缩,所以不需要使用*.gz

下面是发布的根目录,我们需要复制除了index.html的文件到我们自己的项目当中

image

嵌入项目截图

image

打开我们的index.html


  <script src="_framework/blazor.webassembly.js" autostart="false"></script>
  <script type="module">
    import { BrotliDecode } from './decode.min.js';
    import * as exportManage from './exportManage.js';
    window.exportManage = exportManage;
    Blazor.start({
      loadBootResource: function (type, name, defaultUri, integrity) {
          if (type !== 'dotnetjs') {
          return (async function () {
            const response = await fetch(defaultUri + '.br', { cache: 'no-cache' });
            if (!response.ok) {
              throw new Error(response.statusText);
            }
            const originalResponseBuffer = await response.arrayBuffer();
            const originalResponseArray = new Int8Array(originalResponseBuffer);
            const decompressedResponseArray = BrotliDecode(originalResponseArray);
            const contentType = type === 
              'dotnetwasm' ? 'application/wasm' : 'application/octet-stream';
            return new Response(decompressedResponseArray, 
              { headers: { 'content-type': contentType } });
          })();
        }
      }
    });
  </script>

将以上代码添加的我们项目的index.html

然后在我们需要实现的界面进行编译初始化

let assemblys=["https://assembly.tokengo.top:8843/System.dll",
      "https://assembly.tokengo.top:8843/System.Buffers.dll",
      "https://assembly.tokengo.top:8843/System.Collections.dll",
      "https://assembly.tokengo.top:8843/System.Core.dll",
      "https://assembly.tokengo.top:8843/System.Linq.Expressions.dll",
      "https://assembly.tokengo.top:8843/System.Linq.Parallel.dll",
      "https://assembly.tokengo.top:8843/mscorlib.dll",
      "https://assembly.tokengo.top:8843/System.Linq.dll",
      "https://assembly.tokengo.top:8843/System.Console.dll",
      "https://assembly.tokengo.top:8843/System.Runtime.dll",
      "https://assembly.tokengo.top:8843/System.Net.Http.dll",
      "https://assembly.tokengo.top:8843/System.Private.CoreLib.dll",
      "https://assembly.tokengo.top:8843/System.Console.dll"]
   await window.exportManage.SetReferences(assemblys);

使用 await window.exportManage.SetReferences(assemblys);提供默认需要编译的程序集

await window.exportManage.SetReferences(assemblys);的代码是在exportManage.js中提供的api

这是用于初始化编译所需要的程序集,基本默认就这些,当然也可以添加其他的程序集,

监听Console输出


window.OnWriteLine = (message: string) => {
            console.log(message);
    }

window.OnDiagnostic = (json: string) => {
		console.log(json);
    }

上面是SDK提供的控制台拦截器,

OnWriteLine是控制台的输出

OnDiagnostic是早编译的错误和日志

创建了俩个监听器然后就可以调用编辑方法了,调用

await window.exportManage.RunSubmission(`Console.WriteLine("hello world");`, false);

执行编译,然后我们就可以在浏览器控制台中看到编译输出了

如果你想要重复写那么多代码可以修改WebActuator.Web项目当中的ClientApp的代码

项目提供了基于monaco实现的简单的编辑器。

APIs列表:

// 获取当前引用
window.exportManage.Using()

// 添加默认引用
window.exportManage.SetUsing(using)
 
 // 删除指定引用
window.exportManage.RemoveUsing(using)

// 清空全局引用
window.exportManage.ClearUsing()

// 获取当前编译的语言版本
window.exportManage.LanguageVersion()

// 修改编译的语言版本
window.exportManage.SetLanguageVersion(languageVersion)

// 获取当前依赖的程序集URL
window.exportManage.References()

// 添加编译依赖的程序集
window.exportManage.SetReferences(references)

// 只编译代码
window.exportManage.TryCompile(source, concurrentBuild)

// 执行编译代码
window.exportManage.RunSubmission(code, concurrentBuild)

以上只是当前版本的APIs,后续还会优化并且更新,打造一个好用方便的在线编译c#代码的编辑器。

结尾

来自token的分享

仓库地址:https://github.com/239573049/WebActuator 欢迎PR和star

技术交流群:737776595

Product Compatible and additional computed target framework versions.
.NET net7.0 is compatible.  net7.0-android was computed.  net7.0-ios was computed.  net7.0-maccatalyst was computed.  net7.0-macos was computed.  net7.0-tvos was computed.  net7.0-windows was computed.  net8.0 was computed.  net8.0-android was computed.  net8.0-browser was computed.  net8.0-ios was computed.  net8.0-maccatalyst was computed.  net8.0-macos was computed.  net8.0-tvos was computed.  net8.0-windows was computed. 
Compatible target framework(s)
Included target framework(s) (in package)
Learn more about Target Frameworks and .NET Standard.

NuGet packages

This package is not used by any NuGet packages.

GitHub repositories

This package is not used by any popular GitHub repositories.