@okalit/cli 0.1.0 → 0.2.0

package/templates/app/@okalit/define-element.js

@@ -0,0 +1,30 @@
+export function defineElement({ tag, styles = [], props = [], params = [] }) {
+  return function (cls, context) {
+    // Inject styles, props and params as static properties on the class
+    cls.styles = styles;
+    cls.props = props;
+    cls.params = params;
+
+    // Build a map of prop name → type config for attribute coercion
+    const propMap = {};
+    for (const propDef of props) {
+      const [name, config] = Object.entries(propDef)[0];
+      propMap[name] = config;
+    }
+    cls._propMap = propMap;
+
+    // Tell the browser which attributes to observe (kebab-case)
+    cls.observedAttributes = Object.keys(propMap).map(toKebabCase);
+
+    // Register the custom element after the class is fully defined
+    context.addInitializer(function () {
+      if (!customElements.get(tag)) {
+        customElements.define(tag, cls);
+      }
+    });
+  };
+}
+
+function toKebabCase(str) {
+  return str.replace(/([a-z])([A-Z])/g, '$1-$2').toLowerCase();
+}

package/templates/app/@okalit/i18n.js

@@ -1,89 +1,124 @@
-import { EventBus } from './EventBus.js';
-import { signal } from '@lit-labs/signals';
-
-class OkalitI18nImpl {
-  constructor() {
-    this._translations = Object.create(null);
-    this._locale = signal('');
-    this._config = null;
+import { signal, computed } from 'uhtml';
+
+let instance = null;
+
+class I18n {
+  constructor(config) {
+    if (instance) return instance;
+    instance = this;
+
+    this._translations = {};
+    this._defaultLocale = config.default || 'en';
+    this._locales = config.locales || [this._defaultLocale];
+    this.locale = signal(this._detectLocale());
+    this._version = signal(0);
     this._ready = false;
+    this._readyPromise = this._loadLocale(this.locale.value);
   }
 
-  async init(config) {
-    this._config = {
-      default: config.default || 'es',
-      locales: config.locales || [],
-      path: config.path || '/i18n',
-    };
-
-    const persisted = localStorage.getItem('okalit:i18n:locale');
-    const initialLocale = (persisted && this._config.locales.includes(persisted))
-      ? persisted
-      : this._config.default;
+  static getInstance() {
+    return instance;
+  }
 
-    await this._loadLocale(initialLocale);
-    this._locale.set(initialLocale);
-    this._ready = true;
+  _detectLocale() {
+    // Check localStorage first, then browser language
+    const stored = localStorage.getItem('okalit:locale');
+    if (stored && this._locales.includes(stored)) return stored;
 
-    EventBus.emit('i18n:ready', { locale: initialLocale });
+    const browserLang = navigator.language?.split('-')[0];
+    if (browserLang && this._locales.includes(browserLang)) return browserLang;
 
-    // Allow locale switching via EventBus
-    EventBus.listen('i18n:set-locale', ({ locale }) => this.setLocale(locale));
+    return this._defaultLocale;
   }
 
   async _loadLocale(locale) {
-    if (this._translations[locale]) return;
+    if (this._translations[locale]) {
+      this._ready = true;
+      return;
+    }
 
-    const path = `${this._config.path}/${locale}.json`;
     try {
-      const res = await fetch(path);
-      if (!res.ok) throw new Error(`HTTP ${res.status}`);
+      const res = await fetch(`/i18n/${locale}.json`);
       this._translations[locale] = await res.json();
+      this._ready = true;
+      this._version.value++;
     } catch (e) {
-      console.error(`[OkalitI18n] Failed to load locale "${locale}" from ${path}:`, e);
+      console.warn(`[i18n] Failed to load locale: ${locale}`, e);
       this._translations[locale] = {};
     }
   }
 
   async setLocale(locale) {
-    if (!this._config?.locales.includes(locale)) {
-      console.warn(`[OkalitI18n] Locale "${locale}" is not configured. Available: ${this._config?.locales}`);
+    if (!this._locales.includes(locale)) {
+      console.warn(`[i18n] Unknown locale: ${locale}`);
       return;
     }
 
     await this._loadLocale(locale);
-    this._locale.set(locale);
-    localStorage.setItem('okalit:i18n:locale', locale);
-    EventBus.emit('i18n:locale-changed', { locale });
-  }
-
-  get locale() {
-    return this._locale.get();
-  }
-
-  get locales() {
-    return this._config?.locales || [];
+    this.locale.value = locale;
+    localStorage.setItem('okalit:locale', locale);
   }
 
-  t(key, params) {
-    // Reading the signal value triggers SignalWatcher tracking
-    const locale = this._locale.get();
-    const dict = this._translations[locale] || {};
+  /**
+   * Translate a key. Supports nested keys with dots: t('SECTION.KEY')
+   * Supports interpolation: t('HELLO', { name: 'World' }) → "Hello, World"
+   */
+  translate(key, params) {
+    const lang = this.locale.value;
+    const dict = this._translations[lang] || {};
 
-    // Nested key support: "home.welcome.title" → dict.home.welcome.title
+    // Support nested keys: 'SECTION.KEY'
     let value = key.split('.').reduce((obj, k) => obj?.[k], dict);
 
     if (value === undefined) {
-      return key;
+      // Fallback to default locale
+      const fallback = this._translations[this._defaultLocale] || {};
+      value = key.split('.').reduce((obj, k) => obj?.[k], fallback);
     }
 
-    // Interpolation: "Hola {name}" + { name: "Alex" } → "Hola Alex"
-    if (params && typeof value === 'string') {
-      value = value.replace(/\{(\w+)\}/g, (_, k) => (k in params) ? params[k] : `{${k}}`);
+    if (value === undefined) return key;
+
+    // Interpolation: replace {{ name }} with params.name
+    if (params) {
+      value = value.replace(/\{\{\s*(\w+)\s*\}\}/g, (_, k) => params[k] ?? '');
     }
 
     return value;
   }
+
+  get ready() {
+    return this._readyPromise;
+  }
+
+  destroy() {
+    instance = null;
+  }
 }
 
-export const OkalitI18n = new OkalitI18nImpl();
+/**
+ * Initialize i18n. Called from AppMixin.
+ */
+export function createI18n(config) {
+  return new I18n(config);
+}
+
+/**
+ * Translate a key. Reactive — re-renders when locale changes.
+ * Usage: t('WELCOME') or t('HELLO', { name: 'World' })
+ */
+export function t(key, params) {
+  const i18n = I18n.getInstance();
+  if (!i18n) return key;
+  // Reading locale.value + _version makes this reactive inside uhtml effects
+  i18n.locale.value;
+  i18n._version.value;
+  i18n.locale.value;
+  return i18n.translate(key, params);
+}
+
+/**
+ * Get the i18n instance for setLocale, etc.
+ */
+export function getI18n() {
+  return I18n.getInstance();
+}

package/templates/app/@okalit/index.js

@@ -1,10 +1,8 @@
-export { Okalit } from  './Okalit.js';
-export { defineElement } from './defineElement.js';
-export { AppMixin } from './AppMixin.js';
-export { ModuleMixin } from './ModuleMixin.js';
-export { OkalitService } from './OkalitService.js';
-export { idle } from './idle.js';
-export { lazy} from './lazy.js';
-export { when } from './when.js';
-export { service, getService, injectServices } from './service.js';
-export { OkalitI18n } from './i18n.js';
+export { Okalit, html, signal, computed, effect, batch } from './Okalit.js';
+export { defineElement } from './define-element.js';
+export { defineChannel } from './channel.js';
+export { Router, navigate } from './router.js';
+export { AppMixin, ModuleMixin, PageMixin } from './mixins.js';
+export { t, getI18n } from './i18n.js';
+export { OkalitService, OkalitGraphqlService, RequestControl, service, inject } from './service.js';
+export { OIdle, OWhen, OViewport } from './performance.js';

package/templates/app/@okalit/mixins.js

@@ -0,0 +1,106 @@
+import { html} from 'uhtml';
+import { Router, navigate } from './router.js';
+import { createI18n } from './i18n.js';
+import './router-outlet.js';
+
+/**
+ * AppMixin — for the root application component.
+ * Initializes the router with the provided routes.
+ *
+ * Usage:
+ *   class MainApp extends AppMixin(Okalit) {
+ *     static routes = [...];
+ *   }
+ */
+export const AppMixin = (Base) => class extends Base {
+  static routes = [];
+
+  constructor() {
+    super();
+    this._router = new Router(this.constructor.routes);
+
+    const i18nConfig = this.constructor.i18n;
+    if (i18nConfig) {
+      this._i18n = createI18n(i18nConfig);
+    }
+  }
+
+  async switchLocale(locale) {
+    await this._i18n?.setLocale(locale);
+  }
+
+  get router() {
+    return this._router;
+  }
+
+  navigate(path, options) {
+    this._router.navigate(path, options);
+  }
+
+  disconnectedCallback() {
+    super.disconnectedCallback?.();
+    this._router.destroy();
+  }
+
+  render() {
+    return html`
+        <okalit-router></okalit-router>
+    `;
+  }
+};
+
+/**
+ * ModuleMixin — for feature modules that group pages.
+ * Provides a nested <okalit-router> for child routes.
+ *
+ * Usage:
+ *   class ExampleModule extends ModuleMixin(Okalit) {
+ *     render() {
+ *       return html`<okalit-router></okalit-router>`;
+ *     }
+ *   }
+ */
+export const ModuleMixin = (Base) => class extends Base {
+  get router() {
+    return Router.getInstance();
+  }
+
+  navigate(path, options) {
+    Router.getInstance()?.navigate(path, options);
+  }
+
+  render() {
+    return html`
+        <okalit-router></okalit-router>
+    `;
+  }
+};
+
+/**
+ * PageMixin — for individual pages within a module.
+ * Provides router access and navigation helpers.
+ *
+ * Usage:
+ *   class HomePage extends PageMixin(Okalit) {
+ *     render() { ... }
+ *   }
+ */
+export const PageMixin = (Base) => class extends Base {
+  get router() {
+    return Router.getInstance();
+  }
+
+  get routeParams() {
+    return Router.getInstance()?.params.value || {};
+  }
+
+  get queryParams() {
+    return Router.getInstance()?.query.value || {};
+  }
+
+  navigate(path, options) {
+    Router.getInstance()?.navigate(path, options);
+  }
+};
+
+export { navigate };

package/templates/app/@okalit/performance.js

@@ -0,0 +1,211 @@
+// ── Shared styles ──────────────────────────────────────────────
+
+const SHARED_STYLES = `
+  :host { display: contents; }
+  ::slotted([slot="fallback"]) { display: none; }
+  :host(:not([loaded])) ::slotted(:not([slot])) { display: none; }
+  :host(:not([loaded])) ::slotted([slot="fallback"]) { display: contents; }
+`;
+
+// ── Shared loader logic ────────────────────────────────────────
+
+/**
+ * Normalise .loader — accepts a single function or an array.
+ * Resolves all imports with Promise.all and flips #isLoaded.
+ * On error, dispatches 'o-error' on the host element.
+ */
+async function executeLoader(host) {
+  if (host._done || host._loading) return;
+  host._loading = true;
+
+  const loaders = Array.isArray(host.loader) ? host.loader : [host.loader];
+
+  try {
+    await Promise.all(loaders.map((fn) => fn()));
+    host._done = true;
+    host.setAttribute('loaded', '');
+  } catch (err) {
+    host.dispatchEvent(
+      new CustomEvent('o-error', {
+        detail: err,
+        bubbles: true,
+        composed: true,
+      })
+    );
+  } finally {
+    host._loading = false;
+  }
+}
+
+function applySharedSetup(shadowRoot) {
+  const style = document.createElement('style');
+  style.textContent = SHARED_STYLES;
+  shadowRoot.append(
+    style,
+    document.createElement('slot'),                       // default slot
+    Object.assign(document.createElement('slot'), { name: 'fallback' }),
+  );
+}
+
+// ── <o-idle> ───────────────────────────────────────────────────
+
+export class OIdle extends HTMLElement {
+  _done = false;
+  _loading = false;
+  #loader = null;
+  #idleId = null;
+  #timeoutId = null;
+  #connected = false;
+
+  get loader() { return this.#loader; }
+  set loader(fn) {
+    if (this._done || this._loading) return;
+    this.#loader = fn;
+    if (fn && this.#connected) this.#schedule();
+  }
+
+  constructor() {
+    super();
+    this.attachShadow({ mode: 'open' });
+    applySharedSetup(this.shadowRoot);
+  }
+
+  connectedCallback() {
+    this.#connected = true;
+    if (this.#loader) this.#schedule();
+  }
+
+  #schedule() {
+    if (this._done || this._loading || this.#idleId != null || this.#timeoutId != null) return;
+    if (typeof requestIdleCallback === 'function') {
+      this.#idleId = requestIdleCallback(() => executeLoader(this));
+    } else {
+      this.#timeoutId = setTimeout(() => executeLoader(this), 200);
+    }
+  }
+
+  disconnectedCallback() {
+    this.#connected = false;
+    if (this.#idleId != null) {
+      cancelIdleCallback(this.#idleId);
+      this.#idleId = null;
+    }
+    if (this.#timeoutId != null) {
+      clearTimeout(this.#timeoutId);
+      this.#timeoutId = null;
+    }
+  }
+}
+
+// ── <o-when> ───────────────────────────────────────────────────
+
+export class OWhen extends HTMLElement {
+  _done = false;
+  _loading = false;
+  #loader = null;
+  #condition = false;
+  #triggered = false;
+
+  get loader() { return this.#loader; }
+  set loader(fn) {
+    if (this._done || this._loading) return;
+    this.#loader = fn;
+    this.#tryLoad();
+  }
+
+  set condition(val) {
+    this.#condition = !!val;
+    this.#tryLoad();
+  }
+
+  #tryLoad() {
+    if (this.#triggered || this._done || this._loading) return;
+    if (this.#condition && this.#loader) {
+      this.#triggered = true;
+      executeLoader(this);
+    }
+  }
+
+  constructor() {
+    super();
+    this.attachShadow({ mode: 'open' });
+    applySharedSetup(this.shadowRoot);
+  }
+}
+
+// ── <o-viewport> ───────────────────────────────────────────────
+
+export class OViewport extends HTMLElement {
+  _done = false;
+  _loading = false;
+  #loader = null;
+  #observer = null;
+  #connected = false;
+  #sentinel = null;
+
+  get loader() { return this.#loader; }
+  set loader(fn) {
+    if (this._done || this._loading) return;
+    this.#loader = fn;
+    if (fn && this.#connected) this.#observe();
+  }
+
+  constructor() {
+    super();
+    this.attachShadow({ mode: 'open' });
+
+    // Sentinel: a 1px element the IntersectionObserver can track,
+    // because :host { display: contents } has no box model.
+    this.#sentinel = document.createElement('span');
+    this.#sentinel.style.cssText = 'display:block;width:1px;height:1px;pointer-events:none;';
+
+    const style = document.createElement('style');
+    style.textContent = `
+      :host { display: contents; }
+      ::slotted([slot="fallback"]) { display: none; }
+      :host(:not([loaded])) ::slotted(:not([slot])) { display: none; }
+      :host(:not([loaded])) ::slotted([slot="fallback"]) { display: contents; }
+    `;
+    this.shadowRoot.append(
+      style,
+      this.#sentinel,
+      document.createElement('slot'),
+      Object.assign(document.createElement('slot'), { name: 'fallback' }),
+    );
+  }
+
+  connectedCallback() {
+    this.#connected = true;
+    if (this.#loader) this.#observe();
+  }
+
+  #observe() {
+    if (this._done || this._loading || this.#observer) return;
+    this.#observer = new IntersectionObserver(
+      (entries) => {
+        for (const entry of entries) {
+          if (entry.isIntersecting) {
+            this.#observer.disconnect();
+            this.#observer = null;
+            executeLoader(this);
+            return;
+          }
+        }
+      },
+      { rootMargin: '200px' }
+    );
+    this.#observer.observe(this.#sentinel);
+  }
+
+  disconnectedCallback() {
+    this.#connected = false;
+    this.#observer?.disconnect();
+    this.#observer = null;
+  }
+}
+
+// ── Register elements ──────────────────────────────────────────
+
+if (!customElements.get('o-idle'))     customElements.define('o-idle', OIdle);
+if (!customElements.get('o-when'))     customElements.define('o-when', OWhen);
+if (!customElements.get('o-viewport')) customElements.define('o-viewport', OViewport);

package/templates/app/@okalit/router-outlet.js

@@ -0,0 +1,66 @@
+import { Router } from './router.js';
+
+export class OkalitRouter extends HTMLElement {
+  constructor() {
+    super();
+    this.attachShadow({ mode: 'open' });
+    const style = document.createElement('style');
+    style.textContent = ':host { display: contents; }';
+    this.shadowRoot.appendChild(style);
+    this._currentComponent = null;
+    this._depth = 0;
+    this._renderVersion = 0;
+  }
+
+  connectedCallback() {
+    this._depth = 0;
+    let root = this.getRootNode();
+    while (root && root.host) {
+      if (root.host.tagName === 'OKALIT-ROUTER') {
+        this._depth++;
+      }
+      root = root.host.getRootNode();
+    }
+
+    const router = Router.getInstance();
+    if (router) {
+      router.registerOutlet(this);
+    }
+  }
+
+  disconnectedCallback() {
+    const router = Router.getInstance();
+    if (router) {
+      router.unregisterOutlet(this);
+    }
+  }
+
+  async _renderRoute(match) {
+    const route = match.chain[this._depth];
+    if (!route) return;
+
+    // Skip if same component already rendered
+    if (this._currentComponent === route.component) return;
+
+    // Version guard: if another _renderRoute starts while we await,
+    // the earlier one becomes stale and should bail out.
+    const version = ++this._renderVersion;
+
+    if (route.import) {
+      await route.import();
+    }
+
+    // Bail out if a newer render was triggered while awaiting
+    if (version !== this._renderVersion) return;
+
+    this._currentComponent = route.component;
+
+    this.shadowRoot.innerHTML = '';
+    const el = document.createElement(route.component);
+    this.shadowRoot.appendChild(el);
+  }
+}
+
+if (!customElements.get('okalit-router')) {
+  customElements.define('okalit-router', OkalitRouter);
+}