support extensions in main process

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

extensions/example-extension/index.tsx

@@ -1,51 +0,0 @@
-import { Button, DynamicPageType, Icon, IconProps, LensExtension, React } 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",
-      menuTitle: "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 { TabLayout } = this.props.extension.runtime.components;
-    const doodleStyle = {
-      width: "200px"
-    }
-    return (
-      <TabLayout className="ExampleExtension">
-        <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>
-      </TabLayout>
-    )
-  }
-}

extensions/example-extension/main.ts

@@ -0,0 +1,11 @@
+import { LensExtension } from "@lens/extensions";
+
+export default class ExampleExtensionMain extends LensExtension {
+  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.registerPage(pageStore, {
+      type: DynamicPageType.CLUSTER,
+      path: "/extension-example",
+      menuTitle: "Example Extension",
+      components: {
+        Page: examplePage(this),
+        MenuIcon: ExtensionIcon,
+      }
+    })
+  }
+
+  onDeactivate() {
+    console.log('EXAMPLE EXTENSION RENDERER: DEACTIVATED', this.getMeta());
+  }
+}

extensions/example-extension/tsconfig.json

@@ -16,7 +16,8 @@
   },
   "include": [
     "../../types",
-    "./index.tsx"
+    "./index.ts",
+    "./main.ts"
   ],
   "exclude": [
     "node_modules",