hendrik/lens
1
0 Fork 0
mirror of https://github.com/lensapp/lens.git synced 2025-05-20 05:10:56 +00:00
Code Issues Projects Releases Wiki Activity

Deployed 831fb80bf to master with MkDocs 1.1.2 and mike 0.5.5

Browse Source
This commit is contained in:
GitHub Action committed 2020-12-07 20:31:34 +00:00
1 parent 750c7d7298
commit c33bd56bba
238 files changed
+6935 -3873
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

master/extensions/guides/anatomy/index.html
+14 -2
View File
@@ -548,6 +548,18 @@
<li class="md-nav__item">
<a href="../generator/" class="md-nav__link">
Generator
</a>
</li>
<li class="md-nav__item">
<a href="../main-extension/" class="md-nav__link">
Main Extension
@@ -573,8 +585,8 @@
<li class="md-nav__item">
<a href="../generator/" class="md-nav__link">
Generator
<a href="../stores/" class="md-nav__link">
Stores
</a>
</li>
master/extensions/guides/components/index.html
+14 -2
View File
@@ -548,6 +548,18 @@
<li class="md-nav__item">
<a href="../generator/" class="md-nav__link">
Generator
</a>
</li>
<li class="md-nav__item">
<a href="../main-extension/" class="md-nav__link">
Main Extension
@@ -573,8 +585,8 @@
<li class="md-nav__item">
<a href="../generator/" class="md-nav__link">
Generator
<a href="../stores/" class="md-nav__link">
Stores
</a>
</li>
master/extensions/guides/generator/index.html
+40 -28
View File
@@ -551,30 +551,6 @@
<li class="md-nav__item">
<a href="../main-extension/" class="md-nav__link">
Main Extension
</a>
</li>
<li class="md-nav__item">
<a href="../renderer-extension/" class="md-nav__link">
Renderer Extension
</a>
</li>
@@ -640,6 +616,42 @@
<li class="md-nav__item">
<a href="../main-extension/" class="md-nav__link">
Main Extension
</a>
</li>
<li class="md-nav__item">
<a href="../renderer-extension/" class="md-nav__link">
Renderer Extension
</a>
</li>
<li class="md-nav__item">
<a href="../stores/" class="md-nav__link">
Stores
</a>
</li>
<li class="md-nav__item">
<a href="../working-with-mobx/" class="md-nav__link">
Working with mobx
@@ -952,7 +964,7 @@ npm start <span class="c1"># start the webpack server in watch mode</span>
<div class="md-footer-nav">
<nav class="md-footer-nav__inner md-grid" aria-label="Footer">
<a href="../renderer-extension/" class="md-footer-nav__link md-footer-nav__link--prev" rel="prev">
<a href="../" class="md-footer-nav__link md-footer-nav__link--prev" rel="prev">
<div class="md-footer-nav__button md-icon">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M20 11v2H8l5.5 5.5-1.42 1.42L4.16 12l7.92-7.92L13.5 5.5 8 11h12z"/></svg>
</div>
@@ -961,19 +973,19 @@ npm start <span class="c1"># start the webpack server in watch mode</span>
<span class="md-footer-nav__direction">
Previous
</span>
Renderer Extension
Overview
</div>
</div>
</a>
<a href="../working-with-mobx/" class="md-footer-nav__link md-footer-nav__link--next" rel="next">
<a href="../main-extension/" class="md-footer-nav__link md-footer-nav__link--next" rel="next">
<div class="md-footer-nav__title">
<div class="md-ellipsis">
<span class="md-footer-nav__direction">
Next
</span>
Working with mobx
Main Extension
</div>
</div>
<div class="md-footer-nav__button md-icon">
master/extensions/guides/index.html
+16 -4
View File
@@ -597,6 +597,18 @@
<li class="md-nav__item">
<a href="generator/" class="md-nav__link">
Generator
</a>
</li>
<li class="md-nav__item">
<a href="main-extension/" class="md-nav__link">
Main Extension
@@ -622,8 +634,8 @@
<li class="md-nav__item">
<a href="generator/" class="md-nav__link">
Generator
<a href="stores/" class="md-nav__link">
Stores
</a>
</li>
@@ -995,13 +1007,13 @@
</a>
<a href="main-extension/" class="md-footer-nav__link md-footer-nav__link--next" rel="next">
<a href="generator/" class="md-footer-nav__link md-footer-nav__link--next" rel="next">
<div class="md-footer-nav__title">
<div class="md-ellipsis">
<span class="md-footer-nav__direction">
Next
</span>
Main Extension
Generator
</div>
</div>
<div class="md-footer-nav__button md-icon">
master/extensions/guides/kube-object-list-layout/index.html
+14 -2
View File
@@ -548,6 +548,18 @@
<li class="md-nav__item">
<a href="../generator/" class="md-nav__link">
Generator
</a>
</li>
<li class="md-nav__item">
<a href="../main-extension/" class="md-nav__link">
Main Extension
@@ -573,8 +585,8 @@
<li class="md-nav__item">
<a href="../generator/" class="md-nav__link">
Generator
<a href="../stores/" class="md-nav__link">
Stores
</a>
</li>
master/extensions/guides/main-extension/index.html
+16 -4
View File
@@ -551,6 +551,18 @@
<li class="md-nav__item">
<a href="../generator/" class="md-nav__link">
Generator
</a>
</li>
@@ -628,8 +640,8 @@
<li class="md-nav__item">
<a href="../generator/" class="md-nav__link">
Generator
<a href="../stores/" class="md-nav__link">
Stores
</a>
</li>
@@ -969,7 +981,7 @@
<div class="md-footer-nav">
<nav class="md-footer-nav__inner md-grid" aria-label="Footer">
<a href="../" class="md-footer-nav__link md-footer-nav__link--prev" rel="prev">
<a href="../generator/" class="md-footer-nav__link md-footer-nav__link--prev" rel="prev">
<div class="md-footer-nav__button md-icon">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M20 11v2H8l5.5 5.5-1.42 1.42L4.16 12l7.92-7.92L13.5 5.5 8 11h12z"/></svg>
</div>
@@ -978,7 +990,7 @@
<span class="md-footer-nav__direction">
Previous
</span>
Overview
Generator
</div>
</div>
</a>
master/extensions/guides/renderer-extension/index.html
+16 -4
View File
@@ -552,6 +552,18 @@
<li class="md-nav__item">
<a href="../generator/" class="md-nav__link">
Generator
</a>
</li>
<li class="md-nav__item">
<a href="../main-extension/" class="md-nav__link">
Main Extension
@@ -684,8 +696,8 @@
<li class="md-nav__item">
<a href="../generator/" class="md-nav__link">
Generator
<a href="../stores/" class="md-nav__link">
Stores
</a>
</li>
@@ -1729,13 +1741,13 @@ See <a href="url?"><code>Component</code> documentation</a> for further details.
</a>
<a href="../generator/" class="md-footer-nav__link md-footer-nav__link--next" rel="next">
<a href="../stores/" class="md-footer-nav__link md-footer-nav__link--next" rel="next">
<div class="md-footer-nav__title">
<div class="md-ellipsis">
<span class="md-footer-nav__direction">
Next
</span>
Generator
Stores
</div>
</div>
<div class="md-footer-nav__button md-icon">
master/extensions/guides/stores/index.html
+263 -13
View File
@@ -75,7 +75,7 @@
<div data-md-component="skip">
<a href="#wip" class="md-skip">
<a href="#stores" class="md-skip">
Skip to content
</a>
@@ -345,10 +345,12 @@
<li class="md-nav__item md-nav__item--nested">
<li class="md-nav__item md-nav__item--active md-nav__item--nested">
<input class="md-nav__toggle md-toggle" data-md-toggle="nav-7" type="checkbox" id="nav-7">
<input class="md-nav__toggle md-toggle" data-md-toggle="nav-7" type="checkbox" id="nav-7" checked>
<label class="md-nav__link" for="nav-7">
Extension Development
@@ -514,10 +516,12 @@
<li class="md-nav__item md-nav__item--nested">
<li class="md-nav__item md-nav__item--active md-nav__item--nested">
<input class="md-nav__toggle md-toggle" data-md-toggle="nav-7-4" type="checkbox" id="nav-7-4">
<input class="md-nav__toggle md-toggle" data-md-toggle="nav-7-4" type="checkbox" id="nav-7-4" checked>
<label class="md-nav__link" for="nav-7-4">
Extension Guides
@@ -548,6 +552,18 @@
<li class="md-nav__item">
<a href="../generator/" class="md-nav__link">
Generator
</a>
</li>
<li class="md-nav__item">
<a href="../main-extension/" class="md-nav__link">
Main Extension
@@ -571,11 +587,49 @@
<li class="md-nav__item">
<a href="../generator/" class="md-nav__link">
Generator
<li class="md-nav__item md-nav__item--active">
<input class="md-nav__toggle md-toggle" data-md-toggle="toc" type="checkbox" id="__toc">
<label class="md-nav__link md-nav__link--active" for="__toc">
Stores
<span class="md-nav__icon md-icon"></span>
</label>
<a href="./" class="md-nav__link md-nav__link--active">
Stores
</a>
<nav class="md-nav md-nav--secondary" aria-label="Table of contents">
<label class="md-nav__title" for="__toc">
<span class="md-nav__icon md-icon"></span>
Table of contents
</label>
<ul class="md-nav__list" data-md-scrollfix>
<li class="md-nav__item">
<a href="#extensionstore" class="md-nav__link">
ExtensionStore
</a>
</li>
</ul>
</nav>
</li>
@@ -785,6 +839,36 @@
<div class="md-sidebar md-sidebar--secondary" data-md-component="toc">
<div class="md-sidebar__scrollwrap">
<div class="md-sidebar__inner">
<nav class="md-nav md-nav--secondary" aria-label="Table of contents">
<label class="md-nav__title" for="__toc">
<span class="md-nav__icon md-icon"></span>
Table of contents
</label>
<ul class="md-nav__list" data-md-scrollfix>
<li class="md-nav__item">
<a href="#extensionstore" class="md-nav__link">
ExtensionStore
</a>
</li>
</ul>
</nav>
</div>
</div>
</div>
<div class="md-content">
@@ -792,12 +876,143 @@
<hr />
<h2 id="wip">WIP<a class="headerlink" href="#wip" title="Permanent link">#</a></h2>
<h1 id="stores">Stores<a class="headerlink" href="#stores" title="Permanent link">#</a></h1>
<h2 id="clusterstore">ClusterStore<a class="headerlink" href="#clusterstore" title="Permanent link">#</a></h2>
<h2 id="workspacestore">WorkspaceStore<a class="headerlink" href="#workspacestore" title="Permanent link">#</a></h2>
<h1 id="stores">Stores<a class="headerlink" href="#stores" title="Permanent link">#</a></h1>
<p>Stores are components that persist and synchronize state data. Lens utilizes a number of stores for maintaining a variety of state information.
A few of these are exposed by the extensions api for use by the extension developer.</p>
<ul>
<li>The <code>ClusterStore</code> manages cluster state data such as cluster details, and which cluster is active.</li>
<li>The <code>WorkspaceStore</code> similarly manages workspace state data, such as workspace name, and which clusters belong to a given workspace.</li>
<li>The <code>ExtensionStore</code> is a store for managing custom extension state data.</li>
</ul>
<h2 id="extensionstore">ExtensionStore<a class="headerlink" href="#extensionstore" title="Permanent link">#</a></h2>
<p>Extension developers can create their own store for managing state data by extending the <code>ExtensionStore</code> class.
This guide shows how to create a store for the <a href="../renderer-extension#apppreferences"><code>appPreferences</code> guide example</a>, which demonstrates how to add a custom preference to the Preferences page.
The preference is a simple boolean that indicates whether something is enabled or not.
The problem with that example is that the enabled state is not stored anywhere, and reverts to the default the next time Lens is started.</p>
<p>The following example code creates a store for the <code>appPreferences</code> guide example:</p>
<div class="highlight"><pre><span></span><code><span class="kr">import</span> <span class="p">{</span> <span class="nx">Store</span> <span class="p">}</span> <span class="nx">from</span> <span class="s2">&quot;@k8slens/extensions&quot;</span><span class="p">;</span>
<span class="kr">import</span> <span class="p">{</span> <span class="nx">observable</span><span class="p">,</span> <span class="nx">toJS</span> <span class="p">}</span> <span class="nx">from</span> <span class="s2">&quot;mobx&quot;</span><span class="p">;</span>
<span class="kr">export</span> <span class="nx">type</span> <span class="nx">ExamplePreferencesModel</span> <span class="o">=</span> <span class="p">{</span>
<span class="nx">enabled</span>: <span class="kt">boolean</span><span class="p">;</span>
<span class="p">};</span>
<span class="kr">export</span> <span class="kr">class</span> <span class="nx">ExamplePreferencesStore</span> <span class="kr">extends</span> <span class="nx">Store</span><span class="p">.</span><span class="nx">ExtensionStore</span><span class="o">&lt;</span><span class="nx">ExamplePreferencesModel</span><span class="o">&gt;</span> <span class="p">{</span>
<span class="kd">@observable</span> <span class="nx">enabled</span> <span class="o">=</span> <span class="kc">false</span><span class="p">;</span>
<span class="kr">private</span> <span class="kr">constructor</span><span class="p">()</span> <span class="p">{</span>
<span class="kr">super</span><span class="p">({</span>
<span class="nx">configName</span><span class="o">:</span> <span class="s2">&quot;example-preferences-store&quot;</span><span class="p">,</span>
<span class="nx">defaults</span><span class="o">:</span> <span class="p">{</span>
<span class="nx">enabled</span>: <span class="kt">false</span>
<span class="p">}</span>
<span class="p">});</span>
<span class="p">}</span>
<span class="kr">protected</span> <span class="nx">fromStore</span><span class="p">({</span> <span class="nx">enabled</span> <span class="p">}</span><span class="o">:</span> <span class="nx">ExamplePreferencesModel</span><span class="p">)</span><span class="o">:</span> <span class="k">void</span> <span class="p">{</span>
<span class="k">this</span><span class="p">.</span><span class="nx">enabled</span> <span class="o">=</span> <span class="nx">enabled</span><span class="p">;</span>
<span class="p">}</span>
<span class="nx">toJSON</span><span class="p">()</span><span class="o">:</span> <span class="nx">ExamplePreferencesModel</span> <span class="p">{</span>
<span class="k">return</span> <span class="nx">toJS</span><span class="p">({</span>
<span class="nx">enabled</span>: <span class="kt">this.enabled</span>
<span class="p">},</span> <span class="p">{</span>
<span class="nx">recurseEverything</span>: <span class="kt">true</span>
<span class="p">});</span>
<span class="p">}</span>
<span class="p">}</span>
<span class="kr">export</span> <span class="kr">const</span> <span class="nx">examplePreferencesStore</span> <span class="o">=</span> <span class="nx">ExamplePreferencesStore</span><span class="p">.</span><span class="nx">getInstance</span><span class="o">&lt;</span><span class="nx">ExamplePreferencesStore</span><span class="o">&gt;</span><span class="p">();</span>
</code></pre></div>
<p>First the extension's data model is defined using a simple type, <code>ExamplePreferencesModel</code>, which has a single field, <code>enabled</code>, representing the preference's state.
<code>ExamplePreferencesStore</code> extends <code>Store.ExtensionStore</code>, based on the <code>ExamplePreferencesModel</code>.
The field <code>enabled</code> is added to the <code>ExamplePreferencesStore</code> class to hold the "live" or current state of the preference.
Note the use of the <code>observer</code> decorator on the <code>enabled</code> field.
As for the <a href="../renderer-extension#apppreferences"><code>appPreferences</code> guide example</a>, <a href="https://mobx.js.org/README.html"><code>mobx</code></a> is used for the UI state management, ensuring the checkbox updates when activated by the user.</p>
<p>Then the constructor and two abstract methods are implemented.
In the constructor, the name of the store (<code>"example-preferences-store"</code>), and the default (initial) value for the preference state (<code>enabled: false</code>) are specified.
The <code>fromStore()</code> method is called by Lens internals when the store is loaded, and gives the extension the opportunity to retrieve the stored state data values based on the defined data model.
Here, the <code>enabled</code> field of the <code>ExamplePreferencesStore</code> is set to the value from the store whenever <code>fromStore()</code> is invoked.
The <code>toJSON()</code> method is complementary to <code>fromStore()</code>, and is called when the store is being saved.
<code>toJSON()</code> must provide a JSON serializable object, facilitating its storage in JSON format.
The <code>toJS()</code> function from <a href="https://mobx.js.org/README.html"><code>mobx</code></a> is convenient for this purpose, and is used here.</p>
<p>Finally, <code>examplePreferencesStore</code> is created by calling <code>ExamplePreferencesStore.getInstance&lt;ExamplePreferencesStore&gt;()</code>, and exported for use by other parts of the extension.
Note that <code>examplePreferencesStore</code> is a singleton, calling this function again will not create a new store.</p>
<p>The following example code, modified from the <a href="../renderer-extension#apppreferences"><code>appPreferences</code> guide example</a> demonstrates how to use the extension store.
<code>examplePreferencesStore</code> must be loaded in the main process, where loaded stores are automatically saved when exiting Lens. This can be done in <code>./main.ts</code>:</p>
<div class="highlight"><pre><span></span><code><span class="kr">import</span> <span class="p">{</span> <span class="nx">LensMainExtension</span> <span class="p">}</span> <span class="nx">from</span> <span class="s2">&quot;@k8slens/extensions&quot;</span><span class="p">;</span>
<span class="kr">import</span> <span class="p">{</span> <span class="nx">examplePreferencesStore</span> <span class="p">}</span> <span class="nx">from</span> <span class="s2">&quot;./src/example-preference-store&quot;</span><span class="p">;</span>
<span class="kr">export</span> <span class="k">default</span> <span class="kr">class</span> <span class="nx">ExampleMainExtension</span> <span class="kr">extends</span> <span class="nx">LensMainExtension</span> <span class="p">{</span>
<span class="nx">async</span> <span class="nx">onActivate() {</span>
<span class="nx">await</span> <span class="nx">examplePreferencesStore</span><span class="p">.</span><span class="nx">loadExtension</span><span class="p">(</span><span class="k">this</span><span class="p">);</span>
<span class="p">}</span>
<span class="p">}</span>
</code></pre></div>
<p>Here, <code>examplePreferencesStore</code> is loaded with <code>examplePreferencesStore.loadExtension(this)</code>, which is conveniently called from the <code>onActivate()</code> method of <code>ExampleMainExtension</code>.
Similarly, <code>examplePreferencesStore</code> must be loaded in the renderer process where the <code>appPreferences</code> are handled. This can be done in <code>./renderer.ts</code>:</p>
<div class="highlight"><pre><span></span><code><span class="kr">import</span> <span class="p">{</span> <span class="nx">LensRendererExtension</span> <span class="p">}</span> <span class="nx">from</span> <span class="s2">&quot;@k8slens/extensions&quot;</span><span class="p">;</span>
<span class="kr">import</span> <span class="p">{</span> <span class="nx">ExamplePreferenceHint</span><span class="p">,</span> <span class="nx">ExamplePreferenceInput</span> <span class="p">}</span> <span class="nx">from</span> <span class="s2">&quot;./src/example-preference&quot;</span><span class="p">;</span>
<span class="kr">import</span> <span class="p">{</span> <span class="nx">examplePreferencesStore</span> <span class="p">}</span> <span class="nx">from</span> <span class="s2">&quot;./src/example-preference-store&quot;</span><span class="p">;</span>
<span class="kr">import</span> <span class="nx">React</span> <span class="nx">from</span> <span class="s2">&quot;react&quot;</span><span class="p">;</span>
<span class="kr">export</span> <span class="k">default</span> <span class="kr">class</span> <span class="nx">ExampleRendererExtension</span> <span class="kr">extends</span> <span class="nx">LensRendererExtension</span> <span class="p">{</span>
<span class="nx">async</span> <span class="nx">onActivate() {</span>
<span class="nx">await</span> <span class="nx">examplePreferencesStore</span><span class="p">.</span><span class="nx">loadExtension</span><span class="p">(</span><span class="k">this</span><span class="p">);</span>
<span class="p">}</span>
<span class="nx">appPreferences</span> <span class="o">=</span> <span class="p">[</span>
<span class="p">{</span>
<span class="nx">title</span><span class="o">:</span> <span class="s2">&quot;Example Preferences&quot;</span><span class="p">,</span>
<span class="nx">components</span><span class="o">:</span> <span class="p">{</span>
<span class="nx">Input</span><span class="o">:</span> <span class="p">()</span> <span class="o">=&gt;</span> <span class="o">&lt;</span><span class="nx">ExamplePreferenceInput</span> <span class="nx">preference</span><span class="o">=</span><span class="p">{</span><span class="nx">examplePreferencesStore</span><span class="p">}</span><span class="o">/&gt;</span><span class="p">,</span>
<span class="nx">Hint</span><span class="o">:</span> <span class="p">()</span> <span class="o">=&gt;</span> <span class="o">&lt;</span><span class="nx">ExamplePreferenceHint</span><span class="o">/&gt;</span>
<span class="p">}</span>
<span class="p">}</span>
<span class="p">];</span>
<span class="p">}</span>
</code></pre></div>
<p>Again, <code>examplePreferencesStore.loadExtension(this)</code> is called to load <code>examplePreferencesStore</code>, this time from the <code>onActivate()</code> method of <code>ExampleRendererExtension</code>.
Also, there is no longer the need for the <code>preference</code> field in the <code>ExampleRendererExtension</code> class, as the props for <code>ExamplePreferenceInput</code> is now <code>examplePreferencesStore</code>.
<code>ExamplePreferenceInput</code> is defined in <code>./src/example-preference.tsx</code>:</p>
<div class="highlight"><pre><span></span><code><span class="kr">import</span> <span class="p">{</span> <span class="nx">Component</span> <span class="p">}</span> <span class="nx">from</span> <span class="s2">&quot;@k8slens/extensions&quot;</span><span class="p">;</span>
<span class="kr">import</span> <span class="p">{</span> <span class="nx">observer</span> <span class="p">}</span> <span class="nx">from</span> <span class="s2">&quot;mobx-react&quot;</span><span class="p">;</span>
<span class="kr">import</span> <span class="nx">React</span> <span class="nx">from</span> <span class="s2">&quot;react&quot;</span><span class="p">;</span>
<span class="kr">import</span> <span class="p">{</span> <span class="nx">ExamplePreferencesStore</span> <span class="p">}</span> <span class="nx">from</span> <span class="s2">&quot;./example-preference-store&quot;</span><span class="p">;</span>
<span class="kr">export</span> <span class="kr">class</span> <span class="nx">ExamplePreferenceProps</span> <span class="p">{</span>
<span class="nx">preference</span>: <span class="kt">ExamplePreferencesStore</span><span class="p">;</span>
<span class="p">}</span>
<span class="kd">@observer</span>
<span class="kr">export</span> <span class="kr">class</span> <span class="nx">ExamplePreferenceInput</span> <span class="kr">extends</span> <span class="nx">React</span><span class="p">.</span><span class="nx">Component</span><span class="o">&lt;</span><span class="nx">ExamplePreferenceProps</span><span class="o">&gt;</span> <span class="p">{</span>
<span class="nx">render() {</span>
<span class="kr">const</span> <span class="p">{</span> <span class="nx">preference</span> <span class="p">}</span> <span class="o">=</span> <span class="k">this</span><span class="p">.</span><span class="nx">props</span><span class="p">;</span>
<span class="k">return</span> <span class="p">(</span>
<span class="o">&lt;</span><span class="nx">Component</span><span class="p">.</span><span class="nx">Checkbox</span>
<span class="nx">label</span><span class="o">=</span><span class="s2">&quot;I understand appPreferences&quot;</span>
<span class="nx">value</span><span class="o">=</span><span class="p">{</span><span class="nx">preference</span><span class="p">.</span><span class="nx">enabled</span><span class="p">}</span>
<span class="nx">onChange</span><span class="o">=</span><span class="p">{</span><span class="nx">v</span> <span class="o">=&gt;</span> <span class="p">{</span> <span class="nx">preference</span><span class="p">.</span><span class="nx">enabled</span> <span class="o">=</span> <span class="nx">v</span><span class="p">;</span> <span class="p">}}</span>
<span class="o">/&gt;</span>
<span class="p">);</span>
<span class="p">}</span>
<span class="p">}</span>
<span class="kr">export</span> <span class="kr">class</span> <span class="nx">ExamplePreferenceHint</span> <span class="kr">extends</span> <span class="nx">React</span><span class="p">.</span><span class="nx">Component</span> <span class="p">{</span>
<span class="nx">render() {</span>
<span class="k">return</span> <span class="p">(</span>
<span class="o">&lt;</span><span class="nx">span</span><span class="o">&gt;</span><span class="nx">This</span> <span class="nx">is</span> <span class="nx">an</span> <span class="nx">example</span> <span class="k">of</span> <span class="nx">an</span> <span class="nx">appPreference</span> <span class="k">for</span> <span class="nx">extensions</span><span class="p">.</span><span class="o">&lt;</span><span class="err">/span&gt;</span>
<span class="p">);</span>
<span class="p">}</span>
<span class="p">}</span>
</code></pre></div>
<p>The only change here is that <code>ExamplePreferenceProps</code> defines its <code>preference</code> field as an <code>ExamplePreferencesStore</code> type.
Everything else works as before except now the <code>enabled</code> state persists across Lens restarts because it is managed by the
<code>examplePreferencesStore</code>.</p>
@@ -813,6 +1028,41 @@
<footer class="md-footer">
<div class="md-footer-nav">
<nav class="md-footer-nav__inner md-grid" aria-label="Footer">
<a href="../renderer-extension/" class="md-footer-nav__link md-footer-nav__link--prev" rel="prev">
<div class="md-footer-nav__button md-icon">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M20 11v2H8l5.5 5.5-1.42 1.42L4.16 12l7.92-7.92L13.5 5.5 8 11h12z"/></svg>
</div>
<div class="md-footer-nav__title">
<div class="md-ellipsis">
<span class="md-footer-nav__direction">
Previous
</span>
Renderer Extension
</div>
</div>
</a>
<a href="../working-with-mobx/" class="md-footer-nav__link md-footer-nav__link--next" rel="next">
<div class="md-footer-nav__title">
<div class="md-ellipsis">
<span class="md-footer-nav__direction">
Next
</span>
Working with mobx
</div>
</div>
<div class="md-footer-nav__button md-icon">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M4 11v2h12l-5.5 5.5 1.42 1.42L19.84 12l-7.92-7.92L10.5 5.5 16 11H4z"/></svg>
</div>
</a>
</nav>
</div>
<div class="md-footer-meta md-typeset">
<div class="md-footer-meta__inner md-grid">
<div class="md-footer-copyright">
master/extensions/guides/working-with-mobx/index.html
+16 -4
View File
@@ -552,6 +552,18 @@
<li class="md-nav__item">
<a href="../generator/" class="md-nav__link">
Generator
</a>
</li>
<li class="md-nav__item">
<a href="../main-extension/" class="md-nav__link">
Main Extension
@@ -577,8 +589,8 @@
<li class="md-nav__item">
<a href="../generator/" class="md-nav__link">
Generator
<a href="../stores/" class="md-nav__link">
Stores
</a>
</li>
@@ -915,7 +927,7 @@ However, if you do not, here is a quick overview.</p>
<div class="md-footer-nav">
<nav class="md-footer-nav__inner md-grid" aria-label="Footer">
<a href="../generator/" class="md-footer-nav__link md-footer-nav__link--prev" rel="prev">
<a href="../stores/" class="md-footer-nav__link md-footer-nav__link--prev" rel="prev">
<div class="md-footer-nav__button md-icon">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M20 11v2H8l5.5 5.5-1.42 1.42L4.16 12l7.92-7.92L13.5 5.5 8 11h12z"/></svg>
</div>
@@ -924,7 +936,7 @@ However, if you do not, here is a quick overview.</p>
<span class="md-footer-nav__direction">
Previous
</span>
Generator
Stores
</div>
</div>
</a>