Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/idea2app/MobX-RESTful

Common MobX abstract base Class & Decorator utilities for RESTful API, which makes it much easier to build Web apps, no matter it's a MPA, SPA, PWA, mini-apps or hybird-apps.
https://github.com/idea2app/MobX-RESTful

api mobx model restful sdk state store

Last synced: 9 days ago
JSON representation

Common MobX abstract base Class & Decorator utilities for RESTful API, which makes it much easier to build Web apps, no matter it's a MPA, SPA, PWA, mini-apps or hybird-apps.

Host: GitHub
URL: https://github.com/idea2app/MobX-RESTful
Owner: idea2app
Created: 2020-11-15T09:11:14.000Z (almost 4 years ago)
Default Branch: main
Last Pushed: 2024-10-29T11:41:02.000Z (10 days ago)
Last Synced: 2024-10-29T13:25:53.033Z (10 days ago)
Topics: api, mobx, model, restful, sdk, state, store
Language: TypeScript
Homepage: https://idea2app.github.io/MobX-RESTful/
Size: 708 KB
Stars: 9
Watchers: 3
Forks: 0
Open Issues: 0
Metadata Files:
- Readme: ReadMe.md

Awesome Lists containing this project

README

        # MobX RESTful

Common [MobX][1] **abstract base Class & [Decorator][2]** utilities for [RESTful API][3].

Just define your **Data models** & **Client HTTP methods**, then leave rest of things to MobX!

[![MobX compatibility](https://img.shields.io/badge/Compatible-1?logo=mobx&label=MobX%206%2F7)][1]

[![NPM Dependency](https://img.shields.io/librariesio/github/idea2app/MobX-RESTful.svg)][4]

[![CI & CD](https://github.com/idea2app/MobX-RESTful/actions/workflows/main.yml/badge.svg)][5]

[![NPM](https://nodei.co/npm/mobx-restful.png?downloads=true&downloadRank=true&stars=true)][6]

## Versions

|  SemVer   |    status    | ES decorator |    MobX     |

| :-------: | :----------: | :----------: | :---------: |

| `>=0.7.0` | ✅developing |   stage-3    |  `>=6.11`   |

| `<0.7.0`  | ❌deprecated |   stage-2    | `>=4 <6.11` |

## Usage

### `package.json`

```json

{

    "dependencies": {

        "koajax": "^3.0.0",

        "mobx": "^6.13.5",

        "mobx-restful": "^2.0.0"

    }

}

```

### `tsconfig.json`

```json

{

    "compilerOptions": {

        "target": "ES6",

        "moduleResolution": "Node",

        "useDefineForClassFields": true,

        "experimentalDecorators": false,

        "jsx": "react-jsx"

    }

}

```

### Simple List

#### `model/client.ts`

```javascript

import { HTTPClient } from 'koajax';

export const client = new HTTPClient({

    baseURI: 'https://api.github.com/',

    responseType: 'json'

});

```

#### `model/Repository.ts`

```typescript

import { buildURLData } from 'web-utility';

import { Filter, ListModel } from 'mobx-restful';

import { components } from '@octokit/openapi-types';

import { client } from './client';

export type Organization = components['schemas']['organization-full'];

export type Repository = components['schemas']['minimal-repository'];

export class RepositoryModel<

    D extends Repository = Repository,

    F extends Filter = Filter

> extends ListModel {

    client = client;

    baseURI = 'orgs/idea2app/repos';

    async loadPage(page: number, per_page: number) {

        const { body } = await this.client.get(

            `${this.baseURI}?${buildURLData({ page, per_page })}`

        );

        const [_, organization] = this.baseURI.split('/');

        const {

            body: { public_repos }

        } = await this.client.get(`orgs/${organization}`);

        return { pageData: body, totalCount: public_repos };

    }

}

export default new RepositoryModel();

```

#### `page/Repository.tsx`

Use [WebCell][10] as an Example

```tsx

import { component, observer } from 'web-cell';

import repositoryStore from '../model/Repository';

@component({ tagName: 'repository-page' })

@observer

export class RepositoryPage extends HTMLElement {

    connectedCallback() {

        repositoryStore.getList();

    }

    disconnectedCallback() {

        repositoryStore.clear();

    }

    render() {

        const { currentPage } = repositoryStore;

        return (

            


                {currentPage.map(({ full_name, html_url }) => (

                    

                        

                            {full_name}

                        

                    

                ))}

            

        );

    }

}

```

### Preload List

#### `model/PreloadRepository.ts`

```typescript

import { buildURLData } from 'web-utility';

import { Buffer } from 'mobx-restful';

import { client } from './client';

import { Repository, RepositoryModel } from './Repository';

export class PreloadRepositoryModel extends Buffer(

    RepositoryModel

) {

    client = client;

    baseURI = 'orgs/idea2app/repos';

    loadPage = RepositoryModel.prototype.loadPage;

}

export default new PreloadRepositoryModel();

```

### Multiple Source List

#### `model/MultipleRepository.ts`

```typescript

import { buildURLData, mergeStream } from 'web-utility';

import { Stream } from 'mobx-restful';

import { components } from '@octokit/openapi-types';

import { client } from './client';

import { Repository, RepositoryModel } from './Repository';

export type User = components['schemas']['public-user'];

export class MultipleRepository extends Stream(RepositoryModel) {

    declare baseURI: string;

    client = client;

    async *getOrgRepos() {

        const {

            body: { public_repos }

        } = await this.client.get('orgs/idea2app');

        this.totalCount = public_repos;

        for (let i = 1; ; i++) {

            const { body } = await this.client.get(

                'orgs/idea2app/repos?page=' + i

            );

            if (!body[0]) break;

            yield* body;

        }

    }

    async *getUserRepos() {

        const {

            body: { public_repos }

        } = await this.client.get('users/TechQuery');

        this.totalCount = public_repos;

        for (let i = 1; ; i++) {

            const { body } = await this.client.get(

                'users/TechQuery/repos?page=' + i

            );

            if (!body[0]) break;

            yield* body;

        }

    }

    openStream() {

        return mergeStream(

            this.getOrgRepos.bind(this),

            this.getUserRepos.bind(this)

        );

    }

}

export default new MultipleRepository();

```

### File Downloader

This module has been moved to [MobX-downloader][12] since MobX-RESTful v2.

## Wrapper

1. [Strapi v4](https://github.com/idea2app/MobX-RESTful/blob/main/wrapper/Strapi)

2. [GitHub](https://github.com/idea2app/MobX-GitHub)

3. [Lark/FeiShu](https://github.com/idea2app/MobX-Lark)

## Component

1. [Table, List & Form suite](https://github.com/idea2app/MobX-RESTful-table)

## Scaffold

1.  Client-side Rendering (React): https://github.com/idea2app/Next-Bootstrap-ts

2.  Server-side Rendering (React): https://github.com/idea2app/React-MobX-Bootstrap-ts

3.  Cross-end App (React): https://github.com/idea2app/Taro-Vant-MobX-ts

## Limitation

-   [ ] [`abstract` hint of Mixin is missing][11]

[1]: https://mobx.js.org/

[2]: https://github.com/tc39/proposal-decorators

[3]: https://en.wikipedia.org/wiki/Representational_state_transfer

[4]: https://libraries.io/npm/mobx-restful

[5]: https://github.com/idea2app/MobX-RESTful/actions/workflows/main.yml

[6]: https://nodei.co/npm/mobx-restful/

[7]: https://yarnpkg.com/

[8]: https://pnpm.io/

[9]: https://joyeecheung.github.io/blog/2024/03/18/require-esm-in-node-js/

[10]: https://github.com/EasyWebApp/WebCell

[11]: https://github.com/microsoft/TypeScript/issues/39752#issuecomment-1239810720

[12]: https://github.com/idea2app/MobX-downloader