{"id":20525989,"url":"https://github.com/codeyellowbv/mobx-spine-ts","last_synced_at":"2026-04-19T15:34:54.016Z","repository":{"id":41328650,"uuid":"372459469","full_name":"CodeYellowBV/mobx-spine-ts","owner":"CodeYellowBV","description":"A WIP typescript rewrite of mobx-spine","archived":false,"fork":false,"pushed_at":"2022-06-30T16:06:50.000Z","size":327,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":5,"default_branch":"master","last_synced_at":"2025-03-06T01:45:42.136Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/CodeYellowBV.png","metadata":{"files":{"readme":"readme.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2021-05-31T09:56:26.000Z","updated_at":"2021-11-12T11:29:55.000Z","dependencies_parsed_at":"2022-09-17T23:12:51.537Z","dependency_job_id":null,"html_url":"https://github.com/CodeYellowBV/mobx-spine-ts","commit_stats":null,"previous_names":[],"tags_count":29,"template":false,"template_full_name":null,"purl":"pkg:github/CodeYellowBV/mobx-spine-ts","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/CodeYellowBV%2Fmobx-spine-ts","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/CodeYellowBV%2Fmobx-spine-ts/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/CodeYellowBV%2Fmobx-spine-ts/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/CodeYellowBV%2Fmobx-spine-ts/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/CodeYellowBV","download_url":"https://codeload.github.com/CodeYellowBV/mobx-spine-ts/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/CodeYellowBV%2Fmobx-spine-ts/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":32012322,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-04-18T20:23:30.271Z","status":"online","status_checked_at":"2026-04-19T02:00:07.110Z","response_time":55,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-11-15T23:11:44.516Z","updated_at":"2026-04-19T15:34:53.970Z","avatar_url":"https://github.com/CodeYellowBV.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Setup\nFor the setup of Mobx-spine-ts a very basic typescript \u0026 jest is used. They are linked together using 'ts-jest' For documentation see:\n\n- [TypeScript](https://www.typescriptlang.org/)\n- [Jest](https://jestjs.io/docs/getting-started)\n- [TS-jest](https://kulshekhar.github.io/ts-jest/)\n\n## Building\nMobx-spine-ts can be build using `yarn build`. This creates a 'dist' directory, with the compiled javascript files, and the typedefinition file.\n\nUnder the hood `yarn build` simply calls `tsx -b`.\n\n## Testing\nTest can be run by using `yarn test`. \n\nUnder the hood `yarn test` calls `jest`. For additional help, you can run `yarn test --help`.\n\n# BinderApi\n\n## Settings\n\n### Overwriting base url\nThe BinderApi has a baseUrl variable, which can be overwritten, and is prepended to all request:\n\n```javascript\n    const api = new BinderApi();\n    api.baseUrl = '/api/foo/';\n```\n\nIf you now do\n\n```javascript\napi.get('bar/')\n```\nit actually queries `/api/foo/bar/`\n\n\n### Add custom handling of request errors\nCustom error handling can be added by overwriting the `onRequestError` method:\n\n```javascript\nconst api = new BinderApi();\napi.onRequestError = reason =\u003e handleReason(reason);\n```\n\nBypassing the custom error handler can in turn be done by setting `skipRequestError` in the request option\n\n\n\n\n## Requests\n\n### Request headers\nHeaders can be set in the request options under `headers`. E.g. the following sets a custome content-type header:\n\n```javascript\napi.get('/api/asdf/', null, {\n        headers: { 'Content-Type': 'multipart/form-data' },\n    });\n```\n\n#### Default headers\nDefault headers can be set on the BinderApi object by adding them to the `BinderApi.defaultHeaders` dictionary. E.g.\n\n```javascript\napi = new BinderApi();\napi.defaultHeaders['X-Foo'] = 'bar';\n```\n\n### GET request\nYou can do get request using: \n\n```get(url: string, data?: RequestData, options ?: RequestOptions):  Promise\u003cobject\u003e```\n\n### POST request\nYou can do post request using: \n\n```post(url: string, data?: RequestData, options ?: RequestOptions):  Promise\u003cobject\u003e```\n\n\n### PUT request\nYou can do put request using: \n\n```put(url: string, data?: RequestData, options ?: RequestOptions):  Promise\u003cobject\u003e```\n\n### PATCH request\nYou can do patch request using: \n\n```patch(url: string, data?: RequestData, options ?: RequestOptions):  Promise\u003cobject\u003e```\n\n### DELETE request\nYou can do delete request using: \n\n```delete(url: string, data?: RequestData, options ?: RequestOptions):  Promise\u003cobject\u003e```\n\n\n## RequestOptions\nThe following request options can be set\n\n| ** Option ** | ** Response |\n| skipFormatter | Boolean, when set to true, the get(), post() etc. return the raw AxiosResponse. Otherwise, parses the response, and only return the data returned from the server |\n| requestParams | Dictionary containing the query params attached to the request. Note that if you do a get request, with data, the data is taken rather than the requestParams |\n| skipRequestError | When set to true, does not the set error request error handler. INstead propagate the error |\n\n# @tsPatch hack for models\nClasses extending the mobx-spine model need to be patched with @tsPatch as well. This is needed for compatability reasons between the old mobx-spine babel compiler, and the new compiler.\n\nThe problem is with this pseudoCode\n\n```javascript\nclass Model {\n    constructor(data) {\n        // Sets the data of the model\n        this.parse(data);\n    }\n}\n\nclass Animal {\n    @observable id = 1;\n}\n\nconst animal = new Animal({id: 2})\n    \nconsole.log(animal.id)\n```\n\nIn the babel setup, the Animal class gets compiled to\n```javascript\nclass Animal {\n    constructor(data) {\n        this.id = 1;\n        super(data);\n    }\n}\n```\nThis will results in the `animal.id` being 2, as is expected. In typescript however, this same code gets compiled to:\n\n```javascript\nclass Animal {\n    constructor(data) {\n        super(data);\n        this.id = 1;\n    }\n}\n```\nThis will result in the `animal.id` being 1. This is not consistent. As this workflow is an integral part of how `mobx-spine` works, the only option was to patch this behaviour. Therefore a @tsPatch annotation was added, which calls an `afterConstructor` after calling the constructor. This means that previous piece of code now needs to be written as:\n\n\n```javascript\nclass Model {\n    constructor(data) {\n\n    }\n    \n    afterConstructor(data) {\n        // Sets the data of the model\n        this.parse(data);\n    }\n}\n\n@tsPatch\nclass Animal {\n    @observable id = 1;\n}\n\nconst animal = new Animal({id: 2})\n    \nconsole.log(animal.id)\n```\n\nThe animal class now is compiled as:\n\n```javascript\n\nclass Animal {\n    constructor(data) {\n        super(data);\n        this.id = 1;\n        \n        // This sets this.id = s\n        this.afterConstrcutor(data);\n    }\n}\n\n```\n\n# Differences between mobx-spine and mobx-spine-ts\n- Models need to be annotated @tsPatch\n- Model will generated a warning when you are trying to give it a key that doesn't exist, e.g.`new Animal({thisDoesNotExist: 1})`\n- Base model has a relations method, returning no relations which can be overridden.\n- On the model, in the private method `__scopeBackendResponse` mapping has been renamed to `relMapping` to be consistent with the `fromBackend` method.\n- The unused `primaryKey` has been removed.\n\n# Wishes\nWhile refactoring, I encountered some stuff I didn't appreciate. We should later decide which of these items is worth refactoring:\n- Model.pickFields is allowed to be undefined, but Model.fileFields and omitFields are not (but they are allowed to be an empty array).\n- Model.urlRoot is sometimes a function (in Model itself) and sometimes a property (for instance in tests/Animal). We should probably unify this...\n- Currently, the relations of Models are returned by a method. This causes linting errors when accessing them because they are technically not properties (even though some JavaScript magic ensures that they will exist at runtime). It would probably be better if they were real properties instead.\n- Our JavaScript mobx spine implementation uses some static properties in Model (like `backendResourceName`) and expects subclasses to override this. However, TypeScript doesn't seem to like 'static inheritance'. The JavaScript code would use this.constructor.backendResourceName, but the TypeScript code needs the uglier `this.constructor['backendResourceName']`. We should find a better solution and perhaps ditch all static stuff.\n- The `Store` class has both an `each` and a `forEach` method, but they do exactly the same thing. I kept both to avoid breaking changes, but I would like to delete one of them.","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcodeyellowbv%2Fmobx-spine-ts","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fcodeyellowbv%2Fmobx-spine-ts","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcodeyellowbv%2Fmobx-spine-ts/lists"}