@hypen-space/cli 0.3.8

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 ADDED
@@ -0,0 +1,157 @@
1
+ # @hypen-space/cli
2
+
3
+ [![TypeScript](https://img.shields.io/badge/TypeScript-5.0+-3178C6?logo=typescript&logoColor=white)](https://www.typescriptlang.org/)
4
+ [![Bun](https://img.shields.io/badge/Bun-1.0+-f9f1e1?logo=bun)](https://bun.sh/)
5
+ [![License: MIT](https://img.shields.io/badge/License-MIT-blue.svg)](../LICENSE)
6
+
7
+ Command-line interface for creating and managing Hypen applications.
8
+
9
+ ## Installation
10
+
11
+ ```bash
12
+ bun add -g @hypen-space/cli
13
+ ```
14
+
15
+ Or use directly with bunx:
16
+
17
+ ```bash
18
+ bunx @hypen-space/cli init my-app
19
+ ```
20
+
21
+ ## Commands
22
+
23
+ ### `hypen init [name]`
24
+
25
+ Create a new Hypen project.
26
+
27
+ ```bash
28
+ # With project name
29
+ hypen init my-app
30
+ ```
31
+
32
+ ### `hypen dev`
33
+
34
+ Start the development server with hot reload.
35
+
36
+ ```bash
37
+ hypen dev
38
+ ```
39
+
40
+ This will:
41
+ - Discover all components in `src/components/`
42
+ - Generate `components.generated.ts`
43
+ - Start a server at `http://localhost:3000`
44
+ - Watch for file changes and hot reload
45
+
46
+ Options:
47
+ - `--port <number>` - Server port (default: 3000)
48
+ - `--debug` - Enable debug logging
49
+
50
+ ### `hypen build`
51
+
52
+ Build for production.
53
+
54
+ ```bash
55
+ hypen build
56
+ ```
57
+
58
+ Options:
59
+ - `--outDir <path>` - Output directory (default: dist)
60
+ - `--minify` - Enable minification
61
+ - `--sourcemap` - Generate source maps
62
+
63
+ ### `hypen generate`
64
+
65
+ Generate component imports from discovered components.
66
+
67
+ ```bash
68
+ hypen generate
69
+ ```
70
+
71
+ ## Project Structure
72
+
73
+ After running `hypen init`, your project will have this structure:
74
+
75
+ ```
76
+ my-app/
77
+ ├── hypen.config.ts # Hypen configuration
78
+ ├── package.json
79
+ ├── tsconfig.json
80
+ └── src/
81
+ └── components/
82
+ └── App/
83
+ ├── component.ts # Component logic/state
84
+ └── component.hypen # Component UI
85
+ ```
86
+
87
+ ### hypen.config.ts
88
+
89
+ Configuration file for your Hypen project:
90
+
91
+ ```typescript
92
+ export default {
93
+ components: "./src/components",
94
+ entry: "App",
95
+ port: 3000,
96
+ outDir: "dist",
97
+ };
98
+ ```
99
+
100
+ ### Component Structure
101
+
102
+ Each component lives in its own directory with two files:
103
+
104
+ **component.ts** - State and logic:
105
+ ```typescript
106
+ import { app } from "@hypen-space/core";
107
+
108
+ type AppState = {
109
+ count: number;
110
+ };
111
+
112
+ export default app
113
+ .defineState<AppState>({ count: 0 })
114
+ .onAction("increment", ({ state }) => {
115
+ state.count++;
116
+ })
117
+ .onAction("decrement", ({ state }) => {
118
+ state.count--;
119
+ })
120
+ .build();
121
+ ```
122
+
123
+ **component.hypen** - UI declaration:
124
+ ```hypen
125
+ module App {
126
+ Column {
127
+ Text("Count: ${state.count}")
128
+
129
+ Row {
130
+ Button {
131
+ Text("-")
132
+ }
133
+ .onClick("@actions.decrement")
134
+
135
+ Button {
136
+ Text("+")
137
+ }
138
+ .onClick("@actions.increment")
139
+ }
140
+ }
141
+ }
142
+ ```
143
+
144
+ ## Development
145
+
146
+ ```bash
147
+ # Install dependencies
148
+ bun install
149
+
150
+ # Run CLI locally
151
+ bun bin/hypen.ts init test-project
152
+ bun bin/hypen.ts dev --port 3001
153
+ ```
154
+
155
+ ## License
156
+
157
+ MIT