simple-boot-front

import 'reflect-metadata';
import { SimpleBootFront } from '@dooboostore/simple-boot-front/SimpleBootFront';
import { SimFrontOption, UrlType } from '@dooboostore/simple-boot-front/option/SimFrontOption';
import { IndexRouterComponent } from './pages/index.router.component';

// Configure application
const config = new SimFrontOption(
  { window, urlType: UrlType.path },
  { rootRouter: IndexRouterComponent }
);

// Create and run application
const app = new SimpleBootFront(config);
app.run();

// Application is now running!
// Router will handle all navigation automatically

import { Sim } from '@dooboostore/simple-boot/decorators/SimDecorator';
import { Router } from '@dooboostore/simple-boot/decorators/route/Router';
import { Router as DomRenderRouter } from '@dooboostore/dom-render/routers/Router';
import { Component } from '@dooboostore/simple-boot-front/decorators/Component';
import { ComponentRouterBase } from '@dooboostore/simple-boot-front/component/ComponentRouterBase';
import template from './index.router.component.html';
import style from './index.router.component.css';
import { HomeRouteComponent } from './home/home.route.component';
import { UserRouteComponent } from './user/user.route.component';
import { AboutRouteComponent } from './about/about.route.component';

@Sim({
  using: [/* shared components */]
})
@Router({
  path: '',
  route: {
    '/': HomeRouteComponent,
    '/user': UserRouteComponent,
    '/user/:id': UserDetailComponent,
    '/about': AboutRouteComponent
  }
})
@Component({
  template,
  styles: [style]
})
export class IndexRouterComponent extends ComponentRouterBase {
  constructor(private router: DomRenderRouter) {
    super();
    console.log('✅ Router Initialized', router);
  }

  async onInitRender(param: any, rawSet: RawSet) {
    await super.onInitRender(param, rawSet);
    console.log('🎨 Router onInitRender', param);
  }
}

<div class="app">
  <!-- Navigation -->
  <nav class="navbar">
    <a href="/" dr-route-match="/">Home</a>
    <a href="/user" dr-route-match="/user">Users</a>
    <a href="/about" dr-route-match="/about">About</a>
  </nav>

  <!-- Route Outlet - Pages render here -->
  <main class="content">
    <!-- Routes automatically render matched component -->
  </main>

  <footer>
    © 2025 My SPA
  </footer>
</div>

import { Component } from '@dooboostore/simple-boot-front/decorators/Component';
import { Sim } from '@dooboostore/simple-boot/decorators/SimDecorator';
import { OnInitRender } from '@dooboostore/dom-render/lifecycle/OnInitRender';
import { OnDestroyRender } from '@dooboostore/dom-render/lifecycle/OnDestroyRender';
import { ComponentBase } from '@dooboostore/simple-boot-front/component/ComponentBase';
import { RawSet } from '@dooboostore/dom-render/rawsets/RawSet';
import template from './home.route.component.html';
import style from './home.route.component.css';

@Sim
@Component({
  template,
  styles: [style]
})
export class HomeRouteComponent extends ComponentBase 
  implements OnInitRender, OnDestroyRender {
  
  public currentTime = new Date().toLocaleString();
  private intervalId?: number;

  async onInitRender(param: any, rawSet: RawSet) {
    await super.onInitRender(param, rawSet);
    console.log('🏠 Home onInitRender', param);
    
    // Update time every second
    this.intervalId = window.setInterval(() => {
      this.currentTime = new Date().toLocaleString();
    }, 1000);
  }

  onDestroyRender() {
    console.log('🏠 Home onDestroyRender');
    
    // Cleanup interval
    if (this.intervalId) {
      clearInterval(this.intervalId);
    }
  }
}

<div class="home-page">
  <h1>🏠 Welcome Home!</h1>
  <p>Current Time: <strong>${@this@.currentTime}$</strong></p>
  <p>This time updates every second using reactive data binding.</p>
</div>

import { Component } from '@dooboostore/simple-boot-front/decorators/Component';
import { Sim } from '@dooboostore/simple-boot/decorators/SimDecorator';
import { ComponentBase } from '@dooboostore/simple-boot-front/component/ComponentBase';
import { RouterAction } from '@dooboostore/simple-boot/route/RouterAction';
import { RoutingDataSet } from '@dooboostore/simple-boot/route/RouterManager';
import template from './user.route.component.html';
import style from './user.route.component.css';

@Sim
@Component({
  template,
  styles: [style]
})
export class UserRouteComponent extends ComponentBase {
  public userId: string = '';
  public userData: any = null;

  async onRouting(r: RoutingDataSet): Promise<void> {
    console.log('👤 User page routing', r);
    
    // Extract route parameters
    this.userId = r.params?.id || 'all';
    
    // Fetch user data based on ID
    if (this.userId !== 'all') {
      this.userData = await this.fetchUserData(this.userId);
    }
  }

  private async fetchUserData(id: string) {
    // Simulate API call
    return {
      id,
      name: `User ${id}`,
      email: `user${id}@example.com`,
      role: 'Developer'
    };
  }
}

<div class="user-page">
  <h1>👤 User Page</h1>
  
  <div dr-if="@this@.userId === 'all'">
    <h2>All Users</h2>
    <!-- User list -->
  </div>
  
  <div dr-if="@this@.userId !== 'all' && @this@.userData">
    <h2>User Details</h2>
    <p>ID: ${@this@.userData.id}$</p>
    <p>Name: ${@this@.userData.name}$</p>
    <p>Email: ${@this@.userData.email}$</p>
    <p>Role: ${@this@.userData.role}$</p>
  </div>
</div>

import { Sim } from '@dooboostore/simple-boot/decorators/SimDecorator';
import { Component } from '@dooboostore/simple-boot-front/decorators/Component';
import template from './item.component.html';
import style from './item.component.css';

@Sim
@Component({
  selector: 'item',
  template,
  styles: [style]
})
export class ItemComponent {
  name = 'Sample Item';
  age = 0;
  status = 'Active';

  constructor() {
    console.log('📦 ItemComponent created');
  }
}

<div class="item">
  <div class="name">📦 ${@this@.name}$</div>
  <div class="details">
    <p>Age: ${@this@.age}$</p>
    <p>Status: ${@this@.status}$</p>
  </div>
</div>

<!-- Use in any template -->
<item></item>

<!-- Or with multiple instances -->
<div class="items-container">
  <item></item>
  <item></item>
  <item></item>
</div>

import { Sim } from '@dooboostore/simple-boot/decorators/SimDecorator';
import { Component } from '@dooboostore/simple-boot-front/decorators/Component';
import template from './profile.component.html';
import style from './profile.component.css';

@Sim
@Component({
  selector: 'profile',
  template,
  styles: [style]
})
export class ProfileComponent {
  username = 'Guest';
  email = 'guest@example.com';
  avatar = '/default-avatar.png';
  isOnline = false;

  constructor() {
    console.log('👤 ProfileComponent created');
  }

  toggleOnlineStatus() {
    this.isOnline = !this.isOnline;
  }

  updateProfile(data: any) {
    this.username = data.username || this.username;
    this.email = data.email || this.email;
  }
}

<div class="profile">
  <img class="avatar" src="${@this@.avatar}$" alt="Avatar" />
  
  <div class="info">
    <h3>${@this@.username}$</h3>
    <p>${@this@.email}$</p>
    
    <span class="status" dr-class="online:${@this@.isOnline}$">
      ${@this@.isOnline ? 'Online' : 'Offline'}$
    </span>
  </div>
  
  <button dr-event-click="@this@.toggleOnlineStatus()">
    Toggle Status
  </button>
</div>

import { Sim } from '@dooboostore/simple-boot/decorators/SimDecorator';
import { Router } from '@dooboostore/simple-boot/decorators/route/Router';
import { Component } from '@dooboostore/simple-boot-front/decorators/Component';
import { ComponentRouterBase } from '@dooboostore/simple-boot-front/component/ComponentRouterBase';
import { ItemComponent } from '../components/item/item.component';
import { ProfileComponent } from '../components/profile/profile.component';
import { drComponent } from '@dooboostore/dom-render/components/index';

// Register components to be available in all templates
@Sim({
  using: [
    ItemComponent,      // Custom item component
    ProfileComponent,   // Custom profile component
    drComponent        // Dom-render built-in components
  ]
})
@Router({
  path: '',
  route: {
    '/': HomeRouteComponent,
    '/user': UserRouteComponent
  }
})
@Component({
  template: `
    <nav>...</nav>
    <main>
      <!-- Components are now available -->
      <item></item>
      <profile></profile>
    </main>
  `,
  styles: []
})
export class IndexRouterComponent extends ComponentRouterBase {}

import { Sim } from '@dooboostore/simple-boot/decorators/SimDecorator';

@Sim
export class UserService {
  private users: Map<string, any> = new Map();

  constructor() {
    console.log('👥 UserService initialized');
    this.loadUsers();
  }

  private loadUsers() {
    // Load initial users
    this.users.set('1', { id: '1', name: 'Alice', email: 'alice@example.com' });
    this.users.set('2', { id: '2', name: 'Bob', email: 'bob@example.com' });
  }

  getUser(id: string) {
    return this.users.get(id);
  }

  getAllUsers() {
    return Array.from(this.users.values());
  }

  addUser(user: any) {
    this.users.set(user.id, user);
  }

  deleteUser(id: string) {
    return this.users.delete(id);
  }
}

import { Component } from '@dooboostore/simple-boot-front/decorators/Component';
import { Sim } from '@dooboostore/simple-boot/decorators/SimDecorator';
import { ComponentBase } from '@dooboostore/simple-boot-front/component/ComponentBase';
import { UserService } from '../services/UserService';

@Sim
@Component({
  template: `
    <div class="user-list">
      <h2>Users</h2>
      <ul>
        <li dr-for-of="@this@.users" dr-option-item-variable-name="user">
          ${#user#.name}$ - ${#user#.email}$
        </li>
      </ul>
    </div>
  `,
  styles: []
})
export class UserListComponent extends ComponentBase {
  public users: any[] = [];

  // Service automatically injected via constructor
  constructor(private userService: UserService) {
    super();
  }

  async onInitRender(param: any, rawSet: RawSet) {
    await super.onInitRender(param, rawSet);
    
    // Load users from service
    this.users = this.userService.getAllUsers();
  }
}

import { SimFrontOption, UrlType } from '@dooboostore/simple-boot-front/option/SimFrontOption';

// Hash-based routing (#/home, #/user)
const config = new SimFrontOption(
  { window, urlType: UrlType.hash },
  { rootRouter: IndexRouterComponent }
);

// URLs will look like:
// http://example.com/#/
// http://example.com/#/user
// http://example.com/#/user/123

// Advantages:
// ✅ Works without server configuration
// ✅ Compatible with all browsers
// ✅ Easy to deploy

import { SimFrontOption, UrlType } from '@dooboostore/simple-boot-front/option/SimFrontOption';

// Path-based routing (clean URLs)
const config = new SimFrontOption(
  { window, urlType: UrlType.path },
  { rootRouter: IndexRouterComponent }
);

// URLs will look like:
// http://example.com/
// http://example.com/user
// http://example.com/user/123

// Advantages:
// ✅ Clean, SEO-friendly URLs
// ✅ Better user experience
// ⚠️  Requires server configuration (rewrite rules)