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

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

@ -43,6 +43,8 @@ Lens uses this ID to uniquely identify your extension.
- `main`: the extension's entry point run in `main` process.
- `renderer`: the extension's entry point run in `renderer` process.
- `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
{
@ -53,7 +55,8 @@ Lens uses this ID to uniquely identify your extension.
"license": "MIT",
"homepage": "https://github.com/lensapp/lens-extension-samples",
"engines": {
"lens": "^4.0.0"
"node": "^14.18.12",
"lens": "5.4"
},
"main": "dist/main.js",
"renderer": "dist/renderer.js",
@ -65,17 +68,51 @@ Lens uses this ID to uniquely identify your extension.
"react-open-doodles": "^1.0.5"
},
"devDependencies": {
"@k8slens/extensions": "^4.0.0-alpha.2",
"@k8slens/extensions": "^5.4.6",
"ts-loader": "^8.0.4",
"typescript": "^4.0.3",
"@types/react": "^16.9.35",
"@types/node": "^12.0.0",
"typescript": "^4.5.5",
"@types/react": "^17.0.44",
"@types/node": "^14.18.12",
"webpack": "^4.44.2",
"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
Lens extensions can have two separate entry files.
@ -97,8 +134,8 @@ These React components are defined in the additional `./src/page.tsx` file.
```typescript
import { Renderer } from "@k8slens/extensions";
import { ExampleIcon, ExamplePage } from "./page"
import React from "react"
import { ExampleIcon, ExamplePage } from "./page";
import React from "react";
export default class ExampleExtension extends Renderer.LensExtension {
clusterPages = [
@ -106,9 +143,9 @@ export default class ExampleExtension extends Renderer.LensExtension {
id: "extension-example",
components: {
Page: () => <ExamplePage extension={this} />,
}
}
]
},
},
];
}
```