cradova 1.5.0 → 2.0.0
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 +53 -19
- package/dist/index.d.ts +383 -309
- package/dist/index.js +916 -907
- package/package.json +19 -17
- package/dist/types.ts +0 -315
package/README.md
CHANGED
|
@@ -1,20 +1,33 @@
|
|
|
1
|
-
<
|
|
2
|
-
<
|
|
3
|
-
<a
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
<
|
|
8
|
-
|
|
9
|
-
|
|
1
|
+
<br/>
|
|
2
|
+
<p align="center">
|
|
3
|
+
<a href="https://github.com/fridaycandour/cradova">
|
|
4
|
+
<img src="cradova.png" alt="Logo" width="80" height="80">
|
|
5
|
+
</a>
|
|
6
|
+
|
|
7
|
+
<h1 align="center">Cradova</h1>
|
|
8
|
+
|
|
9
|
+
<p align="center">
|
|
10
|
+
Cradova is a JavaScript framework for building Single Page Applications and PWAs.
|
|
11
|
+
<br/>
|
|
12
|
+
<br/>
|
|
13
|
+
<a href="https://github.com/fridaycandour/cradova#examples"><strong>Explore the docs »</strong></a>
|
|
14
|
+
<br/>
|
|
15
|
+
<br/>
|
|
16
|
+
<a href="https://t.me/cradovaframework">Join Community</a>
|
|
17
|
+
.
|
|
18
|
+
<a href="https://github.com/fridaycandour/cradova/issues">Report Bug</a>
|
|
19
|
+
.
|
|
20
|
+
<a href="https://github.com/fridaycandour/cradova/issues">Request Feature</a>
|
|
21
|
+
</p>
|
|
22
|
+
</p>
|
|
23
|
+
|
|
24
|
+
  
|
|
10
25
|
[](https://www.npmjs.com/package/cradova)
|
|
11
26
|
[](https://github.com/cradova/cradova.js/blob/next/LICENSE)
|
|
12
27
|
[](https://www.npmjs.com/package/cradova)
|
|
13
|
-
[](https://opencollective.com/cradova)
|
|
15
|
-
[](https://github.com/cradova/cradova.js/blob/next/contributing.md)
|
|
28
|
+
[](https://github.com/cradova/cradova.js/blob/next/contributing.md) 
|
|
16
29
|
|
|
17
|
-
|
|
30
|
+
# Contents
|
|
18
31
|
|
|
19
32
|
- [What is Cradova](#what-is-cradova)
|
|
20
33
|
- [Why Cradova?](#whats-the-benefit)
|
|
@@ -69,10 +82,17 @@ Many aspects of Cradova are not reflected in the following example. More functio
|
|
|
69
82
|
Here's an example of create a basic component in Cradova:
|
|
70
83
|
|
|
71
84
|
```js
|
|
72
|
-
|
|
85
|
+
// cradova v2.0.0 comes with all html tags prebuilt and fully typed
|
|
86
|
+
// this gives your app more performance gain.
|
|
87
|
+
import _, { h1 } from "cradova";
|
|
73
88
|
|
|
74
89
|
function Hello(name) {
|
|
75
|
-
return
|
|
90
|
+
return h1("Hello " + name, {
|
|
91
|
+
className: "title",
|
|
92
|
+
style: {
|
|
93
|
+
color: "grey",
|
|
94
|
+
},
|
|
95
|
+
});
|
|
76
96
|
}
|
|
77
97
|
|
|
78
98
|
// document fragment empty cradova call _()
|
|
@@ -82,6 +102,19 @@ const html = _(Hello("peter"), Hello("joe"));
|
|
|
82
102
|
document.body.append(html);
|
|
83
103
|
```
|
|
84
104
|
|
|
105
|
+
```js
|
|
106
|
+
// regular example
|
|
107
|
+
import _ from "cradova";
|
|
108
|
+
|
|
109
|
+
function Hello(name) {
|
|
110
|
+
return _("h1", "Hello " + name);
|
|
111
|
+
}
|
|
112
|
+
|
|
113
|
+
const html = _(Hello("peter"), Hello("joe"));
|
|
114
|
+
|
|
115
|
+
document.body.append(html);
|
|
116
|
+
```
|
|
117
|
+
|
|
85
118
|
## Using Screen
|
|
86
119
|
|
|
87
120
|
```js
|
|
@@ -108,24 +141,25 @@ const home = new Screen({
|
|
|
108
141
|
Router.route("/", home);
|
|
109
142
|
|
|
110
143
|
// navigates to that page
|
|
111
|
-
// Router.navigate("/home");
|
|
144
|
+
// Router.navigate("/home", data, force);
|
|
112
145
|
// get the page ready in the background
|
|
113
146
|
// Router.packageScreen("/home");
|
|
147
|
+
// get route params for this page
|
|
148
|
+
// Router.getParams();
|
|
114
149
|
|
|
115
150
|
```
|
|
116
151
|
|
|
117
152
|
## State management
|
|
118
153
|
|
|
119
154
|
```js
|
|
120
|
-
// we have
|
|
121
|
-
|
|
122
155
|
// dispatch - global (element) requires state ID
|
|
123
156
|
|
|
124
157
|
// element can have this.updateState when shouldUpdate is true
|
|
125
158
|
|
|
126
|
-
// Ref components
|
|
159
|
+
// Ref components
|
|
127
160
|
|
|
128
161
|
// state can be managed from a store when using createSignal or simpleStores
|
|
162
|
+
// this method is not yet documented
|
|
129
163
|
|
|
130
164
|
import _, { Ref } from "cradova";
|
|
131
165
|
|