8000 Add documentation about browser extension · immutable-js/immutable-js@0370f44 · GitHub
[go: up one dir, main page]
Skip to content

Commit 0370f44

Browse files
jdeniaujdeniau
committed
Add documentation about browser extension
1 parent 4a18d93 commit 0370f44

File tree

10 files changed

+284
-2
lines changed

10 files changed

+284
-2
lines changed

‎website/docs/BrowserExtension.mdx

Lines changed: 72 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,72 @@
1+
# Devtools
2+
3+
Inspecting immutable collections in browser's Dev Tools is awkward. You only
4+
see the internal data structure, not the logical contents. For example, when
5+
inspecting the contents of an Immutable List, you'd really like to see the
6+
items in the list.
7+
8+
Chrome (v47+) and Firefox (116+) has support for custom "formatters". A
9+
formatter tells browser's Dev Tools how to display values in the Console,
10+
Scope list, etc. This means we can display Lists, Maps and other collections,
11+
in a much better way.
12+
13+
Essentially, it turns this:
14+
15+
![Before Devtools](/before.png)
16+
17+
into:
18+
19+
![After Devtools](/after.png)
20+
21+
## Installation
22+
23+
Install the following extension in your browser:
24+
25+
<ul className="devtoolsLinks">
26+
<li>
27+
<a
28+
href="https://chromewebstore.google.com/detail/immutablejs-object-format/lfdmhpmheemfkgjpifhenbkgcaaopckp"
29+
target="_blank"
30+
rel="noopener"
31+
>
32+
<figure>
33+
<img src="/store-logo-chrome.svg" alt="Chrome Store Logo" />
34+
<figcaption>Chrome or Chromium based browser extension</figcaption>
35+
</figure>
36+
</a>
37+
</li>
38+
<li>
39+
<a
40+
href="https://addons.mozilla.org/fr/firefox/addon/immutable-js-devtool-extension/"
41+
target="_blank"
42+
rel="noopener"
43+
>
44+
<figure>
45+
<img src="/store-logo-firefox.svg" alt="Firefox Logo" />
46+
<figcaption>Firefox Extension</figcaption>
47+
</figure>
48+
</a>
49+
</li>
50+
</ul>
51+
52+
### Alternative
53+
54+
If you don't want to install an extension, you can install the devtools as a
55+
dependency in your project.
56+
57+
To do that, install the following package using your package manager:
58+
59+
```sh
60+
npm install --save-dev @jdeniau/immutable-devtools
61+
```
62+
63+
and enable it with:
64+
65+
```js
66+
import * as Immutable from 'immutable';
67+
import installDevTools from '@jdeniau/immutable-devtools';
68+
69+
installDevTools(Immutable);
70+
```
71+
72+
See more details in the [github repository](https://github.com/immutable-js/immutable-devtools).

‎website/public/after.png

24.5 KB
Loading

‎website/public/before.png

89.1 KB
Loading

‎website/public/store-logo-chrome.svg

Lines changed: 1 addition & 0 deletions
Loading

‎website/public/store-logo-firefox.svg

Lines changed: 140 additions & 0 deletions
Loading

‎website/src/Header.tsx

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -110,6 +110,7 @@ export function HeaderLinks({
110110
<div className="links">
111111
<DocsDropdown versions={versions} currentVersion={currentVersion} />
112112
<Link href="/play">Playground</Link>
113+
<Link href="/browser-extension">Browser extension</Link>
113114
<a
114115
href="https://stackoverflow.com/questions/tagged/immutable.js?sort=votes"
115116
target="_blank"

‎website/src/app/browser-extension/layout.tsx

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
import { DocHeader } from '../../DocHeader';
2+
import { ImmutableConsole } from '../../ImmutableConsole';
3+
import { getVersions } from '../../static/getVersions';
4+
5+
export default function VersionLayout({
6+
children,
7+
}: {
8+
children: React.ReactNode;
9+
}) {
10+
const versions = getVersions();
11+
12+
return (
13+
<div>
14+
<ImmutableConsole version={versions[0]} />
15+
<DocHeader versions={versions} currentVersion={versions[0]} />
16+
<div className="pageBody">
17+
<div className="contents">{children}</div>
18+
</div>
19+
</div>
20+
);
21+
}

‎website/src/app/browser-extension/page.tsx

Lines changed: 24 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
1+
import { Metadata } from 'next';
2+
import { DocSearch } from '../../DocSearch';
3+
import { SideBar } from '../../Sidebar';
4+
5+
export async function generateMetadata(): Promise<Metadata> {
6+
return {
7+
title: `Devtools — Immutable.js`,
8+
};
9+
}
10+
11+
export default async function BrowserExtensionPage() {
12+
const { default: MdxContent } = await import(`@/docs/BrowserExtension.mdx`);
13+
14+
return (
15+
<>
16+
<SideBar />
17+
<div key="Overview" className="docContents">
18+
<DocSearch />
19+
20+
<MdxContent />
21+
</div>
22+
</>
23+
);
24+
}

‎website/src/app/docs/v5/page.tsx

Lines changed: 0 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -11,8 +11,6 @@ export async function generateMetadata(): Promise<Metadata> {
1111
export default async function OverviewDocPage() {
1212
const { default: MdxContent } = await import(`@/docs/Intro.mdx`);
1313

14-
console.log('MdxContent', MdxContent);
15-
1614
return (
1715
<>
1816
<div key="Overview" className="docContents">

‎website/styles/globals.css

Lines changed: 25 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -616,3 +616,28 @@ p:last-child {
616616
.memberLabel:hover .anchorLink {
617617
display: inline;
618618
}
619+
620+
.devtoolsLinks {
621+
display: flex;
622+
flex-direction: row;
623+
justify-content: space-evenly;
624+
align-items: center;
625+
margin-top: 0.5rem;
626+
list-style-type: none;
627+
padding: 0;
628+
}
629+
630+
@media only screen and (max-width: 680px) {
631+
.devtoolsLinks {
632+
flex-direction: column;
633+
}
634+
}
635+
636+
.devtoolsLinks > li {
637+
flex: 1;
638+
text-align: center;
639+
}
640+
641+
.devtoolsLinks img {
642+
max-width: min(150px, 100%);
643+
}

0 commit comments

Comments
 (0)
0