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

Add docs concerning webpack external configs (#5351)

Browse Source
This commit is contained in:
Sebastian Malton 2022-05-10 08:43:40 -04:00 committed by GitHub
parent a7607ce7e1
commit 6b097e086b
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 52 additions and 15 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

67
docs/extensions/get-started/anatomy.md
View File

@ -38,13 +38,15 @@ It contains a mix of Node.js fields, including scripts and dependencies, and Len
Some of the most-important fields include: Some of the most-important fields include:
- `name` and `publisher`: Lens uses `@<publisher>/<name>` as a unique ID for the extension. - `name` and `publisher`: Lens uses `@<publisher>/<name>` as a unique ID for the extension.
For example, the Hello World sample has the ID `@lensapp-samples/helloworld-sample`. For example, the Hello World sample has the ID `@lensapp-samples/helloworld-sample`.
Lens uses this ID to uniquely identify your extension. Lens uses this ID to uniquely identify your extension.
- `main`: the extension's entry point run in `main` process. - `main`: the extension's entry point run in `main` process.
- `renderer`: the extension's entry point run in `renderer` process. - `renderer`: the extension's entry point run in `renderer` process.
- `engines.lens`: the minimum version of Lens API that the extension depends upon. - `engines.lens`: the minimum version of Lens API that the extension depends upon.
We only support the `^` range, which is also optional to specify, and only major and minor version numbers.
Meaning that `^5.4` and `5.4` both mean the same thing, and the patch version in `5.4.2` is ignored.
``` javascript ```javascript
{ {
"name": "helloworld-sample", "name": "helloworld-sample",
"publisher": "lens-samples", "publisher": "lens-samples",
@ -53,7 +55,8 @@ Lens uses this ID to uniquely identify your extension.
"license": "MIT", "license": "MIT",
"homepage": "https://github.com/lensapp/lens-extension-samples", "homepage": "https://github.com/lensapp/lens-extension-samples",
"engines": { "engines": {
"lens": "^4.0.0" "node": "^14.18.12",
"lens": "5.4"
}, },
"main": "dist/main.js", "main": "dist/main.js",
"renderer": "dist/renderer.js", "renderer": "dist/renderer.js",
@ -65,17 +68,51 @@ Lens uses this ID to uniquely identify your extension.
"react-open-doodles": "^1.0.5" "react-open-doodles": "^1.0.5"
}, },
"devDependencies": { "devDependencies": {
"@k8slens/extensions": "^4.0.0-alpha.2", "@k8slens/extensions": "^5.4.6",
"ts-loader": "^8.0.4", "ts-loader": "^8.0.4",
"typescript": "^4.0.3", "typescript": "^4.5.5",
"@types/react": "^16.9.35", "@types/react": "^17.0.44",
"@types/node": "^12.0.0", "@types/node": "^14.18.12",
"webpack": "^4.44.2", "webpack": "^4.44.2",
"webpack-cli": "^3.3.11" "webpack-cli": "^3.3.11"
} }
} }
``` ```
## Webpack configuation
The following webpack `externals` are provided by `Lens` and must be used (when available) to make sure that the versions used are in sync.
| Package | webpack external syntax | Lens versions | Available in Main | Available in Renderer |
| ------------------ | --------------------------- | ------------- | ----------------- | --------------------- |
| `mobx` | `var global.Mobx` | `>5.0.0` | ✅ | ✅ |
| `mobx-react` | `var global.MobxReact` | `>5.0.0` | ❌ | ✅ |
| `react` | `var global.React` | `>5.0.0` | ❌ | ✅ |
| `react-router` | `var global.ReactRouter` | `>5.0.0` | ❌ | ✅ |
| `react-router-dom` | `var global.ReactRouterDom` | `>5.0.0` | ❌ | ✅ |
| `react-dom` | `var global.ReactDOM` | `>5.5.0` | ❌ | ✅ |
What is exported is the whole of the packages as a `*` import (within typescript).
For example, the following is how you would specify these within your webpack configuration files.
```json
{
...
"externals": [
...
{
"mobx": "var global.Mobx"
"mobx-react": "var global.MobxReact"
"react": "var global.React"
"react-router": "var global.ReactRouter"
"react-router-dom": "var global.ReactRouterDom"
"react-dom": "var global.ReactDOM"
}
]
}
```
## Extension Entry Files ## Extension Entry Files
Lens extensions can have two separate entry files. Lens extensions can have two separate entry files.
@ -95,20 +132,20 @@ The `Cluster Page` object registers the `/extension-example` path, and this path
It also registers the `MenuItem` component that displays the `ExampleIcon` React component and the "Hello World" text in the left-side menu of the cluster dashboard. It also registers the `MenuItem` component that displays the `ExampleIcon` React component and the "Hello World" text in the left-side menu of the cluster dashboard.
These React components are defined in the additional `./src/page.tsx` file. These React components are defined in the additional `./src/page.tsx` file.
``` typescript ```typescript
import { Renderer } from "@k8slens/extensions"; import { Renderer } from "@k8slens/extensions";
import { ExampleIcon, ExamplePage } from "./page" import { ExampleIcon, ExamplePage } from "./page";
import React from "react" import React from "react";
export default class ExampleExtension extends Renderer.LensExtension { export default class ExampleExtension extends Renderer.LensExtension {
clusterPages = [ clusterPages = [
{ {
id: "extension-example", id: "extension-example",
components: { components: {
Page: () => <ExamplePage extension={this}/>, Page: () => <ExamplePage extension={this} />,
} },
} },
] ];
} }
``` ```