Skip to content

Commit 6034c71

Browse files
spielcryptospielcrypto
committed
adapting readme to the 1.0.0 version
1 parent 8a894d0 commit 6034c71

36 files changed

+1112
-1700
lines changed

‎README.md

+108-95
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
# Spiel Client
22

3-
Spiel client is a flexible and light frontend framework to make easier create a complex and modern applications for the client side. It joins two light but powerful libraries: [Picodom](https://github.com/picodom/picodom) and [Navigo](https://github.com/krasimir/navigo).
3+
Spiel client is a flexible and light frontend framework to make easier create a complex and modern applications for the client side. It joins two light but powerful libraries: [ultradom](https://github.com/jorgebucaran/ultradom) and [Navigo](https://github.com/krasimir/navigo).
44

55
## Api documentation
66
* [Spiel client API](https://spieljs.github.io/spiel-client/)
@@ -13,44 +13,42 @@ Spiel client is a flexible and light frontend framework to make easier create a
1313
### First config you routes
1414

1515
```typescript
16-
import {ConfigRouters, srouter} from 'spiel-client';
17-
18-
import {genericHooks, hooks} from './hooks';
19-
16+
import {IConfigRouters} from "spiel-client";
17+
import {genericHooks, hooks} from "./hooks";
2018
import {page1, page2, page3, page4, notFound} from './Pages'
2119

22-
const configSettings: ConfigRouters = {
23-
rootPath: 'http://localhost:9876/',
24-
default: '/home',
25-
useHash: true,
26-
genericHooks: genericHooks,
27-
defaultProps: 'default',
20+
export const configSettings: IConfigRouters = {
21+
default: "/home",
22+
defaultProps: "default",
23+
genericHooks,
24+
hash: "#!",
2825
notFound: true,
29-
hash: '#!',
30-
notFoundPath: '/not-found',
26+
notFoundPath: "/not-found",
27+
rootPath: "http://localhost:9876/",
3128
routers: [{
32-
path: '/home',
33-
page: page1,
29+
page: Page1,
30+
path: "/home",
3431
routers: [{
35-
path: '/child/:number',
36-
page: page2,
37-
alias: 'child',
38-
hooks: hooks,
32+
alias: "child",
33+
hooks,
34+
page: Page2,
35+
path: "/child/:number",
3936
routers: [{
40-
path: '/child2/:word',
41-
alias: 'grandchild',
42-
page: page3
43-
}]
44-
},{
45-
path: '/brother',
46-
defaultProps: 'my own prop',
47-
page: page4
48-
}]
37+
alias: "grandchild",
38+
page: Page3,
39+
path: "/child2/:word",
40+
}],
41+
}, {
42+
defaultProps: "my own prop",
43+
page: Page4,
44+
path: "/brother",
45+
}],
4946
},
5047
{
51-
path: '/not-found',
52-
page: notFound
53-
}]
48+
page: notFound,
49+
path: "/not-found",
50+
}],
51+
useHash: true,
5452
};
5553

5654
srouter.setRouters(configDefault).resolve();
@@ -77,12 +75,12 @@ router.resolve();
7775
Assign alias if you want generate links:
7876

7977
```typescript
80-
const configDefault: ConfigRouters = {
78+
const configDefault: IConfigRouters = {
8179
routers: [{
82-
path: '/user/:id',
80+
alias: 'user'
8381
default: '/user'
8482
page: page1,
85-
alias: 'user'
83+
path: '/user/:id',
8684
}]
8785
};
8886

@@ -94,75 +92,89 @@ console.log(router.generate('user', {id: 4})); // #/user/4
9492
Set your generic hooks for all the routes:
9593

9694
```typescript
97-
export const genericHooks = {
95+
export const genericHooks: IGenericHooks = {
96+
after: (params: Params) => {
97+
if (params && params.number) {
98+
params.number = +params.number + 2;
99+
}
100+
},
98101
before: (done: (suppress?: boolean) => void, params: Params) => {
99-
if(params && params.number) params.number = +params.number + 2;
102+
if (params && params.number) {
103+
params.number = +params.number + 2;
104+
}
100105
done();
101106
},
102-
after: (params: Params) => {
103-
if(params && params.number) params.number = +params.number + 2;
104-
}
105-
}
107+
};
106108
```
107109

108110
And your hooks for expecific route:
109111

110112
```typescript
111-
export const hooks = {
113+
export const hooks: IHooks = {
114+
after: (params: Params) => {
115+
if (params) {
116+
params.number = +params.number + 2;
117+
}
118+
},
119+
already: (params: Params) => {
120+
if (params) {
121+
params.number = +params.number + 2;
122+
}
123+
},
112124
before: (done: (suppress?: boolean) => void, params: Params) => {
113-
if(params) params.number = +params.number + 2;
125+
if (params) {
126+
params.number = +params.number + 2;
127+
}
114128
done();
115129
},
116-
after: (params: Params) => {
117-
if(params) params.number = +params.number + 2
118-
},
119130
leave: (params: Params) => {
120-
if(params) params.number = +params.number + 2
131+
if (params) {
132+
params.number = +params.number + 2;
133+
}
121134
},
122-
already: (params: Params) => {
123-
if(params) params.number = +params.number + 2
124-
}
125-
}
135+
};
126136
```
127137
### Create your page components
128138

129-
```typescript
130-
import { createNode, Component, Page, State, VNode, Children, JSXElements } from 'spiel-client';
139+
```tsx
140+
import { Children, createNode, IPage, JSXElements, srouter, State, VNode } from "../../../src";
131141

132-
interface Show {
133-
value: string
142+
interface IShow {
143+
value: string;
144+
onGo: () => void;
134145
}
135146

136-
export class Page1 implements Page {
137-
state = {
138-
text: 'This is a Page component'
139-
}
147+
export class Page5 implements IPage {
148+
public state = {
149+
text: "This is a component",
150+
};
140151

141-
view(state: State): JSXElements {
152+
public view(state: State): JSXElements {
142153
return(
143-
<Show value={state.text}>
144-
<span>And this is its component</span>
154+
<Show value={state.text} onGo={() => srouter.go("/")}>
155+
<span>And this is its child</span>
145156
</Show>
146-
)
157+
);
147158
}
148159
}
149160

150-
function Show ({value}: Show, children: Children) {
161+
function Show({value, onGo}: IShow, children: Children) {
151162
return (
152163
<div>
153164
<span>{value}</span>
154-
<div id='child'>{children}</div>
165+
<div id="child">{children}</div>
166+
<button id="go-parent" onclick={() => srouter.go("/")}></button>
155167
</div>
156-
)
168+
);
157169
}
158170

159-
export const page1 = new Page1();
171+
export const page5 = new page5();
160172
```
161173

162-
**Note:** you need to export the singleton of the class and always import `h` and `Component` to render the views
174+
**Note:** you need to export the singleton of the class and always import `createNode` to render the views
163175

164-
To know more about the views see more in [picodom](https://github.com/picodom/picodom).
165-
All the picodom functionalities like `patch`, `h` etc... are available in spiel-client
176+
To know more about the views see more in [ultradom](https://github.com/jorgebucaran/ultradom).
177+
All the ultradom functionalities like `patch`, `createNode` etc... are available in spiel-client
166178

167179
### Config your project
168180

@@ -200,33 +212,34 @@ Remember always to put `createNode` in the `jsxFactory` option.
200212
Create your mocks:
201213

202214
```typescript
203-
import { createNode, Component, Page, State, VNode, Children, JSXElements } from 'spiel-client';
215+
import { Children, createNode, IPage, JSXElements, State, VNode } from "../../src";
204216

205-
interface Show {
206-
value: string
217+
interface IShow {
218+
value: string;
207219
}
208220

209-
export class ComponentTest implements Page {
210-
state = {
211-
text: 'This is a component'
212-
}
221+
export class ComponentTest implements IPage {
222+
public state = {
223+
text: "This is a component",
224+
};
213225

214-
view(state: State): JSXElements {
226+
public view(state: State): JSXElements {
215227
return(
216228
<Show value={state.text}>
217229
<span>And this is its child</span>
218230
</Show>
219-
)
231+
);
220232
}
233+
221234
}
222235

223-
function Show ({value}: Show, children: Children) {
236+
function Show({value}: IShow, children: Children) {
224237
return (
225238
<div>
226239
<span>{value}</span>
227-
<div id='child'>{children}</div>
240+
<div id="child">{children}</div>
228241
</div>
229-
)
242+
);
230243
}
231244

232245
export const componentTest = new ComponentTest();
@@ -235,27 +248,27 @@ export const componentTest = new ComponentTest();
235248
and your file spec:
236249

237250
```typescript
238-
import { createNode as u, VNode } from "spiel-client";
239-
import { expect, assert } from "chai";
251+
import { assert, expect } from "chai";
252+
import { createNode as u, patch, VNode} from "../../src";
240253

241-
import {componentTest} from './mocks';
254+
import {componentTest} from "./mocks";
242255

243-
describe('Component', () => {
244-
let nodes: VNode<any>
245-
before(()=> {
256+
describe("Component", () => {
257+
let nodes: VNode<any>;
258+
before(() => {
246259
nodes = u(componentTest.view, componentTest.state);
247260
});
248-
it('has to be created', ()=> {
249-
const text: any = nodes.children.find((node: any) => node.type === 'span');
250-
expect(text.children[0]).has.to.be.equal('This is a component')
261+
it("has to be created", () => {
262+
const text: any = nodes.children.find((node: any) => node.nodeName === "span");
263+
expect(text.children[0]).has.to.be.equal("This is a component");
251264
});
252265

253-
it('has to exist its children', ()=> {
254-
const child: any = nodes.children.find((node: any) => node.type === 'div');
255-
const text: any = child.children.find((node: any) => node.type === 'span');
266+
it("has to exist its children", () => {
267+
const child: any = nodes.children.find((node: any) => node.nodeName === "div");
268+
const text: any = child.children.find((node: any) => node.nodeName === "span");
256269
expect(text.children[0]).has.to.be.equal("And this is its child");
257270
});
258-
})
271+
});
259272
```
260273

261274
## Make compatible with ES5 browsers
@@ -290,7 +303,7 @@ tsconfig.json:
290303
In your code:
291304
```typescript
292305
import 'es6-shim'; // or every polyfill which you need
293-
import { srouter, ConfigRouters } from 'spiel-client';
306+
import { srouter, IConfigRouters } from 'spiel-client';
294307
```
295308

296309
## Run Spiel Client tests

0 commit comments

Comments
 (0)