ReadMe.md

MobX-GitHub

MobX SDK for GitHub RESTful API, which is based on MobX-RESTful.

Model

1. User
2. Organization
3. Repository
   1. Contributor
   2. Language
   3. Issue
4. Content - Git file tree traversal
   1. Directory traversal
   2. Recursive tree traversal
   3. File search by extension
   4. File search by pattern
5. Tree
6. Issue
7. Issue Comment
8. Pull Request
9. Discussion
10. Contributor
11. Check Run
12. Workflow Run

Usage

Installation

npm i mobx-github

tsconfig.json

{
    "compilerOptions": {
        "target": "ES6",
        "moduleResolution": "Node",
        "useDefineForClassFields": true,
        "experimentalDecorators": false,
        "jsx": "react-jsx"
    }
}

model/GitHub.ts

import { githubClient, UserModel } from 'mobx-github';

// Any possible way to pass GitHub access token
// from local files or back-end servers to Web pages
const token = new URLSearchParams(location.search).get('token');

githubClient.use(({ request }, next) => {
    if (token)
        request.headers = {
            authorization: `Bearer ${token}`,
            ...request.headers
        };
    return next();
});

export const userStore = new UserModel();

page/GitHub.tsx

Use WebCell as an Example

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

import { userStore } from '../model/GitHub';

@component({ tagName: 'github-page' })
@observer
export class GitHubPage extends HTMLElement {
    connectedCallback() {
        userStore.getSession();
    }

    disconnectedCallback() {
        userStore.clear();
    }

    render() {
        const { namespaces } = userStore;

        return (
            <select>
                {namespaces.map(({ login }) => (
                    <option key={login}>{login}</option>
                ))}
            </select>
        );
    }
}

User cases

1. https://github.com/FreeCodeCamp-Chengdu/FreeCodeCamp-Chengdu.github.io
2. https://github.com/Open-Source-Bazaar/Open-Source-Bazaar.github.io