generating extension-api.d.ts with rollup -- part 2

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

.gitignore

@@ -4,6 +4,8 @@ node_modules/
 yarn-error.log
 coverage/
 tmp/
+locales/**/**.js
+lens.log
 static/build
 static/types
 binaries/client/
@@ -11,5 +13,4 @@ binaries/server/
 src/extensions/*/*.js
 src/extensions/*/*.d.ts
 src/extensions/example-extension/src/**
-locales/**/**.js
-lens.log
+types/extension-api.d.ts

package.json

@@ -15,7 +15,7 @@
     "dev-run": "nodemon --watch static/build/main.js --exec \"electron --inspect .\"",
     "dev:main": "yarn compile:main --watch",
     "dev:renderer": "yarn compile:renderer --watch",
-    "dev:extensions": "rollup --config src/extensions/rollup.config.ts --watch",
+    "dev:extensions": "rollup --config src/extensions/rollup.config.js --watch",
     "compile": "env NODE_ENV=production concurrently yarn:compile:*",
     "compile:main": "webpack --config webpack.main.ts",
     "compile:renderer": "webpack --config webpack.renderer.ts",

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

@@ -10,4 +10,4 @@ export * from "../renderer/components/icon"
 export * from "../renderer/components/tooltip"
 export * from "../renderer/components/button"
 export * from "../renderer/components/tabs"
-export * from "../renderer/components/spinner"
+export * from "../renderer/components/badge"

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

@@ -2,22 +2,56 @@
 // 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'
 
-const config = [
-  {
-    input: "./src/extensions/extension-api.ts",
-    output: [
-      { file: "./extension-api.d.ts", format: "cjs" }
-    ],
-    plugins: [
-      json(),
-      dts({ respectExternal: false }),
-      ignoreImport({ extensions: ['.scss'] })
-    ],
-  },
-];
+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[] = []
+      let bundleLines = apiTypes.code.split("\n")
+      let outputCode = ""
+
+      bundleLines.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;

types/mocks.d.ts

@@ -3,7 +3,6 @@ declare module "mac-ca"
 declare module "win-ca"
 declare module "@hapi/call"
 declare module "@hapi/subtext"
-declare module "@lens/extensions" // fixme: provide generated types from "extension-api.ts"
 
 // Global path to static assets
 declare const __static: string;