[go: up one dir, main page]
Skip to content

Commit

Permalink
Migrate to Docusaurus v2
Browse files Browse the repository at this point in the history 
Signed-off-by: Reece Dunham <me@rdil.rocks>
  • Loading branch information
@RDIL
RDIL committed Feb 3, 2021
1 parent 02dd265 commit b0a5b7a
Show file tree
Hide file tree
Showing 35 changed files with 6,834 additions and 3,550 deletions.
1 change: 1 addition & 0 deletions .gitignore
View file
Original file line number Diff line number Diff line change
Expand Up @@ -60,4 +60,5 @@ typings/
.idea
/dist/
website/build
website/.docusaurus
.rts2*
33 changes: 0 additions & 33 deletions website/core/Footer.js
View file

This file was deleted.

0 docs/api.md → website/docs/api.md
View file
File renamed without changes.
32 changes: 24 additions & 8 deletions docs/async.md → website/docs/async.mdx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,16 +5,32 @@ sidebar_label: Async produce / createDraft
---

<center>
<div data-ea-publisher="immerjs" data-ea-type="image" class="horizontal bordered"></div>
<div
data-ea-publisher="immerjs"
data-ea-type="image"
className="horizontal bordered"
></div>
</center>

<details>
<summary style="color: white; background:#c200c2;padding:5px;margin:5px;border-radius:2px">egghead.io lesson 11: Creating _async_ producers (and why you shouldn’t)</summary>
<br>
<div style="padding:5px;">
<iframe style="border: none;" width=760 height=427 scrolling="no" src="https://egghead.io/lessons/react-write-asynchronous-producers-in-immer-and-why-you-shouldn-t/embed" ></iframe>
</div>
<a style="font-style:italic;padding:5px;margin:5px;" href="https://egghead.io/lessons/react-write-asynchronous-producers-in-immer-and-why-you-shouldn-t">Hosted on egghead.io</a>
<summary className="egghead-summary">
egghead.io lesson 11: Creating <b>async</b> producers (and why you
shouldn’t)
</summary>
<br />
<div>
<iframe
width="760"
height="427"
scrolling="no"
src="https://egghead.io/lessons/react-write-asynchronous-producers-in-immer-and-why-you-shouldn-t/embed"
></iframe>
</div>
<a
className="egghead-link"
href="https://egghead.io/lessons/react-write-asynchronous-producers-in-immer-and-why-you-shouldn-t"
>
Hosted on egghead.io
</a>
</details>

It is allowed to return Promise objects from recipes. Or, in other words, to use `async / await`. This can be pretty useful for long running processes, that only produce the new object once the promise chain resolves. Note that `produce` itself (even in the curried form) will return a promise if the producer is async. Example:
Expand Down
0 docs/built-with.md → website/docs/built-with.md
View file
File renamed without changes.
0 docs/complex-objects.md → website/docs/complex-objects.md
View file
File renamed without changes.
0 docs/current.md → website/docs/current.md
View file
File renamed without changes.
31 changes: 23 additions & 8 deletions docs/curried-produce.md → website/docs/curried-produce.mdx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,16 +4,31 @@ title: Curried producers
---

<center>
<div data-ea-publisher="immerjs" data-ea-type="image" class="horizontal bordered"></div>
<div
data-ea-publisher="immerjs"
data-ea-type="image"
className="horizontal bordered"
></div>
</center>

<details>
<summary style="color: white; background:#c200c2;padding:5px;margin:5px;border-radius:2px">egghead.io lesson 6: Simplify code by using curried _reduce_</summary>
<br>
<div style="padding:5px;">
<iframe style="border: none;" width=760 height=427 scrolling="no" src="https://egghead.io/lessons/javascript-simplify-immer-producer-functions-using-currying/embed" ></iframe>
</div>
<a style="font-style:italic;padding:5px;margin:5px;" href="https://egghead.io/lessons/javascript-simplify-immer-producer-functions-using-currying">Hosted on egghead.io</a>
<summary className="egghead-summary">
egghead.io lesson 6: Simplify code by using curried _reduce_
</summary>
<br />
<div>
<iframe
width="760"
height="427"
scrolling="no"
src="https://egghead.io/lessons/javascript-simplify-immer-producer-functions-using-currying/embed"
></iframe>
</div>
<a
className="egghead-link"
href="https://egghead.io/lessons/javascript-simplify-immer-producer-functions-using-currying"
>
Hosted on egghead.io
</a>
</details>

Passing a function as the first argument to `produce` is intended to be used for currying. This means that you get a pre-bound producer that only needs a state to produce the value from. The producer function gets passed in the draft and any further arguments that were passed to the curried function.
Expand Down
35 changes: 25 additions & 10 deletions docs/example-reducer.md → website/docs/example-reducer.mdx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,23 +4,38 @@ title: Example Reducer
---

<center>
<div data-ea-publisher="immerjs" data-ea-type="image" class="horizontal bordered"></div>
<div
data-ea-publisher="immerjs"
data-ea-type="image"
className="horizontal bordered"
></div>
</center>

<details>
<summary style="color: white; background:#c200c2;padding:5px;margin:5px;border-radius:2px">egghead.io lesson 13: Using Immer in a (React) reducer</summary>
<br>
<div style="padding:5px;">
<iframe style="border: none;" width=760 height=427 scrolling="no" src="https://egghead.io/lessons/react-update-immutable-state-with-react-usereducer-through-immer/embed" ></iframe>
</div>
<a style="font-style:italic;padding:5px;margin:5px;" href="https://egghead.io/lessons/react-update-immutable-state-with-react-usereducer-through-immer">Hosted on egghead.io</a>
<summary className="egghead-summary">
egghead.io lesson 13: Using Immer in a (React) reducer
</summary>
<br />
<div>
<iframe
width="760"
height="427"
scrolling="no"
src="https://egghead.io/lessons/react-update-immutable-state-with-react-usereducer-through-immer/embed"
></iframe>
</div>
<a
className="egghead-link"
href="https://egghead.io/lessons/react-update-immutable-state-with-react-usereducer-through-immer"
>
Hosted on egghead.io
</a>
</details>

Here is a simple example of the difference that Immer could make in practice.

```javascript
// Reducer with inital state
const INITIAL_STATE = {};
const INITIAL_STATE = {}
// Shortened, based on: https://github.com/reactjs/redux/blob/master/examples/shopping-cart/src/reducers/products.js
const byId = (state = INITIAL_STATE, action) => {
switch (action.type) {
Expand All @@ -44,7 +59,7 @@ After using Immer, our reducer can be expressed as:
import produce from "immer"

// Reducer with inital state
const INITIAL_STATE = {};
const INITIAL_STATE = {}

const byId = produce((draft, action) => {
switch (action.type) {
Expand Down
31 changes: 23 additions & 8 deletions docs/example-setstate.md → website/docs/example-setstate.mdx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,16 +4,31 @@ title: React setState example
---

<center>
<div data-ea-publisher="immerjs" data-ea-type="image" class="horizontal bordered"></div>
<div
data-ea-publisher="immerjs"
data-ea-type="image"
className="horizontal bordered"
></div>
</center>

<details>
<summary style="color: white; background:#c200c2;padding:5px;margin:5px;border-radius:2px">egghead.io lesson 8: Using Immer with _useState_. Or: _useImmer_</summary>
<br>
<div style="padding:5px;">
<iframe style="border: none;" width=760 height=427 scrolling="no" src="https://egghead.io/lessons/react-immutable-update-state-inside-react-components-with-useimmer/embed" ></iframe>
</div>
<a style="font-style:italic;padding:5px;margin:5px;" href="https://egghead.io/lessons/react-immutable-update-state-inside-react-components-with-useimmer">Hosted on egghead.io</a>
<summary className="egghead-summary">
egghead.io lesson 8: Using Immer with _useState_. Or: _useImmer_
</summary>
<br />
<div>
<iframe
width="760"
height="427"
scrolling="no"
src="https://egghead.io/lessons/react-immutable-update-state-inside-react-components-with-useimmer/embed"
></iframe>
</div>
<a
className="egghead-link"
href="https://egghead.io/lessons/react-immutable-update-state-inside-react-components-with-useimmer"
>
Hosted on egghead.io
</a>
</details>

Deep updates in the state of React components can be greatly simplified as well by using immer. Take for example the following onClick handlers (Try in [codesandbox](https://codesandbox.io/s/m4yp57632j)):
Expand Down
2 changes: 1 addition & 1 deletion docs/faq.md → website/docs/faq.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -22,7 +22,7 @@ A: Yes

## Q: I can't rely on Proxies being present on my target environments. Can I use Immer?

A: Yes [details](https://immerjs.github.io/immer/docs/installation#immer-on-older-javascript-environments)
A: Yes - [view details](installation#immer-on-older-javascript-environments)

## Q: Can I typecheck my data structures when using Immer?

Expand Down
31 changes: 23 additions & 8 deletions docs/freezing.md → website/docs/freezing.mdx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,16 +4,31 @@ title: Auto freezing
---

<center>
<div data-ea-publisher="immerjs" data-ea-type="image" class="horizontal bordered"></div>
<div
data-ea-publisher="immerjs"
data-ea-type="image"
className="horizontal bordered"
></div>
</center>

<details>
<summary style="color: white; background:#c200c2;padding:5px;margin:5px;border-radius:2px">egghead.io lesson 7: Immer automatically freezes data</summary>
<br>
<div style="padding:5px;">
<iframe style="border: none;" width=760 height=427 scrolling="no" src="https://egghead.io/lessons/javascript-produces-immutable-data-and-avoid-unnecessary-creation-of-new-data-trees-with-immer/embed" ></iframe>
</div>
<a style="font-style:italic;padding:5px;margin:5px;" href="https://egghead.io/lessons/javascript-produces-immutable-data-and-avoid-unnecessary-creation-of-new-data-trees-with-immer">Hosted on egghead.io</a>
<summary className="egghead-summary">
egghead.io lesson 7: Immer automatically freezes data
</summary>
<br />
<div>
<iframe
width="760"
height="427"
scrolling="no"
src="https://egghead.io/lessons/javascript-produces-immutable-data-and-avoid-unnecessary-creation-of-new-data-trees-with-immer/embed"
></iframe>
</div>
<a
className="egghead-link"
href="https://egghead.io/lessons/javascript-produces-immutable-data-and-avoid-unnecessary-creation-of-new-data-trees-with-immer"
>
Hosted on egghead.io
</a>
</details>

Immer automatically freezes any state trees that are modified using `produce`. This protects against accidental modifications of the state tree outside of a producer. In most cases this provides the most optimal behavior, but `setAutoFreeze(true / false)` can be used to explicitly turn this feature on or off.
Expand Down
0 docs/installation.md → website/docs/installation.md
View file
File renamed without changes.
3 changes: 2 additions & 1 deletion docs/introduction.md → website/docs/introduction.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,7 @@
id: introduction
title: Introduction to Immer
sidebar_label: Introduction
slug: /
---

<center>
Expand All @@ -24,7 +25,7 @@ Immer (German for: always) is a tiny package that allows you to work with immuta

The basic idea is that you will apply all your changes to a temporary _draftState_, which is a proxy of the _currentState_. Once all your mutations are completed, Immer will produce the _nextState_ based on the mutations to the draft state. This means that you can interact with your data by simply modifying it while keeping all the benefits of immutable data.

![immer-hd.png](/immer/img/immer.png)
![immer-hd.png](/img/immer.png)

Using Immer is like having a personal assistant. The assistant takes a letter (the current state) and gives you a copy (draft) to jot changes onto. Once you are done, the assistant will take your draft and produce the real immutable, final letter for you (the next state).

Expand Down
0 docs/map-set.md → website/docs/map-set.md
View file
File renamed without changes.
0 docs/original.md → website/docs/original.md
View file
File renamed without changes.
Loading

0 comments on commit b0a5b7a

Please sign in to comment.