Build with Forge

<script src="forge.js"></script>
<!-- Forge is now available as window.Forge -->

const Forge = require('./forge.js');

const app = Forge.createComponent('#app', {
  data: { count: 0 },
  template: `
    <h2>Count: {{ count }}</h2>
    <button data-on="click:increment">+ Increment</button>
  `,
  methods: {
    increment() {
      this.setData(d => ({ count: d.count + 1 }));
    }
  }
});

{# comment — stripped at compile time #}

<!-- Escaped (XSS-safe) -->
<p>Hello, {{ name }}</p>

<!-- Raw HTML -->
<div>{{{ htmlContent }}}</div>

<!-- Conditionals -->
{% if isAdmin %}
  <button>Delete</button>
{% else if isMod %}
  <button>Moderate</button>
{% else %}
  <p>Read-only</p>
{% endif %}

<!-- Loops (item.index always available) -->
<ul>
{% each users as user %}
  <li>{{ user.index + 1 }}. {{ user.name }}</li>
{% endeach %}
</ul>

<!-- Local variable -->
{% set greeting = "Hello, " + name %}
<p>{{ greeting }}</p>

// Render once
const html = Forge.render(
  `<ul>{% each items as i %}<li>{{ i.name }}</li>{% endeach %}</ul>`,
  { items: [{ name: 'Alpha' }, { name: 'Beta' }] }
);

// Compile once, call many times
const render = Forge.compile('<h1>{{ title }}</h1>');
document.body.innerHTML = render({ title: 'Forge' });

const UserCard = Forge.defineComponent({
  data: { likes: 0, liked: false },
  template: `
    <div class="card">
      <h3>{{ name }}</h3>
      <button data-on="click:toggleLike">
        {% if liked %}♥ Liked{% else %}♡ Like{% endif %}
        ({{ likes }})
      </button>
    </div>
  `,
  methods: {
    toggleLike() {
      this.setData(d => ({
        liked: !d.liked,
        likes: d.liked ? d.likes - 1 : d.likes + 1
      }));
    }
  },
  lifecycle: {
    mounted()   { console.log('mounted'); },
    updated()   { console.log('updated', this.data); },
    destroyed() { console.log('destroyed'); }
  }
});

Forge.createComponent('#user-card', {
  ...UserCard,
  data: { ...UserCard.data, name: 'Ada Lovelace' }
});

<!-- Single event -->
<button data-on="click:save">Save</button>

<!-- Multiple events -->
<input data-on="input:handleInput,blur:validate" />

<!-- Attribute form -->
<button data-onclick="handleClick">Click</button>

const store = Forge.createStore({ user: null, theme: 'dark' });

// Computed value
store.computed('isLoggedIn', s => s.user !== null);

// Update state
store.setState({ user: { name: 'Ada', role: 'admin' } });

// Subscribe
const unsub = store.subscribe((next, prev) => {
  console.log('Changed', prev, '→', next);
});

console.log(store.getComputed('isLoggedIn')); // true

// Connect to a component
Forge.createComponent('#nav', {
  store,
  storeKeys: ['user', 'theme'],
  template: `<p>Welcome, {{ user.name }}!</p>`
});

unsub(); // clean up

const router = Forge.createRouter([
  {
    path: '/',
    title: 'Home',
    render: () => '<h1>Home</h1>'
  },
  {
    path: '/users/:id',
    title: 'User Profile',
    render: ({ params }) =>
      Forge.render('<h1>User: {{ id }}</h1>', params)
  },
  {
    path: '/dashboard',
    component: DashboardComponent
  },
  {
    path: '/old',
    redirect: '/new'
  }
], {
  mode: 'hash',     // 'hash' | 'history'
  outlet: '#app'
});

router.start();
router.push('/users/42');
console.log(router.params); // { id: '42' }

router.on('navigate', ({ path, params }) => {
  console.log('→', path, params);
});

const bus = Forge.createBus();

const off = bus.on('user:login', (user) => {
  console.log('Logged in:', user.name);
});

bus.once('app:ready', () => console.log('Ready!'));
bus.emit('user:login', { name: 'Ada' });
bus.emit('app:ready');
off(); // unsubscribe

Forge.createComponent('#demo-counter', {
  data: { count: 0 },
  template: `
    <div class="demo-counter">
      <button class="demo-btn" data-on="click:dec">−</button>
      <span class="demo-count-val">{{ count }}</span>
      <button class="demo-btn" data-on="click:inc">+</button>
    </div>
  `,
  methods: {
    inc() { this.setData(d => ({ count: d.count + 1 })); },
    dec() { this.setData(d => ({ count: d.count - 1 })); }
  }
});

Forge.createComponent('#demo-todo', {
  data: {
    input: '',
    items: [{ text: 'Try Forge.js', done: false }]
  },
  template: `
    <div class="todo-input-row">
      <input class="todo-input" data-on="input:onInput"
             placeholder="Add a task…" />
      <button class="todo-add-btn" data-on="click:addItem">Add</button>
    </div>
    <ul class="todo-list" role="list">
    {% each items as item %}
      <li class="todo-item">
        <input type="checkbox" {% if item.done %}checked{% endif %}
               data-on="click:toggle" data-idx="{{ item.index }}" />
        <span class="{{ item.done ? 'done' : '' }}">
          {{ item.text }}
        </span>
        <button class="todo-remove" data-on="click:remove"
                data-idx="{{ item.index }}" aria-label="Remove">✕</button>
      </li>
    {% endeach %}
    </ul>
  `,
  methods: { /* ... */ }
});