Improve how extension-api is exposed/loaded (#1055)

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

extensions/example-extension/.gitignore

@@ -1,3 +1,2 @@
-*.js
 node_modules/
 dist/

extensions/example-extension/package.json

@@ -9,13 +9,15 @@
     "styles": []
   },
   "scripts": {
-    "build": "tsc",
+    "build": "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,8 +17,8 @@
   },
   "include": [
     "../../types",
-    "./renderer.ts",
-    "./main.ts"
+    "./*.ts",
+    "./*.tsx"
   ],
   "exclude": [
     "node_modules",

extensions/example-extension/webpack.config.js

@@ -0,0 +1,64 @@
+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: [
+      {
+        "@lens/extensions": "var global.LensExtensions",
+        "mobx": "var global.Mobx",
+      }
+    ],
+    resolve: {
+      extensions: [ '.tsx', '.ts', '.js' ],
+    },
+    output: {
+      libraryTarget: "commonjs2",
+      filename: 'main.js',
+      path: path.resolve(__dirname, 'dist'),
+    },
+  },
+  {
+    entry: './renderer.ts',
+    context: __dirname,
+    target: "electron-renderer",
+    mode: "production",
+    module: {
+      rules: [
+        {
+          test: /\.tsx?$/,
+          use: 'ts-loader',
+          exclude: /node_modules/,
+        },
+      ],
+    },
+    externals: [
+      {
+        "@lens/ui-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'),
+    },
+  },
+];