@deijose/nix-ionic 0.1.0

package/README.md

@@ -0,0 +1,759 @@
+# @deijose/nix-ionic
+
+[![npm version](https://img.shields.io/npm/v/@deijose/nix-ionic.svg)](https://www.npmjs.com/package/@deijose/nix-ionic)
+[![License: MIT](https://img.shields.io/badge/License-MIT-blue.svg)](https://opensource.org/licenses/MIT)
+
+> Ionic bridge for [Nix.js](https://nix-js-landing.vercel.app/) — routing, lifecycle hooks, and navigation powered by the official `ion-router` API.
+
+---
+
+## How it works
+
+`@deijose/nix-ionic` bridges Nix.js components with Ionic Core's official vanilla JS routing system:
+
+1. Each route is registered as a **Custom Element** (`nix-page-home`, `nix-page-detail`, etc.)
+2. `ion-router` activates the correct custom element based on the URL
+3. `ion-router-outlet` manages: **view cache, page transitions, back button, iOS swipe back** — all native, zero custom code
+4. `connectedCallback` mounts the Nix component inside the custom element
+5. `ionRouteWillChange` / `ionRouteDidChange` drive the Nix lifecycle hooks
+
+This gives you the same integration depth as `@ionic/angular` and `@ionic/react`, using only the public `ion-router` API.
+
+---
+
+## Installation
+
+```bash
+npm install @deijose/nix-ionic @deijose/nix-js @ionic/core
+```
+
+---
+
+## Quick start
+
+### 1. Initialize Ionic in `main.ts`
+
+```typescript
+import { defineCustomElements } from "@ionic/core/loader";
+defineCustomElements();
+
+import "@ionic/core/css/core.css";
+import "@ionic/core/css/normalize.css";
+import "@ionic/core/css/structure.css";
+import "@ionic/core/css/typography.css";
+import "@ionic/core/css/padding.css";
+import "@ionic/core/css/flex-utils.css";
+import "@ionic/core/css/display.css";
+```
+
+### 2. Define your routes
+
+```typescript
+import { NixComponent, html, mount } from "@deijose/nix-js";
+import { IonRouterOutlet } from "@deijose/nix-ionic";
+import { HomePage }   from "./pages/HomePage";
+import { DetailPage } from "./pages/DetailPage";
+
+const outlet = new IonRouterOutlet([
+  { path: "/",           component: (ctx) => new HomePage(ctx)   },
+  { path: "/detail/:id", component: (ctx) => new DetailPage(ctx) },
+  { path: "/profile",    component: (ctx) => ProfilePage(ctx)    },
+]);
+
+class App extends NixComponent {
+  render() {
+    return html`<ion-app>${outlet}</ion-app>`;
+  }
+}
+
+mount(new App(), "#app");
+```
+
+---
+
+## Pages
+
+### Class component — `IonPage`
+
+Use `IonPage` when you need navigation lifecycle hooks.
+
+```typescript
+import { html, signal } from "@deijose/nix-js";
+import { IonPage, IonBackButton, useRouter } from "@deijose/nix-ionic";
+import type { NixTemplate } from "@deijose/nix-js";
+import type { PageContext } from "@deijose/nix-ionic";
+
+export class DetailPage extends IonPage {
+  private post = signal<Post | null>(null);
+  private _id: string;
+
+  constructor({ lc, params }: PageContext) {
+    super(lc);
+    this._id = params["id"] ?? "1";
+  }
+
+  // Called on EVERY activation — even when returning from cached stack
+  override ionViewWillEnter(): void {
+    this._loadPost(this._id);
+  }
+
+  // Called when leaving the view (still in cache)
+  override ionViewWillLeave(): void {
+    // pause timers, subscriptions, etc.
+  }
+
+  override render(): NixTemplate {
+    return html`
+      <ion-header>
+        <ion-toolbar>
+          <ion-buttons slot="start">
+            ${IonBackButton()}
+          </ion-buttons>
+          <ion-title>Detail</ion-title>
+        </ion-toolbar>
+      </ion-header>
+      <ion-content class="ion-padding">
+        <p>${() => this.post.value?.title ?? ""}</p>
+      </ion-content>
+    `;
+  }
+}
+```
+
+### Function component — composables
+
+```typescript
+import { html, signal } from "@deijose/nix-js";
+import { useIonViewWillEnter, useIonViewWillLeave, IonBackButton } from "@deijose/nix-ionic";
+import type { NixTemplate } from "@deijose/nix-js";
+import type { PageContext } from "@deijose/nix-ionic";
+
+export function ProfilePage({ lc }: PageContext): NixTemplate {
+  const visits = signal(0);
+
+  useIonViewWillEnter(lc, () => {
+    visits.update((n) => n + 1);
+  });
+
+  useIonViewWillLeave(lc, () => {
+    console.log("leaving profile");
+  });
+
+  return html`
+    <ion-header>
+      <ion-toolbar>
+        <ion-buttons slot="start">
+          ${IonBackButton()}
+        </ion-buttons>
+        <ion-title>Profile</ion-title>
+      </ion-toolbar>
+    </ion-header>
+    <ion-content class="ion-padding">
+      <p>Visits: ${() => visits.value}</p>
+    </ion-content>
+  `;
+}
+```
+
+---
+
+## Navigation — `useRouter()`
+
+Access the router singleton from anywhere without prop drilling:
+
+```typescript
+import { useRouter } from "@deijose/nix-ionic";
+
+const router = useRouter();
+
+// Navigate forward
+router.navigate("/detail/42");
+
+// Navigate back
+router.back();
+
+// Replace current view (no history entry)
+router.replace("/home");
+
+// Reactive signals
+router.canGoBack.value   // boolean — true when back stack exists
+router.params.value      // { id: "42" } for /detail/:id
+router.path.value        // current pathname
+```
+
+### In a class component
+
+```typescript
+override render(): NixTemplate {
+  const router = useRouter(); // safe to call inside render()
+
+  return html`
+    <ion-button @click=${() => router.navigate("/profile")}>
+      Go to Profile
+    </ion-button>
+  `;
+}
+```
+
+---
+
+## `IonBackButton()`
+
+A wrapper around `<ion-back-button>` that intercepts the click before Ionic's internal router processes it, calling `router.back()` directly. Automatically hidden on the root page.
+
+```typescript
+import { IonBackButton } from "@deijose/nix-ionic";
+
+// In any template — no arguments needed
+html`
+  <ion-buttons slot="start">
+    ${IonBackButton()}
+  </ion-buttons>
+`
+
+// Optional default href (navigates here if no back stack)
+${IonBackButton("/")}
+```
+
+---
+
+## Lifecycle hooks
+
+All hooks are optional. For class components, implement the methods directly. For function components, use the composables.
+
+| Hook | When it fires |
+|---|---|
+| `ionViewWillEnter` | Before the view becomes visible (every activation) |
+| `ionViewDidEnter` | After the view is fully visible |
+| `ionViewWillLeave` | Before the view is hidden (stays in cache) |
+| `ionViewDidLeave` | After the view is hidden |
+
+### Key difference from `onMount` / `onInit`
+
+`onMount` and `onInit` (from Nix.js) only fire **once** when the component is first created. Ionic caches views in the stack — when the user returns to a cached view, `onMount` does NOT run again.
+
+Use `ionViewWillEnter` for anything that needs to refresh on every visit (data fetching, resetting state, restarting timers):
+
+```typescript
+// ❌ Only runs once — misses subsequent visits
+override onMount() {
+  this._fetchData();
+}
+
+// ✅ Runs on every activation
+override ionViewWillEnter() {
+  this._fetchData();
+}
+```
+
+---
+
+## Route guards
+
+```typescript
+new IonRouterOutlet([
+  { path: "/", component: (ctx) => new HomePage(ctx) },
+  {
+    path: "/admin",
+    component: (ctx) => new AdminPage(ctx),
+    beforeEnter: (to, from) => {
+      if (!isLoggedIn()) return "/login"; // redirect
+      if (!isAdmin())    return false;    // cancel navigation
+      // return void or undefined to allow
+    },
+  },
+]);
+```
+
+| Return value | Effect |
+|---|---|
+| `void` / `undefined` | Allow navigation |
+| `false` | Cancel — stay on current view |
+| `"string"` | Redirect to that path |
+
+---
+
+## `PageContext`
+
+Every route factory receives a `PageContext`:
+
+```typescript
+interface PageContext {
+  lc:     PageLifecycle;        // navigation lifecycle signals
+  params: Record<string,string>; // /detail/:id → { id: "42" }
+}
+```
+
+---
+
+## API Reference
+
+### `IonRouterOutlet`
+
+```typescript
+new IonRouterOutlet(routes: RouteDefinition[])
+```
+
+Mounts `ion-router` + `ion-router-outlet` in the DOM. Registers a custom element per route. Initialize once in your app entry point.
+
+### `useRouter()`
+
+```typescript
+useRouter(): RouterStore
+```
+
+Returns the active router store. Must be called after `IonRouterOutlet` is instantiated.
+
+### `IonBackButton(defaultHref?)`
+
+```typescript
+IonBackButton(defaultHref?: string): NixTemplate
+```
+
+Back button that works with the Nix router. Hidden when `canGoBack` is false.
+
+### `IonPage`
+
+Abstract class. Extend for pages that need lifecycle hooks.
+
+```typescript
+abstract class IonPage extends NixComponent {
+  constructor(lc: PageLifecycle)
+  ionViewWillEnter?(): void
+  ionViewDidEnter?():  void
+  ionViewWillLeave?(): void
+  ionViewDidLeave?():  void
+  abstract render(): NixTemplate
+}
+```
+
+### Composables
+
+```typescript
+useIonViewWillEnter(lc: PageLifecycle, fn: () => void): void
+useIonViewDidEnter(lc:  PageLifecycle, fn: () => void): void
+useIonViewWillLeave(lc: PageLifecycle, fn: () => void): void
+useIonViewDidLeave(lc:  PageLifecycle, fn: () => void): void
+```
+
+---
+
+## Comparison with other frameworks
+
+| Feature | `@ionic/angular` | `@ionic/react` | `@deijose/nix-ionic` |
+|---|---|---|---|
+| Router integration | Angular Router | React Router | `ion-router` (vanilla) |
+| View cache | ✅ | ✅ | ✅ native |
+| Page transitions | ✅ | ✅ | ✅ native |
+| iOS swipe back | ✅ | ✅ | ✅ native |
+| `ion-back-button` | native | wrapper | wrapper |
+| Lifecycle hooks | directive | hooks | `IonPage` / composables |
+| Navigation API | `NavController` | `useHistory` | `useRouter()` |
+
+
+## Project setup
+
+### Prerequisites
+
+| Tool | Version | Install |
+|---|---|---|
+| Node.js | ≥ 18 | [nodejs.org](https://nodejs.org) |
+| npm | ≥ 9 | included with Node |
+| Capacitor CLI | latest | `npm i -g @capacitor/cli` |
+| Android Studio | latest | [developer.android.com](https://developer.android.com/studio) |
+| Xcode | ≥ 14 | Mac App Store |
+
+---
+
+## Create a new project
+
+```bash
+# 1. Scaffold a Vite + TypeScript project
+npm create vite@latest my-app -- --template vanilla-ts
+cd my-app
+
+# 2. Install dependencies
+npm install
+
+# 3. Install Nix.js + Ionic + nix-ionic
+npm install @deijose/nix-js @ionic/core @deijose/nix-ionic
+
+# 4. Install Capacitor (for native iOS / Android)
+npm install @capacitor/core @capacitor/cli
+npm install @capacitor/android @capacitor/ios
+```
+
+---
+
+## Recommended folder structure
+
+```
+my-app/
+├── android/                      ← generated by Capacitor (do not edit manually)
+├── ios/                          ← generated by Capacitor (do not edit manually)
+├── public/
+│   └── favicon.ico
+├── src/
+│   ├── ionic-nix/                ← copy from @deijose/nix-ionic if customizing
+│   │   ├── IonRouterOutlet.ts
+│   │   ├── lifecycle.ts
+│   │   └── index.ts
+│   │
+│   ├── pages/                    ← one file per screen
+│   │   ├── HomePage.ts
+│   │   ├── DetailPage.ts
+│   │   └── ProfilePage.ts
+│   │
+│   ├── components/               ← reusable UI components (not pages)
+│   │   ├── PostCard.ts
+│   │   └── Avatar.ts
+│   │
+│   ├── stores/                   ← global state via Nix.js createStore()
+│   │   ├── auth.ts
+│   │   └── cart.ts
+│   │
+│   ├── services/                 ← API calls, business logic
+│   │   ├── api.ts
+│   │   └── storage.ts
+│   │
+│   ├── style.css                 ← global styles + Ionic CSS imports
+│   └── main.ts                   ← app entry point
+│
+├── index.html
+├── capacitor.config.ts
+├── package.json
+├── tsconfig.json
+└── vite.config.ts
+```
+
+### `main.ts` — entry point
+
+```typescript
+// ── Ionic loader ─────────────────────────────────────────────────────────────
+import { defineCustomElements } from "@ionic/core/loader";
+defineCustomElements();
+
+// ── Ionic CSS (order matters) ─────────────────────────────────────────────────
+import "@ionic/core/css/core.css";
+import "@ionic/core/css/normalize.css";
+import "@ionic/core/css/structure.css";
+import "@ionic/core/css/typography.css";
+import "@ionic/core/css/padding.css";
+import "@ionic/core/css/flex-utils.css";
+import "@ionic/core/css/display.css";
+
+// ── App styles ────────────────────────────────────────────────────────────────
+import "./style.css";
+
+// ── App ───────────────────────────────────────────────────────────────────────
+import { NixComponent, html, mount } from "@deijose/nix-js";
+import type { NixTemplate } from "@deijose/nix-js";
+import { IonRouterOutlet } from "@deijose/nix-ionic";
+
+import { HomePage }    from "./pages/HomePage";
+import { DetailPage }  from "./pages/DetailPage";
+import { ProfilePage } from "./pages/ProfilePage";
+
+const outlet = new IonRouterOutlet([
+  { path: "/",           component: (ctx) => new HomePage(ctx)   },
+  { path: "/detail/:id", component: (ctx) => new DetailPage(ctx) },
+  { path: "/profile",    component: (ctx) => ProfilePage(ctx)    },
+]);
+
+class App extends NixComponent {
+  override render(): NixTemplate {
+    return html`<ion-app>${outlet}</ion-app>`;
+  }
+}
+
+mount(new App(), "#app");
+```
+
+### `index.html` — root HTML
+
+```html
+<!DOCTYPE html>
+<html lang="en" dir="ltr">
+  <head>
+    <meta charset="UTF-8" />
+    <meta
+      name="viewport"
+      content="viewport-fit=cover, width=device-width, initial-scale=1.0,
+               minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"
+    />
+    <title>My App</title>
+  </head>
+  <body>
+    <div id="app"></div>
+    <script type="module" src="/src/main.ts"></script>
+  </body>
+</html>
+```
+
+### `capacitor.config.ts`
+
+```typescript
+import type { CapacitorConfig } from "@capacitor/cli";
+
+const config: CapacitorConfig = {
+  appId: "com.example.myapp",
+  appName: "My App",
+  webDir: "dist",
+};
+
+export default config;
+```
+
+### `vite.config.ts`
+
+```typescript
+import { defineConfig } from "vite";
+
+export default defineConfig({
+  optimizeDeps: {
+    exclude: ["@ionic/core"],
+  },
+  build: {
+    rollupOptions: {
+      output: { manualChunks: undefined },
+    },
+  },
+});
+```
+
+---
+
+## Development commands
+
+### Web
+
+```bash
+# Start dev server (hot reload)
+npm run dev
+
+# Type check
+npx tsc --noEmit
+
+# Production build
+npm run build
+
+# Preview production build
+npm run preview
+```
+
+---
+
+## Android
+
+### First-time setup
+
+```bash
+# 1. Build the web app
+npm run build
+
+# 2. Initialize Capacitor (only once)
+npx cap init "My App" "com.example.myapp" --web-dir dist
+
+# 3. Add Android platform
+npx cap add android
+
+# 4. Sync web assets to native project
+npx cap sync android
+```
+
+### Daily workflow
+
+```bash
+# After any change to web code:
+npm run build
+npx cap sync android
+
+# Open in Android Studio (run / debug from there)
+npx cap open android
+
+# Or run directly on a connected device / emulator
+npx cap run android
+```
+
+### Live reload on Android (dev)
+
+```bash
+# Start dev server first
+npm run dev
+
+# In a second terminal — live reload on device
+npx cap run android --livereload --external
+```
+
+> **Note:** device and computer must be on the same Wi-Fi network for live reload.
+
+---
+
+## iOS
+
+> Requires macOS + Xcode.
+
+### First-time setup
+
+```bash
+# 1. Build the web app
+npm run build
+
+# 2. Add iOS platform
+npx cap add ios
+
+# 3. Sync
+npx cap sync ios
+```
+
+### Daily workflow
+
+```bash
+npm run build
+npx cap sync ios
+
+# Open in Xcode (run / debug from there)
+npx cap open ios
+
+# Or run on simulator
+npx cap run ios
+```
+
+### Live reload on iOS (dev)
+
+```bash
+npm run dev
+npx cap run ios --livereload --external
+```
+
+---
+
+## Capacitor plugins
+
+Add any official Capacitor plugin the same way:
+
+```bash
+# Camera
+npm install @capacitor/camera
+npx cap sync
+
+# Filesystem
+npm install @capacitor/filesystem
+npx cap sync
+
+# Push notifications
+npm install @capacitor/push-notifications
+npx cap sync
+```
+
+Then use them in your services:
+
+```typescript
+// src/services/camera.ts
+import { Camera, CameraResultType } from "@capacitor/camera";
+
+export async function takePhoto(): Promise<string> {
+  const photo = await Camera.getPhoto({
+    quality:      90,
+    allowEditing: false,
+    resultType:   CameraResultType.DataUrl,
+  });
+  return photo.dataUrl ?? "";
+}
+```
+
+---
+
+## Page template
+
+Copy this as a starting point for any new page:
+
+```typescript
+// src/pages/MyPage.ts
+import { html, signal } from "@deijose/nix-js";
+import type { NixTemplate } from "@deijose/nix-js";
+import { IonPage, IonBackButton, useRouter } from "@deijose/nix-ionic";
+import type { PageContext } from "@deijose/nix-ionic";
+
+export class MyPage extends IonPage {
+  private data = signal<string | null>(null);
+
+  constructor({ lc, params }: PageContext) {
+    super(lc);
+    // params contains dynamic route segments
+    // e.g. for /my/:id → params["id"]
+  }
+
+  // Runs on EVERY visit (initial + returning from stack)
+  override ionViewWillEnter(): void {
+    this._load();
+  }
+
+  // Runs when navigating away (view stays cached)
+  override ionViewWillLeave(): void {
+    // pause subscriptions, timers, etc.
+  }
+
+  private async _load(): Promise<void> {
+    // fetch data
+  }
+
+  override render(): NixTemplate {
+    const router = useRouter();
+
+    return html`
+      <ion-header>
+        <ion-toolbar>
+          <ion-buttons slot="start">
+            ${IonBackButton()}
+          </ion-buttons>
+          <ion-title>My Page</ion-title>
+        </ion-toolbar>
+      </ion-header>
+
+      <ion-content class="ion-padding">
+        <p>${() => this.data.value ?? "Loading..."}</p>
+
+        <ion-button @click=${() => router.navigate("/other")}>
+          Go somewhere
+        </ion-button>
+      </ion-content>
+    `;
+  }
+}
+```
+
+Register it in `main.ts`:
+
+```typescript
+{ path: "/my/:id", component: (ctx) => new MyPage(ctx) },
+```
+
+---
+
+## Build for production
+
+```bash
+# Web PWA
+npm run build
+# Output in dist/ — deploy to any static host (Vercel, Netlify, etc.)
+
+# Android APK / AAB
+npm run build
+npx cap sync android
+npx cap open android
+# In Android Studio: Build → Generate Signed Bundle/APK
+
+# iOS IPA
+npm run build
+npx cap sync ios
+npx cap open ios
+# In Xcode: Product → Archive
+```
+
+
+## License
+
+[MIT](https://opensource.org/licenses/MIT)
+
+---

package/dist/IonRouterOutlet.d.ts

@@ -0,0 +1,57 @@
+/**
+ * ionic-nix/IonRouterOutlet.ts
+ *
+ * Bridge entre Nix.js e ion-router (API pública oficial para vanilla JS).
+ *
+ * Arquitectura:
+ *  1. Por cada ruta registramos un Custom Element (nix-page-home, etc.)
+ *  2. ion-router activa el custom element según la URL
+ *  3. ion-router-outlet gestiona: caché, animaciones, back button, swipe back
+ *  4. connectedCallback del custom element monta el componente Nix adentro
+ *  5. ionRouteWillChange / ionRouteDidChange disparan el ciclo de vida Nix
+ */
+import { NixComponent } from "@deijose/nix-js";
+import type { NixTemplate, Signal } from "@deijose/nix-js";
+import { type PageLifecycle } from "./lifecycle";
+interface RouterStore {
+    navigate: (path: string) => void;
+    replace: (path: string) => void;
+    back: () => void;
+    canGoBack: Signal<boolean>;
+    params: Signal<Record<string, string>>;
+    path: Signal<string>;
+}
+export declare function useRouter(): RouterStore;
+export declare function IonBackButton(defaultHref?: string): NixTemplate;
+export interface PageContext {
+    lc: PageLifecycle;
+    params: Record<string, string>;
+}
+export interface RouteDefinition {
+    path: string;
+    component: (ctx: PageContext) => NixComponent | NixTemplate;
+    beforeEnter?: (to: string, from: string) => boolean | string | void;
+}
+export declare class IonRouterOutlet extends NixComponent {
+    private routes;
+    private ionRouterEl;
+    private _currentPath;
+    private _canGoBack;
+    private _params;
+    constructor(routes: RouteDefinition[]);
+    onInit(): void;
+    onMount(): () => void;
+    navigate(path: string): void;
+    replace(path: string): void;
+    back(): void;
+    private _handlePopState;
+    private _handleWillChange;
+    private _handleDidChange;
+    private _matchRoute;
+    private _extractParams;
+    private _pathToTag;
+    private _registerCustomElements;
+    render(): NixTemplate;
+    onUnmount(): void;
+}
+export {};

package/dist/index.d.ts

@@ -0,0 +1,2 @@
+export { IonPage, createPageLifecycle, useIonViewWillEnter, useIonViewDidEnter, useIonViewWillLeave, useIonViewDidLeave, type PageLifecycle, } from "./lifecycle";
+export { IonRouterOutlet, IonBackButton, useRouter, type RouteDefinition, type PageContext, } from "./IonRouterOutlet";

package/dist/lib/nix-ionic.cjs

@@ -0,0 +1 @@
+Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});let e=require("@deijose/nix-js");function t(){return{willEnter:(0,e.signal)(0),didEnter:(0,e.signal)(0),willLeave:(0,e.signal)(0),didLeave:(0,e.signal)(0)}}var n=class extends e.NixComponent{__lc;constructor(e){super(),this.__lc=e}onInit(){let t=this.__lc;this.ionViewWillEnter&&(0,e.watch)(t.willEnter,this.ionViewWillEnter.bind(this)),this.ionViewDidEnter&&(0,e.watch)(t.didEnter,this.ionViewDidEnter.bind(this)),this.ionViewWillLeave&&(0,e.watch)(t.willLeave,this.ionViewWillLeave.bind(this)),this.ionViewDidLeave&&(0,e.watch)(t.didLeave,this.ionViewDidLeave.bind(this))}};function r(t,n){(0,e.watch)(t.willEnter,n)}function i(t,n){(0,e.watch)(t.didEnter,n)}function a(t,n){(0,e.watch)(t.willLeave,n)}function o(t,n){(0,e.watch)(t.didLeave,n)}var s=null;function c(){if(!s)throw Error("[nix-ionic] useRouter() llamado antes de montar IonRouterOutlet");return s}function l(e){return{__isNixTemplate:!0,mount(e){let t="string"==typeof e?document.querySelector(e):e;return{unmount:this._render(t,null)}},_render(t,n){let i=document.createElement("ion-back-button");i.setAttribute("default-href",e??"/");let a=t=>{t.stopPropagation(),t.preventDefault(),s?.canGoBack.value?s.back():e&&s?.navigate(e)};return i.addEventListener("click",a),t.insertBefore(i,n),()=>{i.removeEventListener("click",a),i.remove()}}}}var u=new Map,d=class extends e.NixComponent{routes;ionRouterEl=null;_currentPath=(0,e.signal)(location.pathname);_canGoBack=(0,e.signal)(!1);_params=(0,e.signal)({});constructor(e){super(),this.routes=e,s={navigate:e=>this.navigate(e),replace:e=>this.replace(e),back:()=>this.back(),canGoBack:this._canGoBack,params:this._params,path:this._currentPath},this._registerCustomElements()}onInit(){window.addEventListener("popstate",this._handlePopState)}onMount(){this.ionRouterEl=document.querySelector("ion-router");let e=e=>{let{to:t,from:n}=e.detail;this._handleWillChange(t,n??"")},t=e=>{let{to:t}=e.detail;this._handleDidChange(t)},n=e=>{e.detail.register(100,e=>{this._canGoBack.value?this.back():e()})};return window.addEventListener("ionRouteWillChange",e),window.addEventListener("ionRouteDidChange",t),document.addEventListener("ionBackButton",n),()=>{window.removeEventListener("popstate",this._handlePopState),window.removeEventListener("ionRouteWillChange",e),window.removeEventListener("ionRouteDidChange",t),document.removeEventListener("ionBackButton",n),s=null}}navigate(e){e!==location.pathname&&this.ionRouterEl?.push(e,"forward")}replace(e){this.ionRouterEl?.push(e,"root")}back(){this.ionRouterEl?.back()}_handlePopState=()=>{this._handleWillChange(location.pathname,this._currentPath.peek())};_handleWillChange(e,t){let n=this._matchRoute(e);if(!n)return;if(n.beforeEnter){let i=n.beforeEnter(e,t);if(!1===i)return void this.back();if("string"==typeof i)return void this.navigate(i)}this._currentPath.value=e,this._params.value=this._extractParams(n.path,e);let i=this._pathToTag(t);u.get(i)?.willLeave.update(e=>e+1)}_handleDidChange(e){let t=document.querySelector("ion-router-outlet");this._canGoBack.value=t?.canGoBack?.()??!1,u.forEach((t,n)=>{n!==this._pathToTag(e)&&t.didLeave.update(e=>e+1)});let n=this._pathToTag(e),i=u.get(n),a=document.querySelector(n);i&&a?._isCached&&(i.willEnter.update(e=>e+1),requestAnimationFrame(()=>i.didEnter.update(e=>e+1)))}_matchRoute(e){let t=this.routes.find(t=>t.path===e);if(t)return t;for(let t of this.routes)if(RegExp(`^${t.path.replace(/:[^/]+/g,"([^/]+)")}$`).test(e))return t;return this.routes.find(e=>"*"===e.path)}_extractParams(e,t){let n={},i=e.split("/"),a=t.split("/");for(let e=0;e<i.length;e++)i[e].startsWith(":")&&(n[i[e].slice(1)]=a[e]??"");return n}_pathToTag(e){return e&&"/"!==e?`nix-page-${e.replace(/\/:?[^/]+/g,e=>"-"+e.replace(/\//g,"").replace(/:/g,"")).replace(/^\//,"").replace(/\//g,"-")}`:"nix-page-home"}_registerCustomElements(){for(let e of this.routes){if("*"===e.path)continue;let n=this._pathToTag(e.path),i=e,a=this;customElements.get(n)||customElements.define(n,class extends HTMLElement{_cleanup=null;connectedCallback(){let e=a._extractParams(i.path,location.pathname),r=t();u.set(n,r),this.classList.add("ion-page");let o=i.component({lc:r,params:e});if("render"in o&&"function"==typeof o.render){let e=o;e.onInit?.();let t=e.render()._render(this,null),n=e.onMount?.();this._cleanup=()=>{e.onUnmount?.(),"function"==typeof n&&n(),t()}}else this._cleanup=o._render(this,null);r.willEnter.update(e=>e+1),requestAnimationFrame(()=>{r.didEnter.update(e=>e+1),this._isCached=!0})}disconnectedCallback(){let e=u.get(n);e&&(e.willLeave.update(e=>e+1),e.didLeave.update(e=>e+1)),this._cleanup?.(),this._cleanup=null,u.delete(n)}})}}render(){let e=this;return{__isNixTemplate:!0,mount(e){let t="string"==typeof e?document.querySelector(e):e;return{unmount:this._render(t,null)}},_render(t,n){let i=document.createElement("ion-router");i.setAttribute("use-hash","false"),i.innerHTML=e.routes.filter(e=>"*"!==e.path).map(t=>`<ion-route url="${t.path}" component="${e._pathToTag(t.path)}"></ion-route>`).join("");let a=document.createElement("ion-router-outlet");return t.insertBefore(i,n),t.insertBefore(a,n),e.ionRouterEl=i,()=>{i.remove(),a.remove()}}}}onUnmount(){u.clear(),s=null}};exports.IonBackButton=l,exports.IonPage=n,exports.IonRouterOutlet=d,exports.createPageLifecycle=t,exports.useIonViewDidEnter=i,exports.useIonViewDidLeave=o,exports.useIonViewWillEnter=r,exports.useIonViewWillLeave=a,exports.useRouter=c;

package/dist/lib/nix-ionic.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"nix-ionic.cjs","names":[],"sources":["../../src/lifecycle.ts","../../src/IonRouterOutlet.ts"],"sourcesContent":["/**\n * ionic-nix/lifecycle.ts\n *\n * Sistema de ciclo de vida de navegación, análogo a los hooks de Ionic:\n *   ionViewWillEnter / ionViewDidEnter / ionViewWillLeave / ionViewDidLeave\n *\n * Cómo funciona (sin provide/inject):\n *   1. IonRouterOutlet crea un `PageLifecycle` por cada ruta.\n *   2. Lo pasa directamente al factory de la ruta como argumento.\n *   3. El factory llama a `new MiPagina(lc)` o `MiPagina(lc)`.\n *   4. IonPage/composables registran watchers sobre las señales del lc.\n *   5. Cuando el router navega, incrementa las señales → watchers se disparan.\n */\n\nimport { signal, watch } from \"@deijose/nix-js\";\nimport type { Signal } from \"@deijose/nix-js\";\nimport { NixComponent } from \"@deijose/nix-js\";\n\n// --------------------------------------------------------------------------\n// Tipos públicos\n// --------------------------------------------------------------------------\n\nexport interface PageLifecycle {\n  willEnter: Signal<number>;\n  didEnter:  Signal<number>;\n  willLeave: Signal<number>;\n  didLeave:  Signal<number>;\n}\n\n/** Crea un nuevo PageLifecycle con señales en 0. */\nexport function createPageLifecycle(): PageLifecycle {\n  return {\n    willEnter: signal(0),\n    didEnter:  signal(0),\n    willLeave: signal(0),\n    didLeave:  signal(0),\n  };\n}\n\n// --------------------------------------------------------------------------\n// IonPage — clase base para páginas con hooks de navegación\n// --------------------------------------------------------------------------\n//\n// Uso:\n//   class HomePage extends IonPage {\n//     constructor(lc: PageLifecycle) { super(lc); }\n//\n//     ionViewWillEnter() { /* fetch de datos frescos */ }\n//     render() { return html`...`; }\n//   }\n\nexport abstract class IonPage extends NixComponent {\n  private __lc: PageLifecycle;\n\n  constructor(lc: PageLifecycle) {\n    super();\n    this.__lc = lc;\n  }\n\n  override onInit(): void {\n    const lc = this.__lc;\n    // watch no corre en init (immediate: false), así que ionViewWillEnter\n    // solo se llama cuando el outlet incrementa la señal, no al construir.\n    if (this.ionViewWillEnter) watch(lc.willEnter, this.ionViewWillEnter.bind(this));\n    if (this.ionViewDidEnter)  watch(lc.didEnter,  this.ionViewDidEnter.bind(this));\n    if (this.ionViewWillLeave) watch(lc.willLeave, this.ionViewWillLeave.bind(this));\n    if (this.ionViewDidLeave)  watch(lc.didLeave,  this.ionViewDidLeave.bind(this));\n  }\n\n  ionViewWillEnter?(): void;\n  ionViewDidEnter?():  void;\n  ionViewWillLeave?(): void;\n  ionViewDidLeave?():  void;\n}\n\n// --------------------------------------------------------------------------\n// Composables para function components\n// --------------------------------------------------------------------------\n//\n// Uso:\n//   function ProfilePage(lc: PageLifecycle): NixTemplate {\n//     useIonViewWillEnter(lc, () => { /* fetch */ });\n//     return html`...`;\n//   }\n\nexport function useIonViewWillEnter(lc: PageLifecycle, fn: () => void): void {\n  watch(lc.willEnter, fn);\n}\n\nexport function useIonViewDidEnter(lc: PageLifecycle, fn: () => void): void {\n  watch(lc.didEnter, fn);\n}\n\nexport function useIonViewWillLeave(lc: PageLifecycle, fn: () => void): void {\n  watch(lc.willLeave, fn);\n}\n\nexport function useIonViewDidLeave(lc: PageLifecycle, fn: () => void): void {\n  watch(lc.didLeave, fn);\n}","/**\n * ionic-nix/IonRouterOutlet.ts\n *\n * Bridge entre Nix.js e ion-router (API pública oficial para vanilla JS).\n *\n * Arquitectura:\n *  1. Por cada ruta registramos un Custom Element (nix-page-home, etc.)\n *  2. ion-router activa el custom element según la URL\n *  3. ion-router-outlet gestiona: caché, animaciones, back button, swipe back\n *  4. connectedCallback del custom element monta el componente Nix adentro\n *  5. ionRouteWillChange / ionRouteDidChange disparan el ciclo de vida Nix\n */\n\nimport { NixComponent, signal } from \"@deijose/nix-js\";\nimport type { NixTemplate, Signal } from \"@deijose/nix-js\";\nimport { createPageLifecycle, type PageLifecycle } from \"./lifecycle\";\n\n// --------------------------------------------------------------------------\n// Router store singleton\n// --------------------------------------------------------------------------\n\ninterface RouterStore {\n  navigate:  (path: string) => void;\n  replace:   (path: string) => void;\n  back:      () => void;\n  canGoBack: Signal<boolean>;\n  params:    Signal<Record<string, string>>;\n  path:      Signal<string>;\n}\n\nlet _router: RouterStore | null = null;\n\nexport function useRouter(): RouterStore {\n  if (!_router) throw new Error(\"[nix-ionic] useRouter() llamado antes de montar IonRouterOutlet\");\n  return _router;\n}\n\n// --------------------------------------------------------------------------\n// IonBackButton — intercepta el click antes del shadow DOM\n// --------------------------------------------------------------------------\n\nexport function IonBackButton(defaultHref?: string): NixTemplate {\n  return {\n    __isNixTemplate: true as const,\n    mount(container) {\n      const el = typeof container === \"string\" ? document.querySelector(container)! : container;\n      const cleanup = this._render(el, null);\n      return { unmount: cleanup };\n    },\n    _render(parent: Node, before: Node | null): () => void {\n      const btn = document.createElement(\"ion-back-button\") as HTMLElement;\n      btn.setAttribute(\"default-href\", defaultHref ?? \"/\");\n      const handler = (e: Event) => {\n        e.stopPropagation();\n        e.preventDefault();\n        if (_router?.canGoBack.value) _router.back();\n        else if (defaultHref) _router?.navigate(defaultHref);\n      };\n      btn.addEventListener(\"click\", handler);\n      parent.insertBefore(btn, before);\n      return () => {\n        btn.removeEventListener(\"click\", handler);\n        btn.remove();\n      };\n    },\n  };\n}\n\n// --------------------------------------------------------------------------\n// Tipos públicos\n// --------------------------------------------------------------------------\n\nexport interface PageContext {\n  lc:     PageLifecycle;\n  params: Record<string, string>;\n}\n\nexport interface RouteDefinition {\n  path:         string;\n  component:    (ctx: PageContext) => NixComponent | NixTemplate;\n  beforeEnter?: (to: string, from: string) => boolean | string | void;\n}\n\n// --------------------------------------------------------------------------\n// Mapa global de lifecycles activos por tag\n// --------------------------------------------------------------------------\n\nconst _lifecycleRegistry = new Map<string, PageLifecycle>();\n\n// --------------------------------------------------------------------------\n// IonRouterOutlet\n// --------------------------------------------------------------------------\n\nexport class IonRouterOutlet extends NixComponent {\n  private routes:      RouteDefinition[];\n  private ionRouterEl: HTMLElement | null = null;\n\n  private _currentPath = signal(location.pathname);\n  private _canGoBack   = signal(false);\n  private _params      = signal<Record<string, string>>({});\n\n  constructor(routes: RouteDefinition[]) {\n    super();\n    this.routes = routes;\n\n    // Store disponible desde el constructor — antes que cualquier\n    // connectedCallback de custom element\n    _router = {\n      navigate:  (path) => this.navigate(path),\n      replace:   (path) => this.replace(path),\n      back:      ()     => this.back(),\n      canGoBack: this._canGoBack,\n      params:    this._params,\n      path:      this._currentPath,\n    };\n\n    this._registerCustomElements();\n  }\n\n  override onInit(): void {\n    window.addEventListener(\"popstate\", this._handlePopState);\n  }\n\n  override onMount(): () => void {\n    this.ionRouterEl = document.querySelector(\"ion-router\");\n\n    const onWillChange = (ev: Event) => {\n      const { to, from } = (ev as CustomEvent).detail as { to: string; from: string };\n      this._handleWillChange(to, from ?? \"\");\n    };\n    const onDidChange = (ev: Event) => {\n      const { to } = (ev as CustomEvent).detail as { to: string };\n      this._handleDidChange(to);\n    };\n    const onIonBack = (ev: Event) => {\n      (ev as CustomEvent).detail.register(100, (next: () => void) => {\n        if (this._canGoBack.value) this.back(); else next();\n      });\n    };\n\n    window.addEventListener(\"ionRouteWillChange\", onWillChange);\n    window.addEventListener(\"ionRouteDidChange\",  onDidChange);\n    document.addEventListener(\"ionBackButton\",    onIonBack);\n\n    return () => {\n      window.removeEventListener(\"popstate\",          this._handlePopState);\n      window.removeEventListener(\"ionRouteWillChange\", onWillChange);\n      window.removeEventListener(\"ionRouteDidChange\",  onDidChange);\n      document.removeEventListener(\"ionBackButton\",    onIonBack);\n      _router = null;\n    };\n  }\n\n  // -------------------------------------------------------------------------\n  // API pública\n  // -------------------------------------------------------------------------\n\n  navigate(path: string): void {\n    if (path === location.pathname) return;\n    (this.ionRouterEl as any)?.push(path, \"forward\");\n  }\n\n  replace(path: string): void {\n    (this.ionRouterEl as any)?.push(path, \"root\");\n  }\n\n  back(): void {\n    (this.ionRouterEl as any)?.back();\n  }\n\n  // -------------------------------------------------------------------------\n  // Handlers privados\n  // -------------------------------------------------------------------------\n\n  private _handlePopState = (): void => {\n    // El browser navegó con sus propios botones — sincronizar\n    this._handleWillChange(location.pathname, this._currentPath.peek());\n  };\n\n  private _handleWillChange(to: string, from: string): void {\n    const route = this._matchRoute(to);\n    if (!route) return;\n\n    // Guards\n    if (route.beforeEnter) {\n      const result = route.beforeEnter(to, from);\n      if (result === false) { this.back(); return; }\n      if (typeof result === \"string\") { this.navigate(result); return; }\n    }\n\n    this._currentPath.value = to;\n    this._params.value      = this._extractParams(route.path, to);\n\n    // willLeave en la vista que sale (ya tiene lc registrado)\n    const fromTag = this._pathToTag(from);\n    _lifecycleRegistry.get(fromTag)?.willLeave.update((n) => n + 1);\n  }\n\n  private _handleDidChange(to: string): void {\n    const outlet = document.querySelector(\"ion-router-outlet\") as any;\n    this._canGoBack.value = outlet?.canGoBack?.() ?? false;\n\n    // didLeave en la vista que salió\n    _lifecycleRegistry.forEach((lc, tag) => {\n      if (tag !== this._pathToTag(to)) lc.didLeave.update((n) => n + 1);\n    });\n\n    // Para vistas CACHEADAS (ya existían en el DOM, connectedCallback no se llama de nuevo)\n    // disparamos willEnter/didEnter aquí.\n    // Para vistas NUEVAS, connectedCallback ya lo hizo — disparar de nuevo haría doble.\n    // Distinguimos: si el tag ya estaba en el registry ANTES de este didChange,\n    // es una vista cacheada. Usamos un flag en el custom element.\n    const toTag  = this._pathToTag(to);\n    const toLc   = _lifecycleRegistry.get(toTag);\n    const toEl   = document.querySelector(toTag) as any;\n    if (toLc && toEl?._isCached) {\n      toLc.willEnter.update((n) => n + 1);\n      requestAnimationFrame(() => toLc.didEnter.update((n) => n + 1));\n    }\n  }\n\n  // -------------------------------------------------------------------------\n  // Helpers\n  // -------------------------------------------------------------------------\n\n  private _matchRoute(path: string): RouteDefinition | undefined {\n    const exact = this.routes.find((r) => r.path === path);\n    if (exact) return exact;\n    for (const route of this.routes) {\n      const re = new RegExp(`^${route.path.replace(/:[^/]+/g, \"([^/]+)\")}$`);\n      if (re.test(path)) return route;\n    }\n    return this.routes.find((r) => r.path === \"*\");\n  }\n\n  private _extractParams(routePath: string, realPath: string): Record<string, string> {\n    const params: Record<string, string> = {};\n    const rP = routePath.split(\"/\");\n    const uP = realPath.split(\"/\");\n    for (let i = 0; i < rP.length; i++) {\n      if (rP[i].startsWith(\":\")) params[rP[i].slice(1)] = uP[i] ?? \"\";\n    }\n    return params;\n  }\n\n  private _pathToTag(path: string): string {\n    if (!path || path === \"/\") return \"nix-page-home\";\n    const clean = path\n      .replace(/\\/:?[^/]+/g, (m) => \"-\" + m.replace(/\\//g, \"\").replace(/:/g, \"\"))\n      .replace(/^\\//, \"\")\n      .replace(/\\//g, \"-\");\n    return `nix-page-${clean}`;\n  }\n\n  // -------------------------------------------------------------------------\n  // Registro de Custom Elements\n  // -------------------------------------------------------------------------\n\n  private _registerCustomElements(): void {\n    for (const route of this.routes) {\n      if (route.path === \"*\") continue;\n\n      const tag      = this._pathToTag(route.path);\n      const routeDef = route;\n      const self     = this;\n\n      if (customElements.get(tag)) continue;\n\n      customElements.define(tag, class extends HTMLElement {\n        private _cleanup: (() => void) | null = null;\n\n        connectedCallback(): void {\n          const params = self._extractParams(routeDef.path, location.pathname);\n          const lc     = createPageLifecycle();\n\n          _lifecycleRegistry.set(tag, lc);\n          this.classList.add(\"ion-page\");\n\n          const pageNode = routeDef.component({ lc, params });\n\n          if (\"render\" in pageNode && typeof (pageNode as NixComponent).render === \"function\") {\n            const comp = pageNode as NixComponent;\n            comp.onInit?.();\n            const renderCleanup = comp.render()._render(this, null);\n            const mountRet      = comp.onMount?.();\n            this._cleanup = () => {\n              comp.onUnmount?.();\n              if (typeof mountRet === \"function\") mountRet();\n              renderCleanup();\n            };\n          } else {\n            this._cleanup = (pageNode as NixTemplate)._render(this, null);\n          }\n\n          // Disparar willEnter/didEnter aquí — el lc ya está registrado\n          // y el componente ya está inicializado con sus watchers\n          lc.willEnter.update((n) => n + 1);\n          requestAnimationFrame(() => {\n            lc.didEnter.update((n) => n + 1);\n            // Marcar como cacheado para que ionRouteDidChange pueda\n            // disparar willEnter en visitas subsiguientes\n            (this as any)._isCached = true;\n          });\n        }\n\n        disconnectedCallback(): void {\n          // Disparar willLeave/didLeave al salir\n          const lc = _lifecycleRegistry.get(tag);\n          if (lc) {\n            lc.willLeave.update((n) => n + 1);\n            lc.didLeave.update((n) => n + 1);\n          }\n          this._cleanup?.();\n          this._cleanup = null;\n          _lifecycleRegistry.delete(tag);\n        }\n      });\n    }\n  }\n\n  // -------------------------------------------------------------------------\n  // Render — crea ion-router + ion-router-outlet como elementos DOM reales\n  // -------------------------------------------------------------------------\n\n  override render(): NixTemplate {\n    const self = this;\n    return {\n      __isNixTemplate: true as const,\n      mount(container: Element | string): { unmount(): void } {\n        const el = typeof container === \"string\"\n          ? (document.querySelector(container) as Element)\n          : container;\n        const cleanup = this._render(el, null);\n        return { unmount: cleanup };\n      },\n      _render(parent: Node, before: Node | null): () => void {\n        // ion-router con las rutas declarativas\n        const routerEl = document.createElement(\"ion-router\");\n        routerEl.setAttribute(\"use-hash\", \"false\");\n        routerEl.innerHTML = self.routes\n          .filter((r) => r.path !== \"*\")\n          .map((r) => `<ion-route url=\"${r.path}\" component=\"${self._pathToTag(r.path)}\"></ion-route>`)\n          .join(\"\");\n\n        const outletEl = document.createElement(\"ion-router-outlet\");\n\n        parent.insertBefore(routerEl, before);\n        parent.insertBefore(outletEl, before);\n\n        self.ionRouterEl = routerEl;\n\n        return () => { routerEl.remove(); outletEl.remove(); };\n      },\n    };\n  }\n\n  override onUnmount(): void {\n    _lifecycleRegistry.clear();\n    _router = null;\n  }\n}"],"mappings":"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"}

package/dist/lib/nix-ionic.js

@@ -0,0 +1 @@
+import{NixComponent as e,signal as t,watch as n}from"@deijose/nix-js";function r(){return{willEnter:t(0),didEnter:t(0),willLeave:t(0),didLeave:t(0)}}var i=class extends e{__lc;constructor(e){super(),this.__lc=e}onInit(){let e=this.__lc;this.ionViewWillEnter&&n(e.willEnter,this.ionViewWillEnter.bind(this)),this.ionViewDidEnter&&n(e.didEnter,this.ionViewDidEnter.bind(this)),this.ionViewWillLeave&&n(e.willLeave,this.ionViewWillLeave.bind(this)),this.ionViewDidLeave&&n(e.didLeave,this.ionViewDidLeave.bind(this))}};function a(e,t){n(e.willEnter,t)}function o(e,t){n(e.didEnter,t)}function s(e,t){n(e.willLeave,t)}function c(e,t){n(e.didLeave,t)}var l=null;function u(){if(!l)throw Error("[nix-ionic] useRouter() llamado antes de montar IonRouterOutlet");return l}function d(e){return{__isNixTemplate:!0,mount(e){let t="string"==typeof e?document.querySelector(e):e;return{unmount:this._render(t,null)}},_render(t,n){let i=document.createElement("ion-back-button");i.setAttribute("default-href",e??"/");let a=t=>{t.stopPropagation(),t.preventDefault(),l?.canGoBack.value?l.back():e&&l?.navigate(e)};return i.addEventListener("click",a),t.insertBefore(i,n),()=>{i.removeEventListener("click",a),i.remove()}}}}var f=new Map,p=class extends e{routes;ionRouterEl=null;_currentPath=t(location.pathname);_canGoBack=t(!1);_params=t({});constructor(e){super(),this.routes=e,l={navigate:e=>this.navigate(e),replace:e=>this.replace(e),back:()=>this.back(),canGoBack:this._canGoBack,params:this._params,path:this._currentPath},this._registerCustomElements()}onInit(){window.addEventListener("popstate",this._handlePopState)}onMount(){this.ionRouterEl=document.querySelector("ion-router");let e=e=>{let{to:t,from:n}=e.detail;this._handleWillChange(t,n??"")},t=e=>{let{to:t}=e.detail;this._handleDidChange(t)},n=e=>{e.detail.register(100,e=>{this._canGoBack.value?this.back():e()})};return window.addEventListener("ionRouteWillChange",e),window.addEventListener("ionRouteDidChange",t),document.addEventListener("ionBackButton",n),()=>{window.removeEventListener("popstate",this._handlePopState),window.removeEventListener("ionRouteWillChange",e),window.removeEventListener("ionRouteDidChange",t),document.removeEventListener("ionBackButton",n),l=null}}navigate(e){e!==location.pathname&&this.ionRouterEl?.push(e,"forward")}replace(e){this.ionRouterEl?.push(e,"root")}back(){this.ionRouterEl?.back()}_handlePopState=()=>{this._handleWillChange(location.pathname,this._currentPath.peek())};_handleWillChange(e,t){let n=this._matchRoute(e);if(!n)return;if(n.beforeEnter){let i=n.beforeEnter(e,t);if(!1===i)return void this.back();if("string"==typeof i)return void this.navigate(i)}this._currentPath.value=e,this._params.value=this._extractParams(n.path,e);let i=this._pathToTag(t);f.get(i)?.willLeave.update(e=>e+1)}_handleDidChange(e){let t=document.querySelector("ion-router-outlet");this._canGoBack.value=t?.canGoBack?.()??!1,f.forEach((t,n)=>{n!==this._pathToTag(e)&&t.didLeave.update(e=>e+1)});let n=this._pathToTag(e),i=f.get(n),a=document.querySelector(n);i&&a?._isCached&&(i.willEnter.update(e=>e+1),requestAnimationFrame(()=>i.didEnter.update(e=>e+1)))}_matchRoute(e){let t=this.routes.find(t=>t.path===e);if(t)return t;for(let t of this.routes)if(RegExp(`^${t.path.replace(/:[^/]+/g,"([^/]+)")}$`).test(e))return t;return this.routes.find(e=>"*"===e.path)}_extractParams(e,t){let n={},i=e.split("/"),a=t.split("/");for(let e=0;e<i.length;e++)i[e].startsWith(":")&&(n[i[e].slice(1)]=a[e]??"");return n}_pathToTag(e){return e&&"/"!==e?`nix-page-${e.replace(/\/:?[^/]+/g,e=>"-"+e.replace(/\//g,"").replace(/:/g,"")).replace(/^\//,"").replace(/\//g,"-")}`:"nix-page-home"}_registerCustomElements(){for(let e of this.routes){if("*"===e.path)continue;let t=this._pathToTag(e.path),n=e,i=this;customElements.get(t)||customElements.define(t,class extends HTMLElement{_cleanup=null;connectedCallback(){let e=i._extractParams(n.path,location.pathname),a=r();f.set(t,a),this.classList.add("ion-page");let o=n.component({lc:a,params:e});if("render"in o&&"function"==typeof o.render){let e=o;e.onInit?.();let t=e.render()._render(this,null),n=e.onMount?.();this._cleanup=()=>{e.onUnmount?.(),"function"==typeof n&&n(),t()}}else this._cleanup=o._render(this,null);a.willEnter.update(e=>e+1),requestAnimationFrame(()=>{a.didEnter.update(e=>e+1),this._isCached=!0})}disconnectedCallback(){let e=f.get(t);e&&(e.willLeave.update(e=>e+1),e.didLeave.update(e=>e+1)),this._cleanup?.(),this._cleanup=null,f.delete(t)}})}}render(){let e=this;return{__isNixTemplate:!0,mount(e){let t="string"==typeof e?document.querySelector(e):e;return{unmount:this._render(t,null)}},_render(t,n){let i=document.createElement("ion-router");i.setAttribute("use-hash","false"),i.innerHTML=e.routes.filter(e=>"*"!==e.path).map(t=>`<ion-route url="${t.path}" component="${e._pathToTag(t.path)}"></ion-route>`).join("");let a=document.createElement("ion-router-outlet");return t.insertBefore(i,n),t.insertBefore(a,n),e.ionRouterEl=i,()=>{i.remove(),a.remove()}}}}onUnmount(){f.clear(),l=null}};export{d as IonBackButton,i as IonPage,p as IonRouterOutlet,r as createPageLifecycle,o as useIonViewDidEnter,c as useIonViewDidLeave,a as useIonViewWillEnter,s as useIonViewWillLeave,u as useRouter};

package/dist/lib/nix-ionic.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"nix-ionic.js","names":[],"sources":["../../src/lifecycle.ts","../../src/IonRouterOutlet.ts"],"sourcesContent":["/**\n * ionic-nix/lifecycle.ts\n *\n * Sistema de ciclo de vida de navegación, análogo a los hooks de Ionic:\n *   ionViewWillEnter / ionViewDidEnter / ionViewWillLeave / ionViewDidLeave\n *\n * Cómo funciona (sin provide/inject):\n *   1. IonRouterOutlet crea un `PageLifecycle` por cada ruta.\n *   2. Lo pasa directamente al factory de la ruta como argumento.\n *   3. El factory llama a `new MiPagina(lc)` o `MiPagina(lc)`.\n *   4. IonPage/composables registran watchers sobre las señales del lc.\n *   5. Cuando el router navega, incrementa las señales → watchers se disparan.\n */\n\nimport { signal, watch } from \"@deijose/nix-js\";\nimport type { Signal } from \"@deijose/nix-js\";\nimport { NixComponent } from \"@deijose/nix-js\";\n\n// --------------------------------------------------------------------------\n// Tipos públicos\n// --------------------------------------------------------------------------\n\nexport interface PageLifecycle {\n  willEnter: Signal<number>;\n  didEnter:  Signal<number>;\n  willLeave: Signal<number>;\n  didLeave:  Signal<number>;\n}\n\n/** Crea un nuevo PageLifecycle con señales en 0. */\nexport function createPageLifecycle(): PageLifecycle {\n  return {\n    willEnter: signal(0),\n    didEnter:  signal(0),\n    willLeave: signal(0),\n    didLeave:  signal(0),\n  };\n}\n\n// --------------------------------------------------------------------------\n// IonPage — clase base para páginas con hooks de navegación\n// --------------------------------------------------------------------------\n//\n// Uso:\n//   class HomePage extends IonPage {\n//     constructor(lc: PageLifecycle) { super(lc); }\n//\n//     ionViewWillEnter() { /* fetch de datos frescos */ }\n//     render() { return html`...`; }\n//   }\n\nexport abstract class IonPage extends NixComponent {\n  private __lc: PageLifecycle;\n\n  constructor(lc: PageLifecycle) {\n    super();\n    this.__lc = lc;\n  }\n\n  override onInit(): void {\n    const lc = this.__lc;\n    // watch no corre en init (immediate: false), así que ionViewWillEnter\n    // solo se llama cuando el outlet incrementa la señal, no al construir.\n    if (this.ionViewWillEnter) watch(lc.willEnter, this.ionViewWillEnter.bind(this));\n    if (this.ionViewDidEnter)  watch(lc.didEnter,  this.ionViewDidEnter.bind(this));\n    if (this.ionViewWillLeave) watch(lc.willLeave, this.ionViewWillLeave.bind(this));\n    if (this.ionViewDidLeave)  watch(lc.didLeave,  this.ionViewDidLeave.bind(this));\n  }\n\n  ionViewWillEnter?(): void;\n  ionViewDidEnter?():  void;\n  ionViewWillLeave?(): void;\n  ionViewDidLeave?():  void;\n}\n\n// --------------------------------------------------------------------------\n// Composables para function components\n// --------------------------------------------------------------------------\n//\n// Uso:\n//   function ProfilePage(lc: PageLifecycle): NixTemplate {\n//     useIonViewWillEnter(lc, () => { /* fetch */ });\n//     return html`...`;\n//   }\n\nexport function useIonViewWillEnter(lc: PageLifecycle, fn: () => void): void {\n  watch(lc.willEnter, fn);\n}\n\nexport function useIonViewDidEnter(lc: PageLifecycle, fn: () => void): void {\n  watch(lc.didEnter, fn);\n}\n\nexport function useIonViewWillLeave(lc: PageLifecycle, fn: () => void): void {\n  watch(lc.willLeave, fn);\n}\n\nexport function useIonViewDidLeave(lc: PageLifecycle, fn: () => void): void {\n  watch(lc.didLeave, fn);\n}","/**\n * ionic-nix/IonRouterOutlet.ts\n *\n * Bridge entre Nix.js e ion-router (API pública oficial para vanilla JS).\n *\n * Arquitectura:\n *  1. Por cada ruta registramos un Custom Element (nix-page-home, etc.)\n *  2. ion-router activa el custom element según la URL\n *  3. ion-router-outlet gestiona: caché, animaciones, back button, swipe back\n *  4. connectedCallback del custom element monta el componente Nix adentro\n *  5. ionRouteWillChange / ionRouteDidChange disparan el ciclo de vida Nix\n */\n\nimport { NixComponent, signal } from \"@deijose/nix-js\";\nimport type { NixTemplate, Signal } from \"@deijose/nix-js\";\nimport { createPageLifecycle, type PageLifecycle } from \"./lifecycle\";\n\n// --------------------------------------------------------------------------\n// Router store singleton\n// --------------------------------------------------------------------------\n\ninterface RouterStore {\n  navigate:  (path: string) => void;\n  replace:   (path: string) => void;\n  back:      () => void;\n  canGoBack: Signal<boolean>;\n  params:    Signal<Record<string, string>>;\n  path:      Signal<string>;\n}\n\nlet _router: RouterStore | null = null;\n\nexport function useRouter(): RouterStore {\n  if (!_router) throw new Error(\"[nix-ionic] useRouter() llamado antes de montar IonRouterOutlet\");\n  return _router;\n}\n\n// --------------------------------------------------------------------------\n// IonBackButton — intercepta el click antes del shadow DOM\n// --------------------------------------------------------------------------\n\nexport function IonBackButton(defaultHref?: string): NixTemplate {\n  return {\n    __isNixTemplate: true as const,\n    mount(container) {\n      const el = typeof container === \"string\" ? document.querySelector(container)! : container;\n      const cleanup = this._render(el, null);\n      return { unmount: cleanup };\n    },\n    _render(parent: Node, before: Node | null): () => void {\n      const btn = document.createElement(\"ion-back-button\") as HTMLElement;\n      btn.setAttribute(\"default-href\", defaultHref ?? \"/\");\n      const handler = (e: Event) => {\n        e.stopPropagation();\n        e.preventDefault();\n        if (_router?.canGoBack.value) _router.back();\n        else if (defaultHref) _router?.navigate(defaultHref);\n      };\n      btn.addEventListener(\"click\", handler);\n      parent.insertBefore(btn, before);\n      return () => {\n        btn.removeEventListener(\"click\", handler);\n        btn.remove();\n      };\n    },\n  };\n}\n\n// --------------------------------------------------------------------------\n// Tipos públicos\n// --------------------------------------------------------------------------\n\nexport interface PageContext {\n  lc:     PageLifecycle;\n  params: Record<string, string>;\n}\n\nexport interface RouteDefinition {\n  path:         string;\n  component:    (ctx: PageContext) => NixComponent | NixTemplate;\n  beforeEnter?: (to: string, from: string) => boolean | string | void;\n}\n\n// --------------------------------------------------------------------------\n// Mapa global de lifecycles activos por tag\n// --------------------------------------------------------------------------\n\nconst _lifecycleRegistry = new Map<string, PageLifecycle>();\n\n// --------------------------------------------------------------------------\n// IonRouterOutlet\n// --------------------------------------------------------------------------\n\nexport class IonRouterOutlet extends NixComponent {\n  private routes:      RouteDefinition[];\n  private ionRouterEl: HTMLElement | null = null;\n\n  private _currentPath = signal(location.pathname);\n  private _canGoBack   = signal(false);\n  private _params      = signal<Record<string, string>>({});\n\n  constructor(routes: RouteDefinition[]) {\n    super();\n    this.routes = routes;\n\n    // Store disponible desde el constructor — antes que cualquier\n    // connectedCallback de custom element\n    _router = {\n      navigate:  (path) => this.navigate(path),\n      replace:   (path) => this.replace(path),\n      back:      ()     => this.back(),\n      canGoBack: this._canGoBack,\n      params:    this._params,\n      path:      this._currentPath,\n    };\n\n    this._registerCustomElements();\n  }\n\n  override onInit(): void {\n    window.addEventListener(\"popstate\", this._handlePopState);\n  }\n\n  override onMount(): () => void {\n    this.ionRouterEl = document.querySelector(\"ion-router\");\n\n    const onWillChange = (ev: Event) => {\n      const { to, from } = (ev as CustomEvent).detail as { to: string; from: string };\n      this._handleWillChange(to, from ?? \"\");\n    };\n    const onDidChange = (ev: Event) => {\n      const { to } = (ev as CustomEvent).detail as { to: string };\n      this._handleDidChange(to);\n    };\n    const onIonBack = (ev: Event) => {\n      (ev as CustomEvent).detail.register(100, (next: () => void) => {\n        if (this._canGoBack.value) this.back(); else next();\n      });\n    };\n\n    window.addEventListener(\"ionRouteWillChange\", onWillChange);\n    window.addEventListener(\"ionRouteDidChange\",  onDidChange);\n    document.addEventListener(\"ionBackButton\",    onIonBack);\n\n    return () => {\n      window.removeEventListener(\"popstate\",          this._handlePopState);\n      window.removeEventListener(\"ionRouteWillChange\", onWillChange);\n      window.removeEventListener(\"ionRouteDidChange\",  onDidChange);\n      document.removeEventListener(\"ionBackButton\",    onIonBack);\n      _router = null;\n    };\n  }\n\n  // -------------------------------------------------------------------------\n  // API pública\n  // -------------------------------------------------------------------------\n\n  navigate(path: string): void {\n    if (path === location.pathname) return;\n    (this.ionRouterEl as any)?.push(path, \"forward\");\n  }\n\n  replace(path: string): void {\n    (this.ionRouterEl as any)?.push(path, \"root\");\n  }\n\n  back(): void {\n    (this.ionRouterEl as any)?.back();\n  }\n\n  // -------------------------------------------------------------------------\n  // Handlers privados\n  // -------------------------------------------------------------------------\n\n  private _handlePopState = (): void => {\n    // El browser navegó con sus propios botones — sincronizar\n    this._handleWillChange(location.pathname, this._currentPath.peek());\n  };\n\n  private _handleWillChange(to: string, from: string): void {\n    const route = this._matchRoute(to);\n    if (!route) return;\n\n    // Guards\n    if (route.beforeEnter) {\n      const result = route.beforeEnter(to, from);\n      if (result === false) { this.back(); return; }\n      if (typeof result === \"string\") { this.navigate(result); return; }\n    }\n\n    this._currentPath.value = to;\n    this._params.value      = this._extractParams(route.path, to);\n\n    // willLeave en la vista que sale (ya tiene lc registrado)\n    const fromTag = this._pathToTag(from);\n    _lifecycleRegistry.get(fromTag)?.willLeave.update((n) => n + 1);\n  }\n\n  private _handleDidChange(to: string): void {\n    const outlet = document.querySelector(\"ion-router-outlet\") as any;\n    this._canGoBack.value = outlet?.canGoBack?.() ?? false;\n\n    // didLeave en la vista que salió\n    _lifecycleRegistry.forEach((lc, tag) => {\n      if (tag !== this._pathToTag(to)) lc.didLeave.update((n) => n + 1);\n    });\n\n    // Para vistas CACHEADAS (ya existían en el DOM, connectedCallback no se llama de nuevo)\n    // disparamos willEnter/didEnter aquí.\n    // Para vistas NUEVAS, connectedCallback ya lo hizo — disparar de nuevo haría doble.\n    // Distinguimos: si el tag ya estaba en el registry ANTES de este didChange,\n    // es una vista cacheada. Usamos un flag en el custom element.\n    const toTag  = this._pathToTag(to);\n    const toLc   = _lifecycleRegistry.get(toTag);\n    const toEl   = document.querySelector(toTag) as any;\n    if (toLc && toEl?._isCached) {\n      toLc.willEnter.update((n) => n + 1);\n      requestAnimationFrame(() => toLc.didEnter.update((n) => n + 1));\n    }\n  }\n\n  // -------------------------------------------------------------------------\n  // Helpers\n  // -------------------------------------------------------------------------\n\n  private _matchRoute(path: string): RouteDefinition | undefined {\n    const exact = this.routes.find((r) => r.path === path);\n    if (exact) return exact;\n    for (const route of this.routes) {\n      const re = new RegExp(`^${route.path.replace(/:[^/]+/g, \"([^/]+)\")}$`);\n      if (re.test(path)) return route;\n    }\n    return this.routes.find((r) => r.path === \"*\");\n  }\n\n  private _extractParams(routePath: string, realPath: string): Record<string, string> {\n    const params: Record<string, string> = {};\n    const rP = routePath.split(\"/\");\n    const uP = realPath.split(\"/\");\n    for (let i = 0; i < rP.length; i++) {\n      if (rP[i].startsWith(\":\")) params[rP[i].slice(1)] = uP[i] ?? \"\";\n    }\n    return params;\n  }\n\n  private _pathToTag(path: string): string {\n    if (!path || path === \"/\") return \"nix-page-home\";\n    const clean = path\n      .replace(/\\/:?[^/]+/g, (m) => \"-\" + m.replace(/\\//g, \"\").replace(/:/g, \"\"))\n      .replace(/^\\//, \"\")\n      .replace(/\\//g, \"-\");\n    return `nix-page-${clean}`;\n  }\n\n  // -------------------------------------------------------------------------\n  // Registro de Custom Elements\n  // -------------------------------------------------------------------------\n\n  private _registerCustomElements(): void {\n    for (const route of this.routes) {\n      if (route.path === \"*\") continue;\n\n      const tag      = this._pathToTag(route.path);\n      const routeDef = route;\n      const self     = this;\n\n      if (customElements.get(tag)) continue;\n\n      customElements.define(tag, class extends HTMLElement {\n        private _cleanup: (() => void) | null = null;\n\n        connectedCallback(): void {\n          const params = self._extractParams(routeDef.path, location.pathname);\n          const lc     = createPageLifecycle();\n\n          _lifecycleRegistry.set(tag, lc);\n          this.classList.add(\"ion-page\");\n\n          const pageNode = routeDef.component({ lc, params });\n\n          if (\"render\" in pageNode && typeof (pageNode as NixComponent).render === \"function\") {\n            const comp = pageNode as NixComponent;\n            comp.onInit?.();\n            const renderCleanup = comp.render()._render(this, null);\n            const mountRet      = comp.onMount?.();\n            this._cleanup = () => {\n              comp.onUnmount?.();\n              if (typeof mountRet === \"function\") mountRet();\n              renderCleanup();\n            };\n          } else {\n            this._cleanup = (pageNode as NixTemplate)._render(this, null);\n          }\n\n          // Disparar willEnter/didEnter aquí — el lc ya está registrado\n          // y el componente ya está inicializado con sus watchers\n          lc.willEnter.update((n) => n + 1);\n          requestAnimationFrame(() => {\n            lc.didEnter.update((n) => n + 1);\n            // Marcar como cacheado para que ionRouteDidChange pueda\n            // disparar willEnter en visitas subsiguientes\n            (this as any)._isCached = true;\n          });\n        }\n\n        disconnectedCallback(): void {\n          // Disparar willLeave/didLeave al salir\n          const lc = _lifecycleRegistry.get(tag);\n          if (lc) {\n            lc.willLeave.update((n) => n + 1);\n            lc.didLeave.update((n) => n + 1);\n          }\n          this._cleanup?.();\n          this._cleanup = null;\n          _lifecycleRegistry.delete(tag);\n        }\n      });\n    }\n  }\n\n  // -------------------------------------------------------------------------\n  // Render — crea ion-router + ion-router-outlet como elementos DOM reales\n  // -------------------------------------------------------------------------\n\n  override render(): NixTemplate {\n    const self = this;\n    return {\n      __isNixTemplate: true as const,\n      mount(container: Element | string): { unmount(): void } {\n        const el = typeof container === \"string\"\n          ? (document.querySelector(container) as Element)\n          : container;\n        const cleanup = this._render(el, null);\n        return { unmount: cleanup };\n      },\n      _render(parent: Node, before: Node | null): () => void {\n        // ion-router con las rutas declarativas\n        const routerEl = document.createElement(\"ion-router\");\n        routerEl.setAttribute(\"use-hash\", \"false\");\n        routerEl.innerHTML = self.routes\n          .filter((r) => r.path !== \"*\")\n          .map((r) => `<ion-route url=\"${r.path}\" component=\"${self._pathToTag(r.path)}\"></ion-route>`)\n          .join(\"\");\n\n        const outletEl = document.createElement(\"ion-router-outlet\");\n\n        parent.insertBefore(routerEl, before);\n        parent.insertBefore(outletEl, before);\n\n        self.ionRouterEl = routerEl;\n\n        return () => { routerEl.remove(); outletEl.remove(); };\n      },\n    };\n  }\n\n  override onUnmount(): void {\n    _lifecycleRegistry.clear();\n    _router = null;\n  }\n}"],"mappings":"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"}

package/dist/lifecycle.d.ts

@@ -0,0 +1,36 @@
+/**
+ * ionic-nix/lifecycle.ts
+ *
+ * Sistema de ciclo de vida de navegación, análogo a los hooks de Ionic:
+ *   ionViewWillEnter / ionViewDidEnter / ionViewWillLeave / ionViewDidLeave
+ *
+ * Cómo funciona (sin provide/inject):
+ *   1. IonRouterOutlet crea un `PageLifecycle` por cada ruta.
+ *   2. Lo pasa directamente al factory de la ruta como argumento.
+ *   3. El factory llama a `new MiPagina(lc)` o `MiPagina(lc)`.
+ *   4. IonPage/composables registran watchers sobre las señales del lc.
+ *   5. Cuando el router navega, incrementa las señales → watchers se disparan.
+ */
+import type { Signal } from "@deijose/nix-js";
+import { NixComponent } from "@deijose/nix-js";
+export interface PageLifecycle {
+    willEnter: Signal<number>;
+    didEnter: Signal<number>;
+    willLeave: Signal<number>;
+    didLeave: Signal<number>;
+}
+/** Crea un nuevo PageLifecycle con señales en 0. */
+export declare function createPageLifecycle(): PageLifecycle;
+export declare abstract class IonPage extends NixComponent {
+    private __lc;
+    constructor(lc: PageLifecycle);
+    onInit(): void;
+    ionViewWillEnter?(): void;
+    ionViewDidEnter?(): void;
+    ionViewWillLeave?(): void;
+    ionViewDidLeave?(): void;
+}
+export declare function useIonViewWillEnter(lc: PageLifecycle, fn: () => void): void;
+export declare function useIonViewDidEnter(lc: PageLifecycle, fn: () => void): void;
+export declare function useIonViewWillLeave(lc: PageLifecycle, fn: () => void): void;
+export declare function useIonViewDidLeave(lc: PageLifecycle, fn: () => void): void;

package/package.json

@@ -0,0 +1,75 @@
+{
+  "name": "@deijose/nix-ionic",
+  "version": "0.1.0",
+  "description": "Ionic lifecycle & router bridge for Nix.js",
+  "license": "MIT",
+  "author": "Deiver Vasquez",
+  "type": "module",
+  "homepage": "https://github.com/DeijoseDevelop/nix-ionic.git",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/DeijoseDevelop/nix-ionic.git"
+  },
+  "main": "./dist/lib/nix-ionic.cjs",
+  "module": "./dist/lib/nix-ionic.js",
+  "types": "./dist/lib/index.d.ts",
+  "keywords": [
+    "ionic",
+    "nix-js",
+    "bridge",
+    "routing",
+    "navigation",
+    "lifecycle",
+    "capacitor",
+    "mobile",
+    "native",
+    "ios",
+    "android",
+    "web-components",
+    "reactive",
+    "signals",
+    "typescript",
+    "micro-framework",
+    "ui",
+    "frontend"
+  ],
+  "exports": {
+    ".": {
+      "import": {
+        "types": "./dist/lib/index.d.ts",
+        "default": "./dist/lib/nix-ionic.js"
+      },
+      "require": {
+        "types": "./dist/lib/index.d.ts",
+        "default": "./dist/lib/nix-ionic.cjs"
+      }
+    }
+  },
+  "files": [
+    "dist",
+    "README.md"
+  ],
+  "sideEffects": false,
+  "engines": {
+    "node": ">=18.0.0"
+  },
+  "scripts": {
+    "dev": "vite",
+    "build": "tsc && vite build",
+    "preview": "vite preview",
+    "build:lib": "vite build --config vite.lib.config.ts && tsc --project tsconfig.lib.json && terser dist/lib/nix-ionic.js -c -m -o dist/lib/nix-ionic.js && terser dist/lib/nix-ionic.cjs -c -m -o dist/lib/nix-ionic.cjs",
+    "typecheck": "tsc --noEmit",
+    "test": "vitest run"
+  },
+  "peerDependencies": {
+    "@deijose/nix-js": ">=1.7.7"
+  },
+  "devDependencies": {
+    "@deijose/nix-js": "^1.7.7",
+    "typescript": "~5.9.3",
+    "vite": "^8.0.0",
+    "vite-plugin-dts": "^4.5.4",
+    "happy-dom": "^20.8.3",
+    "terser": "^5.46.0"
+  }
+}