create-nix-app 1.0.10 → 1.0.12

package/index.js

@@ -25,6 +25,7 @@ async function init() {
                 { title: yellow('Vite + TypeScript'), value: 'vite-ts', description: 'Recomendado para DX rápida y tipado estricto' },
                 { title: yellow('Vite + JavaScript'), value: 'vite-js', description: 'Vite sin compilación de TS' },
                 { title: blue('Ionic + Nix.js (Capacitor)'), value: 'nix-ionic', description: 'Template oficial con nix-ionic (Nix.js + Ionic + Capacitor)' },
+                { title: blue('Ionic + Nix.js + Tabs'), value: 'nix-ionic-tabs', description: 'Template completo con IonRouterOutlet + createBottomTabBar + guards' },
                 { title: blue('Vanilla TypeScript'), value: 'vanilla-ts', description: 'Sin bundler, puro TSC' },
                 { title: blue('Vanilla JavaScript'), value: 'vanilla-js', description: 'Cero build, import maps directo en navegador' }
             ]

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "create-nix-app",
-  "version": "1.0.10",
+  "version": "1.0.12",
   "description": "Scaffolding tool for Nix.js reactive micro-framework",
   "type": "module",
   "bin": {

package/template-nix-ionic/README.md

@@ -40,19 +40,34 @@ src/
 
 ## Modular Loading
 
-This template uses **nix-ionic v0.3.0** modular component loading.
+This template uses **nix-ionic v1.2.0** modular component loading.
 Import only the bundles your app needs in `main.ts`:
 
 ```ts
 import { layoutComponents } from "@deijose/nix-ionic/bundles/layout";
+import { navigationComponents } from "@deijose/nix-ionic/bundles/navigation";
 import { formComponents }   from "@deijose/nix-ionic/bundles/forms";
 import { overlayComponents } from "@deijose/nix-ionic/bundles/overlays";
+import { home, homeOutline } from "ionicons/icons";
 
-setupNixIonic({ components: [...layoutComponents, ...formComponents] });
+setupNixIonic({
+    components: [...layoutComponents, ...navigationComponents, ...formComponents],
+    icons: { home, "home-outline": homeOutline },
+});
 ```
 
 Available bundles: `layout`, `navigation`, `forms`, `lists`, `feedback`, `buttons`, `overlays`, `all`.
 
+## Tabs and Bottom Navigation
+
+For tab-based apps, use the built-in helper:
+
+```ts
+import { createBottomTabBar } from "@deijose/nix-ionic";
+```
+
+It provides active-path sync without manual `window.location` listeners.
+
 ## Learn More
 
 - [Nix.js Docs](https://github.com/DeijoseDevelop/nix-js)

package/template-nix-ionic/index.html

@@ -5,8 +5,6 @@
         <meta charset="UTF-8">
         <link rel="icon" href="/favicon.ico">
         <meta name="viewport" content="width=device-width, initial-scale=1.0">
-        <script type="module" src="https://unpkg.com/ionicons@7.1.0/dist/ionicons/ionicons.esm.js"></script>
-        <script nomodule src="https://unpkg.com/ionicons@7.1.0/dist/ionicons/ionicons.js"></script>
         <title>Nix.js + Vite TS</title>
     </head>
 

package/template-nix-ionic/package.json

@@ -11,8 +11,8 @@
     "@capacitor/android": "^8.2.0",
     "@capacitor/cli": "^8.2.0",
     "@capacitor/core": "^8.2.0",
-    "@deijose/nix-ionic": "^0.3.1",
-    "@deijose/nix-js": "^1.7.7",
+    "@deijose/nix-ionic": "^1.2.0",
+    "@deijose/nix-js": "^1.9.0",
     "@ionic/core": "^8.8.1",
     "ionicons": "^8.0.13"
   },

package/template-nix-ionic/src/main.ts

@@ -11,18 +11,24 @@ import "./style.css";
 // 2. Framework
 import { NixComponent, html, mount } from "@deijose/nix-js";
 import { setupNixIonic, IonRouterOutlet } from "@deijose/nix-ionic";
+import { home, homeOutline } from "ionicons/icons";
 
 // 3. Modular component bundles — import only what your app needs
 import { layoutComponents } from "@deijose/nix-ionic/bundles/layout";
 import { formComponents } from "@deijose/nix-ionic/bundles/forms";
 import { listComponents } from "@deijose/nix-ionic/bundles/lists";
+import { navigationComponents } from "@deijose/nix-ionic/bundles/navigation";
 
 // 4. Pages
 import { HomePage } from "./pages/HomePage";
 
 // Register Ionic components
 setupNixIonic({
-  components: [...layoutComponents, ...formComponents, ...listComponents],
+  components: [...layoutComponents, ...formComponents, ...listComponents, ...navigationComponents],
+  icons: {
+    home,
+    "home-outline": homeOutline,
+  },
 });
 
 // 5. Router

package/template-nix-ionic-tabs/README.md

@@ -0,0 +1,69 @@
+# Nix-Ionic Tabs App
+
+Complete starter template with:
+
+- `IonRouterOutlet` route definitions and guards
+- `createBottomTabBar()` bottom navigation
+- `useRouter()` navigation actions
+- `useRouterState()` reactive route state
+- `setupNixIonic({ icons })` custom icon registration
+
+## Quick Start
+
+```bash
+npm install
+npm run dev
+```
+
+## Build
+
+```bash
+npm run build
+```
+
+## Included Routes
+
+- `/login` (public)
+- `/` (Home tab, protected)
+- `/map` (Map tab, protected)
+- `/map/route/:id` (detail page, protected, outside tab flow)
+- `/profile` (Profile tab, protected)
+
+## Files to Explore
+
+```
+src/
+├── main.ts
+├── style.css
+├── stores/
+│   └── auth.ts
+└── pages/
+    ├── LoginPage.ts
+    ├── HomePage.ts
+    ├── MapPage.ts
+    ├── RouteDetailPage.ts
+    └── ProfilePage.ts
+```
+
+## Core Pattern
+
+`main.ts` wires everything:
+
+1. Registers Ionic bundles and icons.
+2. Creates `IonRouterOutlet` with `beforeEnter` auth guard.
+3. Creates tabs with `createBottomTabBar()`.
+4. Mounts both outlet and tabs inside `<ion-app>`.
+
+## Android (Capacitor)
+
+```bash
+npm run build
+npx cap sync android
+npx cap open android
+```
+
+## Learn More
+
+- [Nix-Ionic on npm](https://www.npmjs.com/package/@deijose/nix-ionic)
+- [Ionic Components](https://ionicframework.com/docs/components)
+- [Capacitor Docs](https://capacitorjs.com/docs)

package/template-nix-ionic-tabs/capacitor.config.ts

@@ -0,0 +1,9 @@
+import type { CapacitorConfig } from '@capacitor/cli';
+
+const config: CapacitorConfig = {
+  appId: 'com.nixjs.ionic',
+  appName: 'Nix JS Ionic',
+  webDir: 'dist'
+};
+
+export default config;

package/template-nix-ionic-tabs/index.html

@@ -0,0 +1,16 @@
+<!DOCTYPE html>
+<html lang="en">
+
+    <head>
+        <meta charset="UTF-8">
+        <link rel="icon" href="/favicon.ico">
+        <meta name="viewport" content="width=device-width, initial-scale=1.0">
+        <title>Nix.js + Vite TS</title>
+    </head>
+
+    <body>
+        <div id="app"></div>
+        <script type="module" src="/src/main.ts"></script>
+    </body>
+
+</html>

package/template-nix-ionic-tabs/package.json

@@ -0,0 +1,23 @@
+{
+  "name": "nix-ionic-tabs-app",
+  "version": "0.0.0",
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "tsc --noEmit && vite build",
+    "preview": "vite preview"
+  },
+  "dependencies": {
+    "@capacitor/android": "^8.2.0",
+    "@capacitor/cli": "^8.2.0",
+    "@capacitor/core": "^8.2.0",
+    "@deijose/nix-ionic": "^1.2.0",
+    "@deijose/nix-js": "^1.9.0",
+    "@ionic/core": "^8.8.1",
+    "ionicons": "^8.0.13"
+  },
+  "devDependencies": {
+    "typescript": "~5.9.3",
+    "vite": "^8.0.0"
+  }
+}

package/template-nix-ionic-tabs/src/main.ts

@@ -0,0 +1,81 @@
+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";
+import "./style.css";
+
+import { NixComponent, html, mount } from "@deijose/nix-js";
+import { setupNixIonic, IonRouterOutlet, createBottomTabBar } from "@deijose/nix-ionic";
+import { layoutComponents } from "@deijose/nix-ionic/bundles/layout";
+import { navigationComponents } from "@deijose/nix-ionic/bundles/navigation";
+import { listComponents } from "@deijose/nix-ionic/bundles/lists";
+import { buttonComponents } from "@deijose/nix-ionic/bundles/buttons";
+import {
+  home,
+  homeOutline,
+  map,
+  mapOutline,
+  person,
+  personOutline,
+  logInOutline,
+} from "ionicons/icons";
+
+import { HomePage } from "./pages/HomePage";
+import { MapPage } from "./pages/MapPage";
+import { ProfilePage } from "./pages/ProfilePage";
+import { LoginPage } from "./pages/LoginPage";
+import { RouteDetailPage } from "./pages/RouteDetailPage";
+import { authStore } from "./stores/auth";
+
+setupNixIonic({
+  components: [
+    ...layoutComponents,
+    ...navigationComponents,
+    ...listComponents,
+    ...buttonComponents,
+  ],
+  icons: {
+    home,
+    "home-outline": homeOutline,
+    map,
+    "map-outline": mapOutline,
+    person,
+    "person-outline": personOutline,
+    "log-in-outline": logInOutline,
+  },
+});
+
+const requireAuth = () => (authStore.isAuthenticated.value ? true : "/login");
+
+const outlet = new IonRouterOutlet([
+  { path: "/login", component: (ctx) => new LoginPage(ctx) },
+  { path: "/", component: (ctx) => new HomePage(ctx), beforeEnter: requireAuth },
+  { path: "/map", component: (ctx) => new MapPage(ctx), beforeEnter: requireAuth },
+  { path: "/map/route/:id", component: (ctx) => new RouteDetailPage(ctx), beforeEnter: requireAuth },
+  { path: "/profile", component: (ctx) => new ProfilePage(ctx), beforeEnter: requireAuth },
+]);
+
+const tabs = createBottomTabBar(
+  [
+    { path: "/", label: "Home", icon: "home-outline", activeIcon: "home", exact: true },
+    { path: "/map", label: "Map", icon: "map-outline", activeIcon: "map" },
+    { path: "/profile", label: "Profile", icon: "person-outline", activeIcon: "person" },
+  ],
+  {
+    className: "app-tab-bar",
+    activeClassName: "tab-active",
+    navigationDirection: "root",
+    hideWhen: (path) => path === "/login" || path.startsWith("/map/route/"),
+  },
+);
+
+class App extends NixComponent {
+  override render() {
+    return html`<ion-app>${outlet}${tabs}</ion-app>`;
+  }
+}
+
+mount(new App(), "#app");

package/template-nix-ionic-tabs/src/pages/HomePage.ts

@@ -0,0 +1,35 @@
+import { html } from "@deijose/nix-js";
+import { IonPage, useRouter } from "@deijose/nix-ionic";
+import type { PageContext } from "@deijose/nix-ionic";
+
+export class HomePage extends IonPage {
+  constructor(ctx: PageContext) {
+    super(ctx.lc);
+  }
+
+  override render() {
+    const router = useRouter();
+
+    return html`
+      <ion-header>
+        <ion-toolbar>
+          <ion-title>Home</ion-title>
+        </ion-toolbar>
+      </ion-header>
+
+      <ion-content class="ion-padding">
+        <ion-card>
+          <ion-card-header>
+            <ion-card-title>Nix-Ionic Tabs Template</ion-card-title>
+            <ion-card-subtitle>IonRouterOutlet + createBottomTabBar</ion-card-subtitle>
+          </ion-card-header>
+          <ion-card-content>
+            <p>This page is protected by <code>beforeEnter</code> and rendered inside Ionic's router outlet.</p>
+            <ion-button expand="block" @click=${() => router.navigate("/map")}>Open Map Tab</ion-button>
+            <ion-button expand="block" fill="outline" @click=${() => router.navigate("/profile")}>Go to Profile Tab</ion-button>
+          </ion-card-content>
+        </ion-card>
+      </ion-content>
+    `;
+  }
+}

package/template-nix-ionic-tabs/src/pages/LoginPage.ts

@@ -0,0 +1,43 @@
+import { html } from "@deijose/nix-js";
+import { IonPage, useRouter } from "@deijose/nix-ionic";
+import type { PageContext } from "@deijose/nix-ionic";
+import { authStore } from "../stores/auth";
+
+export class LoginPage extends IonPage {
+    constructor(ctx: PageContext) {
+        super(ctx.lc);
+    }
+
+    override render() {
+        const router = useRouter();
+
+        return html`
+      <ion-header>
+        <ion-toolbar>
+          <ion-title>Login</ion-title>
+        </ion-toolbar>
+      </ion-header>
+
+      <ion-content class="ion-padding login-page">
+        <ion-card>
+          <ion-card-header>
+            <ion-card-title>Protected Routes Example</ion-card-title>
+            <ion-card-subtitle>Login to unlock tabs and pages</ion-card-subtitle>
+          </ion-card-header>
+          <ion-card-content>
+            <ion-button
+              expand="block"
+              @click=${() => {
+                authStore.login();
+                router.replace("/");
+            }}
+            >
+              <ion-icon slot="start" name="log-in-outline"></ion-icon>
+              Sign in
+            </ion-button>
+          </ion-card-content>
+        </ion-card>
+      </ion-content>
+    `;
+    }
+}

package/template-nix-ionic-tabs/src/pages/MapPage.ts

@@ -0,0 +1,49 @@
+import { html } from "@deijose/nix-js";
+import { IonPage, useRouter } from "@deijose/nix-ionic";
+import type { PageContext } from "@deijose/nix-ionic";
+
+const demoRoutes = [
+    { id: "101", name: "Mountain Loop" },
+    { id: "102", name: "Coastal Ride" },
+    { id: "103", name: "City Night Route" },
+];
+
+export class MapPage extends IonPage {
+    constructor(ctx: PageContext) {
+        super(ctx.lc);
+    }
+
+    override render() {
+        const router = useRouter();
+
+        return html`
+      <ion-header>
+        <ion-toolbar>
+          <ion-title>Map</ion-title>
+        </ion-toolbar>
+      </ion-header>
+
+      <ion-content class="ion-padding">
+        <ion-card>
+          <ion-card-header>
+            <ion-card-title>Route List</ion-card-title>
+            <ion-card-subtitle>Tap one route to open a detail page outside tabs</ion-card-subtitle>
+          </ion-card-header>
+          <ion-card-content>
+            ${demoRoutes.map(
+            (route) => html`
+                <ion-button
+                  expand="block"
+                  fill="outline"
+                  @click=${() => router.navigate(`/map/route/${route.id}`)}
+                >
+                  ${route.name}
+                </ion-button>
+              `,
+        )}
+          </ion-card-content>
+        </ion-card>
+      </ion-content>
+    `;
+    }
+}

package/template-nix-ionic-tabs/src/pages/ProfilePage.ts

@@ -0,0 +1,46 @@
+import { html } from "@deijose/nix-js";
+import { IonPage, useRouter, useRouterState } from "@deijose/nix-ionic";
+import type { PageContext } from "@deijose/nix-ionic";
+import { authStore } from "../stores/auth";
+
+export class ProfilePage extends IonPage {
+    constructor(ctx: PageContext) {
+        super(ctx.lc);
+    }
+
+    override render() {
+        const router = useRouter();
+        const routerState = useRouterState();
+
+        return html`
+      <ion-header>
+        <ion-toolbar>
+          <ion-title>Profile</ion-title>
+        </ion-toolbar>
+      </ion-header>
+
+      <ion-content class="ion-padding">
+        <ion-card>
+          <ion-card-header>
+            <ion-card-title>Router State Demo</ion-card-title>
+            <ion-card-subtitle>Reactive path and params from useRouterState()</ion-card-subtitle>
+          </ion-card-header>
+          <ion-card-content>
+            <p><strong>Current path:</strong> ${() => routerState.path.value}</p>
+            <p><strong>Can go back:</strong> ${() => String(routerState.canGoBack.value)}</p>
+            <ion-button
+              expand="block"
+              color="danger"
+              @click=${() => {
+                authStore.logout();
+                router.replace("/login");
+            }}
+            >
+              Sign out
+            </ion-button>
+          </ion-card-content>
+        </ion-card>
+      </ion-content>
+    `;
+    }
+}

package/template-nix-ionic-tabs/src/pages/RouteDetailPage.ts

@@ -0,0 +1,35 @@
+import { html } from "@deijose/nix-js";
+import { IonPage, IonBackButton } from "@deijose/nix-ionic";
+import type { PageContext } from "@deijose/nix-ionic";
+
+export class RouteDetailPage extends IonPage {
+    private routeId: string;
+
+    constructor(ctx: PageContext) {
+        super(ctx.lc);
+        this.routeId = ctx.params.id ?? "unknown";
+    }
+
+    override render() {
+        return html`
+      <ion-header>
+        <ion-toolbar>
+          <ion-buttons slot="start">${IonBackButton("/map")}</ion-buttons>
+          <ion-title>Route #${this.routeId}</ion-title>
+        </ion-toolbar>
+      </ion-header>
+
+      <ion-content class="ion-padding">
+        <ion-card>
+          <ion-card-header>
+            <ion-card-title>Route Detail</ion-card-title>
+            <ion-card-subtitle>Dynamic params + IonBackButton in one place</ion-card-subtitle>
+          </ion-card-header>
+          <ion-card-content>
+            Current route id: <strong>${this.routeId}</strong>
+          </ion-card-content>
+        </ion-card>
+      </ion-content>
+    `;
+    }
+}

package/template-nix-ionic-tabs/src/stores/auth.ts

@@ -0,0 +1,13 @@
+import { signal } from "@deijose/nix-js";
+
+const isAuthenticated = signal(false);
+
+export const authStore = {
+    isAuthenticated,
+    login() {
+        isAuthenticated.value = true;
+    },
+    logout() {
+        isAuthenticated.value = false;
+    },
+};

package/template-nix-ionic-tabs/src/style.css

@@ -0,0 +1,37 @@
+:root {
+  --ion-font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", "Roboto", sans-serif;
+}
+
+* {
+  box-sizing: border-box;
+}
+
+ion-content {
+  --padding-bottom: 84px;
+}
+
+.app-tab-bar {
+  --background: #ffffff;
+  --color: var(--ion-color-medium);
+  --color-selected: var(--ion-color-primary);
+  border-top: 1px solid rgba(0, 0, 0, 0.08);
+  box-shadow: 0 -4px 12px rgba(0, 0, 0, 0.06);
+}
+
+.app-tab-bar ion-tab-button.tab-active {
+  font-weight: 600;
+}
+
+.app-tab-bar ion-tab-button ion-icon {
+  font-size: 1.25rem;
+}
+
+.login-page {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+ion-card {
+  border-radius: 16px;
+}

package/template-nix-ionic-tabs/tsconfig.json

@@ -0,0 +1,25 @@
+{
+    "compilerOptions": {
+        "target": "ES2022",
+        "useDefineForClassFields": true,
+        "module": "ESNext",
+        "lib": [
+            "ES2022",
+            "DOM",
+            "DOM.Iterable"
+        ],
+        "skipLibCheck": true,
+        "moduleResolution": "bundler",
+        "allowImportingTsExtensions": true,
+        "resolveJsonModule": true,
+        "isolatedModules": true,
+        "noEmit": true,
+        "strict": true,
+        "noUnusedLocals": true,
+        "noUnusedParameters": true,
+        "noFallthroughCasesInSwitch": true
+    },
+    "include": [
+        "src"
+    ]
+}

package/template-nix-ionic-tabs/vite.config.ts

@@ -0,0 +1,9 @@
+import { defineConfig } from "vite";
+
+export default defineConfig({
+  build: {
+    rollupOptions: {
+      output: { manualChunks: undefined },
+    },
+  },
+});

package/template-vanilla-js/index.html

@@ -1,22 +1,24 @@
 <!DOCTYPE html>
 <html lang="en">
-    <head>
-        <meta charset="UTF-8">
-        <link rel="icon" href="/public/favicon.ico">
-        <meta name="viewport" content="width=device-width, initial-scale=1.0">
-        <title>¡Bienvenido a Nix.js!</title>
-        <script type="importmap">
+
+<head>
+    <meta charset="UTF-8">
+    <link rel="icon" href="/public/favicon.ico">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>¡Bienvenido a Nix.js!</title>
+    <script type="importmap">
             {
                 "imports": {
-                    "@deijose/nix-js": "https://cdn.jsdelivr.net/npm/@deijose/nix-js@1.7.7/+esm"
+                    "@deijose/nix-js": "https://cdn.jsdelivr.net/npm/@deijose/nix-js@1.9.0/+esm"
                 }
             }
         </script>
-        <link rel="stylesheet" href="./src/style.css">
-    </head>
+    <link rel="stylesheet" href="./src/style.css">
+</head>
+
+<body>
+    <div id="app"></div>
+    <script type="module" src="./src/main.js"></script>
+</body>
 
-    <body>
-        <div id="app"></div>
-        <script type="module" src="./src/main.js"></script>
-    </body>
 </html>

package/template-vanilla-ts/index.html

@@ -1,24 +1,24 @@
 <!DOCTYPE html>
 <html lang="en">
 
-    <head>
-        <meta charset="UTF-8">
-        <link rel="icon" href="/public/favicon.ico">
-        <meta name="viewport" content="width=device-width, initial-scale=1.0">
-        <title>Nix.js Vanilla TS</title>
-        <script type="importmap">
+<head>
+    <meta charset="UTF-8">
+    <link rel="icon" href="/public/favicon.ico">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Nix.js Vanilla TS</title>
+    <script type="importmap">
             {
                 "imports": {
-                    "@deijose/nix-js": "https://cdn.jsdelivr.net/npm/@deijose/nix-js@1.7.7/+esm"
+                    "@deijose/nix-js": "https://cdn.jsdelivr.net/npm/@deijose/nix-js@1.9.0/+esm"
                 }
             }
         </script>
-        <link rel="stylesheet" href="./src/style.css">
-    </head>
+    <link rel="stylesheet" href="./src/style.css">
+</head>
 
-    <body>
-        <div id="app"></div>
-        <script type="module" src="./dist/main.js"></script>
-    </body>
+<body>
+    <div id="app"></div>
+    <script type="module" src="./dist/main.js"></script>
+</body>
 
 </html>

package/template-vanilla-ts/package.json

@@ -7,7 +7,7 @@
         "build": "tsc"
     },
     "dependencies": {
-        "@deijose/nix-js": "^1.7.7"
+        "@deijose/nix-js": "^1.9.0"
     },
     "devDependencies": {
         "typescript": "~5.9.3"

package/template-vite-js/package.json

@@ -8,7 +8,7 @@
         "preview": "vite preview"
     },
     "dependencies": {
-        "@deijose/nix-js": "^1.7.7"
+        "@deijose/nix-js": "^1.9.0"
     },
     "devDependencies": {
         "vite": "^8.0.0"

package/template-vite-ts/package.json

@@ -8,7 +8,7 @@
         "preview": "vite preview"
     },
     "dependencies": {
-        "@deijose/nix-js": "^1.7.7"
+        "@deijose/nix-js": "^1.9.0"
     },
     "devDependencies": {
         "typescript": "~5.9.3",