Support extensions in main process (#1032)

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

extensions/example-extension/index.tsx

@@ -1,48 +0,0 @@
-import { Button, Icon, IconProps, LensExtension, React, DynamicPageType } from "@lens/extensions";
-import { CoffeeDoodle } from "react-open-doodles";
-import path from "path";
-
-export default class ExampleExtension extends LensExtension {
-  onActivate() {
-    console.log('EXAMPLE EXTENSION: ACTIVATED', this.getMeta());
-    this.registerPage({
-      type: DynamicPageType.CLUSTER,
-      path: "/extension-example",
-      title: "Example Extension",
-      components: {
-        Page: () => <ExtensionPage extension={this}/>,
-        MenuIcon: ExtensionIcon,
-      }
-    })
-  }
-
-  onDeactivate() {
-    console.log('EXAMPLE EXTENSION: DEACTIVATED', this.getMeta());
-  }
-}
-
-export function ExtensionIcon(props: IconProps) {
-  return <Icon {...props} material="pages" tooltip={path.basename(__filename)}/>
-}
-
-export class ExtensionPage extends React.Component<{ extension: ExampleExtension }> {
-  deactivate = () => {
-    const { extension } = this.props;
-    extension.runtime.navigate("/")
-    extension.disable();
-  }
-
-  render() {
-    const doodleStyle = {
-      width: "200px"
-    }
-    return (
-      <div className="ExampleExtension flex column gaps align-flex-start">
-        <div style={doodleStyle}><CoffeeDoodle accent="#3d90ce"/></div>
-        <p>Hello from Example extension!</p>
-        <p>File: <i>{__filename}</i></p>
-        <Button accent label="Deactivate" onClick={this.deactivate}/>
-      </div>
-    )
-  }
-}

extensions/example-extension/main.ts

@@ -0,0 +1,11 @@
+import { LensMainExtension } from "@lens/extensions";
+
+export default class ExampleExtensionMain extends LensMainExtension {
+  onActivate() {
+    console.log('EXAMPLE EXTENSION MAIN: ACTIVATED', this.getMeta());
+  }
+
+  onDeactivate() {
+    console.log('EXAMPLE EXTENSION MAIN: DEACTIVATED', this.getMeta());
+  }
+}

extensions/example-extension/package.json

@@ -2,7 +2,8 @@
   "name": "extension-example",
   "version": "1.0.0",
   "description": "Example extension",
-  "main": "dist/index.js",
+  "main": "dist/main.js",
+  "renderer": "dist/renderer.js",
   "lens": {
     "metadata": {},
     "styles": []

extensions/example-extension/page.tsx

@@ -0,0 +1,32 @@
+import { Button, Icon, IconProps, LensRendererExtension, React } from "@lens/ui-extensions";
+import { CoffeeDoodle } from "react-open-doodles";
+import path from "path";
+
+export function ExtensionIcon(props: IconProps) {
+  return <Icon {...props} material="pages" tooltip={path.basename(__filename)}/>
+}
+
+export class ExtensionPage extends React.Component<{ extension: LensRendererExtension }> {
+  deactivate = () => {
+    const { extension } = this.props;
+    extension.disable();
+  }
+
+  render() {
+    const doodleStyle = {
+      width: "200px"
+    }
+    return (
+      <div className="flex column gaps align-flex-start">
+        <div style={doodleStyle}><CoffeeDoodle accent="#3d90ce" /></div>
+        <p>Hello from Example extension!</p>
+        <p>File: <i>{__filename}</i></p>
+        <Button accent label="Deactivate" onClick={this.deactivate}/>
+      </div>
+    )
+  }
+}
+
+export function examplePage(ext: LensRendererExtension) {
+  return () => <ExtensionPage extension={ext} />
+}

extensions/example-extension/renderer.ts

@@ -0,0 +1,24 @@
+import { DynamicPageType, LensRendererExtension, PageStore } from "@lens/ui-extensions";
+import { examplePage, ExtensionIcon } from "./page"
+
+export default class ExampleExtension extends LensRendererExtension {
+  onActivate() {
+    console.log('EXAMPLE EXTENSION RENDERER: ACTIVATED', this.getMeta());
+  }
+
+  registerPages(pageStore: PageStore) {
+    this.disposers.push(pageStore.register({
+      type: DynamicPageType.CLUSTER,
+      path: "/extension-example",
+      title: "Example Extension",
+      components: {
+        Page: examplePage(this),
+        MenuIcon: ExtensionIcon,
+      }
+    }))
+  }
+
+  onDeactivate() {
+    console.log('EXAMPLE EXTENSION RENDERER: DEACTIVATED', this.getMeta());
+  }
+}

extensions/example-extension/tsconfig.json

@@ -12,11 +12,13 @@
     "skipLibCheck": true,
     "esModuleInterop": true,
     "allowSyntheticDefaultImports": true,
+    "experimentalDecorators": true,
     "jsx": "react"
   },
   "include": [
     "../../types",
-    "./index.tsx"
+    "./renderer.ts",
+    "./main.ts"
   ],
   "exclude": [
     "node_modules",