frond.js: Client-Side Helper#

<script src="/js/frond.min.js"></script>

frond.request("/api/users", {    method: "GET",    onSuccess: function(data, status, xhr) {        console.log(data);    },    onError: function(status, xhr) {        console.error("Failed:", status);    }});

frond.request("/api/users", function(data) {    console.log(data);});

frond.load("/dashboard", "content");frond.load("/profile", "main", function(html, raw) {    console.log("Loaded");});

frond.post("/api/save", { name: "Alice" }, "message", function(html, raw) {    console.log("Saved");});

frond.inject('<div>Hello</div><script>console.log("injected")</script>', "content");

var data = frond.form.collect("myForm");

frond.form.submit("loginForm", "/login", "message", function(html) {    window.location = "/dashboard";});

<form id="loginForm" method="POST" action="/login">    {{ form_token() }}    <input type="email" name="email">    <input type="password" name="password">    <button type="button" onclick="frond.form.submit('loginForm', '/login', null, function(){ window.location='/dashboard'; })">        Login    </button></form>

frond.form.show("create", "/products/new", "form");frond.form.show("edit", "/products/42/edit", "form");frond.form.show("delete", "/products/42", "form");

var conn = frond.ws("ws://localhost:7146/ws/chat", {    reconnect: true,    reconnectDelay: 1000,    maxReconnectDelay: 30000,    onOpen: function() { console.log("Connected"); },    onClose: function(code, reason) { console.log("Closed"); },    onError: function(err) { console.error(err); }});​// Listen for messagesconn.on("message", function(data) {    console.log("Received:", data);});​// Send a messageconn.send({ type: "chat", text: "Hello" });​// Closeconn.close();

var stream = frond.sse("/api/sse/sales", {    events: ["order", "stock"],    json: true,    onOpen: function() { console.log("Stream open"); }});​stream.on("message", function(data, eventName) {    console.log(eventName, data);});​stream.close();

{% live "prices" poll 5 %}  <ul>    {% for row in rows %}<li>{{ row.name }}: {{ row.price }}</li>{% endfor %}  </ul>{% endlive %}

<div data-frond-live="prices" id="live-prices" data-mode="poll" data-interval="5" data-src="/__frond/live/prices">  ...first-paint HTML...</div>

# Pythonfrom tina4_python.frond import live_source​@live_source("prices")def prices(request):    return {"rows": Price.all()}

// PHPFrond::liveSource("prices", fn($request) => ["rows" => Price::all()]);

# RubyTina4::Frond.live_source("prices") { |request| { rows: Price.all } }

// NodeFrond.liveSource("prices", (request) => ({ rows: Price.all() }));

await push_live("prices", {"rows": Price.all()})   # Python

Tina4::Frond.push_live("prices", { rows: Price.all })   # Ruby

Frond.pushLive("prices", { rows: Price.all() });   // Node   (PHP: Frond::pushLive)

frond.cookie.set("theme", "dark", 30);    // Set cookie, expires in 30 daysfrond.cookie.get("theme");                 // "dark"frond.cookie.remove("theme");              // Delete cookie

frond.message("User created!", "success");frond.message("Something went wrong", "danger");

frond.popup("/preview", "Preview", 800, 600);

frond.report("/api/reports/monthly.pdf");

frond.graphql("/api/graphql", "{ products { id name price } }", {}, {    onSuccess: function(result) {        console.log(result.data);        if (result.errors) console.warn(result.errors);    }});

frond.graphql("/api/graphql",    'query ($term: String!) { search(term: $term) { id name } }',    { term: "widget" },    function(result) {        console.log(result.data.search);    });

// Set after loginfrond.token = "eyJhbGciOiJIUzI1NiIs...";​// Readconsole.log(frond.token);​// Clear on logoutfrond.token = null;

<form id="uploadForm">    {{ form_token() }}    <input type="file" name="avatar">    <button type="button" onclick="frond.form.submit('uploadForm', '/api/upload', 'message')">        Upload    </button></form>

<input type="file" name="files[]" multiple>