create-nix-app 1.0.6 → 1.0.9
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/index.js +1 -0
- package/package.json +1 -1
- package/template-nix-ionic/README.md +61 -0
- package/template-nix-ionic/capacitor.config.ts +9 -0
- package/template-nix-ionic/favicon.ico +0 -0
- package/template-nix-ionic/index.html +18 -0
- package/template-nix-ionic/package.json +23 -0
- package/template-nix-ionic/public/nix-js-logo.png +0 -0
- package/template-nix-ionic/src/main.ts +41 -0
- package/template-nix-ionic/src/pages/HomePage.ts +31 -0
- package/template-nix-ionic/src/style.css +21 -0
- package/template-nix-ionic/tsconfig.json +25 -0
- package/template-nix-ionic/vite.config.ts +9 -0
- package/template-vite-js/package.json +1 -1
- package/template-vite-ts/package.json +1 -1
package/index.js
CHANGED
|
@@ -24,6 +24,7 @@ async function init() {
|
|
|
24
24
|
choices: [
|
|
25
25
|
{ title: yellow('Vite + TypeScript'), value: 'vite-ts', description: 'Recomendado para DX rápida y tipado estricto' },
|
|
26
26
|
{ title: yellow('Vite + JavaScript'), value: 'vite-js', description: 'Vite sin compilación de TS' },
|
|
27
|
+
{ title: blue('Ionic + Nix.js (Capacitor)'), value: 'nix-ionic', description: 'Template oficial con nix-ionic (Nix.js + Ionic + Capacitor)' },
|
|
27
28
|
{ title: blue('Vanilla TypeScript'), value: 'vanilla-ts', description: 'Sin bundler, puro TSC' },
|
|
28
29
|
{ title: blue('Vanilla JavaScript'), value: 'vanilla-js', description: 'Cero build, import maps directo en navegador' }
|
|
29
30
|
]
|
package/package.json
CHANGED
|
@@ -0,0 +1,61 @@
|
|
|
1
|
+
# Nix-Ionic App
|
|
2
|
+
|
|
3
|
+
A mobile-first starter template powered by **[Nix.js](https://www.npmjs.com/package/@deijose/nix-js)** + **[Ionic](https://ionicframework.com/)** + **[Capacitor](https://capacitorjs.com/)**.
|
|
4
|
+
|
|
5
|
+
## Quick Start
|
|
6
|
+
|
|
7
|
+
```bash
|
|
8
|
+
npm install
|
|
9
|
+
npm run dev
|
|
10
|
+
```
|
|
11
|
+
|
|
12
|
+
## Build for Production
|
|
13
|
+
|
|
14
|
+
```bash
|
|
15
|
+
npm run build
|
|
16
|
+
```
|
|
17
|
+
|
|
18
|
+
## Deploy to Android
|
|
19
|
+
|
|
20
|
+
```bash
|
|
21
|
+
# First build the web app
|
|
22
|
+
npm run build
|
|
23
|
+
|
|
24
|
+
# Sync with Capacitor
|
|
25
|
+
npx cap sync android
|
|
26
|
+
|
|
27
|
+
# Open Android Studio
|
|
28
|
+
npx cap open android
|
|
29
|
+
```
|
|
30
|
+
|
|
31
|
+
## Project Structure
|
|
32
|
+
|
|
33
|
+
```
|
|
34
|
+
src/
|
|
35
|
+
├── main.ts # Entry point — Ionic setup & router
|
|
36
|
+
├── style.css # Global styles
|
|
37
|
+
└── pages/
|
|
38
|
+
└── HomePage.ts # Your first page (IonPage)
|
|
39
|
+
```
|
|
40
|
+
|
|
41
|
+
## Modular Loading
|
|
42
|
+
|
|
43
|
+
This template uses **nix-ionic v0.3.0** modular component loading.
|
|
44
|
+
Import only the bundles your app needs in `main.ts`:
|
|
45
|
+
|
|
46
|
+
```ts
|
|
47
|
+
import { layoutComponents } from "@deijose/nix-ionic/bundles/layout";
|
|
48
|
+
import { formComponents } from "@deijose/nix-ionic/bundles/forms";
|
|
49
|
+
import { overlayComponents } from "@deijose/nix-ionic/bundles/overlays";
|
|
50
|
+
|
|
51
|
+
setupNixIonic({ components: [...layoutComponents, ...formComponents] });
|
|
52
|
+
```
|
|
53
|
+
|
|
54
|
+
Available bundles: `layout`, `navigation`, `forms`, `lists`, `feedback`, `buttons`, `overlays`, `all`.
|
|
55
|
+
|
|
56
|
+
## Learn More
|
|
57
|
+
|
|
58
|
+
- [Nix.js Docs](https://github.com/DeijoseDevelop/nix-js)
|
|
59
|
+
- [Nix-Ionic on npm](https://www.npmjs.com/package/@deijose/nix-ionic)
|
|
60
|
+
- [Ionic Components](https://ionicframework.com/docs/components)
|
|
61
|
+
- [Capacitor Docs](https://capacitorjs.com/docs)
|
|
Binary file
|
|
@@ -0,0 +1,18 @@
|
|
|
1
|
+
<!DOCTYPE html>
|
|
2
|
+
<html lang="en">
|
|
3
|
+
|
|
4
|
+
<head>
|
|
5
|
+
<meta charset="UTF-8">
|
|
6
|
+
<link rel="icon" href="/favicon.ico">
|
|
7
|
+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
8
|
+
<script type="module" src="https://unpkg.com/ionicons@7.1.0/dist/ionicons/ionicons.esm.js"></script>
|
|
9
|
+
<script nomodule src="https://unpkg.com/ionicons@7.1.0/dist/ionicons/ionicons.js"></script>
|
|
10
|
+
<title>Nix.js + Vite TS</title>
|
|
11
|
+
</head>
|
|
12
|
+
|
|
13
|
+
<body>
|
|
14
|
+
<div id="app"></div>
|
|
15
|
+
<script type="module" src="/src/main.ts"></script>
|
|
16
|
+
</body>
|
|
17
|
+
|
|
18
|
+
</html>
|
|
@@ -0,0 +1,23 @@
|
|
|
1
|
+
{
|
|
2
|
+
"name": "nix-ionic-app",
|
|
3
|
+
"version": "0.0.0",
|
|
4
|
+
"type": "module",
|
|
5
|
+
"scripts": {
|
|
6
|
+
"dev": "vite",
|
|
7
|
+
"build": "tsc --noEmit && vite build",
|
|
8
|
+
"preview": "vite preview"
|
|
9
|
+
},
|
|
10
|
+
"dependencies": {
|
|
11
|
+
"@capacitor/android": "^8.2.0",
|
|
12
|
+
"@capacitor/cli": "^8.2.0",
|
|
13
|
+
"@capacitor/core": "^8.2.0",
|
|
14
|
+
"@deijose/nix-ionic": "^0.3.0",
|
|
15
|
+
"@deijose/nix-js": "^1.7.7",
|
|
16
|
+
"@ionic/core": "^8.8.1",
|
|
17
|
+
"ionicons": "^8.0.13"
|
|
18
|
+
},
|
|
19
|
+
"devDependencies": {
|
|
20
|
+
"typescript": "~5.9.3",
|
|
21
|
+
"vite": "^8.0.0"
|
|
22
|
+
}
|
|
23
|
+
}
|
|
Binary file
|
|
@@ -0,0 +1,41 @@
|
|
|
1
|
+
// 1. Core Ionic Styles
|
|
2
|
+
import "@ionic/core/css/core.css";
|
|
3
|
+
import "@ionic/core/css/normalize.css";
|
|
4
|
+
import "@ionic/core/css/structure.css";
|
|
5
|
+
import "@ionic/core/css/typography.css";
|
|
6
|
+
import "@ionic/core/css/padding.css";
|
|
7
|
+
import "@ionic/core/css/flex-utils.css";
|
|
8
|
+
import "@ionic/core/css/display.css";
|
|
9
|
+
import "./style.css";
|
|
10
|
+
|
|
11
|
+
// 2. Framework
|
|
12
|
+
import { NixComponent, html, mount } from "@deijose/nix-js";
|
|
13
|
+
import { setupNixIonic, IonRouterOutlet } from "@deijose/nix-ionic";
|
|
14
|
+
|
|
15
|
+
// 3. Modular component bundles — import only what your app needs
|
|
16
|
+
import { layoutComponents } from "@deijose/nix-ionic/bundles/layout";
|
|
17
|
+
import { formComponents } from "@deijose/nix-ionic/bundles/forms";
|
|
18
|
+
import { listComponents } from "@deijose/nix-ionic/bundles/lists";
|
|
19
|
+
|
|
20
|
+
// 4. Pages
|
|
21
|
+
import { HomePage } from "./pages/HomePage";
|
|
22
|
+
|
|
23
|
+
// Register Ionic components
|
|
24
|
+
setupNixIonic({
|
|
25
|
+
components: [...layoutComponents, ...formComponents, ...listComponents],
|
|
26
|
+
});
|
|
27
|
+
|
|
28
|
+
// 5. Router
|
|
29
|
+
const outlet = new IonRouterOutlet([
|
|
30
|
+
{ path: "/", component: (ctx) => new HomePage(ctx) },
|
|
31
|
+
]);
|
|
32
|
+
|
|
33
|
+
// 6. Root App Component
|
|
34
|
+
class App extends NixComponent {
|
|
35
|
+
override render() {
|
|
36
|
+
return html`<ion-app>${outlet}</ion-app>`;
|
|
37
|
+
}
|
|
38
|
+
}
|
|
39
|
+
|
|
40
|
+
// 7. Bootstrap
|
|
41
|
+
mount(new App(), "#app");
|
|
@@ -0,0 +1,31 @@
|
|
|
1
|
+
import { html } from "@deijose/nix-js";
|
|
2
|
+
import { IonPage } from "@deijose/nix-ionic";
|
|
3
|
+
import type { PageContext } from "@deijose/nix-ionic";
|
|
4
|
+
|
|
5
|
+
export class HomePage extends IonPage {
|
|
6
|
+
constructor(ctx: PageContext) {
|
|
7
|
+
super(ctx.lc);
|
|
8
|
+
}
|
|
9
|
+
|
|
10
|
+
override render() {
|
|
11
|
+
return html`
|
|
12
|
+
<ion-header>
|
|
13
|
+
<ion-toolbar color="primary">
|
|
14
|
+
<ion-title>My Nix-Ionic App</ion-title>
|
|
15
|
+
</ion-toolbar>
|
|
16
|
+
</ion-header>
|
|
17
|
+
|
|
18
|
+
<ion-content class="ion-padding">
|
|
19
|
+
<ion-card>
|
|
20
|
+
<ion-card-header>
|
|
21
|
+
<ion-card-title>Welcome to Nix-Ionic 🚀</ion-card-title>
|
|
22
|
+
<ion-card-subtitle>Powered by Nix.js + Ionic + Capacitor</ion-card-subtitle>
|
|
23
|
+
</ion-card-header>
|
|
24
|
+
<ion-card-content>
|
|
25
|
+
<p>Edit <code>src/pages/HomePage.ts</code> to get started.</p>
|
|
26
|
+
</ion-card-content>
|
|
27
|
+
</ion-card>
|
|
28
|
+
</ion-content>
|
|
29
|
+
`;
|
|
30
|
+
}
|
|
31
|
+
}
|
|
@@ -0,0 +1,21 @@
|
|
|
1
|
+
/* App-level styles */
|
|
2
|
+
:root {
|
|
3
|
+
--ion-font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", "Roboto", sans-serif;
|
|
4
|
+
}
|
|
5
|
+
|
|
6
|
+
* {
|
|
7
|
+
box-sizing: border-box;
|
|
8
|
+
}
|
|
9
|
+
|
|
10
|
+
ion-card p {
|
|
11
|
+
color: var(--ion-color-medium);
|
|
12
|
+
margin-top: 8px;
|
|
13
|
+
}
|
|
14
|
+
|
|
15
|
+
ion-card code {
|
|
16
|
+
font-family: monospace;
|
|
17
|
+
background: var(--ion-color-light);
|
|
18
|
+
padding: 2px 6px;
|
|
19
|
+
border-radius: 4px;
|
|
20
|
+
font-size: 0.9em;
|
|
21
|
+
}
|
|
@@ -0,0 +1,25 @@
|
|
|
1
|
+
{
|
|
2
|
+
"compilerOptions": {
|
|
3
|
+
"target": "ES2022",
|
|
4
|
+
"useDefineForClassFields": true,
|
|
5
|
+
"module": "ESNext",
|
|
6
|
+
"lib": [
|
|
7
|
+
"ES2022",
|
|
8
|
+
"DOM",
|
|
9
|
+
"DOM.Iterable"
|
|
10
|
+
],
|
|
11
|
+
"skipLibCheck": true,
|
|
12
|
+
"moduleResolution": "bundler",
|
|
13
|
+
"allowImportingTsExtensions": true,
|
|
14
|
+
"resolveJsonModule": true,
|
|
15
|
+
"isolatedModules": true,
|
|
16
|
+
"noEmit": true,
|
|
17
|
+
"strict": true,
|
|
18
|
+
"noUnusedLocals": true,
|
|
19
|
+
"noUnusedParameters": true,
|
|
20
|
+
"noFallthroughCasesInSwitch": true
|
|
21
|
+
},
|
|
22
|
+
"include": [
|
|
23
|
+
"src"
|
|
24
|
+
]
|
|
25
|
+
}
|