input example readme

additional/env.js

@@ -630,6 +630,19 @@ let env = {
             element.parentNode.removeChild(element);
         }
     },
+    getValue: function(ptr) {
+        const element = jsmemory.get(ptr);
+        if(element.value) {
+            return writeStringToWasm(element.value || "");
+        } else {
+            return 0;
+        }
+    },
+    setValue: function(ptr, value, valueLength) {
+        const element = jsmemory.get(ptr);
+        const val = decoder.decode(new Int8Array(window.crafter_webbuild_wasi.instance.exports.memory.buffer, value, valueLength));
+        element.value = val;
+    },
     addClickListener: addClickListener,
     removeClickListener: removeClickListener,
     addMouseOverListener: addMouseOverListener,

examples/AllEventHandling/main.cpp

@@ -1,8 +1,3 @@
-/*
- * Enhanced Event Handling Demo
- * This example showcases all available event types in Crafter.CppDOM
- */
-
 import Crafter.CppDOM;
 using namespace Crafter;
 import std;

examples/FetchExample/main.cpp

@@ -7,7 +7,6 @@ int main(){
     SetInnerHTML(body, "<h1>Fetch Example</h1><p>Testing HTTP requests...</p>");
     
     Fetch("https://httpbin.org/get", [body](std::string result){
-                std::cout << "callback recieved2" << std::endl;
         if (!result.empty()) {
             SetInnerHTML(body, "<h1>Fetch Example</h1><p>Response: " + result + "</p>");
         } else {

examples/InputValueExample/README.md

@@ -0,0 +1,42 @@
+# InputValueExample
+
+This example demonstrates how to get and set input element values using Crafter.CppDOM.
+
+## Features
+
+- Shows how to get input element values using GetValue()
+- Demonstrates how to set input element values using SetValue()
+- Illustrates updating UI elements based on input changes
+- Shows how to reset input values
+
+## Usage
+
+```cpp
+import Crafter.CppDOM;
+import std;
+using namespace Crafter;
+
+HtmlElement* body = new HtmlElement("body", R"(<h1>Input GetValue() and SetValue() Example</h1><br><input id="input" type="text" placeholder="Enter your text here..."><br><button id="button">Change Value</button><p id ="valueOutput"></p>)");
+HtmlElement* button = new HtmlElement("button");
+HtmlElement* output = new HtmlElement("valueOutput");
+HtmlElement* input = new HtmlElement("input");
+
+int main(){
+    button->AddClickListener([](Crafter::MouseEvent) {
+        std::string newValue = input->GetValue();
+        output->SetInnerHTML(newValue);
+        input->SetValue("");
+    });
+}
+```
+
+## Building and Running
+
+```bash
+crafter-build build executable
+./run.sh
+```
+
+Then navigate to `http://localhost:8080/` in your browser.
+
+If caddy is not installed, you can use your favorite static file server instead.

examples/InputValueExample/main.cpp

@@ -0,0 +1,17 @@
+import Crafter.CppDOM;
+import std;
+using namespace Crafter;
+
+
+HtmlElement* body = new HtmlElement("body", R"(<h1>Input GetValue() and SetValue() Example</h1><br><input id="input" type="text" placeholder="Enter your text here..."><br><button id="button">Change Value</button><p id ="valueOutput"></p>)");
+HtmlElement* button = new HtmlElement("button");
+HtmlElement* output = new HtmlElement("valueOutput");
+HtmlElement* input = new HtmlElement("input");
+
+int main(){
+    button->AddClickListener([](Crafter::MouseEvent) {
+        std::string newValue = input->GetValue();
+        output->SetInnerHTML(newValue);
+        input->SetValue("");
+    });
+}

examples/InputValueExample/project.json

@@ -0,0 +1,17 @@
+{
+    "name": "main",
+    "configurations": [
+        {
+            "name": "executable",
+            "implementations": ["main"],
+            "target": "wasm32-wasi",
+            "debug" : true,
+            "dependencies": [
+                {
+                    "path":"../../project.json",
+                    "configuration":"lib-debug"
+                }
+            ]
+        }
+    ]
+}

examples/InputValueExample/run.sh

@@ -0,0 +1 @@
+caddy file-server --listen :8080 --root bin/executable

examples/Website/backend/main.cpp

@@ -0,0 +1,70 @@
+/*
+Crafter® Build
+Copyright (C) 2025 Catcrafts®
+Catcrafts.net
+
+This library is free software; you can redistribute it and/or
+modify it under the terms of the GNU Lesser General Public
+License version 3.0 as published by the Free Software Foundation;
+
+This library is distributed in the hope that it will be useful,
+but WITHOUT ANY WARRANTY; without even the implied warranty of
+MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the GNU
+Lesser General Public License for more details.
+
+You should have received a copy of the GNU Lesser General Public
+License along with this library; if not, write to the Free Software
+Foundation, Inc., 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301 USA
+*/
+import Crafter.Network;
+import std;
+using namespace Crafter;
+
+struct Note {
+    std::uint32_t id;
+    std::string content;
+};
+std::vector<Note> notes;
+int next_id = 1;
+
+int main() {
+    ListenerHTTP listener(3000, {
+        {"/createNote", [&](const HTTPRequest& request) {
+            if(request.method == "OPTIONS") {
+                std::cout << CreateResponseHTTP("200 OK", {{"Access-Control-Allow-Origin", "*"}, {"Access-Control-Allow-Headers", "*"}, {"Access-Control-Allow-Methods", "*"}}) << std::endl;
+                return CreateResponseHTTP("200 OK", {{"Access-Control-Allow-Origin", "*"}, {"Access-Control-Allow-Headers", "*"}, {"Access-Control-Allow-Methods", "*"}});
+            }
+            std::uint32_t id = next_id++;
+            notes.emplace_back(id, request.body);
+            return CreateResponseHTTP("200 OK", {{"Content-Type", "application/json"}, {"Access-Control-Allow-Origin", "*"}, {"Access-Control-Allow-Headers", "*"}}, std::format("{}", id));
+        }},
+
+        {"/deleteNote", [&](const HTTPRequest& request) {
+            if(request.method == "OPTIONS") {
+                std::cout << CreateResponseHTTP("200 OK", {{"Access-Control-Allow-Origin", "*"}, {"Access-Control-Allow-Headers", "*"}, {"Access-Control-Allow-Methods", "*"}}) << std::endl;
+                return CreateResponseHTTP("200 OK", {{"Access-Control-Allow-Origin", "*"}, {"Access-Control-Allow-Headers", "*"}, {"Access-Control-Allow-Methods", "*"}});
+            }
+            int idToRemove = std::stoi(request.body);
+            notes.erase(std::remove_if(notes.begin(), notes.end(),
+                [idToRemove](Note note) {
+                    return note.id == idToRemove;
+                }),
+            notes.end());
+            return CreateResponseHTTP("200 OK", {{"Content-Type", "application/json"}, {"Access-Control-Allow-Origin", "*"}, {"Access-Control-Allow-Headers", "*"}});
+        }},
+
+        {"/getNotes", [&](const HTTPRequest& request) {
+            if(request.method == "OPTIONS") {
+                std::cout << CreateResponseHTTP("200 OK", {{"Access-Control-Allow-Origin", "*"}, {"Access-Control-Allow-Headers", "*"}, {"Access-Control-Allow-Methods", "*"}}) << std::endl;
+                return CreateResponseHTTP("200 OK", {{"Access-Control-Allow-Origin", "*"}, {"Access-Control-Allow-Headers", "*"}, {"Access-Control-Allow-Methods", "*"}});
+            }
+            std::string result;
+            for(const Note& note : notes) {
+                result += std::format("{}\n{}\n\n", note.id, note.content);
+            }
+            return CreateResponseHTTP("200 OK", {{"Content-Type", "application/json"}, {"Access-Control-Allow-Origin", "*"}, {"Access-Control-Allow-Headers", "*"}}, result);
+        }}
+    });
+
+    listener.Listen();
+}

examples/Website/backend/project.json

@@ -0,0 +1,16 @@
+{
+    "name": "website-backend",
+    "configurations": [
+        {
+            "name": "executable",
+            "implementations": ["main"],
+            "libs": ["crafter-thread"],
+            "dependencies": [
+                {
+                    "path":"/home/jorijn/repos/Crafter/Crafter.Network/project.json",
+                    "configuration":"lib-debug"
+                }
+            ]
+        }
+    ]
+}

examples/Website/frontend/main.cpp

@@ -0,0 +1,256 @@
+import Crafter.CppDOM;
+import std;
+using namespace Crafter;
+using namespace Crafter::CppDOMBindings;
+
+// Structure to represent a note
+struct Note {
+    std::uint32_t id;
+    std::string content;
+};
+
+void RenderNotes();
+
+// Global vector to store notes
+std::vector<Note> notes;
+
+// Create the head section
+HtmlElementView* head = new HtmlElementView("head", R"(
+    <title>Note Taking App</title>
+    <style>
+        body {
+            font-family: Arial, sans-serif;
+            max-width: 800px;
+            margin: 0 auto;
+            padding: 20px;
+            background-color: #f5f5f5;
+        }
+        .app-container {
+            background-color: white;
+            padding: 20px;
+            border-radius: 8px;
+            box-shadow: 0 2px 10px rgba(0,0,0,0.1);
+        }
+        h1 {
+            color: #333;
+            text-align: center;
+        }
+        .input-section {
+            margin-bottom: 20px;
+            padding: 15px;
+            background-color: #f9f9f9;
+            border-radius: 5px;
+        }
+        .input-section textarea {
+            width: 100%;
+            height: 80px;
+            padding: 10px;
+            border: 1px solid #ddd;
+            border-radius: 4px;
+            resize: vertical;
+        }
+        .input-section button {
+            background-color: #4CAF50;
+            color: white;
+            padding: 10px 20px;
+            border: none;
+            border-radius: 4px;
+            cursor: pointer;
+            margin-top: 10px;
+        }
+        .input-section button:hover {
+            background-color: #45a049;
+        }
+        .notes-section h2 {
+            color: #555;
+            border-bottom: 2px solid #4CAF50;
+            padding-bottom: 5px;
+        }
+        .notes-list {
+            margin-top: 15px;
+        }
+        .note-item {
+            padding: 15px;
+            margin-bottom: 10px;
+            background-color: #f0f8ff;
+            border-left: 4px solid #4CAF50;
+            border-radius: 4px;
+            display: flex;
+            justify-content: space-between;
+            align-items: flex-start;
+        }
+        .note-content {
+            flex-grow: 1;
+            word-wrap: break-word;
+        }
+        .delete-btn {
+            background-color: #f44336;
+            color: white;
+            border: none;
+            padding: 5px 10px;
+            border-radius: 3px;
+            cursor: pointer;
+            margin-left: 10px;
+        }
+        .delete-btn:hover {
+            background-color: #da190b;
+        }
+        #error, #loading {
+            padding: 10px;
+            margin: 10px 0;
+            border-radius: 4px;
+        }
+        #error {
+            background-color: #ffebee;
+            color: #c62828;
+            border: 1px solid #ffcdd2;
+        }
+        #loading {
+            background-color: #e3f2fd;
+            color: #1565c0;
+            border: 1px solid #bbdefb;
+        }
+    </style>
+)");
+    
+// Create the body section
+HtmlElementView* body = new HtmlElementView("body", R"(
+    <div class="app-container">
+        <h1>📝 Note Taking App</h1>
+        
+        <div class="input-section">
+            <h2>Add New Note</h2>
+            <textarea id="noteInput" placeholder="Enter your note here..."></textarea>
+            <br>
+            <button id="addNoteBtn">Add Note</button>
+        </div>
+        
+        <div id="error"></div>
+        <div id="loading"></div>
+        
+        <div class="notes-section">
+            <h2>Your Notes</h2>
+            <div id="notesContainer"></div>
+        </div>
+    </div>
+)");
+HtmlElementView* addNoteBtn = new HtmlElementView("addNoteBtn");
+HtmlElementView* noteInput = new HtmlElementView("noteInput");
+
+// Function to fetch all notes from the backend
+void FetchNotes() {
+    HtmlElementView loadingIndicator("loading");
+    loadingIndicator.SetInnerHTML("<p>Loading notes...</p>");
+    
+    // Make HTTP request to backend
+    Fetch("http://localhost:3000/getNotes", [](std::string content) {
+        // Parse response - each note is separated by \n\n
+        notes.clear();
+        
+        // Simple parsing of note data
+        std::uint_fast32_t pos = 0;
+        std::uint_fast32_t prevPos = 0;
+        
+        while ((pos = content.find('\n', prevPos)) != std::string::npos) {
+            if (pos > prevPos) {
+                // Extract ID
+                std::string idStr = content.substr(prevPos, pos - prevPos);
+                std::uint_fast32_t id = std::stoul(idStr);
+                
+                // Find the next newline for content
+                std::uint_fast32_t contentStart = pos + 1;
+                std::uint_fast32_t contentEnd = content.find('\n', contentStart);
+                if (contentEnd != std::string::npos) {
+                    std::string noteContent = content.substr(contentStart, contentEnd - contentStart);
+                    notes.push_back({id, noteContent});
+                }
+            }
+            prevPos = content.find('\n', pos) + 1;
+            if (prevPos >= content.length()) break;
+        }
+        
+        // Update UI with notes
+        //RenderNotes();
+    });
+}
+
+// Function to add a new note via the backend
+void AddNote(const std::string& content) {
+    if (content.empty()) return;
+    
+    HtmlElementView loadingIndicator("loading");
+    loadingIndicator.SetInnerHTML("<p>Saving note...</p>");
+    
+    // Make POST request to create note
+    Fetch("http://localhost:3000/createNote", content, [](std::string content) {});
+}
+
+// Function to delete a note via the backend
+void DeleteNote(std::uint32_t id) {
+    HtmlElementView loadingIndicator("loading");
+    loadingIndicator.SetInnerHTML("<p>Deleting note...</p>");
+    
+    // Make POST request to delete note
+    Fetch("http://localhost:3000/deleteNote", std::to_string(id), [](std::string content) {
+        FetchNotes();
+    });
+}
+
+// Function to render all notes to the DOM
+void RenderNotes() {
+    HtmlElementView notesContainer("notesContainer");
+    
+    if (notes.empty()) {
+        notesContainer.SetInnerHTML("<p>No notes yet. Add one below!</p>");
+        return;
+    }
+    
+    std::string html = "<div class='notes-list'>";
+    for (const Note& note : notes) {
+        html += std::format(
+            R"(<div class='note-item' id='note-{}'>
+                <div class='note-content'>{}</div>
+                <button class='delete-btn' onclick='DeleteNote({})'>Delete</button>
+            </div>)",
+            note.id, note.content, note.id
+        );
+    }
+    html += "</div>";
+    
+    notesContainer.SetInnerHTML(html);
+    
+    // Add event listeners to delete buttons
+    for (const Note& note : notes) {
+        HtmlElementView deleteBtn(std::format("note-{}-delete", note.id));
+        deleteBtn.AddClickListener([id = note.id](MouseEvent event) {
+            DeleteNote(id);
+        });
+    }
+}
+
+std::string* currentNoteValue = new std::string();
+
+// Main function
+int main() {
+    // Initialize the app
+    FetchNotes();
+    
+    // Add input listener to track textarea changes
+    noteInput->AddInputListener([&](InputEvent event) {
+        *currentNoteValue += event.data;
+        std::cout << *currentNoteValue << std::endl;
+    });
+    
+    // Add click listener to add note button
+    addNoteBtn->AddClickListener([&](MouseEvent event) {
+        std::cout << "click!" << std::endl;
+        std::cout << *currentNoteValue << std::endl;
+        // Use the captured value from input event
+        if (!currentNoteValue->empty()) {
+            AddNote(*currentNoteValue);
+            // Clear the textarea by setting its value to empty string
+            noteInput->SetInnerHTML("");
+            *currentNoteValue = ""; // Reset the stored value
+        }
+    });
+}

examples/Website/frontend/project.json

@@ -0,0 +1,17 @@
+{
+    "name": "main",
+    "configurations": [
+        {
+            "name": "executable",
+            "implementations": ["main"],
+            "target": "wasm32-wasi",
+            "debug" : true,
+            "dependencies": [
+                {
+                    "path":"../../../project.json",
+                    "configuration":"lib-debug"
+                }
+            ]
+        }
+    ]
+}

examples/Website/frontend/run.sh

@@ -0,0 +1 @@
+caddy file-server --listen :8080 --root bin/executable

implementations/Crafter.CppDOM-HtmlElement.cpp

@@ -62,6 +62,21 @@ namespace Crafter {
         return CppDOMBindings::HasClass(ptr, className);
     }
     
+    std::string HtmlElementView::GetValue() {
+        const char* value = CppDOMBindings::GetValue(ptr);
+        if(value != nullptr) {
+            std::string result(value);
+            std::free(const_cast<char*>(value));
+            return result;
+        } else {
+            return "";
+        }
+    }
+    
+    void HtmlElementView::SetValue(const std::string_view value) {
+        CppDOMBindings::SetValue(ptr, value);
+    }
+    
     std::int32_t HtmlElementView::AddClickListener(std::function<void(Crafter::MouseEvent)> callback) {
         std::int32_t id = CppDOMBindings::clickHandlerMaxId++;
         clickHandlers.push_back(id);

interfaces/Crafter.CppDOM-BindingsImport.cppm

@@ -138,4 +138,11 @@ export namespace Crafter::CppDOMBindings {
     }
     
     __attribute__((import_module("env"), import_name("deleteElement"))) void DeleteElement(void* ptr);
+    
+    // Value property functions
+    __attribute__((import_module("env"), import_name("getValue"))) const char* GetValue(void* ptr);
+    __attribute__((import_module("env"), import_name("setValue"))) void SetValue(void* ptr, const char* value, std::int32_t valueLength);
+    void SetValue(void* ptr, const std::string_view value) {
+        SetValue(ptr, value.data(), value.size());
+    }
 }

interfaces/Crafter.CppDOM-HtmlElement.cppm

@@ -63,6 +63,10 @@ namespace Crafter {
         void ToggleClass(const std::string_view className);
         bool HasClass(const std::string_view className);
         
+        // Value property accessors
+        std::string GetValue();
+        void SetValue(const std::string_view value);
+        
         std::int32_t AddClickListener(std::function<void(Crafter::MouseEvent)> callback);
         void RemoveClickListener(std::int32_t id);