From ff5bb21997d132b32aa05b271e5fd5e3c9574f83 Mon Sep 17 00:00:00 2001 From: Christopher Loverich Date: Sat, 27 Jul 2019 13:31:51 -0500 Subject: [PATCH 01/28] docs: move docs to master --- docs/LINKS.md | 33 + docs/README.md | 480 ++++++++++++ docs/SUMMARY.md | 49 ++ docs/best/actions.md | 206 +++++ docs/best/decorators.md | 186 +++++ docs/best/devtools.md | 38 + docs/best/pitfalls.md | 287 +++++++ docs/best/react-performance.md | 146 ++++ docs/best/react.md | 464 +++++++++++ docs/best/stateless-HMR.md | 75 ++ docs/best/store.md | 312 ++++++++ docs/best/syntax.md | 5 + docs/best/trace.md | 56 ++ docs/blokt.jpg | Bin 0 -> 13196 bytes docs/book.json | 21 + docs/codefirst.png | Bin 0 -> 4439 bytes docs/donating.md | 4 + docs/faire.jpg | Bin 0 -> 5174 bytes docs/faq/faq.md | 58 ++ docs/images/action-state-view.png | Bin 0 -> 9981 bytes docs/images/book.jpg | Bin 0 -> 12954 bytes docs/images/concept.png | Bin 0 -> 27492 bytes docs/images/devtools-noDisplayName.png | Bin 0 -> 61920 bytes docs/images/devtools-withDisplayName.png | Bin 0 -> 51396 bytes docs/images/devtools.gif | Bin 0 -> 303470 bytes docs/images/favicon.png | Bin 0 -> 526 bytes docs/images/mobservable.png | Bin 0 -> 3902 bytes docs/images/mobservable.svg | 118 +++ docs/images/observed-refs.png | Bin 0 -> 47432 bytes docs/images/overview.svg | 405 ++++++++++ docs/images/overview_bw.svg | 406 ++++++++++ docs/images/trace-tips2.png | Bin 0 -> 265124 bytes docs/images/trace.gif | Bin 0 -> 1037711 bytes docs/intro/concepts.md | 93 +++ docs/intro/overview.md | 90 +++ .../gitbook-plugin-codefund/index.js | 15 + .../gitbook-plugin-codefund/package.json | 19 + docs/refguide/action.md | 75 ++ docs/refguide/api.md | 728 ++++++++++++++++++ docs/refguide/array.md | 66 ++ docs/refguide/autorun.md | 96 +++ docs/refguide/boxed.md | 49 ++ docs/refguide/computed-decorator.md | 226 ++++++ docs/refguide/create-transformer.md | 186 +++++ docs/refguide/expr.md | 25 + docs/refguide/extend-observable.md | 44 ++ docs/refguide/extending.md | 89 +++ docs/refguide/map.md | 40 + docs/refguide/modifiers.md | 124 +++ docs/refguide/object-api.md | 35 + docs/refguide/object.md | 51 ++ docs/refguide/observable-decorator.md | 42 + docs/refguide/observable.md | 61 ++ docs/refguide/observe.md | 130 ++++ docs/refguide/observer-component.md | 175 +++++ docs/refguide/reaction.md | 110 +++ docs/refguide/spy.md | 44 ++ docs/refguide/tojson.md | 30 + docs/refguide/when.md | 53 ++ docs/styles/website.css | 7 + 60 files changed, 6052 insertions(+) create mode 100644 docs/LINKS.md create mode 100644 docs/README.md create mode 100644 docs/SUMMARY.md create mode 100644 docs/best/actions.md create mode 100644 docs/best/decorators.md create mode 100644 docs/best/devtools.md create mode 100644 docs/best/pitfalls.md create mode 100644 docs/best/react-performance.md create mode 100644 docs/best/react.md create mode 100644 docs/best/stateless-HMR.md create mode 100644 docs/best/store.md create mode 100644 docs/best/syntax.md create mode 100644 docs/best/trace.md create mode 100644 docs/blokt.jpg create mode 100644 docs/book.json create mode 100644 docs/codefirst.png create mode 100644 docs/donating.md create mode 100644 docs/faire.jpg create mode 100644 docs/faq/faq.md create mode 100644 docs/images/action-state-view.png create mode 100644 docs/images/book.jpg create mode 100644 docs/images/concept.png create mode 100644 docs/images/devtools-noDisplayName.png create mode 100644 docs/images/devtools-withDisplayName.png create mode 100644 docs/images/devtools.gif create mode 100644 docs/images/favicon.png create mode 100644 docs/images/mobservable.png create mode 100644 docs/images/mobservable.svg create mode 100644 docs/images/observed-refs.png create mode 100644 docs/images/overview.svg create mode 100644 docs/images/overview_bw.svg create mode 100644 docs/images/trace-tips2.png create mode 100644 docs/images/trace.gif create mode 100644 docs/intro/concepts.md create mode 100644 docs/intro/overview.md create mode 100644 docs/node_modules/gitbook-plugin-codefund/index.js create mode 100644 docs/node_modules/gitbook-plugin-codefund/package.json create mode 100644 docs/refguide/action.md create mode 100644 docs/refguide/api.md create mode 100644 docs/refguide/array.md create mode 100644 docs/refguide/autorun.md create mode 100644 docs/refguide/boxed.md create mode 100644 docs/refguide/computed-decorator.md create mode 100644 docs/refguide/create-transformer.md create mode 100644 docs/refguide/expr.md create mode 100644 docs/refguide/extend-observable.md create mode 100644 docs/refguide/extending.md create mode 100644 docs/refguide/map.md create mode 100644 docs/refguide/modifiers.md create mode 100644 docs/refguide/object-api.md create mode 100644 docs/refguide/object.md create mode 100644 docs/refguide/observable-decorator.md create mode 100644 docs/refguide/observable.md create mode 100644 docs/refguide/observe.md create mode 100644 docs/refguide/observer-component.md create mode 100644 docs/refguide/reaction.md create mode 100644 docs/refguide/spy.md create mode 100644 docs/refguide/tojson.md create mode 100644 docs/refguide/when.md create mode 100644 docs/styles/website.css diff --git a/docs/LINKS.md b/docs/LINKS.md new file mode 100644 index 000000000..89e4677e4 --- /dev/null +++ b/docs/LINKS.md @@ -0,0 +1,33 @@ +
+ +# Resources + +* [Ten minute interactive introduction to MobX and React](https://mobxjs.github.io/mobx/getting-started.html#demo) +* How MobX works: [In depth explanation of MobX](https://medium.com/@mweststrate/becoming-fully-reactive-an-in-depth-explanation-of-mobservable-55995262a254#.wnlo6bw8y) +* Clone the boilerplate repository containing the above example from: https://github.com/mweststrate/react-mobservable-boilerplate. +* Or fork this [JSFiddle](https://jsfiddle.net/mweststrate/wgbe4guu/). + +## Related projects + +* [mobx-connect](https://github.com/nightwolfz/mobx-connect) MobX @connect decorator for react components. Similar to redux's @connect. +* [rfx-stack](https://github.com/foxhound87/rfx-stack) RFX Stack - Universal App featuring: React + Feathers + MobX +* [mobx-reactor](https://github.com/amsb/mobx-reactor) Connect MobX data stores to functional stateless React components with async actions and unidirectional data flow. +* [mobx-model](https://github.com/ikido/mobx-model) Simplify mobx data stores that mimic backend models +* [rx-mobx](https://github.com/chicoxyzzy/rx-mobx) Convert Mobx observables to RxJS and vice versa + +## More examples + +A nice list is WIP, but see this [github issue](https://github.com/mobxjs/mobx/issues/104) for a list of example projects, including routing, authorization, server side rendering etc. + +* [TodoMVC using MobX and React](https://github.com/mweststrate/mobx-todomvc) +* The [ports of the _Notes_ and _Kanban_ examples](https://github.com/survivejs/mobservable-demo) from the book "SurviveJS - Webpack and React" to mobservable. +* A simple webshop using [React + mobx](https://jsfiddle.net/mweststrate/46vL0phw) or [JQuery + mobx](http://jsfiddle.net/mweststrate/vxn7qgdw). +* [Simple timer](https://jsfiddle.net/mweststrate/wgbe4guu/) application in JSFiddle. +* [Simple ES5 MobX examples](https://github.com/mattruby/mobx-examples) Bite sized MobX examples all setup to run in jsFiddle. + +## Philosophy + +* [Making React reactive: the pursuit of high performing, easily maintainable React apps](https://www.mendix.com/tech-blog/making-react-reactive-pursuit-high-performing-easily-maintainable-react-apps/) +* [SurviveJS interview on Mobservable, React and Flux](http://survivejs.com/blog/mobservable-interview/) +* [Pure rendering in the light of time and state](https://medium.com/@mweststrate/pure-rendering-in-the-light-of-time-and-state-4b537d8d40b1) +* [Official homepage](http://mobxjs.github.io/mobx/) diff --git a/docs/README.md b/docs/README.md new file mode 100644 index 000000000..97d332531 --- /dev/null +++ b/docs/README.md @@ -0,0 +1,480 @@ +logo + +# MobX + +_Simple, scalable state management_ + +[![Build Status](https://travis-ci.org/mobxjs/mobx.svg?branch=master)](https://travis-ci.org/mobxjs/mobx) +[![Coverage Status](https://coveralls.io/repos/mobxjs/mobx/badge.svg?branch=master&service=github)](https://coveralls.io/github/mobxjs/mobx?branch=master) +[![Join the chat at https://gitter.im/mobxjs/mobx](https://badges.gitter.im/Join%20Chat.svg)](https://gitter.im/mobxjs/mobx?utm_source=badge&utm_medium=badge&utm_campaign=pr-badge&utm_content=badge) +[![Discuss MobX on Hashnode](https://hashnode.github.io/badges/mobx.svg)](https://hashnode.com/n/mobx) +[![OpenCollective](https://opencollective.com/mobx/backers/badge.svg)](#backers) +[![OpenCollective](https://opencollective.com/mobx/sponsors/badge.svg)](#sponsors) +[![code style: prettier](https://img.shields.io/badge/code_style-prettier-ff69b4.svg)](https://github.com/prettier/prettier) + +
+ +MobX is proudly sponsored by Mendix, Coinbase, Facebook Open Source, Canva, Algolia, Guilded, Auction Frontier, Mantro and TalentPlot for 100\$/month or more! And beyond that by many [individual backers](#backers) and through [one time contributions](https://github.com/mobxjs/mobx/blob/master/sponsors.md). + +**🥇Gold sponsors (\$250+ pm):**
+Mendix +Auction Frontier + +**🥈Silver sponsors (\$100+ pm):**
+Facebook Open Source +Canva +Guilded +mantro GmbH +CodeFirst +Blokt + +**🥉Bronze sponsors:**
+Coinbase +Algolia +talentplot + +# Installation + +- Installation: `npm install mobx --save`. React bindings: `npm install mobx-react --save`. To enable ESNext decorators (optional), see below. +- CDN: + +* https://unpkg.com/mobx/lib/mobx.umd.js +* https://cdnjs.com/libraries/mobx + +# Browser support + +- MobX >=5 runs on any browser with [ES6 proxy support](https://kangax.github.io/compat-table/es6/#test-Proxy). It will throw an error on startup on older environments such as IE11, Node.js <6 or React Native Android on old JavaScriptCore [how-to-upgrade](https://github.com/react-community/jsc-android-buildscripts#how-to-use-it-with-my-react-native-app). +- MobX 4 runs on any ES5 browser and will be actively maintained. The MobX 4 and 5 api's are the same and semantically can achieve the same, but MobX 4 has some [limitations](#mobx-4-vs-mobx-5). + +_Tip: the main entry point of the MobX 5 package ships with ES5 code for backward compatibility with all build tools. But since MobX 5 runs only on modern browsers anyway, consider using the faster and smaller ES6 build: `lib/mobx.es6.js`. For example by setting up a webpack alias: `resolve: { alias: { mobx: __dirname + "/node_modules/mobx/lib/mobx.es6.js" }}`_ + +## Translations + +- [中文](http://cn.mobx.js.org) + +## Getting started + +- egghead.io course +- [Ten minute, interactive MobX + React tutorial](https://mobxjs.github.io/mobx/getting-started.html) +- [The MobX book](https://books.google.nl/books?id=ALFmDwAAQBAJ&pg=PP1&lpg=PP1&dq=michel+weststrate+mobx+quick+start+guide:+supercharge+the+client+state+in+your+react+apps+with+mobx&source=bl&ots=D460fxti0F&sig=ivDGTxsPNwlOjLHrpKF1nweZFl8&hl=nl&sa=X&ved=2ahUKEwiwl8XO--ncAhWPmbQKHWOYBqIQ6AEwAnoECAkQAQ#v=onepage&q=michel%20weststrate%20mobx%20quick%20start%20guide%3A%20supercharge%20the%20client%20state%20in%20your%20react%20apps%20with%20mobx&f=false) by Pavan Podila and Michel Weststrate (which despite it's name is in-depth!) +- [Official MobX 4 documentation and API overview](https://mobxjs.github.io/mobx/refguide/api.html) ([MobX 3](https://github.com/mobxjs/mobx/blob/54557dc319b04e92e31cb87427bef194ec1c549c/docs/refguide/api.md), [MobX 2](https://github.com/mobxjs/mobx/blob/7c9e7c86e0c6ead141bb0539d33143d0e1f576dd/docs/refguide/api.md)) +- Videos: + - [ReactNext 2016: Real World MobX](https://www.youtube.com/watch?v=Aws40KOx90U) - 40m [slides](https://docs.google.com/presentation/d/1DrI6Hc2xIPTLBkfNH8YczOcPXQTOaCIcDESdyVfG_bE/edit?usp=sharing) + - [Practical React with MobX](https://www.youtube.com/watch?v=XGwuM_u7UeQ). In depth introduction and explanation to MobX and React by Matt Ruby on OpenSourceNorth (ES5 only) - 42m. + - LearnCode.academy MobX tutorial [Part I: MobX + React is AWESOME (7m)](https://www.youtube.com/watch?v=_q50BXqkAfI) [Part II: Computed Values and Nested/Referenced Observables (12m.)](https://www.youtube.com/watch?v=nYvNqKrl69s) + - [Screencast: intro to MobX](https://www.youtube.com/watch?v=K8dr8BMU7-8) - 8m + - [Talk: State Management Is Easy, React Amsterdam 2016 conf](https://www.youtube.com/watch?v=ApmSsu3qnf0&feature=youtu.be) ([slides](https://speakerdeck.com/mweststrate/state-management-is-easy-introduction-to-mobx)) +- [Boilerplates and related projects](http://mobxjs.github.io/mobx/faq/boilerplates.html) +- More tutorials, blogs, videos, and other helpful resources can be found on the [MobX awesome list](https://github.com/mobxjs/awesome-mobx#awesome-mobx) + +## Introduction + +MobX is a battle tested library that makes state management simple and scalable by transparently applying functional reactive programming (TFRP). +The philosophy behind MobX is very simple: + +_Anything that can be derived from the application state, should be derived. Automatically._ + +which includes the UI, data serialization, server communication, etc. + +MobX unidirectional flow + +React and MobX together are a powerful combination. React renders the application state by providing mechanisms to translate it into a tree of renderable components. MobX provides the mechanism to store and update the application state that React then uses. + +Both React and MobX provide an optimal and unique solutions to common problems in application development. React provides mechanisms to optimally render UI by using a virtual DOM that reduces the number of costly DOM mutations. MobX provides mechanisms to optimally synchronize application state with your React components by using a reactive virtual dependency state graph that is only updated when strictly needed and is never stale. + +## Core concepts + +MobX has only a few core concepts. The following snippets can be tried online using [codesandbox example](https://codesandbox.io/s/v3v0my2370). + +### Observable state + +Egghead.io lesson 1: observable & observer + +MobX adds observable capabilities to existing data structures like objects, arrays and class instances. +This can simply be done by annotating your class properties with the [@observable](http://mobxjs.github.io/mobx/refguide/observable-decorator.html) decorator (ES.Next). + +```javascript +import { observable } from "mobx" + +class Todo { + id = Math.random() + @observable title = "" + @observable finished = false +} +``` + +Using `observable` is like turning a property of an object into a spreadsheet cell. +But unlike spreadsheets, these values can be not only primitive values, but also references, objects and arrays. + +If your environment doesn't support decorator syntax, don't worry. +You can read [here](http://mobxjs.github.io/mobx/best/decorators.html) about how to set them up. +Or you can skip them altogether, as MobX can be used fine without decorator _syntax_, by leveraging the _decorate_ utility. +Many MobX users do prefer the decorator syntax though, as it is slightly more concise. + +```javascript +import { decorate, observable } from "mobx" + +class Todo { + id = Math.random() + title = "" + finished = false +} +decorate(Todo, { + title: observable, + finished: observable +}) +``` + +### Computed values + +Egghead.io lesson 3: computed values + +With MobX you can define values that will be derived automatically when relevant data is modified. +By using the [`@computed`](http://mobxjs.github.io/mobx/refguide/computed-decorator.html) decorator or by using getter / setter functions when using `(extend)Observable` (Of course, you can use `decorate` here again as alternative to the `@` syntax). + +```javascript +class TodoList { + @observable todos = [] + @computed get unfinishedTodoCount() { + return this.todos.filter(todo => !todo.finished).length + } +} +``` + +MobX will ensure that `unfinishedTodoCount` is updated automatically when a todo is added or when one of the `finished` properties is modified. +Computations like these resemble formulas in spreadsheet programs like MS Excel. They update automatically and only when required. + +### Reactions + +Egghead.io lesson 9: custom reactions + +Reactions are similar to a computed value, but instead of producing a new value, a reaction produces a side effect for things like printing to the console, making network requests, incrementally updating the React component tree to patch the DOM, etc. +In short, reactions bridge [reactive](https://en.wikipedia.org/wiki/Reactive_programming) and [imperative](https://en.wikipedia.org/wiki/Imperative_programming) programming. + +#### React components + +Egghead.io lesson 1: observable & observer + +If you are using React, you can turn your (stateless function) components into reactive components by simply adding the [`observer`](http://mobxjs.github.io/mobx/refguide/observer-component.html) function / decorator from the `mobx-react` package onto them. + +```javascript +import React, { Component } from "react" +import ReactDOM from "react-dom" +import { observer } from "mobx-react" + +@observer +class TodoListView extends Component { + render() { + return ( +
+ + Tasks left: {this.props.todoList.unfinishedTodoCount} +
+ ) + } +} + +const TodoView = observer(({ todo }) => ( +
  • + (todo.finished = !todo.finished)} /> + {todo.title} +
    • +)) + +const store = new TodoList() +ReactDOM.render(, document.getElementById("mount")) +``` + +`observer` turns React (function) components into derivations of the data they render. +When using MobX there are no smart or dumb components. +All components render smartly but are defined in a dumb manner. MobX will simply make sure the components are always re-rendered whenever needed, but also no more than that. So the `onClick` handler in the above example will force the proper `TodoView` to render, and it will cause the `TodoListView` to render if the number of unfinished tasks has changed. +However, if you would remove the `Tasks left` line (or put it into a separate component), the `TodoListView` will no longer re-render when ticking a box. You can verify this yourself by changing the [JSFiddle](https://jsfiddle.net/mweststrate/wv3yopo0/). + +#### Custom reactions + +Custom reactions can simply be created using the [`autorun`](http://mobxjs.github.io/mobx/refguide/autorun.html), +[`reaction`](http://mobxjs.github.io/mobx/refguide/reaction.html) or [`when`](http://mobxjs.github.io/mobx/refguide/when.html) functions to fit your specific situations. + +For example the following `autorun` prints a log message each time the amount of `unfinishedTodoCount` changes: + +```javascript +autorun(() => { + console.log("Tasks left: " + todos.unfinishedTodoCount) +}) +``` + +### What will MobX react to? + +Why does a new message get printed each time the `unfinishedTodoCount` is changed? The answer is this rule of thumb: + +_MobX reacts to any existing observable property that is read during the execution of a tracked function._ + +For an in-depth explanation about how MobX determines to which observables needs to be reacted, check [understanding what MobX reacts to](https://github.com/mobxjs/mobx/blob/gh-pages/docs/best/react.md). + +### Actions + +Egghead.io lesson 5: actions + +Unlike many flux frameworks, MobX is unopinionated about how user events should be handled. + +- This can be done in a Flux like manner. +- Or by processing events using RxJS. +- Or by simply handling events in the most straightforward way possible, as demonstrated in the above `onClick` handler. + +In the end it all boils down to: Somehow the state should be updated. + +After updating the state `MobX` will take care of the rest in an efficient, glitch-free manner. So simple statements, like below, are enough to automatically update the user interface. + +There is no technical need for firing events, calling a dispatcher or what more. A React component in the end is nothing more than a fancy representation of your state. A derivation that will be managed by MobX. + +```javascript +store.todos.push(new Todo("Get Coffee"), new Todo("Write simpler code")) +store.todos[0].finished = true +``` + +Nonetheless, MobX has an optional built-in concept of [`actions`](https://mobxjs.github.io/mobx/refguide/action.html). +Read this section as well if you want to know more about writing asynchronous actions. It's easy! +Use them to your advantage; they will help you to structure your code better and make wise decisions about when and where state should be modified. + +## MobX: Simple and scalable + +MobX is one of the least obtrusive libraries you can use for state management. That makes the `MobX` approach not just simple, but very scalable as well: + +### Using classes and real references + +With MobX you don't need to normalize your data. This makes the library very suitable for very complex domain models (At Mendix for example ~500 different domain classes in a single application). + +### Referential integrity is guaranteed + +Since data doesn't need to be normalized, and MobX automatically tracks the relations between state and derivations, you get referential integrity for free. Rendering something that is accessed through three levels of indirection? + +No problem, MobX will track them and re-render whenever one of the references changes. As a result staleness bugs are a thing of the past. As a programmer you might forget that changing some data might influence a seemingly unrelated component in a corner case. MobX won't forget. + +### Simpler actions are easier to maintain + +As demonstrated above, modifying state when using MobX is very straightforward. You simply write down your intentions. MobX will take care of the rest. + +### Fine grained observability is efficient + +MobX builds a graph of all the derivations in your application to find the least number of re-computations that is needed to prevent staleness. "Derive everything" might sound expensive, MobX builds a virtual derivation graph to minimize the number of recomputations needed to keep derivations in sync with the state. + +In fact, when testing MobX at Mendix we found out that using this library to track the relations in our code is often a lot more efficient than pushing changes through our application by using handwritten events or "smart" selector based container components. + +The simple reason is that MobX will establish far more fine grained 'listeners' on your data than you would do as a programmer. + +Secondly MobX sees the causality between derivations so it can order them in such a way that no derivation has to run twice or introduces a glitch. + +How that works? See this [in-depth explanation of MobX](https://medium.com/@mweststrate/becoming-fully-reactive-an-in-depth-explanation-of-mobservable-55995262a254). + +### Easy interoperability + +MobX works with plain javascript structures. Due to its unobtrusiveness it works with most javascript libraries out of the box, without needing MobX specific library flavors. + +So you can simply keep using your existing router, data fetching, and utility libraries like `react-router`, `director`, `superagent`, `lodash` etc. + +For the same reason you can use it out of the box both server and client side, in isomorphic applications and with react-native. + +The result of this is that you often need to learn less new concepts when using MobX in comparison to other state management solutions. + +--- + +## Credits + +MobX is inspired by reactive programming principles as found in spreadsheets. It is inspired by MVVM frameworks like in MeteorJS tracker, knockout and Vue.js. But MobX brings Transparent Functional Reactive Programming to the next level and provides a stand alone implementation. It implements TFRP in a glitch-free, synchronous, predictable and efficient manner. + +A ton of credits for [Mendix](https://github.com/mendix), for providing the flexibility and support to maintain MobX and the chance to proof the philosophy of MobX in a real, complex, performance critical applications. + +And finally kudos for all the people that believed in, tried, validated and even [sponsored](https://github.com/mobxjs/mobx/blob/master/sponsors.md) MobX. + +## Further resources and documentation + +- [The MobX book](https://books.google.nl/books?id=ALFmDwAAQBAJ&pg=PP1&lpg=PP1&dq=michel+weststrate+mobx+quick+start+guide:+supercharge+the+client+state+in+your+react+apps+with+mobx&source=bl&ots=D460fxti0F&sig=ivDGTxsPNwlOjLHrpKF1nweZFl8&hl=nl&sa=X&ved=2ahUKEwiwl8XO--ncAhWPmbQKHWOYBqIQ6AEwAnoECAkQAQ#v=onepage&q=michel%20weststrate%20mobx%20quick%20start%20guide%3A%20supercharge%20the%20client%20state%20in%20your%20react%20apps%20with%20mobx&f=false) by Pavan Podila and Michel Weststrate (which despite it's name is in-depth!) +- [MobX homepage](http://mobxjs.github.io/mobx/faq/blogs.html) +- [API overview](http://mobxjs.github.io/mobx/refguide/api.html) +- [Tutorials, Blogs & Videos](http://mobxjs.github.io/mobx/faq/blogs.html) +- [Boilerplates](http://mobxjs.github.io/mobx/faq/boilerplates.html) +- [Related projects](http://mobxjs.github.io/mobx/faq/related.html) + +## What others are saying... + +> Guise, #mobx isn't pubsub, or your grandpa's observer pattern. Nay, it is a carefully orchestrated observable dimensional portal fueled by the power cosmic. It doesn't do change detection, it's actually a level 20 psionic with soul knife, slashing your viewmodel into submission. + +> After using #mobx for lone projects for a few weeks, it feels awesome to introduce it to the team. Time: 1/2, Fun: 2X + +> Working with #mobx is basically a continuous loop of me going “this is way too simple, it definitely won’t work” only to be proven wrong + +> Try react-mobx with es6 and you will love it so much that you will hug someone. + +> I have built big apps with MobX already and comparing to the one before that which was using Redux, it is simpler to read and much easier to reason about. + +> The #mobx is the way I always want things to be! It's really surprising simple and fast! Totally awesome! Don't miss it! + +## Contributing + +- Feel free to send small pull requests. Please discuss new features or big changes in a GitHub issue first. +- Use `npm test` to run the basic test suite, `npm run coverage` for the test suite with coverage and `npm run test:performance` for the performance tests. +- Please note that if you want to backport a feature / fix to MobX 4 a second PR needs to be opened to the mobx4-master branch. + +# MobX 4 vs MobX 5 + +The difference between MobX 4 and MobX 5 is that the latter uses Proxies to do property tracking. As a consequence MobX 5 only runs on Proxy supporting browsers, in contrast to MobX 4 that runs on any ES 5 environment. + +The most noteable limitations of MobX 4: + +- Observable arrays are not real arrays, so they won't pass the `Array.isArray()` check. The practical consequence is that you often need to `.slice()` the array first (to get a real array shallow copy) before passing to third party libraries. +- Adding properties to existing observable objects after creation is not automatically picked up. Either use observable maps instead, or use the the build in [utility functions](https://mobx.js.org/refguide/object-api.html) to read / write / iterate objects that you want to dynamically add properties to. + +For more details see the [caveats page](https://mobx.js.org/best/pitfalls.html). + +## Flow support + +MobX ships with [flow typings](https://github.com/mobxjs/mobx/blob/master/flow-typed/mobx.js). Flow will automatically include them when you import mobx modules. Although you **do not** need to import the types explicitly, you can still do it like this: `import type { ... } from 'mobx'`. + +To use the [flow typings](https://github.com/mobxjs/mobx/blob/master/flow-typed/mobx.js) shipped with MobX: + +- In `.flowconfig`, you **cannot** ignore `node_modules`. +- In `.flowconfig`, you **cannot** import it explicitly in the `[libs]` section. +- You **do not** need to install library definition using [flow-typed](https://github.com/flowtype/flow-typed). + +## Donating + +Was MobX key in making your project a success? +Join our [open collective](https://opencollective.com/mobx#) or use the [donate button](https://mobxjs.github.io/mobx/donate.html)! + +### Backers + +Support us with a monthly donation and help us continue our activities. [[Become a backer](https://opencollective.com/mobx#backer)] + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +One time donations through paypal are welcome as well and are recorded in the [sponsors](sponsors.md) list. + +[![Donate](https://www.paypalobjects.com/en_US/i/btn/btn_donateCC_LG.gif)](https://mobxjs.github.io/mobx/donate.html) + +### Sponsors + +Become a sponsor and get your logo on our README on Github with a link to your site. [[Become a sponsor](https://opencollective.com/mobx#sponsor)] + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/docs/SUMMARY.md b/docs/SUMMARY.md new file mode 100644 index 000000000..2e7f80899 --- /dev/null +++ b/docs/SUMMARY.md @@ -0,0 +1,49 @@ +# MobX + +- Introduction to MobX + - [Why MobX?](README.md) + - [The Gist of MobX](intro/overview.md) + - [Concepts & Principles](intro/concepts.md) +- [API overview](refguide/api.md) +- Making things observable + - [observable](refguide/observable.md) + - [@observable](refguide/observable-decorator.md) + - [objects](refguide/object.md) + - [arrays](refguide/array.md) + - [maps](refguide/map.md) + - [boxed values](refguide/boxed.md) + - [decorators](refguide/modifiers.md) +- Reacting to observables + - [(@)computed](refguide/computed-decorator.md) + - [autorun](refguide/autorun.md) + - [when](refguide/when.md) + - [reaction](refguide/reaction.md) + - [(@)observer](refguide/observer-component.md) + - [Understanding what MobX reacts to](best/react.md) +- Changing observables + - [action](refguide/action.md) + - [async actions & flows](best/actions.md) + - [Object api](refguide/object-api.md) +- Utility functions + - [toJS](refguide/tojson.md) + - [extendObservable](refguide/extend-observable.md) + - [createAtom](refguide/extending.md) + - [intercept & observe](refguide/observe.md) + - [mobxUtils.fromPromise](https://github.com/mobxjs/mobx-utils#frompromise) + - [mobxUtils.fromResource](https://github.com/mobxjs/mobx-utils#fromresource) + - [mobxUtils.toStream](https://github.com/mobxjs/mobx-utils#tostream) + - [mobxUtils.fromStream](https://github.com/mobxjs/mobx-utils#fromstream) + - [mobxUtils.now](https://github.com/mobxjs/mobx-utils#now) + - [mobxUtils.createTransformer](refguide/create-transformer.md) + - [mobxUtils.expr](refguide/expr.md) + - [complete api overview](refguide/api.md) +- [Blogs, videos, related projects](https://github.com/mobxjs/awesome-mobx#examples) +- Tips & Tricks + - [Frequently Asked Questions](faq/faq.md) + - [Common Pitfalls & Best Practices](best/pitfalls.md) + - [How to (not) use decorator syntax](best/decorators.md) + - [Using trace for debugging](best/trace.md) + - [Defining data stores](best/store.md) + - [Optimizing React components](best/react-performance.md) + - [spy](refguide/spy.md) +- [Donate](donating.md) diff --git a/docs/best/actions.md b/docs/best/actions.md new file mode 100644 index 000000000..222e05ed5 --- /dev/null +++ b/docs/best/actions.md @@ -0,0 +1,206 @@ +
    + +# Writing asynchronous actions + +The `action` wrapper / decorator only affects the currently running function, not functions that are scheduled (but not invoked) by the current function! +This means that if you have a `setTimeout`, promise`.then` or `async` construction, and in that callback some more state is changed, those callbacks should be wrapped in `action` as well! There are several ways to create asynchronous actions. No approach is strictly better than the other, but this section just list different approaches you can take to writing asynchronous code. +Let's start with a basic example: + +### Promises + +```javascript +mobx.configure({ enforceActions: "observed" }) // don't allow state modifications outside actions + +class Store { + @observable githubProjects = [] + @observable state = "pending" // "pending" / "done" / "error" + + @action + fetchProjects() { + this.githubProjects = [] + this.state = "pending" + fetchGithubProjectsSomehow().then( + projects => { + const filteredProjects = somePreprocessing(projects) + this.githubProjects = filteredProjects + this.state = "done" + }, + error => { + this.state = "error" + } + ) + } +} +``` + +The above example would throw exceptions, as the callbacks passed to the `fetchGithubProjectsSomehow` promise are not part of the `fetchProjects` action, as actions only apply to the current stack. + +A first simple fix is to extract the callbacks to actions. (Note that binding using `action.bound` is important here to get a correct `this`!): + +```javascript +mobx.configure({ enforceActions: "observed" }) + +class Store { + @observable githubProjects = [] + @observable state = "pending" // "pending" / "done" / "error" + + @action + fetchProjects() { + this.githubProjects = [] + this.state = "pending" + fetchGithubProjectsSomehow().then(this.fetchProjectsSuccess, this.fetchProjectsError) + } + + @action.bound + fetchProjectsSuccess(projects) { + const filteredProjects = somePreprocessing(projects) + this.githubProjects = filteredProjects + this.state = "done" + } + + @action.bound + fetchProjectsError(error) { + this.state = "error" + } +} +``` + +Although this is clean and explicit, it might get a bit verbose with complex async flows. Alternative, you can wrap the promise callbacks with the `action` keyword. It is recommended, but not mandatory, to give them a name as well: + +```javascript +mobx.configure({ enforceActions: "observed" }) + +class Store { + @observable githubProjects = [] + @observable state = "pending" // "pending" / "done" / "error" + + @action + fetchProjects() { + this.githubProjects = [] + this.state = "pending" + fetchGithubProjectsSomehow().then( + // inline created action + action("fetchSuccess", projects => { + const filteredProjects = somePreprocessing(projects) + this.githubProjects = filteredProjects + this.state = "done" + }), + // inline created action + action("fetchError", error => { + this.state = "error" + }) + ) + } +} +``` + +### The `runInAction` utility + +A downside of inline actions is that TypeScript does not apply type inference on them, so you would have type all your callbacks. +Instead of creating an action for the entire callback, you can also run only the state modifying part of the callback in an action. +The advantage of this pattern is that it encourages you to not litter the place with `action`, but rather put all the state modifications as much as possible at the end of the whole process: + +```javascript +mobx.configure({ enforceActions: "observed" }) + +class Store { + @observable githubProjects = [] + @observable state = "pending" // "pending" / "done" / "error" + + @action + fetchProjects() { + this.githubProjects = [] + this.state = "pending" + fetchGithubProjectsSomehow().then( + projects => { + const filteredProjects = somePreprocessing(projects) + // put the 'final' modification in an anonymous action + runInAction(() => { + this.githubProjects = filteredProjects + this.state = "done" + }) + }, + error => { + // the alternative ending of this process:... + runInAction(() => { + this.state = "error" + }) + } + ) + } +} +``` + +Note that `runInAction`'s can also be given a name as first argument. `runInAction(f)` is in fact just sugar for `action(f)()` + +### async / await + +Async / await based functions can initially seem confusing when starting with actions. +Because lexically they appear to synchronous functions, it gives the impression that `@action` applies to the entire function. +Which is of course not the case, as async / await is just syntactic sugar around a promise based process. +As a result, `@action` only applies to the code block until the first `await`. +And after each `await` a new asynchronous function is started, so after each `await`, state modifying code should be wrapped as action. +This is where `runInAction` comes in handy again: + +```javascript +mobx.configure({ enforceActions: "observed" }) + +class Store { + @observable githubProjects = [] + @observable state = "pending" // "pending" / "done" / "error" + + @action + async fetchProjects() { + this.githubProjects = [] + this.state = "pending" + try { + const projects = await fetchGithubProjectsSomehow() + const filteredProjects = somePreprocessing(projects) + // after await, modifying state again, needs an actions: + runInAction(() => { + this.state = "done" + this.githubProjects = filteredProjects + }) + } catch (error) { + runInAction(() => { + this.state = "error" + }) + } + } +} +``` + +### flows + +However, a nicer approach is to use the built-in concept of `flow`s. They use generators. Which might look scary in the beginning, but it works the same as `async` / `await`. Just use `function *` instead of `async` and `yield` instead of `await`. +The advantage of `flow` is that it is syntactically very close to async / await (with different keywords), and no manually action wrapping is needed for async parts, resulting in very clean code. + +`flow` can be used only as function and not as decorator. +`flow` integrates neatly with MobX development tools, so that it is easy to trace the process of the async function. + +```javascript +mobx.configure({ enforceActions: "observed" }) + +class Store { + @observable githubProjects = [] + @observable state = "pending" + + fetchProjects = flow(function * () { // <- note the star, this a generator function! + this.githubProjects = [] + this.state = "pending" + try { + const projects = yield fetchGithubProjectsSomehow() // yield instead of await + const filteredProjects = somePreprocessing(projects) + // the asynchronous blocks will automatically be wrapped in actions and can modify state + this.state = "done" + this.githubProjects = filteredProjects + } catch (error) { + this.state = "error" + } + }) +} +``` + +#### Flows can be cancelled + +Flows are cancellable, that means that you can call `cancel()` on the returned promise. This will stop the generator immediately, but any finally clause will still be processed. The returned promise itself will reject with `FLOW_CANCELLED`. diff --git a/docs/best/decorators.md b/docs/best/decorators.md new file mode 100644 index 000000000..02ee2458c --- /dev/null +++ b/docs/best/decorators.md @@ -0,0 +1,186 @@ +
    + +# How to (not) use decorators + +Using ES.next decorators in MobX is optional. This section explains how to use them, or how to avoid them. + +Advantages of using decorator syntax: + +* Minimizes boilerplate, declarative. +* Easy to use and read. A majority of the MobX users use them. + +Disadvantages of using decorator syntax: + +* Stage-2 ES.next feature +* Requires a little setup and transpilation, only supported with Babel / Typescript transpilation so far + +You can approach using decorators in two ways in MobX + +1. Enable the currently experimental decorator syntax in your compiler (read on) +2. Don't enable decorator syntax, but leverage the MobX built-in utility `decorate` to apply decorators to your classes / objects. + +Using decorator syntax: + +```javascript +import { observable, computed, action } from "mobx"; + +class Timer { + @observable start = Date.now(); + @observable current = Date.now(); + + @computed + get elapsedTime() { + return this.current - this.start + "milliseconds"; + } + + @action + tick() { + this.current = Date.now(); + } +} +``` + +Using the `decorate` utility: + +```javascript +import { observable, computed, action, decorate } from "mobx"; + +class Timer { + start = Date.now(); + current = Date.now(); + + get elapsedTime() { + return this.current - this.start + "milliseconds"; + } + + tick() { + this.current = Date.now(); + } +} +decorate(Timer, { + start: observable, + current: observable, + elapsedTime: computed, + tick: action +}); +``` + +For applying multiple decorators on a single property, you can pass an array of decorators. The decorators application order is from right to left. + +```javascript +import { decorate, observable } from "mobx" +import { serializable, primitive } from "serializr" +import persist from "mobx-persist"; + +class Todo { + id = Math.random(); + title = ""; + finished = false; +} +decorate(Todo, { + title: [serializable(primitive), persist("object"), observable], + finished: [serializable(primitive), observable] +}) +``` +Note: Not all decorators can be composed together, and this functionality is just best-effort. Some decorators affect the instance directly and can 'hide' the effect of other decorators that only change the prototype. + +--- + +The `observer` function from `mobx-react` is both a decorator and a function, that means that all these syntax variants will work: + +```javascript +@observer +class Timer extends React.Component { + /* ... */ +} + +const Timer = observer(class Timer extends React.Component { + /* ... */ +}) + +const Timer = observer((props) => ( + /* rendering */ +)) +``` + +## Enabling decorator syntax + +If you want to use decorators follow the following steps. + +**TypeScript** + +Enable the compiler option `"experimentalDecorators": true` in your `tsconfig.json`. + +**Babel 6: using `babel-preset-mobx`** + +A more convenient way to setup Babel for usage with mobx is to use the [`mobx`](https://github.com/zwhitchcox/babel-preset-mobx) preset, that incorporates decorators and several other plugins typically used with mobx: + +``` +npm install --save-dev babel-preset-mobx +``` + +.babelrc: + +```json +{ + "presets": ["mobx"] +} +``` + +**Babel 6: manually enabling decorators** + +To enable support for decorators without using the mobx preset, follow the following steps. +Install support for decorators: `npm i --save-dev babel-plugin-transform-decorators-legacy`. And enable it in your `.babelrc` file: + +```json +{ + "presets": ["es2015", "stage-1"], + "plugins": ["transform-decorators-legacy"] +} +``` + +Note that the order of plugins is important: `transform-decorators-legacy` should be listed _first_. +Having issues with the babel setup? Check this [issue](https://github.com/mobxjs/mobx/issues/105) first. + +**Babel 7** + +Install support for decorators: `npm i --save-dev @babel/plugin-proposal-class-properties @babel/plugin-proposal-decorators`. And enable it in your `.babelrc` file: + +```json +{ + "plugins": [ + ["@babel/plugin-proposal-decorators", { "legacy": true}], + ["@babel/plugin-proposal-class-properties", { "loose": true}] + ] +} +``` + +Note that the `legacy` mode is important (as is putting the decorators proposal first). Non-legacy mode is [WIP](https://github.com/mobxjs/mobx/pull/1732). + +## Decorator syntax and Create React App (v1) + +* Decorators are not supported out of the box in `create-react-app@1.*`. To fix this, you can either use the `decorate` utility, eject, or use the [react-app-rewired](https://github.com/timarney/react-app-rewired/tree/master/packages/react-app-rewire-mobx) package. + +## Decorator syntax and Create React App (v2) + +* Decorators are only supported out of the box when using TypeScript in `create-react-app@^2.1.1`. In older versions or when using vanilla JavaScript use either the `decorate` utility, eject, or the [customize-cra](https://github.com/arackaf/customize-cra) package. + +--- + +## Disclamer: Limitations of decorator syntax: + +_The current transpiler implementations of decorator syntax are quite limited and don't behave exactly the same. +Also, many compositional patterns are currently not possible with decorators, until the stage-2 proposal has been implemented by all transpilers. +For this reason the scope of decorator syntax support in MobX is currently scoped to make sure that the supported features +behave consistently accross all environments_ + +The following patterns are not officially supported by the MobX community: + +* Redefining decorated class members in inheritance trees +* Decorating static class members +* Combining decorators provided by MobX with other decorators +* Hot module reloading (HMR) / React-hot-loader might not work as expected + +Decorated properties might not be visible yet on class instances as _own_ property until the first read / write to that property occurred. + +(N.B.: not supported doesn't mean it doesn't work, it means that if it doesn't work, reported issues will not be processed until the official spec has been moved forward) diff --git a/docs/best/devtools.md b/docs/best/devtools.md new file mode 100644 index 000000000..8d66831e1 --- /dev/null +++ b/docs/best/devtools.md @@ -0,0 +1,38 @@ +
    + +# MobX + React DevTools + +
    + egghead.io lesson 2: devtools +
    +
    +
    Hosted on egghead.io
    diff --git a/docs/intro/overview.md b/docs/intro/overview.md index 029f3ed5e..970fdd46a 100644 --- a/docs/intro/overview.md +++ b/docs/intro/overview.md @@ -10,13 +10,14 @@ sidebar_label: Concepts & Principles
    egghead.io lesson 1: observable & observer -
    +
    -
    Hosted on egghead.io
    + So far it all might sound a bit fancy, but making an app reactive using MobX boils down to just these three steps: ## 1. Define your state and make it observable diff --git a/docs/refguide/action.md b/docs/refguide/action.md index 23669d8d5..04dae2cd8 100644 --- a/docs/refguide/action.md +++ b/docs/refguide/action.md @@ -12,7 +12,7 @@ sidebar_label: action egghead.io lesson 5: actions
    -
    Hosted on egghead.io diff --git a/docs/refguide/autorun.md b/docs/refguide/autorun.md index 8a0310fd0..62586170d 100644 --- a/docs/refguide/autorun.md +++ b/docs/refguide/autorun.md @@ -12,7 +12,7 @@ sidebar_label: autorun egghead.io lesson 9: custom reactions
    -
    Hosted on egghead.io diff --git a/docs/refguide/computed-decorator.md b/docs/refguide/computed-decorator.md index a0c586e8d..6cbd89eff 100644 --- a/docs/refguide/computed-decorator.md +++ b/docs/refguide/computed-decorator.md @@ -12,7 +12,7 @@ sidebar_label: (@)computed egghead.io lesson 3: computed values
    -
    Hosted on egghead.io diff --git a/docs/refguide/observable-decorator.md b/docs/refguide/observable-decorator.md index 6787eca92..e89075e9e 100644 --- a/docs/refguide/observable-decorator.md +++ b/docs/refguide/observable-decorator.md @@ -12,7 +12,7 @@ sidebar_label: @observable egghead.io lesson 1: observable & observer
    -
    Hosted on egghead.io @@ -21,7 +21,7 @@ sidebar_label: @observable egghead.io lesson 4: observable objects & maps
    -
    Hosted on egghead.io diff --git a/docs/refguide/observable.md b/docs/refguide/observable.md index 1f7424482..6bc5dfda1 100644 --- a/docs/refguide/observable.md +++ b/docs/refguide/observable.md @@ -12,7 +12,7 @@ sidebar_label: observable egghead.io lesson 1: observable & observer
    -
    Hosted on egghead.io @@ -21,7 +21,7 @@ sidebar_label: observable egghead.io lesson 4: observable objects & maps
    -
    Hosted on egghead.io diff --git a/docs/refguide/observer-component.md b/docs/refguide/observer-component.md index 3bd744a5d..95b1bd03d 100644 --- a/docs/refguide/observer-component.md +++ b/docs/refguide/observer-component.md @@ -10,9 +10,9 @@ sidebar_label: (@)observer
    egghead.io lesson 1: observable & observer -
    +
    -
    Hosted on egghead.io
    diff --git a/docs/refguide/when.md b/docs/refguide/when.md index 25c30e144..91f0e2eb0 100644 --- a/docs/refguide/when.md +++ b/docs/refguide/when.md @@ -10,9 +10,9 @@ sidebar_label: when
    egghead.io lesson 9: custom reactions -
    +
    -
    Hosted on egghead.io
    From cacdbece33bd534f54717c7ef0d28e93bf943df8 Mon Sep 17 00:00:00 2001 From: Christopher Loverich Date: Tue, 10 Sep 2019 21:48:21 -0500 Subject: [PATCH 10/28] docs: remove edit link --- website/siteConfig.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/website/siteConfig.js b/website/siteConfig.js index f6ea6b50e..82a321f18 100644 --- a/website/siteConfig.js +++ b/website/siteConfig.js @@ -42,7 +42,7 @@ const siteConfig = { // URL for editing docs, usage example: editUrl + 'en/doc1.md'. // If this field is omitted, there will be no "Edit this Doc" button // for each document. - editUrl: "docs/", + // editUrl: "docs/", From 6c93833aed278c5876ed94407893b9f8b6d28ec7 Mon Sep 17 00:00:00 2001 From: Christopher Loverich Date: Tue, 10 Sep 2019 22:13:06 -0500 Subject: [PATCH 11/28] docs: remove boilerplate. update links - remove docusaurus generated content (blog, etc) that is unused - update various links (ex: docs in Footer) to make them work - remove most non-documentation pages - greatly simplify landing page --- .dockerignore | 2 - Dockerfile | 10 - docker-compose.yml | 18 -- website/README.md | 193 ------------------ website/blog/2016-03-11-blog-post.md | 18 -- website/blog/2017-04-10-blog-post-two.md | 18 -- website/blog/2017-09-25-testing-rss.md | 11 - website/blog/2017-09-26-adding-rss.md | 10 - website/blog/2017-10-24-new-version-1.0.0.md | 8 - website/core/Footer.js | 43 +--- website/i18n/en.json | 3 +- website/pages/en/help.js | 54 ----- website/pages/en/index.js | 23 +-- website/pages/en/users.js | 48 ----- website/sidebars.json | 1 - website/siteConfig.js | 1 - website/static/img/oss_logo.png | Bin 4370 -> 0 bytes website/static/img/undraw_code_review.svg | 1 - website/static/img/undraw_monitor.svg | 1 - website/static/img/undraw_note_list.svg | 1 - website/static/img/undraw_online.svg | 1 - website/static/img/undraw_open_source.svg | 1 - .../static/img/undraw_operating_system.svg | 1 - website/static/img/undraw_react.svg | 1 - website/static/img/undraw_tweetstorm.svg | 1 - .../static/img/undraw_youtube_tutorial.svg | 1 - 26 files changed, 17 insertions(+), 453 deletions(-) delete mode 100755 .dockerignore delete mode 100755 Dockerfile delete mode 100755 docker-compose.yml delete mode 100755 website/README.md delete mode 100755 website/blog/2016-03-11-blog-post.md delete mode 100755 website/blog/2017-04-10-blog-post-two.md delete mode 100755 website/blog/2017-09-25-testing-rss.md delete mode 100755 website/blog/2017-09-26-adding-rss.md delete mode 100755 website/blog/2017-10-24-new-version-1.0.0.md delete mode 100755 website/pages/en/help.js delete mode 100755 website/pages/en/users.js delete mode 100755 website/static/img/oss_logo.png delete mode 100755 website/static/img/undraw_code_review.svg delete mode 100755 website/static/img/undraw_monitor.svg delete mode 100755 website/static/img/undraw_note_list.svg delete mode 100755 website/static/img/undraw_online.svg delete mode 100755 website/static/img/undraw_open_source.svg delete mode 100755 website/static/img/undraw_operating_system.svg delete mode 100755 website/static/img/undraw_react.svg delete mode 100755 website/static/img/undraw_tweetstorm.svg delete mode 100755 website/static/img/undraw_youtube_tutorial.svg diff --git a/.dockerignore b/.dockerignore deleted file mode 100755 index 27d2dae2b..000000000 --- a/.dockerignore +++ /dev/null @@ -1,2 +0,0 @@ -*/node_modules -*.log diff --git a/Dockerfile b/Dockerfile deleted file mode 100755 index d369844d5..000000000 --- a/Dockerfile +++ /dev/null @@ -1,10 +0,0 @@ -FROM node:8.11.4 - -WORKDIR /app/website - -EXPOSE 3000 35729 -COPY ./docs /app/docs -COPY ./website /app/website -RUN yarn install - -CMD ["yarn", "start"] diff --git a/docker-compose.yml b/docker-compose.yml deleted file mode 100755 index 6711192ae..000000000 --- a/docker-compose.yml +++ /dev/null @@ -1,18 +0,0 @@ -version: "3" - -services: - docusaurus: - build: . - ports: - - 3000:3000 - - 35729:35729 - volumes: - - ./docs:/app/docs - - ./website/blog:/app/website/blog - - ./website/core:/app/website/core - - ./website/i18n:/app/website/i18n - - ./website/pages:/app/website/pages - - ./website/static:/app/website/static - - ./website/sidebars.json:/app/website/sidebars.json - - ./website/siteConfig.js:/app/website/siteConfig.js - working_dir: /app/website diff --git a/website/README.md b/website/README.md deleted file mode 100755 index f3da77ff3..000000000 --- a/website/README.md +++ /dev/null @@ -1,193 +0,0 @@ -This website was created with [Docusaurus](https://docusaurus.io/). - -# What's In This Document - -* [Get Started in 5 Minutes](#get-started-in-5-minutes) -* [Directory Structure](#directory-structure) -* [Editing Content](#editing-content) -* [Adding Content](#adding-content) -* [Full Documentation](#full-documentation) - -# Get Started in 5 Minutes - -1. Make sure all the dependencies for the website are installed: - -```sh -# Install dependencies -$ yarn -``` -2. Run your dev server: - -```sh -# Start the site -$ yarn start -``` - -## Directory Structure - -Your project file structure should look something like this - -``` -my-docusaurus/ - docs/ - doc-1.md - doc-2.md - doc-3.md - website/ - blog/ - 2016-3-11-oldest-post.md - 2017-10-24-newest-post.md - core/ - node_modules/ - pages/ - static/ - css/ - img/ - package.json - sidebar.json - siteConfig.js -``` - -# Editing Content - -## Editing an existing docs page - -Edit docs by navigating to `docs/` and editing the corresponding document: - -`docs/doc-to-be-edited.md` - -```markdown ---- -id: page-needs-edit -title: This Doc Needs To Be Edited ---- - -Edit me... -``` - -For more information about docs, click [here](https://docusaurus.io/docs/en/navigation) - -## Editing an existing blog post - -Edit blog posts by navigating to `website/blog` and editing the corresponding post: - -`website/blog/post-to-be-edited.md` -```markdown ---- -id: post-needs-edit -title: This Blog Post Needs To Be Edited ---- - -Edit me... -``` - -For more information about blog posts, click [here](https://docusaurus.io/docs/en/adding-blog) - -# Adding Content - -## Adding a new docs page to an existing sidebar - -1. Create the doc as a new markdown file in `/docs`, example `docs/newly-created-doc.md`: - -```md ---- -id: newly-created-doc -title: This Doc Needs To Be Edited ---- - -My new content here.. -``` - -1. Refer to that doc's ID in an existing sidebar in `website/sidebar.json`: - -```javascript -// Add newly-created-doc to the Getting Started category of docs -{ - "docs": { - "Getting Started": [ - "quick-start", - "newly-created-doc" // new doc here - ], - ... - }, - ... -} -``` - -For more information about adding new docs, click [here](https://docusaurus.io/docs/en/navigation) - -## Adding a new blog post - -1. Make sure there is a header link to your blog in `website/siteConfig.js`: - -`website/siteConfig.js` -```javascript -headerLinks: [ - ... - { blog: true, label: 'Blog' }, - ... -] -``` - -2. Create the blog post with the format `YYYY-MM-DD-My-Blog-Post-Title.md` in `website/blog`: - -`website/blog/2018-05-21-New-Blog-Post.md` - -```markdown ---- -author: Frank Li -authorURL: https://twitter.com/foobarbaz -authorFBID: 503283835 -title: New Blog Post ---- - -Lorem Ipsum... -``` - -For more information about blog posts, click [here](https://docusaurus.io/docs/en/adding-blog) - -## Adding items to your site's top navigation bar - -1. Add links to docs, custom pages or external links by editing the headerLinks field of `website/siteConfig.js`: - -`website/siteConfig.js` -```javascript -{ - headerLinks: [ - ... - /* you can add docs */ - { doc: 'my-examples', label: 'Examples' }, - /* you can add custom pages */ - { page: 'help', label: 'Help' }, - /* you can add external links */ - { href: 'https://github.com/facebook/Docusaurus', label: 'GitHub' }, - ... - ], - ... -} -``` - -For more information about the navigation bar, click [here](https://docusaurus.io/docs/en/navigation) - -## Adding custom pages - -1. Docusaurus uses React components to build pages. The components are saved as .js files in `website/pages/en`: -1. If you want your page to show up in your navigation header, you will need to update `website/siteConfig.js` to add to the `headerLinks` element: - -`website/siteConfig.js` -```javascript -{ - headerLinks: [ - ... - { page: 'my-new-custom-page', label: 'My New Custom Page' }, - ... - ], - ... -} -``` - -For more information about custom pages, click [here](https://docusaurus.io/docs/en/custom-pages). - -# Full Documentation - -Full documentation can be found on the [website](https://docusaurus.io/). diff --git a/website/blog/2016-03-11-blog-post.md b/website/blog/2016-03-11-blog-post.md deleted file mode 100755 index cf2ba2960..000000000 --- a/website/blog/2016-03-11-blog-post.md +++ /dev/null @@ -1,18 +0,0 @@ ---- -title: Blog Title -author: Blog Author -authorURL: http://twitter.com/ -authorFBID: 100002976521003 ---- - -Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque elementum dignissim ultricies. Fusce rhoncus ipsum tempor eros aliquam consequat. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus elementum massa eget nulla aliquet sagittis. Proin odio tortor, vulputate ut odio in, ultrices ultricies augue. Cras ornare ultrices lorem malesuada iaculis. Etiam sit amet libero tempor, pulvinar mauris sed, sollicitudin sapien. - - - -Mauris vestibulum ullamcorper nibh, ut semper purus pulvinar ut. Donec volutpat orci sit amet mauris malesuada, non pulvinar augue aliquam. Vestibulum ultricies at urna ut suscipit. Morbi iaculis, erat at imperdiet semper, ipsum nulla sodales erat, eget tincidunt justo dui quis justo. Pellentesque dictum bibendum diam at aliquet. Sed pulvinar, dolor quis finibus ornare, eros odio facilisis erat, eu rhoncus nunc dui sed ex. Nunc gravida dui massa, sed ornare arcu tincidunt sit amet. Maecenas efficitur sapien neque, a laoreet libero feugiat ut. - -Nulla facilisi. Maecenas sodales nec purus eget posuere. Sed sapien quam, pretium a risus in, porttitor dapibus erat. Sed sit amet fringilla ipsum, eget iaculis augue. Integer sollicitudin tortor quis ultricies aliquam. Suspendisse fringilla nunc in tellus cursus, at placerat tellus scelerisque. Sed tempus elit a sollicitudin rhoncus. Nulla facilisi. Morbi nec dolor dolor. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Cras et aliquet lectus. Pellentesque sit amet eros nisi. Quisque ac sapien in sapien congue accumsan. Nullam in posuere ante. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Proin lacinia leo a nibh fringilla pharetra. - -Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Proin venenatis lectus dui, vel ultrices ante bibendum hendrerit. Aenean egestas feugiat dui id hendrerit. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Curabitur in tellus laoreet, eleifend nunc id, viverra leo. Proin vulputate non dolor vel vulputate. Curabitur pretium lobortis felis, sit amet finibus lorem suscipit ut. Sed non mollis risus. Duis sagittis, mi in euismod tincidunt, nunc mauris vestibulum urna, at euismod est elit quis erat. Phasellus accumsan vitae neque eu placerat. In elementum arcu nec tellus imperdiet, eget maximus nulla sodales. Curabitur eu sapien eget nisl sodales fermentum. - -Phasellus pulvinar ex id commodo imperdiet. Praesent odio nibh, sollicitudin sit amet faucibus id, placerat at metus. Donec vitae eros vitae tortor hendrerit finibus. Interdum et malesuada fames ac ante ipsum primis in faucibus. Quisque vitae purus dolor. Duis suscipit ac nulla et finibus. Phasellus ac sem sed dui dictum gravida. Phasellus eleifend vestibulum facilisis. Integer pharetra nec enim vitae mattis. Duis auctor, lectus quis condimentum bibendum, nunc dolor aliquam massa, id bibendum orci velit quis magna. Ut volutpat nulla nunc, sed interdum magna condimentum non. Sed urna metus, scelerisque vitae consectetur a, feugiat quis magna. Donec dignissim ornare nisl, eget tempor risus malesuada quis. diff --git a/website/blog/2017-04-10-blog-post-two.md b/website/blog/2017-04-10-blog-post-two.md deleted file mode 100755 index 3ab4637bd..000000000 --- a/website/blog/2017-04-10-blog-post-two.md +++ /dev/null @@ -1,18 +0,0 @@ ---- -title: New Blog Post -author: Blog Author -authorURL: http://twitter.com/ -authorFBID: 100002976521003 ---- - -Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque elementum dignissim ultricies. Fusce rhoncus ipsum tempor eros aliquam consequat. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus elementum massa eget nulla aliquet sagittis. Proin odio tortor, vulputate ut odio in, ultrices ultricies augue. Cras ornare ultrices lorem malesuada iaculis. Etiam sit amet libero tempor, pulvinar mauris sed, sollicitudin sapien. - - - -Mauris vestibulum ullamcorper nibh, ut semper purus pulvinar ut. Donec volutpat orci sit amet mauris malesuada, non pulvinar augue aliquam. Vestibulum ultricies at urna ut suscipit. Morbi iaculis, erat at imperdiet semper, ipsum nulla sodales erat, eget tincidunt justo dui quis justo. Pellentesque dictum bibendum diam at aliquet. Sed pulvinar, dolor quis finibus ornare, eros odio facilisis erat, eu rhoncus nunc dui sed ex. Nunc gravida dui massa, sed ornare arcu tincidunt sit amet. Maecenas efficitur sapien neque, a laoreet libero feugiat ut. - -Nulla facilisi. Maecenas sodales nec purus eget posuere. Sed sapien quam, pretium a risus in, porttitor dapibus erat. Sed sit amet fringilla ipsum, eget iaculis augue. Integer sollicitudin tortor quis ultricies aliquam. Suspendisse fringilla nunc in tellus cursus, at placerat tellus scelerisque. Sed tempus elit a sollicitudin rhoncus. Nulla facilisi. Morbi nec dolor dolor. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Cras et aliquet lectus. Pellentesque sit amet eros nisi. Quisque ac sapien in sapien congue accumsan. Nullam in posuere ante. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Proin lacinia leo a nibh fringilla pharetra. - -Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Proin venenatis lectus dui, vel ultrices ante bibendum hendrerit. Aenean egestas feugiat dui id hendrerit. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Curabitur in tellus laoreet, eleifend nunc id, viverra leo. Proin vulputate non dolor vel vulputate. Curabitur pretium lobortis felis, sit amet finibus lorem suscipit ut. Sed non mollis risus. Duis sagittis, mi in euismod tincidunt, nunc mauris vestibulum urna, at euismod est elit quis erat. Phasellus accumsan vitae neque eu placerat. In elementum arcu nec tellus imperdiet, eget maximus nulla sodales. Curabitur eu sapien eget nisl sodales fermentum. - -Phasellus pulvinar ex id commodo imperdiet. Praesent odio nibh, sollicitudin sit amet faucibus id, placerat at metus. Donec vitae eros vitae tortor hendrerit finibus. Interdum et malesuada fames ac ante ipsum primis in faucibus. Quisque vitae purus dolor. Duis suscipit ac nulla et finibus. Phasellus ac sem sed dui dictum gravida. Phasellus eleifend vestibulum facilisis. Integer pharetra nec enim vitae mattis. Duis auctor, lectus quis condimentum bibendum, nunc dolor aliquam massa, id bibendum orci velit quis magna. Ut volutpat nulla nunc, sed interdum magna condimentum non. Sed urna metus, scelerisque vitae consectetur a, feugiat quis magna. Donec dignissim ornare nisl, eget tempor risus malesuada quis. diff --git a/website/blog/2017-09-25-testing-rss.md b/website/blog/2017-09-25-testing-rss.md deleted file mode 100755 index b7ff8129c..000000000 --- a/website/blog/2017-09-25-testing-rss.md +++ /dev/null @@ -1,11 +0,0 @@ ---- -title: Adding RSS Support - RSS Truncation Test -author: Eric Nakagawa -authorURL: http://twitter.com/ericnakagawa -authorFBID: 661277173 ---- -1234567890123456789012345678901234567890123456789012345678901234567890123456789012345678901234567890123456789012345678901234567890123456789012345678901234567890123456789012345678901234567890123456789012345678901234567890123456789012345678901234567890 - -This should be truncated. - -This line should never render in XML. diff --git a/website/blog/2017-09-26-adding-rss.md b/website/blog/2017-09-26-adding-rss.md deleted file mode 100755 index eeb4f0477..000000000 --- a/website/blog/2017-09-26-adding-rss.md +++ /dev/null @@ -1,10 +0,0 @@ ---- -title: Adding RSS Support -author: Eric Nakagawa -authorURL: http://twitter.com/ericnakagawa -authorFBID: 661277173 ---- - -This is a test post. - -A whole bunch of other information. diff --git a/website/blog/2017-10-24-new-version-1.0.0.md b/website/blog/2017-10-24-new-version-1.0.0.md deleted file mode 100755 index 60761c02d..000000000 --- a/website/blog/2017-10-24-new-version-1.0.0.md +++ /dev/null @@ -1,8 +0,0 @@ ---- -title: New Version 1.0.0 -author: Eric Nakagawa -authorURL: http://twitter.com/ericnakagawa -authorFBID: 661277173 ---- - -This blog post will test file name parsing issues when periods are present. diff --git a/website/core/Footer.js b/website/core/Footer.js index 591eb0219..34b4afa90 100755 --- a/website/core/Footer.js +++ b/website/core/Footer.js @@ -37,39 +37,29 @@ class Footer extends React.Component {
    Docs
    - - Getting Started (or other categories) + + Why MobX - - Guides (or other categories) - - - API Reference (or other categories) + + Concepts
    Community
    - + {/* User Showcase - + */} Stack Overflow - Project Chat - - Twitter - + Project Chat +
    More
    - Blog - GitHub Follow @{this.props.config.twitterUsername} @@ -107,19 +97,6 @@ class Footer extends React.Component {
    - - Facebook Open Source - -
    {this.props.config.copyright}
    ); } diff --git a/website/i18n/en.json b/website/i18n/en.json index f9462df5a..d4a019625 100644 --- a/website/i18n/en.json +++ b/website/i18n/en.json @@ -160,8 +160,7 @@ } }, "links": { - "Documentation": "Documentation", - "Introduction": "Introduction" + "Documentation": "Documentation" }, "categories": { "Introduction": "Introduction", diff --git a/website/pages/en/help.js b/website/pages/en/help.js deleted file mode 100755 index 2b790e460..000000000 --- a/website/pages/en/help.js +++ /dev/null @@ -1,54 +0,0 @@ -/** - * Copyright (c) 2017-present, Facebook, Inc. - * - * This source code is licensed under the MIT license found in the - * LICENSE file in the root directory of this source tree. - */ - -const React = require('react'); - -const CompLibrary = require('../../core/CompLibrary.js'); - -const Container = CompLibrary.Container; -const GridBlock = CompLibrary.GridBlock; - -function Help(props) { - const {config: siteConfig, language = ''} = props; - const {baseUrl, docsUrl} = siteConfig; - const docsPart = `${docsUrl ? `${docsUrl}/` : ''}`; - const langPart = `${language ? `${language}/` : ''}`; - const docUrl = doc => `${baseUrl}${docsPart}${langPart}${doc}`; - - const supportLinks = [ - { - content: `Learn more using the [documentation on this site.](${docUrl( - 'doc1.html', - )})`, - title: 'Browse Docs', - }, - { - content: 'Ask questions about the documentation and project', - title: 'Join the community', - }, - { - content: "Find out what's new with this project", - title: 'Stay up to date', - }, - ]; - - return ( -
    - -
    -
    -

    Need help?

    -
    -

    This project is maintained by a dedicated group of people.

    - -
    -     -
    - ); -} - -module.exports = Help; diff --git a/website/pages/en/index.js b/website/pages/en/index.js index 77d657aee..88ff7eec6 100755 --- a/website/pages/en/index.js +++ b/website/pages/en/index.js @@ -15,8 +15,8 @@ const GridBlock = CompLibrary.GridBlock; class HomeSplash extends React.Component { render() { - const {siteConfig, language = ''} = this.props; - const {baseUrl, docsUrl} = siteConfig; + const { siteConfig, language = '' } = this.props; + const { baseUrl, docsUrl } = siteConfig; const docsPart = `${docsUrl ? `${docsUrl}/` : ''}`; const langPart = `${language ? `${language}/` : ''}`; const docUrl = doc => `${baseUrl}${docsPart}${langPart}${doc}`; @@ -60,13 +60,10 @@ class HomeSplash extends React.Component { return ( -
    - - - +
    @@ -76,8 +73,8 @@ class HomeSplash extends React.Component { class Index extends React.Component { render() { - const {config: siteConfig, language = ''} = this.props; - const {baseUrl} = siteConfig; + const { config: siteConfig, language = '' } = this.props; + const { baseUrl } = siteConfig; const Block = props => ( (
    + style={{ textAlign: 'center' }}>

    Feature Callout

    These are features of this project
    @@ -196,14 +193,6 @@ class Index extends React.Component { return (
    -
    - - - - - - -
    ); } diff --git a/website/pages/en/users.js b/website/pages/en/users.js deleted file mode 100755 index 039dc39ff..000000000 --- a/website/pages/en/users.js +++ /dev/null @@ -1,48 +0,0 @@ -/** - * Copyright (c) 2017-present, Facebook, Inc. - * - * This source code is licensed under the MIT license found in the - * LICENSE file in the root directory of this source tree. - */ - -const React = require('react'); - -const CompLibrary = require('../../core/CompLibrary.js'); - -const Container = CompLibrary.Container; - -class Users extends React.Component { - render() { - const {config: siteConfig} = this.props; - if ((siteConfig.users || []).length === 0) { - return null; - } - - const editUrl = `${siteConfig.repoUrl}/edit/master/website/siteConfig.js`; - const showcase = siteConfig.users.map(user => ( - - {user.caption} - - )); - - return ( -
    - -
    -
    -

    Who is Using This?

    -

    This project is used by many folks

    -
    -
    {showcase}
    -

    Are you using this project?

    - - Add your company - -
    -     -
    - ); - } -} - -module.exports = Users; diff --git a/website/sidebars.json b/website/sidebars.json index 6bbf29752..d8f6e6211 100755 --- a/website/sidebars.json +++ b/website/sidebars.json @@ -2,7 +2,6 @@ "docs": { "Introduction": [ "README", - "intro/overview", "intro/concepts", "refguide/api" ], diff --git a/website/siteConfig.js b/website/siteConfig.js index 82a321f18..075dbcc95 100644 --- a/website/siteConfig.js +++ b/website/siteConfig.js @@ -53,7 +53,6 @@ const siteConfig = { // For no header links in the top nav bar -> headerLinks: [], headerLinks: [ { doc: "intro/concepts", label: "Documentation" }, - { doc: "README", label: "Introduction" }, ], // If you have users set above, you add it here: diff --git a/website/static/img/oss_logo.png b/website/static/img/oss_logo.png deleted file mode 100755 index 8183e289b139e5d03ff9870d3e6bfbcd968a5edd..0000000000000000000000000000000000000000 GIT binary patch literal 0 HcmV?d00001 literal 4370 zcmeH~_ct317sq4PRxxVNP(i6tp;qn04neJ|)z}oZVwKoxOKok;YRiLaOQ}6u)NUy; zs)UNsB9-9vob&z_?|JVJ_uPBV{hWL5_k4f3sTO92%nZB?004j)2Gz3!04NZbwLKlx zW&R?6PZt27{BB`_(7$Xi{vZEW;D1qpBoiCXOMm|fu{5&+@U?V-slyL1&e1G3i`%ZM zO&xk1`DZ83h5diEidP>;&>78rwbCD3v6g!kNfo&DPK7bO_*!NW=YzEm+PD581dZVC zS9Q;Jk6$!t9(RkkjBz{vRt|^|MuV^oBNM` zO>W=1msz(-LPu>kACG=)emyK1Mq$kS{>6|FyV>WzCiPW=6?={4VtMqUuyL+CQMKKP zBC z_y9kKZ}S^2WoZSgrIX%Y7WT=7FkAdi&4nAin(F7!>bLlI zad%;`0_VCtII?k~c^oGAL;pGA1>8)hau$C?TS<@g{mgZC>m~Ds$S;;Nfm%jvh(Bv^ zWc2q_D#;wWq^}D6aJ{x`>DMhNb4=vj^~Ghat$)|ma18(-9c9${cv9cG_1nZ)I!$C@ z;b>;^?~41=@^+NP&B?`~$TO;N_rR3RWJ3#X`J1C5ZtLL>Tyy6w*{}XBDSn`g`z$k6 zRI+(=N|QoXlHK<5;^BE^vg7rLS(J5$>v-X-9+$&ehY#wC=rxk8+wPHQ@)^}~L^yTM z*gX5EoEY&j zM)x*O%t`~gIb^PRvIFUNE8C5{{WoEg>%8IogXg?v+~OcXJ@bO_kI{MX&b^=Ur8ap5 zLzM^H@qeToAlRnp9(SCP*{X88)`ma!r}+~8Ax+NjO?m)IE9p;)cX*rg^E?eD(xI}nUoX9T@c zTDjin?b!Li&vyO~&&v-&PFK1<*u%mJTJvstb`#z}2|2X$-pohBc(|dhhlh`0N9;5I zKIAIoeGXccKA%27c(qGVCvJk-&#@$PBD`rzXwl4CZ?E0<-E8i{14^l>bx$LDi1r7 z%0;l%=_~J|NK@5)W1(Yz(7%-$Uym%kQ{xRK#N!A#FEU@2x63!9qwKU zVXJ)dP*#QDI642NLU5Zv(vgdLzzMWYn8yXq$hp4BIvbiB{YflNlG}Yegy~!&t>Ig5 zm67BZ1kGoHW~eGj{EixxQci8B)!xK?T|Uy3wX|*Q;mr;L*ib-vo204mC5PZ0OQxd~ zw|_SWVU-i`1Y067GfD*%*+nf?-Y_Z_)feI(=7@$3TmB56G>VHfEvY0v$|}*pf^^q13O# zD;1VxwP#o-@SZU~W52|?``W{l_>EbGmIO8G*;|z8;SX#$z**tbgk6YA8B%QyUx6EQLD3G>p-2h|r=;Ru|X z6m6gaAXz+uV4^J+cAv$w;Rd!KESa}MRF=ck_-gB#hBS#UtM5tKVuh(masF_5_@d1F zkw>jZM~kBBXBs1V<`?2`$7vob?P18X7~~Z&g|w*DG|T{uE!V`ghZgp1e2ln8t2nD# zl%A@`_gz+C2lw!Jg5O#cA}%TACin+S_kp?PW`=kUmba?62TFN=i2SV+uF5aP<7&9YaQ$G)=(#(-@_2j^ z_a>asZZ&Kd>lf%hz2ZSTG(HS>fi=X4dgs1}pn^gW>@14Pk;xn#y)dLJ6_0pUBssR^ zcp_TP;GY3+tK(1l8QX1-n53OmY7~(p0N+m$!%S?mMv-Z#(7LKqTXnhf8*Tk?oTf@) zTOf00EEI9#cyV98Qm4Hv#i1CKYT0m7434vF|JCsr2+wm(e{b1aCxGF3v!=({#V_qQ zv)NL_uDBYs9w~uxhF2=2R)IEQC6?L#kY*(oOunSJ;I>U#!U0EWJFf`%ZJh*+sX?IG zJ6%9q+6=*sv0JEvu+OHJ1h!#bm%kC#K{zFvTh{WYQi1s>r(N^if`5S57&O3wb@C6X z3)tBi8w4<4+1`sfB>g7YRX;f$uG;Ru^4iNuM!&PLO}MY=#^ki3mrZ|NkQAn($L4NM+QOgfP5ES7HcrN79&3;BPjl(%C9=VK z>GgLpML$ZVfp$`9!usvKs^-Od3(op8jS{rx;~Gtjy;o$%ecB7peBabb6fs3O)`CQh zbK}*&No+KVNclVAy)5PA+Sg|rmm))_)@rsBKZps`32zXFKZ_!sd<*1eqLDnC#N{R? zn9k12IZs6IdbJb3zL_+P&B~CjH{$({?P7;O^{K^gS1l{bP3FBI;9rdYaWs>8yf~l5 z3|m*L%7pD_kA(c>BU1sBM3ZEwzS zesj$`-(d5N=A&k7&Iyb7c6-$6;ep;pRqrPd?VT1%TF?wP9+(48H+*|mO9K-%ifA6K z>K=l?Tvn7v3^J<$#rpky29Pu$CvGdVB0`{J8HM|%pFX}6d993VlJC1XaxYzs*|lU>SdQGd-GTElbov>rBf*lJdBvr6wJ#nIa9nAhNQrlQjnK!6JI z#RNLSVZXyLSJj1|M+7|B96yL&afRx=9TcH9wDxvVEJB@zJ$XF&340D+m zp(0N^2YY%2RCv;&mFhU*PbK(0gDvMq{gq1un})l2iQI)ZtuB9$vnRb{%2=JNA8Zea zdYR;^$IO>)F`T;Uc(eFbjVlNH&f`3ek9DGViCYFu*tN%~of0*SZ1fU}jj1!BV?kr) z`_ZoPRqS~MuZplsP_mA?O#QP#sQx}EQLdh-dATJV-sC!z-e=vqdz=Un8(v%G{UCLo zQyoyx9e|i-h}k7%83`I_!+Tui|GfsA=JT%v+?*fe{60Ua?RvBh>7uLXOZLv(7@UTD z3|=4(OMX+tR(fREd#He?df1?~a~Q)O?GpPf_Yg75nMeCCh`kPrJ|)S#ReK65 zf>F*+y2wb+`(q~`S%qxApf2(u1q1O{KpeT(uUd z-&P9KIE*azsj;=*^^97PATOLUrZD7jOo(yP@n_#}u%fgR6srfxoA-8qV{jUx8{@m& z@743!eYtYPZyAgYN2^t_v*=t8Sv`8SxnA#W32Oj9Cer( z#e0t|wp%dy+1~*iN)FF+gHS!BKdd}Uh5y6=YhK-ni|E@u!iPJphfKeD+Q4HLHX9-k zp-9e^2ab#78{}*KeFwg@4-2%;#zekf1wAsDBE@pYQfkvN6|NANtMfxywcGSlwmMwb z03ty+WrY%5Sjiu|Tuj4|*2zwGUSSAk=3kygG+lD6+5443Zmtz@FAgQ)oS-a3iZ&ze zKDyg4y;M3u0$iHPY-KR2XBKl)EF?rM-fGd=T*r`)O!$hbIV)UJooQ{3#;akv1Ln=4 z;e?g4?tV?vS;_D_l;b)?6wet2i}t{Kp4t?nnneH6lC$j#)QCBF?|c(p*j(ZSBL9Y5-Lkzf&{=ZfX!zA{ z1B{6l&@@FtiDOyvnjSa0#Gg;a4YjJ!cR3_JlqN0gf%hC1SBRrRF@`$7oeEQ$*N33t zXS5l2iCjQhj0<+Oft-XUWN=s1iLDlCVPz;c>FSR=aThcj0#Q63lfI`C^sKQd=code review diff --git a/website/static/img/undraw_monitor.svg b/website/static/img/undraw_monitor.svg deleted file mode 100755 index fcf7192d3..000000000 --- a/website/static/img/undraw_monitor.svg +++ /dev/null @@ -1 +0,0 @@ -monitor diff --git a/website/static/img/undraw_note_list.svg b/website/static/img/undraw_note_list.svg deleted file mode 100755 index 50e3b51bf..000000000 --- a/website/static/img/undraw_note_list.svg +++ /dev/null @@ -1 +0,0 @@ -note list diff --git a/website/static/img/undraw_online.svg b/website/static/img/undraw_online.svg deleted file mode 100755 index 5b2fabcb1..000000000 --- a/website/static/img/undraw_online.svg +++ /dev/null @@ -1 +0,0 @@ -online diff --git a/website/static/img/undraw_open_source.svg b/website/static/img/undraw_open_source.svg deleted file mode 100755 index 91a44ddbe..000000000 --- a/website/static/img/undraw_open_source.svg +++ /dev/null @@ -1 +0,0 @@ -open source diff --git a/website/static/img/undraw_operating_system.svg b/website/static/img/undraw_operating_system.svg deleted file mode 100755 index ee53de8d0..000000000 --- a/website/static/img/undraw_operating_system.svg +++ /dev/null @@ -1 +0,0 @@ -operating system diff --git a/website/static/img/undraw_react.svg b/website/static/img/undraw_react.svg deleted file mode 100755 index a0a67b604..000000000 --- a/website/static/img/undraw_react.svg +++ /dev/null @@ -1 +0,0 @@ -react diff --git a/website/static/img/undraw_tweetstorm.svg b/website/static/img/undraw_tweetstorm.svg deleted file mode 100755 index ab7aae54d..000000000 --- a/website/static/img/undraw_tweetstorm.svg +++ /dev/null @@ -1 +0,0 @@ -tweetstorm diff --git a/website/static/img/undraw_youtube_tutorial.svg b/website/static/img/undraw_youtube_tutorial.svg deleted file mode 100755 index c4d7a4844..000000000 --- a/website/static/img/undraw_youtube_tutorial.svg +++ /dev/null @@ -1 +0,0 @@ -youtube tutorial From a608905e9de87e8fde91829a5176e68d247e0e4f Mon Sep 17 00:00:00 2001 From: Christopher Loverich Date: Thu, 12 Sep 2019 09:53:53 -0500 Subject: [PATCH 12/28] docs: add codefund script --- website/siteConfig.js | 8 +++++++- 1 file changed, 7 insertions(+), 1 deletion(-) diff --git a/website/siteConfig.js b/website/siteConfig.js index 075dbcc95..7376e1c71 100644 --- a/website/siteConfig.js +++ b/website/siteConfig.js @@ -92,7 +92,13 @@ myOtherFont: [ }, // Add custom scripts here that would be placed in " - ) - } - } - } -}; diff --git a/docs/node_modules/gitbook-plugin-codefund/package.json b/docs/node_modules/gitbook-plugin-codefund/package.json deleted file mode 100644 index 9356d328f..000000000 --- a/docs/node_modules/gitbook-plugin-codefund/package.json +++ /dev/null @@ -1,19 +0,0 @@ -{ - "name": "gitbook-plugin-codefund", - "description": "", - "main": "index.js", - "version": "0.2.1", - "engines": { - "gitbook": ">=0.4.6" - }, - "homepage": "", - "repository": { - "type": "git", - "url": "" - }, - "license": "Apache 2", - "bugs": { - "url": "" - }, - "_id": "gitbook-plugin-codefund@0.2.1" -} From 5f74f5057d8dbd4d20b87d9fc0dd433e51b30247 Mon Sep 17 00:00:00 2001 From: Christopher Loverich Date: Thu, 12 Sep 2019 17:29:07 -0500 Subject: [PATCH 14/28] docs: fix baseUrl and project name --- website/siteConfig.js | 10 +++------- 1 file changed, 3 insertions(+), 7 deletions(-) diff --git a/website/siteConfig.js b/website/siteConfig.js index 7376e1c71..e8c0681ef 100644 --- a/website/siteConfig.js +++ b/website/siteConfig.js @@ -27,16 +27,12 @@ const siteConfig = { // For github.io type URLs, you would set the url and baseUrl like: // url: 'https://facebook.github.io', // baseUrl: '/test-site/', - baseUrl: "/mobx/", // Base URL for your project */ + url: "https://mobx-docs.netlify.com/", // Your website URL + baseUrl: "/", // Base URL for your project */ // Used for publishing and more - // Changed these so I can publish to my forked repo for testing - // projectName: "MobX", - // organizationName: "mobxjs", - // url: "https://mobx.js.org", // Your website URL projectName: "mobx", - organizationName: "cloverich", - url: "https://cloverich.github.io", // Your website URL + organizationName: "mobxjs", // URL for editing docs, usage example: editUrl + 'en/doc1.md'. From b6f830f7e087921d3a43f33766fbf7999538ed86 Mon Sep 17 00:00:00 2001 From: Christopher Loverich Date: Fri, 13 Sep 2019 09:13:27 -0500 Subject: [PATCH 15/28] docs: remove donating, prefer OpenCollective --- README.md | 2 +- docs/README.md | 2 +- docs/donating.md | 4 ---- website/i18n/en.json | 3 --- website/sidebars.json | 3 +-- 5 files changed, 3 insertions(+), 11 deletions(-) delete mode 100644 docs/donating.md diff --git a/README.md b/README.md index 647774bd1..46fd6d8e7 100644 --- a/README.md +++ b/README.md @@ -358,7 +358,7 @@ To use the [flow typings](flow-typed/mobx.js) shipped with MobX: ## Donating Was MobX key in making your project a success? -Join our [open collective](https://opencollective.com/mobx#) or use the [donate button](https://mobxjs.github.io/mobx/donate.html)! +Join our [open collective](https://opencollective.com/mobx#)! ### Backers diff --git a/docs/README.md b/docs/README.md index 2aa4e7402..f6823ddbd 100644 --- a/docs/README.md +++ b/docs/README.md @@ -350,7 +350,7 @@ To use the [flow typings](https://github.com/mobxjs/mobx/blob/master/flow-typed/ ## Donating Was MobX key in making your project a success? -Join our [open collective](https://opencollective.com/mobx#) or use the [donate button](https://mobxjs.github.io/mobx/donate.html)! +Join our [open collective](https://opencollective.com/mobx#)! ### Backers diff --git a/docs/donating.md b/docs/donating.md deleted file mode 100644 index d11453287..000000000 --- a/docs/donating.md +++ /dev/null @@ -1,4 +0,0 @@ -# Donating - -Was MobX key in making your project a success? Share the victory by using the [donate](https://mobxjs.github.io/mobx/donate.html) button! If you leave a name it will be added to the sponsors list. - diff --git a/website/i18n/en.json b/website/i18n/en.json index d4a019625..8e2f752f2 100644 --- a/website/i18n/en.json +++ b/website/i18n/en.json @@ -44,9 +44,6 @@ "title": "Using `trace` for debugging", "sidebar_label": "Using trace for debugging" }, - "donating": { - "title": "donating" - }, "faq/faq": { "title": "FAQ", "sidebar_label": "Frequently Asked Questions" diff --git a/website/sidebars.json b/website/sidebars.json index d8f6e6211..1e0381c93 100755 --- a/website/sidebars.json +++ b/website/sidebars.json @@ -43,8 +43,7 @@ "best/trace", "best/store", "best/react-performance", - "refguide/spy", - "donating" + "refguide/spy" ] } } From 728e4d3cce88199806fd68030b0c6c2351321a3d Mon Sep 17 00:00:00 2001 From: Christopher Loverich Date: Fri, 13 Sep 2019 09:35:25 -0500 Subject: [PATCH 16/28] docs: fix 404 image links --- README.md | 2 +- docs/README.md | 6 +++--- website/siteConfig.js | 6 +++--- 3 files changed, 7 insertions(+), 7 deletions(-) diff --git a/README.md b/README.md index 46fd6d8e7..9733e3de5 100644 --- a/README.md +++ b/README.md @@ -303,7 +303,7 @@ And finally, kudos to all the people that believed in, tried, validated and even ## Further resources and documentation -- [The MobX book](https://books.google.nl/books?id=ALFmDwAAQBAJ&pg=PP1&lpg=PP1&dq=michel+weststrate+mobx+quick+start+guide:+supercharge+the+client+state+in+your+react+apps+with+mobx&source=bl&ots=D460fxti0F&sig=ivDGTxsPNwlOjLHrpKF1nweZFl8&hl=nl&sa=X&ved=2ahUKEwiwl8XO--ncAhWPmbQKHWOYBqIQ6AEwAnoECAkQAQ#v=onepage&q=michel%20weststrate%20mobx%20quick%20start%20guide%3A%20supercharge%20the%20client%20state%20in%20your%20react%20apps%20with%20mobx&f=false) by Pavan Podila and Michel Weststrate (which despite it's name is in-depth!) +- [The MobX book](https://books.google.nl/books?id=ALFmDwAAQBAJ&pg=PP1&lpg=PP1&dq=michel+weststrate+mobx+quick+start+guide:+supercharge+the+client+state+in+your+react+apps+with+mobx&source=bl&ots=D460fxti0F&sig=ivDGTxsPNwlOjLHrpKF1nweZFl8&hl=nl&sa=X&ved=2ahUKEwiwl8XO--ncAhWPmbQKHWOYBqIQ6AEwAnoECAkQAQ#v=onepage&q=michel%20weststrate%20mobx%20quick%20start%20guide%3A%20supercharge%20the%20client%20state%20in%20your%20react%20apps%20with%20mobx&f=false) by Pavan Podila and Michel Weststrate (which despite it's name is in-depth!) - [MobX homepage](http://mobxjs.github.io/mobx/faq/blogs.html) - [API overview](http://mobxjs.github.io/mobx/refguide/api.html) - [Tutorials, Blogs & Videos](http://mobxjs.github.io/mobx/faq/blogs.html) diff --git a/docs/README.md b/docs/README.md index f6823ddbd..471e66029 100644 --- a/docs/README.md +++ b/docs/README.md @@ -31,8 +31,8 @@ MobX is proudly sponsored by Mendix, Coinbase, Facebook Open Source, Canva, Algo Canva Guilded mantro GmbH -CodeFirst -Blokt +CodeFirst +Blokt **🥉Bronze sponsors:**
    Coinbase @@ -299,7 +299,7 @@ And finally kudos for all the people that believed in, tried, validated and even ## Further resources and documentation -- [The MobX book](https://books.google.nl/books?id=ALFmDwAAQBAJ&pg=PP1&lpg=PP1&dq=michel+weststrate+mobx+quick+start+guide:+supercharge+the+client+state+in+your+react+apps+with+mobx&source=bl&ots=D460fxti0F&sig=ivDGTxsPNwlOjLHrpKF1nweZFl8&hl=nl&sa=X&ved=2ahUKEwiwl8XO--ncAhWPmbQKHWOYBqIQ6AEwAnoECAkQAQ#v=onepage&q=michel%20weststrate%20mobx%20quick%20start%20guide%3A%20supercharge%20the%20client%20state%20in%20your%20react%20apps%20with%20mobx&f=false) by Pavan Podila and Michel Weststrate (which despite it's name is in-depth!) +- [The MobX book](https://books.google.nl/books?id=ALFmDwAAQBAJ&pg=PP1&lpg=PP1&dq=michel+weststrate+mobx+quick+start+guide:+supercharge+the+client+state+in+your+react+apps+with+mobx&source=bl&ots=D460fxti0F&sig=ivDGTxsPNwlOjLHrpKF1nweZFl8&hl=nl&sa=X&ved=2ahUKEwiwl8XO--ncAhWPmbQKHWOYBqIQ6AEwAnoECAkQAQ#v=onepage&q=michel%20weststrate%20mobx%20quick%20start%20guide%3A%20supercharge%20the%20client%20state%20in%20your%20react%20apps%20with%20mobx&f=false) by Pavan Podila and Michel Weststrate (which despite it's name is in-depth!) - [MobX homepage](http://mobxjs.github.io/mobx/faq/blogs.html) - [API overview](http://mobxjs.github.io/mobx/refguide/api.html) - [Tutorials, Blogs & Videos](http://mobxjs.github.io/mobx/faq/blogs.html) diff --git a/website/siteConfig.js b/website/siteConfig.js index e8c0681ef..a1afc3639 100644 --- a/website/siteConfig.js +++ b/website/siteConfig.js @@ -55,9 +55,9 @@ const siteConfig = { users, /* path to images for header/footer */ - headerIcon: "/img/mobx.png", - footerIcon: "/img/mobx.png", - favicon: "/img/favicon.png", + headerIcon: "img/mobx.png", + footerIcon: "img/mobx.png", + favicon: "img/favicon.png", /* Colors for website */ colors: { From 31e3d5c5cce09cd4e38f748ec944aa9435c00277 Mon Sep 17 00:00:00 2001 From: Christopher Loverich Date: Fri, 13 Sep 2019 09:58:04 -0500 Subject: [PATCH 17/28] docs: remove id front matter. - remove id from all front matter - fix mixed up naming of concepts, overview, and introduction section --- docs/README.md | 5 ++--- docs/best/actions.md | 1 - docs/best/decorators.md | 1 - docs/best/devtools.md | 1 - docs/best/pitfalls.md | 1 - docs/best/react-performance.md | 1 - docs/best/react.md | 1 - docs/best/stateless-HMR.md | 1 - docs/best/store.md | 1 - docs/best/syntax.md | 5 ----- docs/best/trace.md | 1 - docs/faq/faq.md | 1 - docs/intro/concepts.md | 7 +++---- docs/intro/overview.md | 5 ++--- docs/refguide/action.md | 1 - docs/refguide/api.md | 1 - docs/refguide/array.md | 1 - docs/refguide/autorun.md | 1 - docs/refguide/boxed.md | 1 - docs/refguide/computed-decorator.md | 1 - docs/refguide/create-transformer.md | 1 - docs/refguide/expr.md | 1 - docs/refguide/extend-observable.md | 1 - docs/refguide/extending.md | 1 - docs/refguide/map.md | 1 - docs/refguide/mobx-utils.md | 1 - docs/refguide/modifiers.md | 1 - docs/refguide/object-api.md | 1 - docs/refguide/object.md | 1 - docs/refguide/observable-decorator.md | 1 - docs/refguide/observable.md | 1 - docs/refguide/observe.md | 1 - docs/refguide/observer-component.md | 3 +-- docs/refguide/reaction.md | 1 - docs/refguide/spy.md | 1 - docs/refguide/tojson.md | 1 - docs/refguide/when.md | 1 - website/i18n/en.json | 17 +++++++---------- website/sidebars.json | 3 ++- 39 files changed, 17 insertions(+), 60 deletions(-) delete mode 100644 docs/best/syntax.md diff --git a/docs/README.md b/docs/README.md index 471e66029..0db70451b 100644 --- a/docs/README.md +++ b/docs/README.md @@ -1,7 +1,6 @@ --- -id: README -title: MobX -sidebar_label: Why MobX? +title: Introduction +sidebar_label: Introduction --- logo diff --git a/docs/best/actions.md b/docs/best/actions.md index a434f63cc..4491607a3 100644 --- a/docs/best/actions.md +++ b/docs/best/actions.md @@ -1,5 +1,4 @@ --- -id: actions sidebar_label: async actions & flows title: Writing asynchronous actions --- diff --git a/docs/best/decorators.md b/docs/best/decorators.md index 0f1fde4d6..3f1bcdd54 100644 --- a/docs/best/decorators.md +++ b/docs/best/decorators.md @@ -1,5 +1,4 @@ --- -id: decorators sidebar_label: How to (not) use decorator syntax title: How to (not) use decorators --- diff --git a/docs/best/devtools.md b/docs/best/devtools.md index 5ae0851e7..c1a765bc7 100644 --- a/docs/best/devtools.md +++ b/docs/best/devtools.md @@ -1,5 +1,4 @@ --- -id: devtools sidebar_label: MobX + React DevTools title: MobX + React DevTools --- diff --git a/docs/best/pitfalls.md b/docs/best/pitfalls.md index 83e4d8146..8876eb61a 100644 --- a/docs/best/pitfalls.md +++ b/docs/best/pitfalls.md @@ -1,5 +1,4 @@ --- -id: pitfalls sidebar_label: Common Pitfalls & Best Practices title: Common pitfalls & best practices --- diff --git a/docs/best/react-performance.md b/docs/best/react-performance.md index 5085d2b97..7f84deaf3 100644 --- a/docs/best/react-performance.md +++ b/docs/best/react-performance.md @@ -1,5 +1,4 @@ --- -id: react-performance sidebar_label: Optimizing React components title: Optimizing rendering React components --- diff --git a/docs/best/react.md b/docs/best/react.md index 59207db51..d2ec727fb 100644 --- a/docs/best/react.md +++ b/docs/best/react.md @@ -1,5 +1,4 @@ --- -id: react title: What does MobX react to? sidebar_label: Understanding what MobX reacts to --- diff --git a/docs/best/stateless-HMR.md b/docs/best/stateless-HMR.md index 467b4866c..1c6bc66bd 100644 --- a/docs/best/stateless-HMR.md +++ b/docs/best/stateless-HMR.md @@ -1,5 +1,4 @@ --- -id: stateless-HMR title: Hot Module Reloading with Stateless Components sidebar_label: Hot Module Reloading with Stateless Components --- diff --git a/docs/best/store.md b/docs/best/store.md index 988e4b2b7..085c7f80c 100644 --- a/docs/best/store.md +++ b/docs/best/store.md @@ -1,5 +1,4 @@ --- -id: store sidebar_label: Defining data stores title: Best Practices for building large scale maintainable projects --- diff --git a/docs/best/syntax.md b/docs/best/syntax.md deleted file mode 100644 index 3fb662e51..000000000 --- a/docs/best/syntax.md +++ /dev/null @@ -1,5 +0,0 @@ -
    - -# ES5 / ES6 / ES.next syntax - -Moved [here](http://mobxjs.github.io/mobx/best/decorators.html) diff --git a/docs/best/trace.md b/docs/best/trace.md index 801652949..da78eff6f 100644 --- a/docs/best/trace.md +++ b/docs/best/trace.md @@ -1,5 +1,4 @@ --- -id: trace sidebar_label: Using trace for debugging title: Using `trace` for debugging --- diff --git a/docs/faq/faq.md b/docs/faq/faq.md index 5fdf1ac2e..306073aa5 100644 --- a/docs/faq/faq.md +++ b/docs/faq/faq.md @@ -1,5 +1,4 @@ --- -id: faq sidebar_label: Frequently Asked Questions title: FAQ --- diff --git a/docs/intro/concepts.md b/docs/intro/concepts.md index 91791301d..0a37db422 100644 --- a/docs/intro/concepts.md +++ b/docs/intro/concepts.md @@ -1,10 +1,9 @@ --- -id: api -title: MobX Api Reference -sidebar_label: API overview +title: Concepts & Principles +sidebar_label: Concepts & Principles --- -
    +
    # Concepts & Principles diff --git a/docs/intro/overview.md b/docs/intro/overview.md index 970fdd46a..8084d64d4 100644 --- a/docs/intro/overview.md +++ b/docs/intro/overview.md @@ -1,7 +1,6 @@ --- -id: concepts -title: Concepts & Principles -sidebar_label: Concepts & Principles +title: The gist of MobX +sidebar_label: The gist of MobX ---
    diff --git a/docs/refguide/action.md b/docs/refguide/action.md index 04dae2cd8..1de0314a1 100644 --- a/docs/refguide/action.md +++ b/docs/refguide/action.md @@ -1,5 +1,4 @@ --- -id: action title: action sidebar_label: action --- diff --git a/docs/refguide/api.md b/docs/refguide/api.md index f8a6d5d78..9d4ad6d64 100644 --- a/docs/refguide/api.md +++ b/docs/refguide/api.md @@ -1,5 +1,4 @@ --- -id: api title: MobX Api Reference sidebar_label: API overview --- diff --git a/docs/refguide/array.md b/docs/refguide/array.md index 3a5282b42..15c9307d9 100644 --- a/docs/refguide/array.md +++ b/docs/refguide/array.md @@ -1,5 +1,4 @@ --- -id: array title: Observable Arrays sidebar_label: arrays --- diff --git a/docs/refguide/autorun.md b/docs/refguide/autorun.md index 62586170d..ad743663a 100644 --- a/docs/refguide/autorun.md +++ b/docs/refguide/autorun.md @@ -1,5 +1,4 @@ --- -id: autorun title: autorun sidebar_label: autorun --- diff --git a/docs/refguide/boxed.md b/docs/refguide/boxed.md index c116e0d40..c16e9d099 100644 --- a/docs/refguide/boxed.md +++ b/docs/refguide/boxed.md @@ -1,5 +1,4 @@ --- -id: boxed title: Boxed Values sidebar_label: boxed values --- diff --git a/docs/refguide/computed-decorator.md b/docs/refguide/computed-decorator.md index 6cbd89eff..902b680f5 100644 --- a/docs/refguide/computed-decorator.md +++ b/docs/refguide/computed-decorator.md @@ -1,5 +1,4 @@ --- -id: computed-decorator title: (@)computed sidebar_label: (@)computed --- diff --git a/docs/refguide/create-transformer.md b/docs/refguide/create-transformer.md index 4c945d73c..692c0462a 100644 --- a/docs/refguide/create-transformer.md +++ b/docs/refguide/create-transformer.md @@ -1,5 +1,4 @@ --- -id: create-transformer title: createTransformer sidebar_label: mobxUtils.createTransformer --- diff --git a/docs/refguide/expr.md b/docs/refguide/expr.md index f3c65fb62..500432c61 100644 --- a/docs/refguide/expr.md +++ b/docs/refguide/expr.md @@ -1,5 +1,4 @@ --- -id: expr sidebar_label: mobxUtils.expr --- diff --git a/docs/refguide/extend-observable.md b/docs/refguide/extend-observable.md index 07e392299..24b20989d 100644 --- a/docs/refguide/extend-observable.md +++ b/docs/refguide/extend-observable.md @@ -1,5 +1,4 @@ --- -id: extend-observable sidebar_label: extendObservable --- diff --git a/docs/refguide/extending.md b/docs/refguide/extending.md index 3e86c9bc5..fa5cb1b93 100644 --- a/docs/refguide/extending.md +++ b/docs/refguide/extending.md @@ -1,5 +1,4 @@ --- -id: extending sidebar_label: createAtom --- diff --git a/docs/refguide/map.md b/docs/refguide/map.md index 21090edc6..3fc2b4c1f 100644 --- a/docs/refguide/map.md +++ b/docs/refguide/map.md @@ -1,5 +1,4 @@ --- -id: map title: Observable Maps sidebar_label: maps --- diff --git a/docs/refguide/mobx-utils.md b/docs/refguide/mobx-utils.md index 619246199..51f2b8df5 100644 --- a/docs/refguide/mobx-utils.md +++ b/docs/refguide/mobx-utils.md @@ -1,5 +1,4 @@ --- -id: mobx-utils sidebar_label: MobX-utils --- diff --git a/docs/refguide/modifiers.md b/docs/refguide/modifiers.md index 69119df1f..ef3be42af 100644 --- a/docs/refguide/modifiers.md +++ b/docs/refguide/modifiers.md @@ -1,5 +1,4 @@ --- -id: modifiers title: Decorators sidebar_label: decorators --- diff --git a/docs/refguide/object-api.md b/docs/refguide/object-api.md index 6a62c4550..00566d7b4 100644 --- a/docs/refguide/object-api.md +++ b/docs/refguide/object-api.md @@ -1,5 +1,4 @@ --- -id: object-api sidebar_label: Object api title: Object api --- diff --git a/docs/refguide/object.md b/docs/refguide/object.md index c741c5c7e..b9c440d60 100644 --- a/docs/refguide/object.md +++ b/docs/refguide/object.md @@ -1,5 +1,4 @@ --- -id: object title: Observable Objects sidebar_label: objects --- diff --git a/docs/refguide/observable-decorator.md b/docs/refguide/observable-decorator.md index e89075e9e..10a7d4465 100644 --- a/docs/refguide/observable-decorator.md +++ b/docs/refguide/observable-decorator.md @@ -1,5 +1,4 @@ --- -id: observable-decorator title: @obsevable sidebar_label: @observable --- diff --git a/docs/refguide/observable.md b/docs/refguide/observable.md index 6bc5dfda1..b134d2df3 100644 --- a/docs/refguide/observable.md +++ b/docs/refguide/observable.md @@ -1,5 +1,4 @@ --- -id: observable title: observable sidebar_label: observable --- diff --git a/docs/refguide/observe.md b/docs/refguide/observe.md index 101fe4de9..b52249788 100644 --- a/docs/refguide/observe.md +++ b/docs/refguide/observe.md @@ -1,5 +1,4 @@ --- -id: observe sidebar_label: intercept & observe title: Intercept & Observe --- diff --git a/docs/refguide/observer-component.md b/docs/refguide/observer-component.md index 95b1bd03d..826bebb31 100644 --- a/docs/refguide/observer-component.md +++ b/docs/refguide/observer-component.md @@ -1,5 +1,4 @@ --- -id: observer-decorator title: (@)observer sidebar_label: (@)observer --- @@ -63,7 +62,7 @@ so we need to access it _in_ the component. Or in other words: values need to be ## ES5 support -In ES5 environments, observer components can be simple declared using `observer(React.createClass({ ...`. See also the [syntax guide](../best/syntax.md) +In ES5 environments, observer components can be simple declared using `observer(React.createClass({ ...`. See also the [syntax guide](../best/decorators.md) ## Stateless function components diff --git a/docs/refguide/reaction.md b/docs/refguide/reaction.md index 719207ef4..0aa296a4f 100644 --- a/docs/refguide/reaction.md +++ b/docs/refguide/reaction.md @@ -1,5 +1,4 @@ --- -id: reaction title: reaction sidebar_label: reaction --- diff --git a/docs/refguide/spy.md b/docs/refguide/spy.md index 9f11e7af4..4b398cdc2 100644 --- a/docs/refguide/spy.md +++ b/docs/refguide/spy.md @@ -1,5 +1,4 @@ --- -id: spy sidebar_label: spy title: Spy --- diff --git a/docs/refguide/tojson.md b/docs/refguide/tojson.md index 732c82016..988e12083 100644 --- a/docs/refguide/tojson.md +++ b/docs/refguide/tojson.md @@ -1,5 +1,4 @@ --- -id: tojson sidebar_label: toJS title: toJS --- diff --git a/docs/refguide/when.md b/docs/refguide/when.md index 91f0e2eb0..f49321902 100644 --- a/docs/refguide/when.md +++ b/docs/refguide/when.md @@ -1,5 +1,4 @@ --- -id: when title: when sidebar_label: when --- diff --git a/website/i18n/en.json b/website/i18n/en.json index 8e2f752f2..adc429b5a 100644 --- a/website/i18n/en.json +++ b/website/i18n/en.json @@ -37,9 +37,6 @@ "title": "Best Practices for building large scale maintainable projects", "sidebar_label": "Defining data stores" }, - "best/syntax": { - "title": "best/syntax" - }, "best/trace": { "title": "Using `trace` for debugging", "sidebar_label": "Using trace for debugging" @@ -48,20 +45,20 @@ "title": "FAQ", "sidebar_label": "Frequently Asked Questions" }, - "intro/api": { - "title": "MobX Api Reference", - "sidebar_label": "API overview" - }, "intro/concepts": { "title": "Concepts & Principles", "sidebar_label": "Concepts & Principles" }, + "intro/overview": { + "title": "The gist of MobX", + "sidebar_label": "The gist of MobX" + }, "LINKS": { "title": "LINKS" }, "README": { - "title": "MobX", - "sidebar_label": "Why MobX?" + "title": "Introduction", + "sidebar_label": "Introduction" }, "refguide/action": { "title": "action", @@ -135,7 +132,7 @@ "title": "Intercept & Observe", "sidebar_label": "intercept & observe" }, - "refguide/observer-decorator": { + "refguide/observer-component": { "title": "(@)observer", "sidebar_label": "(@)observer" }, diff --git a/website/sidebars.json b/website/sidebars.json index 1e0381c93..56a19911d 100755 --- a/website/sidebars.json +++ b/website/sidebars.json @@ -2,7 +2,8 @@ "docs": { "Introduction": [ "README", - "intro/concepts", + "intro/concepts", + "intro/overview", "refguide/api" ], "Making things observable": [ From de7acb59bece1d71de38bb3cf1c3f268a5dc850a Mon Sep 17 00:00:00 2001 From: Christopher Loverich Date: Fri, 13 Sep 2019 10:04:36 -0500 Subject: [PATCH 18/28] docs: fix codfund positioning --- docs/LINKS.md | 2 +- docs/best/actions.md | 2 +- docs/best/decorators.md | 2 +- docs/best/devtools.md | 2 +- docs/best/pitfalls.md | 2 +- docs/best/react-performance.md | 2 +- docs/best/react.md | 2 +- docs/best/stateless-HMR.md | 2 +- docs/best/store.md | 2 +- docs/best/trace.md | 2 +- docs/faq/faq.md | 2 +- docs/intro/overview.md | 2 +- docs/refguide/action.md | 2 +- docs/refguide/api.md | 2 +- docs/refguide/array.md | 2 +- docs/refguide/autorun.md | 2 +- docs/refguide/boxed.md | 2 +- docs/refguide/computed-decorator.md | 2 +- docs/refguide/create-transformer.md | 2 +- docs/refguide/expr.md | 2 +- docs/refguide/extend-observable.md | 2 +- docs/refguide/extending.md | 2 +- docs/refguide/map.md | 2 +- docs/refguide/modifiers.md | 2 +- docs/refguide/object-api.md | 2 +- docs/refguide/object.md | 2 +- docs/refguide/observable-decorator.md | 2 +- docs/refguide/observable.md | 2 +- docs/refguide/observe.md | 2 +- docs/refguide/observer-component.md | 2 +- docs/refguide/reaction.md | 2 +- docs/refguide/spy.md | 2 +- docs/refguide/tojson.md | 2 +- docs/refguide/when.md | 2 +- 34 files changed, 34 insertions(+), 34 deletions(-) diff --git a/docs/LINKS.md b/docs/LINKS.md index 89e4677e4..5e3cc5739 100644 --- a/docs/LINKS.md +++ b/docs/LINKS.md @@ -1,4 +1,4 @@ -
    +
    # Resources diff --git a/docs/best/actions.md b/docs/best/actions.md index 4491607a3..c94568b89 100644 --- a/docs/best/actions.md +++ b/docs/best/actions.md @@ -3,7 +3,7 @@ sidebar_label: async actions & flows title: Writing asynchronous actions --- -
    +
    # Writing asynchronous actions diff --git a/docs/best/decorators.md b/docs/best/decorators.md index 3f1bcdd54..50079a201 100644 --- a/docs/best/decorators.md +++ b/docs/best/decorators.md @@ -3,7 +3,7 @@ sidebar_label: How to (not) use decorator syntax title: How to (not) use decorators --- -
    +
    # How to (not) use decorators diff --git a/docs/best/devtools.md b/docs/best/devtools.md index c1a765bc7..0ab04622e 100644 --- a/docs/best/devtools.md +++ b/docs/best/devtools.md @@ -3,7 +3,7 @@ sidebar_label: MobX + React DevTools title: MobX + React DevTools --- -
    +
    # MobX + React DevTools diff --git a/docs/best/pitfalls.md b/docs/best/pitfalls.md index 8876eb61a..131700aa4 100644 --- a/docs/best/pitfalls.md +++ b/docs/best/pitfalls.md @@ -3,7 +3,7 @@ sidebar_label: Common Pitfalls & Best Practices title: Common pitfalls & best practices --- -
    +
    # Common pitfalls & best practices diff --git a/docs/best/react-performance.md b/docs/best/react-performance.md index 7f84deaf3..73d2fcc1c 100644 --- a/docs/best/react-performance.md +++ b/docs/best/react-performance.md @@ -3,7 +3,7 @@ sidebar_label: Optimizing React components title: Optimizing rendering React components --- -
    +
    # Optimizing rendering React components diff --git a/docs/best/react.md b/docs/best/react.md index d2ec727fb..ffc830b23 100644 --- a/docs/best/react.md +++ b/docs/best/react.md @@ -3,7 +3,7 @@ title: What does MobX react to? sidebar_label: Understanding what MobX reacts to --- -
    +
    # What does MobX react to? diff --git a/docs/best/stateless-HMR.md b/docs/best/stateless-HMR.md index 1c6bc66bd..088f9d87b 100644 --- a/docs/best/stateless-HMR.md +++ b/docs/best/stateless-HMR.md @@ -3,7 +3,7 @@ title: Hot Module Reloading with Stateless Components sidebar_label: Hot Module Reloading with Stateless Components --- -
    +
    # Hot Module Reloading with Stateless Components diff --git a/docs/best/store.md b/docs/best/store.md index 085c7f80c..014f78d1d 100644 --- a/docs/best/store.md +++ b/docs/best/store.md @@ -3,7 +3,7 @@ sidebar_label: Defining data stores title: Best Practices for building large scale maintainable projects --- -
    +
    # Best Practices for building large scale maintainable projects diff --git a/docs/best/trace.md b/docs/best/trace.md index da78eff6f..25513f1d9 100644 --- a/docs/best/trace.md +++ b/docs/best/trace.md @@ -3,7 +3,7 @@ sidebar_label: Using trace for debugging title: Using `trace` for debugging --- -
    +
    # Using `trace` for debugging diff --git a/docs/faq/faq.md b/docs/faq/faq.md index 306073aa5..504f70a2c 100644 --- a/docs/faq/faq.md +++ b/docs/faq/faq.md @@ -3,7 +3,7 @@ sidebar_label: Frequently Asked Questions title: FAQ --- -
    +
    ## FAQ diff --git a/docs/intro/overview.md b/docs/intro/overview.md index 8084d64d4..ec6059778 100644 --- a/docs/intro/overview.md +++ b/docs/intro/overview.md @@ -3,7 +3,7 @@ title: The gist of MobX sidebar_label: The gist of MobX --- -
    +
    # The gist of MobX diff --git a/docs/refguide/action.md b/docs/refguide/action.md index 1de0314a1..c1e977e27 100644 --- a/docs/refguide/action.md +++ b/docs/refguide/action.md @@ -3,7 +3,7 @@ title: action sidebar_label: action --- -
    +
    # action diff --git a/docs/refguide/api.md b/docs/refguide/api.md index 9d4ad6d64..76f62a41b 100644 --- a/docs/refguide/api.md +++ b/docs/refguide/api.md @@ -3,7 +3,7 @@ title: MobX Api Reference sidebar_label: API overview --- -
    +
    # MobX Api Reference diff --git a/docs/refguide/array.md b/docs/refguide/array.md index 15c9307d9..6c19673b3 100644 --- a/docs/refguide/array.md +++ b/docs/refguide/array.md @@ -3,7 +3,7 @@ title: Observable Arrays sidebar_label: arrays --- -
    +
    ## Observable Arrays diff --git a/docs/refguide/autorun.md b/docs/refguide/autorun.md index ad743663a..8be274d88 100644 --- a/docs/refguide/autorun.md +++ b/docs/refguide/autorun.md @@ -3,7 +3,7 @@ title: autorun sidebar_label: autorun --- -
    +
    # Autorun diff --git a/docs/refguide/boxed.md b/docs/refguide/boxed.md index c16e9d099..09eebe872 100644 --- a/docs/refguide/boxed.md +++ b/docs/refguide/boxed.md @@ -3,7 +3,7 @@ title: Boxed Values sidebar_label: boxed values --- -
    +
    ## Primitive values and references diff --git a/docs/refguide/computed-decorator.md b/docs/refguide/computed-decorator.md index 902b680f5..baad7aa88 100644 --- a/docs/refguide/computed-decorator.md +++ b/docs/refguide/computed-decorator.md @@ -3,7 +3,7 @@ title: (@)computed sidebar_label: (@)computed --- -
    +
    # (@)computed diff --git a/docs/refguide/create-transformer.md b/docs/refguide/create-transformer.md index 692c0462a..8a7d21360 100644 --- a/docs/refguide/create-transformer.md +++ b/docs/refguide/create-transformer.md @@ -3,7 +3,7 @@ title: createTransformer sidebar_label: mobxUtils.createTransformer --- -
    +
    # createTransformer diff --git a/docs/refguide/expr.md b/docs/refguide/expr.md index 500432c61..77ba84b00 100644 --- a/docs/refguide/expr.md +++ b/docs/refguide/expr.md @@ -2,7 +2,7 @@ sidebar_label: mobxUtils.expr --- -
    +
    # Expr diff --git a/docs/refguide/extend-observable.md b/docs/refguide/extend-observable.md index 24b20989d..fc4a955fe 100644 --- a/docs/refguide/extend-observable.md +++ b/docs/refguide/extend-observable.md @@ -2,7 +2,7 @@ sidebar_label: extendObservable --- -
    +
    # extendObservable diff --git a/docs/refguide/extending.md b/docs/refguide/extending.md index fa5cb1b93..8b6b91f3b 100644 --- a/docs/refguide/extending.md +++ b/docs/refguide/extending.md @@ -2,7 +2,7 @@ sidebar_label: createAtom --- -
    +
    # Creating observable data structures and reactions diff --git a/docs/refguide/map.md b/docs/refguide/map.md index 3fc2b4c1f..22417a294 100644 --- a/docs/refguide/map.md +++ b/docs/refguide/map.md @@ -3,7 +3,7 @@ title: Observable Maps sidebar_label: maps --- -
    +
    # Observable Maps diff --git a/docs/refguide/modifiers.md b/docs/refguide/modifiers.md index ef3be42af..f20b7036f 100644 --- a/docs/refguide/modifiers.md +++ b/docs/refguide/modifiers.md @@ -3,7 +3,7 @@ title: Decorators sidebar_label: decorators --- -
    +
    # Decorators diff --git a/docs/refguide/object-api.md b/docs/refguide/object-api.md index 00566d7b4..0bd7482f2 100644 --- a/docs/refguide/object-api.md +++ b/docs/refguide/object-api.md @@ -3,7 +3,7 @@ sidebar_label: Object api title: Object api --- -
    +
    ## Direct Observable manipulation diff --git a/docs/refguide/object.md b/docs/refguide/object.md index b9c440d60..de0c666f9 100644 --- a/docs/refguide/object.md +++ b/docs/refguide/object.md @@ -3,7 +3,7 @@ title: Observable Objects sidebar_label: objects --- -
    +
    ## Observable Objects diff --git a/docs/refguide/observable-decorator.md b/docs/refguide/observable-decorator.md index 10a7d4465..420b0440e 100644 --- a/docs/refguide/observable-decorator.md +++ b/docs/refguide/observable-decorator.md @@ -3,7 +3,7 @@ title: @obsevable sidebar_label: @observable --- -
    +
    # @observable diff --git a/docs/refguide/observable.md b/docs/refguide/observable.md index b134d2df3..41eb3b9b5 100644 --- a/docs/refguide/observable.md +++ b/docs/refguide/observable.md @@ -3,7 +3,7 @@ title: observable sidebar_label: observable --- -
    +
    # observable diff --git a/docs/refguide/observe.md b/docs/refguide/observe.md index b52249788..29fb5ff9d 100644 --- a/docs/refguide/observe.md +++ b/docs/refguide/observe.md @@ -3,7 +3,7 @@ sidebar_label: intercept & observe title: Intercept & Observe --- -
    +
    # Intercept & Observe diff --git a/docs/refguide/observer-component.md b/docs/refguide/observer-component.md index 826bebb31..2fdcb1cf9 100644 --- a/docs/refguide/observer-component.md +++ b/docs/refguide/observer-component.md @@ -3,7 +3,7 @@ title: (@)observer sidebar_label: (@)observer --- -
    +
    # @observer diff --git a/docs/refguide/reaction.md b/docs/refguide/reaction.md index 0aa296a4f..45ff034d0 100644 --- a/docs/refguide/reaction.md +++ b/docs/refguide/reaction.md @@ -3,7 +3,7 @@ title: reaction sidebar_label: reaction --- -
    +
    # Reaction diff --git a/docs/refguide/spy.md b/docs/refguide/spy.md index 4b398cdc2..399f68532 100644 --- a/docs/refguide/spy.md +++ b/docs/refguide/spy.md @@ -3,7 +3,7 @@ sidebar_label: spy title: Spy --- -
    +
    # Spy diff --git a/docs/refguide/tojson.md b/docs/refguide/tojson.md index 988e12083..3ef68ca44 100644 --- a/docs/refguide/tojson.md +++ b/docs/refguide/tojson.md @@ -3,7 +3,7 @@ sidebar_label: toJS title: toJS --- -
    +
    # toJS diff --git a/docs/refguide/when.md b/docs/refguide/when.md index f49321902..1a7456eaa 100644 --- a/docs/refguide/when.md +++ b/docs/refguide/when.md @@ -3,7 +3,7 @@ title: when sidebar_label: when --- -
    +
    # when From 68e9a92ea9af6eb8d875adc91177dad5fd0b4738 Mon Sep 17 00:00:00 2001 From: Christopher Loverich Date: Fri, 13 Sep 2019 10:17:05 -0500 Subject: [PATCH 19/28] docs: disable_title --- docs/README.md | 1 + docs/best/actions.md | 3 ++- docs/best/decorators.md | 3 ++- docs/best/devtools.md | 4 ++-- docs/best/pitfalls.md | 4 ++-- docs/best/react-performance.md | 4 ++-- docs/best/react.md | 4 ++-- docs/best/stateless-HMR.md | 4 ++-- docs/best/store.md | 4 ++-- docs/best/trace.md | 4 ++-- docs/faq/faq.md | 4 ++-- docs/intro/concepts.md | 4 ++-- docs/intro/overview.md | 4 ++-- docs/refguide/action.md | 4 ++-- docs/refguide/api.md | 4 ++-- docs/refguide/array.md | 4 ++-- docs/refguide/autorun.md | 4 ++-- docs/refguide/boxed.md | 4 ++-- docs/refguide/computed-decorator.md | 4 ++-- docs/refguide/create-transformer.md | 4 ++-- docs/refguide/expr.md | 4 ++-- docs/refguide/extend-observable.md | 4 ++-- docs/refguide/extending.md | 4 ++-- docs/refguide/map.md | 4 ++-- docs/refguide/mobx-utils.md | 1 + docs/refguide/modifiers.md | 4 ++-- docs/refguide/object-api.md | 4 ++-- docs/refguide/object.md | 4 ++-- docs/refguide/observable-decorator.md | 4 ++-- docs/refguide/observable.md | 4 ++-- docs/refguide/observe.md | 4 ++-- docs/refguide/observer-component.md | 4 ++-- docs/refguide/reaction.md | 4 ++-- docs/refguide/spy.md | 4 ++-- docs/refguide/tojson.md | 4 ++-- docs/refguide/when.md | 4 ++-- 36 files changed, 70 insertions(+), 66 deletions(-) diff --git a/docs/README.md b/docs/README.md index 0db70451b..466d561ea 100644 --- a/docs/README.md +++ b/docs/README.md @@ -1,6 +1,7 @@ --- title: Introduction sidebar_label: Introduction +hide_title: true --- logo diff --git a/docs/best/actions.md b/docs/best/actions.md index c94568b89..8645b9cec 100644 --- a/docs/best/actions.md +++ b/docs/best/actions.md @@ -1,11 +1,12 @@ --- sidebar_label: async actions & flows title: Writing asynchronous actions +hide_title: true --- -
    # Writing asynchronous actions +
    The `action` wrapper / decorator only affects the currently running function, not functions that are scheduled (but not invoked) by the current function! This means that if you have a `setTimeout`, promise`.then` or `async` construction, and in that callback some more state is changed, those callbacks should be wrapped in `action` as well! There are several ways to create asynchronous actions. No approach is strictly better than the other, but this section just list different approaches you can take to writing asynchronous code. diff --git a/docs/best/decorators.md b/docs/best/decorators.md index 50079a201..28188ee7d 100644 --- a/docs/best/decorators.md +++ b/docs/best/decorators.md @@ -1,11 +1,12 @@ --- sidebar_label: How to (not) use decorator syntax title: How to (not) use decorators +hide_title: true --- -
    # How to (not) use decorators +
    Using ES.next decorators in MobX is optional. This section explains how to use them, or how to avoid them. diff --git a/docs/best/devtools.md b/docs/best/devtools.md index 0ab04622e..473daa59c 100644 --- a/docs/best/devtools.md +++ b/docs/best/devtools.md @@ -1,11 +1,11 @@ --- sidebar_label: MobX + React DevTools title: MobX + React DevTools +hide_title: true --- -
    - # MobX + React DevTools +
    egghead.io lesson 2: devtools diff --git a/docs/best/pitfalls.md b/docs/best/pitfalls.md index 131700aa4..3343c49d6 100644 --- a/docs/best/pitfalls.md +++ b/docs/best/pitfalls.md @@ -1,11 +1,11 @@ --- sidebar_label: Common Pitfalls & Best Practices title: Common pitfalls & best practices +hide_title: true --- -
    - # Common pitfalls & best practices +
    Stuck with MobX? This section contains a list of common issues people new to MobX might run into. diff --git a/docs/best/react-performance.md b/docs/best/react-performance.md index 73d2fcc1c..7312534d2 100644 --- a/docs/best/react-performance.md +++ b/docs/best/react-performance.md @@ -1,11 +1,11 @@ --- sidebar_label: Optimizing React components title: Optimizing rendering React components +hide_title: true --- -
    - # Optimizing rendering React components +
    MobX is very fast, [often even faster than Redux](https://twitter.com/mweststrate/status/718444275239882753). But here are some tips to get most out of React and MobX. Note that most tips apply to React in general and are not specific for MobX. diff --git a/docs/best/react.md b/docs/best/react.md index ffc830b23..bc61dd724 100644 --- a/docs/best/react.md +++ b/docs/best/react.md @@ -1,11 +1,11 @@ --- title: What does MobX react to? sidebar_label: Understanding what MobX reacts to +hide_title: true --- -
    - # What does MobX react to? +
    MobX usually reacts to exactly the things you expect it to. Which means that in 90% of your use cases mobx "just works". diff --git a/docs/best/stateless-HMR.md b/docs/best/stateless-HMR.md index 088f9d87b..2d4560c1f 100644 --- a/docs/best/stateless-HMR.md +++ b/docs/best/stateless-HMR.md @@ -1,11 +1,11 @@ --- title: Hot Module Reloading with Stateless Components sidebar_label: Hot Module Reloading with Stateless Components +hide_title: true --- -
    - # Hot Module Reloading with Stateless Components +
    One thing that can be a challenge when getting started with MobX (and React in general) is understanding why Hot Module Reloading (HMR) sometimes breaks. When you initially get it working, it seems like magic (and it kind of is), however there's at least one rough edge with regard to HMR and React: stateless components. Since stateless components don't explicitly identify themselves as React components, HMR doesn't quite know what to do with them, and so you'll often see warnings in your console like this: diff --git a/docs/best/store.md b/docs/best/store.md index 014f78d1d..17254c342 100644 --- a/docs/best/store.md +++ b/docs/best/store.md @@ -1,11 +1,11 @@ --- sidebar_label: Defining data stores title: Best Practices for building large scale maintainable projects +hide_title: true --- -
    - # Best Practices for building large scale maintainable projects +
    This section contains some best practices we discovered at Mendix while working with MobX. This section is opinionated and you are in no way forced to apply these practices. diff --git a/docs/best/trace.md b/docs/best/trace.md index 25513f1d9..ba859baa7 100644 --- a/docs/best/trace.md +++ b/docs/best/trace.md @@ -1,11 +1,11 @@ --- sidebar_label: Using trace for debugging title: Using `trace` for debugging +hide_title: true --- -
    - # Using `trace` for debugging +
    Trace is a small utility that helps to find out why your computed values, reactions or components are re-evaluating. diff --git a/docs/faq/faq.md b/docs/faq/faq.md index 504f70a2c..d1f2d28c2 100644 --- a/docs/faq/faq.md +++ b/docs/faq/faq.md @@ -1,11 +1,11 @@ --- sidebar_label: Frequently Asked Questions title: FAQ +hide_title: true --- -
    - ## FAQ +
    ##### Which browsers are supported? diff --git a/docs/intro/concepts.md b/docs/intro/concepts.md index 0a37db422..7b7861a07 100644 --- a/docs/intro/concepts.md +++ b/docs/intro/concepts.md @@ -1,11 +1,11 @@ --- title: Concepts & Principles sidebar_label: Concepts & Principles +hide_title: true --- -
    - # Concepts & Principles +
    ## Concepts diff --git a/docs/intro/overview.md b/docs/intro/overview.md index ec6059778..6805ef3ad 100644 --- a/docs/intro/overview.md +++ b/docs/intro/overview.md @@ -1,11 +1,11 @@ --- title: The gist of MobX sidebar_label: The gist of MobX +hide_title: true --- -
    - # The gist of MobX +
    egghead.io lesson 1: observable & observer diff --git a/docs/refguide/action.md b/docs/refguide/action.md index c1e977e27..fb08c450f 100644 --- a/docs/refguide/action.md +++ b/docs/refguide/action.md @@ -1,11 +1,11 @@ --- title: action sidebar_label: action +hide_title: true --- -
    - # action +
    egghead.io lesson 5: actions diff --git a/docs/refguide/api.md b/docs/refguide/api.md index 76f62a41b..040b5f5ad 100644 --- a/docs/refguide/api.md +++ b/docs/refguide/api.md @@ -1,11 +1,11 @@ --- title: MobX Api Reference sidebar_label: API overview +hide_title: true --- -
    - # MobX Api Reference +
    **Applies to MobX 4 and higher** diff --git a/docs/refguide/array.md b/docs/refguide/array.md index 6c19673b3..4ed3f6622 100644 --- a/docs/refguide/array.md +++ b/docs/refguide/array.md @@ -1,11 +1,11 @@ --- title: Observable Arrays sidebar_label: arrays +hide_title: true --- -
    - ## Observable Arrays +
    Similar to objects, arrays can be made observable using `observable.array(values?)` or by passing an array to `observable`. This works recursively as well, so all (future) values of the array will also be observable. diff --git a/docs/refguide/autorun.md b/docs/refguide/autorun.md index 8be274d88..09f32c331 100644 --- a/docs/refguide/autorun.md +++ b/docs/refguide/autorun.md @@ -1,11 +1,11 @@ --- title: autorun sidebar_label: autorun +hide_title: true --- -
    - # Autorun +
    egghead.io lesson 9: custom reactions diff --git a/docs/refguide/boxed.md b/docs/refguide/boxed.md index 09eebe872..ce4de4b79 100644 --- a/docs/refguide/boxed.md +++ b/docs/refguide/boxed.md @@ -1,11 +1,11 @@ --- title: Boxed Values sidebar_label: boxed values +hide_title: true --- -
    - ## Primitive values and references +
    All primitive values in JavaScript are immutable and hence per definition not observable. Usually that is fine, as MobX usually can just make the _property_ that contains the value observable. diff --git a/docs/refguide/computed-decorator.md b/docs/refguide/computed-decorator.md index baad7aa88..04658709a 100644 --- a/docs/refguide/computed-decorator.md +++ b/docs/refguide/computed-decorator.md @@ -1,11 +1,11 @@ --- title: (@)computed sidebar_label: (@)computed +hide_title: true --- -
    - # (@)computed +
    egghead.io lesson 3: computed values diff --git a/docs/refguide/create-transformer.md b/docs/refguide/create-transformer.md index 8a7d21360..3aa456f3e 100644 --- a/docs/refguide/create-transformer.md +++ b/docs/refguide/create-transformer.md @@ -1,11 +1,11 @@ --- title: createTransformer sidebar_label: mobxUtils.createTransformer +hide_title: true --- -
    - # createTransformer +
    Provided by the `mobx-utils` package. diff --git a/docs/refguide/expr.md b/docs/refguide/expr.md index 77ba84b00..d354647f1 100644 --- a/docs/refguide/expr.md +++ b/docs/refguide/expr.md @@ -1,10 +1,10 @@ --- sidebar_label: mobxUtils.expr +hide_title: true --- -
    - # Expr +
    Provided by the `mobx-utils` package. diff --git a/docs/refguide/extend-observable.md b/docs/refguide/extend-observable.md index fc4a955fe..f4b25049b 100644 --- a/docs/refguide/extend-observable.md +++ b/docs/refguide/extend-observable.md @@ -1,10 +1,10 @@ --- sidebar_label: extendObservable +hide_title: true --- -
    - # extendObservable +
    `extendObservable(target, properties, decorators?, options?)` diff --git a/docs/refguide/extending.md b/docs/refguide/extending.md index 8b6b91f3b..558288f51 100644 --- a/docs/refguide/extending.md +++ b/docs/refguide/extending.md @@ -1,10 +1,10 @@ --- sidebar_label: createAtom +hide_title: true --- -
    - # Creating observable data structures and reactions +
    ## Atoms diff --git a/docs/refguide/map.md b/docs/refguide/map.md index 22417a294..c270eb169 100644 --- a/docs/refguide/map.md +++ b/docs/refguide/map.md @@ -1,11 +1,11 @@ --- title: Observable Maps sidebar_label: maps +hide_title: true --- -
    - # Observable Maps +
    ## `observable.map(values, options?)` diff --git a/docs/refguide/mobx-utils.md b/docs/refguide/mobx-utils.md index 51f2b8df5..49e993759 100644 --- a/docs/refguide/mobx-utils.md +++ b/docs/refguide/mobx-utils.md @@ -1,5 +1,6 @@ --- sidebar_label: MobX-utils +hide_title: true --- # MobX-utils diff --git a/docs/refguide/modifiers.md b/docs/refguide/modifiers.md index f20b7036f..eac31323d 100644 --- a/docs/refguide/modifiers.md +++ b/docs/refguide/modifiers.md @@ -1,11 +1,11 @@ --- title: Decorators sidebar_label: decorators +hide_title: true --- -
    - # Decorators +
    In MobX there is a set of decorators that defines how observable properties will behave. diff --git a/docs/refguide/object-api.md b/docs/refguide/object-api.md index 0bd7482f2..0f294efed 100644 --- a/docs/refguide/object-api.md +++ b/docs/refguide/object-api.md @@ -1,11 +1,11 @@ --- sidebar_label: Object api title: Object api +hide_title: true --- -
    - ## Direct Observable manipulation +
    There is now an utility API that enables manipulating observable maps, objects and arrays with the same API. These api's are fully reactive, which means that even new property declarations can be detected by mobx if `set` is used to add them, and `values` or `keys` to iterate them. diff --git a/docs/refguide/object.md b/docs/refguide/object.md index de0c666f9..85fdf8bc4 100644 --- a/docs/refguide/object.md +++ b/docs/refguide/object.md @@ -1,11 +1,11 @@ --- title: Observable Objects sidebar_label: objects +hide_title: true --- -
    - ## Observable Objects +
    Usage `observable.object(props, decorators?, options?)` diff --git a/docs/refguide/observable-decorator.md b/docs/refguide/observable-decorator.md index 420b0440e..ec7ba1d13 100644 --- a/docs/refguide/observable-decorator.md +++ b/docs/refguide/observable-decorator.md @@ -1,11 +1,11 @@ --- title: @obsevable sidebar_label: @observable +hide_title: true --- -
    - # @observable +
    egghead.io lesson 1: observable & observer diff --git a/docs/refguide/observable.md b/docs/refguide/observable.md index 41eb3b9b5..a8223c6f2 100644 --- a/docs/refguide/observable.md +++ b/docs/refguide/observable.md @@ -1,11 +1,11 @@ --- title: observable sidebar_label: observable +hide_title: true --- -
    - # observable +
    egghead.io lesson 1: observable & observer diff --git a/docs/refguide/observe.md b/docs/refguide/observe.md index 29fb5ff9d..d5aaf2e92 100644 --- a/docs/refguide/observe.md +++ b/docs/refguide/observe.md @@ -1,11 +1,11 @@ --- sidebar_label: intercept & observe title: Intercept & Observe +hide_title: true --- -
    - # Intercept & Observe +
    `observe` and `intercept` can be used to monitor the changes of a single observable (they ***don't*** track nested observables). `intercept` can be used to detect and modify mutations before they are applied to the observable. diff --git a/docs/refguide/observer-component.md b/docs/refguide/observer-component.md index 2fdcb1cf9..f848e25f6 100644 --- a/docs/refguide/observer-component.md +++ b/docs/refguide/observer-component.md @@ -1,11 +1,11 @@ --- title: (@)observer sidebar_label: (@)observer +hide_title: true --- -
    - # @observer +
    egghead.io lesson 1: observable & observer diff --git a/docs/refguide/reaction.md b/docs/refguide/reaction.md index 45ff034d0..e6bcd1951 100644 --- a/docs/refguide/reaction.md +++ b/docs/refguide/reaction.md @@ -1,11 +1,11 @@ --- title: reaction sidebar_label: reaction +hide_title: true --- -
    - # Reaction +
    Usage: `reaction(() => data, (data, reaction) => { sideEffect }, options?)`. diff --git a/docs/refguide/spy.md b/docs/refguide/spy.md index 399f68532..613739876 100644 --- a/docs/refguide/spy.md +++ b/docs/refguide/spy.md @@ -1,11 +1,11 @@ --- sidebar_label: spy title: Spy +hide_title: true --- -
    - # Spy +
    Usage: `spy(listener)`. Registers a global spy listener that listens to all events that happen in MobX. diff --git a/docs/refguide/tojson.md b/docs/refguide/tojson.md index 3ef68ca44..0c9894a4e 100644 --- a/docs/refguide/tojson.md +++ b/docs/refguide/tojson.md @@ -1,11 +1,11 @@ --- sidebar_label: toJS title: toJS +hide_title: true --- -
    - # toJS +
    `toJS(value, options?)` diff --git a/docs/refguide/when.md b/docs/refguide/when.md index 1a7456eaa..17add9d46 100644 --- a/docs/refguide/when.md +++ b/docs/refguide/when.md @@ -1,11 +1,11 @@ --- title: when sidebar_label: when +hide_title: true --- -
    - # when +
    egghead.io lesson 9: custom reactions From 4bd43886debfe318f63a132869b53c8b92993978 Mon Sep 17 00:00:00 2001 From: Christopher Loverich Date: Tue, 17 Sep 2019 20:24:03 -0500 Subject: [PATCH 20/28] docs: add upstream gh-pages changes - f776568f4be303720fdfc3765e06bb6bfcae459b - 053bb1bae39eadc4a4b51167ebc7021e45320bde - 0e0dcd50d3640cfbc1ded22dafef69f9443cf223 - cd28d15cb8fae8e1ca0ede0c1ee08c88a7716d54 --- README.md | 4 ++-- docs/README.md | 4 ++-- docs/best/react.md | 6 +++--- docs/refguide/observe.md | 4 ++-- docs/refguide/observer-component.md | 2 +- 5 files changed, 10 insertions(+), 10 deletions(-) diff --git a/README.md b/README.md index 9733e3de5..6810968a0 100644 --- a/README.md +++ b/README.md @@ -62,7 +62,7 @@ _Tip: Consider using the faster and smaller ES6 build if targetting a modern env - Egghead.io course - [Ten minute, interactive MobX + React tutorial](https://mobxjs.github.io/mobx/getting-started.html) -- [The MobX book](https://books.google.nl/books?id=ALFmDwAAQBAJ&pg=PP1&lpg=PP1&dq=michel+weststrate+mobx+quick+start+guide:+supercharge+the+client+state+in+your+react+apps+with+mobx&source=bl&ots=D460fxti0F&sig=ivDGTxsPNwlOjLHrpKF1nweZFl8&hl=nl&sa=X&ved=2ahUKEwiwl8XO--ncAhWPmbQKHWOYBqIQ6AEwAnoECAkQAQ#v=onepage&q=michel%20weststrate%20mobx%20quick%20start%20guide%3A%20supercharge%20the%20client%20state%20in%20your%20react%20apps%20with%20mobx&f=false) by Pavan Podila and Michel Weststrate (which despite it's name is in-depth!) +- [The MobX book](https://books.google.nl/books?id=ALFmDwAAQBAJ&pg=PP1&lpg=PP1&dq=michel+weststrate+mobx+quick+start+guide:+supercharge+the+client+state+in+your+react+apps+with+mobx&source=bl&ots=D460fxti0F&sig=ivDGTxsPNwlOjLHrpKF1nweZFl8&hl=nl&sa=X&ved=2ahUKEwiwl8XO--ncAhWPmbQKHWOYBqIQ6AEwAnoECAkQAQ#v=onepage&q=michel%20weststrate%20mobx%20quick%20start%20guide%3A%20supercharge%20the%20client%20state%20in%20your%20react%20apps%20with%20mobx&f=false) by Pavan Podila and Michel Weststrate (which despite its name is in-depth!) - [Official MobX 4 documentation and API overview](https://mobxjs.github.io/mobx/refguide/api.html) ([MobX 3](https://github.com/mobxjs/mobx/blob/54557dc319b04e92e31cb87427bef194ec1c549c/docs/refguide/api.md), [MobX 2](https://github.com/mobxjs/mobx/blob/7c9e7c86e0c6ead141bb0539d33143d0e1f576dd/docs/refguide/api.md)) - [How to (not) use decorators](https://mobx.js.org/best/decorators.html) - Videos: @@ -303,7 +303,7 @@ And finally, kudos to all the people that believed in, tried, validated and even ## Further resources and documentation -- [The MobX book](https://books.google.nl/books?id=ALFmDwAAQBAJ&pg=PP1&lpg=PP1&dq=michel+weststrate+mobx+quick+start+guide:+supercharge+the+client+state+in+your+react+apps+with+mobx&source=bl&ots=D460fxti0F&sig=ivDGTxsPNwlOjLHrpKF1nweZFl8&hl=nl&sa=X&ved=2ahUKEwiwl8XO--ncAhWPmbQKHWOYBqIQ6AEwAnoECAkQAQ#v=onepage&q=michel%20weststrate%20mobx%20quick%20start%20guide%3A%20supercharge%20the%20client%20state%20in%20your%20react%20apps%20with%20mobx&f=false) by Pavan Podila and Michel Weststrate (which despite it's name is in-depth!) +- [The MobX book](https://books.google.nl/books?id=ALFmDwAAQBAJ&pg=PP1&lpg=PP1&dq=michel+weststrate+mobx+quick+start+guide:+supercharge+the+client+state+in+your+react+apps+with+mobx&source=bl&ots=D460fxti0F&sig=ivDGTxsPNwlOjLHrpKF1nweZFl8&hl=nl&sa=X&ved=2ahUKEwiwl8XO--ncAhWPmbQKHWOYBqIQ6AEwAnoECAkQAQ#v=onepage&q=michel%20weststrate%20mobx%20quick%20start%20guide%3A%20supercharge%20the%20client%20state%20in%20your%20react%20apps%20with%20mobx&f=false) by Pavan Podila and Michel Weststrate (which despite its name is in-depth!) - [MobX homepage](http://mobxjs.github.io/mobx/faq/blogs.html) - [API overview](http://mobxjs.github.io/mobx/refguide/api.html) - [Tutorials, Blogs & Videos](http://mobxjs.github.io/mobx/faq/blogs.html) diff --git a/docs/README.md b/docs/README.md index 466d561ea..797c5a8be 100644 --- a/docs/README.md +++ b/docs/README.md @@ -63,7 +63,7 @@ _Tip: the main entry point of the MobX 5 package ships with ES5 code for backwar - egghead.io course - [Ten minute, interactive MobX + React tutorial](https://mobxjs.github.io/mobx/getting-started.html) -- [The MobX book](https://books.google.nl/books?id=ALFmDwAAQBAJ&pg=PP1&lpg=PP1&dq=michel+weststrate+mobx+quick+start+guide:+supercharge+the+client+state+in+your+react+apps+with+mobx&source=bl&ots=D460fxti0F&sig=ivDGTxsPNwlOjLHrpKF1nweZFl8&hl=nl&sa=X&ved=2ahUKEwiwl8XO--ncAhWPmbQKHWOYBqIQ6AEwAnoECAkQAQ#v=onepage&q=michel%20weststrate%20mobx%20quick%20start%20guide%3A%20supercharge%20the%20client%20state%20in%20your%20react%20apps%20with%20mobx&f=false) by Pavan Podila and Michel Weststrate (which despite it's name is in-depth!) +- [The MobX book](https://books.google.nl/books?id=ALFmDwAAQBAJ&pg=PP1&lpg=PP1&dq=michel+weststrate+mobx+quick+start+guide:+supercharge+the+client+state+in+your+react+apps+with+mobx&source=bl&ots=D460fxti0F&sig=ivDGTxsPNwlOjLHrpKF1nweZFl8&hl=nl&sa=X&ved=2ahUKEwiwl8XO--ncAhWPmbQKHWOYBqIQ6AEwAnoECAkQAQ#v=onepage&q=michel%20weststrate%20mobx%20quick%20start%20guide%3A%20supercharge%20the%20client%20state%20in%20your%20react%20apps%20with%20mobx&f=false) by Pavan Podila and Michel Weststrate (which despite its name is in-depth!) - [Official MobX 4 documentation and API overview](https://mobxjs.github.io/mobx/refguide/api.html) ([MobX 3](https://github.com/mobxjs/mobx/blob/54557dc319b04e92e31cb87427bef194ec1c549c/docs/refguide/api.md), [MobX 2](https://github.com/mobxjs/mobx/blob/7c9e7c86e0c6ead141bb0539d33143d0e1f576dd/docs/refguide/api.md)) - Videos: - [ReactNext 2016: Real World MobX](https://www.youtube.com/watch?v=Aws40KOx90U) - 40m [slides](https://docs.google.com/presentation/d/1DrI6Hc2xIPTLBkfNH8YczOcPXQTOaCIcDESdyVfG_bE/edit?usp=sharing) @@ -299,7 +299,7 @@ And finally kudos for all the people that believed in, tried, validated and even ## Further resources and documentation -- [The MobX book](https://books.google.nl/books?id=ALFmDwAAQBAJ&pg=PP1&lpg=PP1&dq=michel+weststrate+mobx+quick+start+guide:+supercharge+the+client+state+in+your+react+apps+with+mobx&source=bl&ots=D460fxti0F&sig=ivDGTxsPNwlOjLHrpKF1nweZFl8&hl=nl&sa=X&ved=2ahUKEwiwl8XO--ncAhWPmbQKHWOYBqIQ6AEwAnoECAkQAQ#v=onepage&q=michel%20weststrate%20mobx%20quick%20start%20guide%3A%20supercharge%20the%20client%20state%20in%20your%20react%20apps%20with%20mobx&f=false) by Pavan Podila and Michel Weststrate (which despite it's name is in-depth!) +- [The MobX book](https://books.google.nl/books?id=ALFmDwAAQBAJ&pg=PP1&lpg=PP1&dq=michel+weststrate+mobx+quick+start+guide:+supercharge+the+client+state+in+your+react+apps+with+mobx&source=bl&ots=D460fxti0F&sig=ivDGTxsPNwlOjLHrpKF1nweZFl8&hl=nl&sa=X&ved=2ahUKEwiwl8XO--ncAhWPmbQKHWOYBqIQ6AEwAnoECAkQAQ#v=onepage&q=michel%20weststrate%20mobx%20quick%20start%20guide%3A%20supercharge%20the%20client%20state%20in%20your%20react%20apps%20with%20mobx&f=false) by Pavan Podila and Michel Weststrate (which despite its name is in-depth!) - [MobX homepage](http://mobxjs.github.io/mobx/faq/blogs.html) - [API overview](http://mobxjs.github.io/mobx/refguide/api.html) - [Tutorials, Blogs & Videos](http://mobxjs.github.io/mobx/faq/blogs.html) diff --git a/docs/best/react.md b/docs/best/react.md index bc61dd724..a4eb6d288 100644 --- a/docs/best/react.md +++ b/docs/best/react.md @@ -42,11 +42,11 @@ In memory that looks as follows. The green boxes indicate _observable_ propertie ![MobX reacts to changing references](../assets/observed-refs.png) -Now what MobX basically does is recording which _arrows_ you use in your function. After that, it will re-run whenever one of this _arrows_ changes; when they start to refer to something else. +Now what MobX basically does is recording which _arrows_ you use in your function. After that, it will re-run whenever one of these _arrows_ changes; when they start to refer to something else. ## Examples -Lets show that with a bunch of examples (based on the `message` variable defined above): +Let's show that with a bunch of examples (based on the `message` variable defined above): #### Correct: dereference inside the tracked function @@ -347,7 +347,7 @@ In general this is quite obvious and rarely causes issues. ## MobX only tracks data accessed for `observer` components if they are directly accessed by `render` -A common mistake made with `observer` is that it doesnt track data that syntactically seems parent of the `observer` component, +A common mistake made with `observer` is that it doesn't track data that syntactically seems parent of the `observer` component, but in practice is actually rendered out by a different component. This often happens when render callbacks of components are passed in first class to another component. Take for example the following contrived example: diff --git a/docs/refguide/observe.md b/docs/refguide/observe.md index d5aaf2e92..d790d0928 100644 --- a/docs/refguide/observe.md +++ b/docs/refguide/observe.md @@ -116,8 +116,8 @@ These are the additional fields that are available per type: | Array | splice | index | starting index of the splice. Splices are also fired by `push`, `unshift`, `replace` etc. | √ | | | | | removedCount | amount of items being removed | √ | √ | | | | added | array with items being added | √ | √ | -| | | removed | array with items that where removed | | | -| | | addedCount | amount of items that where added | | | +| | | removed | array with items that were removed | | | +| | | addedCount | amount of items that were added | | | | | update | index | index of the single entry that is being updated | √ | | | | | newValue | the newValue that is / will be assigned | √ | √ | | | | oldValue | the old value that was replaced | | | diff --git a/docs/refguide/observer-component.md b/docs/refguide/observer-component.md index f848e25f6..239d79c4a 100644 --- a/docs/refguide/observer-component.md +++ b/docs/refguide/observer-component.md @@ -117,7 +117,7 @@ To work with local observable state inside function components, the [`useLocalSt egghead.io lesson 8: inject stores with Provider -_Tip: it is recommended to use `React.creatContext` instead_ +_Tip: it is recommended to use `React.createContext` instead_ The `mobx-react` package also provides the `Provider` component that can be used to pass down stores using React's context mechanism. To connect to those stores, pass a list of store names to `inject`, which will make the stores available as props. From c2e46e120eb69dc255c04fe0dc1953d2897a3508 Mon Sep 17 00:00:00 2001 From: Christopher Loverich Date: Tue, 17 Sep 2019 20:49:07 -0500 Subject: [PATCH 21/28] docs: add github icon, links --- website/i18n/en.json | 3 ++- website/pages/en/index.js | 1 + website/siteConfig.js | 1 + website/static/css/custom.css | 14 ++++++++++++++ website/static/img/github-brand.svg | 1 + 5 files changed, 19 insertions(+), 1 deletion(-) create mode 100644 website/static/img/github-brand.svg diff --git a/website/i18n/en.json b/website/i18n/en.json index adc429b5a..d2461925d 100644 --- a/website/i18n/en.json +++ b/website/i18n/en.json @@ -154,7 +154,8 @@ } }, "links": { - "Documentation": "Documentation" + "Documentation": "Documentation", + "Github": "Github" }, "categories": { "Introduction": "Introduction", diff --git a/website/pages/en/index.js b/website/pages/en/index.js index 88ff7eec6..05c48e452 100755 --- a/website/pages/en/index.js +++ b/website/pages/en/index.js @@ -64,6 +64,7 @@ class HomeSplash extends React.Component { + diff --git a/website/siteConfig.js b/website/siteConfig.js index a1afc3639..9187697d7 100644 --- a/website/siteConfig.js +++ b/website/siteConfig.js @@ -49,6 +49,7 @@ const siteConfig = { // For no header links in the top nav bar -> headerLinks: [], headerLinks: [ { doc: "intro/concepts", label: "Documentation" }, + { href: "https://github.com/mobxjs/mobx", label: "Github" }, ], // If you have users set above, you add it here: diff --git a/website/static/css/custom.css b/website/static/css/custom.css index bfc02a4fb..f3a55a996 100755 --- a/website/static/css/custom.css +++ b/website/static/css/custom.css @@ -25,4 +25,18 @@ article p img { } @media only screen and (min-width: 1500px) { +} + +/* Transform Github link. Lifted from Redux's CSS */ +/* https://github.com/reduxjs/redux/blob/master/website/static/css/custom.css#L134 */ + +.navigationSlider .slidingNav ul a[href*="github"] { + font-size: 0; +} + +.navigationSlider .slidingNav ul a[href*="github"]::before { + content : ""; + width : 32px; + height : 32px; + background: url("/img/github-brand.svg"); } \ No newline at end of file diff --git a/website/static/img/github-brand.svg b/website/static/img/github-brand.svg new file mode 100644 index 000000000..d1766675a --- /dev/null +++ b/website/static/img/github-brand.svg @@ -0,0 +1 @@ + \ No newline at end of file From 3f104a4887a55b36eb7efdabf9952327601c7757 Mon Sep 17 00:00:00 2001 From: Christopher Loverich Date: Tue, 17 Sep 2019 20:54:46 -0500 Subject: [PATCH 22/28] docs: enable editUrl - docs are not on master, but this is how docusaurus sets it up so I think it is correct --- website/siteConfig.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/website/siteConfig.js b/website/siteConfig.js index 9187697d7..2283c3421 100644 --- a/website/siteConfig.js +++ b/website/siteConfig.js @@ -38,7 +38,7 @@ const siteConfig = { // URL for editing docs, usage example: editUrl + 'en/doc1.md'. // If this field is omitted, there will be no "Edit this Doc" button // for each document. - // editUrl: "docs/", + editUrl: 'https://github.com/mobxjs/mobx/edit/master/docs/', From 568a4a887c0e67196f0fe9200cb02be255b79d50 Mon Sep 17 00:00:00 2001 From: Michel Weststrate Date: Wed, 2 Oct 2019 13:54:21 +0100 Subject: [PATCH 23/28] Add convenience commands to package.json --- package.json | 7 +++++-- 1 file changed, 5 insertions(+), 2 deletions(-) diff --git a/package.json b/package.json index 2e7f9b3ae..d725c3e86 100644 --- a/package.json +++ b/package.json @@ -28,7 +28,10 @@ "small-build": "node scripts/build.js", "lint": "eslint src/**/*.ts", "size": "size-limit", - "publish-script": "node scripts/publish.js" + "publish-script": "node scripts/publish.js", + "docs:build": "yarn --cwd website build", + "docs:start": "yarn --cwd website start", + "postinstall": "yarn --cwd website install" }, "repository": { "type": "git", @@ -130,4 +133,4 @@ "pre-commit": "lint-staged" } } -} \ No newline at end of file +} From 85a33fba00becd7464a10d42b7d52edcfc98d718 Mon Sep 17 00:00:00 2001 From: Christopher Loverich Date: Fri, 4 Oct 2019 11:13:54 -0500 Subject: [PATCH 24/28] docs: merge upstream docs changes - merge https://github.com/mobxjs/mobx/pull/2082 (#2082) --- docs/refguide/api.md | 19 +++++++++++++++++++ 1 file changed, 19 insertions(+) diff --git a/docs/refguide/api.md b/docs/refguide/api.md index 040b5f5ad..5d4c30477 100644 --- a/docs/refguide/api.md +++ b/docs/refguide/api.md @@ -354,6 +354,7 @@ Returns a disposer function to cancel the side effect. - **`delay?: number`**: the sideEffect will be delayed and debounced with the given `delay`. Defaults to `0`. - **`onError?: (error) => void`**: error handler that will be triggered if the autorun function throws an exception - **`scheduler?: (callback) => void`**: Set a custom scheduler to determine how re-running the autorun function should be scheduled +- **`requiresObservable?: boolean`** Enables [`reactionRequiresObservable`](#reactionrequiresobservable-boolean) locally for the autorun ### `when` @@ -373,6 +374,7 @@ If no effect function is passed to `when`, it will return a promise that can be - **`name?: string`**: A name for easier identification and debugging - **`onError?: (error) => void`**: error handler that will be triggered if the _predicate-function_ or the _effect-function_ throws an exception - **`timeout: number`** a timeout in milliseconds, after which the `onError` handler will be triggered to signal the condition not being met within a certain time +- **`requiresObservable?: boolean`** Enables [`reactionRequiresObservable`](#reactionrequiresobservable-boolean) locally for the when ### `reaction` Usage: `reaction(() => data, data => { sideEffect }, options)`. @@ -388,6 +390,7 @@ The side effect can be debounced, just like `autorunAsync`. - **`delay?: number`**: the sideEffect will be delayed and debounced with the given `delay`. Defaults to `0`. - **`equals`**: Custom equality function to determine whether the expr function differed from it's previous result, and hence should fire effect. Accepts the same options as the equals option of `computed`. - Also accepts all of the options from [`autorun`](#autorun) +- **`requiresObservable?: boolean`** Enables [`reactionRequiresObservable`](#reactionrequiresobservable-boolean) locally for the reaction ### `onReactionError` @@ -525,6 +528,22 @@ Use this if you want to check whether you are using computed properties without configure({ computedRequiresReaction: true }); ``` +#### `observableRequiresReaction: boolean` +Warns about any unobserved observable access. +Use this if you want to check whether you are using observables without a reactive context (eg not inside an autorun, action, or react component without observer wrapping). + +```javascript +configure({ observableRequiresReaction: true }); +``` + +#### `reactionRequiresObservable: boolean` +Warns when a reaction (eg `autorun`) is created without any observable access. +Use this to check whether you are unneededly wrapping react components with `observer`, or to find possible related bugs. + +```javascript +configure({ reactionRequiresObservable: true }); +``` + #### `computedConfigurable: boolean` Allows overwriting computed values. This is useful for testing purposes *only*. Don't enable this on production as it can cause memory-leaks. From 72062e8ad936cff0b2952bc188b5f0f7d914cec6 Mon Sep 17 00:00:00 2001 From: Christopher Loverich Date: Fri, 4 Oct 2019 11:20:58 -0500 Subject: [PATCH 25/28] docs: make readme the docs landing page - delete the docusaurus default landing page, and instead re-direct users to the first documentation page - https://docusaurus.io/docs/en/site-creation#docs-landing-page --- website/pages/en/index.js | 202 -------------------------------------- website/static/index.html | 14 +++ 2 files changed, 14 insertions(+), 202 deletions(-) delete mode 100755 website/pages/en/index.js create mode 100644 website/static/index.html diff --git a/website/pages/en/index.js b/website/pages/en/index.js deleted file mode 100755 index 05c48e452..000000000 --- a/website/pages/en/index.js +++ /dev/null @@ -1,202 +0,0 @@ -/** - * Copyright (c) 2017-present, Facebook, Inc. - * - * This source code is licensed under the MIT license found in the - * LICENSE file in the root directory of this source tree. - */ - -const React = require('react'); - -const CompLibrary = require('../../core/CompLibrary.js'); - -const MarkdownBlock = CompLibrary.MarkdownBlock; /* Used to read markdown */ -const Container = CompLibrary.Container; -const GridBlock = CompLibrary.GridBlock; - -class HomeSplash extends React.Component { - render() { - const { siteConfig, language = '' } = this.props; - const { baseUrl, docsUrl } = siteConfig; - const docsPart = `${docsUrl ? `${docsUrl}/` : ''}`; - const langPart = `${language ? `${language}/` : ''}`; - const docUrl = doc => `${baseUrl}${docsPart}${langPart}${doc}`; - - const SplashContainer = props => ( -
    -
    -
    {props.children}
    -
    -
    - ); - - const Logo = props => ( -
    - Project Logo -
    - ); - - const ProjectTitle = () => ( -

    - {siteConfig.title} - {siteConfig.tagline} -

    - ); - - const PromoSection = props => ( -
    -
    -
    {props.children}
    -
    -
    - ); - - const Button = props => ( - - ); - - return ( - -
    - - - - - -
    -     - ); - } -} - -class Index extends React.Component { - render() { - const { config: siteConfig, language = '' } = this.props; - const { baseUrl } = siteConfig; - - const Block = props => ( - - - - ); - - const FeatureCallout = () => ( -
    -

    Feature Callout

    - These are features of this project -
    - ); - - const TryOut = () => ( - - {[ - { - content: - 'To make your landing page more attractive, use illustrations! Check out ' + - '[**unDraw**](https://undraw.co/) which provides you with customizable illustrations which are free to use. ' + - 'The illustrations you see on this page are from unDraw.', - image: `${baseUrl}img/undraw_code_review.svg`, - imageAlign: 'left', - title: 'Wonderful SVG Illustrations', - }, - ]} - - ); - - const Description = () => ( - - {[ - { - content: - 'This is another description of how this project is useful', - image: `${baseUrl}img/undraw_note_list.svg`, - imageAlign: 'right', - title: 'Description', - }, - ]} - - ); - - const LearnHow = () => ( - - {[ - { - content: - 'Each new Docusaurus project has **randomly-generated** theme colors.', - image: `${baseUrl}img/undraw_youtube_tutorial.svg`, - imageAlign: 'right', - title: 'Randomly Generated Theme Colors', - }, - ]} - - ); - - const Features = () => ( - - {[ - { - content: 'This is the content of my feature', - image: `${baseUrl}img/undraw_react.svg`, - imageAlign: 'top', - title: 'Feature One', - }, - { - content: 'The content of my second feature', - image: `${baseUrl}img/undraw_operating_system.svg`, - imageAlign: 'top', - title: 'Feature Two', - }, - ]} - - ); - - const Showcase = () => { - if ((siteConfig.users || []).length === 0) { - return null; - } - - const showcase = siteConfig.users - .filter(user => user.pinned) - .map(user => ( - - {user.caption} - - )); - - const pageUrl = page => baseUrl + (language ? `${language}/` : '') + page; - - return ( -
    -

    Who is Using This?

    -

    This project is used by all these people

    -
    {showcase}
    - -
    - ); - }; - - return ( -
    - -
    - ); - } -} - -module.exports = Index; diff --git a/website/static/index.html b/website/static/index.html new file mode 100644 index 000000000..5a0f92f87 --- /dev/null +++ b/website/static/index.html @@ -0,0 +1,14 @@ + + + + + + + Your Site Title Here + + + If you are not redirected automatically, follow this link. + + From c3b4254648a6e66e7ecd508f9b25c2efae68a9e5 Mon Sep 17 00:00:00 2001 From: Michel Weststrate Date: Sat, 5 Oct 2019 23:46:42 +0100 Subject: [PATCH 26/28] Fixed site config to work on mobx.js.org, with urls compatible with old site --- package.json | 1 + scripts/publish.js | 5 ++ website/siteConfig.js | 167 +++++++++++++++++++------------------- website/static/index.html | 8 +- 4 files changed, 93 insertions(+), 88 deletions(-) diff --git a/package.json b/package.json index ff63ba7be..0f55b708d 100644 --- a/package.json +++ b/package.json @@ -31,6 +31,7 @@ "publish-script": "node scripts/publish.js", "docs:build": "yarn --cwd website build", "docs:start": "yarn --cwd website start", + "docs:publish": "yarn --cwd website publish-gh-pages", "postinstall": "yarn --cwd website install", "dedup": "npx yarn-deduplicate -s fewer yarn.lock" }, diff --git a/scripts/publish.js b/scripts/publish.js index e60c996e0..8aa16564c 100755 --- a/scripts/publish.js +++ b/scripts/publish.js @@ -35,6 +35,10 @@ async function prompt(question, defaultValue) { } async function main() { + const gitUser = + process.env.GIT_USER || + (await prompt("Please enter the github user to publish the docs with")) + // build run("npm run small-build") @@ -75,6 +79,7 @@ async function main() { run("git push") run("git push --tags") + run(`GIT_USER=${gitUser} USE_SSH=true yarn docs:publish`) console.log("Published!") exit(0) } else { diff --git a/website/siteConfig.js b/website/siteConfig.js index 2283c3421..b5158a52e 100644 --- a/website/siteConfig.js +++ b/website/siteConfig.js @@ -10,64 +10,63 @@ // List of projects/orgs using your project for the users page. const users = [ - { - caption: "User1", - // You will need to prepend the image path with your baseUrl - // if it is not '/', like: '/test-site/img/image.jpg'. - image: "/img/undraw_open_source.svg", - infoLink: "https://www.facebook.com", - pinned: true - } + { + caption: "User1", + // You will need to prepend the image path with your baseUrl + // if it is not '/', like: '/test-site/img/image.jpg'. + image: "/img/undraw_open_source.svg", + infoLink: "https://www.facebook.com", + pinned: true + } ] const siteConfig = { - title: "MobX", // Title for your website. - tagline: "Simple, scalable state management", - - // For github.io type URLs, you would set the url and baseUrl like: - // url: 'https://facebook.github.io', - // baseUrl: '/test-site/', - url: "https://mobx-docs.netlify.com/", // Your website URL - baseUrl: "/", // Base URL for your project */ - // Used for publishing and more - - projectName: "mobx", - organizationName: "mobxjs", - - - // URL for editing docs, usage example: editUrl + 'en/doc1.md'. - // If this field is omitted, there will be no "Edit this Doc" button - // for each document. - editUrl: 'https://github.com/mobxjs/mobx/edit/master/docs/', - - - - // For top-level user or org sites, the organization is still the same. - // e.g., for the https://JoelMarcey.github.io site, it would be set like... - // organizationName: 'JoelMarcey' - - // For no header links in the top nav bar -> headerLinks: [], - headerLinks: [ - { doc: "intro/concepts", label: "Documentation" }, - { href: "https://github.com/mobxjs/mobx", label: "Github" }, - ], - - // If you have users set above, you add it here: - users, - - /* path to images for header/footer */ - headerIcon: "img/mobx.png", - footerIcon: "img/mobx.png", - favicon: "img/favicon.png", - - /* Colors for website */ - colors: { - primaryColor: "#035193", - secondaryColor: "#023866" - }, - - /* Custom fonts for website */ - /* + title: "MobX", // Title for your website. + tagline: "Simple, scalable state management", + + // For github.io type URLs, you would set the url and baseUrl like: + // url: 'https://facebook.github.io', + // baseUrl: '/test-site/', + url: "https://mobx.js.org/", // Your website URL + baseUrl: "/", // Base URL for your project */ + docsUrl: "", // trim 'docs/ prefix + cname: "mobx.js.org", // needed for github pages to work under a domain + // Used for publishing and more + + projectName: "mobx", + organizationName: "mobxjs", + + // URL for editing docs, usage example: editUrl + 'en/doc1.md'. + // If this field is omitted, there will be no "Edit this Doc" button + // for each document. + editUrl: "https://github.com/mobxjs/mobx/edit/master/docs/", + + // For top-level user or org sites, the organization is still the same. + // e.g., for the https://JoelMarcey.github.io site, it would be set like... + // organizationName: 'JoelMarcey' + + // For no header links in the top nav bar -> headerLinks: [], + headerLinks: [ + { doc: "intro/concepts", label: "Documentation" }, + { href: "https://github.com/mobxjs/mobx", label: "Github" } + ], + + // If you have users set above, you add it here: + users, + + /* path to images for header/footer */ + headerIcon: "img/mobx.png", + footerIcon: "img/mobx.png", + favicon: "img/favicon.png", + + /* Colors for website */ + colors: { + primaryColor: "#035193", + secondaryColor: "#023866" + }, + + /* Custom fonts for website */ + /* fonts: { myFont: [ "Times New Roman", @@ -80,43 +79,43 @@ myOtherFont: [ }, */ - // This copyright info is used in /core/Footer.js and blog RSS/Atom feeds. - copyright: `Copyright © ${new Date().getFullYear()} Your Name or Your Company Name`, + // This copyright info is used in /core/Footer.js and blog RSS/Atom feeds. + copyright: `Copyright © ${new Date().getFullYear()} Your Name or Your Company Name`, - highlight: { - // Highlight.js theme to use for syntax highlighting in code blocks. - theme: "default" - }, + highlight: { + // Highlight.js theme to use for syntax highlighting in code blocks. + theme: "default" + }, - // Add custom scripts here that would be placed in - Your Site Title Here + MobX - If you are not redirected automatically, follow this link. + If you are not redirected automatically, follow this link. From 59ce31a5953fed2f3a242e853c8454ec35270e9f Mon Sep 17 00:00:00 2001 From: Michel Weststrate Date: Sat, 5 Oct 2019 23:53:31 +0100 Subject: [PATCH 27/28] Don't run CI on gh-pages branch --- .circleci/config.yml | 3 +++ 1 file changed, 3 insertions(+) diff --git a/.circleci/config.yml b/.circleci/config.yml index a0b6dddef..7e8761059 100644 --- a/.circleci/config.yml +++ b/.circleci/config.yml @@ -114,6 +114,9 @@ jobs: workflows: version: 2 build-and-test: + branches: + ignore: + - gh-pages jobs: - build From 1a77b959dde0ca629e61dd1e4bc10535e8806610 Mon Sep 17 00:00:00 2001 From: Michel Weststrate Date: Sat, 5 Oct 2019 23:58:22 +0100 Subject: [PATCH 28/28] Fixed CI config (?) --- .circleci/config.yml | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/.circleci/config.yml b/.circleci/config.yml index 7e8761059..f1bfdf810 100644 --- a/.circleci/config.yml +++ b/.circleci/config.yml @@ -114,12 +114,12 @@ jobs: workflows: version: 2 build-and-test: - branches: - ignore: - - gh-pages jobs: - - build - + - build: + filters: + branches: + ignore: + - gh-pages - test-all: requires: - build