🐜 AntCloud SDK

Robust WebAssembly module loading with caching and dynamic UI binding.

Quick Start

<!-- Include SDK from CDN -->
<script type="module" src="https://cdn.jsdelivr.net/gh/yannbanas/antcloud-sdk@main/ant-module.js"></script>

<!-- Use the component -->
<ant-module name="fibonacci"></ant-module>

That's it! The SDK automatically:

• Fetches package info from registry
• Caches WASM in IndexedDB (downloads only on new version)
• Loads UI template
• Binds all events
• Executes WASM functions

CDN Links

<!-- jsDelivr (recommended) -->
<script type="module" src="https://cdn.jsdelivr.net/gh/yannbanas/antcloud-sdk@main/ant-module.js"></script>

<!-- With specific version tag -->
<script type="module" src="https://cdn.jsdelivr.net/gh/yannbanas/[email protected]/ant-module.js"></script>

<!-- unpkg (after npm publish) -->
<script type="module" src="https://unpkg.com/@banastechnologie/antcloud-sdk"></script>

Features

| Feature | Description | |---------|-------------| | 📦 IndexedDB Cache | WASM downloaded only once per version | | ⚡ Fast Reload | Cached modules load instantly | | 🎨 Dynamic UI | Binds to data-ant-* attributes automatically | | 🔄 Version Check | Always uses latest version from registry | | 🔌 Clean API | Simple programmatic control |

How Caching Works

First visit:
  └─► Fetch package info (check version)
  └─► No cache → Download WASM → Store in IndexedDB
  └─► Load UI → Render → Ready!

Return visit (same version):
  └─► Fetch package info → v1.2.0
  └─► Cache exists with v1.2.0 → Use cached WASM ✅
  └─► No download needed!

After new version published:
  └─► Fetch package info → v1.3.0 (new!)
  └─► Cache has v1.2.0 → Download v1.3.0
  └─► Update cache → Ready!

Attributes

| Attribute | Description | Default | |-----------|-------------|---------| | name | Package name (required) | - | | registry | Registry URL | https://antcloud-registry.up.railway.app | | no-cache | Disable caching (for development) | - |

<!-- Basic usage -->
<ant-module name="fibonacci"></ant-module>

<!-- Custom registry -->
<ant-module name="my-package" registry="https://my-registry.com"></ant-module>

<!-- Disable cache (dev mode) -->
<ant-module name="fibonacci" no-cache></ant-module>

UI Template Attributes

The SDK binds these data-ant-* attributes in your UI template:

| Attribute | Description | |-----------|-------------| | data-ant-function="name" | Function selector (tab/button) | | data-ant-inputs="name" | Input group for a function | | data-ant-input="n" | Input field | | data-ant-type="i32\|i64\|f32\|f64" | Input type for conversion | | data-ant-display="n" | Display value (for sliders) | | data-ant-execute | Execute button | | data-ant-output | Result container | | data-ant-value | Result value | | data-ant-time | Execution time | | data-ant-expr | Expression called | | data-ant-status-dot | Status indicator | | data-ant-status-text | Status text | | data-ant-true-label | Label for true (bool functions) | | data-ant-false-label | Label for false (bool functions) |

Template Variables

Use these in your UI HTML:

{{name}}        → Package name
{{version}}     → Latest version
{{author}}      → Package author
{{description}} → Package description
{{license}}     → Package license
{{downloads}}   → Download count
{{stars}}       → Star count

JavaScript API

const module = document.querySelector('ant-module');

// Wait for ready
module.addEventListener('ant-ready', (e) => {
  console.log(e.detail.name, e.detail.version, e.detail.functions);
});

// Listen for results
module.addEventListener('ant-result', (e) => {
  console.log(e.detail.function, e.detail.result, e.detail.time);
});

// Listen for errors
module.addEventListener('ant-error', (e) => {
  console.error(e.detail.error);
});

// Programmatic control
module.setValues({ n: 42 });
module.getValues();              // { n: "42" }
module.setFunction('is_fibonacci');
module.getFunction();            // "is_fibonacci"
module.getFunctions();           // ["fibonacci", "is_fibonacci", ...]

// Execute and get result
const result = await module.invoke('fibonacci', { n: 50 });

// Clear cache (force re-download)
await module.clearCache();

Publishing Packages

Create a WASM module with UI and publish to AntHive registry:

# Publish package with UI
curl -X POST https://antcloud-registry.up.railway.app/api/v1/packages \
  -H "Authorization: Bearer YOUR_API_KEY" \
  -F "[email protected]" \
  -F "[email protected]" \
  -F "[email protected]"

Example UI Template

Your ui.html should be HTML/CSS only (no JavaScript). The SDK handles all logic:

<style>
  :host { display: block; font-family: system-ui; }
  /* ... your styles ... */
</style>

<div class="card">
  <h2>{{name}}</h2>
  <p>{{description}}</p>
  
  <!-- Function tabs -->
  <div class="tabs">
    <button data-ant-function="calculate">calculate()</button>
    <button data-ant-function="check">check()</button>
  </div>
  
  <!-- Inputs -->
  <div data-ant-inputs="calculate">
    <input type="range" data-ant-input="n" data-ant-type="i32" min="0" max="100" value="10">
    <span data-ant-display="n">10</span>
  </div>
  
  <!-- Execute -->
  <button data-ant-execute>▶ Execute</button>
  
  <!-- Result -->
  <div data-ant-output>
    <span data-ant-value></span>
    <span data-ant-time></span>
  </div>
</div>

Registry

Default registry: antcloud-registry.up.railway.app

Browse available packages and documentation at the registry homepage.

License

MIT © BanasTechnologie