Custom HTML Elements
Built-in support for dataroom-js. Create reusable components without Shadow DOM complexity.
⍼ About
A lightweight, opinionated starter template for building vanilla JavaScript projects with modern tooling. No framework lock-in. No unnecessary abstractions. Just fast, passionate code.
⍼ Features
Web Workers
First-class support for parallel processing with automatic bundling and transformation.
Fast Builds
Powered by Rspack for lightning-fast development and production builds.
Modern CSS
PostCSS with cssnano optimization. Write real CSS—no CSS-in-JS required.
Static Assets
Automatic asset handling for images, fonts, and other static files. Just drop them in assets/.
AI Context
Includes LLM-friendly documentation (AGENTS.md, LLM.md) for AI-assisted development.
WASM Built In
First-class C++ (Emscripten) and Rust (wasm-pack) support with pre-configured build scripts and example components.
⍼ Quick Start
- Scaffold a new project:
npx create-pochade-js my-project - Answer the interactive prompts (title, description, author, license, etc.).
- Enter your project:
cd my-project - Start the dev server:
npm start— then openhttp://localhost:3000
⍼ WebAssembly
Pochade-JS treats WebAssembly as a first-class citizen. Both C++ (via Emscripten) and Rust (via wasm-pack) are pre-configured with working examples.
C++ with Emscripten
Write C++ in src/wasm/cpp/, compile with Emscripten, and call it from JavaScript via cwrap.
// src/wasm/cpp/fibonacci.cpp
#include <emscripten.h>
extern "C" {
EMSCRIPTEN_KEEPALIVE
int fib(int n) {
if (n <= 1) return n;
int a = 0, b = 1;
for (int i = 2; i <= n; ++i) {
int temp = a + b; a = b; b = temp;
}
return b;
}
}
Build: npm run build:wasm:cpp
Rust with wasm-pack
Write Rust in src/wasm/rust/, compile with wasm-bindgen, and import the generated ES module.
// src/wasm/rust/fibonacci/src/lib.rs
use wasm_bindgen::prelude::*;
#[wasm_bindgen]
pub fn fib(n: i32) -> i32 {
if n <= 1 { return n; }
let mut a = 0;
let mut b = 1;
for _ in 2..=n {
let temp = a + b; a = b; b = temp;
}
b
}
Build: npm run build:wasm:rust
Using WASM in Components
Load your compiled module in a dataroom-js component and call it like any JavaScript function:
// Import the wasm binary URL (handled by the bundler)
import wasmUrl from './wasm/cpp/fibonacci.wasm';
// Dynamic import of the Emscripten glue module
const FibonacciCppModule = await import('./wasm/cpp/fibonacci.js');
// Instantiate with locateFile so it finds the .wasm binary
const Module = await FibonacciCppModule.default({
locateFile: (filename) => filename.endsWith('.wasm') ? wasmUrl : filename
});
// Create a typed JS wrapper around the C++ function
const fib = Module.cwrap('fib', 'number', ['number']);
// Call it!
const result = fib(10);
⍼ What You Get
my-project/
├── assets/ # Static files (images, fonts, etc.)
├── src/ # JavaScript source files
│ ├── example-component.js
│ └── example-webworker.js
├── styles/ # CSS files
│ └── variables.css
├── scripts/ # Build scripts
│ └── transform-workers.js
├── index.html # Main HTML file
├── index.js # Main JS entry point
├── index.css # Main CSS file
├── rspack.config.js # Build configuration
├── package.json # Project metadata
└── .env.example # Environment variable template