interface MyApi {
  void hello();
  long add(long a, long b);
  attribute DOMString name;
  sequence<long> getRange(long from, long to);
};

python tools/webidl_binder.py test.idl glue

#include <emscripten/bind.h>
#include <string>
#include <vector>

using namespace emscripten;

struct MyApi {
  void hello() { 
    printf("Hello from C++\n"); 
  }
  
  long add(long a, long b) { 
    return a + b; 
  }
  
  std::string name{"WebIDL"};
  
  emscripten::val getRange(long from, long to) {
    emscripten::val arr = emscripten::val::array();
    for (long i = from; i < to; ++i) {
      arr.set(i - from, i);
    }
    return arr;
  }
};

EMSCRIPTEN_BINDINGS(my_module) {
  class_<MyApi>("MyApi")
    .constructor<>()
    .function("hello", &MyApi::hello)
    .function("add", &MyApi::add)
    .property("name", &MyApi::name)
    .function("getRange", &MyApi::getRange);
}

emcc main.cpp glue.cpp --post-js glue.js -s WASM=1 -o index.html

// 等待 Module 加載完成
Module.onRuntimeInitialized = () => {
  const api = new Module.MyApi();
  api.hello();  // 輸出: Hello from C++
  console.log(api.add(2, 3));  // 輸出: 5
  api.name = "Emscripten";
  console.log(api.name);  // 輸出: Emscripten
  console.log(api.getRange(1, 5));  // 輸出: [1,2,3,4]
};

interface Point {
  attribute long x;
  attribute long y;
  Point add(Point other);
};

interface MyApi {
  attribute DOMString name;  // 生成 getter/setter
  [Throws] void riskyOperation();  // 標(biāo)注可能拋出異常
};

#include <emscripten/bind.h>
#include <emscripten/val.h>

// WebIDL 定義簡(jiǎn)單接口
// embind 處理復(fù)雜邏輯
EMSCRIPTEN_BINDINGS(complex_module) {
  // 自定義類型轉(zhuǎn)換
  value_array<std::array<int, 3>>("IntArray3")
    .element(emscripten::index<0>())
    .element(emscripten::index<1>())
    .element(emscripten::index<2>());
  
  // 回調(diào)函數(shù)注冊(cè)
  function("setCallback", &setCallback);
}

#include <emscripten/bind.h>
#include <string>

using namespace emscripten;

class Calculator {
public:
  Calculator() : value_(0) {}
  
  double add(double a, double b) { return a + b; }
  double subtract(double a, double b) { return a - b; }
  
  double getValue() const { return value_; }
  void setValue(double v) { value_ = v; }
  
private:
  double value_;
};

EMSCRIPTEN_BINDINGS(calculator_module) {
  class_<Calculator>("Calculator")
    .constructor<>()
    .function("add", &Calculator::add)
    .function("subtract", &Calculator::subtract)
    .property("value", &Calculator::getValue, &Calculator::setValue);
}

const calc = new Module.Calculator();
calc.add(5, 3);  // 8
calc.value = 10;
console.log(calc.value);  // 10

class MyClass {
public:
  void process(int x) { /* ... */ }
  void process(std::string s) { /* ... */ }
};

EMSCRIPTEN_BINDINGS(my_module) {
  class_<MyClass>("MyClass")
    .constructor<>()
    .function("process", 
      emscripten::select_overload<void(int)>(&MyClass::process))
    .function("processString", 
      emscripten::select_overload<void(std::string)>(&MyClass::process));
}

#include <memory>

class Resource {
public:
  Resource() {}
  void use() { /* ... */ }
};

EMSCRIPTEN_BINDINGS(resource_module) {
  class_<Resource>("Resource")
    .constructor<>()
    .function("use", &Resource::use);
  
  smart_ptr<Resource>("ResourcePtr");
}

enum class Status {
  Idle,
  Running,
  Finished
};

EMSCRIPTEN_BINDINGS(status_module) {
  enum_<Status>("Status")
    .value("Idle", Status::Idle)
    .value("Running", Status::Running)
    .value("Finished", Status::Finished);
}

#include <emscripten/val.h>

void setCallback(emscripten::val jsCallback) {
  // 存儲(chǔ)回調(diào)函數(shù)
  static emscripten::val callback = jsCallback;
  
  // 在某個(gè)時(shí)刻調(diào)用
  callback(42, "hello");
}

EMSCRIPTEN_BINDINGS(callback_module) {
  function("setCallback", &setCallback);
}

Module.setCallback((num, str) => {
  console.log(`Received: ${num}, ${str}`);
});

extern "C" {
  int add(int a, int b) {
    return a + b;
  }
  
  void printString(const char* str) {
    printf("%s\n", str);
  }
}

emcc main.cpp -s EXPORTED_FUNCTIONS='["_add","_printString"]' -o index.html

// ccall: 每次調(diào)用都指定類型
const result = Module.ccall('add', 'number', ['number', 'number'], [5, 3]);
Module.ccall('printString', null, ['string'], ['Hello']);

// cwrap: 包裝成函數(shù)，可重復(fù)調(diào)用
const addFunc = Module.cwrap('add', 'number', ['number', 'number']);
const result2 = addFunc(5, 3);

#include <emscripten.h>

void callJavaScript() {
  // EM_ASM: 執(zhí)行 JS 代碼，無(wú)返回值
  EM_ASM({
    console.log('Hello from C++!');
    alert('Message from Wasm');
  });
  
  // EM_ASM_INT: 執(zhí)行 JS 代碼，返回整數(shù)
  int result = EM_ASM_INT({
    return 42;
  });
  
  // EM_ASM_DOUBLE: 執(zhí)行 JS 代碼，返回浮點(diǎn)數(shù)
  double value = EM_ASM_DOUBLE({
    return 3.14;
  });
  
  // 傳遞參數(shù)
  int x = 10;
  EM_ASM_({
    console.log('Value:', $0);
  }, x);
}

mergeInto(LibraryManager.library, {
  my_cpp_function: function(ptr, len) {
    var str = UTF8ToString(ptr, len);
    console.log('C++ called:', str);
    return 100;
  }
});

extern "C" {
  int my_cpp_function(const char* str, int len);
}

void test() {
  const char* msg = "Hello";
  int result = my_cpp_function(msg, strlen(msg));
}

emcc main.cpp --js-library my_library.js -o index.html

#include <node_api.h>

napi_value Add(napi_env env, napi_callback_info info) {
  size_t argc = 2;
  napi_value args[2];
  napi_get_cb_info(env, info, &argc, args, nullptr, nullptr);
  
  double a, b;
  napi_get_value_double(env, args[0], &a);
  napi_get_value_double(env, args[1], &b);
  
  napi_value result;
  napi_create_double(env, a + b, &result);
  return result;
}

napi_value Init(napi_env env, napi_value exports) {
  napi_value fn;
  napi_create_function(env, nullptr, 0, Add, nullptr, &fn);
  napi_set_named_property(env, exports, "add", fn);
  return exports;
}

NAPI_MODULE(NODE_GYP_MODULE_NAME, Init)

const ffi = require('ffi-napi');
const ref = require('ref-napi');

const lib = ffi.Library('./libmylib', {
  'add': ['int', ['int', 'int']],
  'processString': ['string', ['string']]
});

const result = lib.add(5, 3);

#include "include/cef_v8.h"

class MyV8Handler : public CefV8Handler {
public:
  bool Execute(const CefString& name,
               CefRefPtr<CefV8Value> object,
               const CefV8ValueList& arguments,
               CefRefPtr<CefV8Value>& retval,
               CefString& exception) override {
    if (name == "add") {
      if (arguments.size() == 2 && 
          arguments[0]->IsInt() && 
          arguments[1]->IsInt()) {
        int result = arguments[0]->GetIntValue() + 
                     arguments[1]->GetIntValue();
        retval = CefV8Value::CreateInt(result);
        return true;
      }
    }
    return false;
  }
  
  IMPLEMENT_REFCOUNTING(MyV8Handler);
};

// 注冊(cè)到 JS 上下文
CefRefPtr<CefV8Value> func = CefV8Value::CreateFunction("add", handler);
context->GetGlobal()->SetValue("add", func, V8_PROPERTY_ATTRIBUTE_NONE);

#include <v8.h>

int main() {
  v8::Isolate* isolate = v8::Isolate::New(create_params);
  {
    v8::Isolate::Scope isolate_scope(isolate);
    v8::HandleScope handle_scope(isolate);
    v8::Local<v8::Context> context = v8::Context::New(isolate);
    v8::Context::Scope context_scope(context);
    
    v8::Local<v8::String> source = v8::String::NewFromUtf8(
      isolate, "1 + 2").ToLocalChecked();
    v8::Local<v8::Script> script = 
      v8::Script::Compile(context, source).ToLocalChecked();
    v8::Local<v8::Value> result = script->Run(context).ToLocalChecked();
    
    int value = result->Int32Value(context).FromJust();
    printf("Result: %d\n", value);
  }
  isolate->Dispose();
  return 0;
}

#include "duktape.h"

duk_context *ctx = duk_create_heap_default();
duk_eval_string(ctx, "1 + 2");
int result = duk_get_int(ctx, -1);
printf("Result: %d\n", result);
duk_destroy_heap(ctx);

// C++ 側(cè)
double processNumber(double x) {
  return x * 2.0;
}

// JavaScript 側(cè)
const result = Module.processNumber(3.14);

struct Int64 {
  int32_t low;
  int32_t high;
};

Int64 createInt64(int64_t value) {
  Int64 result;
  result.low = (int32_t)(value & 0xFFFFFFFF);
  result.high = (int32_t)(value >> 32);
  return result;
}

#include <emscripten/bind.h>
#include <string>

std::string getMessage() {
  return "Hello from C++";
}

EMSCRIPTEN_BINDINGS(string_module) {
  function("getMessage", &getMessage);
}

void processString(const std::string& str) {
  printf("Received: %s\n", str.c_str());
}

EMSCRIPTEN_BINDINGS(string_module) {
  function("processString", &processString);
}

#include <emscripten.h>

extern "C" {
  void processCString(const char* str) {
    // str 指向 Wasm 線性內(nèi)存
    printf("%s\n", str);
  }
}

// 分配內(nèi)存并寫(xiě)入字符串
const str = "Hello";
const ptr = Module.allocateUTF8(str);
Module.processCString(ptr);
Module._free(ptr);  // 釋放內(nèi)存

#include <emscripten/bind.h>
#include <emscripten/val.h>

void processArray(emscripten::val jsArray) {
  // 獲取 ArrayBuffer 的指針
  uintptr_t ptr = jsArray["byteOffset"].as<uintptr_t>();
  size_t length = jsArray["length"].as<size_t>();
  
  // 直接訪問(wèn)內(nèi)存（假設(shè)是 Int32Array）
  int32_t* data = reinterpret_cast<int32_t*>(ptr);
  for (size_t i = 0; i < length; ++i) {
    data[i] *= 2;  // 原地修改
  }
}

EMSCRIPTEN_BINDINGS(array_module) {
  function("processArray", &processArray);
}

const arr = new Int32Array([1, 2, 3, 4, 5]);
Module.processArray(arr);
console.log(arr);  // Int32Array [2, 4, 6, 8, 10]

// HEAP8, HEAP16, HEAP32, HEAPU8, HEAPU16, HEAPU32, HEAPF32, HEAPF64
const ptr = Module._malloc(4 * 4);  // 分配 4 個(gè) int32
const view = new Int32Array(Module.HEAP32.buffer, ptr, 4);
view[0] = 1;
view[1] = 2;
view[2] = 3;
view[3] = 4;

Module.processInt32Array(ptr, 4);
Module._free(ptr);

void processInt32Array(int32_t* ptr, size_t length) {
  for (size_t i = 0; i < length; ++i) {
    ptr[i] *= 2;
  }
}

extern "C" {
  void* allocateBuffer(size_t size) {
    return malloc(size);
  }
  
  void freeBuffer(void* ptr) {
    free(ptr);
  }
}

const ptr = Module.allocateBuffer(1024);
// 使用內(nèi)存...
Module.freeBuffer(ptr);

#include <memory>
#include <emscripten/bind.h>

class Buffer {
public:
  Buffer(size_t size) : data_(new uint8_t[size]), size_(size) {}
  ~Buffer() { delete[] data_; }
  
  uint8_t* data() { return data_; }
  size_t size() const { return size_; }
  
private:
  uint8_t* data_;
  size_t size_;
};

EMSCRIPTEN_BINDINGS(buffer_module) {
  class_<Buffer>("Buffer")
    .constructor<size_t>()
    .function("data", &Buffer::data, allow_raw_pointers())
    .function("size", &Buffer::size);
}

const registry = new FinalizationRegistry((ptr) => {
  Module._free(ptr);
});

const ptr = Module._malloc(1024);
registry.register({}, ptr);

#include <emscripten.h>

typedef void (*CallbackFunc)(int value);

void setCallback(CallbackFunc cb) {
  // 存儲(chǔ)回調(diào)函數(shù)指針
  static CallbackFunc callback = cb;
  
  // 在某個(gè)時(shí)刻調(diào)用
  if (callback) {
    callback(42);
  }
}

// 注冊(cè)回調(diào)函數(shù)
const callback = Module.addFunction((value) => {
  console.log('Callback received:', value);
}, 'vi');  // 'vi' 表示 void(int)

Module.setCallback(callback);

// 清理
Module.removeFunction(callback);

#include <emscripten/val.h>

void callJavaScriptCallback(emscripten::val jsCallback) {
  if (!jsCallback.isNull() && !jsCallback.isUndefined()) {
    jsCallback(42, "hello");
  }
}

EMSCRIPTEN_BINDINGS(callback_module) {
  function("callJavaScriptCallback", &callJavaScriptCallback);
}

Module.callJavaScriptCallback((num, str) => {
  console.log(`Received: ${num}, ${str}`);
});

const ptr = Module._malloc(8);
Module.setValue(ptr, 42, 'i32');  // 寫(xiě)入 32 位整數(shù)
const value = Module.getValue(ptr, 'i32');  // 讀取
Module._free(ptr);

extern "C" {
  int add(int a, int b) {
    return a + b;
  }
}

emcc main.cpp -s EXPORTED_FUNCTIONS='["_add","_subtract"]' -o index.html

#include <emscripten.h>

EMSCRIPTEN_KEEPALIVE
int multiply(int a, int b) {
  return a * b;
}

// 偽代碼示例（類似 HarmonyOS JSVM-API）
void processInJSContext() {
  HandleScope scope(env);
  // 創(chuàng)建和使用 JS 對(duì)象
  Local<Object> obj = Object::New(env);
  // scope 析構(gòu)時(shí)自動(dòng)清理
}

#include <emscripten/bind.h>
#include <stdexcept>

void riskyOperation() {
  throw std::runtime_error("Something went wrong");
}

EMSCRIPTEN_BINDINGS(exception_module) {
  function("riskyOperation", &riskyOperation);
}

try {
  Module.riskyOperation();
} catch (e) {
  console.error('Caught exception:', e);
}

#include <emscripten/val.h>

void callJSWithException(emscripten::val jsFunc) {
  try {
    jsFunc();
  } catch (const std::exception& e) {
    // 處理異常
    printf("Exception: %s\n", e.what());
  }
}

// 不好：多次調(diào)用
for (int i = 0; i < 1000; ++i) {
  processSingleValue(i);
}

// 好：批量處理
void processBatch(int* values, size_t count) {
  for (size_t i = 0; i < count; ++i) {
    // 在 Wasm 內(nèi)完成所有計(jì)算
    values[i] *= 2;
  }
}

// 在 C++ 側(cè)完成復(fù)雜計(jì)算
std::vector<int> computeResults(const std::vector<int>& input) {
  std::vector<int> results;
  for (int x : input) {
    results.push_back(complexCalculation(x));
  }
  return results;
}

#pragma pack(push, 1)
struct Data {
  int32_t x;
  int32_t y;
  float z;
};
#pragma pack(pop)

emcc main.cpp -g4 --source-map-base http://localhost:8000/ -o index.html

#include <emscripten.h>

void debugPrint(const char* msg) {
  EM_ASM({
    console.log('C++:', UTF8ToString($0));
  }, msg);
}

emcc main.cpp -s INITIAL_MEMORY=64MB -s ALLOW_MEMORY_GROWTH=1 \
  -s MEMORY_DEBUG=1 -o index.html

開(kāi)始
  │
  ├─ 運(yùn)行在瀏覽器？
  │   ├─ 是 → 使用 Emscripten
  │   │   ├─ 面向?qū)ο蟆?fù)雜類型？ → embind
  │   │   ├─ 簡(jiǎn)單函數(shù)調(diào)用？ → ccall/cwrap
  │   │   └─ 接口多、變更頻繁？ → WebIDL Binder
  │   │
  │   └─ 否 → 繼續(xù)判斷
  │
  ├─ 運(yùn)行在 Node.js？
  │   ├─ 是 → 需要穩(wěn)定、跨版本？ → N-API
  │   │   └─ 快速接入現(xiàn)有庫(kù)？ → Node-FFI
  │   │
  │   └─ 否 → 繼續(xù)判斷
  │
  ├─ 桌面應(yīng)用內(nèi)嵌網(wǎng)頁(yè)？
  │   └─ 是 → CEF V8 綁定
  │
  ├─ 在 C++ 中執(zhí)行 JS？
  │   └─ 是 → V8/Duktape 嵌入
  │
  └─ 跨進(jìn)程/服務(wù)化？
      └─ 是 → WebSocket/HTTP 協(xié)議

interface ImageProcessor {
  void loadImage(ArrayBuffer data);
  void applyFilter(DOMString filterName);
  ArrayBuffer getImageData();
  attribute long width;
  attribute long height;
};

#include <emscripten/bind.h>
#include <emscripten/val.h>
#include <vector>
#include <string>

class ImageProcessor {
public:
  ImageProcessor() : width_(0), height_(0) {}
  
  void loadImage(emscripten::val arrayBuffer) {
    // 從 ArrayBuffer 讀取圖像數(shù)據(jù)
    uintptr_t ptr = arrayBuffer["byteOffset"].as<uintptr_t>();
    size_t length = arrayBuffer["byteLength"].as<size_t>();
    
    imageData_.resize(length);
    uint8_t* src = reinterpret_cast<uint8_t*>(ptr);
    std::copy(src, src + length, imageData_.begin());
    
    // 解析圖像頭獲取尺寸（簡(jiǎn)化示例）
    width_ = 800;
    height_ = 600;
  }
  
  void applyFilter(const std::string& filterName) {
    if (filterName == "grayscale") {
      applyGrayscale();
    } else if (filterName == "blur") {
      applyBlur();
    }
  }
  
  emscripten::val getImageData() {
    // 分配內(nèi)存并返回 ArrayBuffer
    size_t size = imageData_.size();
    uint8_t* ptr = reinterpret_cast<uint8_t*>(malloc(size));
    std::copy(imageData_.begin(), imageData_.end(), ptr);
    
    emscripten::val result = emscripten::val::module_property("HEAPU8")
      .call("subarray", 
            emscripten::val(reinterpret_cast<uintptr_t>(ptr)),
            emscripten::val(reinterpret_cast<uintptr_t>(ptr) + size));
    
    return result["buffer"];
  }
  
  long getWidth() const { return width_; }
  void setWidth(long w) { width_ = w; }
  
  long getHeight() const { return height_; }
  void setHeight(long h) { height_ = h; }
  
private:
  void applyGrayscale() {
    // 灰度化處理
  }
  
  void applyBlur() {
    // 模糊處理
  }
  
  std::vector<uint8_t> imageData_;
  long width_;
  long height_;
};

EMSCRIPTEN_BINDINGS(image_processor_module) {
  class_<ImageProcessor>("ImageProcessor")
    .constructor<>()
    .function("loadImage", &ImageProcessor::loadImage)
    .function("applyFilter", &ImageProcessor::applyFilter)
    .function("getImageData", &ImageProcessor::getImageData)
    .property("width", &ImageProcessor::getWidth, &ImageProcessor::setWidth)
    .property("height", &ImageProcessor::getHeight, &ImageProcessor::setHeight);
}

Module.onRuntimeInitialized = () => {
  const processor = new Module.ImageProcessor();
  
  // 加載圖像
  fetch('image.jpg')
    .then(response => response.arrayBuffer())
    .then(buffer => {
      processor.loadImage(buffer);
      console.log(`Image loaded: ${processor.width}x${processor.height}`);
      
      // 應(yīng)用濾鏡
      processor.applyFilter('grayscale');
      
      // 獲取處理后的數(shù)據(jù)
      const result = processor.getImageData();
      // 使用 result...
    });
};

# 查找 Emscripten
find_program(EMSCRIPTEN_EMCC emcc
  PATHS ${EMSCRIPTEN_ROOT}/emscripten
  NO_DEFAULT_PATH
)

# 生成 WebIDL 綁定
add_custom_command(
  OUTPUT ${CMAKE_CURRENT_BINARY_DIR}/glue.cpp 
         ${CMAKE_CURRENT_BINARY_DIR}/glue.js
  COMMAND python ${EMSCRIPTEN_ROOT}/tools/webidl_binder.py
    ${CMAKE_CURRENT_SOURCE_DIR}/api.idl glue
  DEPENDS ${CMAKE_CURRENT_SOURCE_DIR}/api.idl
  WORKING_DIRECTORY ${CMAKE_CURRENT_BINARY_DIR}
)

# 編譯 Wasm
add_custom_target(wasm_build
  COMMAND ${EMSCRIPTEN_EMCC} 
    ${CMAKE_CURRENT_SOURCE_DIR}/main.cpp
    ${CMAKE_CURRENT_BINARY_DIR}/glue.cpp
    --post-js ${CMAKE_CURRENT_BINARY_DIR}/glue.js
    -s WASM=1
    -s EXPORTED_FUNCTIONS='["_main"]'
    -o ${CMAKE_CURRENT_BINARY_DIR}/index.html
  DEPENDS ${CMAKE_CURRENT_BINARY_DIR}/glue.cpp
)

#include <emscripten/bind.h>
#include <stdexcept>
#include <string>

class Result {
public:
  bool success;
  std::string error;
  int value;
  
  Result(bool s, const std::string& e, int v = 0) 
    : success(s), error(e), value(v) {}
};

Result safeOperation(int input) {
  try {
    if (input < 0) {
      return Result(false, "Input must be non-negative", 0);
    }
    int result = complexCalculation(input);
    return Result(true, "", result);
  } catch (const std::exception& e) {
    return Result(false, e.what(), 0);
  }
}

EMSCRIPTEN_BINDINGS(result_module) {
  value_object<Result>("Result")
    .field("success", &Result::success)
    .field("error", &Result::error)
    .field("value", &Result::value);
  
  register_vector<Result>("ResultVector");
  function("safeOperation", &safeOperation);
}

#include <emscripten/val.h>
#include <emscripten.h>
#include <functional>
#include <queue>
#include <mutex>

class AsyncProcessor {
public:
  void processAsync(emscripten::val callback) {
    // 將任務(wù)加入隊(duì)列
    std::lock_guard<std::mutex> lock(mutex_);
    callbacks_.push(callback);
    
    // 使用 setTimeout 模擬異步
    EM_ASM({
      setTimeout(function() {
        Module._processNext();
      }, 100);
    });
  }
  
  static void processNext() {
    AsyncProcessor* instance = getInstance();
    std::lock_guard<std::mutex> lock(instance->mutex_);
    
    if (!instance->callbacks_.empty()) {
      emscripten::val callback = instance->callbacks_.front();
      instance->callbacks_.pop();
      
      // 調(diào)用回調(diào)
      callback(42, "done");
    }
  }
  
private:
  static AsyncProcessor* getInstance() {
    static AsyncProcessor instance;
    return &instance;
  }
  
  std::queue<emscripten::val> callbacks_;
  std::mutex mutex_;
};

EMSCRIPTEN_BINDINGS(async_module) {
  class_<AsyncProcessor>("AsyncProcessor")
    .constructor<>()
    .function("processAsync", &AsyncProcessor::processAsync);
  
  function("_processNext", &AsyncProcessor::processNext);
}

const processor = new Module.AsyncProcessor();
processor.processAsync((result, status) => {
  console.log(`Async result: ${result}, status: ${status}`);
});

// test.js
const assert = require('assert');

Module.onRuntimeInitialized = () => {
  // 測(cè)試基本功能
  const calc = new Module.Calculator();
  assert.strictEqual(calc.add(2, 3), 5);
  
  // 測(cè)試屬性
  calc.value = 10;
  assert.strictEqual(calc.value, 10);
  
  console.log('All tests passed!');
};

function benchmark() {
  const iterations = 1000000;
  const start = performance.now();
  
  for (let i = 0; i < iterations; ++i) {
    Module.add(i, i + 1);
  }
  
  const end = performance.now();
  console.log(`Time: ${end - start}ms`);
  console.log(`Ops/sec: ${iterations / ((end - start) / 1000)}`);
}