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 2363b390c9 to master with MkDocs 1.4.2 and mike 1.1.2

Browse Source
This commit is contained in:
GitHub Action committed 2023-01-03 13:28:44 +00:00
1 parent cbc5266a16
commit a341140e98
35 files changed
+1808 -1808
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

master/extensions/get-started/anatomy/index.html
+57 -57
View File
@@ -868,36 +868,36 @@ Some of the most-important fields include:</p>
We only support the <code>^</code> range, which is also optional to specify, and only major and minor version numbers.
Meaning that <code>^5.4</code> and <code>5.4</code> both mean the same thing, and the patch version in <code>5.4.2</code> is ignored.</li>
</ul>
<div class="highlight"><pre><span></span><code><span class="p">{</span><span class="w"></span>
<span class="w"> </span><span class="s2">&quot;name&quot;</span><span class="o">:</span><span class="w"> </span><span class="s2">&quot;helloworld-sample&quot;</span><span class="p">,</span><span class="w"></span>
<span class="w"> </span><span class="s2">&quot;publisher&quot;</span><span class="o">:</span><span class="w"> </span><span class="s2">&quot;lens-samples&quot;</span><span class="p">,</span><span class="w"></span>
<span class="w"> </span><span class="s2">&quot;version&quot;</span><span class="o">:</span><span class="w"> </span><span class="s2">&quot;0.0.1&quot;</span><span class="p">,</span><span class="w"></span>
<span class="w"> </span><span class="s2">&quot;description&quot;</span><span class="o">:</span><span class="w"> </span><span class="s2">&quot;Lens helloworld-sample&quot;</span><span class="p">,</span><span class="w"></span>
<span class="w"> </span><span class="s2">&quot;license&quot;</span><span class="o">:</span><span class="w"> </span><span class="s2">&quot;MIT&quot;</span><span class="p">,</span><span class="w"></span>
<span class="w"> </span><span class="s2">&quot;homepage&quot;</span><span class="o">:</span><span class="w"> </span><span class="s2">&quot;https://github.com/lensapp/lens-extension-samples&quot;</span><span class="p">,</span><span class="w"></span>
<span class="w"> </span><span class="s2">&quot;engines&quot;</span><span class="o">:</span><span class="w"> </span><span class="p">{</span><span class="w"></span>
<span class="w"> </span><span class="s2">&quot;node&quot;</span><span class="o">:</span><span class="w"> </span><span class="s2">&quot;^16.14.2&quot;</span><span class="p">,</span><span class="w"></span>
<span class="w"> </span><span class="s2">&quot;lens&quot;</span><span class="o">:</span><span class="w"> </span><span class="s2">&quot;5.4&quot;</span><span class="w"></span>
<span class="w"> </span><span class="p">},</span><span class="w"></span>
<span class="w"> </span><span class="s2">&quot;main&quot;</span><span class="o">:</span><span class="w"> </span><span class="s2">&quot;dist/main.js&quot;</span><span class="p">,</span><span class="w"></span>
<span class="w"> </span><span class="s2">&quot;renderer&quot;</span><span class="o">:</span><span class="w"> </span><span class="s2">&quot;dist/renderer.js&quot;</span><span class="p">,</span><span class="w"></span>
<span class="w"> </span><span class="s2">&quot;scripts&quot;</span><span class="o">:</span><span class="w"> </span><span class="p">{</span><span class="w"></span>
<span class="w"> </span><span class="s2">&quot;build&quot;</span><span class="o">:</span><span class="w"> </span><span class="s2">&quot;webpack --config webpack.config.js&quot;</span><span class="p">,</span><span class="w"></span>
<span class="w"> </span><span class="s2">&quot;dev&quot;</span><span class="o">:</span><span class="w"> </span><span class="s2">&quot;npm run build --watch&quot;</span><span class="w"></span>
<span class="w"> </span><span class="p">},</span><span class="w"></span>
<span class="w"> </span><span class="s2">&quot;dependencies&quot;</span><span class="o">:</span><span class="w"> </span><span class="p">{</span><span class="w"></span>
<span class="w"> </span><span class="s2">&quot;react-open-doodles&quot;</span><span class="o">:</span><span class="w"> </span><span class="s2">&quot;^1.0.5&quot;</span><span class="w"></span>
<span class="w"> </span><span class="p">},</span><span class="w"></span>
<span class="w"> </span><span class="s2">&quot;devDependencies&quot;</span><span class="o">:</span><span class="w"> </span><span class="p">{</span><span class="w"></span>
<span class="w"> </span><span class="s2">&quot;@k8slens/extensions&quot;</span><span class="o">:</span><span class="w"> </span><span class="s2">&quot;^5.4.6&quot;</span><span class="p">,</span><span class="w"></span>
<span class="w"> </span><span class="s2">&quot;ts-loader&quot;</span><span class="o">:</span><span class="w"> </span><span class="s2">&quot;^8.0.4&quot;</span><span class="p">,</span><span class="w"></span>
<span class="w"> </span><span class="s2">&quot;typescript&quot;</span><span class="o">:</span><span class="w"> </span><span class="s2">&quot;^4.5.5&quot;</span><span class="p">,</span><span class="w"></span>
<span class="w"> </span><span class="s2">&quot;@types/react&quot;</span><span class="o">:</span><span class="w"> </span><span class="s2">&quot;^17.0.44&quot;</span><span class="p">,</span><span class="w"></span>
<span class="w"> </span><span class="s2">&quot;@types/node&quot;</span><span class="o">:</span><span class="w"> </span><span class="s2">&quot;^16.14.2&quot;</span><span class="p">,</span><span class="w"></span>
<span class="w"> </span><span class="s2">&quot;webpack&quot;</span><span class="o">:</span><span class="w"> </span><span class="s2">&quot;^4.44.2&quot;</span><span class="p">,</span><span class="w"></span>
<span class="w"> </span><span class="s2">&quot;webpack-cli&quot;</span><span class="o">:</span><span class="w"> </span><span class="s2">&quot;^3.3.11&quot;</span><span class="w"></span>
<span class="w"> </span><span class="p">}</span><span class="w"></span>
<span class="p">}</span><span class="w"></span>
<div class="highlight"><pre><span></span><code><span class="p">{</span>
<span class="w"> </span><span class="s2">&quot;name&quot;</span><span class="o">:</span><span class="w"> </span><span class="s2">&quot;helloworld-sample&quot;</span><span class="p">,</span>
<span class="w"> </span><span class="s2">&quot;publisher&quot;</span><span class="o">:</span><span class="w"> </span><span class="s2">&quot;lens-samples&quot;</span><span class="p">,</span>
<span class="w"> </span><span class="s2">&quot;version&quot;</span><span class="o">:</span><span class="w"> </span><span class="s2">&quot;0.0.1&quot;</span><span class="p">,</span>
<span class="w"> </span><span class="s2">&quot;description&quot;</span><span class="o">:</span><span class="w"> </span><span class="s2">&quot;Lens helloworld-sample&quot;</span><span class="p">,</span>
<span class="w"> </span><span class="s2">&quot;license&quot;</span><span class="o">:</span><span class="w"> </span><span class="s2">&quot;MIT&quot;</span><span class="p">,</span>
<span class="w"> </span><span class="s2">&quot;homepage&quot;</span><span class="o">:</span><span class="w"> </span><span class="s2">&quot;https://github.com/lensapp/lens-extension-samples&quot;</span><span class="p">,</span>
<span class="w"> </span><span class="s2">&quot;engines&quot;</span><span class="o">:</span><span class="w"> </span><span class="p">{</span>
<span class="w"> </span><span class="s2">&quot;node&quot;</span><span class="o">:</span><span class="w"> </span><span class="s2">&quot;^16.14.2&quot;</span><span class="p">,</span>
<span class="w"> </span><span class="s2">&quot;lens&quot;</span><span class="o">:</span><span class="w"> </span><span class="s2">&quot;5.4&quot;</span>
<span class="w"> </span><span class="p">},</span>
<span class="w"> </span><span class="s2">&quot;main&quot;</span><span class="o">:</span><span class="w"> </span><span class="s2">&quot;dist/main.js&quot;</span><span class="p">,</span>
<span class="w"> </span><span class="s2">&quot;renderer&quot;</span><span class="o">:</span><span class="w"> </span><span class="s2">&quot;dist/renderer.js&quot;</span><span class="p">,</span>
<span class="w"> </span><span class="s2">&quot;scripts&quot;</span><span class="o">:</span><span class="w"> </span><span class="p">{</span>
<span class="w"> </span><span class="s2">&quot;build&quot;</span><span class="o">:</span><span class="w"> </span><span class="s2">&quot;webpack --config webpack.config.js&quot;</span><span class="p">,</span>
<span class="w"> </span><span class="s2">&quot;dev&quot;</span><span class="o">:</span><span class="w"> </span><span class="s2">&quot;npm run build --watch&quot;</span>
<span class="w"> </span><span class="p">},</span>
<span class="w"> </span><span class="s2">&quot;dependencies&quot;</span><span class="o">:</span><span class="w"> </span><span class="p">{</span>
<span class="w"> </span><span class="s2">&quot;react-open-doodles&quot;</span><span class="o">:</span><span class="w"> </span><span class="s2">&quot;^1.0.5&quot;</span>
<span class="w"> </span><span class="p">},</span>
<span class="w"> </span><span class="s2">&quot;devDependencies&quot;</span><span class="o">:</span><span class="w"> </span><span class="p">{</span>
<span class="w"> </span><span class="s2">&quot;@k8slens/extensions&quot;</span><span class="o">:</span><span class="w"> </span><span class="s2">&quot;^5.4.6&quot;</span><span class="p">,</span>
<span class="w"> </span><span class="s2">&quot;ts-loader&quot;</span><span class="o">:</span><span class="w"> </span><span class="s2">&quot;^8.0.4&quot;</span><span class="p">,</span>
<span class="w"> </span><span class="s2">&quot;typescript&quot;</span><span class="o">:</span><span class="w"> </span><span class="s2">&quot;^4.5.5&quot;</span><span class="p">,</span>
<span class="w"> </span><span class="s2">&quot;@types/react&quot;</span><span class="o">:</span><span class="w"> </span><span class="s2">&quot;^17.0.44&quot;</span><span class="p">,</span>
<span class="w"> </span><span class="s2">&quot;@types/node&quot;</span><span class="o">:</span><span class="w"> </span><span class="s2">&quot;^16.14.2&quot;</span><span class="p">,</span>
<span class="w"> </span><span class="s2">&quot;webpack&quot;</span><span class="o">:</span><span class="w"> </span><span class="s2">&quot;^4.44.2&quot;</span><span class="p">,</span>
<span class="w"> </span><span class="s2">&quot;webpack-cli&quot;</span><span class="o">:</span><span class="w"> </span><span class="s2">&quot;^3.3.11&quot;</span>
<span class="w"> </span><span class="p">}</span>
<span class="p">}</span>
</code></pre></div>
<h2 id="webpack-configuration">Webpack configuration<a class="headerlink" href="#webpack-configuration" title="Permanent link">#</a></h2>
<p>The following webpack <code>externals</code> are provided by <code>Lens</code> and must be used (when available) to make sure that the versions used are in sync.</p>
@@ -958,20 +958,20 @@ Some of the most-important fields include:</p>
</table>
<p>What is exported is the whole of the packages as a <code>*</code> import (within typescript).</p>
<p>For example, the following is how you would specify these within your webpack configuration files.</p>
<div class="highlight"><pre><span></span><code><span class="p">{</span><span class="w"></span>
<span class="w"> </span><span class="err">...</span><span class="w"></span>
<span class="w"> </span><span class="nt">&quot;externals&quot;</span><span class="p">:</span><span class="w"> </span><span class="p">[</span><span class="w"></span>
<span class="w"> </span><span class="err">...</span><span class="w"></span>
<span class="w"> </span><span class="p">{</span><span class="w"></span>
<span class="w"> </span><span class="nt">&quot;mobx&quot;</span><span class="p">:</span><span class="w"> </span><span class="nt">&quot;var global.Mobx&quot;</span><span class="w"></span>
<span class="w"> </span><span class="nt">&quot;mobx-react&quot;</span><span class="p">:</span><span class="w"> </span><span class="nt">&quot;var global.MobxReact&quot;</span><span class="w"></span>
<span class="w"> </span><span class="nt">&quot;react&quot;</span><span class="p">:</span><span class="w"> </span><span class="nt">&quot;var global.React&quot;</span><span class="w"></span>
<span class="w"> </span><span class="nt">&quot;react-router&quot;</span><span class="p">:</span><span class="w"> </span><span class="nt">&quot;var global.ReactRouter&quot;</span><span class="w"></span>
<span class="w"> </span><span class="nt">&quot;react-router-dom&quot;</span><span class="p">:</span><span class="w"> </span><span class="nt">&quot;var global.ReactRouterDom&quot;</span><span class="w"></span>
<span class="w"> </span><span class="nt">&quot;react-dom&quot;</span><span class="p">:</span><span class="w"> </span><span class="s2">&quot;var global.ReactDOM&quot;</span><span class="w"></span>
<span class="w"> </span><span class="p">}</span><span class="w"></span>
<span class="w"> </span><span class="p">]</span><span class="w"></span>
<span class="p">}</span><span class="w"></span>
<div class="highlight"><pre><span></span><code><span class="p">{</span>
<span class="w"> </span><span class="err">...</span>
<span class="w"> </span><span class="nt">&quot;externals&quot;</span><span class="p">:</span><span class="w"> </span><span class="p">[</span>
<span class="w"> </span><span class="err">...</span>
<span class="w"> </span><span class="p">{</span>
<span class="w"> </span><span class="nt">&quot;mobx&quot;</span><span class="p">:</span><span class="w"> </span><span class="nt">&quot;var global.Mobx&quot;</span>
<span class="w"> </span><span class="nt">&quot;mobx-react&quot;</span><span class="p">:</span><span class="w"> </span><span class="nt">&quot;var global.MobxReact&quot;</span>
<span class="w"> </span><span class="nt">&quot;react&quot;</span><span class="p">:</span><span class="w"> </span><span class="nt">&quot;var global.React&quot;</span>
<span class="w"> </span><span class="nt">&quot;react-router&quot;</span><span class="p">:</span><span class="w"> </span><span class="nt">&quot;var global.ReactRouter&quot;</span>
<span class="w"> </span><span class="nt">&quot;react-router-dom&quot;</span><span class="p">:</span><span class="w"> </span><span class="nt">&quot;var global.ReactRouterDom&quot;</span>
<span class="w"> </span><span class="nt">&quot;react-dom&quot;</span><span class="p">:</span><span class="w"> </span><span class="s2">&quot;var global.ReactDOM&quot;</span>
<span class="w"> </span><span class="p">}</span>
<span class="w"> </span><span class="p">]</span>
<span class="p">}</span>
</code></pre></div>
<h2 id="extension-entry-files">Extension Entry Files<a class="headerlink" href="#extension-entry-files" title="Permanent link">#</a></h2>
<p>Lens extensions can have two separate entry files.
@@ -988,20 +988,20 @@ On the <code>renderer</code> entry point, the Hello World sample extension defin
The <code>Cluster Page</code> object registers the <code>/extension-example</code> path, and this path renders the <code>ExamplePage</code> React component.
It also registers the <code>MenuItem</code> component that displays the <code>ExampleIcon</code> React component and the "Hello World" text in the left-side menu of the cluster dashboard.
These React components are defined in the additional <code>./src/page.tsx</code> file.</p>
<div class="highlight"><pre><span></span><code><span class="k">import</span><span class="w"> </span><span class="p">{</span><span class="w"> </span><span class="nx">Renderer</span><span class="w"> </span><span class="p">}</span><span class="w"> </span><span class="kr">from</span><span class="w"> </span><span class="s2">&quot;@k8slens/extensions&quot;</span><span class="p">;</span><span class="w"></span>
<span class="k">import</span><span class="w"> </span><span class="p">{</span><span class="w"> </span><span class="nx">ExampleIcon</span><span class="p">,</span><span class="w"> </span><span class="nx">ExamplePage</span><span class="w"> </span><span class="p">}</span><span class="w"> </span><span class="kr">from</span><span class="w"> </span><span class="s2">&quot;./page&quot;</span><span class="p">;</span><span class="w"></span>
<span class="k">import</span><span class="w"> </span><span class="nx">React</span><span class="w"> </span><span class="kr">from</span><span class="w"> </span><span class="s2">&quot;react&quot;</span><span class="p">;</span><span class="w"></span>
<div class="highlight"><pre><span></span><code><span class="k">import</span><span class="w"> </span><span class="p">{</span><span class="w"> </span><span class="nx">Renderer</span><span class="w"> </span><span class="p">}</span><span class="w"> </span><span class="kr">from</span><span class="w"> </span><span class="s2">&quot;@k8slens/extensions&quot;</span><span class="p">;</span>
<span class="k">import</span><span class="w"> </span><span class="p">{</span><span class="w"> </span><span class="nx">ExampleIcon</span><span class="p">,</span><span class="w"> </span><span class="nx">ExamplePage</span><span class="w"> </span><span class="p">}</span><span class="w"> </span><span class="kr">from</span><span class="w"> </span><span class="s2">&quot;./page&quot;</span><span class="p">;</span>
<span class="k">import</span><span class="w"> </span><span class="nx">React</span><span class="w"> </span><span class="kr">from</span><span class="w"> </span><span class="s2">&quot;react&quot;</span><span class="p">;</span>
<span class="k">export</span><span class="w"> </span><span class="k">default</span><span class="w"> </span><span class="kd">class</span><span class="w"> </span><span class="nx">ExampleExtension</span><span class="w"> </span><span class="k">extends</span><span class="w"> </span><span class="nx">Renderer</span><span class="p">.</span><span class="nx">LensExtension</span><span class="w"> </span><span class="p">{</span><span class="w"></span>
<span class="w"> </span><span class="nx">clusterPages</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="p">[</span><span class="w"></span>
<span class="w"> </span><span class="p">{</span><span class="w"></span>
<span class="w"> </span><span class="nx">id</span><span class="o">:</span><span class="w"> </span><span class="s2">&quot;extension-example&quot;</span><span class="p">,</span><span class="w"></span>
<span class="w"> </span><span class="nx">components</span><span class="o">:</span><span class="w"> </span><span class="p">{</span><span class="w"></span>
<span class="w"> </span><span class="nx">Page</span><span class="o">:</span><span class="w"> </span><span class="p">()</span><span class="w"> </span><span class="p">=&gt;</span><span class="w"> </span><span class="o">&lt;</span><span class="nx">ExamplePage</span><span class="w"> </span><span class="nx">extension</span><span class="o">=</span><span class="p">{</span><span class="k">this</span><span class="p">}</span><span class="w"> </span><span class="o">/&gt;</span><span class="p">,</span><span class="w"></span>
<span class="w"> </span><span class="p">},</span><span class="w"></span>
<span class="w"> </span><span class="p">},</span><span class="w"></span>
<span class="w"> </span><span class="p">];</span><span class="w"></span>
<span class="p">}</span><span class="w"></span>
<span class="k">export</span><span class="w"> </span><span class="k">default</span><span class="w"> </span><span class="kd">class</span><span class="w"> </span><span class="nx">ExampleExtension</span><span class="w"> </span><span class="k">extends</span><span class="w"> </span><span class="nx">Renderer</span><span class="p">.</span><span class="nx">LensExtension</span><span class="w"> </span><span class="p">{</span>
<span class="w"> </span><span class="nx">clusterPages</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="p">[</span>
<span class="w"> </span><span class="p">{</span>
<span class="w"> </span><span class="nx">id</span><span class="o">:</span><span class="w"> </span><span class="s2">&quot;extension-example&quot;</span><span class="p">,</span>
<span class="w"> </span><span class="nx">components</span><span class="o">:</span><span class="w"> </span><span class="p">{</span>
<span class="w"> </span><span class="nx">Page</span><span class="o">:</span><span class="w"> </span><span class="p">()</span><span class="w"> </span><span class="p">=&gt;</span><span class="w"> </span><span class="o">&lt;</span><span class="nx">ExamplePage</span><span class="w"> </span><span class="nx">extension</span><span class="o">=</span><span class="p">{</span><span class="k">this</span><span class="p">}</span><span class="w"> </span><span class="o">/&gt;</span><span class="p">,</span>
<span class="w"> </span><span class="p">},</span>
<span class="w"> </span><span class="p">},</span>
<span class="w"> </span><span class="p">];</span>
<span class="p">}</span>
</code></pre></div>
<p>The Hello World sample extension uses the <code>Cluster Page</code> capability, which is just one of the Lens extension API's capabilities.
The <a href="../../capabilities/common-capabilities/">Common Capabilities</a> page will help you home in on the right capabilities to use with your own extensions.</p>