@hashrock/ono 0.1.1 → 0.1.3
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/package.json +18 -4
- package/src/browser/compiler.js +253 -0
- package/src/browser/unocss.js +29 -0
- package/src/builder.js +316 -0
- package/src/bundler.js +12 -4
- package/src/cli.js +178 -945
- package/src/content.js +272 -0
- package/src/jsx-runtime.js +19 -0
- package/src/renderer.js +11 -4
- package/src/server.js +99 -0
- package/src/unocss.js +28 -2
- package/src/watcher.js +167 -0
- package/README.md +0 -299
package/README.md
DELETED
|
@@ -1,299 +0,0 @@
|
|
|
1
|
-
# Ono
|
|
2
|
-
|
|
3
|
-
A lightweight JSX library for static site generation with UnoCSS support.
|
|
4
|
-
|
|
5
|
-
## Features
|
|
6
|
-
|
|
7
|
-
- Minimal JSX runtime for building static HTML sites
|
|
8
|
-
- Built-in bundler for JSX files
|
|
9
|
-
- CLI tool for building JSX to HTML
|
|
10
|
-
- Development server with live reload
|
|
11
|
-
- File watching for automatic rebuilds
|
|
12
|
-
- Support for components and props
|
|
13
|
-
- Integrated UnoCSS for atomic CSS generation
|
|
14
|
-
- Quick project initialization with templates
|
|
15
|
-
- Pages directory support for multi-page sites
|
|
16
|
-
- Uses TypeScript's JSX transform
|
|
17
|
-
|
|
18
|
-
## Installation
|
|
19
|
-
|
|
20
|
-
### Global Installation
|
|
21
|
-
|
|
22
|
-
```bash
|
|
23
|
-
npm install -g @hashrock/ono
|
|
24
|
-
```
|
|
25
|
-
|
|
26
|
-
### Local Installation
|
|
27
|
-
|
|
28
|
-
```bash
|
|
29
|
-
npm install @hashrock/ono
|
|
30
|
-
```
|
|
31
|
-
|
|
32
|
-
## Quick Start
|
|
33
|
-
|
|
34
|
-
Initialize a new project:
|
|
35
|
-
|
|
36
|
-
```bash
|
|
37
|
-
ono init my-project
|
|
38
|
-
cd my-project
|
|
39
|
-
npm run dev
|
|
40
|
-
```
|
|
41
|
-
|
|
42
|
-
This creates a complete project structure with:
|
|
43
|
-
- `pages/` directory with example page
|
|
44
|
-
- `components/` directory with Layout and Hello components
|
|
45
|
-
- `public/` directory for static assets
|
|
46
|
-
- UnoCSS integration pre-configured
|
|
47
|
-
- Development and build scripts
|
|
48
|
-
|
|
49
|
-
## Usage
|
|
50
|
-
|
|
51
|
-
### CLI Commands
|
|
52
|
-
|
|
53
|
-
**Init** - Initialize a new Ono project:
|
|
54
|
-
|
|
55
|
-
```bash
|
|
56
|
-
ono init
|
|
57
|
-
ono init my-project
|
|
58
|
-
```
|
|
59
|
-
|
|
60
|
-
**Build** - Build a JSX file to HTML:
|
|
61
|
-
|
|
62
|
-
```bash
|
|
63
|
-
ono build example/index.jsx
|
|
64
|
-
```
|
|
65
|
-
|
|
66
|
-
**Build Pages** - Build all pages in a directory:
|
|
67
|
-
|
|
68
|
-
```bash
|
|
69
|
-
ono build pages
|
|
70
|
-
```
|
|
71
|
-
|
|
72
|
-
**Build with Watch** - Watch for changes and rebuild automatically:
|
|
73
|
-
|
|
74
|
-
```bash
|
|
75
|
-
ono build pages --watch
|
|
76
|
-
```
|
|
77
|
-
|
|
78
|
-
This will:
|
|
79
|
-
- Build your JSX files to HTML
|
|
80
|
-
- Watch for changes in `.jsx` files
|
|
81
|
-
- Automatically rebuild when files change
|
|
82
|
-
- No live reload (simple file watching)
|
|
83
|
-
|
|
84
|
-
**Dev Server** - Start a development server with live reload:
|
|
85
|
-
|
|
86
|
-
```bash
|
|
87
|
-
ono dev
|
|
88
|
-
ono dev pages
|
|
89
|
-
ono dev example/index.jsx
|
|
90
|
-
```
|
|
91
|
-
|
|
92
|
-
This will:
|
|
93
|
-
- Build your JSX file(s) to HTML
|
|
94
|
-
- Start an HTTP server (default: http://localhost:3000)
|
|
95
|
-
- Watch for changes and rebuild automatically
|
|
96
|
-
- Live reload the browser when files change
|
|
97
|
-
- Generate UnoCSS automatically
|
|
98
|
-
|
|
99
|
-
You can specify custom options:
|
|
100
|
-
|
|
101
|
-
```bash
|
|
102
|
-
ono dev --port 8080 --output build
|
|
103
|
-
```
|
|
104
|
-
|
|
105
|
-
**Help** - Show usage information:
|
|
106
|
-
|
|
107
|
-
```bash
|
|
108
|
-
ono --help
|
|
109
|
-
```
|
|
110
|
-
|
|
111
|
-
### JSX Example
|
|
112
|
-
|
|
113
|
-
Create a JSX file with components:
|
|
114
|
-
|
|
115
|
-
```jsx
|
|
116
|
-
// example/index.jsx
|
|
117
|
-
export default function App() {
|
|
118
|
-
return (
|
|
119
|
-
<html>
|
|
120
|
-
<head>
|
|
121
|
-
<title>My Site</title>
|
|
122
|
-
</head>
|
|
123
|
-
<body>
|
|
124
|
-
<Header title="Welcome" />
|
|
125
|
-
<main>
|
|
126
|
-
<p>Hello, Ono!</p>
|
|
127
|
-
</main>
|
|
128
|
-
</body>
|
|
129
|
-
</html>
|
|
130
|
-
);
|
|
131
|
-
}
|
|
132
|
-
|
|
133
|
-
function Header({ title }) {
|
|
134
|
-
return (
|
|
135
|
-
<header>
|
|
136
|
-
<h1>{title}</h1>
|
|
137
|
-
</header>
|
|
138
|
-
);
|
|
139
|
-
}
|
|
140
|
-
```
|
|
141
|
-
|
|
142
|
-
Build it:
|
|
143
|
-
|
|
144
|
-
```bash
|
|
145
|
-
ono build example/index.jsx
|
|
146
|
-
```
|
|
147
|
-
|
|
148
|
-
This generates `dist/index.html`:
|
|
149
|
-
|
|
150
|
-
```html
|
|
151
|
-
<!DOCTYPE html>
|
|
152
|
-
<html>
|
|
153
|
-
<head>
|
|
154
|
-
<title>My Site</title>
|
|
155
|
-
</head>
|
|
156
|
-
<body>
|
|
157
|
-
<header>
|
|
158
|
-
<h1>Welcome</h1>
|
|
159
|
-
</header>
|
|
160
|
-
<main>
|
|
161
|
-
<p>Hello, Ono!</p>
|
|
162
|
-
</main>
|
|
163
|
-
</body>
|
|
164
|
-
</html>
|
|
165
|
-
```
|
|
166
|
-
|
|
167
|
-
### UnoCSS Integration
|
|
168
|
-
|
|
169
|
-
Ono automatically integrates with UnoCSS. Simply use utility classes in your JSX:
|
|
170
|
-
|
|
171
|
-
```jsx
|
|
172
|
-
export default function App() {
|
|
173
|
-
return (
|
|
174
|
-
<div class="max-w-800px mx-auto p-8">
|
|
175
|
-
<h1 class="text-3xl font-bold text-blue-600">
|
|
176
|
-
Welcome to Ono
|
|
177
|
-
</h1>
|
|
178
|
-
<p class="mt-4 text-gray-700">
|
|
179
|
-
UnoCSS utilities are automatically generated!
|
|
180
|
-
</p>
|
|
181
|
-
</div>
|
|
182
|
-
);
|
|
183
|
-
}
|
|
184
|
-
```
|
|
185
|
-
|
|
186
|
-
The CSS will be automatically generated to `dist/uno.css` and included in your HTML.
|
|
187
|
-
|
|
188
|
-
### Custom UnoCSS Configuration
|
|
189
|
-
|
|
190
|
-
Create a `uno.config.js` file in your project root:
|
|
191
|
-
|
|
192
|
-
```javascript
|
|
193
|
-
import { presetUno } from "unocss";
|
|
194
|
-
|
|
195
|
-
export default {
|
|
196
|
-
presets: [presetUno()],
|
|
197
|
-
theme: {
|
|
198
|
-
colors: {
|
|
199
|
-
primary: "#0070f3",
|
|
200
|
-
},
|
|
201
|
-
},
|
|
202
|
-
shortcuts: {
|
|
203
|
-
"btn": "px-4 py-2 rounded bg-primary text-white",
|
|
204
|
-
},
|
|
205
|
-
};
|
|
206
|
-
```
|
|
207
|
-
|
|
208
|
-
## Configuration
|
|
209
|
-
|
|
210
|
-
### TypeScript/JSX Setup
|
|
211
|
-
|
|
212
|
-
Add to your `tsconfig.json`:
|
|
213
|
-
|
|
214
|
-
```json
|
|
215
|
-
{
|
|
216
|
-
"compilerOptions": {
|
|
217
|
-
"jsx": "react-jsx",
|
|
218
|
-
"jsxImportSource": "@hashrock/ono"
|
|
219
|
-
}
|
|
220
|
-
}
|
|
221
|
-
```
|
|
222
|
-
|
|
223
|
-
Or use JSDoc comments in your `.jsx` files:
|
|
224
|
-
|
|
225
|
-
```jsx
|
|
226
|
-
/** @jsxImportSource @hashrock/ono */
|
|
227
|
-
```
|
|
228
|
-
|
|
229
|
-
## Development
|
|
230
|
-
|
|
231
|
-
### Install Dependencies
|
|
232
|
-
|
|
233
|
-
```bash
|
|
234
|
-
npm install
|
|
235
|
-
```
|
|
236
|
-
|
|
237
|
-
### Run Tests
|
|
238
|
-
|
|
239
|
-
```bash
|
|
240
|
-
npm test
|
|
241
|
-
```
|
|
242
|
-
|
|
243
|
-
### Watch Mode
|
|
244
|
-
|
|
245
|
-
```bash
|
|
246
|
-
npm run test:watch
|
|
247
|
-
```
|
|
248
|
-
|
|
249
|
-
### Link for Local Development
|
|
250
|
-
|
|
251
|
-
```bash
|
|
252
|
-
npm link
|
|
253
|
-
```
|
|
254
|
-
|
|
255
|
-
This allows you to use the `ono` command globally while developing.
|
|
256
|
-
|
|
257
|
-
## API
|
|
258
|
-
|
|
259
|
-
### JSX Runtime
|
|
260
|
-
|
|
261
|
-
```javascript
|
|
262
|
-
import { createElement } from '@hashrock/ono/jsx-runtime';
|
|
263
|
-
```
|
|
264
|
-
|
|
265
|
-
The JSX runtime automatically handles JSX transformation when using TypeScript or Babel.
|
|
266
|
-
|
|
267
|
-
### Renderer
|
|
268
|
-
|
|
269
|
-
```javascript
|
|
270
|
-
import { renderToString } from '@hashrock/ono';
|
|
271
|
-
|
|
272
|
-
const html = renderToString(<div>Hello</div>);
|
|
273
|
-
```
|
|
274
|
-
|
|
275
|
-
### Bundler
|
|
276
|
-
|
|
277
|
-
```javascript
|
|
278
|
-
import { bundle } from '@hashrock/ono';
|
|
279
|
-
|
|
280
|
-
const code = await bundle('./path/to/file.jsx');
|
|
281
|
-
```
|
|
282
|
-
|
|
283
|
-
## Pages Mode
|
|
284
|
-
|
|
285
|
-
Ono supports building multi-page sites by placing JSX files in a `pages/` directory:
|
|
286
|
-
|
|
287
|
-
```
|
|
288
|
-
pages/
|
|
289
|
-
├── index.jsx → dist/index.html
|
|
290
|
-
├── about.jsx → dist/about.html
|
|
291
|
-
└── blog/
|
|
292
|
-
└── first-post.jsx → dist/blog/first-post.html
|
|
293
|
-
```
|
|
294
|
-
|
|
295
|
-
Each file should export a default function that returns a complete HTML document. Use the Layout component pattern for shared structure across pages.
|
|
296
|
-
|
|
297
|
-
## License
|
|
298
|
-
|
|
299
|
-
MIT
|