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": [