mirror of
https://github.com/lensapp/lens.git
synced 2025-05-20 05:10:56 +00:00
Deployed 9f25212f45 to master with MkDocs 1.3.0 and mike 1.1.2
This commit is contained in:
GitHub Action
parent
d501ffce0f
commit
fa423b3ba8
@ -383,6 +383,13 @@
|
||||
</ul>
|
||||
</nav>
|
||||
|
||||
</li>
|
||||
|
||||
<li class="md-nav__item">
|
||||
<a href="#webpack-configuation" class="md-nav__link">
|
||||
Webpack configuation
|
||||
</a>
|
||||
|
||||
</li>
|
||||
|
||||
<li class="md-nav__item">
|
||||
@ -791,6 +798,13 @@
|
||||
</ul>
|
||||
</nav>
|
||||
|
||||
</li>
|
||||
|
||||
<li class="md-nav__item">
|
||||
<a href="#webpack-configuation" class="md-nav__link">
|
||||
Webpack configuation
|
||||
</a>
|
||||
|
||||
</li>
|
||||
|
||||
<li class="md-nav__item">
|
||||
@ -846,11 +860,13 @@ It contains a mix of Node.js fields, including scripts and dependencies, and Len
|
||||
Some of the most-important fields include:</p>
|
||||
<ul>
|
||||
<li><code>name</code> and <code>publisher</code>: Lens uses <code>@<publisher>/<name></code> as a unique ID for the extension.
|
||||
For example, the Hello World sample has the ID <code>@lensapp-samples/helloworld-sample</code>.
|
||||
Lens uses this ID to uniquely identify your extension.</li>
|
||||
For example, the Hello World sample has the ID <code>@lensapp-samples/helloworld-sample</code>.
|
||||
Lens uses this ID to uniquely identify your extension.</li>
|
||||
<li><code>main</code>: the extension's entry point run in <code>main</code> process.</li>
|
||||
<li><code>renderer</code>: the extension's entry point run in <code>renderer</code> process.</li>
|
||||
<li><code>engines.lens</code>: the minimum version of Lens API that the extension depends upon.</li>
|
||||
<li><code>engines.lens</code>: the minimum version of Lens API that the extension depends upon.
|
||||
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">"name"</span><span class="o">:</span><span class="w"> </span><span class="s2">"helloworld-sample"</span><span class="p">,</span><span class="w"></span>
|
||||
@ -860,7 +876,8 @@ Lens uses this ID to uniquely identify your extension.</li>
|
||||
<span class="w"> </span><span class="s2">"license"</span><span class="o">:</span><span class="w"> </span><span class="s2">"MIT"</span><span class="p">,</span><span class="w"></span>
|
||||
<span class="w"> </span><span class="s2">"homepage"</span><span class="o">:</span><span class="w"> </span><span class="s2">"https://github.com/lensapp/lens-extension-samples"</span><span class="p">,</span><span class="w"></span>
|
||||
<span class="w"> </span><span class="s2">"engines"</span><span class="o">:</span><span class="w"> </span><span class="p">{</span><span class="w"></span>
|
||||
<span class="w"> </span><span class="s2">"lens"</span><span class="o">:</span><span class="w"> </span><span class="s2">"^4.0.0"</span><span class="w"></span>
|
||||
<span class="w"> </span><span class="s2">"node"</span><span class="o">:</span><span class="w"> </span><span class="s2">"^14.18.12"</span><span class="p">,</span><span class="w"></span>
|
||||
<span class="w"> </span><span class="s2">"lens"</span><span class="o">:</span><span class="w"> </span><span class="s2">"5.4"</span><span class="w"></span>
|
||||
<span class="w"> </span><span class="p">},</span><span class="w"></span>
|
||||
<span class="w"> </span><span class="s2">"main"</span><span class="o">:</span><span class="w"> </span><span class="s2">"dist/main.js"</span><span class="p">,</span><span class="w"></span>
|
||||
<span class="w"> </span><span class="s2">"renderer"</span><span class="o">:</span><span class="w"> </span><span class="s2">"dist/renderer.js"</span><span class="p">,</span><span class="w"></span>
|
||||
@ -872,16 +889,90 @@ Lens uses this ID to uniquely identify your extension.</li>
|
||||
<span class="w"> </span><span class="s2">"react-open-doodles"</span><span class="o">:</span><span class="w"> </span><span class="s2">"^1.0.5"</span><span class="w"></span>
|
||||
<span class="w"> </span><span class="p">},</span><span class="w"></span>
|
||||
<span class="w"> </span><span class="s2">"devDependencies"</span><span class="o">:</span><span class="w"> </span><span class="p">{</span><span class="w"></span>
|
||||
<span class="w"> </span><span class="s2">"@k8slens/extensions"</span><span class="o">:</span><span class="w"> </span><span class="s2">"^4.0.0-alpha.2"</span><span class="p">,</span><span class="w"></span>
|
||||
<span class="w"> </span><span class="s2">"@k8slens/extensions"</span><span class="o">:</span><span class="w"> </span><span class="s2">"^5.4.6"</span><span class="p">,</span><span class="w"></span>
|
||||
<span class="w"> </span><span class="s2">"ts-loader"</span><span class="o">:</span><span class="w"> </span><span class="s2">"^8.0.4"</span><span class="p">,</span><span class="w"></span>
|
||||
<span class="w"> </span><span class="s2">"typescript"</span><span class="o">:</span><span class="w"> </span><span class="s2">"^4.0.3"</span><span class="p">,</span><span class="w"></span>
|
||||
<span class="w"> </span><span class="s2">"@types/react"</span><span class="o">:</span><span class="w"> </span><span class="s2">"^16.9.35"</span><span class="p">,</span><span class="w"></span>
|
||||
<span class="w"> </span><span class="s2">"@types/node"</span><span class="o">:</span><span class="w"> </span><span class="s2">"^12.0.0"</span><span class="p">,</span><span class="w"></span>
|
||||
<span class="w"> </span><span class="s2">"typescript"</span><span class="o">:</span><span class="w"> </span><span class="s2">"^4.5.5"</span><span class="p">,</span><span class="w"></span>
|
||||
<span class="w"> </span><span class="s2">"@types/react"</span><span class="o">:</span><span class="w"> </span><span class="s2">"^17.0.44"</span><span class="p">,</span><span class="w"></span>
|
||||
<span class="w"> </span><span class="s2">"@types/node"</span><span class="o">:</span><span class="w"> </span><span class="s2">"^14.18.12"</span><span class="p">,</span><span class="w"></span>
|
||||
<span class="w"> </span><span class="s2">"webpack"</span><span class="o">:</span><span class="w"> </span><span class="s2">"^4.44.2"</span><span class="p">,</span><span class="w"></span>
|
||||
<span class="w"> </span><span class="s2">"webpack-cli"</span><span class="o">:</span><span class="w"> </span><span class="s2">"^3.3.11"</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>
|
||||
</code></pre></div>
|
||||
<h2 id="webpack-configuation">Webpack configuation<a class="headerlink" href="#webpack-configuation" 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>
|
||||
<table>
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Package</th>
|
||||
<th>webpack external syntax</th>
|
||||
<th>Lens versions</th>
|
||||
<th>Available in Main</th>
|
||||
<th>Available in Renderer</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td><code>mobx</code></td>
|
||||
<td><code>var global.Mobx</code></td>
|
||||
<td><code>>5.0.0</code></td>
|
||||
<td>✅</td>
|
||||
<td>✅</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>mobx-react</code></td>
|
||||
<td><code>var global.MobxReact</code></td>
|
||||
<td><code>>5.0.0</code></td>
|
||||
<td>❌</td>
|
||||
<td>✅</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>react</code></td>
|
||||
<td><code>var global.React</code></td>
|
||||
<td><code>>5.0.0</code></td>
|
||||
<td>❌</td>
|
||||
<td>✅</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>react-router</code></td>
|
||||
<td><code>var global.ReactRouter</code></td>
|
||||
<td><code>>5.0.0</code></td>
|
||||
<td>❌</td>
|
||||
<td>✅</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>react-router-dom</code></td>
|
||||
<td><code>var global.ReactRouterDom</code></td>
|
||||
<td><code>>5.0.0</code></td>
|
||||
<td>❌</td>
|
||||
<td>✅</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>react-dom</code></td>
|
||||
<td><code>var global.ReactDOM</code></td>
|
||||
<td><code>>5.5.0</code></td>
|
||||
<td>❌</td>
|
||||
<td>✅</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</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">"externals"</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">"mobx"</span><span class="p">:</span><span class="w"> </span><span class="nt">"var global.Mobx"</span><span class="w"></span>
|
||||
<span class="w"> </span><span class="nt">"mobx-react"</span><span class="p">:</span><span class="w"> </span><span class="nt">"var global.MobxReact"</span><span class="w"></span>
|
||||
<span class="w"> </span><span class="nt">"react"</span><span class="p">:</span><span class="w"> </span><span class="nt">"var global.React"</span><span class="w"></span>
|
||||
<span class="w"> </span><span class="nt">"react-router"</span><span class="p">:</span><span class="w"> </span><span class="nt">"var global.ReactRouter"</span><span class="w"></span>
|
||||
<span class="w"> </span><span class="nt">"react-router-dom"</span><span class="p">:</span><span class="w"> </span><span class="nt">"var global.ReactRouterDom"</span><span class="w"></span>
|
||||
<span class="w"> </span><span class="nt">"react-dom"</span><span class="p">:</span><span class="w"> </span><span class="s2">"var global.ReactDOM"</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>
|
||||
</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.
|
||||
One file is used in the <code>main</code> process of the Lens application and the other is used in the <code>renderer</code> process.
|
||||
@ -898,18 +989,18 @@ The <code>Cluster Page</code> object registers the <code>/extension-example</cod
|
||||
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">"@k8slens/extensions"</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">"./page"</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">"react"</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">"./page"</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">"react"</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="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">"extension-example"</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">=></span><span class="w"> </span><span class="o"><</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="o">/></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="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">=></span><span class="w"> </span><span class="o"><</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">/></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>
|
||||
</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.
|
||||
|
||||
File diff suppressed because one or more lines are too long
File diff suppressed because it is too large
Load Diff
Binary file not shown.
Loading…
Reference in New Issue
Block a user