Advanced Topics

// C# with RazorHelpers (Recommended)
app.MapGet("/api/users/table", async (UserService users) =>
{
    var data = await users.GetAllAsync();
    return RazorResults.Razor(
        Html.Table(data)
            .Column("Name", u => u.Name)
            .Column("Actions", u => Html.Button("Delete")
                .Attr("@click", $"deleteUser({u.Id})"))
    );
});

class UserTable extends Component {
  async loadTable() {
    const html = await fetch('/api/users/table')
      .then(r => r.text())
    this.$el.innerHTML = html
    this.hydrate(this.$el)
  }

  async deleteUser(id) {
    await fetch(`/api/users/${id}`, { method: 'DELETE' })
    await this.loadTable()  // Refresh from server
  }
}

import { enableDevTools } from '@noundryfx/nounjs'

// Enable on localhost only
if (location.hostname === 'localhost') {
  enableDevTools()
}

// Or with environment check
if (import.meta.env?.DEV) {
  enableDevTools()
}

<template>
  <div :for="user of users">
    { user.name } - { user.role }
  </div>
</template>

<script lang="ts">
interface User {
  id: number
  name: string
  role: 'admin' | 'user'
}

export default {
  users: [] as User[],

  async mounted(): Promise<void> {
    this.users = await api.getUsers()  // Auto-updates DOM
  }
}
</script>

import { Component, mount } from '@noundryfx/nounjs'

interface User {
  id: number
  name: string
  email: string
}

class UserList extends Component {
  users: User[] = []
  loading: boolean = true

  async mounted(): Promise<void> {
    this.users = await api.getUsers()
    this.loading = false  // Reactivity auto-updates DOM
  }
}

import { createVirtualList } from './build/noun.esm.js'

// Create virtual list with 10,000 items
const list = createVirtualList(
  document.getElementById('container'),
  {
    items: users,          // Array of items
    itemHeight: 40,        // Fixed height per item
    containerHeight: 400,  // Visible area height
    bufferSize: 5,         // Extra items above/below
    renderItem: (user, index) => `
      <div class="p-2 border-b">
        ${user.name} - ${user.email}
      </div>
    `
  }
)

// Update items dynamically
list.update(newUsers)

// Scroll programmatically
list.scrollToIndex(500)  // Jump to item 500
list.scrollToTop()       // Jump to first item
list.scrollToBottom()    // Jump to last item

// Cleanup when done
list.destroy()

const allUsers = [...] // 10,000 users

const list = createVirtualList(container, {
  items: allUsers,
  itemHeight: 40,
  containerHeight: 400,
  renderItem: (user) => `
    <div class="p-2">${user.name}</div>
  `
})

// Filter on search input
searchInput.addEventListener('input', (e) => {
  const query = e.target.value.toLowerCase()
  const filtered = allUsers.filter(u =>
    u.name.toLowerCase().includes(query)
  )
  list.update(filtered)
})

using Noun.Tuxedo;

[Table("Users")]
public class User
{
    [Key]
    public int Id { get; set; }

    [Column("first_name")]
    public string FirstName { get; set; } = "";

    [Column("last_name")]
    public string LastName { get; set; } = "";

    public string Email { get; set; } = "";

    [Column("is_active")]
    public bool IsActive { get; set; } = true;

    [Computed]
    public DateTime CreatedAt { get; set; }

    // Computed display property
    [Write(false)]
    public string FullName => $"{FirstName} {LastName}";
}

[ApiController]
[Route("api/[controller]")]
public class UsersController : ControllerBase
{
    private readonly IDbConnection _db;

    public UsersController(IDbConnection db) => _db = db;

    [HttpGet("virtual-list")]
    public async Task<IActionResult> GetUsers(
        [FromQuery] int pageIndex = 0,
        [FromQuery] int pageSize = 50,
        [FromQuery] string? search = null)
    {
        var sql = "SELECT * FROM Users WHERE is_active = 1";

        if (!string.IsNullOrEmpty(search))
            sql += " AND (first_name LIKE @Search OR email LIKE @Search)";

        sql += " ORDER BY id";

        // Tuxedo: Native pagination
        var result = await _db.QueryPagedAsync<User>(
            sql,
            pageIndex: pageIndex,
            pageSize: pageSize,
            param: new { Search = $"%{search}%" });

        return Ok(result);
    }
}

public class UserService
{
    private readonly IDbConnection _db;

    public UserService(IDbConnection db) => _db = db;

    public async Task<PagedResult<User>> GetUsersAsync(
        int pageIndex, int pageSize,
        string? search, string? department)
    {
        var builder = new QueryBuilder<User>(TuxedoDialect.SqlServer)
            .SelectAll()
            .Where(u => u.IsActive);

        if (!string.IsNullOrEmpty(search))
            builder.And($"(first_name LIKE @s OR email LIKE @s)",
                new { s = $"%{search}%" });

        if (!string.IsNullOrEmpty(department))
            builder.And(u => u.Department == department);

        builder.OrderBy(u => u.LastName)
               .Page(pageIndex, pageSize);

        // Returns PagedResult<T> with Items, TotalCount, etc.
        return await builder.ToPagedResultAsync(_db);
    }
}

// Fetch from C# API
async function loadUsers(page = 0, search = '') {
  const params = new URLSearchParams({
    pageIndex: page,
    pageSize: 50,
    ...(search && { search })
  })

  const res = await fetch(`/api/users/virtual-list?${params}`)
  const data = await res.json()

  // data = { items, pageIndex, pageSize, totalCount,
  //          totalPages, hasNextPage, hasPreviousPage }

  return data.items
}

// Initialize VirtualList with API data
const users = await loadUsers()

const list = createVirtualList(container, {
  items: users,
  itemHeight: 60,
  containerHeight: 500,
  renderItem: (user) => `
    <div class="p-3 border-b">
      <div class="font-medium">${user.fullName}</div>
      <div class="text-sm text-gray-500">${user.email}</div>
    </div>
  `
})

// Update on search
searchInput.oninput = async (e) => {
  const users = await loadUsers(0, e.target.value)
  list.update(users)
}