🔥 Blaze-NG

import { Template, Blaze } from '@blaze-ng/core';
import { Spacebars } from '@blaze-ng/spacebars';

import { Template } from '@blaze-ng/core';

Template.hello.helpers({
  name() {
    return 'World';
  },
  count() {
    return Session.get('count') || 0;
  },
});

Template.hello.events({
  'click button'(event, instance) {
    const current = Session.get('count') || 0;
    Session.set('count', current + 1);
  },
});

Template.todoList.helpers({
  todos() {
    return Todos.find({}, { sort: { createdAt: -1 } });
  },
});

Template.todoList.events({
  'click .delete'(event, instance) {
    const todo = Blaze.getData(event.currentTarget.parentElement);
    Todos.remove(todo._id);
  },
});

Template.dynamicButton.helpers({
  buttonClass() {
    return Template.instance().data.variant || 'primary';
  },
  isDisabled() {
    return Template.instance().data.disabled;
  },
  isLoading() {
    return Template.instance().state.get('loading');
  },
  label() {
    return Template.instance().data.label || 'Submit';
  },
});

Template.myComponent.onCreated(function () {
  // Runs once when the template instance is created
  this.counter = new ReactiveVar(0);
  this.autorun(() => {
    // Re-runs whenever reactive data changes
    console.log('Counter is now:', this.counter.get());
  });
});

Template.myComponent.onRendered(function () {
  // DOM is now available
  const canvas = this.find('canvas');
  this.chart = new Chart(canvas, {
    /* ... */
  });
});

Template.myComponent.onDestroyed(function () {
  // Clean up resources
  if (this.chart) {
    this.chart.destroy();
  }
});

Template.richContent.helpers({
  htmlContent() {
    return '<strong>Bold</strong> and <em>italic</em>';
  },
});
// {{{htmlContent}}} renders: <strong>Bold</strong> and <em>italic</em>
// {{htmlContent}} renders: &lt;strong&gt;Bold&lt;/strong&gt; and &lt;em&gt;italic&lt;/em&gt;

import { Blaze, Template } from '@blaze-ng/core';

// Render any template to an HTML string — perfect for SSR
const html = Blaze.toHTML(Template.myPage);
// Or with data:
const html = Blaze.toHTMLWithData(Template.myPage, { title: 'Hello' });

import { Blaze } from '@blaze-ng/core';

// Register helpers available in every template
Blaze.registerHelper('formatDate', (date) => {
  return new Date(date).toLocaleDateString();
});

Blaze.registerHelper('pluralize', (count, singular, plural) => {
  return count === 1 ? singular : plural || singular + 's';
});

Blaze.registerHelper('eq', (a, b) => a === b);
Blaze.registerHelper('gt', (a, b) => a > b);
Blaze.registerHelper('and', (a, b) => a && b);
Blaze.registerHelper('or', (a, b) => a || b);

import { Blaze } from '@blaze-ng/core';

// Render to a specific DOM element
const view = Blaze.render(Template.myWidget, document.getElementById('container'));

// Render with a data context
const view = Blaze.renderWithData(
  Template.myWidget,
  { title: 'Hello', items: [1, 2, 3] },
  document.getElementById('container'),
);

// Clean up when done
Blaze.remove(view);

import { Blaze } from '@blaze-ng/core';

// Use Meteor Tracker (via the adapter package)
import { createTrackerAdapter } from '@blaze-ng/meteor';
Blaze.setReactiveSystem(createTrackerAdapter(Tracker));

// Or use the built-in simple reactive system (for testing/non-Meteor apps)
import { SimpleReactiveSystem } from '@blaze-ng/core/testing';
Blaze.setReactiveSystem(new SimpleReactiveSystem());

// Or implement your own:
Blaze.setReactiveSystem({
  autorun(fn) {
    /* ... */
  },
  nonReactive(fn) {
    /* ... */
  },
  ReactiveVar(initialValue) {
    /* ... */
  },
});

import { Template, TemplateInstance, Blaze } from '@blaze-ng/core';

// Type-safe helper definitions
Template.myComponent.helpers({
  greeting(): string {
    return `Hello, ${this.name}!`;
  },
  items(): Array<{ id: number; label: string }> {
    return Template.instance().data.items;
  },
});

// Type-safe event handlers
Template.myComponent.events({
  'click .delete'(event: MouseEvent, instance: TemplateInstance) {
    const itemId = instance.data.itemId;
    // ...
  },
});

// Type-safe lifecycle
Template.myComponent.onCreated(function (this: TemplateInstance) {
  this.autorun(() => {
    // ...
  });
});