diff --git a/.gitignore b/.gitignore index d5697ec..8688e5b 100644 --- a/.gitignore +++ b/.gitignore @@ -1,2 +1,4 @@ build/ bin/ +samples/HelloWorld/bin +samples/HelloWorld/build \ No newline at end of file diff --git a/Crafter.CppDOM.cppm b/Crafter.CppDOM.cppm index d275bac..566b036 100644 --- a/Crafter.CppDOM.cppm +++ b/Crafter.CppDOM.cppm @@ -22,6 +22,7 @@ module; #include #include #include +#include export module Crafter.CppDOM; extern "C" { @@ -36,8 +37,16 @@ extern "C" { -export namespace Crafter::CppDOM { - __attribute__((import_module("env"), import_name("setInnerHTML"))) void SetInnerHTML(const char* id, std::size_t idLenght, const char* html, std::size_t htmlLenght); +export namespace Crafter::CppDOM::Bindings { + __attribute__((import_module("env"), import_name("getElementById"))) void* GetElementById(const char* id, std::size_t idLenght); + inline void* GetElementById(const std::string& id){ + return GetElementById(id.c_str(), id.size()); + } + __attribute__((import_module("env"), import_name("setInnerHTML"))) void SetInnerHTML(void* ptr, const char* html, std::size_t htmlLenght); + inline void SetInnerHTML(void* ptr, const std::string& html){ + SetInnerHTML(ptr, html.c_str(), html.size()); + } + __attribute__((import_module("env"), import_name("freeJs"))) void FreeJs(void* ptr); // __attribute__((import_module("env"), import_name("strokeRect"))) void StrokeRect(std::uint64_t id, std::uint32_t x, std::uint32_t y, std::uint32_t width, std::uint32_t height, const char* color, std::size_t colorLenght); // __attribute__((import_module("env"), import_name("putImageData"))) void PutImageData(std::uint64_t id, Crafter::Web::Pixel* buffer, std::uint32_t width, std::uint32_t height); // __attribute__((import_module("env"), import_name("fetch"))) void Fetch(void* obj, const char* url, std::size_t urlCallback, char* buffer, void (*listener)(void* obj, std::uint32_t, char*)); diff --git a/Crafter.CppDOM.js b/Crafter.CppDOM.js index b92d837..05d34ba 100644 --- a/Crafter.CppDOM.js +++ b/Crafter.CppDOM.js @@ -18,86 +18,29 @@ License along with this library; if not, write to the Free Software Foundation, Inc., 51 Franklin Street, Fifth Floor, Boston, MA 02110-1301 USA */ -function setInnerHTML(id, idLenght, html, htmlLenght) { - const decoder = new TextDecoder(); - document.getElementById(decoder.decode(new Int8Array(window.crafter_webbuild_wasi.instance.exports.memory.buffer, id, idLenght))).innerHTML = decoder.decode(new Int8Array(window.crafter_webbuild_wasi.instance.exports.memory.buffer, html, htmlLenght)); +const decoder = new TextDecoder(); + +let memorycounter = -1; +const jsmemory = new Map(); + +function freeJs(ptr) { + jsmemory.delete(ptr); } -function strokeRect(id, x, y, width, height, color, colorLenght) { - const decoder = new TextDecoder(); - const canvas = document.getElementById(id.toString()); - const ctx = canvas.getContext("2d"); - ctx.strokeStyle = decoder.decode(new Int8Array(window.crafter_webbuild_wasi.instance.exports.memory.buffer, color, colorLenght)); - ctx.strokeRect(x, y, width, height); +function getElementById(id, idLenght) { + const obj = document.getElementById(decoder.decode(new Int8Array(window.crafter_webbuild_wasi.instance.exports.memory.buffer, id, idLenght))); + jsmemory.set(++memorycounter, obj); + return memorycounter; } -function putImageData(id, buffer, width, height) { - const decoder = new TextDecoder(); - const canvas = document.getElementById(id.toString()); - const ctx = canvas.getContext("2d"); - const view = new Uint8ClampedArray(window.crafter_webbuild_wasi.instance.exports.memory.buffer, buffer, 640*360*4); - const imageData = new ImageData(view, 640, 360); - ctx.putImageData(imageData, 0, 0); +function setInnerHTML(ptr, html, htmlLenght) { + jsmemory.get(ptr).innerHTML = decoder.decode(new Int8Array(window.crafter_webbuild_wasi.instance.exports.memory.buffer, html, htmlLenght)); } -function draw(id, x, y, text, textLenght){ - const decoder = new TextDecoder(); - const canvas = document.getElementById("1"); - let ctx = canvas.getContext("2d") - - ctx.fillStyle = "red"; - ctx.font = '20px sans-serif'; - - var textString = decoder.decode(new Int8Array(window.crafter_webbuild_wasi.instance.exports.memory.buffer, text, textLenght)) - let textWidth = ctx.measureText(textString).width; - - ctx.fillText(textString , x - (textWidth / 2), y); -} - -function setTimeoutt(obj, time, callback) { - setTimeout(() => { - window.crafter_webbuild_wasi.instance.exports.__indirect_function_table.get(callback)(obj); - }, time); -} - -function addEventListener(id, eventId, listener) { - -} - -function fetchh(obj, url, urlLenght, buffer, callback) { - const decoder = new TextDecoder(); - const view = new Uint8Array(window.crafter_webbuild_wasi.instance.exports.memory.buffer, buffer); - fetch(decoder.decode(new Int8Array(window.crafter_webbuild_wasi.instance.exports.memory.buffer, url, urlLenght)), { - // Adding Get request - method: "GET", - - // Setting headers - headers: { - 'Content-Type': 'application/octet-stream', - }, - // Setting response type to arraybuffer - responseType: "arraybuffer" - }).then(x => x.arrayBuffer()).then( - y => { - const outputBytes = new Uint8Array(y); - for(let i = 0; i < outputBytes.length; i++) { - view[i] = outputBytes[i] - } - window.crafter_webbuild_wasi.instance.exports.__indirect_function_table.get(callback)(obj, outputBytes.length, buffer); - } - ); - return 1; -} - - let env = { + freeJs:freeJs, + getElementById:getElementById, setInnerHTML:setInnerHTML, - addEventListener:addEventListener, - strokeRect:strokeRect, - fetch:fetchh, - putImageData:putImageData, - setTimeout:setTimeoutt, - draw:draw } if(window.crafter_webbuild_env){ diff --git a/README.md b/README.md index ce2e261..07f6f69 100644 --- a/README.md +++ b/README.md @@ -37,13 +37,14 @@ Create a basic project file, that describes your web project. ``` Save and close the file, create a ``main.cpp`` ```cpp -import Crafter.Web; -using namespace Crafter::Web; +import Crafter.CppDOM; -int main() { - const char id[] = "body"; - const char content = "

Hello from C++!

"; - Crafter::CppDOM::SetInnerHTML(id, sizeof(id)-1, content.c_str(), content.size()-1); +int main(){ + void* body = Crafter::CppDOM::Bindings::GetElementById("body"); + Crafter::CppDOM::Bindings::SetInnerHTML(body, "Hello World!"); + Crafter::CppDOM::Bindings::FreeJs(body); } ``` -Save and close, then run ``crafter-webbuild serve -c debug``. Now you can open the browser at ``http://localhost:8080/`` and ``Hello from C++!`` will appear in the browser. +Save and close, then run ``crafter-webbuild serve -c debug``. 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 [Hello World sample](https://github.com/Catcrafts/Crafter.CppDOM/tree/master/samples/HelloWorld) diff --git a/project.json b/project.json index 91c6946..66ef5c2 100644 --- a/project.json +++ b/project.json @@ -1,5 +1,5 @@ { - "name": "crafter-web", + "name": "crafter-cppdom", "configurations": [ { "name": "base", diff --git a/samples/HelloWorld/README.md b/samples/HelloWorld/README.md new file mode 100644 index 0000000..370fddb --- /dev/null +++ b/samples/HelloWorld/README.md @@ -0,0 +1,2 @@ +This sample demonstrates a simple hello world. +Run ``crafter-webbuild serve -c debug`` and go to ``localhost:8080`` to view it. \ No newline at end of file diff --git a/samples/HelloWorld/main.cpp b/samples/HelloWorld/main.cpp new file mode 100644 index 0000000..d7d87b6 --- /dev/null +++ b/samples/HelloWorld/main.cpp @@ -0,0 +1,7 @@ +import Crafter.CppDOM; + +int main(){ + void* body = Crafter::CppDOM::Bindings::GetElementById("body"); + Crafter::CppDOM::Bindings::SetInnerHTML(body, "Hello World!"); + Crafter::CppDOM::Bindings::FreeJs(body); +} \ No newline at end of file diff --git a/samples/HelloWorld/project.json b/samples/HelloWorld/project.json new file mode 100644 index 0000000..fbdde2b --- /dev/null +++ b/samples/HelloWorld/project.json @@ -0,0 +1,23 @@ +{ + "name": "hello-world", + "configurations": [ + { + "name": "debug", + "standard": "c++26", + "source_files": ["main"], + "module_files": [], + "additional_files": [], + "build_dir": "./build", + "output_dir": "./bin", + "optimization_level": "0", + "target": "wasm32-unknown-wasi", + "type": "executable", + "dependencies": [ + { + "path":"/home/jorijn/repos/Crafter.CppDOM/project.json", + "configuration":"debug" + } + ] + } + ] +}