Coder Social home page Coder Social logo

wasm-script's Introduction

wasm-script

This is a library for bringing your WebAssembly compiler to the web.

Vision

<script src="wasm-script.js"></script>
<wasm-script id="math" lang="c" compiler="http://yourcompiler.com/c.wasm">
     
     extern int add(int a, int b){
          return a + b;
     }  

</wasm-script>
<script type="module">
     // Compile as a module for accelerating javascript
     const mathModule = await document.getElementById("math").compile();
     console.log(mathModule.add(2,2));
</script>

Or run stand alone

<script src="wasm-script.min.js"></script>
<wasm-script lang="python" src="tetris.python" execute></wasm-script>
<!-- use default compilers from the community for certain languages -->

Features

  • script for loading a WebAssembly module from a compiler
  • ask to load dependent files by url
  • cacheing
  • show compile errors in console

CDN

https://cdn.jsdelivr.net/gh/richardanaya/wasm-script@latest/wasm-script.js

Reference Implementation

A reference implementation compiler is in progress in Rust for the wasp programming language ( a simple lisp-like syntax language ).

<script src="wasm-script.js"></script>
<wasm-script id="math" lang="wasp" compiler="compilers/waspc/compiler.wasm">
     
    pub fn secret(){
        42
    }

</wasm-script>
<script>
     // top-level await doesn't exist yet, so we have to do it the lame way
    (async function(){
        const mathModule = await document.getElementById("math").compile();
        document.body.innerHTML = mathModule.secret(1);
    })();
</script>

See the demo here

What the compiler is doing is fairly simple:

use wasm_compiler::{process,log};
use wasp_core::{compiler, parser};

#[no_mangle]
pub fn compile(code_ptr: usize) -> usize {
    process(code_ptr, |code| {
        log("compiling the code below!!");
        log(&code);
        let app = parser::parse(code)?;
        Ok(compiler::compile(app)?)
    })
}

Exposing Browser Functionality

Until we have DOM exposure in WebAssembly, we still are in a position we need to provide our own exposures to the browser's functionality. This library has some helper functions for common memory structures.

<script src="../wasm-script.js"></script>
<wasm-script id="math" lang="wasp" compiler="../compilers/waspc/compiler.wasm">
     
    extern console_log(message)
    pub fn main(){
        console_log("hello world!")
    }

</wasm-script>
<script>
     // top-level await doesn't exist yet, so we have to do it the lame way
    (async function(){
        const mathModule = await document.getElementById("math").compile({
            console_log: function(message_start) {
                const message = WasmScript.getCString(mathModule.memory,message_start)
                document.body.innerHTML += message;
              }
        });
        mathModule.main();
    })();
</script>

See the demo here

Memory Helper API

  • WasmScript.getCString(mem,start) - Returns a utf-8 string from position in memory that ends with a zero character.
  • WasmScript.getUint8ArrayFromMemory(mem,start) - Returns a Uint8Array from position in memory, starting with a uint32 count followed by the elements.

Building Your Own Compiler

Right now the current contract for building a compiler is very simple and can be implemented in any language that compiles to WebAssembly:

// external function to print a long takes a zero-character ending C string
extern void compiler_log(uint32 start_cstr)
// external function to print a error log and throw an exception takes a zero-character ending
// C string ( this function does not return )
extern void compiler_error(uint32 start_cstr)

// allocate some bytes of size
uint32 malloc(uint32 size)
// compile a code by passing in the start of the code in memory (created using malloc above). 
// and get back a list of bytes (the length as u32, followed by the data)
uint32 compile(uint32 code_str)

wasm-script's People

Contributors

richardanaya avatar

Stargazers

pro2stinger avatar Nathan Rugg avatar Eevert Novius avatar Sanath Kumar U avatar Greg Morenz avatar  avatar  avatar Tim Mulqueen avatar Jack avatar Tomás Di Vito avatar Tim Kersey avatar Qing Qiao avatar GAURAV avatar TÖRÖK Attila avatar Mara Robin B. avatar Sora Morimoto avatar F. avatar Jae Jin avatar Artur Tamborski avatar Catherine avatar Milan Zivkovic avatar Juri Hahn avatar Timo avatar Ian Kettlewell avatar Jonghyouk Yun avatar gn0st1c avatar Paul-Louis Ageneau avatar Can Evgin avatar Muhammad Shalaby avatar setenum avatar

Watchers

 avatar  avatar

wasm-script's Issues

compiler issue

where can i find (or make) these compilers

edit: i just learned how to make them but can any of them be found online?

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.