added view

README.md

@@ -4,6 +4,28 @@
 
 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:
 
@@ -12,7 +34,7 @@ import Crafter.CppDOM;
 using namespace Crafter::CppDOM;
 
 int main(){
-    HtmlElement body("body");
+    HtmlElementView body("body");
     body.SetInnerHTML("Hello World!");
 }
 ```
@@ -49,7 +71,7 @@ import Crafter.CppDOM;
 using namespace Crafter::CppDOM;
 
 int main(){
-    HtmlElement body("body");
+    HtmlElementView body("body");
     body.SetInnerHTML("Hello World!");
 }
 ```

additional/env.js

@@ -624,6 +624,12 @@ let env = {
         const cls = decoder.decode(new Int8Array(window.crafter_webbuild_wasi.instance.exports.memory.buffer, className, classNameLength));
         return jsmemory.get(ptr).classList.contains(cls);
     },
+    deleteElement: function(ptr) {
+        const element = jsmemory.get(ptr);
+        if(element && element.parentNode) {
+            element.parentNode.removeChild(element);
+        }
+    },
     addClickListener: addClickListener,
     removeClickListener: removeClickListener,
     addMouseOverListener: addMouseOverListener,

examples/AllEventHandling/main.cpp

@@ -8,7 +8,7 @@ using namespace Crafter;
 import std;
 
 // Create the main container element
-HtmlElement* body = new HtmlElement("body", "<div id='container'>"
+HtmlElementView* body = new HtmlElementView("body", "<div id='container'>"
     "<h1>Enhanced Event Handling Demo</h1>"
     "<div id='events-container'>"
         "<div class='event-section'>"
@@ -58,22 +58,22 @@ HtmlElement* body = new HtmlElement("body", "<div id='container'>"
     "</div>");
 
 // Get references to elements
-HtmlElement* mouseButton = new HtmlElement("mouseButton");
+HtmlElementView* mouseButton = new HtmlElementView("mouseButton");
-HtmlElement* mouseOutput = new HtmlElement("mouseOutput");
+HtmlElementView* mouseOutput = new HtmlElementView("mouseOutput");
-HtmlElement* keyInput = new HtmlElement("keyInput");
+HtmlElementView* keyInput = new HtmlElementView("keyInput");
-HtmlElement* keyOutput = new HtmlElement("keyOutput");
+HtmlElementView* keyOutput = new HtmlElementView("keyOutput");
-HtmlElement* focusInput = new HtmlElement("focusInput");
+HtmlElementView* focusInput = new HtmlElementView("focusInput");
-HtmlElement* focusOutput = new HtmlElement("focusOutput");
+HtmlElementView* focusOutput = new HtmlElementView("focusOutput");
-HtmlElement* formInput = new HtmlElement("formInput");
+HtmlElementView* formInput = new HtmlElementView("formInput");
-HtmlElement* formSelect = new HtmlElement("formSelect");
+HtmlElementView* formSelect = new HtmlElementView("formSelect");
-HtmlElement* formElement = new HtmlElement("formElement");
+HtmlElementView* formElement = new HtmlElementView("formElement");
-HtmlElement* formOutput = new HtmlElement("formOutput");
+HtmlElementView* formOutput = new HtmlElementView("formOutput");
-HtmlElement* windowOutput = new HtmlElement("windowOutput");
+HtmlElementView* windowOutput = new HtmlElementView("windowOutput");
-HtmlElement* dragSource = new HtmlElement("dragSource");
+HtmlElementView* dragSource = new HtmlElementView("dragSource");
-HtmlElement* dropTarget = new HtmlElement("dropTarget");
+HtmlElementView* dropTarget = new HtmlElementView("dropTarget");
-HtmlElement* dragOutput = new HtmlElement("dragOutput");
+HtmlElementView* dragOutput = new HtmlElementView("dragOutput");
-HtmlElement* wheelContainer = new HtmlElement("wheelContainer");
+HtmlElementView* wheelContainer = new HtmlElementView("wheelContainer");
-HtmlElement* wheelOutput = new HtmlElement("wheelOutput");
+HtmlElementView* wheelOutput = new HtmlElementView("wheelOutput");
 
 int main() {
     // Mouse Events

examples/HelloElement/README.md

@@ -15,7 +15,7 @@ import Crafter.CppDOM;
 using namespace Crafter::CppDOM;
 
 int main(){
-    HtmlElement body("body");
+    HtmlElementView body("body");
     body.SetInnerHTML("Hello World!");
 }
 ```

examples/HelloElement/main.cpp

@@ -2,7 +2,7 @@ import Crafter.CppDOM;
 using namespace Crafter;
 
 int main(){
-    HtmlElement body("body");
+    HtmlElementView body("body");
     body.SetInnerHTML("Hello World!");
-    //No need to call FreeJs, this is done in the destructor of HtmlElement.
+    //No need to call FreeJs, this is done in the destructor of HtmlElementView.
 }

examples/InteractiveElement/main.cpp

@@ -2,15 +2,15 @@ import Crafter.CppDOM;
 import std;
 using namespace Crafter;
 
-HtmlElement body("body","<h1>Interactive Element Demo</h1>"
+HtmlElementView body("body","<h1>Interactive Element Demo</h1>"
                        "<button id='myButton'>Click Me!</button>"
                        "<p id='output'>Click the button above</p>");
-HtmlElement* button = new HtmlElement("myButton"); //prevent destruction
+HtmlElementView* button = new HtmlElement("myButton"); //prevent destruction
 
 
 int main() {
     button->AddClickListener([](Crafter::MouseEvent event){
-        auto output = HtmlElement("output");
+        auto output = HtmlElementView("output");
         output.SetInnerHTML("Button was clicked at (" + std::to_string(event.clientX) + ", " + std::to_string(event.clientY) + ")!");
     });
 }

examples/StyleExample/main.cpp

@@ -2,9 +2,9 @@ import Crafter.CppDOM;
 using namespace Crafter;
 
 int main(){
-    HtmlElement body("body","<div id=\"myDiv\"></div>");
+    HtmlElementView body("body","<div id=\"myDiv\"></div>");
     // Create a div element
-    HtmlElement div("myDiv");
+    HtmlElementView div("myDiv");
     
     // Set some initial content
     div.SetInnerHTML("<p>This is a styled paragraph</p>");

implementations/Crafter.CppDOM-HtmlElement.cpp

@@ -26,43 +26,43 @@ import :BindingsImport;
 import :EventTypes;
 
 namespace Crafter {
-    HtmlElement::HtmlElement(const std::string_view id): ptr(CppDOMBindings::GetElementById(id)) {
+    HtmlElementView::HtmlElementView(const std::string_view id): ptr(CppDOMBindings::GetElementById(id)) {
         
     }
     
-    HtmlElement::HtmlElement(const std::string_view id, const std::string_view html): ptr(CppDOMBindings::GetElementById(id)) {
+    HtmlElementView::HtmlElementView(const std::string_view id, const std::string_view html): ptr(CppDOMBindings::GetElementById(id)) {
         CppDOMBindings::SetInnerHTML(ptr, html);
     }
     
-    void HtmlElement::SetInnerHTML(const std::string_view html) {
+    void HtmlElementView::SetInnerHTML(const std::string_view html) {
         CppDOMBindings::SetInnerHTML(ptr, html);
     }
     
-    void HtmlElement::SetStyle(const std::string_view style) {
+    void HtmlElementView::SetStyle(const std::string_view style) {
         CppDOMBindings::SetStyle(ptr, style);
     }
     
-    void HtmlElement::SetProperty(const std::string_view property, const std::string_view value) {
+    void HtmlElementView::SetProperty(const std::string_view property, const std::string_view value) {
         CppDOMBindings::SetProperty(ptr, property, value);
     }
     
-    void HtmlElement::AddClass(const std::string_view className) {
+    void HtmlElementView::AddClass(const std::string_view className) {
         CppDOMBindings::AddClass(ptr, className);
     }
     
-    void HtmlElement::RemoveClass(const std::string_view className) {
+    void HtmlElementView::RemoveClass(const std::string_view className) {
         CppDOMBindings::RemoveClass(ptr, className);
     }
     
-    void HtmlElement::ToggleClass(const std::string_view className) {
+    void HtmlElementView::ToggleClass(const std::string_view className) {
         CppDOMBindings::ToggleClass(ptr, className);
     }
     
-    bool HtmlElement::HasClass(const std::string_view className) {
+    bool HtmlElementView::HasClass(const std::string_view className) {
         return CppDOMBindings::HasClass(ptr, className);
     }
     
-    std::int32_t HtmlElement::AddClickListener(std::function<void(Crafter::MouseEvent)> callback) {
+    std::int32_t HtmlElementView::AddClickListener(std::function<void(Crafter::MouseEvent)> callback) {
         std::int32_t id = CppDOMBindings::clickHandlerMaxId++;
         clickHandlers.push_back(id);
         CppDOMBindings::clickHandlers->insert({id, callback});
@@ -70,13 +70,13 @@ namespace Crafter {
         return id;
     }
     
-    void HtmlElement::RemoveClickListener(std::int32_t id) {
+    void HtmlElementView::RemoveClickListener(std::int32_t id) {
         clickHandlers.erase(std::remove(clickHandlers.begin(), clickHandlers.end(), id), clickHandlers.end());
         CppDOMBindings::clickHandlers->erase(id);
         CppDOMBindings::RemoveClickListener(ptr, id);
     }
     
-    std::int32_t HtmlElement::AddMouseOverListener(std::function<void(Crafter::MouseEvent)> callback) {
+    std::int32_t HtmlElementView::AddMouseOverListener(std::function<void(Crafter::MouseEvent)> callback) {
         std::int32_t id = CppDOMBindings::mouseOverHandlerMaxId++;
         mouseOverHandlers.push_back(id);
         CppDOMBindings::mouseOverHandlers->insert({id, callback});
@@ -84,13 +84,13 @@ namespace Crafter {
         return id;
     }
     
-    void HtmlElement::RemoveMouseOverListener(std::int32_t id) {
+    void HtmlElementView::RemoveMouseOverListener(std::int32_t id) {
         mouseOverHandlers.erase(std::remove(mouseOverHandlers.begin(), mouseOverHandlers.end(), id), mouseOverHandlers.end());
         CppDOMBindings::mouseOverHandlers->erase(id);
         CppDOMBindings::RemoveMouseOverListener(ptr, id);
     }
     
-    std::int32_t HtmlElement::AddMouseOutListener(std::function<void(Crafter::MouseEvent)> callback) {
+    std::int32_t HtmlElementView::AddMouseOutListener(std::function<void(Crafter::MouseEvent)> callback) {
         std::int32_t id = CppDOMBindings::mouseOutHandlerMaxId++;
         mouseOutHandlers.push_back(id);
         CppDOMBindings::mouseOutHandlers->insert({id, callback});
@@ -98,13 +98,13 @@ namespace Crafter {
         return id;
     }
     
-    void HtmlElement::RemoveMouseOutListener(std::int32_t id) {
+    void HtmlElementView::RemoveMouseOutListener(std::int32_t id) {
         mouseOutHandlers.erase(std::remove(mouseOutHandlers.begin(), mouseOutHandlers.end(), id), mouseOutHandlers.end());
         CppDOMBindings::mouseOutHandlers->erase(id);
         CppDOMBindings::RemoveMouseOutListener(ptr, id);
     }
     
-    std::int32_t HtmlElement::AddMouseMoveListener(std::function<void(Crafter::MouseEvent)> callback) {
+    std::int32_t HtmlElementView::AddMouseMoveListener(std::function<void(Crafter::MouseEvent)> callback) {
         std::int32_t id = CppDOMBindings::mouseMoveHandlerMaxId++;
         mouseMoveHandlers.push_back(id);
         CppDOMBindings::mouseMoveHandlers->insert({id, callback});
@@ -112,13 +112,13 @@ namespace Crafter {
         return id;
     }
     
-    void HtmlElement::RemoveMouseMoveListener(std::int32_t id) {
+    void HtmlElementView::RemoveMouseMoveListener(std::int32_t id) {
         mouseMoveHandlers.erase(std::remove(mouseMoveHandlers.begin(), mouseMoveHandlers.end(), id), mouseMoveHandlers.end());
         CppDOMBindings::mouseMoveHandlers->erase(id);
         CppDOMBindings::RemoveMouseMoveListener(ptr, id);
     }
     
-    std::int32_t HtmlElement::AddMouseDownListener(std::function<void(Crafter::MouseEvent)> callback) {
+    std::int32_t HtmlElementView::AddMouseDownListener(std::function<void(Crafter::MouseEvent)> callback) {
         std::int32_t id = CppDOMBindings::mouseDownHandlerMaxId++;
         mouseDownHandlers.push_back(id);
         CppDOMBindings::mouseDownHandlers->insert({id, callback});
@@ -126,13 +126,13 @@ namespace Crafter {
         return id;
     }
     
-    void HtmlElement::RemoveMouseDownListener(std::int32_t id) {
+    void HtmlElementView::RemoveMouseDownListener(std::int32_t id) {
         mouseDownHandlers.erase(std::remove(mouseDownHandlers.begin(), mouseDownHandlers.end(), id), mouseDownHandlers.end());
         CppDOMBindings::mouseDownHandlers->erase(id);
         CppDOMBindings::RemoveMouseDownListener(ptr, id);
     }
     
-    std::int32_t HtmlElement::AddMouseUpListener(std::function<void(Crafter::MouseEvent)> callback) {
+    std::int32_t HtmlElementView::AddMouseUpListener(std::function<void(Crafter::MouseEvent)> callback) {
         std::int32_t id = CppDOMBindings::mouseUpHandlerMaxId++;
         mouseUpHandlers.push_back(id);
         CppDOMBindings::mouseUpHandlers->insert({id, callback});
@@ -140,13 +140,13 @@ namespace Crafter {
         return id;
     }
     
-    void HtmlElement::RemoveMouseUpListener(std::int32_t id) {
+    void HtmlElementView::RemoveMouseUpListener(std::int32_t id) {
         mouseUpHandlers.erase(std::remove(mouseUpHandlers.begin(), mouseUpHandlers.end(), id), mouseUpHandlers.end());
         CppDOMBindings::mouseUpHandlers->erase(id);
         CppDOMBindings::RemoveMouseUpListener(ptr, id);
     }
     
-    std::int32_t HtmlElement::AddFocusListener(std::function<void(Crafter::FocusEvent)> callback) {
+    std::int32_t HtmlElementView::AddFocusListener(std::function<void(Crafter::FocusEvent)> callback) {
         std::int32_t id = CppDOMBindings::focusHandlerMaxId++;
         focusHandlers.push_back(id);
         CppDOMBindings::focusHandlers->insert({id, callback});
@@ -154,13 +154,13 @@ namespace Crafter {
         return id;
     }
     
-    void HtmlElement::RemoveFocusListener(std::int32_t id) {
+    void HtmlElementView::RemoveFocusListener(std::int32_t id) {
         focusHandlers.erase(std::remove(focusHandlers.begin(), focusHandlers.end(), id), focusHandlers.end());
         CppDOMBindings::focusHandlers->erase(id);
         CppDOMBindings::RemoveFocusListener(ptr, id);
     }
     
-    std::int32_t HtmlElement::AddBlurListener(std::function<void(Crafter::FocusEvent)> callback) {
+    std::int32_t HtmlElementView::AddBlurListener(std::function<void(Crafter::FocusEvent)> callback) {
         std::int32_t id = CppDOMBindings::blurHandlerMaxId++;
         blurHandlers.push_back(id);
         CppDOMBindings::blurHandlers->insert({id, callback});
@@ -168,13 +168,13 @@ namespace Crafter {
         return id;
     }
     
-    void HtmlElement::RemoveBlurListener(std::int32_t id) {
+    void HtmlElementView::RemoveBlurListener(std::int32_t id) {
         blurHandlers.erase(std::remove(blurHandlers.begin(), blurHandlers.end(), id), blurHandlers.end());
         CppDOMBindings::blurHandlers->erase(id);
         CppDOMBindings::RemoveBlurListener(ptr, id);
     }
     
-    std::int32_t HtmlElement::AddKeyDownListener(std::function<void(KeyboardEvent)> callback) {
+    std::int32_t HtmlElementView::AddKeyDownListener(std::function<void(KeyboardEvent)> callback) {
         std::int32_t id = CppDOMBindings::keyDownHandlerMaxId++;
         keyDownHandlers.push_back(id);
         CppDOMBindings::keyDownHandlers->insert({id, callback});
@@ -182,13 +182,13 @@ namespace Crafter {
         return id;
     }
     
-    void HtmlElement::RemoveKeyDownListener(std::int32_t id) {
+    void HtmlElementView::RemoveKeyDownListener(std::int32_t id) {
         keyDownHandlers.erase(std::remove(keyDownHandlers.begin(), keyDownHandlers.end(), id), keyDownHandlers.end());
         CppDOMBindings::keyDownHandlers->erase(id);
         CppDOMBindings::RemoveKeyDownListener(ptr, id);
     }
     
-    std::int32_t HtmlElement::AddKeyUpListener(std::function<void(KeyboardEvent)> callback) {
+    std::int32_t HtmlElementView::AddKeyUpListener(std::function<void(KeyboardEvent)> callback) {
         std::int32_t id = CppDOMBindings::keyUpHandlerMaxId++;
         keyUpHandlers.push_back(id);
         CppDOMBindings::keyUpHandlers->insert({id, callback});
@@ -196,13 +196,13 @@ namespace Crafter {
         return id;
     }
     
-    void HtmlElement::RemoveKeyUpListener(std::int32_t id) {
+    void HtmlElementView::RemoveKeyUpListener(std::int32_t id) {
         keyUpHandlers.erase(std::remove(keyUpHandlers.begin(), keyUpHandlers.end(), id), keyUpHandlers.end());
         CppDOMBindings::keyUpHandlers->erase(id);
         CppDOMBindings::RemoveKeyUpListener(ptr, id);
     }
     
-    std::int32_t HtmlElement::AddKeyPressListener(std::function<void(KeyboardEvent)> callback) {
+    std::int32_t HtmlElementView::AddKeyPressListener(std::function<void(KeyboardEvent)> callback) {
         std::int32_t id = CppDOMBindings::keyPressHandlerMaxId++;
         keyPressHandlers.push_back(id);
         CppDOMBindings::keyPressHandlers->insert({id, callback});
@@ -210,13 +210,13 @@ namespace Crafter {
         return id;
     }
     
-    void HtmlElement::RemoveKeyPressListener(std::int32_t id) {
+    void HtmlElementView::RemoveKeyPressListener(std::int32_t id) {
         keyPressHandlers.erase(std::remove(keyPressHandlers.begin(), keyPressHandlers.end(), id), keyPressHandlers.end());
         CppDOMBindings::keyPressHandlers->erase(id);
         CppDOMBindings::RemoveKeyPressListener(ptr, id);
     }
     
-    std::int32_t HtmlElement::AddChangeListener(std::function<void(ChangeEvent)> callback) {
+    std::int32_t HtmlElementView::AddChangeListener(std::function<void(ChangeEvent)> callback) {
         std::int32_t id = CppDOMBindings::changeHandlerMaxId++;
         changeHandlers.push_back(id);
         CppDOMBindings::changeHandlers->insert({id, callback});
@@ -224,13 +224,13 @@ namespace Crafter {
         return id;
     }
     
-    void HtmlElement::RemoveChangeListener(std::int32_t id) {
+    void HtmlElementView::RemoveChangeListener(std::int32_t id) {
         changeHandlers.erase(std::remove(changeHandlers.begin(), changeHandlers.end(), id), changeHandlers.end());
         CppDOMBindings::changeHandlers->erase(id);
         CppDOMBindings::RemoveChangeListener(ptr, id);
     }
     
-    std::int32_t HtmlElement::AddSubmitListener(std::function<void(void)> callback) {
+    std::int32_t HtmlElementView::AddSubmitListener(std::function<void(void)> callback) {
         std::int32_t id = CppDOMBindings::submitHandlerMaxId++;
         submitHandlers.push_back(id);
         CppDOMBindings::submitHandlers->insert({id, callback});
@@ -238,13 +238,13 @@ namespace Crafter {
         return id;
     }
     
-    void HtmlElement::RemoveSubmitListener(std::int32_t id) {
+    void HtmlElementView::RemoveSubmitListener(std::int32_t id) {
         submitHandlers.erase(std::remove(submitHandlers.begin(), submitHandlers.end(), id), submitHandlers.end());
         CppDOMBindings::submitHandlers->erase(id);
         CppDOMBindings::RemoveSubmitListener(ptr, id);
     }
     
-    std::int32_t HtmlElement::AddInputListener(std::function<void(InputEvent)> callback) {
+    std::int32_t HtmlElementView::AddInputListener(std::function<void(InputEvent)> callback) {
         std::int32_t id = CppDOMBindings::inputHandlerMaxId++;
         inputHandlers.push_back(id);
         CppDOMBindings::inputHandlers->insert({id, callback});
@@ -252,13 +252,13 @@ namespace Crafter {
         return id;
     }
     
-    void HtmlElement::RemoveInputListener(std::int32_t id) {
+    void HtmlElementView::RemoveInputListener(std::int32_t id) {
         inputHandlers.erase(std::remove(inputHandlers.begin(), inputHandlers.end(), id), inputHandlers.end());
         CppDOMBindings::inputHandlers->erase(id);
         CppDOMBindings::RemoveInputListener(ptr, id);
     }
     
-    std::int32_t HtmlElement::AddResizeListener(std::function<void(ResizeEvent)> callback) {
+    std::int32_t HtmlElementView::AddResizeListener(std::function<void(ResizeEvent)> callback) {
         std::int32_t id = CppDOMBindings::resizeHandlerMaxId++;
         resizeHandlers.push_back(id);
         CppDOMBindings::resizeHandlers->insert({id, callback});
@@ -266,13 +266,13 @@ namespace Crafter {
         return id;
     }
     
-    void HtmlElement::RemoveResizeListener(std::int32_t id) {
+    void HtmlElementView::RemoveResizeListener(std::int32_t id) {
         resizeHandlers.erase(std::remove(resizeHandlers.begin(), resizeHandlers.end(), id), resizeHandlers.end());
         CppDOMBindings::resizeHandlers->erase(id);
         CppDOMBindings::RemoveResizeListener(ptr, id);
     }
     
-    std::int32_t HtmlElement::AddScrollListener(std::function<void(ScrollEvent)> callback) {
+    std::int32_t HtmlElementView::AddScrollListener(std::function<void(ScrollEvent)> callback) {
         std::int32_t id = CppDOMBindings::scrollHandlerMaxId++;
         scrollHandlers.push_back(id);
         CppDOMBindings::scrollHandlers->insert({id, callback});
@@ -280,13 +280,13 @@ namespace Crafter {
         return id;
     }
     
-    void HtmlElement::RemoveScrollListener(std::int32_t id) {
+    void HtmlElementView::RemoveScrollListener(std::int32_t id) {
         scrollHandlers.erase(std::remove(scrollHandlers.begin(), scrollHandlers.end(), id), scrollHandlers.end());
         CppDOMBindings::scrollHandlers->erase(id);
         CppDOMBindings::RemoveScrollListener(ptr, id);
     }
     
-    std::int32_t HtmlElement::AddContextMenuListener(std::function<void(MouseEvent)> callback) {
+    std::int32_t HtmlElementView::AddContextMenuListener(std::function<void(MouseEvent)> callback) {
         std::int32_t id = CppDOMBindings::contextMenuHandlerMaxId++;
         contextMenuHandlers.push_back(id);
         CppDOMBindings::contextMenuHandlers->insert({id, callback});
@@ -294,13 +294,13 @@ namespace Crafter {
         return id;
     }
     
-    void HtmlElement::RemoveContextMenuListener(std::int32_t id) {
+    void HtmlElementView::RemoveContextMenuListener(std::int32_t id) {
         contextMenuHandlers.erase(std::remove(contextMenuHandlers.begin(), contextMenuHandlers.end(), id), contextMenuHandlers.end());
         CppDOMBindings::contextMenuHandlers->erase(id);
         CppDOMBindings::RemoveContextMenuListener(ptr, id);
     }
     
-    std::int32_t HtmlElement::AddDragStartListener(std::function<void(MouseEvent)> callback) {
+    std::int32_t HtmlElementView::AddDragStartListener(std::function<void(MouseEvent)> callback) {
         std::int32_t id = CppDOMBindings::dragStartHandlerMaxId++;
         dragStartHandlers.push_back(id);
         CppDOMBindings::dragStartHandlers->insert({id, callback});
@@ -308,13 +308,13 @@ namespace Crafter {
         return id;
     }
     
-    void HtmlElement::RemoveDragStartListener(std::int32_t id) {
+    void HtmlElementView::RemoveDragStartListener(std::int32_t id) {
         dragStartHandlers.erase(std::remove(dragStartHandlers.begin(), dragStartHandlers.end(), id), dragStartHandlers.end());
         CppDOMBindings::dragStartHandlers->erase(id);
         CppDOMBindings::RemoveDragStartListener(ptr, id);
     }
     
-    std::int32_t HtmlElement::AddDragEndListener(std::function<void(MouseEvent)> callback) {
+    std::int32_t HtmlElementView::AddDragEndListener(std::function<void(MouseEvent)> callback) {
         std::int32_t id = CppDOMBindings::dragEndHandlerMaxId++;
         dragEndHandlers.push_back(id);
         CppDOMBindings::dragEndHandlers->insert({id, callback});
@@ -322,13 +322,13 @@ namespace Crafter {
         return id;
     }
     
-    void HtmlElement::RemoveDragEndListener(std::int32_t id) {
+    void HtmlElementView::RemoveDragEndListener(std::int32_t id) {
         dragEndHandlers.erase(std::remove(dragEndHandlers.begin(), dragEndHandlers.end(), id), dragEndHandlers.end());
         CppDOMBindings::dragEndHandlers->erase(id);
         CppDOMBindings::RemoveDragEndListener(ptr, id);
     }
     
-    std::int32_t HtmlElement::AddDropListener(std::function<void(MouseEvent)> callback) {
+    std::int32_t HtmlElementView::AddDropListener(std::function<void(MouseEvent)> callback) {
         std::int32_t id = CppDOMBindings::dropHandlerMaxId++;
         dropHandlers.push_back(id);
         CppDOMBindings::dropHandlers->insert({id, callback});
@@ -336,13 +336,13 @@ namespace Crafter {
         return id;
     }
     
-    void HtmlElement::RemoveDropListener(std::int32_t id) {
+    void HtmlElementView::RemoveDropListener(std::int32_t id) {
         dropHandlers.erase(std::remove(dropHandlers.begin(), dropHandlers.end(), id), dropHandlers.end());
         CppDOMBindings::dropHandlers->erase(id);
         CppDOMBindings::RemoveDropListener(ptr, id);
     }
     
-    std::int32_t HtmlElement::AddDragOverListener(std::function<void(MouseEvent)> callback) {
+    std::int32_t HtmlElementView::AddDragOverListener(std::function<void(MouseEvent)> callback) {
         std::int32_t id = CppDOMBindings::dragOverHandlerMaxId++;
         dragOverHandlers.push_back(id);
         CppDOMBindings::dragOverHandlers->insert({id, callback});
@@ -350,13 +350,13 @@ namespace Crafter {
         return id;
     }
     
-    void HtmlElement::RemoveDragOverListener(std::int32_t id) {
+    void HtmlElementView::RemoveDragOverListener(std::int32_t id) {
         dragOverHandlers.erase(std::remove(dragOverHandlers.begin(), dragOverHandlers.end(), id), dragOverHandlers.end());
         CppDOMBindings::dragOverHandlers->erase(id);
         CppDOMBindings::RemoveDragOverListener(ptr, id);
     }
     
-    std::int32_t HtmlElement::AddDragEnterListener(std::function<void(MouseEvent)> callback) {
+    std::int32_t HtmlElementView::AddDragEnterListener(std::function<void(MouseEvent)> callback) {
         std::int32_t id = CppDOMBindings::dragEnterHandlerMaxId++;
         dragEnterHandlers.push_back(id);
         CppDOMBindings::dragEnterHandlers->insert({id, callback});
@@ -364,13 +364,13 @@ namespace Crafter {
         return id;
     }
     
-    void HtmlElement::RemoveDragEnterListener(std::int32_t id) {
+    void HtmlElementView::RemoveDragEnterListener(std::int32_t id) {
         dragEnterHandlers.erase(std::remove(dragEnterHandlers.begin(), dragEnterHandlers.end(), id), dragEnterHandlers.end());
         CppDOMBindings::dragEnterHandlers->erase(id);
         CppDOMBindings::RemoveDragEnterListener(ptr, id);
     }
     
-    std::int32_t HtmlElement::AddDragLeaveListener(std::function<void(MouseEvent)> callback) {
+    std::int32_t HtmlElementView::AddDragLeaveListener(std::function<void(MouseEvent)> callback) {
         std::int32_t id = CppDOMBindings::dragLeaveHandlerMaxId++;
         dragLeaveHandlers.push_back(id);
         CppDOMBindings::dragLeaveHandlers->insert({id, callback});
@@ -378,13 +378,13 @@ namespace Crafter {
         return id;
     }
     
-    void HtmlElement::RemoveDragLeaveListener(std::int32_t id) {
+    void HtmlElementView::RemoveDragLeaveListener(std::int32_t id) {
         dragLeaveHandlers.erase(std::remove(dragLeaveHandlers.begin(), dragLeaveHandlers.end(), id), dragLeaveHandlers.end());
         CppDOMBindings::dragLeaveHandlers->erase(id);
         CppDOMBindings::RemoveDragLeaveListener(ptr, id);
     }
     
-    std::int32_t HtmlElement::AddWheelListener(std::function<void(WheelEvent)> callback) {
+    std::int32_t HtmlElementView::AddWheelListener(std::function<void(WheelEvent)> callback) {
         std::int32_t id = CppDOMBindings::wheelHandlerMaxId++;
         wheelHandlers.push_back(id);
         CppDOMBindings::wheelHandlers->insert({id, callback});
@@ -392,13 +392,13 @@ namespace Crafter {
         return id;
     }
     
-    void HtmlElement::RemoveWheelListener(std::int32_t id) {
+    void HtmlElementView::RemoveWheelListener(std::int32_t id) {
         wheelHandlers.erase(std::remove(wheelHandlers.begin(), wheelHandlers.end(), id), wheelHandlers.end());
         CppDOMBindings::wheelHandlers->erase(id);
         CppDOMBindings::RemoveWheelListener(ptr, id);
     }
     
-    HtmlElement::~HtmlElement(){
+    HtmlElementView::~HtmlElementView(){
         for(std::int32_t handler : clickHandlers) {
             CppDOMBindings::clickHandlers->erase(handler);
             CppDOMBindings::RemoveClickListener(ptr, handler);
@@ -497,4 +497,17 @@ namespace Crafter {
         }
         CppDOMBindings::FreeJs(ptr);
     }
+
+    HtmlElement::HtmlElement(const std::string_view id): HtmlElementView(id) {
+        
     }
+    
+    HtmlElement::HtmlElement(const std::string_view id, const std::string_view html): HtmlElementView(id, html) {
+        
+    }
+
+    HtmlElement::~HtmlElement() {
+        CppDOMBindings::DeleteElement(ptr);
+    }
+}
+

interfaces/Crafter.CppDOM-BindingsExport.cppm

@@ -105,6 +105,10 @@ extern "C" {
         std::free(ptr); 
     }
 
+    __attribute__((export_name("deleteElement"))) void DeleteElement(void* ptr) {
+        // This will be implemented in JavaScript
+    }
+
     __attribute__((export_name("ExecuteClickHandler"))) void ExecuteClickHandler(std::int32_t handlerID, double clientX, double clientY, double screenX, double screenY, std::int32_t button, std::int32_t buttons, bool altKey, bool ctrlKey, bool shiftKey, bool metaKey) {
         Crafter::CppDOMBindings::clickHandlers->find(handlerID)->second(Crafter::MouseEvent(clientX, clientY, screenX, screenY, button, buttons, altKey, ctrlKey, shiftKey, metaKey));
     }

interfaces/Crafter.CppDOM-BindingsImport.cppm

@@ -136,4 +136,6 @@ export namespace Crafter::CppDOMBindings {
     bool HasClass(void* ptr, const std::string_view className) {
         return HasClass(ptr, className.data(), className.size());
     }
+    
+    __attribute__((import_module("env"), import_name("deleteElement"))) void DeleteElement(void* ptr);
 }

interfaces/Crafter.CppDOM-HtmlElement.cppm

@@ -25,7 +25,7 @@ import :BindingsImport;
 import :EventTypes;
 
 namespace Crafter {
-    export class HtmlElement {
+    export class HtmlElementView {
         public:
         void* const ptr;
         std::vector<std::int32_t> clickHandlers;
@@ -53,8 +53,8 @@ namespace Crafter {
         std::vector<std::int32_t> dragLeaveHandlers;
         std::vector<std::int32_t> wheelHandlers;
         
-        HtmlElement(const std::string_view id);
+        HtmlElementView(const std::string_view id);
-        HtmlElement(const std::string_view id, const std::string_view html);
+        HtmlElementView(const std::string_view id, const std::string_view html);
         void SetInnerHTML(const std::string_view html);
         void SetStyle(const std::string_view style);
         void SetProperty(const std::string_view property, const std::string_view value);
@@ -135,6 +135,13 @@ namespace Crafter {
         std::int32_t AddWheelListener(std::function<void(WheelEvent)> callback);
         void RemoveWheelListener(std::int32_t id);
         
+        ~HtmlElementView();
+    };
+
+    export class HtmlElement : public HtmlElementView { 
+        public:
+        HtmlElement(const std::string_view id);
+        HtmlElement(const std::string_view id, const std::string_view html);
         ~HtmlElement();
     };
 }