vaderjs-native 1.0.13 → 1.0.14
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/README.md +122 -83
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -1,130 +1,169 @@
|
|
|
1
|
-
<p align="center">
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
1
|
+
## <p align="center">
|
|
2
|
+
|
|
3
|
+
<a href="[https://vader-js.pages.dev](https://vader-js.pages.dev)">
|
|
4
|
+
<picture>
|
|
5
|
+
<source media="(prefers-color-scheme: dark)" srcset="/icon.jpeg">
|
|
6
|
+
<img src="[https://github.com/Postr-Inc/Vader.js/blob/main/logo.png](https://github.com/Postr-Inc/Vader.js/blob/main/logo.png)" height="128">
|
|
7
|
+
</picture>
|
|
8
|
+
<h1 align="center">VaderNative</h1>
|
|
9
|
+
</a>
|
|
9
10
|
</p>
|
|
10
11
|
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
**A modern, reactive framework for building ultra-fast native mobile apps — minimal, blazing fast, and easy to learn.**
|
|
14
|
-
|
|
15
|
-
[](https://github.com/Postr-Inc/Vader.js/blob/main/LICENSE) [](https://www.npmjs.com/package/vaderjs)
|
|
12
|
+
**VaderNative** is a high-performance, reactive framework for building truly native cross-platform applications. It combines a familiar React-like developer experience with a "Native-First" philosophy—streaming logs to your terminal, bundling single-file executables, and maintaining a zero-Virtual-DOM overhead.
|
|
16
13
|
|
|
17
14
|
---
|
|
18
15
|
|
|
19
|
-
##
|
|
16
|
+
## 🛠 Developer Environment Setup
|
|
20
17
|
|
|
21
|
-
|
|
22
|
-
import * as Vader from "vader-native";
|
|
18
|
+
Before you start coding, ensure your machine is equipped for native compilation.
|
|
23
19
|
|
|
24
|
-
|
|
25
|
-
const [count, setCount] = Vader.useState(0);
|
|
20
|
+
### 1. General Requirements
|
|
26
21
|
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
<Vader.Switch>
|
|
30
|
-
<Vader.Match when={count > 10}>
|
|
31
|
-
<Vader.Text>Count is greater than 10</Vader.Text>
|
|
32
|
-
</Vader.Match>
|
|
33
|
-
<Vader.Match when={count <= 10}>
|
|
34
|
-
<Vader.Text>Count is 10 or less</Vader.Text>
|
|
35
|
-
</Vader.Match>
|
|
36
|
-
</Vader.Switch>
|
|
37
|
-
|
|
38
|
-
<Vader.Button title="Increment" onPress={() => setCount(count + 1)} />
|
|
39
|
-
</Vader.View>
|
|
40
|
-
);
|
|
41
|
-
}
|
|
42
|
-
```
|
|
22
|
+
* **Bun:** [Install Bun](https://bun.sh) (Required for the CLI and Dev Server).
|
|
23
|
+
* **Node.js:** v18+ (For compatibility with certain native build tools).
|
|
43
24
|
|
|
44
|
-
|
|
25
|
+
### 2. Android Setup (Mobile)
|
|
45
26
|
|
|
46
|
-
|
|
27
|
+
To build and run on Android, you need the **Android SDK**:
|
|
47
28
|
|
|
29
|
+
* **Android Studio:** Install [Android Studio](https://developer.android.com/studio).
|
|
30
|
+
* **SDK Platform:** Ensure you have **SDK 34** (UpsideDownCake) installed via the SDK Manager.
|
|
31
|
+
* **Environment Variables:**
|
|
48
32
|
```bash
|
|
49
|
-
|
|
33
|
+
# Add to your .bashrc, .zshrc, or Windows ENV
|
|
34
|
+
ANDROID_HOME=$HOME/Android/Sdk
|
|
35
|
+
PATH=$PATH:$ANDROID_HOME/platform-tools
|
|
36
|
+
|
|
50
37
|
```
|
|
51
38
|
|
|
39
|
+
|
|
40
|
+
|
|
41
|
+
### 3. Windows Setup (Desktop)
|
|
42
|
+
|
|
43
|
+
To build **WinUI 3** native desktop apps:
|
|
44
|
+
|
|
45
|
+
* **Visual Studio 2022:** Install with the **.NET Desktop Development** workload.
|
|
46
|
+
* **.NET 8 SDK:** [Download here](https://dotnet.microsoft.com/download/dotnet/8.0).
|
|
47
|
+
* **Windows App SDK:** Managed automatically by the VaderNative build script.
|
|
48
|
+
|
|
52
49
|
---
|
|
53
50
|
|
|
54
|
-
##
|
|
51
|
+
## 🚀 Getting Started
|
|
55
52
|
|
|
56
|
-
|
|
53
|
+
### 1. Installation
|
|
54
|
+
|
|
55
|
+
```bash
|
|
56
|
+
bun install vaderjs@latest
|
|
57
57
|
|
|
58
|
-
```
|
|
59
|
-
/pages/index.jsx -> /
|
|
60
|
-
/pages/home/[page].jsx -> /home/:page
|
|
61
|
-
/pages/path/index.jsx -> /path/
|
|
62
|
-
/pages/test/[[...catchall]]/index.jsx -> /test/*
|
|
63
|
-
/pages/route/[param1]/[param2].jsx -> /route/:param1/:param2
|
|
64
58
|
```
|
|
65
59
|
|
|
66
|
-
|
|
60
|
+
### 2. Create your first page
|
|
67
61
|
|
|
68
|
-
|
|
62
|
+
VaderNative uses **File-Based Routing**. Create a file at `app/index.jsx`:
|
|
63
|
+
|
|
64
|
+
```tsx
|
|
65
|
+
import * as Vader from "vader-native";
|
|
66
|
+
|
|
67
|
+
export default function App() {
|
|
68
|
+
const [count, setCount] = Vader.useState(0);
|
|
69
69
|
|
|
70
|
-
|
|
70
|
+
return (
|
|
71
|
+
<div style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
|
|
72
|
+
<p style={{ fontSize: 24 }}>Count: {count}</p>
|
|
73
|
+
<button title="Increment" onPress={() => setCount(count + 1)} />
|
|
74
|
+
</div>
|
|
75
|
+
);
|
|
76
|
+
}
|
|
71
77
|
|
|
72
|
-
|
|
73
|
-
| --------- | --------------------------------------- |
|
|
74
|
-
| `app/` | Contains all route `.jsx` files |
|
|
75
|
-
| `src/` | Your components, hooks, utilities, etc. |
|
|
76
|
-
| `public/` | Static assets like images, JSON, fonts |
|
|
78
|
+
```
|
|
77
79
|
|
|
78
80
|
---
|
|
79
81
|
|
|
80
|
-
##
|
|
82
|
+
## ⚙️ Configuration (`vader.config.ts`)
|
|
81
83
|
|
|
82
|
-
|
|
84
|
+
Control your app's DNA from a single config file:
|
|
83
85
|
|
|
84
86
|
```ts
|
|
85
87
|
import defineConfig from "vaderjs-native/config";
|
|
86
|
-
import tailwind from "vaderjs-native/plugins/tailwind";
|
|
87
88
|
|
|
88
89
|
export default defineConfig({
|
|
89
90
|
app: {
|
|
90
|
-
name: "
|
|
91
|
-
id: "com.
|
|
92
|
-
version: {
|
|
93
|
-
code: 1,
|
|
94
|
-
name: "1.0.0",
|
|
95
|
-
},
|
|
91
|
+
name: "MoviesPlus",
|
|
92
|
+
id: "com.moviesplus.app",
|
|
93
|
+
version: { code: 1, name: "1.0.0" },
|
|
96
94
|
},
|
|
97
|
-
|
|
98
95
|
platforms: {
|
|
99
96
|
android: {
|
|
100
97
|
minSdk: 24,
|
|
101
98
|
targetSdk: 34,
|
|
102
|
-
permissions: ["INTERNET"
|
|
103
|
-
icon: "./
|
|
104
|
-
splash: "./assets/android/splash.png",
|
|
99
|
+
permissions: ["INTERNET"],
|
|
100
|
+
icon: "./public/android-icon.png",
|
|
105
101
|
},
|
|
106
|
-
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
}
|
|
110
|
-
|
|
111
|
-
windows: {},
|
|
112
|
-
},
|
|
113
|
-
|
|
114
|
-
plugins: [tailwind]
|
|
102
|
+
windows: {
|
|
103
|
+
sdkVersion: "10.0.19041.0",
|
|
104
|
+
icon: "./public/windows/icon.ico",
|
|
105
|
+
}
|
|
106
|
+
}
|
|
115
107
|
});
|
|
108
|
+
|
|
116
109
|
```
|
|
117
110
|
|
|
118
111
|
---
|
|
119
112
|
|
|
120
|
-
##
|
|
113
|
+
## 💻 CLI Commands & Workflow
|
|
114
|
+
|
|
115
|
+
VaderNative is designed for a **Terminal-First** workflow. No need to keep native IDEs (Android Studio/Visual Studio) open for debugging.
|
|
116
|
+
|
|
117
|
+
### Development Mode
|
|
118
|
+
|
|
119
|
+
Automatically syncs assets, starts the dev server, and streams native logs to your console.
|
|
120
|
+
|
|
121
|
+
```bash
|
|
122
|
+
# Run Windows Dev (Streams app.log to terminal)
|
|
123
|
+
bun dev windows:dev
|
|
124
|
+
|
|
125
|
+
# Run Android Dev
|
|
126
|
+
bun dev android:dev
|
|
127
|
+
|
|
128
|
+
```
|
|
129
|
+
|
|
130
|
+
### Production Building
|
|
121
131
|
|
|
122
|
-
|
|
123
|
-
* ✅ **Native components** – fast and lightweight
|
|
124
|
-
* ✅ **File-based routing** – simple, built-in, production-ready
|
|
125
|
-
* ✅ **Tiny runtime** – blazing fast updates
|
|
126
|
-
* ✅ **React-inspired API** – familiar but simpler
|
|
132
|
+
Compile your app into a distributable format.
|
|
127
133
|
|
|
128
|
-
|
|
134
|
+
```bash
|
|
135
|
+
# Create a Single-File Windows EXE (/release/App.exe)
|
|
136
|
+
bun build windows:build
|
|
137
|
+
|
|
138
|
+
# Build Android APK/Bundle
|
|
139
|
+
bun build android:build
|
|
140
|
+
|
|
141
|
+
```
|
|
142
|
+
|
|
143
|
+
---
|
|
144
|
+
|
|
145
|
+
## 🪵 Native Logging Strategy
|
|
146
|
+
|
|
147
|
+
VaderNative implements **Native Pipe & Log Tailing**.
|
|
148
|
+
* **Windows:** The CLI tails `app.log` using a shared-access stream, ensuring you see crashes even if the app UI freezes.
|
|
149
|
+
* **Android:** The CLI automatically filters `logcat` to show only your app's specific tags.
|
|
150
|
+
|
|
151
|
+
---
|
|
152
|
+
|
|
153
|
+
## 🗂 Project Structure
|
|
154
|
+
|
|
155
|
+
| Directory | Description |
|
|
156
|
+
| --- | --- |
|
|
157
|
+
| `app/` | **Routes:** File-based routing (e.g., `index.jsx`, `settings.jsx`). |
|
|
158
|
+
| `src/` | **Logic:** Shared components, hooks, and business logic. |
|
|
159
|
+
| `public/` | **Assets:** Images, fonts, and static data. |
|
|
160
|
+
| `build/` | **Generated:** The native source code (WinUI/Android project files). |
|
|
161
|
+
|
|
162
|
+
---
|
|
163
|
+
|
|
164
|
+
## ✨ Why VaderNative?
|
|
129
165
|
|
|
130
|
-
|
|
166
|
+
* **Native Speed:** No heavy Virtual DOM; updates are sent directly to native views.
|
|
167
|
+
* **Single-File Windows Apps:** No complex installers; just one `.exe`.
|
|
168
|
+
* **Bun-First:** Leverages the fastest JS runtime for building and bundling.
|
|
169
|
+
* **Modern Tooling:** Tail logs, auto-patch `.csproj`, and hot-reload from one terminal.
|