[fix] Mixin Inherition

Author: TechQuery

ReadMe.md

@@ -29,17 +29,20 @@ export const client = new HTTPClient({
 
 ```typescript
 import { buildURLData } from 'web-utility';
-import { ListModel } from 'mobx-restful';
+import { NewData, ListModel } from 'mobx-restful';
 
 import { client } from './client';
 
 export type Repository = Record<'full_name' | 'html_url', string>;
 
-export class RepositoryModel extends ListModel<Repository> {
+export class RepositoryModel<
+    D extends Repository = Repository,
+    F extends NewData<D> = NewData<D>
+> extends ListModel<D, F> {
     client = client;
     baseURI = 'orgs/idea2app/repos';
 
-    protected async loadPage(page: number, per_page: number) {
+    async loadPage(page: number, per_page: number) {
         const { body } = await this.client.get<Repository[]>(
             `${this.baseURI}?${buildURLData({ page, per_page })}`
         );
@@ -92,85 +95,57 @@ export class RepositoryPage extends WebCell() {
 
 ### Preload List
 
-#### `model/Repository.ts`
+#### `model/PreloadRepository.ts`
 
-```diff
+```typescript
 import { buildURLData } from 'web-utility';
--import { ListModel } from 'mobx-restful';
-+import { BufferListModel } from 'mobx-restful';
+import { BufferListModel } from 'mobx-restful';
 
-import { client } from './client';
+import { RepositoryModel } from './Repository';
 
-export type Repository = Record<'full_name' | 'html_url', string>;
-
--export class RepositoryModel extends ListModel<Repository> {
-+export class RepositoryModel extends BufferListModel<Repository>() {
-    client = client;
-    baseURI = 'orgs/idea2app/repos';
-
-    protected async loadPage(page: number, per_page: number) {
-        const { body } = await this.client.get<Repository[]>(
-            `${this.baseURI}?${buildURLData({ page, per_page })}`
-        );
-        return { pageData: body };
-    }
-}
+export class PreloadRepositoryModel extends BufferListModel(RepositoryModel) {}
 
-export default new RepositoryModel();
+export default new PreloadRepositoryModel();
 ```
 
 ### Multiple Source List
 
-#### `model/Repository.ts`
-
-```diff
--import { buildURLData } from 'web-utility';
-+import { buildURLData, mergeStream } from 'web-utility';
--import { ListModel } from 'mobx-restful';
-+import { StreamListModel } from 'mobx-restful';
+#### `model/MultipleRepository.ts`
 
-import { client } from './client';
-
-export type Repository = Record<'full_name' | 'html_url', string>;
-
--export class RepositoryModel extends ListModel<Repository> {
-+export class RepositoryModel extends StreamListModel<Repository>() {
-    client = client;
--    baseURI = 'orgs/idea2app/repos';
-
--    protected async loadPage(page: number, per_page: number) {
--        const { body } = await this.client.get<Repository[]>(
--            `${this.baseURI}?${buildURLData({ page, per_page })}`
--        );
--        return { pageData: body };
--    }
-+    protected openStream() {
-+        return mergeStream(
-+            async function* () {
-+                for (let i = 1; ; i++) {
-+                    const { body } = await client.get<Repository[]>(
-+                        'orgs/idea2app/repos?page=' + i
-+                    );
-+                    if (!body[0]) break;
-+
-+                    yield* body;
-+                }
-+            },
-+            async function* () {
-+                for (let i = 1; ; i++) {
-+                    const { body } = await client.get<Repository[]>(
-+                        'users/TechQuery/repos?page=' + i
-+                    );
-+                    if (!body[0]) break;
-+
-+                    yield* body;
-+                }
-+            }
-+        );
-+    }
+```typescript
+import { buildURLData, mergeStream } from 'web-utility';
+import { StreamListModel } from 'mobx-restful';
+
+import { Repository, RepositoryModel } from './Repository';
+
+export class MultipleRepository extends StreamListModel(RepositoryModel) {
+    openStream() {
+        return mergeStream(
+            async function* () {
+                for (let i = 1; ; i++) {
+                    const { body } = await client.get<Repository[]>(
+                        'orgs/idea2app/repos?page=' + i
+                    );
+                    if (!body[0]) break;
+
+                    yield* body;
+                }
+            },
+            async function* () {
+                for (let i = 1; ; i++) {
+                    const { body } = await client.get<Repository[]>(
+                        'users/TechQuery/repos?page=' + i
+                    );
+                    if (!body[0]) break;
+
+                    yield* body;
+                }
+            }
+        );
+    }
 }
 
-export default new RepositoryModel();
+export default new MultipleRepository();
 ```
 
 ## Scaffold

package.json

@@ -1,6 +1,6 @@
 {
     "name": "mobx-restful",
-    "version": "0.6.0-rc.0",
+    "version": "0.6.0-rc.1",
     "license": "LGPL-3.0",
     "author": "shiy2008@gmail.com",
     "description": "MobX SDK for RESTful API",
@@ -27,7 +27,7 @@
     "module": "dist/index.esm.js",
     "main": "dist/index.js",
     "dependencies": {
-        "@swc/helpers": "^0.4.6",
+        "@swc/helpers": "^0.4.7",
         "class-validator": "^0.13.2",
         "koajax": "^0.8.1",
         "reflect-metadata": "^0.1.13",
@@ -79,7 +79,7 @@
     "scripts": {
         "prepare": "husky install",
         "test": "lint-staged && jest",
-        "build": "rm -rf dist/ docs/  &&  typedoc source/  &&  parcel build",
+        "build": "rm -rf dist/ docs/  &&  parcel build",
         "start": "typedoc source/  &&  open-cli docs/index.html",
         "prepublishOnly": "npm test  &&  npm run build"
     }

pnpm-lock.yaml

@@ -44,6 +44,7 @@ export abstract class BaseListModel<D extends DataObject> extends BaseModel {
         return store;
     }
 
+    @action
     clear() {
         this.currentOne = {} as D;
         this.validity = {};

source/Base.ts

@@ -1,7 +1,7 @@
-import { Constructor, splitArray } from 'web-utility';
+import { splitArray } from 'web-utility';
 import { observable, computed, action, reaction } from 'mobx';
 
-import { DataObject, NewData, toggle } from './utility';
+import { AbstractClass, DataObject, NewData, toggle } from './utility';
 import { BaseListModel } from './Base';
 
 export interface PageData<D extends DataObject> {
@@ -73,17 +73,13 @@ export abstract class ListModel<
         return this;
     }
 
-    protected abstract loadPage(
+    abstract loadPage(
         pageIndex: number,
         pageSize: number,
         filter: F
     ): Promise<PageData<D>>;
 
-    protected async loadNewPage(
-        pageIndex: number,
-        pageSize: number,
-        filter: F
-    ) {
+    async loadNewPage(pageIndex: number, pageSize: number, filter: F) {
         const { pageData, totalCount } = await this.loadPage(
             pageIndex,
             pageSize,
@@ -101,7 +97,7 @@ export abstract class ListModel<
         return { pageData, totalCount };
     }
 
-    protected flushPage(pageIndex: number, pageSize: number, pageData: D[]) {
+    flushPage(pageIndex: number, pageSize: number, pageData: D[]) {
         this.turnTo(pageIndex, pageSize);
 
         this.noMore = pageData.length < pageSize;
@@ -127,27 +123,18 @@ export abstract class ListModel<
     }
 }
 
-/**
- * Only for Type Hint of {@link BufferListModel} mixin
- *
- * @deprecated
- */
-export abstract class BufferList<
-    D extends DataObject,
-    F extends NewData<D> = NewData<D>
-> extends ListModel<D, F> {
-    protected pendingList: ReturnType<ListModel<D, F>['loadPage']>[] = [];
-}
-
 export function BufferListModel<
     D extends DataObject,
-    F extends NewData<D> = NewData<D>
->(): abstract new () => BufferList<D, F> {
-    abstract class BufferListMixin extends BufferList<D, F> {
+    F extends NewData<D> = NewData<D>,
+    M extends AbstractClass<ListModel<D, F>> = AbstractClass<ListModel<D, F>>
+>(Super: M) {
+    abstract class BufferListMixin extends Super {
+        pendingList: ReturnType<ListModel<D, F>['loadPage']>[] = [];
+
         clear() {
             this.pendingList = [];
 
-            return this;
+            return super.clear();
         }
 
         @toggle('downloading')
@@ -187,41 +174,24 @@ export function BufferListModel<
     return BufferListMixin;
 }
 
-/**
- * Only for Type Hint of {@link StreamListModel} mixin
- *
- * @deprecated
- */
-export abstract class StreamList<
+export function StreamListModel<
     D extends DataObject,
-    F extends NewData<D> = NewData<D>
-> extends ListModel<D, F> {
-    baseURI = '';
+    F extends NewData<D> = NewData<D>,
+    M extends AbstractClass<ListModel<D, F>> = AbstractClass<ListModel<D, F>>
+>(Super: M) {
+    abstract class StreamListMixin extends Super {
+        baseURI = '';
 
-    protected stream?: AsyncGenerator<D, void, D>;
-    protected abstract openStream(filter: F): AsyncGenerator<D, void, D>;
+        stream?: AsyncGenerator<D, void, D>;
+        abstract openStream(filter: F): AsyncGenerator<D, void, D>;
 
-    protected async loadPage(pageIndex: number, pageSize: number, filter: F) {
-        return { pageData: [] };
-    }
-}
-
-export function StreamListModel<
-    D extends DataObject,
-    F extends NewData<D> = NewData<D>
->(): abstract new () => StreamList<D, F> {
-    abstract class StreamListMixin extends StreamList<D, F> {
         clear() {
             this.stream = undefined;
 
             return super.clear();
         }
 
-        protected async loadPage(
-            pageIndex: number,
-            pageSize: number,
-            filter: F
-        ) {
+        async loadPage(pageIndex: number, pageSize: number, filter: F) {
             const { allItems } = this,
                 newList: D[] = [];
             const newCount = pageIndex * pageSize - allItems.length;

source/List.ts

@@ -1,6 +1,8 @@
 import { TypeKeys } from 'web-utility';
 import { HTTPClient, Context } from 'koajax';
 
+export type AbstractClass<I> = abstract new (...data: any[]) => I;
+
 export type IDType = number | string;
 
 export type DataObject = Record<string, any>;