Tina4 JavaScript - Quick Reference#

npx tina4js create my-appcd my-appnpm installnpm run dev

import { signal, computed, effect, batch } from 'tina4js';​const count = signal(0);const doubled = computed(() => count.value * 2);​effect(() => console.log(`Count: ${count.value}`));​count.value = 5;        // triggers effect → "Count: 5"console.log(doubled.value); // 10​// Batch multiple updates into one notificationbatch(() => { count.value = 10; count.value = 20; });

import { signal, html } from 'tina4js';​const name = signal('World');​const view = html`  <div>    <h1>Hello, ${name}!</h1>    <input @input=${(e: Event) => {      name.value = (e.target as HTMLInputElement).value;    }}>    <button @click=${() => { name.value = 'World'; }}>Reset</button>  </div>`;​document.getElementById('root')!.appendChild(view);

import { Tina4Element, html, signal } from 'tina4js';​class MyCounter extends Tina4Element {  static props = { label: String };  static styles = `:host { display: block; }`;​  count = signal(0);​  render() {    return html`      <div>        <span>${this.prop('label')}: ${this.count}</span>        <button @click=${() => this.count.value++}>+</button>      </div>    `;  }​  onMount() { console.log('Connected!'); }  onUnmount() { console.log('Removed!'); }}​customElements.define('my-counter', MyCounter);

<my-counter label="Clicks"></my-counter>

import { route, router, navigate, html } from 'tina4js';​route('/', () => html`<h1>Home</h1>`);route('/user/{id}', ({ id }) => html`<h1>User ${id}</h1>`);route('/admin', {  guard: () => isLoggedIn() || '/login',  handler: () => html`<h1>Admin</h1>`});route('*', () => html`<h1>404</h1>`);​router.start({ target: '#root', mode: 'history' });​// Navigate programmaticallynavigate('/user/42');

import { api } from 'tina4js';​api.configure({ baseUrl: '/api', auth: true });​const users = await api.get('/users');const user  = await api.get('/users/42');await api.post('/users', { name: 'Andre' });await api.put('/users/42', { name: 'Updated' });await api.delete('/users/42');

import { ws } from 'tina4js';​const socket = ws.connect('/ws/chat');   // status & connected are signals - bind them in templates​const view = html`  <div>Status: ${socket.status}</div>  ${() => socket.connected.value ? html`<span>● live</span>` : html`<span>○ reconnecting...</span>`}`;​socket.on('message', (msg) => console.log(msg));socket.send({ type: 'hello' });

import { sse } from 'tina4js';​const stream = sse.connect('/events', { json: true });   // Server-Sent Events / NDJSONstream.on('data', (row) => append(row));

import { pwa } from 'tina4js';​pwa.register({  name: 'My App',  shortName: 'App',  themeColor: '#1a1a2e',  cacheStrategy: 'network-first',  // or 'cache-first', 'stale-while-revalidate'  precache: ['/', '/css/styles.css'],  offlineRoute: '/offline',});

import { signal } from 'tina4js';import { persist, clearPersistedKeys } from 'tina4js/storage';​const theme = persist(signal('light'), { key: 'theme' });   // survives reloads, syncs across tabstheme.value = 'dark';                                        // written to localStorage automatically​clearPersistedKeys(['theme']);                               // remove on logout

// Enable the dev overlay (Ctrl+Shift+D to toggle). Dev only - tree-shaken from production.if (import.meta.env.DEV) import('tina4js/debug');

npx tina4js build --target php# Outputs JS to src/public/js/# Generates src/templates/pages/index.twig

npx tina4js build --target python# Outputs JS to src/public/js/# Generates src/templates/pages/index.twig

// Import from sub-paths to help the bundler tree-shake:import { signal, html } from 'tina4js/core';import { route, router } from 'tina4js/router';import { api } from 'tina4js/api';import { ws } from 'tina4js/ws';import { sse } from 'tina4js/sse';import { persist } from 'tina4js/storage';import { pwa } from 'tina4js/pwa';