@okalit/cli 0.1.0 → 0.2.0

package/templates/app/public/i18n/es.json

@@ -1,3 +1,49 @@
 {
-    "WELCOME": "Bienvenido a la plantilla de Okalit"
+  "APP": {
+    "TITLE": "Okalit Starter",
+    "SUBTITLE": "Un framework moderno de web components"
+  },
+  "NAV": {
+    "HOME": "Inicio",
+    "LIFECYCLE": "Ciclo de vida",
+    "SERVICES": "Servicios",
+    "PERFORMANCE": "Rendimiento",
+    "DETAIL": "Detalle {{ id }}"
+  },
+  "HOME": {
+    "HEADING": "Panel principal",
+    "COUNTER": "Contador compartido",
+    "COUNTER_HINT": "El contador debe ser > 2 para acceder a la página de detalle (demo de guards).",
+    "RESET": "Reiniciar",
+    "GO_DETAIL": "Ir al Detalle {{ id }}",
+    "GO_LIFECYCLE": "Demo Ciclo de vida",
+    "GO_SERVICES": "Demo Servicios",
+    "GO_PERF": "Demo Rendimiento"
+  },
+  "LIFECYCLE": {
+    "HEADING": "Hooks del ciclo de vida",
+    "LOG": "Registro de eventos",
+    "CLEAR": "Limpiar",
+    "CHANGE_PROP": "Cambiar propiedad name"
+  },
+  "SERVICES": {
+    "HEADING": "Servicios y GraphQL",
+    "REST_TITLE": "REST — Usuarios de JSONPlaceholder",
+    "GQL_TITLE": "GraphQL — Personajes de Rick & Morty",
+    "LOADING": "Cargando…",
+    "ERROR": "Error al cargar datos."
+  },
+  "PERF": {
+    "HEADING": "Componentes de rendimiento",
+    "IDLE_LABEL": "Cargado vía <o-idle> (requestIdleCallback)",
+    "WHEN_LABEL": "Cargado vía <o-when> (condición)",
+    "VIEWPORT_LABEL": "Cargado vía <o-viewport> (desplaza hacia abajo)",
+    "TOGGLE": "Activar condición",
+    "SCROLL_HINT": "Desplaza hacia abajo para activar <o-viewport>…"
+  },
+  "DETAIL": {
+    "HEADING": "Página de detalle",
+    "VIEWING": "Viendo elemento",
+    "BACK": "Volver al inicio"
+  }
 }

package/templates/app/src/{app.routes.ts → app.routes.js}

@@ -6,5 +6,5 @@ export default [
     component: "example-module",
     import: () => import("./modules/example/example.module.js"),
     children: ExampleModuleRoutes,
-  }
+  },
 ];

package/templates/app/src/channels/example.channel.js

@@ -0,0 +1,15 @@
+import { defineChannel } from '@okalit';
+
+// Counter: persisted in localStorage, lives across the entire app
+export const CounterChannel = defineChannel('app:counter', {
+  initialValue: 0,
+  persist: 'local',
+  scope: 'app',
+});
+
+// Navigation log: ephemeral channel to broadcast interceptor events
+export const NavLogChannel = defineChannel('app:navlog', {
+  initialValue: [],
+  persist: 'memory',
+  scope: 'app',
+});

package/templates/app/src/components/lazy-widget.js

@@ -0,0 +1,13 @@
+import { defineElement, Okalit, html } from "@okalit";
+
+@defineElement({ tag: "lazy-widget" })
+export class LazyWidget extends Okalit {
+  render() {
+    return html`
+      <div style="padding:16px;background:#f0fdf4;border:1px solid #bbf7d0;border-radius:8px">
+        <strong>Lazy Widget loaded!</strong>
+        <p style="margin:4px 0 0;font-size:0.85rem;color:#555">This component was dynamically imported.</p>
+      </div>
+    `;
+  }
+}

package/templates/app/src/guards/auth.guard.js

@@ -0,0 +1,17 @@
+/**
+ * Blocks navigation unless the counter value is greater than 2.
+ * Reads directly from localStorage (where CounterChannel persists).
+ *
+ * Guards run BEFORE the dynamic import — no code is loaded if they fail.
+ * Return: true (allow), false (block), or string (redirect path).
+ */
+export function authGuard() {
+  const raw = localStorage.getItem('okalit:channel:app:counter');
+  const count = raw !== null ? JSON.parse(raw) : 0;
+
+  if (count <= 2) {
+    return '/';
+  }
+
+  return true;
+}

package/templates/app/src/layouts/app-layout.js

@@ -0,0 +1,75 @@
+import { defineElement, Okalit, html, signal, t, getI18n, Router } from '@okalit';
+import { NavLogChannel } from '@channels/example.channel.js';
+
+import global from '@styles/global.scss?inline';
+
+@defineElement({
+  tag: 'app-layout',
+  styles: [global],
+})
+export class AppLayout extends Okalit {
+  static channels = {
+    navLog: NavLogChannel(),
+  };
+
+  showLog = signal(false);
+
+  onInit() {
+    this._removeInterceptor = Router.getInstance().addInterceptor((match, path) => {
+      const entry = `[${new Date().toLocaleTimeString()}] → ${path}`;
+      this.navLog.set([...this.navLog.value, entry]);
+      return true;
+    });
+  }
+
+  onDestroy() {
+    this._removeInterceptor?.();
+  }
+
+  _nav(path) {
+    Router.getInstance()?.navigate(path);
+  }
+
+  render() {
+    const locale = getI18n()?.locale.value;
+    const i18n = getI18n();
+    const logs = this.navLog.value;
+
+    return html`
+      <header class="app-header">
+        <div class="app-brand">
+          <h1>${t('APP.TITLE')}</h1>
+          <span class="app-subtitle">${t('APP.SUBTITLE')}</span>
+        </div>
+        <nav class="app-nav">
+          <a @click=${() => this._nav('/')}>${t('NAV.HOME')}</a>
+          <a @click=${() => this._nav('/lifecycle')}>${t('NAV.LIFECYCLE')}</a>
+          <a @click=${() => this._nav('/services')}>${t('NAV.SERVICES')}</a>
+          <a @click=${() => this._nav('/performance')}>${t('NAV.PERFORMANCE')}</a>
+        </nav>
+        <div class="locale-switch">
+          <button class=${locale === 'en' ? 'active' : ''} @click=${() => i18n?.setLocale('en')}>EN</button>
+          <button class=${locale === 'es' ? 'active' : ''} @click=${() => i18n?.setLocale('es')}>ES</button>
+        </div>
+      </header>
+      <main class="app-content">
+        <slot></slot>
+      </main>
+      <footer class="app-footer">
+        <div class="footer-bar">
+          <button class="footer-toggle" @click=${() => this.showLog.value = !this.showLog.value}>
+            Interceptor Log (${logs.length})
+          </button>
+          ${logs.length > 0 ? html`
+            <button class="footer-clear" @click=${() => this.navLog.set([])}>Clear</button>
+          ` : null}
+        </div>
+        ${this.showLog.value && logs.length > 0 ? html`
+          <div class="log-panel footer-log">
+            ${logs.map(l => html`<div class="log-entry">${l}</div>`)}
+          </div>
+        ` : null}
+      </footer>
+    `;
+  }
+}

package/templates/app/src/main-app.js

@@ -1,13 +1,23 @@
-import { Okalit, defineElement, AppMixin } from '@okalit';
-import routes from './app.routes.ts';
+import { defineElement, Okalit, html, AppMixin } from '@okalit';
+import routes from './app.routes.js';
 
-@defineElement({ tag: 'main-app' })
+import '@layouts/app-layout.js';
+
+@defineElement({
+  tag: 'main-app',
+})
 export class MainApp extends AppMixin(Okalit) {
-  _appConfig = {
-    routes,
-    i18n: {
-      default: 'es',
-      locales: ['es', 'en'],
-    },
+  static routes = routes;
+  static i18n = {
+    default: 'en',
+    locales: ['es', 'en'],
+  }
+
+  render() {
+    return html`
+      <app-layout>
+        <okalit-router></okalit-router>
+      </app-layout>
+    `;
   }
 }

package/templates/app/src/modules/example/example.module.js

@@ -1,4 +1,9 @@
-import { ModuleMixin, Okalit, defineElement } from '@okalit';
+import { defineElement, Okalit, ModuleMixin } from '@okalit';
 
-@defineElement({ tag: 'example-module' })
-export class ExampleModule extends ModuleMixin(Okalit) {}
+import global from '@styles/global.scss?inline';
+
+@defineElement({
+  tag: 'example-module',
+  styles: [global],
+})
+export class ExampleModule extends ModuleMixin(Okalit) {}

package/templates/app/src/modules/example/example.routes.js

@@ -1,7 +1,30 @@
+import { authGuard } from "@guards/auth.guard.js";
+
 export default [
   {
-    path: '',
-    component: 'example-page',
-    import: () => import('./pages/example.page.js')
-  }
+    path: "/",
+    component: "example-home",
+    import: () => import("./pages/home/example-home.js"),
+  },
+  {
+    path: "/lifecycle",
+    component: "example-lifecycle",
+    import: () => import("./pages/lifecycle/example-lifecycle.js"),
+  },
+  {
+    path: "/services",
+    component: "example-services",
+    import: () => import("./pages/services/example-services.js"),
+  },
+  {
+    path: "/performance",
+    component: "example-performance",
+    import: () => import("./pages/performance/example-performance.js"),
+  },
+  {
+    path: "/detail/:id",
+    component: "example-detail",
+    import: () => import("./pages/detail/example-detail.js"),
+    guards: [authGuard],
+  },
 ];

package/templates/app/src/modules/example/pages/detail/example-detail.js

@@ -0,0 +1,21 @@
+import { defineElement, Okalit, html, PageMixin, t } from "@okalit";
+
+import global from "@styles/global.scss?inline";
+
+@defineElement({
+  tag: "example-detail",
+  styles: [global],
+})
+export class ExampleDetail extends PageMixin(Okalit) {
+  render() {
+    const id = this.routeParams.id;
+    return html`
+      <h2>${t('DETAIL.HEADING')}</h2>
+      <div class="card">
+        <p>${t('DETAIL.VIEWING')}: <strong>#${id}</strong></p>
+        <p class="hint">This page is protected by a guard. Counter must be > 2.</p>
+      </div>
+      <button @click=${() => this.navigate("/")}>${t('DETAIL.BACK')}</button>
+    `;
+  }
+}

package/templates/app/src/modules/example/pages/home/example-home.js

@@ -0,0 +1,39 @@
+import { defineElement, Okalit, html, signal, PageMixin, t } from "@okalit";
+import { CounterChannel } from "@channels/example.channel.js";
+
+import global from "@styles/global.scss?inline";
+
+@defineElement({
+  tag: "example-home",
+  styles: [global],
+})
+export class ExampleHome extends PageMixin(Okalit) {
+  static channels = {
+    counter: CounterChannel(),
+  };
+
+  render() {
+    return html`
+      <h2>${t('HOME.HEADING')}</h2>
+
+      <div class="card">
+        <h3>${t('HOME.COUNTER')}</h3>
+        <div class="count">${this.counter.value}</div>
+        <div class="controls-row">
+          <button @click=${() => this.counter.set(this.counter.value + 1)}>+1</button>
+          <button @click=${() => this.counter.set(this.counter.value - 1)}>-1</button>
+          <button @click=${() => this.counter.set(0)}>${t('HOME.RESET')}</button>
+        </div>
+        <p class="hint">${t('HOME.COUNTER_HINT')}</p>
+      </div>
+
+      <h3>Navigation</h3>
+      <div class="controls-row">
+        <button class="primary" @click=${() => this.navigate('/detail/42')}>${t('HOME.GO_DETAIL', { id: '42' })}</button>
+        <button @click=${() => this.navigate('/lifecycle')}>${t('HOME.GO_LIFECYCLE')}</button>
+        <button @click=${() => this.navigate('/services')}>${t('HOME.GO_SERVICES')}</button>
+        <button @click=${() => this.navigate('/performance')}>${t('HOME.GO_PERF')}</button>
+      </div>
+    `;
+  }
+}

package/templates/app/src/modules/example/pages/lifecycle/example-lifecycle.js

@@ -0,0 +1,74 @@
+import { defineElement, Okalit, html, signal, PageMixin, t } from "@okalit";
+
+import global from "@styles/global.scss?inline";
+
+const names = ['Ada', 'Grace', 'Alan', 'Linus', 'Margaret'];
+let idx = 0;
+
+@defineElement({
+  tag: "example-lifecycle",
+  styles: [global],
+  props: [
+    { name: { type: String, value: 'World' } },
+  ],
+})
+export class ExampleLifecycle extends PageMixin(Okalit) {
+  logs = signal([]);
+
+  _log(msg) {
+    this.logs.value = [...this.logs.value, `[${new Date().toLocaleTimeString()}] ${msg}`];
+  }
+
+  onInit() {
+    this._log('onInit — component initialized');
+  }
+
+  onChange(changes) {
+    for (const [prop, { previous, current }] of Object.entries(changes)) {
+      this._log(`onChange — ${prop}: "${previous}" → "${current}"`);
+    }
+  }
+
+  onBeforeRender() {
+    // logged silently to avoid noise — fires every render
+  }
+
+  onAfterRender() {
+    // same as above
+  }
+
+  onDestroy() {
+    console.log('[lifecycle] onDestroy — component removed from DOM');
+  }
+
+  _changeName() {
+    idx = (idx + 1) % names.length;
+    this.name.value = names[idx];
+  }
+
+  render() {
+    return html`
+      <h2>${t('LIFECYCLE.HEADING')}</h2>
+
+      <div class="card">
+        <p>Current <code>name</code> prop: <strong>${this.name.value}</strong></p>
+        <div class="controls-row">
+          <button class="primary" @click=${() => this._changeName()}>${t('LIFECYCLE.CHANGE_PROP')}</button>
+        </div>
+        <p class="hint">Each change triggers onChange() → logged below.</p>
+      </div>
+
+      <h3>${t('LIFECYCLE.LOG')}</h3>
+      <div class="log-panel">
+        ${this.logs.value.length === 0
+          ? html`<span class="hint">No events yet…</span>`
+          : this.logs.value.map(l => html`<div class="log-entry">${l}</div>`)
+        }
+      </div>
+      <div class="controls-row" style="margin-top:12px">
+        <button @click=${() => this.logs.value = []}>${t('LIFECYCLE.CLEAR')}</button>
+        <button @click=${() => this.navigate('/')}>← ${t('NAV.HOME')}</button>
+      </div>
+    `;
+  }
+}

package/templates/app/src/modules/example/pages/performance/example-performance.js

@@ -0,0 +1,59 @@
+import { defineElement, Okalit, html, signal, PageMixin, t } from "@okalit";
+import '@okalit/performance.js';
+
+import global from "@styles/global.scss?inline";
+
+const loadWidget = () => import('@components/lazy-widget.js');
+
+@defineElement({
+  tag: "example-performance",
+  styles: [global],
+})
+export class ExamplePerformance extends PageMixin(Okalit) {
+  showConditional = signal(false);
+
+  render() {
+    return html`
+      <h2>${t('PERF.HEADING')}</h2>
+
+      <div class="card">
+        <h3>&lt;o-idle&gt;</h3>
+        <p class="hint">${t('PERF.IDLE_LABEL')}</p>
+        <o-idle .loader=${loadWidget}>
+          <lazy-widget></lazy-widget>
+          <p slot="fallback" class="fallback">⏳ Waiting for idle…</p>
+        </o-idle>
+      </div>
+
+      <div class="card">
+        <h3>&lt;o-when&gt;</h3>
+        <p class="hint">${t('PERF.WHEN_LABEL')}</p>
+        <div class="controls-row" style="margin-bottom:12px">
+          <button class="primary" @click=${() => this.showConditional.value = true}>
+            ${t('PERF.TOGGLE')}
+          </button>
+          <span class="hint">condition = ${this.showConditional.value ? 'true' : 'false'}</span>
+        </div>
+        <o-when .condition=${this.showConditional.value} .loader=${loadWidget}>
+          <lazy-widget></lazy-widget>
+          <p slot="fallback" class="fallback">⏳ Waiting for condition…</p>
+        </o-when>
+      </div>
+
+      <div class="card">
+        <h3>&lt;o-viewport&gt;</h3>
+        <p class="hint">${t('PERF.VIEWPORT_LABEL')}</p>
+        <p class="hint">${t('PERF.SCROLL_HINT')}</p>
+        <div class="spacer"></div>
+        <o-viewport .loader=${loadWidget}>
+          <lazy-widget></lazy-widget>
+          <p slot="fallback" class="fallback">⏳ Waiting for viewport…</p>
+        </o-viewport>
+      </div>
+
+      <div class="controls-row" style="margin-top:12px">
+        <button @click=${() => this.navigate('/')}>← ${t('NAV.HOME')}</button>
+      </div>
+    `;
+  }
+}

package/templates/app/src/modules/example/pages/services/example-services.js

@@ -0,0 +1,80 @@
+import { defineElement, Okalit, html, signal, PageMixin, t, inject } from "@okalit";
+
+import '@services/user.service.js';
+import '@services/rickandmorty.service.js';
+
+import global from "@styles/global.scss?inline";
+
+@defineElement({
+  tag: "example-services",
+  styles: [global],
+})
+export class ExampleServices extends PageMixin(Okalit) {
+  userApi = inject('user');
+  gqlApi = inject('rickandmorty');
+
+  users = signal([]);
+  characters = signal([]);
+  restLoading = signal(false);
+  gqlLoading = signal(false);
+  restError = signal(null);
+  gqlError = signal(null);
+
+  onInit() {
+    this.userApi.getUsers().fire({
+      onLoading: (v) => this.restLoading.value = v,
+      onSuccess: (data) => this.users.value = data.slice(0, 6),
+      onError: (err) => this.restError.value = err,
+    });
+
+    this.gqlApi.getCharacters().fire({
+      onLoading: (v) => this.gqlLoading.value = v,
+      onSuccess: (data) => this.characters.value = data.characters.results,
+      onError: (err) => this.gqlError.value = err,
+    });
+  }
+
+  render() {
+    return html`
+      <h2>${t('SERVICES.HEADING')}</h2>
+
+      <div class="card">
+        <h3>${t('SERVICES.REST_TITLE')}</h3>
+        <p class="hint">OkalitService + cache: true + fire({ onLoading, onSuccess, onError })</p>
+        ${this.restLoading.value
+          ? html`<p class="fallback">${t('SERVICES.LOADING')}</p>`
+          : this.restError.value
+            ? html`<p class="fallback">${t('SERVICES.ERROR')}</p>`
+            : html`
+              <ul class="data-list">
+                ${this.users.value.map(u => html`
+                  <li><strong>${u.name}</strong> — ${u.email}</li>
+                `)}
+              </ul>
+            `
+        }
+      </div>
+
+      <div class="card">
+        <h3>${t('SERVICES.GQL_TITLE')}</h3>
+        <p class="hint">OkalitGraphqlService + .query() + cache</p>
+        ${this.gqlLoading.value
+          ? html`<p class="fallback">${t('SERVICES.LOADING')}</p>`
+          : this.gqlError.value
+            ? html`<p class="fallback">${t('SERVICES.ERROR')}</p>`
+            : html`
+              <ul class="data-list">
+                ${this.characters.value.map(c => html`
+                  <li><strong>${c.name}</strong></li>
+                `)}
+              </ul>
+            `
+        }
+      </div>
+
+      <div class="controls-row" style="margin-top:12px">
+        <button @click=${() => this.navigate('/')}>← ${t('NAV.HOME')}</button>
+      </div>
+    `;
+  }
+}

package/templates/app/src/services/rickandmorty.service.js

@@ -0,0 +1,17 @@
+import { OkalitGraphqlService, service } from '@okalit';
+
+@service('rickandmorty')
+export class RickAndMortyService extends OkalitGraphqlService {
+  constructor() {
+    super();
+    this.configure({
+      endpoint: 'https://rickandmortyapi.com/graphql',
+      cache: true,
+      cacheTTL: 120_000,
+    });
+  }
+
+  getCharacters() {
+    return this.query(`{ characters(page: 2, filter: { name: "rick" }) { results { name } } }`);
+  }
+}

package/templates/app/src/services/user.service.js

@@ -0,0 +1,33 @@
+import { OkalitService, service } from '@okalit';
+
+@service('user')
+export class UserService extends OkalitService {
+  constructor() {
+    super();
+    this.configure({
+      baseUrl: 'https://jsonplaceholder.typicode.com',
+      cache: true,
+      cacheTTL: 60_000,
+    });
+  }
+
+  getUsers() {
+    return this.get('/users');
+  }
+
+  getUserById(id) {
+    return this.get(`/users/${id}`);
+  }
+
+  createUser(data) {
+    return this.post('/users', data);
+  }
+
+  updateUser(id, data) {
+    return this.put(`/users/${id}`, data);
+  }
+
+  deleteUser(id) {
+    return this.delete(`/users/${id}`);
+  }
+}