About

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

HtmlElementPtr, HtmlElementView, HtmlElement

The library provides three main classes for working with HTML elements, all representing a diffrent ownership model:

HtmlElementPtr

HtmlElementView is the base class that provides read and write access to HTML element properties and methods, but does not own anything. Its the same as a C++ * and will not peform any cleanups.

HtmlElementView

HtmlElementView is a derived class from HtmlElementPtr that adds ownership over the event handlers. Upon destructing it will unregister the eventhandlers.

HtmlElement

HtmlElement is a derived class from HtmlElementView that adds ownership over the element istelf. Upon destructing it will unregister the eventhandlers and destroy the element in the DOM.

How to use

Extensive examples can be found in the examples folder, but this is the simplest example:

import Crafter.CppDOM;
using namespace Crafter;

int main(){
    HtmlElementPtr body("body", "Hello World!");
}

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",
            "dependencies": [
                {
                    "path":"https://forgejo.catcrafts.net/Catcrafts/Crafter.CppDOM.git",
                    "configuration":"lib"
                }
            ],
        }
    ]
}

Save and close the file, create a main.cpp and copy the C++ code we wrote above into it.

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

2.4 KiB Raw Blame History