Table of Contents
Note

cstojs-cli 0.1.3 is used.

I assume that the cli installed as a dotnet tool, that way, the cli can be called as "cstojs-cli".

Hello world

First, let's create a folder where the project will be, I called it "HelloWorld_Example". Now, inside that folder, open a terminal and type:

cstojs-cli setup "Output"

The command will create a dotnet project with an "Output" folder as an output for js files.

Folder structure

"Output" - folder where js files will be placed.

"cstojs_options.xml" - various options for a csharptojavascript library.

Now before we start "coding" hello world :) let's create an HTML file inside of "Output", I called "index.html"

<!DOCTYPE html>
<html>

<head>
    <title>Hello, world!</title>
    <script src="./Program.js" type="text/javascript"></script>
</head>

<body>
</body>

</html>

Now in the opened terminal type:

cstojs-cli translate

Once translated, open "index.html" and open a console, you should see a message "Hello, World!"

Folder structure

Now, let's code!

Open "Program.cs" in your favorite ide, delete everything, and add this code.

using CSharpToJavaScript.APIs.JS;
using static CSharpToJavaScript.APIs.JS.Ecma.GlobalObject;

GlobalThis.Window.Document.AddEventListener("DOMContentLoaded", (Event e) =>
{
    HTMLElement body = GlobalThis.Window.Document.Body;

    Element paragraph = GlobalThis.Window.Document.CreateElement("p");
    Text helloWorld = GlobalThis.Window.Document.CreateTextNode("Hello, World!");
    
    paragraph.AppendChild(helloWorld);

    (body as ParentNode).Append(paragraph);
}, true);

Now, let me explain line by line. In the meantime, you can run cstojs-cli translate and see a "Hello, World!" message on a reloaded "index.html".

Folder structure

  1. Using static directive, this is needed if you want (you do!) to use ECMA api/web api:
using CSharpToJavaScript.APIs.JS;
using static CSharpToJavaScript.APIs.JS.Ecma.GlobalObject;
  1. Adding an event listener to make sure the body is loaded before js execution:

GlobalThis.Window.Document.AddEventListener("DOMContentLoaded", (Event e) =>
{
  1. Keeping reference to the body:
{
    HTMLElement body = GlobalThis.Window.Document.Body;
  1. This shows how to create an element and textnode, explore other methods in Document:

Element paragraph = GlobalThis.Window.Document.CreateElement("p");
Text helloWorld = GlobalThis.Window.Document.CreateTextNode("Hello, World!");
  1. AppendChild is easy:

paragraph.AppendChild(helloWorld);
  1. But what about "Append"??? Well, you need to cast a class object to the "ParentNode" interface before you can use methods like "Append" and "QuerySelector". See all methods ParentNode.
Note

As of 0.1.2, explicit cast (ParentNode(body)) is broken, I need to fix it..


    (body as ParentNode).Append(paragraph);
}, true);

Translated js:


globalThis.window.document.addEventListener("DOMContentLoaded", (e) =>
{
    let body = globalThis.window.document.body;

    let paragraph = globalThis.window.document.createElement("p");
    let helloWorld = globalThis.window.document.createTextNode("Hello, World!");
    
    paragraph.appendChild(helloWorld);

    body.append(paragraph);
}, true);

See the full source code: https://github.com/TiLied/CSTOJS_Pages/tree/main/tutorials/HelloWorld_Example

Live example:

Hello world(Class edition)

You may ask, what about more traditional c#, more classical. You can do that!

  1. First, create a folder and run:
cstojs-cli setup "js"

Why "js", why not :)

  1. Copy and paste "index.html" to the "js" folder.

  2. Program.cs is almost the same:

using CSharpToJavaScript.APIs.JS;
using static CSharpToJavaScript.APIs.JS.Ecma.GlobalObject;

namespace HelloWorldClass_Example;

public class Program
{
    public static void Main()
    {
        GlobalThis.Window.Document.AddEventListener("DOMContentLoaded", (Event e) =>
        {
            HTMLElement body = GlobalThis.Window.Document.Body;

            Element paragraph = GlobalThis.Window.Document.CreateElement("p");
            Text helloWorld = GlobalThis.Window.Document.CreateTextNode("Hello, World!");

            paragraph.AppendChild(helloWorld);

            (body as ParentNode).Append(paragraph);
        }, true);
    }
}
  1. Try running cstojs-cli translate and open "index.html". nothing
  2. And... nothing. Well, we need to call a static method "Main" somehow. As of 0.1.2, the only way to call it is to modify "cstojs_options.xml". Open "cstojs_options.xml" and change the content to:
<ProjectOptions>
  <Output Folder="js" />
  <File Source="./Program.cs">
    <Option AddSBAtTheBottom="Program.Main();" />
  </File>
</ProjectOptions>
  1. Now, run cstojs-cli translate again, and here we go "Hello, World!" is showing. See CSTOJSOptions for more options. They can be applied as a global option or local to the file. In this example, the option applied to the "Program.cs" file only.

Translated js:


class Program
{
    static Main()
    {
        globalThis.window.document.addEventListener("DOMContentLoaded", (e) =>
        {
            let body = globalThis.window.document.body;

            let paragraph = globalThis.window.document.createElement("p");
            let helloWorld = globalThis.window.document.createTextNode("Hello, World!");

            paragraph.appendChild(helloWorld);

            body.append(paragraph);
        }, true);
    }
}
Program.Main();

See the full source code: https://github.com/TiLied/CSTOJS_Pages/tree/main/tutorials/HelloWorldClass_Example

Live example:

Edit this page