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 committed
1 parent
d501ffce0f
commit
fa423b3ba8
4 files changed
+407
-316
No files matched your search
@@ -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.
|
||||
|
||||
@@ -1 +1 @@
|
||||
{"config":{"indexing":"full","lang":["en"],"min_search_length":3,"prebuild_index":false,"separator":"[\\s\\-]+"},"docs":[{"location":"","text":"Lens Extension API # Customize and enhance the Lens experience with the Lens Extension API. Use the extension API to create menus or page content. The same extension API was used to create many of Lens's core features. To install your first extension you should goto the extension page in lens. This documentation describes: How to build, run, test, and publish an extension. How to take full advantage of the Lens Extension API. Where to find guides and code samples to help get you started. What Extensions Can Do # Here are some examples of what you can achieve with the Extension API: Add custom components & views in the UI - Extending the Lens Workbench For an overview of the Lens Extension API, refer to the Common Capabilities page. Extension Guides Overview also includes a list of code samples and guides that illustrate various ways of using the Lens Extension API. How to Build Extensions # Here is what each section of the Lens Extension API docs can help you with: Getting Started teaches fundamental concepts for building extensions with the Hello World sample. Extension Capabilities dissects Lens's Extension API into smaller categories and points you to more detailed topics. Extension Guides includes guides and code samples that explain specific usages of Lens Extension API. Testing and Publishing includes in-depth guides on various extension development topics, such as testing and publishing extensions. API Reference contains exhaustive references for the Lens Extension API, Contribution Points, and many other topics. What's New # Just like Lens itself, the extension API updates on a monthly cadence, rolling out new features with every release. Keep up with Lens and the Lens Extension API by reviewing the release notes . Important changes since Lens v4 # Lens has undergone major design improvements in v5, which have resulted in several large changes to the extension API. Workspaces are gone, and the catalog is introduced for containing clusters, as well as other items, including custom entities. Lens has migrated from using mobx 5 to mobx 6 for internal state management, and this may have ramifications for extension implementations. Although the API retains many components from v4, given these changes, extensions written for Lens v4 are not compatible with the Lens v5 extension API. See the Lens v4 to v5 extension migration notes on getting old extensions working in Lens v5. Looking for Help # If you have questions for extension development, try asking on the Lens Dev Slack . It's a public chatroom for Lens developers, where Lens team members chime in from time to time. To provide feedback on the documentation or issues with the Lens Extension API, create new issues at lensapp/lens . Please use the labels area/documentation and/or area/extension . Downloading Lens # Download Lens for macOS, Windows, or Linux.","title":"Overview"},{"location":"#lens-extension-api","text":"Customize and enhance the Lens experience with the Lens Extension API. Use the extension API to create menus or page content. The same extension API was used to create many of Lens's core features. To install your first extension you should goto the extension page in lens. This documentation describes: How to build, run, test, and publish an extension. How to take full advantage of the Lens Extension API. Where to find guides and code samples to help get you started.","title":"Lens Extension API"},{"location":"#what-extensions-can-do","text":"Here are some examples of what you can achieve with the Extension API: Add custom components & views in the UI - Extending the Lens Workbench For an overview of the Lens Extension API, refer to the Common Capabilities page. Extension Guides Overview also includes a list of code samples and guides that illustrate various ways of using the Lens Extension API.","title":"What Extensions Can Do"},{"location":"#how-to-build-extensions","text":"Here is what each section of the Lens Extension API docs can help you with: Getting Started teaches fundamental concepts for building extensions with the Hello World sample. Extension Capabilities dissects Lens's Extension API into smaller categories and points you to more detailed topics. Extension Guides includes guides and code samples that explain specific usages of Lens Extension API. Testing and Publishing includes in-depth guides on various extension development topics, such as testing and publishing extensions. API Reference contains exhaustive references for the Lens Extension API, Contribution Points, and many other topics.","title":"How to Build Extensions"},{"location":"#whats-new","text":"Just like Lens itself, the extension API updates on a monthly cadence, rolling out new features with every release. Keep up with Lens and the Lens Extension API by reviewing the release notes .","title":"What's New"},{"locationLine truncated
|
||||
{"config":{"indexing":"full","lang":["en"],"min_search_length":3,"prebuild_index":false,"separator":"[\\s\\-]+"},"docs":[{"location":"","text":"Lens Extension API # Customize and enhance the Lens experience with the Lens Extension API. Use the extension API to create menus or page content. The same extension API was used to create many of Lens's core features. To install your first extension you should goto the extension page in lens. This documentation describes: How to build, run, test, and publish an extension. How to take full advantage of the Lens Extension API. Where to find guides and code samples to help get you started. What Extensions Can Do # Here are some examples of what you can achieve with the Extension API: Add custom components & views in the UI - Extending the Lens Workbench For an overview of the Lens Extension API, refer to the Common Capabilities page. Extension Guides Overview also includes a list of code samples and guides that illustrate various ways of using the Lens Extension API. How to Build Extensions # Here is what each section of the Lens Extension API docs can help you with: Getting Started teaches fundamental concepts for building extensions with the Hello World sample. Extension Capabilities dissects Lens's Extension API into smaller categories and points you to more detailed topics. Extension Guides includes guides and code samples that explain specific usages of Lens Extension API. Testing and Publishing includes in-depth guides on various extension development topics, such as testing and publishing extensions. API Reference contains exhaustive references for the Lens Extension API, Contribution Points, and many other topics. What's New # Just like Lens itself, the extension API updates on a monthly cadence, rolling out new features with every release. Keep up with Lens and the Lens Extension API by reviewing the release notes . Important changes since Lens v4 # Lens has undergone major design improvements in v5, which have resulted in several large changes to the extension API. Workspaces are gone, and the catalog is introduced for containing clusters, as well as other items, including custom entities. Lens has migrated from using mobx 5 to mobx 6 for internal state management, and this may have ramifications for extension implementations. Although the API retains many components from v4, given these changes, extensions written for Lens v4 are not compatible with the Lens v5 extension API. See the Lens v4 to v5 extension migration notes on getting old extensions working in Lens v5. Looking for Help # If you have questions for extension development, try asking on the Lens Dev Slack . It's a public chatroom for Lens developers, where Lens team members chime in from time to time. To provide feedback on the documentation or issues with the Lens Extension API, create new issues at lensapp/lens . Please use the labels area/documentation and/or area/extension . Downloading Lens # Download Lens for macOS, Windows, or Linux.","title":"Overview"},{"location":"#lens-extension-api","text":"Customize and enhance the Lens experience with the Lens Extension API. Use the extension API to create menus or page content. The same extension API was used to create many of Lens's core features. To install your first extension you should goto the extension page in lens. This documentation describes: How to build, run, test, and publish an extension. How to take full advantage of the Lens Extension API. Where to find guides and code samples to help get you started.","title":"Lens Extension API"},{"location":"#what-extensions-can-do","text":"Here are some examples of what you can achieve with the Extension API: Add custom components & views in the UI - Extending the Lens Workbench For an overview of the Lens Extension API, refer to the Common Capabilities page. Extension Guides Overview also includes a list of code samples and guides that illustrate various ways of using the Lens Extension API.","title":"What Extensions Can Do"},{"location":"#how-to-build-extensions","text":"Here is what each section of the Lens Extension API docs can help you with: Getting Started teaches fundamental concepts for building extensions with the Hello World sample. Extension Capabilities dissects Lens's Extension API into smaller categories and points you to more detailed topics. Extension Guides includes guides and code samples that explain specific usages of Lens Extension API. Testing and Publishing includes in-depth guides on various extension development topics, such as testing and publishing extensions. API Reference contains exhaustive references for the Lens Extension API, Contribution Points, and many other topics.","title":"How to Build Extensions"},{"location":"#whats-new","text":"Just like Lens itself, the extension API updates on a monthly cadence, rolling out new features with every release. Keep up with Lens and the Lens Extension API by reviewing the release notes .","title":"What's New"},{"locationLine truncated
|
||||
+301
-301
File diff suppressed because it is too large.
Load diff
Binary file not shown.
Reference in new issue
Block a user