JS Framework

Module map

Import what you need in your entry point (static/main.mjs):

import { xhr, fillWith, Subscribe, updateElement } from '/static/framework/vesta.mjs';
import { goTo, toggleMenu, toggleFM } from '/static/framework/navigation.mjs';
import G from '/static/framework/global.mjs';

HTTP requests — xhr()

// Simple GET
xhr('/api_posts', (raw) => {
    const posts = JSON.parse(raw);
    console.log(posts);
});

// POST with JSON body
xhr('/api_create', (raw) => {
    const result = JSON.parse(raw);
    if (result.ok) updateElement('postList', ...);
}, "POST", true, JSON.stringify({ title, content }));

Global state — global.mjs

A single plain object exported from global.mjs. Import it anywhere — it's the same reference everywhere (ES module singleton).

import G from '/static/framework/global.mjs';

// Write
G.user = { id: 42, name: "Alice" };
G.posts = [];

// Read anywhere
console.log(G.user.name);

Typical top-level shape used with Subscribe:

// global.mjs — initialise your state shape here
const G = {
    user:     null,
    posts:    [],
    settings: {},
    i18n:     {},
};
export default G;

Reactive rendering

Subscribe

import G from '/static/framework/global.mjs';
import { Subscribe, updateElement } from '/static/framework/vesta.mjs';

// Bind #post-list to G.posts — escapeHTML() guards the untrusted title against XSS
Subscribe('#post-list', (posts) => {
    return posts.map(p => `<div class="post">${escapeHTML(p.title)}</div>`).join('');
}, 'posts', { target: 'html', element: G.posts });

// Later — update state and re-render automatically
G.posts = [{ title: "Hello" }, { title: "World" }];
updateElement('posts', G.posts);

State mutation helpers

HTML templates — fillWith()

// static/templates/post.html
`<div class="post-card">
  <h3>${element.title}</h3>
  <p>${element.content}</p>
</div>`

import { fillWith } from '/static/framework/vesta.mjs';

const markup = await fillWith('post', posts);
document.getElementById('list').innerHTML = markup;

Output escaping (XSS)

Interpolation in templates (fillWith, getTemplate, loadTemplate, and Subscribe content) is raw by default — the engine stays flexible so you can compose markup freely. That means you are responsible for escaping any untrusted value before it lands in the DOM.

// Trusted / your own markup — interpolate freely:
`<ul>${fillWith('row', items)}</ul>`

// UNTRUSTED data (user input, query params, message bodies) — wrap in escapeHTML():
`<p>${escapeHTML(user.name)}</p>`

Navigation

All navigation helpers are in navigation.mjs.

import { goTo, toggleFM, gotoStep, hideLoadingScreen } from '/static/framework/navigation.mjs';

// Navigate to a section
document.getElementById('btn-posts').addEventListener('click', () => {
    goTo('main-content', 'posts', { category: 'nav', id: 'posts' });
});

// Multi-step form
document.getElementById('btn-next').addEventListener('click', () => {
    gotoStep(currentStep + 1, 'wizard');
});

// Init
hideLoadingScreen();

WebSocket client

// static/ws/onMessage.mjs — you write this
export function onMessage(data) {
    const msg = JSON.parse(data);
    switch (msg.type) {
        case 'notification':
            pushElement('notifications', msg.content);
            break;
        case 'update':
            updateElement('feed', msg.payload);
            break;
    }
}

// main.mjs
import { initWebSockets } from '/static/framework/websockets.mjs';

initWebSockets(); // call once at startup

Internationalisation

Translation files live at static/translations/{lang}.mjs and export a plain object of key → translated string.

// static/translations/en.mjs
export default {
    welcome: "Welcome",
    logout:  "Sign out",
    save:    "Save changes",
};

// static/translations/fr.mjs
export default {
    welcome: "Bienvenue",
    logout:  "Se déconnecter",
    save:    "Enregistrer",
};

import { loadTranslations, t } from '/static/translations/translation.mjs';

await loadTranslations('fr');
console.log(t('welcome')); // → "Bienvenue"

// In a template
`<button>${t('save')}</button>`

Utility functions

import { checkEnter, getTimeStr, generateUUID } from '/static/framework/vesta.mjs';

// Submit on Enter
input.addEventListener('keydown', (e) => checkEnter(e, submitForm));

// Format a timestamp
const label = getTimeStr(post.created_at, { dateStyle: 'medium', timeStyle: 'short' });

// Generate an ID
const id = generateUUID(); // "550e8400-e29b-41d4-a716-446655440000"

Markdown renderer

A custom client-side parser. Syntax differs slightly from standard Markdown — designed for user-generated content with safe rendering.

import { render } from '/static/markdown/markdown.mjs';

const html = render("**bold** and _italic_ text\n\n> a blockquote");
document.getElementById('content').innerHTML = html;