About

Crafter.CppDOM is a C++ library that exposes the browser DOM api's to C++ WebAssembly.

HtmlElement vs HtmlElementView

The library provides two main classes for working with HTML elements:

HtmlElementView

HtmlElementView is a base class that provides read and write access to HTML element properties and methods, but does not own the underlying DOM element. It's designed to be used when you want to interact with existing elements in the DOM without managing their lifecycle.

Key characteristics:

• Provides access to element properties and methods like SetInnerHTML, SetStyle, AddClass, etc.
• Supports event handling through various Add*Listener methods
• Does not delete the underlying DOM element when destroyed
• Used when you're working with elements that already exist in the DOM

HtmlElement

HtmlElement is a derived class from HtmlElementView that adds ownership semantics. It creates a new DOM element when instantiated and properly manages its lifecycle.

Key characteristics:

• Inherits all functionality from HtmlElementView
• Creates and owns a new DOM element when constructed
• Automatically deletes the DOM element when the HtmlElement object is destroyed
• Used when you want to create new elements programmatically

How to use

Please view the examples folder, this is a snippit from the HelloElement example:

import Crafter.CppDOM;
using namespace Crafter::CppDOM;

int main(){
    HtmlElementView body("body");
    body.SetInnerHTML("Hello World!");
}

You can also view the wiki for more detailed information.

It is highly recommended to use this with Crafter.Build, but it is not strictly required if the same way of injecting the env is followed. The following instructions will be for Crafter.Build.

Quickstart

create a project.json in an empty folder, open it in your preferred text editor. Create a basic project file, that describes your web project.

{
    "name": "main",
    "configurations": [
        {
            "name": "executable",
            "implementations": ["main"],
            "target": "wasm32-wasi",
            "debug" : true,
            "dependencies": [
                {
                    "path":"https://forgejo.catcrafts.net/Catcrafts/Crafter.CppDOM.git",
                    "configuration":"lib-debug"
                }
            ],
        }
    ]
}

Save and close the file, create a main.cpp

import Crafter.CppDOM;
using namespace Crafter::CppDOM;

int main(){
    HtmlElementView body("body");
    body.SetInnerHTML("Hello World!");
}

Save and close, then run crafter-build build executable && caddy file-server --listen :8080 --root bin/executable. if you have caddy installed, if not use your favorite static file server instead. Now you can open the browser at http://localhost:8080 and Hello World! will appear in the browser.

This sample can also be viewed in the HelloElement example