VB.NET (Wasm)

VB.NET is a multi-paradigm, object-oriented programming language, implemented on .NET, developed by Microsoft.

In LiveCodes, VB.NET runs in the browser using the Roslyn VB compiler (Microsoft.CodeAnalysis.VisualBasic) compiled to WebAssembly, running on the .NET WebAssembly runtime.

Usage

Demo:

show code

JS

import { createPlayground } from 'livecodes';

const options = {
  "config": {
    "activeEditor": "script",
    "script": {
      "language": "vb-wasm",
      "content": "Imports System\n\nModule Program\n    Class Greeter\n        Private ReadOnly name As String\n\n        Public Sub New(name As String)\n            Me.name = name\n        End Sub\n\n        Public Function Greet() As String\n            Return $\"Hello, {name}!\"\n        End Function\n    End Class\n\n    Sub Main()\n        Dim names As String() = {\"VB.NET\", \"WebAssembly\"}\n\n        For Each name In names\n            Dim greeter As New Greeter(name)\n            Console.WriteLine(greeter.Greet())\n        Next\n    End Sub\nEnd Module"
    },
    "mode": "simple",
    "editor": "auto",
    "tools": {
      "status": "full"
    }
  }
};
createPlayground('#container', options);

TS

import { createPlayground, type EmbedOptions } from 'livecodes';

const options: EmbedOptions = {
  "config": {
    "activeEditor": "script",
    "script": {
      "language": "vb-wasm",
      "content": "Imports System\n\nModule Program\n    Class Greeter\n        Private ReadOnly name As String\n\n        Public Sub New(name As String)\n            Me.name = name\n        End Sub\n\n        Public Function Greet() As String\n            Return $\"Hello, {name}!\"\n        End Function\n    End Class\n\n    Sub Main()\n        Dim names As String() = {\"VB.NET\", \"WebAssembly\"}\n\n        For Each name In names\n            Dim greeter As New Greeter(name)\n            Console.WriteLine(greeter.Greet())\n        Next\n    End Sub\nEnd Module"
    },
    "mode": "simple",
    "editor": "auto",
    "tools": {
      "status": "full"
    }
  }
};
createPlayground('#container', options);

React

import LiveCodes from 'livecodes/react';

export default function App() {
  const options = {
  "config": {
    "activeEditor": "script",
    "script": {
      "language": "vb-wasm",
      "content": "Imports System\n\nModule Program\n    Class Greeter\n        Private ReadOnly name As String\n\n        Public Sub New(name As String)\n            Me.name = name\n        End Sub\n\n        Public Function Greet() As String\n            Return $\"Hello, {name}!\"\n        End Function\n    End Class\n\n    Sub Main()\n        Dim names As String() = {\"VB.NET\", \"WebAssembly\"}\n\n        For Each name In names\n            Dim greeter As New Greeter(name)\n            Console.WriteLine(greeter.Greet())\n        Next\n    End Sub\nEnd Module"
    },
    "mode": "simple",
    "editor": "auto",
    "tools": {
      "status": "full"
    }
  }
};
  return (<LiveCodes {...options} />);
}

Vue

<script setup>
import LiveCodes from "livecodes/vue";

const options = {
  "config": {
    "activeEditor": "script",
    "script": {
      "language": "vb-wasm",
      "content": "Imports System\n\nModule Program\n    Class Greeter\n        Private ReadOnly name As String\n\n        Public Sub New(name As String)\n            Me.name = name\n        End Sub\n\n        Public Function Greet() As String\n            Return $\"Hello, {name}!\"\n        End Function\n    End Class\n\n    Sub Main()\n        Dim names As String() = {\"VB.NET\", \"WebAssembly\"}\n\n        For Each name In names\n            Dim greeter As New Greeter(name)\n            Console.WriteLine(greeter.Greet())\n        Next\n    End Sub\nEnd Module"
    },
    "mode": "simple",
    "editor": "auto",
    "tools": {
      "status": "full"
    }
  }
};
</script>
<template>
  <LiveCodes v-bind="options" />
</template>

Svelte

<script>
import LiveCodes from 'livecodes/svelte';

const options = {
  "config": {
    "activeEditor": "script",
    "script": {
      "language": "vb-wasm",
      "content": "Imports System\n\nModule Program\n    Class Greeter\n        Private ReadOnly name As String\n\n        Public Sub New(name As String)\n            Me.name = name\n        End Sub\n\n        Public Function Greet() As String\n            Return $\"Hello, {name}!\"\n        End Function\n    End Class\n\n    Sub Main()\n        Dim names As String() = {\"VB.NET\", \"WebAssembly\"}\n\n        For Each name In names\n            Dim greeter As New Greeter(name)\n            Console.WriteLine(greeter.Greet())\n        Next\n    End Sub\nEnd Module"
    },
    "mode": "simple",
    "editor": "auto",
    "tools": {
      "status": "full"
    }
  }
};
</script>

<LiveCodes {...options} />

Solid

import LiveCodes from 'livecodes/solid';

export default function App() {
  const options = {
  "config": {
    "activeEditor": "script",
    "script": {
      "language": "vb-wasm",
      "content": "Imports System\n\nModule Program\n    Class Greeter\n        Private ReadOnly name As String\n\n        Public Sub New(name As String)\n            Me.name = name\n        End Sub\n\n        Public Function Greet() As String\n            Return $\"Hello, {name}!\"\n        End Function\n    End Class\n\n    Sub Main()\n        Dim names As String() = {\"VB.NET\", \"WebAssembly\"}\n\n        For Each name In names\n            Dim greeter As New Greeter(name)\n            Console.WriteLine(greeter.Greet())\n        Next\n    End Sub\nEnd Module"
    },
    "mode": "simple",
    "editor": "auto",
    "tools": {
      "status": "full"
    }
  }
};
  return (<LiveCodes {...options} />);
}

Preact

import LiveCodes from 'livecodes/preact';

export default function App() {
  const options = {
  "config": {
    "activeEditor": "script",
    "script": {
      "language": "vb-wasm",
      "content": "Imports System\n\nModule Program\n    Class Greeter\n        Private ReadOnly name As String\n\n        Public Sub New(name As String)\n            Me.name = name\n        End Sub\n\n        Public Function Greet() As String\n            Return $\"Hello, {name}!\"\n        End Function\n    End Class\n\n    Sub Main()\n        Dim names As String() = {\"VB.NET\", \"WebAssembly\"}\n\n        For Each name In names\n            Dim greeter As New Greeter(name)\n            Console.WriteLine(greeter.Greet())\n        Next\n    End Sub\nEnd Module"
    },
    "mode": "simple",
    "editor": "auto",
    "tools": {
      "status": "full"
    }
  }
};
  return (<LiveCodes {...options} />);
}

Web Components

<live-codes></live-codes>

<script type="module">
  import "livecodes/web-components";

  const playground = document.querySelector("live-codes");
  playground.config = {
    "activeEditor": "script",
    "script": {
      "language": "vb-wasm",
      "content": "Imports System\n\nModule Program\n    Class Greeter\n        Private ReadOnly name As String\n\n        Public Sub New(name As String)\n            Me.name = name\n        End Sub\n\n        Public Function Greet() As String\n            Return $\"Hello, {name}!\"\n        End Function\n    End Class\n\n    Sub Main()\n        Dim names As String() = {\"VB.NET\", \"WebAssembly\"}\n\n        For Each name In names\n            Dim greeter As New Greeter(name)\n            Console.WriteLine(greeter.Greet())\n        Next\n    End Sub\nEnd Module"
    },
    "mode": "simple",
    "editor": "auto",
    "tools": {
      "status": "full"
    }
  };
</script>

Communication with JavaScript

The VB.NET code runs in the context of the result page. A few helper properties and methods are available in the browser global livecodes.vb object:

• livecodes.vb.input: The initial standard input passed to the VB.NET code.
• livecodes.vb.loaded: A promise that resolves when the VB.NET environment is fully loaded. Other helpers should be used after this promise resolves.
• livecodes.vb.output: The standard output from the VB.NET code execution.
• livecodes.vb.run: A function that runs the VB.NET code with new input. This function takes a string as input and returns a promise that resolves with an object containing the output, error, and exitCode properties.

Example:

show code

JS

import { createPlayground } from 'livecodes';

const options = {
  "template": "vb-wasm",
  "params": {
    "activeEditor": "markup"
  }
};
createPlayground('#container', options);

TS

import { createPlayground, type EmbedOptions } from 'livecodes';

const options: EmbedOptions = {
  "template": "vb-wasm",
  "params": {
    "activeEditor": "markup"
  }
};
createPlayground('#container', options);

React

import LiveCodes from 'livecodes/react';

export default function App() {
  const options = {
  "template": "vb-wasm",
  "params": {
    "activeEditor": "markup"
  }
};
  return (<LiveCodes {...options} />);
}

Vue

<script setup>
import LiveCodes from "livecodes/vue";

const options = {
  "template": "vb-wasm",
  "params": {
    "activeEditor": "markup"
  }
};
</script>
<template>
  <LiveCodes v-bind="options" />
</template>

Svelte

<script>
import LiveCodes from 'livecodes/svelte';

const options = {
  "template": "vb-wasm",
  "params": {
    "activeEditor": "markup"
  }
};
</script>

<LiveCodes {...options} />

Solid

import LiveCodes from 'livecodes/solid';

export default function App() {
  const options = {
  "template": "vb-wasm",
  "params": {
    "activeEditor": "markup"
  }
};
  return (<LiveCodes {...options} />);
}

Preact

import LiveCodes from 'livecodes/preact';

export default function App() {
  const options = {
  "template": "vb-wasm",
  "params": {
    "activeEditor": "markup"
  }
};
  return (<LiveCodes {...options} />);
}

Web Components

<live-codes
  template="vb-wasm"></live-codes>

<script type="module">
  import "livecodes/web-components";

  const playground = document.querySelector("live-codes");
  playground.params = {
    "activeEditor": "markup"
  };
</script>

Language Info

Name

vb-wasm

Aliases / Extensions

vb, vbnet, wasm.vb, vb-wasm

Editor

script

Compiler

The Roslyn VB compiler (Microsoft.CodeAnalysis.VisualBasic) and the BCL reference assemblies, compiled to WebAssembly and running on the .NET WebAssembly runtime.

Version

Visual Basic 17.13, running on .NET 10

Live Reload

By default, new code changes are sent to the result page for re-evaluation without a full page reload, avoiding the need to reinitialize the VB.NET environment. This behavior can be disabled by adding the code comment ' __livecodes_reload__ to the VB.NET code, which forces a full page reload.

This comment can be added in the hiddenContent property of the editor for embedded playgrounds.

Example Usage

Imports System

Module Program
    Sub Main()
        Console.WriteLine("Hello, LiveCodes VB.NET!")
    End Sub
End Module

Starter Template

https://livecodes.io/?template=vb-wasm

Links

• Visual Basic
• Roslyn
• .NET WebAssembly runtime