chore: upgrade to mobx@6 (#1412)

package.json

@@ -103,7 +103,7 @@
     "jest": "^26.1.0",
     "license-checker": "^25.0.1",
     "lodash": "^4.17.19",
-    "mobx": "^5.15.4",
+    "mobx": "^6.0.1",
     "prettier": "^2.0.5",
     "raf": "^3.4.1",
     "react": "^16.13.1",
@@ -129,7 +129,7 @@
   },
   "peerDependencies": {
     "core-js": "^3.1.4",
-    "mobx": "^4.2.0 || ^5.0.0",
+    "mobx": "^6.0.1",
     "react": "^16.8.4",
     "react-dom": "^16.8.4",
     "styled-components": "^4.1.1 || ^5.1.1"

src/polyfills.ts

@@ -2,6 +2,8 @@ import 'core-js/es/promise';
 
 import 'core-js/es/array/find';
 import 'core-js/es/object/assign';
+import 'core-js/es/object/entries';
+import 'core-js/es/object/is';
 import 'core-js/es/string/ends-with';
 import 'core-js/es/string/starts-with';
 

src/services/MenuStore.ts

@@ -1,4 +1,4 @@
-import { action, observable } from 'mobx';
+import { action, observable, makeObservable } from 'mobx';
 import { querySelector } from '../utils/dom';
 import { SpecStore } from './models';
 
@@ -76,6 +76,8 @@ export class MenuStore {
    * @param scroll scroll service instance used by this menu
    */
   constructor(spec: SpecStore, public scroll: ScrollService, public history: HistoryService) {
+    makeObservable(this);
+
     this.items = spec.contentItems;
 
     this.flatItems = flattenByProp(this.items || [], 'items');

src/services/models/Callback.ts

@@ -1,4 +1,4 @@
-import { action, observable } from 'mobx';
+import { action, observable, makeObservable } from 'mobx';
 
 import { OpenAPICallback, Referenced } from '../../types';
 import { isOperationName, JsonPointer } from '../../utils';
@@ -19,6 +19,8 @@ export class CallbackModel {
     pointer: string,
     options: RedocNormalizedOptions,
   ) {
+    makeObservable(this);
+
     this.name = name;
     const paths = parser.deref<OpenAPICallback>(infoOrRef);
     parser.exitRef(infoOrRef);

src/services/models/Field.ts

@@ -1,4 +1,4 @@
-import { action, observable } from 'mobx';
+import { action, observable, makeObservable } from 'mobx';
 
 import {
   OpenAPIParameter,
@@ -61,6 +61,8 @@ export class FieldModel {
     pointer: string,
     options: RedocNormalizedOptions,
   ) {
+    makeObservable(this);
+
     const info = parser.deref<OpenAPIParameter>(infoOrRef);
     this.kind = infoOrRef.kind || 'field';
     this.name = infoOrRef.name || info.name;

src/services/models/Group.model.ts

@@ -1,4 +1,4 @@
-import { action, observable } from 'mobx';
+import { action, observable, makeObservable } from 'mobx';
 
 import { OpenAPIExternalDocumentation, OpenAPITag } from '../../types';
 import { safeSlugify } from '../../utils';
@@ -35,6 +35,8 @@ export class GroupModel implements IMenuItem {
     tagOrGroup: OpenAPITag | MarkdownHeading,
     parent?: GroupModel,
   ) {
+    makeObservable(this);
+
     // markdown headings already have ids calculated as they are needed for heading anchors
     this.id = (tagOrGroup as MarkdownHeading).id || type + '/' + safeSlugify(tagOrGroup.name);
     this.type = type;

src/services/models/MediaContent.ts

@@ -1,4 +1,4 @@
-import { action, computed, observable } from 'mobx';
+import { action, computed, observable, makeObservable } from 'mobx';
 
 import { OpenAPIMediaType } from '../../types';
 import { MediaTypeModel } from './MediaType';
@@ -26,6 +26,8 @@ export class MediaContentModel {
     public isRequestType: boolean,
     options: RedocNormalizedOptions,
   ) {
+    makeObservable(this);
+
     if (options.unstable_ignoreMimeParameters) {
       info = mergeSimilarMediaTypes(info);
     }

src/services/models/Operation.ts

@@ -1,4 +1,4 @@
-import { action, observable } from 'mobx';
+import { action, observable, makeObservable } from 'mobx';
 
 import { IMenuItem } from '../MenuStore';
 import { GroupModel } from './Group.model';
@@ -84,6 +84,8 @@ export class OperationModel implements IMenuItem {
     private options: RedocNormalizedOptions,
     isCallback: boolean = false,
   ) {
+    makeObservable(this);
+
     this.pointer = operationSpec.pointer;
 
     this.description = operationSpec.description;

src/services/models/Response.ts

@@ -1,4 +1,4 @@
-import { action, observable } from 'mobx';
+import { action, observable, makeObservable } from 'mobx';
 
 import { OpenAPIResponse, Referenced } from '../../types';
 
@@ -26,6 +26,8 @@ export class ResponseModel {
     infoOrRef: Referenced<OpenAPIResponse>,
     options: RedocNormalizedOptions,
   ) {
+    makeObservable(this);
+
     this.expanded = options.expandResponses === 'all' || options.expandResponses[code];
 
     const info = parser.deref(infoOrRef);

src/services/models/Schema.ts

@@ -1,4 +1,4 @@
-import { action, observable } from 'mobx';
+import { action, observable, makeObservable } from 'mobx';
 
 import { OpenAPIExternalDocumentation, OpenAPISchema, Referenced } from '../../types';
 
@@ -72,6 +72,8 @@ export class SchemaModel {
     private options: RedocNormalizedOptions,
     isChild: boolean = false,
   ) {
+    makeObservable(this);
+
     this.pointer = schemaOrRef.$ref || pointer || '';
     this.rawSchema = parser.deref(schemaOrRef);
     this.schema = parser.mergeAllOf(this.rawSchema, this.pointer, isChild);

src/standalone.tsx

@@ -1,11 +1,16 @@
 import * as React from 'react';
 import { hydrate as hydrateComponent, render } from 'react-dom';
+import { configure } from "mobx"
 
 import { Redoc, RedocStandalone } from './components/';
 import { AppStore, StoreState } from './services/AppStore';
 import { debugTime, debugTimeEnd } from './utils/debug';
 import { querySelector } from './utils/dom';
 
+configure({
+  useProxies: 'ifavailable'
+})
+
 export { Redoc, AppStore } from '.';
 
 export const version = __REDOC_VERSION__;