lensapp / generator-lens-ext Goto Github PK

Good suggestion by @Nokel81

and fire PR to lens main repo.

ref https://github.com/lensapp/lens/blob/master/docs/extensions/guides/renderer-extension.md#apppreferences

We need to include Jest mocks of electron, .scss in this template. Otherwise tests will throw errors after importing modules from @k8slens/extensions. Related to lensapp/lens#1387

This is a new issue from lensapp/lens#1215 (comment) in the generator repo.

Your generator also doesn't lint anything by default, even though it installs eslint! These are the generated scripts:

	"scripts": {
		"start": "webpack --watch",
		"build": "npm run clean && webpack",
		"clean": "rm -rf ./dist",
		"test": "jest"
	},

You should add this:

"lint": "eslint"

and then change "test" to this:

"test": "yarn lint && jest"

ref https://github.com/lensapp/lens/blob/master/docs/extensions/guides/renderer-extension.md#clusterfeatures

Making a new issue from lensapp/lens#1215 (comment) on the generator repo.

This is what it outputs today (I just installed it and ran it) for the Webpack.config.js file:

/* eslint @typescript-eslint/no-var-requires: "off" */

const path = require("path");

module.exports = [
  {
    entry: "./main.ts",
    context: __dirname,
    target: "electron-main",
    mode: "production",
    module: {
      rules: [
        {
          test: /\.tsx?$/,
          use: "ts-loader",
          exclude: /node_modules/,
        },
      ],
    },
    externals: [
      {
        "@k8slens/extensions": "var global.LensExtensions",
        "mobx": "var global.Mobx",
        "react": "var global.React"
      }
    ],
    resolve: {
      extensions: [".tsx", ".ts", ".js"],
    },
    output: {
      libraryTarget: "commonjs2",
      filename: "main.js",
      path: path.resolve(__dirname, "dist"),
    },
  },
  {
    entry: "./renderer.tsx",
    context: __dirname,
    target: "electron-renderer",
    mode: "production",
    module: {
      rules: [
        {
          test: /\.tsx?$/,
          use: "ts-loader",
          exclude: /node_modules/,
        },
      ],
    },
    externals: [
      {
        "@k8slens/extensions": "var global.LensExtensions",
        "react": "var global.React",
        "mobx": "var global.Mobx"
      }
    ],
    resolve: {
      extensions: [".tsx", ".ts", ".js"],
    },
    output: {
      libraryTarget: "commonjs2",
      globalObject: "this",
      filename: "renderer.js",
      path: path.resolve(__dirname, "dist"),
    },
    node: {
      __dirname: false,
      __filename: false
    }
  },
];

There are only production build configurations in there. So right out of the box, there are no dev tools used, all the code is minified, no source maps. In other words, no debugging (or at least, no sane debugging with breakpoints and code you can read).

I think all you would need to add is this to your generator:

    // in BOTH main and renderer entry configs, REPLACE this:
    mode: "production",

    // with this:
    mode: process.env.NODE_ENV || 'production',
    devtool: process.env.NODE_ENV !== 'production' ? 'eval-source-map' : undefined,

Then you can run NODE_ENV=development yarn start to start a watch on a development build with source maps and all the things you need to start debugging in DevTools right away.

Actually, you should just change the generated package.json's start script to be this and make it even easier on your extension developers:

start: "NODE_ENV=development webpack --watch"

ref https://github.com/lensapp/lens-extension-samples/blob/master/minikube-sample/main.ts#L6

symlink only works on linux/mac at this moment https://github.com/lensapp/generator-lens-ext/blob/main/generators/app/symlink.js#L9

https://github.com/lensapp/lens/blob/master/docs/extensions/guides/renderer-extension.md#kubeobjectdetailitems

We need to include test setup, like babel.config.js and dependencies including jest/ts-jest/"@testing-library/react for extension developer to write unit tests.

Related to lensapp/lens#1386

https://github.com/lensapp/lens/blob/master/docs/extensions/guides/renderer-extension.md#kubeobjectmenuitems