Skip to content

Commit a207765

Browse files
TechQueryTechQuery
committed
[add] Nested Data type
[add] Usage document [optimize] upgrade Upstream packages
1 parent ac8a334 commit a207765

7 files changed

Lines changed: 151 additions & 72 deletions

File tree

‎ReadMe.md‎

Lines changed: 63 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,18 +1,78 @@
11
# MobX-Strapi
22

3-
[MobX][1] v5 SDK for [Strapi][2] v3 (headless CMS)
3+
[MobX][1] SDK for [Strapi][2] v3 (headless CMS)
44

55
[![NPM Dependency](https://david-dm.org/EasyWebApp/MobX-Strapi.svg)][3]
66
[![CI & CD](https://github.com/EasyWebApp/MobX-Strapi/workflows/CI%20&%20CD/badge.svg)][4]
7+
[![](https://raw.githubusercontent.com/sindresorhus/awesome/main/media/mentioned-badge.svg)][5]
78

8-
[![NPM](https://nodei.co/npm/mobx-strapi.png?downloads=true&downloadRank=true&stars=true)][5]
9+
[![NPM](https://nodei.co/npm/mobx-strapi.png?downloads=true&downloadRank=true&stars=true)][6]
910

1011
## Example
1112

1213
https://github.com/kaiyuanshe/PWA/tree/master/src/model
1314

15+
## Usage
16+
17+
### `model/index.ts`
18+
19+
```JavaScript
20+
import { service } from 'mobx-strapi';
21+
22+
import { SampleModel } from './Sample';
23+
24+
if (self.location.hostname !== 'localhost')
25+
service.baseURI = 'http://your.production.domain/path/optional';
26+
27+
export const sample = new SampleModel();
28+
```
29+
30+
### `model/Sample.ts`
31+
32+
```TypeScript
33+
import { BaseData, MediaData, CollectionModel } from 'mobx-strapi';
34+
35+
export interface Sample extends BaseData {
36+
file: MediaData;
37+
}
38+
39+
export class SampleModel extends CollectionModel<Sample> {
40+
name = 'sample';
41+
basePath = 'samples';
42+
}
43+
```
44+
45+
### `page/Sample.tsx`
46+
47+
Use [WebCell][7] as an Example
48+
49+
```JSX
50+
import { component, mixin, createCell } from 'web-cell';
51+
import { observer } from 'mobx-web-cell';
52+
53+
import { sample } from '../model';
54+
55+
@observer
56+
@component({
57+
tagName: 'sample-page'
58+
})
59+
export class SamplePage extends mixin() {
60+
connectedCallback() {
61+
sample.getOne()
62+
}
63+
64+
render() {
65+
const { file } = sample.current;
66+
67+
return <img src={file?.url} />;
68+
}
69+
}
70+
```
71+
1472
[1]: https://mobx.js.org/
1573
[2]: https://strapi.io/
1674
[3]: https://david-dm.org/EasyWebApp/MobX-Strapi
1775
[4]: https://github.com/EasyWebApp/MobX-Strapi/actions
18-
[5]: https://nodei.co/npm/mobx-strapi/
76+
[5]: https://github.com/strapi/awesome-strapi
77+
[6]: https://nodei.co/npm/mobx-strapi/
78+
[7]: https://github.com/EasyWebApp/WebCell

‎package.json‎

Lines changed: 10 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,9 @@
11
{
22
"name": "mobx-strapi",
3-
"version": "0.2.1",
3+
"version": "0.2.3",
44
"license": "LGPL-3.0",
55
"author": "shiy2008@gmail.com",
6-
"description": "MobX v5 SDK for Strapi v3 (headless CMS)",
6+
"description": "MobX SDK for Strapi v3 (headless CMS)",
77
"keywords": [
88
"mobx",
99
"observable",
@@ -28,19 +28,19 @@
2828
"main": "dist/mobx-strapi.umd.js",
2929
"module": "dist/mobx-strapi.js",
3030
"dependencies": {
31-
"@octokit/types": "^5.5.0",
31+
"@octokit/openapi-types": "^2.0.1",
3232
"koajax": "^0.6.4",
33-
"mobx": "^5.15.7",
34-
"web-utility": "^1.8.2"
33+
"mobx": ">4.0.0 <6.0.0",
34+
"web-utility": "^2.2.2"
3535
},
3636
"devDependencies": {
37-
"husky": "^4.3.0",
37+
"husky": "^4.3.6",
3838
"iterable-observer": "^1.0.0-beta.5",
39-
"lint-staged": "^10.5.1",
40-
"microbundle": "^0.12.4",
41-
"prettier": "^2.1.2",
39+
"lint-staged": "^10.5.3",
40+
"microbundle": "^0.13.0",
41+
"prettier": "^2.2.1",
4242
"typedoc": "^0.19.2",
43-
"typescript": "^4.0.5"
43+
"typescript": "^4.1.3"
4444
},
4545
"prettier": {
4646
"singleQuote": true,

‎source/Base.ts‎

Lines changed: 1 addition & 48 deletions
Original file line numberDiff line numberDiff line change
@@ -1,56 +1,9 @@
11
import { observable } from 'mobx';
22
import { buildURLData } from 'web-utility';
33

4+
import { MediaData, BaseData, Query, NewData, FileKeys } from './type';
45
import { service } from './service';
56

6-
export interface BaseData {
7-
id: string;
8-
created_at: string;
9-
updated_at: string;
10-
published_at: string;
11-
}
12-
13-
export interface MediaData extends BaseData {
14-
name: string;
15-
alternativeText: string;
16-
caption: string;
17-
width: number;
18-
height: number;
19-
formats: [];
20-
hash: string;
21-
ext: string;
22-
mime: string;
23-
size: number;
24-
url: string;
25-
previewUrl: string;
26-
provider: string;
27-
provider_metadata: [];
28-
related: string;
29-
}
30-
31-
export type NewData<T extends BaseData> = {
32-
[key in keyof T]?: T[key] extends MediaData
33-
? File
34-
: T[key] extends MediaData[]
35-
? File[]
36-
: T[key] extends BaseData
37-
? string
38-
: T[key] extends BaseData[]
39-
? string[]
40-
: T[key];
41-
};
42-
43-
export type FileKeys<T> = {
44-
[K in keyof T]: T[K] extends MediaData ? K : never;
45-
}[keyof T];
46-
47-
export type Query<D extends BaseData> = Omit<NewData<D>, FileKeys<D>> & {
48-
_sort?: string;
49-
_start?: number;
50-
_limit?: number;
51-
_publicationState?: 'live' | 'preview';
52-
};
53-
547
export abstract class BaseModel {
558
@observable
569
loading = false;

‎source/Session.ts‎

Lines changed: 8 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,9 @@
11
import { observable } from 'mobx';
2-
import { UsersGetByUsernameResponseData } from '@octokit/types';
2+
import { components } from '@octokit/openapi-types';
33

4+
import { BaseData, NewData } from './type';
5+
import { BaseModel, loading } from './Base';
46
import { APIError, service, setToken, github } from './service';
5-
import { BaseData, BaseModel, NewData, loading } from './Base';
67

78
export interface BaseUser extends BaseData {
89
username: string;
@@ -13,14 +14,16 @@ export interface BaseUser extends BaseData {
1314
role: any;
1415
}
1516

17+
export type GithubUser = components['schemas']['public-user'];
18+
1619
const { localStorage, location } = self;
1720

1821
export class SessionModel<T extends BaseUser = BaseUser> extends BaseModel {
1922
@observable
2023
user?: T;
2124

2225
@observable
23-
userGithub?: UsersGetByUsernameResponseData;
26+
userGithub?: GithubUser;
2427

2528
@loading
2629
async signIn(token: string, provider = 'github') {
@@ -55,9 +58,8 @@ export class SessionModel<T extends BaseUser = BaseUser> extends BaseModel {
5558

5659
@loading
5760
async getGithubProfile(name: string) {
58-
const { body } = await github.get<UsersGetByUsernameResponseData>(
59-
'users/' + name
60-
);
61+
const { body } = await github.get<GithubUser>('users/' + name);
62+
6163
return (this.userGithub = body);
6264
}
6365

‎source/index.ts‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,4 @@
1+
export * from './type';
12
export * from './service';
23
export * from './Base';
34
export * from './Session';

‎source/service.ts‎

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -20,14 +20,14 @@ export const service = new HTTPClient({
2020
return next();
2121
});
2222

23-
export const github = new HTTPClient({
24-
baseURI: 'https://api.github.com/',
25-
responseType: 'json'
26-
});
27-
2823
export type APIError = HTTPError<{
2924
statusCode: number;
3025
error: string;
3126
message: string;
3227
data?: { messages: Record<string, string>[] }[];
3328
}>;
29+
30+
export const github = new HTTPClient({
31+
baseURI: 'https://api.github.com/',
32+
responseType: 'json'
33+
});

‎source/type.ts‎

Lines changed: 63 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,63 @@
1+
export interface BaseData {
2+
id: string;
3+
created_at: string;
4+
updated_at: string;
5+
published_at: string;
6+
}
7+
8+
export interface MediaData extends BaseData {
9+
name: string;
10+
alternativeText: string;
11+
caption: string;
12+
width: number;
13+
height: number;
14+
formats: [];
15+
hash: string;
16+
ext: string;
17+
mime: string;
18+
size: number;
19+
url: string;
20+
previewUrl: string;
21+
provider: string;
22+
provider_metadata: [];
23+
related: string;
24+
}
25+
26+
export type NestedData<D extends BaseData> = {
27+
[K in keyof D]?: D[K] extends MediaData
28+
? D[K]
29+
: D[K] extends MediaData[]
30+
? D[K]
31+
: D[K] extends BaseData
32+
? string
33+
: D[K] extends BaseData[]
34+
? string[]
35+
: D[K];
36+
};
37+
38+
export type NewData<T extends BaseData> = {
39+
[key in keyof T]?: T[key] extends MediaData
40+
? File
41+
: T[key] extends MediaData[]
42+
? File[]
43+
: T[key] extends BaseData
44+
? string
45+
: T[key] extends BaseData[]
46+
? string[]
47+
: T[key] extends NestedData<BaseData>
48+
? string
49+
: T[key] extends NestedData<BaseData>[]
50+
? string[]
51+
: T[key];
52+
};
53+
54+
export type FileKeys<T> = {
55+
[K in keyof T]: T[K] extends MediaData ? K : never;
56+
}[keyof T];
57+
58+
export type Query<D extends BaseData> = Omit<NewData<D>, FileKeys<D>> & {
59+
_sort?: string;
60+
_start?: number;
61+
_limit?: number;
62+
_publicationState?: 'live' | 'preview';
63+
};

0 commit comments

Comments
 (0)