Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More →

twr-wasm

Package Overview

Dependencies

Advanced tools

Install Socket

Detect and block malicious and high-risk dependencies

Install

twr-wasm

A lightweight and easy to use C/C++ runtime for wasm. Execute C/C++ code in a browser using Web Assembly.

2.0.2
Source
npm

Version published: 6 months ago

Maintainers: 1

Created: 6 months ago

Source

C/C++ Runtime for Web Assembly

Version 2.0.2

twr-wasm is a simple, lightweight and easy to use C/C++ library for building Web Assembly code directly with clang. It solves some common use cases with less work than the more feature rich emscripten.

twr-wasm is easy to understand, and has some cool features. You can input and print streaming character i/o to a <div> tag, use a <canvas> element as an ANSI terminal, or use a C/C++ 2D drawing api (that is compatible with JavaScript Canvas APIs) to draw to a <canvas> element. You can run blocking C/C++.

twr-wasm allows you to run C/C++ code in a web browser. Legacy code, libraries, full applications, or single functions can be integrated with JavaScript and TypeScript.

twr-wasm is designed to be used with the standard llvm clang compiler and tools.

twr-wasm was previously named tiny-wasm-runtime.

View the Bouncing Ball Demo

Click Here to view demo using twr-wasm and it's C/C++ Canvas APIs

Full Documentation

The full documentation can be found here

Key Features

compile and link C/C++ for use with web assembly using clang directly
standard C library, libc++. and purpose built APIs available from C/C++
Localization support, UTF-8, and windows-1252 support
load web assembly modules, and call their C/C++ functions from JavaScript (with parameter conversion as needed)
in C/C++, printf and get characters to/from <div> tags in your HTML page
in C/C++, printf and get characters to/from a <canvas> based "terminal"
in C/C++ use 2D drawing API compatible with JavaScript Canvas
in C/C++, use the "blocking loop" pattern and integrate with Javascript's asynchronous event loop

View Live Demos

Name	View Live Link	Source Link
Bouncing Balls (C++)	View bouncing balls	Source for balls
Maze (Win32 C Port)	View live maze	Source for maze
Input from <div>	View square demo	Source
Mini-Terminal	View mini-term demo	Source

Installation

Clone from github, or use npm install twr-wasm. To compile C/C++, install clang and wasm-ld.

Hello World

Here is the simplest twr-wasm example.

C code:

#include <stdio.h>

void hello() {
   printf("hello world\n");
}

index.html:

<head>
   <title>Hello World</title>
</head>
<body>
   <div id="twr_iodiv"></div>

   <script type="module">
      import {twrWasmModule} from "twr-wasm";
      
      const mod = new twrWasmModule();
      await mod.loadWasm("./helloworld.wasm");
      await mod.callC(["hello"]);
   </script>
</body>

Simple <div> i/o

I/O can be directed to or from a <div> or a <canvas> tag. Here is a simple example using a <div> for stdio input and output.

#include <stdio.h>
#include <stdlib.h>
#include "twr-crt.h"

void stdio_div() {
   char inbuf[64];
   int i;

   printf("Square Calculator\n");

   while (1) {
      printf("Enter an integer: ");
      twr_gets(inbuf);
      i=atoi(inbuf);
      printf("%d squared is %d\n\n",i,i*i);
   }
}

With an index.html like the following. This time we are using twrWasmModuleAsync which integrates blocking C code into Javascript. twrWasmModuleAsync can also be used to receive key input from a <div> or <canvas> tag.

<head>
   <title>stdio-div example</title>
</head>
<body>
   <div id="twr_iodiv" style="background-color:LightGray;color:DarkGreen" tabindex="0">Loading... <br></div>

   <script type="module">
      import {twrWasmModuleAsync} from "twr-wasm";

      let amod;

      try {
         amod = new twrWasmModuleAsync();

         document.getElementById("twr_iodiv").innerHTML ="<br>";
         document.getElementById("twr_iodiv").addEventListener("keydown",(ev)=>{amod.keyDownDiv(ev)});

         await amod.loadWasm("./stdio-div.wasm");
         await amod.callC(["stdio_div"]);
}
catch(ex) {
   amod.divLog("unexpected exception");
   throw ex;
}

</script>
</body>

Full Documentation

The full documentation can be found here

Keywords

FAQs

What is twr-wasm?

Is twr-wasm well maintained?

Package last updated on 14 Jun 2024

Did you know?

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install