cradova 3.3.54 → 3.3.55
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 +69 -55
- package/dist/index.js +3 -0
- package/dist/primitives/classes.d.ts +3 -4
- package/dist/primitives/functions.d.ts +0 -1
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -1,12 +1,12 @@
|
|
|
1
1
|
<br/>
|
|
2
2
|
<p align="center">
|
|
3
3
|
<a href="https://github.com/uiedbook/cradova">
|
|
4
|
-
<img src="
|
|
4
|
+
<img src="icon.png" alt="Logo" width="80" height="80">
|
|
5
5
|
</a>
|
|
6
6
|
|
|
7
|
-
|
|
7
|
+
<h1 align="center">Cradova</h1>
|
|
8
8
|
|
|
9
|
-
|
|
9
|
+
<p align="center">
|
|
10
10
|
Build Powerful ⚡ Web Apps with Ease
|
|
11
11
|
<br/>
|
|
12
12
|
<br/>
|
|
@@ -21,11 +21,15 @@ Build Powerful ⚡ Web Apps with Ease
|
|
|
21
21
|
</p>
|
|
22
22
|
</p>
|
|
23
23
|
|
|
24
|
-

|
|
24
|
+

|
|
25
|
+

|
|
26
|
+

|
|
25
27
|
[](https://www.npmjs.com/package/cradova)
|
|
26
28
|
[](https://github.com/cradova/cradova.js/blob/next/LICENSE)
|
|
27
29
|
[](https://www.npmjs.com/package/cradova)
|
|
28
|
-
[](https://github.com/cradova/cradova.js/blob/next/contributing.md)
|
|
30
|
+
[](https://github.com/cradova/cradova.js/blob/next/contributing.md)
|
|
31
|
+

|
|
32
|
+

|
|
29
33
|
|
|
30
34
|
# Cradova is 3
|
|
31
35
|
|
|
@@ -48,13 +52,13 @@ document.body.appendChild(Cradova.render());
|
|
|
48
52
|
## 2023 - What's New? Conditionals!
|
|
49
53
|
|
|
50
54
|
```js
|
|
51
|
-
import {
|
|
55
|
+
import { $case, $if, $ifelse, $switch, div, h1 } from "cradova";
|
|
52
56
|
|
|
53
57
|
function Hello({ name }) {
|
|
54
58
|
return div(
|
|
55
59
|
$if(name === "john", h1("Hello john")),
|
|
56
60
|
$if(name === "paul", h1("Goodbye paul")),
|
|
57
|
-
$ifelse(name === "john", h1("Hello john"), h1("Hello Paul"))
|
|
61
|
+
$ifelse(name === "john", h1("Hello john"), h1("Hello Paul")),
|
|
58
62
|
);
|
|
59
63
|
}
|
|
60
64
|
|
|
@@ -66,8 +70,8 @@ function whatsAllowed({ age }) {
|
|
|
66
70
|
age,
|
|
67
71
|
$case(12, h1("too young")),
|
|
68
72
|
$case(26, h1("you are welcome")),
|
|
69
|
-
$case(52, h1("too old"))
|
|
70
|
-
)
|
|
73
|
+
$case(52, h1("too old")),
|
|
74
|
+
),
|
|
71
75
|
);
|
|
72
76
|
}
|
|
73
77
|
|
|
@@ -86,16 +90,18 @@ document.body.append(html, whatsAllowed({ age: 26 }));
|
|
|
86
90
|
|
|
87
91
|
## What is Cradova?
|
|
88
92
|
|
|
89
|
-
Cradova is a web development framework for building Single Page Applications and
|
|
93
|
+
Cradova is a web development framework for building Single Page Applications and
|
|
94
|
+
PWAs.
|
|
90
95
|
|
|
91
|
-
Cradova follows the
|
|
96
|
+
Cradova follows the
|
|
97
|
+
[VJS specification](https://github.com/uiedbook/cradova/blob/main/VJS_spec/specification.md)
|
|
92
98
|
|
|
93
99
|
## What's the benefit?
|
|
94
100
|
|
|
95
101
|
Fast and simple with and fewer abstractions and yet easily composable.
|
|
96
102
|
|
|
97
|
-
Cradova is not built on virtual DOM or diff algorithms.
|
|
98
|
-
|
|
103
|
+
Cradova is not built on virtual DOM or diff algorithms. Instead, State
|
|
104
|
+
management is done in a way that is simple, easy and fast.
|
|
99
105
|
|
|
100
106
|
## Is this a big benefit?
|
|
101
107
|
|
|
@@ -122,7 +128,8 @@ npm i cradova
|
|
|
122
128
|
|
|
123
129
|
## Examples
|
|
124
130
|
|
|
125
|
-
Some aspects of Cradova are not reflected in the following example. More
|
|
131
|
+
Some aspects of Cradova are not reflected in the following example. More
|
|
132
|
+
functionality will be entailed in future docs.
|
|
126
133
|
|
|
127
134
|
## A basic component in Cradova:
|
|
128
135
|
|
|
@@ -149,13 +156,13 @@ This a collection of basic examples that can give you some ideas
|
|
|
149
156
|
|
|
150
157
|
```js
|
|
151
158
|
import {
|
|
159
|
+
br,
|
|
152
160
|
button,
|
|
153
|
-
createSignal,
|
|
154
161
|
Comp,
|
|
155
|
-
|
|
156
|
-
h1,
|
|
157
|
-
br,
|
|
162
|
+
createSignal,
|
|
158
163
|
div,
|
|
164
|
+
h1,
|
|
165
|
+
reference,
|
|
159
166
|
useRef,
|
|
160
167
|
} from "cradova";
|
|
161
168
|
|
|
@@ -205,7 +212,7 @@ function typingExample() {
|
|
|
205
212
|
},
|
|
206
213
|
placeholder: "typing simulation",
|
|
207
214
|
}),
|
|
208
|
-
p(" no thing typed yet!", { reference: ref.bindAs("text") })
|
|
215
|
+
p(" no thing typed yet!", { reference: ref.bindAs("text") }),
|
|
209
216
|
);
|
|
210
217
|
}
|
|
211
218
|
|
|
@@ -223,15 +230,15 @@ Let's see a simple TodoList example
|
|
|
223
230
|
```js
|
|
224
231
|
import {
|
|
225
232
|
button,
|
|
233
|
+
Comp,
|
|
226
234
|
createSignal,
|
|
227
|
-
useState,
|
|
228
235
|
div,
|
|
236
|
+
h1,
|
|
229
237
|
input,
|
|
230
238
|
main,
|
|
231
239
|
p,
|
|
232
|
-
Comp,
|
|
233
|
-
h1,
|
|
234
240
|
useRef,
|
|
241
|
+
useState,
|
|
235
242
|
} from "../dist/index.js";
|
|
236
243
|
|
|
237
244
|
function TodoList() {
|
|
@@ -271,13 +278,13 @@ function TodoList() {
|
|
|
271
278
|
onclick() {
|
|
272
279
|
todoStore.fireAction(
|
|
273
280
|
"add-todo",
|
|
274
|
-
referenceSet.current("todoInput").value
|
|
281
|
+
referenceSet.current("todoInput").value,
|
|
275
282
|
);
|
|
276
283
|
referenceSet.current("todoInput").value = "";
|
|
277
284
|
},
|
|
278
|
-
})
|
|
285
|
+
}),
|
|
279
286
|
),
|
|
280
|
-
todoList.render
|
|
287
|
+
todoList.render,
|
|
281
288
|
);
|
|
282
289
|
}
|
|
283
290
|
|
|
@@ -291,7 +298,7 @@ const todoList = new Comp(function () {
|
|
|
291
298
|
self.Signal.fireAction("remove-todo", item);
|
|
292
299
|
},
|
|
293
300
|
})
|
|
294
|
-
)
|
|
301
|
+
),
|
|
295
302
|
);
|
|
296
303
|
});
|
|
297
304
|
document.body.appendChild(TodoList());
|
|
@@ -299,16 +306,14 @@ document.body.appendChild(TodoList());
|
|
|
299
306
|
|
|
300
307
|
## working with page and Router:
|
|
301
308
|
|
|
302
|
-
Unlike just appending stuff to the DOM,
|
|
303
|
-
|
|
309
|
+
Unlike just appending stuff to the DOM, a better to build apps is to use a
|
|
310
|
+
routing system.
|
|
304
311
|
|
|
305
312
|
Cradova Router is a module that allows you do the following:
|
|
306
313
|
|
|
307
|
-
Create specified routes in you application
|
|
308
|
-
|
|
309
|
-
|
|
310
|
-
listen to Navigation changes
|
|
311
|
-
create error boundary at page level apart from Comp level.
|
|
314
|
+
Create specified routes in you application help you handle navigation render a
|
|
315
|
+
page on a route listen to Navigation changes create error boundary at page level
|
|
316
|
+
apart from Comp level.
|
|
312
317
|
|
|
313
318
|
let's try an example.
|
|
314
319
|
|
|
@@ -372,7 +377,8 @@ if it already exist Cradova will use it instead.
|
|
|
372
377
|
|
|
373
378
|
Cradova will create a div with data-wrapper="app" if it doesn't exists already.
|
|
374
379
|
|
|
375
|
-
so if you want to use your own mount point then create a div with
|
|
380
|
+
so if you want to use your own mount point then create a div with
|
|
381
|
+
data-wrapper="app".
|
|
376
382
|
|
|
377
383
|
---
|
|
378
384
|
|
|
@@ -380,13 +386,10 @@ More info on Cradova pages
|
|
|
380
386
|
|
|
381
387
|
---
|
|
382
388
|
|
|
383
|
-
Cradova pages has
|
|
384
|
-
|
|
385
|
-
onDeactivate() methods which is also available in the
|
|
386
|
-
component function on the this variable bound to it.
|
|
389
|
+
Cradova pages has onActivate() and onDeactivate() methods which is also
|
|
390
|
+
available in the component function on the this variable bound to it.
|
|
387
391
|
|
|
388
|
-
this allow you manage rendering
|
|
389
|
-
circle for each page in your app
|
|
392
|
+
this allow you manage rendering circle for each page in your app
|
|
390
393
|
|
|
391
394
|
---
|
|
392
395
|
|
|
@@ -402,8 +405,7 @@ Cradova Comp is a dynamic component class, which ships simple abstractions like:
|
|
|
402
405
|
- useRef
|
|
403
406
|
- preRender
|
|
404
407
|
|
|
405
|
-
these behaviors allow you manage rendering
|
|
406
|
-
circle for Comps in your app
|
|
408
|
+
these behaviors allow you manage rendering circle for Comps in your app
|
|
407
409
|
|
|
408
410
|
---
|
|
409
411
|
|
|
@@ -422,19 +424,27 @@ with ability to:
|
|
|
422
424
|
- persist changes to localStorage
|
|
423
425
|
- update a Comp and bindings automatically
|
|
424
426
|
|
|
425
|
-
With these simple and easy abstractions, you can write datastores with so much
|
|
427
|
+
With these simple and easy abstractions, you can write datastores with so much
|
|
428
|
+
convenience.
|
|
426
429
|
|
|
427
430
|
## Documentation
|
|
428
431
|
|
|
429
|
-
At the moment, we're in the process of creating a documentation website for
|
|
432
|
+
At the moment, we're in the process of creating a documentation website for
|
|
433
|
+
Cradova, and we have limited resources. If you're interested in lending a hand,
|
|
434
|
+
we invite you to join our community, gain firsthand experience, and contribute
|
|
435
|
+
to the advancement of Cradova.
|
|
430
436
|
|
|
431
437
|
## Getting Help
|
|
432
438
|
|
|
433
|
-
To get further insights and help on Cradova, visit the
|
|
439
|
+
To get further insights and help on Cradova, visit the
|
|
440
|
+
[Discord](https://discord.gg/b7fvMg38) and [Telegram](https://t.me/uiedbookHQ)
|
|
441
|
+
Community Chats.
|
|
434
442
|
|
|
435
443
|
## Contributing
|
|
436
444
|
|
|
437
|
-
We are currently working to
|
|
445
|
+
We are currently working to
|
|
446
|
+
[set](https://github.com/uiedbook/cradova/blob/main/contributing.md) up the
|
|
447
|
+
following:
|
|
438
448
|
|
|
439
449
|
- building Cradova CLI (in progress)
|
|
440
450
|
- Cradova Documentation Website
|
|
@@ -443,12 +453,12 @@ We are currently working to [set](https://github.com/uiedbook/cradova/blob/main/
|
|
|
443
453
|
- maintenance and promotion
|
|
444
454
|
|
|
445
455
|
```
|
|
446
|
-
|
|
447
|
-
|
|
448
|
-
|
|
449
|
-
|
|
450
|
-
|
|
451
|
-
|
|
456
|
+
██████╗ ██████╗ █████═╗ ███████╗ ███████╗ ██╗ ██╗ █████╗
|
|
457
|
+
██╔════╝ ██╔══██╗ ██╔═╗██║ █ ██ ██╔═════╝█ ██║ ██║ ██╔═╗██
|
|
458
|
+
██║ ██████╔╝ ███████║ █ ██ ██║ ██ ██║ ██║ ██████╗
|
|
459
|
+
██║ ██╔══██╗ ██║ ██║ █ ██ ██║ ██ ╚██╗ ██╔╝ ██║ ██╗
|
|
460
|
+
╚██████╗ ██║ ██║ ██║ ██║ ███████╔╝ ████████ ╚███╔╝ ██║ ██║
|
|
461
|
+
╚═════╝ ╚═╝ ╚═╝ ╚═╝ ╚═╝ ╚══════╝ ╚════╝ ╚══╝ ╚═╝ ╚═╝
|
|
452
462
|
```
|
|
453
463
|
|
|
454
464
|
## Apache Lincenced
|
|
@@ -459,12 +469,16 @@ Join Us on [telegram](https://t.me/UiedbookHQ).
|
|
|
459
469
|
|
|
460
470
|
### Contribution and License Agreement
|
|
461
471
|
|
|
462
|
-
If you contribute code to this project, you are implicitly allowing your code to
|
|
472
|
+
If you contribute code to this project, you are implicitly allowing your code to
|
|
473
|
+
be distributed under same license. You are also implicitly verifying that all
|
|
474
|
+
code is your original work.
|
|
463
475
|
|
|
464
476
|
## Supporting Cradova development
|
|
465
477
|
|
|
466
|
-
Your Support is a good force for change anytime you do it, you can ensure Our
|
|
467
|
-
|
|
478
|
+
Your Support is a good force for change anytime you do it, you can ensure Our
|
|
479
|
+
projects, growth, Cradova, Cradova, JetPath etc, growth and improvement by
|
|
480
|
+
making a re-occuring or fixed sponsorship to
|
|
481
|
+
[github sponsors](https://github.com/sponsors/FridayCandour):
|
|
468
482
|
|
|
469
483
|
Support via cryptos -
|
|
470
484
|
|
package/dist/index.js
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { type
|
|
1
|
+
import { type browserPageType, type CradovaPageType } from "./types";
|
|
2
2
|
/**
|
|
3
3
|
* Cradova event
|
|
4
4
|
*/
|
|
@@ -33,7 +33,6 @@ export declare const CradovaEvent: cradovaEvent;
|
|
|
33
33
|
* Cradova Comp
|
|
34
34
|
* -------
|
|
35
35
|
* create dynamic components
|
|
36
|
-
*
|
|
37
36
|
*/
|
|
38
37
|
export declare class Comp<Prop extends Record<string, any> = any> {
|
|
39
38
|
id: number;
|
|
@@ -49,6 +48,7 @@ export declare class Comp<Prop extends Record<string, any> = any> {
|
|
|
49
48
|
_state_index: number;
|
|
50
49
|
test?: string;
|
|
51
50
|
constructor(component: (this: Comp<Prop>) => HTMLElement);
|
|
51
|
+
clone(): Comp<Prop>;
|
|
52
52
|
preRender(): void;
|
|
53
53
|
/**
|
|
54
54
|
* Cradova Comp
|
|
@@ -179,7 +179,6 @@ export declare class Signal<Type extends Record<string, any>> {
|
|
|
179
179
|
* Cradova Signal
|
|
180
180
|
* ----
|
|
181
181
|
* clear the history on local storage
|
|
182
|
-
*
|
|
183
182
|
*/
|
|
184
183
|
clearPersist(): void;
|
|
185
184
|
}
|
|
@@ -280,7 +279,7 @@ export declare class Router {
|
|
|
280
279
|
*/
|
|
281
280
|
static get PageData(): {
|
|
282
281
|
params: Record<string, string>;
|
|
283
|
-
data?: Record<string, any
|
|
282
|
+
data?: Record<string, any>;
|
|
284
283
|
};
|
|
285
284
|
/**
|
|
286
285
|
* Cradova
|
|
@@ -28,7 +28,6 @@ export declare const makeElement: <E extends HTMLElement>(element: E & HTMLEleme
|
|
|
28
28
|
export declare const cra: <E extends HTMLElement>(tag: string) => (...Children_and_Properties: VJS_params_TYPE<E>) => E;
|
|
29
29
|
export declare function Rhoda(l: VJS_params_TYPE<HTMLElement>): DocumentFragment;
|
|
30
30
|
/**
|
|
31
|
-
*
|
|
32
31
|
* @param {expression} condition
|
|
33
32
|
* @param {function} elements[]
|
|
34
33
|
*/
|