From 1ec6db99016cdee4cf0f2da8c62b55699be7f5dc Mon Sep 17 00:00:00 2001 From: Roman Date: Mon, 28 Sep 2020 14:15:14 +0300 Subject: [PATCH] generating extension-api.d.ts with rollup -- part 2 Signed-off-by: Roman --- .gitignore | 5 +- package.json | 2 +- .../example-extension/example-extension.tsx | 4 +- src/extensions/extension-api.ts | 2 +- src/extensions/rollup.config.js | 5 ++ src/extensions/rollup.config.ts | 60 +++++++++++++++---- types/mocks.d.ts | 1 - 7 files changed, 59 insertions(+), 20 deletions(-) create mode 100644 src/extensions/rollup.config.js diff --git a/.gitignore b/.gitignore index 11cc6298ab..68c773c895 100644 --- a/.gitignore +++ b/.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 diff --git a/package.json b/package.json index d006784046..7d52e4588d 100644 --- a/package.json +++ b/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", diff --git a/src/extensions/example-extension/example-extension.tsx b/src/extensions/example-extension/example-extension.tsx index f44c6936a4..1967ce0d60 100644 --- a/src/extensions/example-extension/example-extension.tsx +++ b/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 } diff --git a/src/extensions/extension-api.ts b/src/extensions/extension-api.ts index dc9769c887..5b9fce7d02 100644 --- a/src/extensions/extension-api.ts +++ b/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" diff --git a/src/extensions/rollup.config.js b/src/extensions/rollup.config.js new file mode 100644 index 0000000000..beb74ba319 --- /dev/null +++ b/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'); diff --git a/src/extensions/rollup.config.ts b/src/extensions/rollup.config.ts index 1be11e31d3..85221d5297 100644 --- a/src/extensions/rollup.config.ts +++ b/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; \ No newline at end of file diff --git a/types/mocks.d.ts b/types/mocks.d.ts index 9c8bf60047..7ddd25267b 100644 --- a/types/mocks.d.ts +++ b/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;