Extensions api types (#985)

Signed-off-by: Roman <ixrock@gmail.com>

src/extensions/example-extension/example-extension.tsx

@@ -1,4 +1,4 @@
-import { Button, DynamicPageType, Icon, LensExtension } from "@lens/extensions"; // fixme: map to generated types from "extension-api.ts"
+import { Button, DynamicPageType, Icon, IconProps, LensExtension } from "@lens/extensions";
 import React from "react";
 import path from "path";
 
@@ -21,7 +21,7 @@ export default class ExampleExtension extends LensExtension {
   }
 }
 
-export function ExtensionIcon(props: {} /*IconProps |*/) {
+export function ExtensionIcon(props: IconProps) {
   return <Icon {...props} material="camera" tooltip={path.basename(__filename)}/>
 }
 

src/extensions/extension-api.ts

@@ -5,19 +5,9 @@ export type { LensRuntimeRendererEnv } from "./lens-runtime";
 export * from "./lens-extension"
 export { DynamicPageType } from "./register-page";
 
-// Common UI components
+// TODO: add more common re-usable UI components + refactor interfaces (Props -> ComponentProps)
 export * from "../renderer/components/icon"
-export * from "../renderer/components/badge"
 export * from "../renderer/components/tooltip"
 export * from "../renderer/components/button"
-export * from "../renderer/components/input"
-export * from "../renderer/components/select"
-export * from "../renderer/components/checkbox"
-export * from "../renderer/components/radio"
-export * from "../renderer/components/slider"
-export * from "../renderer/components/spinner"
 export * from "../renderer/components/tabs"
-export * from "../renderer/components/line-progress"
-
-// Utils
-export * from "../main/logger";
+export * from "../renderer/components/badge"

src/extensions/extension-store.ts

@@ -1,9 +1,9 @@
+import type { ExtensionId, ExtensionManifest, ExtensionVersion, LensExtension } from "./lens-extension";
 import type { LensRuntimeRendererEnv } from "./lens-runtime";
 import path from "path";
 import fs from "fs-extra";
 import { action, observable, reaction, toJS, } from "mobx";
 import { BaseStore } from "../common/base-store";
-import { ExtensionId, ExtensionManifest, ExtensionVersion, LensExtension } from "./lens-extension";
 import { isDevelopment } from "../common/vars";
 import logger from "../main/logger";
 

src/extensions/lens-extension.ts

@@ -3,13 +3,16 @@ import type { LensRuntimeRendererEnv } from "./lens-runtime";
 import type { PageRegistration } from "./register-page";
 import { readJsonSync } from "fs-extra";
 import { action, observable, toJS } from "mobx";
-import extensionManifest from "./example-extension/package.json"
 import logger from "../main/logger";
 
 export type ExtensionId = string | ExtensionPackageJsonPath;
 export type ExtensionPackageJsonPath = string;
 export type ExtensionVersion = string | number;
-export type ExtensionManifest = typeof extensionManifest & ExtensionModel;
+
+export interface ExtensionManifest extends ExtensionModel {
+  main: string;
+  description?: string; // todo: add more fields similar to package.json + some extra
+}
 
 export class LensExtension implements ExtensionModel {
   public id: ExtensionId;

src/extensions/rollup.config.js

@@ -0,0 +1,5 @@
+// Workaround for using Typescript in Rollup configutation
+// https://stackoverflow.com/questions/54711437/does-rollup-support-typescript-in-rollup-config-file
+
+require('ts-node').register();
+module.exports = require('./rollup.config.ts');

src/extensions/rollup.config.ts

@@ -0,0 +1,59 @@
+// Generating declaration types for extensions-api
+// Rollup: https://rollupjs.org/guide/en/
+// Plugin docs: https://github.com/Swatinem/rollup-plugin-dts
+
+import { OutputChunk, Plugin, RollupOptions } from 'rollup';
+import json from '@rollup/plugin-json';
+import dts from "rollup-plugin-dts";
+import ignoreImport from 'rollup-plugin-ignore-import'
+
+// todo: generate extension-api.js bundle also with Rollup (?)
+
+const config: RollupOptions = {
+  input: "src/extensions/extension-api.ts",
+  output: [
+    { file: "types/extension-api.d.ts", format: "es", }
+  ],
+  plugins: [
+    dts(),
+    dtsModuleWrap({ name: "@lens/extensions" }),
+    ignoreImport({ extensions: ['.scss'] }),
+    json(),
+  ],
+};
+
+function dtsModuleWrap({ name }: { name: string }): Plugin {
+  return {
+    name,
+    generateBundle: (options, bundle) => {
+      const apiTypes = Object.values(bundle)[0] as OutputChunk; // extension-api.d.ts
+      const typeRefs: string[] = []
+      const declarations: string[] = []
+      const apiLines = apiTypes.code.split("\n")
+      let outputCode = ""
+
+      apiLines.forEach(line => {
+        if (line.startsWith("///")) {
+          typeRefs.push(line)
+        } else {
+          declarations.push(line)
+        }
+      })
+
+      // print external @types refs first
+      if (typeRefs.length) {
+        outputCode += typeRefs.join("\n") + "\n\n"
+      }
+
+      // wrap declarations into global module definition
+      outputCode += `declare module "${name}" {\n`
+      outputCode += declarations.map(line => `\t${line}`).join("\n")
+      outputCode += `\n}`
+
+      // save
+      apiTypes.code = outputCode;
+    }
+  }
+}
+
+export default config;

src/extensions/tsconfig.json

@@ -1,13 +0,0 @@
-{
-  "extends": "../../tsconfig.json",
-  "compilerOptions": {
-    "module": "AMD",
-    "declaration": true,
-    "emitDeclarationOnly": true,
-    "outFile": "./../../static/types/extension-api.d.ts"
-  },
-  "include": [
-    "../../types",
-    "./extension-api.ts"
-  ]
-}