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 080dab0b7 to master with MkDocs 1.1.2 and mike 0.5.5

Browse Source
This commit is contained in:
GitHub Action committed 2021-01-18 07:54:31 +00:00
1 parent 5507b31881
commit 1d8a604fd5
254 files changed
+3895 -3908
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

master/extensions/guides/anatomy/index.html
+1 -1
View File
@@ -598,7 +598,7 @@
<li class="md-nav__item">
<a href="../working-with-mobx/" class="md-nav__link">
Working with mobx
Working with MobX
</a>
</li>
master/extensions/guides/components/index.html
+1 -1
View File
@@ -598,7 +598,7 @@
<li class="md-nav__item">
<a href="../working-with-mobx/" class="md-nav__link">
Working with mobx
Working with MobX
</a>
</li>
master/extensions/guides/generator/index.html
+1 -1
View File
@@ -661,7 +661,7 @@
<li class="md-nav__item">
<a href="../working-with-mobx/" class="md-nav__link">
Working with mobx
Working with MobX
</a>
</li>
master/extensions/guides/index.html
+1 -1
View File
@@ -647,7 +647,7 @@
<li class="md-nav__item">
<a href="working-with-mobx/" class="md-nav__link">
Working with mobx
Working with MobX
</a>
</li>
master/extensions/guides/kube-object-list-layout/index.html
+1 -1
View File
@@ -598,7 +598,7 @@
<li class="md-nav__item">
<a href="../working-with-mobx/" class="md-nav__link">
Working with mobx
Working with MobX
</a>
</li>
master/extensions/guides/main-extension/index.html
+1 -1
View File
@@ -660,7 +660,7 @@
<li class="md-nav__item">
<a href="../working-with-mobx/" class="md-nav__link">
Working with mobx
Working with MobX
</a>
</li>
master/extensions/guides/renderer-extension/index.html
+1 -1
View File
@@ -716,7 +716,7 @@
<li class="md-nav__item">
<a href="../working-with-mobx/" class="md-nav__link">
Working with mobx
Working with MobX
</a>
</li>
master/extensions/guides/stores/index.html
+17 -32
View File
@@ -640,7 +640,7 @@
<li class="md-nav__item">
<a href="../working-with-mobx/" class="md-nav__link">
Working with mobx
Working with MobX
</a>
</li>
@@ -877,18 +877,15 @@
<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>
<p>Stores are components that persist and synchronize state data. Lens uses a number of stores to maintain various kinds of state information, including:</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>
<li>The <code>ClusterStore</code> manages cluster state data (such as cluster details), and it tracks which cluster is active.</li>
<li>The <code>WorkspaceStore</code> manages workspace state data (such as the workspace name), and and it tracks which clusters belong to a given workspace.</li>
<li>The <code>ExtensionStore</code> manages custom extension state data.</li>
</ul>
<p>This guide focuses on the <code>ExtensionStore</code>.</p>
<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>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></a> guide example, which demonstrates how to add a custom preference to the <strong>Preferences</strong> page. The preference is a simple boolean that indicates whether or not something is enabled. However, in the example, the enabled state is not stored anywhere, and it reverts to the default when Lens is restarted.</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="k">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="k">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>
@@ -925,22 +922,11 @@ The problem with that example is that the enabled state is not stored anywhere,
<span class="k">export</span> <span class="kd">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>
<p>First, our example defines the extension's data model using the simple <code>ExamplePreferencesModel</code> type. This has a single field, <code>enabled</code>, which represents the preference's state. <code>ExamplePreferencesStore</code> extends <code>Store.ExtensionStore</code>, which is based on the <code>ExamplePreferencesModel</code>. The <code>enabled</code> field is added to the <code>ExamplePreferencesStore</code> class to hold the "live" or current state of the preference. Note the use of the <code>observable</code> decorator on the <code>enabled</code> field. The <a href="../renderer-extension#apppreferences"><code>appPreferences</code></a> guide example uses <a href="https://mobx.js.org/README.html">MobX</a> for the UI state management, ensuring the checkbox updates when it's activated by the user.</p>
<p>Next, our example implements the constructor and two abstract methods. The constructor specifies the name of the store (<code>"example-preferences-store"</code>) and the default (initial) value for the preference state (<code>enabled: false</code>). Lens internals call the <code>fromStore()</code> method when the store loads. It gives the extension the opportunity to retrieve the stored state data values based on the defined data model. 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>. It 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></a> guide 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="k">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="k">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>
@@ -950,8 +936,8 @@ Note that <code>examplePreferencesStore</code> is a singleton, calling this func
<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>
<p>Here, <code>examplePreferencesStore</code> loads 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 load 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="k">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="k">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="k">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>
@@ -974,8 +960,7 @@ Similarly, <code>examplePreferencesStore</code> must be loaded in the renderer p
<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>.
<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>. There is no longer the need for the <code>preference</code> field in the <code>ExampleRendererExtension</code> class because 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="k">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="k">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>
@@ -1011,7 +996,7 @@ Also, there is no longer the need for the <code>preference</code> field in the <
<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
Everything else works as before, except that now the <code>enabled</code> state persists across Lens restarts because it is managed by the
<code>examplePreferencesStore</code>.</p>
@@ -1052,7 +1037,7 @@ Everything else works as before except now the <code>enabled</code> state persis
<span class="md-footer-nav__direction">
Next
</span>
Working with mobx
Working with MobX
</div>
</div>
<div class="md-footer-nav__button md-icon">
master/extensions/guides/working-with-mobx/index.html
+24 -22
View File
@@ -19,7 +19,7 @@
<title>Working with mobx - Lens Documentation</title>
<title>Working with MobX - Lens Documentation</title>
@@ -106,7 +106,7 @@
<div class="md-header-nav__topic">
<span class="md-ellipsis">
Working with mobx
Working with MobX
</span>
</div>
@@ -610,12 +610,12 @@
<label class="md-nav__link md-nav__link--active" for="__toc">
Working with mobx
Working with MobX
<span class="md-nav__icon md-icon"></span>
</label>
<a href="./" class="md-nav__link md-nav__link--active">
Working with mobx
Working with MobX
</a>
@@ -640,7 +640,7 @@
<li class="md-nav__item">
<a href="#how-mobx-works" class="md-nav__link">
How mobx works:
How MobX Works:
</a>
</li>
@@ -871,7 +871,7 @@
<li class="md-nav__item">
<a href="#how-mobx-works" class="md-nav__link">
How mobx works:
How MobX Works:
</a>
</li>
@@ -890,25 +890,27 @@
<h1 id="working-with-mobx">Working with mobx<a class="headerlink" href="#working-with-mobx" title="Permanent link">#</a></h1>
<h1 id="working-with-mobx">Working with MobX<a class="headerlink" href="#working-with-mobx" title="Permanent link">#</a></h1>
<h2 id="introduction">Introduction<a class="headerlink" href="#introduction" title="Permanent link">#</a></h2>
<p>Lens uses <code>mobx</code> as its state manager on top of React's state management system.
This helps with having a more declarative style of managing state, as opposed to <code>React</code>'s native <code>setState</code> mechanism.
You should already have a basic understanding of how <code>React</code> handles state (<a href="https://reactjs.org/docs/faq-state.html">read here</a> for more information).
However, if you do not, here is a quick overview.</p>
<p>Lens uses MobX on top of React's state management system.
The result is a more declarative state management style, rather than React's native <code>setState</code> mechanism.</p>
<p>You can review how React handles state management <a href="https://reactjs.org/docs/faq-state.html">here</a>.</p>
<p>The following is a quick overview:</p>
<ul>
<li>A <code>React.Component</code> is generic over both <code>Props</code> and <code>State</code> (with default empty object types).</li>
<li><code>Props</code> should be considered read-only from the point of view of the component and is the mechanism for passing in "arguments" to a component.</li>
<li><code>State</code> is a component's internal state and can be read by accessing the parent field <code>state</code>.</li>
<li><code>State</code> <strong>must</strong> be updated using the <code>setState</code> parent method which merges the new data with the old state.</li>
<li><code>React</code> does do some optimizations around re-rendering components after quick successions of <code>setState</code> calls.</li>
<li><code>React.Component</code> is generic with respect to both <code>props</code> and <code>state</code> (which default to the empty object type).</li>
<li><code>props</code> should be considered read-only from the point of view of the component, and it is the mechanism for passing in arguments to a component.</li>
<li><code>state</code> is a component's internal state, and can be read by accessing the super-class field <code>state</code>.</li>
<li><code>state</code> <strong>must</strong> be updated using the <code>setState</code> parent method which merges the new data with the old state.</li>
<li>React does some optimizations around re-rendering components after quick successions of <code>setState</code> calls.</li>
</ul>
<h2 id="how-mobx-works">How mobx works:<a class="headerlink" href="#how-mobx-works" title="Permanent link">#</a></h2>
<p><code>mobx</code> is a package that provides an abstraction over <code>React</code>'s state management. The three main concepts are:
- <code>observable</code>: data stored in the component's <code>state</code>
- <code>action</code>: a function that modifies any <code>observable</code> data
- <code>computed</code>: data that is derived from <code>observable</code> data but is not actually stored. Think of this as computing <code>isEmpty</code> vs an <code>observable</code> field called <code>count</code>.</p>
<p>Further reading is available from <code>mobx</code>'s <a href="https://mobx.js.org/the-gist-of-mobx.html">website</a>.</p>
<h2 id="how-mobx-works">How MobX Works:<a class="headerlink" href="#how-mobx-works" title="Permanent link">#</a></h2>
<p>MobX is a package that provides an abstraction over React's state management system. The three main concepts are:</p>
<ul>
<li><code>observable</code> is a marker for data stored in the component's <code>state</code>.</li>
<li><code>action</code> is a function that modifies any <code>observable</code> data.</li>
<li><code>computed</code> is a marker for data that is derived from <code>observable</code> data, but that is not actually stored. Think of this as computing <code>isEmpty</code> rather than an observable field called <code>count</code>.</li>
</ul>
<p>Further reading is available on the <a href="https://mobx.js.org/the-gist-of-mobx.html">MobX website</a>.</p>