Allow extensions to have external dependencies (#1018)

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

extensions/example-extension/.gitignore

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

extensions/example-extension/README.md

@@ -1,3 +1,7 @@
 # Lens Example Extension
 
-*TODO*: add more info
+*TODO*: add more info
+
+## Build
+
+`npm run build`

extensions/example-extension/index.tsx

@@ -1,4 +1,5 @@
 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 {
@@ -21,7 +22,7 @@ export default class ExampleExtension extends LensExtension {
 }
 
 export function ExtensionIcon(props: IconProps) {
-  return <Icon {...props} material="camera" tooltip={path.basename(__filename)}/>
+  return <Icon {...props} material="pages" tooltip={path.basename(__filename)}/>
 }
 
 export class ExtensionPage extends React.Component<{ extension: ExampleExtension }> {
@@ -33,10 +34,14 @@ export class ExtensionPage extends React.Component<{ extension: ExampleExtension
 
   render() {
     const { TabLayout } = this.props.extension.runtime.components;
+    const doodleStyle = {
+      width: "200px"
+    }
     return (
       <TabLayout className="ExampleExtension">
         <div className="flex column gaps align-flex-start">
-          <p>Hello from extensions-api!</p>
+          <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/package-lock.json

@@ -0,0 +1,19 @@
+{
+  "name": "extension-example",
+  "version": "1.0.0",
+  "lockfileVersion": 1,
+  "requires": true,
+  "dependencies": {
+    "react-open-doodles": {
+      "version": "1.0.5",
+      "resolved": "https://registry.npmjs.org/react-open-doodles/-/react-open-doodles-1.0.5.tgz",
+      "integrity": "sha512-TGYuRDL2XX2PG/9ZH2MXfYi/vbQLRnvqPxfzNRc4X3Nxmsiz93kIRmT5OWbItadvqEwZTD4IncwHMSLOTUvSZQ=="
+    },
+    "typescript": {
+      "version": "4.0.3",
+      "resolved": "https://registry.npmjs.org/typescript/-/typescript-4.0.3.tgz",
+      "integrity": "sha512-tEu6DGxGgRJPb/mVPIZ48e69xCn2yRmCgYmDugAVwmJ6o+0u1RI18eO7E7WBTLYLaEVVOhwQmcdhQHweux/WPg==",
+      "dev": true
+    }
+  }
+}

extensions/example-extension/package.json

@@ -2,11 +2,19 @@
   "name": "extension-example",
   "version": "1.0.0",
   "description": "Example extension",
-  "main": "example-extension.js",
+  "main": "dist/index.js",
   "lens": {
     "metadata": {},
     "styles": []
   },
+  "scripts": {
+    "build": "tsc",
+    "dev": "tsc --watch"
+  },
   "dependencies": {
+    "react-open-doodles": "^1.0.5"
+  },
+  "devDependencies": {
+    "typescript": "^4.0.3"
   }
 }

extensions/example-extension/tsconfig.json

@@ -1,13 +1,25 @@
 {
-  "extends": "../../tsconfig.json",
   "compilerOptions": {
-    "outDir": ".",
+    "outDir": "dist",
     "module": "CommonJS",
+    "target": "ES2017",
+    "lib": ["ESNext", "DOM", "DOM.Iterable"],
+    "moduleResolution": "Node",
     "sourceMap": false,
-    "declaration": false
+    "declaration": false,
+    "strict": false,
+    "noImplicitAny": true,
+    "skipLibCheck": true,
+    "esModuleInterop": true,
+    "allowSyntheticDefaultImports": true,
+    "jsx": "react"
   },
   "include": [
     "../../types",
-    "./example-extension.tsx"
+    "./index.tsx"
+  ],
+  "exclude": [
+    "node_modules",
+    "*.js"
   ]
 }