improve how extension-api is exposed/loaded

Signed-off-by: Jari Kolehmainen <jari.kolehmainen@gmail.com>

extensions/example-extension/package.json

@@ -9,13 +9,17 @@
     "styles": []
   },
   "scripts": {
-    "build": "tsc",
+    "build": "npm run build:main && npm run build:renderer",
+    "build:main": "tsc",
+    "build:renderer": "webpack --config webpack.config.js",
     "dev": "tsc --watch"
   },
   "dependencies": {
     "react-open-doodles": "^1.0.5"
   },
   "devDependencies": {
-    "typescript": "^4.0.3"
+    "ts-loader": "^8.0.4",
+    "typescript": "^4.0.3",
+    "webpack": "^4.44.2"
   }
 }

extensions/example-extension/page.tsx

@@ -1,6 +1,7 @@
-import { Button, Icon, IconProps, LensRendererExtension, React } from "@lens/ui-extensions";
+import { Button, Icon, IconProps, LensRendererExtension } from "@lens/ui-extensions";
 import { CoffeeDoodle } from "react-open-doodles";
 import path from "path";
+import React from "react"
 
 export function ExtensionIcon(props: IconProps) {
   return <Icon {...props} material="pages" tooltip={path.basename(__filename)}/>

extensions/example-extension/tsconfig.json

@@ -17,7 +17,6 @@
   },
   "include": [
     "../../types",
-    "./renderer.ts",
     "./main.ts"
   ],
   "exclude": [

package.json

@@ -17,13 +17,11 @@
     "dev:main": "yarn compile:main --watch",
     "dev:renderer": "yarn compile:renderer --watch",
     "dev:extension-rollup": "yarn compile:extension-rollup --watch",
-    "dev:extension-api": "yarn compile:extension-api --watch",
     "compile": "env NODE_ENV=production concurrently yarn:compile:*",
     "compile:main": "webpack --config webpack.main.ts",
     "compile:renderer": "webpack --config webpack.renderer.ts",
     "compile:i18n": "lingui compile",
     "compile:extension-rollup": "rollup --config src/extensions/rollup.config.js",
-    "compile:extension-api": "webpack --config webpack.extensions.ts",
     "build:linux": "yarn compile && electron-builder --linux --dir -c.productName=Lens",
     "build:mac": "yarn compile && electron-builder --mac --dir -c.productName=Lens",
     "build:win": "yarn compile && electron-builder --win --dir -c.productName=Lens",

src/common/vars.ts

@@ -2,7 +2,6 @@
 import path from "path";
 import packageInfo from "../../package.json"
 import { defineGlobal } from "./utils/defineGlobal";
-import { addAlias } from "module-alias";
 
 export const isMac = process.platform === "darwin"
 export const isWindows = process.platform === "win32"
@@ -37,15 +36,6 @@ defineGlobal("__static", {
   }
 })
 
-// Special dynamic module aliases
-if (isProduction && process.resourcesPath) {
-  addAlias("@lens/extensions", path.join(process.resourcesPath, "static", `build/${extensionsLibName}.js`))
-  addAlias("@lens/ui-extensions", path.join(process.resourcesPath, "static", `build/${extensionsRendererLibName}.js`))
-} else {
-  addAlias("@lens/extensions", path.join(contextDir, "static", `build/${extensionsLibName}.js`))
-  addAlias("@lens/ui-extensions", path.join(contextDir, "static", `build/${extensionsRendererLibName}.js`))
-}
-
 // Apis
 export const apiPrefix = "/api" // local router apis
 export const apiKubePrefix = "/api-kube" // k8s cluster apis

src/extensions/extension-loader.ts

@@ -89,21 +89,19 @@ export class ExtensionLoader {
 
   protected requireExtension(extension: InstalledExtension) {
     let extEntrypoint = ""
-    return withExtensionPackagesRoot(() => {
-      try {
-        if (ipcRenderer && extension.manifest.renderer) {
-          extEntrypoint = path.resolve(path.join(path.dirname(extension.manifestPath), extension.manifest.renderer))
-        } else if (extension.manifest.main) {
-          extEntrypoint = path.resolve(path.join(path.dirname(extension.manifestPath), extension.manifest.main))
-        }
-        if (extEntrypoint !== "") {
-          return __non_webpack_require__(extEntrypoint)
-        }
-      } catch (err) {
-        console.error(`[EXTENSION-LOADER]: can't load extension main at ${extEntrypoint}: ${err}`, { extension });
-        console.trace(err)
+    try {
+      if (ipcRenderer && extension.manifest.renderer) {
+        extEntrypoint = path.resolve(path.join(path.dirname(extension.manifestPath), extension.manifest.renderer))
+      } else if (extension.manifest.main) {
+        extEntrypoint = path.resolve(path.join(path.dirname(extension.manifestPath), extension.manifest.main))
       }
-    })
+      if (extEntrypoint !== "") {
+        return __non_webpack_require__(extEntrypoint)
+      }
+    } catch (err) {
+      console.error(`[EXTENSION-LOADER]: can't load extension main at ${extEntrypoint}: ${err}`, { extension });
+      console.trace(err)
+    }
   }
 
   getById(id: ExtensionId): InstalledExtension {

src/extensions/extension-renderer-api.ts

@@ -1,13 +1,12 @@
 // Lens-extensions api developer's kit
 export type { LensExtensionRuntimeEnv } from "./lens-renderer-runtime"
-export type { PageStore } from "./page-store"
 
 // APIs
+export * from "./lens-extension"
 export * from "./lens-renderer-extension"
-export { DynamicPageType } from "./page-store"
+export { DynamicPageType, PageStore } from "./page-store"
 
 // TODO: add more common re-usable UI components + refactor interfaces (Props -> ComponentProps)
-export { default as React } from "react"
 export * from "../renderer/components/icon"
 export * from "../renderer/components/tooltip"
 export * from "../renderer/components/button"

src/extensions/lens-renderer-extension.ts

@@ -2,7 +2,8 @@ import type { PageStore } from "./extension-renderer-api"
 import type { PageRegistration } from "./page-store"
 import { LensExtension } from "./lens-extension"
 
-export abstract class LensRendererExtension extends LensExtension {
+export class LensRendererExtension extends LensExtension {
+
   registerPages(pageStore: PageStore) {
     return
   }

src/main/index.ts

@@ -17,11 +17,16 @@ import { clusterStore } from "../common/cluster-store"
 import { userStore } from "../common/user-store";
 import { workspaceStore } from "../common/workspace-store";
 import { tracker } from "../common/tracker";
+import * as LensExtensions from "../extensions/extension-api";
 import { extensionManager } from "../extensions/extension-manager";
 import { extensionLoader } from "../extensions/extension-loader";
 import { getLensRuntime } from "../extensions/lens-runtime";
 import logger from "./logger"
 
+export {
+  LensExtensions
+}
+
 const workingDir = path.join(app.getPath("appData"), appName);
 app.setName(appName);
 if (!process.env.CICD) {

src/renderer/bootstrap.tsx

@@ -1,5 +1,7 @@
 import "./components/app.scss"
 import React from "react";
+import * as Mobx from "mobx"
+import * as LensExtensions from "../extensions/extension-renderer-api"
 import { render, unmountComponentAtNode } from "react-dom";
 import { isMac } from "../common/vars";
 import { userStore } from "../common/user-store";
@@ -14,6 +16,12 @@ type AppComponent = React.ComponentType & {
   init?(): void;
 }
 
+export {
+  React,
+  Mobx,
+  LensExtensions
+}
+
 export async function bootstrap(App: AppComponent) {
   const rootElem = document.getElementById("app")
   rootElem.classList.toggle("is-mac", isMac);

webpack.extensions.ts

@@ -1,50 +0,0 @@
-import { extensionsDir, extensionsLibName, extensionsRendererLibName } from "./src/common/vars";
-import path from "path";
-import webpack from "webpack";
-import nodeExternals from "webpack-node-externals";
-import { webpackLensRenderer } from "./webpack.renderer";
-import ForkTsCheckerPlugin from "fork-ts-checker-webpack-plugin";
-import ProgressBarPlugin from "progress-bar-webpack-plugin";
-import MiniCssExtractPlugin from "mini-css-extract-plugin";
-
-export default [
-  webpackExtensionsApi,
-  webpackExtensionsRendererApi
-]
-
-// todo: use common chunks/externals for "react", "react-dom", etc.
-export function webpackExtensionsApi(): webpack.Configuration {
-  const config = webpackLensRenderer({ showVars: false })
-  config.name = "extensions-api"
-  config.entry = {
-    [extensionsLibName]: path.resolve(extensionsDir, "extension-api.ts")
-  }
-  config.externals = [
-    nodeExternals()
-  ]
-  config.plugins = [
-    new ProgressBarPlugin(),
-    new ForkTsCheckerPlugin(),
-  ]
-  config.output.libraryTarget = "commonjs2"
-  config.devtool = "nosources-source-map"
-  return config
-}
-
-export function webpackExtensionsRendererApi(): webpack.Configuration {
-  const config = webpackLensRenderer({ showVars: false })
-  config.name = "extensions-renderer-api"
-  config.entry = {
-    [extensionsRendererLibName]: path.resolve(extensionsDir, "extension-renderer-api.ts")
-  }
-  config.plugins = [
-    new ProgressBarPlugin(),
-    new ForkTsCheckerPlugin(),
-    new MiniCssExtractPlugin({
-      filename: "[name].css",
-    })
-  ]
-  config.output.libraryTarget = "commonjs2"
-  config.devtool = "nosources-source-map"
-  return config
-}

webpack.main.ts

@@ -17,16 +17,12 @@ export default function (): webpack.Configuration {
       main: path.resolve(mainDir, "index.ts"),
     },
     output: {
+      libraryTarget: "global",
       path: buildDir,
     },
     resolve: {
       extensions: ['.json', '.js', '.ts']
     },
-    node: {
-      // webpack modifies node internals by default, keep as is for main-process
-      __dirname: false,
-      __filename: false,
-    },
     externals: [
       nodeExternals()
     ],

webpack.renderer.ts

@@ -26,6 +26,9 @@ export function webpackLensRenderer({ showVars = true } = {}): webpack.Configura
       [appName]: path.resolve(rendererDir, "bootstrap.tsx"),
     },
     output: {
+      libraryTarget: "global",
+      library: "",
+      globalObject: "this",
       publicPath: publicPath,
       path: buildDir,
       filename: '[name].js',
@@ -43,7 +46,7 @@ export function webpackLensRenderer({ showVars = true } = {}): webpack.Configura
       ]
     },
     optimization: {
-      minimize: isProduction,
+      minimize: false,
       minimizer: [
         new TerserPlugin({
           cache: true,