@okalit/cli 0.1.0 → 0.2.0

package/README.md

@@ -2,7 +2,11 @@
 
 CLI para crear apps Okalit y generar recursos dentro de un proyecto existente.
 
-## Uso
+# Okalit CLI
+
+CLI to create Okalit apps and generate resources inside an existing project.
+
+## Usage
 
 ```bash
 npx okalit-cli new app-name
@@ -13,16 +17,16 @@ npx okalit-cli -g --guard ./src/guards/auth
 npx okalit-cli -g --interceptor ./src/interceptors/auth
 ```
 
-## Qué genera
+## What it generates
 
-- `new <app-name>`: crea una app Vite basada en el template de Okalit.
-- `-g -c`: crea carpeta del componente con `js` y `scss` o `css` según el proyecto.
-- `-g -s`: crea un archivo `*.service.js` en la ruta indicada.
-- `-g -m`: crea carpeta del módulo con `*.module.js`, `*.routes.js` y página inicial.
-- `-g --guard`: crea un archivo `*.guard.js`.
-- `-g --interceptor`: crea un archivo `*.interceptor.js`.
+- `new <app-name>`: creates a Vite app based on the Okalit template.
+- `-g -c`: creates a component folder with `js` and `scss` or `css` depending on the project.
+- `-g -s`: creates a `*.service.js` file at the specified path.
+- `-g -m`: creates a module folder with `*.module.js`, `*.routes.js`, and a starter page.
+- `-g --guard`: creates a `*.guard.js` file.
+- `-g --interceptor`: creates a `*.interceptor.js` file.
 
-## Desarrollo local
+## Local development
 
 ```bash
 cd okalit-cli

package/lib/cli.js

@@ -14,7 +14,7 @@ const HELP_CONTENT = `
  ██    ██  ██▀██▄    ▄██▀▀▀██    ██         ██       ██     
   ██▄▄██   ██  ▀█▄   ██▄▄▄███    ██▄▄▄   ▄▄▄██▄▄▄    ██▄▄▄  
    ▀▀▀▀    ▀▀   ▀▀▀   ▀▀▀▀ ▀▀     ▀▀▀▀   ▀▀▀▀▀▀▀▀     ▀▀▀▀     
-  By LIAPF                             Okalit CLI - v0.0.1
+  By LIAPF                             Okalit CLI - v0.2.0
 
 Usage:
   okalit new <app-name>
@@ -26,9 +26,9 @@ Commands:
   generate, -g
     -c, --component <path> Create a component
     -s, --service <path>   Create a service
+        --gqservice <path> Create a GraphQL service
     -m, --module <path>    Create a module
         --guard <path>     Create a guard
-        --interceptor <path> Create an interceptor
 
 Examples:
   okalit new my-app
@@ -114,6 +114,7 @@ async function handleGenerate(argv, cwd) {
   const targets = [
     { kind: 'component', flags: ['-c', '--component'] },
     { kind: 'service', flags: ['-s', '--service'] },
+    { kind: 'gqservice', flags: ['--gqservice'] },
     { kind: 'module', flags: ['-m', '--module'] },
     { kind: 'guard', flags: ['--guard'] },
     { kind: 'interceptor', flags: ['--interceptor'] },
@@ -132,15 +133,15 @@ async function handleGenerate(argv, cwd) {
       case 'service':
         generatePlainFile(projectRoot, value, 'service', buildServiceTemplate(value, coreAlias));
         break;
+      case 'gqservice':
+        generatePlainFile(projectRoot, value, 'service', buildGQServiceTemplate(value, coreAlias));
+        break;
       case 'module':
         generateModule(projectRoot, value, styleExt, coreAlias, globalStyleSpecifier);
         break;
       case 'guard':
         generatePlainFile(projectRoot, value, 'guard', buildGuardTemplate(value));
         break;
-      case 'interceptor':
-        generatePlainFile(projectRoot, value, 'interceptor', buildInterceptorTemplate(value));
-        break;
       default:
         break;
     }
@@ -211,8 +212,7 @@ function buildComponentTemplate(tagName, className, styleExt, coreAlias, globalS
     : '';
   const stylesArray = globalStyleSpecifier ? '[styles, global]' : '[styles]';
 
-  return `import { html } from "lit";
-import { Okalit, defineElement } from "${coreAlias}";
+  return `import { Okalit, defineElement, html } from "${coreAlias}";
 
 import styles from "./${tagName}.${styleExt}?inline";${globalStyleImport}
 
@@ -257,8 +257,8 @@ function buildPageTemplate(pageName, className, styleExt, coreAlias, globalStyle
     : '';
   const stylesArray = globalStyleSpecifier ? '[styles, global]' : '[styles]';
 
-  return `import { html } from "lit";
-import { Okalit, defineElement } from "${coreAlias}";
+  return `
+import { Okalit, defineElement, html, PageMixin, t } from "${coreAlias}";
 
 import styles from "./${pageName}.page.${styleExt}?inline";
 ${globalStyleImport}
@@ -267,11 +267,11 @@ ${globalStyleImport}
   tag: "${pageName}-page",
   styles: ${stylesArray}
 })
-export class ${className}Page extends Okalit {
+export class ${className}Page extends PageMixin(Okalit) {
   render() {
     return html\`
       <main>
-        <h1>${'${this.t("WELCOME")}'}</h1>
+        <h1>${'${t("WELCOME")}'}</h1>
       </main>
     \`;
   }
@@ -279,48 +279,56 @@ export class ${className}Page extends Okalit {
 `;
 }
 
-function buildServiceTemplate(rawTarget, coreAlias) {
+function buildGQServiceTemplate(_, coreAlias) {
   return (baseName) => {
     const className = `${toPascalCase(baseName)}Service`;
     const serviceName = `${toCamelCase(baseName)}Service`;
-    const resourcePath = `/${baseName}`;
 
-    return `import { OkalitService, service } from "${coreAlias}";
+    return `import { OkalitGraphqlService, service } from "${coreAlias}";
 
 @service("${serviceName}")
-export class ${className} extends OkalitService {
+export class ${className} extends OkalitGraphqlService {
   constructor() {
     super();
-    this.baseUrl = "";
-    this.version = "1";
-    this.path = "${resourcePath}";
-    this.headers = {};
+    this.configure({
+      endpoint: '',
+      cache: true,
+      cacheTTL: 120_000,
+    });
   }
 }
 `;
   };
-}
+} 
 
-function buildGuardTemplate(rawTarget) {
+function buildServiceTemplate(_, coreAlias) {
   return (baseName) => {
-    const functionName = `${toCamelCase(baseName)}Guard`;
+    const className = `${toPascalCase(baseName)}Service`;
+    const serviceName = `${toCamelCase(baseName)}Service`;
 
-    return `export async function ${functionName}(path, args) {
-  void path;
-  void args;
+    return `import { OkalitService, service } from "${coreAlias}";
 
-  return { allow: true };
+@service("${serviceName}")
+export class ${className} extends OkalitService {
+  constructor() {
+    super();
+    this.configure({
+      baseUrl: '',
+      cache: true,
+      cacheTTL: 60_000,
+    });
+  }
 }
 `;
   };
 }
 
-function buildInterceptorTemplate(rawTarget) {
+function buildGuardTemplate(rawTarget) {
   return (baseName) => {
-    const functionName = `${toCamelCase(baseName)}Interceptor`;
+    const functionName = `${toCamelCase(baseName)}Guard`;
 
-    return `export async function ${functionName}(context) {
-  return context;
+    return `export async function ${functionName}() {
+  return true;
 }
 `;
   };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@okalit/cli",
-  "version": "0.1.0",
+  "version": "0.2.0",
   "description": "CLI to create and generate resources for Okalit projects",
   "type": "module",
   "bin": {

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

@@ -1,129 +1,203 @@
+import { render, html, signal, computed, effect, batch } from 'uhtml';
+import { initChannels } from './channel.js';
 
-import { LitElement } from 'lit';
-import { EventBus } from './EventBus.js';
-import { OkalitI18n } from './i18n.js';
-import {signal, SignalWatcher} from '@lit-labs/signals';
+export { html, signal, computed, effect, batch };
+
+export class Okalit extends HTMLElement {
+  // The @defineElement decorator will populate these static properties
+  static styles = [];
+  static props = [];
+  static params = [];
 
-export class Okalit extends SignalWatcher(LitElement) {
   constructor() {
     super();
+    this.attachShadow({ mode: 'open' });
+    this._initialized = false;
+    this._dispose = [];
+    this._signals = {};
 
-    this._okalit_channel_unsubs = [];
-    this._okalit_listen_unsubs = [];
+    // Create reactive signals for each declared prop
+    this._initProps();
 
-    const props = this.constructor.properties || {};
-    for (const [key, opts] of Object.entries(props)) {
-      if ('value' in opts && this[key] === undefined) {
-        this[key] = opts.value;
-      }
+    // Create reactive signals from URL query params
+    this._initParams();
+
+    // Initialize channels declared in static channels
+    this._dispose.push(...initChannels(this));
+  }
+
+  _initProps() {
+    const props = this.constructor.props;
+    if (!props.length) return;
+
+    for (const propDef of props) {
+      const [name, config] = Object.entries(propDef)[0];
+      this._signals[name] = signal(config.value);
+
+      // Public getter/setter so that:
+      //   - this.name (get) returns the signal (use .value in templates)
+      //   - element.name = 'x' (set) updates the signal (uhtml .prop syntax)
+      Object.defineProperty(this, name, {
+        get: () => this._signals[name],
+        set: (val) => {
+          // If someone passes a raw value (uhtml .prop, or JS), update the signal
+          if (val && typeof val === 'object' && 'value' in val && val === this._signals[name]) return;
+          this._signals[name].value = val;
+        },
+        configurable: true,
+        enumerable: true,
+      });
     }
   }
 
+  attributeChangedCallback(attr, oldVal, newVal) {
+    // Convert kebab-case attribute to camelCase prop name
+    const propName = attr.replace(/-([a-z])/g, (_, c) => c.toUpperCase());
+    const config = this.constructor._propMap?.[propName];
+    if (!config) return;
+
+    // Guard: signals may not exist yet during construction
+    const sig = this._signals?.[propName];
+    if (!sig) return;
+
+    sig.value = coerceValue(newVal, config.type);
+  }
+
   connectedCallback() {
-    super.connectedCallback();
+    this._applyStyles();
 
-    if (typeof this.okalitConnections === 'function') {
-      this.okalitConnections();
+    // Sync any attributes that were set before signals were ready
+    this._syncAttributes();
+
+    if (!this._initialized) {
+      this._initialized = true;
+      this.onInit();
     }
+
+    // Watch all prop signals for onChange hook
+    this._watchProps();
+
+    // Use explicit effect so render() always receives a Hole, not a function.
+    // The effect tracks which signals are read during render and re-runs automatically.
+    const dispose = effect(() => {
+      this.onBeforeRender();
+      render(this.shadowRoot, this.render());
+      this.onAfterRender();
+    });
+    this._dispose.push(dispose);
   }
 
-  disconnectedCallback() {
-    super.disconnectedCallback();
+  _syncAttributes() {
+    const propMap = this.constructor._propMap;
+    if (!propMap) return;
 
-    if (this._okalit_channel_unsubs.length > 0) {
-      this._okalit_channel_unsubs.forEach(unsub => unsub());
-      this._okalit_channel_unsubs = [];
+    for (const [propName, config] of Object.entries(propMap)) {
+      const attr = propName.replace(/([a-z])([A-Z])/g, '$1-$2').toLowerCase();
+      if (this.hasAttribute(attr)) {
+        this._signals[propName].value = coerceValue(this.getAttribute(attr), config.type);
+      }
     }
+  }
 
-    if (this._okalit_listen_unsubs.length > 0) {
-      this._okalit_listen_unsubs.forEach(unsub => unsub());
-      this._okalit_listen_unsubs = [];
-    }
+  _watchProps() {
+    const props = this.constructor.props;
+    if (!props.length) return;
+
+    for (const propDef of props) {
+      const [name] = Object.entries(propDef)[0];
+      let previous = this._signals[name].value;
+
+      const dispose = effect(() => {
+        const current = this._signals[name].value;
+        if (previous !== current) {
+          const old = previous;
+          previous = current;
+          this.onChange({ [name]: { previous: old, current } });
+        }
+      });
 
-    // Clean up @trigger decorator subscriptions
-    if (this._okalit_trigger_unsubs && this._okalit_trigger_unsubs.length > 0) {
-      this._okalit_trigger_unsubs.forEach(unsub => unsub());
-      this._okalit_trigger_unsubs = [];
+      this._dispose.push(dispose);
     }
   }
 
-  output(eventName, detail) {
-    this.dispatchEvent(new CustomEvent(eventName, {
-      detail,
-      bubbles: true,
-      composed: true
-    }));
+  disconnectedCallback() {
+    // Clean up all effects
+    for (const dispose of this._dispose) dispose();
+    this._dispose = [];
+    this.onDestroy();
   }
 
-  emit(event, data, options) {
-    EventBus.emit(event, data, options);
-  }
+  _applyStyles() {
+    const styles = this.constructor.styles;
+    if (!styles.length) return;
 
-  trigger(event, data) {
-    EventBus.trigger(event, data);
+    const sheet = new CSSStyleSheet();
+    sheet.replaceSync(styles.join('\n'));
+    this.shadowRoot.adoptedStyleSheets = [sheet];
   }
 
-  navigate(path, args) {
-    EventBus.trigger('okalit-route:navigate', { path, args });
-  }
+  // --- Lifecycle hooks (override in subclasses) ---
 
-  // Called by the router to inject route + query params.
-  // Coerces values to the types declared in defineElement({ params }).
-  set routeParams(obj) {
-    if (!obj || typeof obj !== 'object') return;
-    const schema = this.constructor.__okalitParams;
-    for (const [key, raw] of Object.entries(obj)) {
-      if (schema && schema[key]) {
-        const typeCtor = schema[key].type;
-        if (typeCtor === Number)       this[key] = Number(raw);
-        else if (typeCtor === Boolean) this[key] = raw === 'true' || raw === '1' || raw === true;
-        else                           this[key] = String(raw);
-      } else {
-        // No schema — assign as-is (string from URL)
-        this[key] = raw;
-      }
-    }
-  }
+  /** Called once when the element is first connected to the DOM */
+  onInit() {}
+
+  /** Called when a prop signal changes: { propName: { previous, current } } */
+  onChange(changes) {}
+
+  /** Called before each render */
+  onBeforeRender() {}
+
+  /** Called after each render */
+  onAfterRender() {}
 
-  listen(event, callback) {
-    const unsub = EventBus.listen(event, callback.bind(this));
-    this._okalit_listen_unsubs.push(unsub);
+  /** Called when the element is disconnected from the DOM */
+  onDestroy() {}
+
+  /** Emit a custom event that crosses shadow DOM boundaries */
+  output(name, detail) {
+    this.dispatchEvent(new CustomEvent(name, {
+      detail,
+      bubbles: true,
+      composed: true,
+    }));
   }
 
-  t(key, params) {
-    return OkalitI18n.t(key, params);
+  /** Return a uhtml template */
+  render() {
+    return html``;
   }
 
-  channel(event, { persist = 'memory', initialValue, onValue } = {}) {
-    const currentValue = EventBus.get(event, { persist, fallback: initialValue });
-    const s = signal(currentValue);
+  _initParams() {
+    const params = this.constructor.params;
+    if (!params.length) return;
 
-    const handleValue = (val) => {
-      s.set(val);
-      if (typeof onValue === 'function') {
-        onValue.call(this, val);
-      }
-      this.requestUpdate();
-    };
+    const urlParams = new URLSearchParams(window.location.search);
 
-    // Subscribe to channel changes
-    const unsub = EventBus.on(event, handleValue, {
-      persist,
-      immediate: false,
-    });
+    for (const paramDef of params) {
+      const [name, config] = Object.entries(paramDef)[0];
+      const raw = urlParams.get(name);
+      const value = raw !== null ? coerceValue(raw, config.type) : config.value;
 
-    this._okalit_channel_unsubs.push(unsub);
+      this._signals[name] = signal(value);
 
-    if (typeof onValue === 'function') {
-      onValue.call(this, currentValue);
+      Object.defineProperty(this, name, {
+        get: () => this._signals[name],
+        set: (val) => {
+          if (val && typeof val === 'object' && 'value' in val && val === this._signals[name]) return;
+          this._signals[name].value = val;
+        },
+        configurable: true,
+        enumerable: true,
+      });
     }
+  }
+}
 
-    return {
-      get: () => s.get(),
-      set: (v) => {
-        s.set(v);
-        EventBus.emit(event, v, { persist });
-      }
-    };
+function coerceValue(value, type) {
+  switch (type) {
+    case Number:  return Number(value);
+    case Boolean: return value !== null && value !== 'false';
+    default:      return value;
   }
 }
+

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

@@ -0,0 +1,177 @@
+import { signal, effect, untracked } from 'uhtml';
+
+// Global registry: one channel instance per name, shared across all components
+const registry = new Map();
+
+/**
+ * Define a reactive channel.
+ *
+ * @param {string} name - Unique channel identifier (e.g. 'ui:theme', 'ui:toast')
+ * @param {Object} options
+ * @param {*} options.initialValue - Default value (ignored if ephemeral)
+ * @param {boolean} options.ephemeral - If true, acts as event bus (no state stored)
+ * @param {'memory'|'local'|'session'} options.persist - Storage backend (default: 'memory')
+ * @param {'app'|'module'|'page'} options.scope - When to clear (default: 'app')
+ * @returns {Function} Factory function to use in static channels
+ */
+export function defineChannel(name, options = {}) {
+  options.persist = options.persist || 'memory';
+  options.scope = options.scope || 'app';
+
+  return function (methodName) {
+    return {
+      _channelName: name,
+      _channelOptions: options,
+      _methodName: methodName || null,
+    };
+  };
+}
+
+/**
+ * Clear all channels matching a given scope.
+ * Called by the router when navigation changes.
+ */
+export function clearChannelsByScope(scope) {
+  for (const [name, channel] of registry) {
+    if (channel.ephemeral) continue;
+    if (channel._scope !== scope) continue;
+
+    // Reset signal to initial value
+    channel.signal.value = channel._initialValue;
+
+    // Remove persisted data
+    const storage = getStorage(channel._persist);
+    if (storage) {
+      storage.removeItem(`okalit:channel:${name}`);
+    }
+  }
+}
+
+/**
+ * Get or create a shared channel instance from the global registry.
+ */
+function getOrCreateChannel(name, options) {
+  if (registry.has(name)) return registry.get(name);
+
+  const subscribers = new Set();
+
+  if (options.ephemeral) {
+    const channel = {
+      ephemeral: true,
+      _scope: options.scope,
+      subscribers,
+      set(value) {
+        for (const fn of subscribers) fn(value);
+      },
+      get value() {
+        return undefined;
+      },
+    };
+    registry.set(name, channel);
+    return channel;
+  }
+
+  const initial = loadFromStorage(name, options) ?? options.initialValue;
+  const sig = signal(initial);
+
+  const channel = {
+    ephemeral: false,
+    _scope: options.scope,
+    _persist: options.persist,
+    _initialValue: options.initialValue,
+    signal: sig,
+    subscribers,
+    set(value) {
+      sig.value = value;
+      saveToStorage(name, value, options);
+    },
+    get value() {
+      return sig.value;
+    },
+  };
+
+  registry.set(name, channel);
+  return channel;
+}
+
+function loadFromStorage(name, options) {
+  const storage = getStorage(options.persist);
+  if (!storage) return undefined;
+
+  const raw = storage.getItem(`okalit:channel:${name}`);
+  if (raw === null) return undefined;
+
+  try {
+    return JSON.parse(raw);
+  } catch {
+    return raw;
+  }
+}
+
+function saveToStorage(name, value, options) {
+  const storage = getStorage(options.persist);
+  if (!storage) return;
+
+  storage.setItem(`okalit:channel:${name}`, JSON.stringify(value));
+}
+
+function getStorage(persist) {
+  if (persist === 'local') return localStorage;
+  if (persist === 'session') return sessionStorage;
+  return null;
+}
+
+/**
+ * Initialize channels declared in static channels.
+ * Called from the Okalit base class constructor.
+ *
+ * @param {HTMLElement} instance - The component instance
+ * @returns {Function[]} Dispose functions to clean up subscriptions
+ */
+export function initChannels(instance) {
+  const channelDefs = instance.constructor.channels;
+  if (!channelDefs) return [];
+
+  const disposers = [];
+  const deferredEffects = [];
+
+  // Phase 1: create all handles first so they're all available on `this`
+  for (const [key, config] of Object.entries(channelDefs)) {
+    const channel = getOrCreateChannel(config._channelName, config._channelOptions);
+
+    const handle = {
+      set: (value) => channel.set(value),
+      get value() {
+        return channel.value;
+      },
+    };
+
+    instance[key] = handle;
+
+    if (config._methodName) {
+      deferredEffects.push({ channel, methodName: config._methodName });
+    }
+  }
+
+  // Phase 2: subscribe effects after all handles exist
+  for (const { channel, methodName } of deferredEffects) {
+    const callback = (value) => {
+      if (typeof instance[methodName] === 'function') {
+        instance[methodName](value);
+      }
+    };
+
+    channel.subscribers.add(callback);
+    disposers.push(() => channel.subscribers.delete(callback));
+
+    if (!channel.ephemeral) {
+      const dispose = effect(() => {
+        const current = channel.signal.value;
+        untracked(() => callback(current));
+      });
+      disposers.push(dispose);
+    }
+  }
+
+  return disposers;
+}