Add rollup for plugin build

packages/cli/@types/rollup-plugin-image-files.d.ts

@@ -0,0 +1 @@
+declare module 'rollup-plugin-image-files';

packages/cli/package.json

@@ -33,6 +33,8 @@
     "@types/react-dev-utils": "^9.0.4",
     "@types/recursive-readdir": "^2.2.0",
     "@types/tar": "^4.0.3",
+    "@types/rollup-plugin-peer-deps-external": "2.2.0",
+    "@types/rollup-plugin-postcss": "2.0.0",
     "@types/webpack": "^4.41.7",
     "@types/webpack-dev-server": "^3.10.0",
     "del": "^5.1.0",
@@ -46,6 +48,8 @@
   "dependencies": {
     "@lerna/package-graph": "^3.18.5",
     "@lerna/project": "^3.18.0",
+    "@rollup/plugin-commonjs": "^11.0.2",
+    "@rollup/plugin-node-resolve": "^7.1.1",
     "@spotify/web-scripts": "^6.0.0",
     "chokidar": "^3.3.1",
     "commander": "^4.1.1",
@@ -60,6 +64,11 @@
     "react-scripts": "^3.4.0",
     "recursive-readdir": "^2.2.2",
     "replace-in-file": "^5.0.2",
+    "rollup": "^2.1.0",
+    "rollup-plugin-image-files": "^1.4.2",
+    "rollup-plugin-peer-deps-external": "^2.2.2",
+    "rollup-plugin-postcss": "^2.5.0",
+    "rollup-plugin-typescript2": "^0.26.0",
     "ts-loader": "^6.2.1",
     "webpack": "^4.41.6",
     "webpack-dev-server": "^3.10.3"
@@ -72,7 +81,7 @@
   ],
   "nodemonConfig": {
     "watch": "./src",
-    "exec": "ts-node",
+    "exec": "ts-node ./src",
     "ext": "ts"
   }
 }

packages/cli/src/commands/plugin/assets.d.ts

@@ -94,3 +94,7 @@ declare module '*.module.sass' {
   const classes: { readonly [key: string]: string };
   export default classes;
 }
+
+declare module 'rollup-plugin-image-files' {
+  export default function image(): any;
+}

packages/cli/src/commands/plugin/build.ts

@@ -14,43 +14,17 @@
  * limitations under the License.
  */
 
-import { Command } from 'commander';
-import fs from 'fs-extra';
-import path from 'path';
-import recursive from 'recursive-readdir';
-import { run } from '../../helpers/run';
+const rollup = require('rollup'); // "import" is not working for some reason...
+import rollupConfig from './rollup.config';
 
-const copyStaticAssets = async () => {
-  const pluginRoot = fs.realpathSync(process.cwd());
-  const source = path.resolve(pluginRoot, 'src');
-  const destination = path.resolve(pluginRoot, 'dist', 'cjs');
-  const assetFiles = await recursive(source, [
-    '**/*.tsx',
-    '**/*.ts',
-    '**/*.js',
-  ]);
-  assetFiles.forEach(file => {
-    const fileToBeCopied = file.replace(source, destination);
-    const dirForFileToBeCopied = path.dirname(fileToBeCopied);
-    fs.ensureDirSync(dirForFileToBeCopied);
-    fs.copyFileSync(file, file.replace(source, destination).toString());
-  });
-};
-
-export default async (cmd: Command) => {
-  const args = [
-    '--outDir',
-    'dist/cjs',
-    '--noEmit',
-    'false',
-    '--module',
-    'CommonJS',
-  ];
-
-  if (cmd.watch) {
-    args.push('--watch');
-  }
-
-  await copyStaticAssets();
-  await run('tsc', args);
+export default async () => {
+  const inputOptions = {
+    input: rollupConfig.input,
+    plugins: rollupConfig.plugins,
+  };
+  const outputOptions = rollupConfig.output;
+
+  const bundle = await rollup.rollup(inputOptions);
+  await bundle.generate(outputOptions);
+  await bundle.write(outputOptions);
 };

packages/cli/src/commands/plugin/rollup.config.ts

@@ -0,0 +1,43 @@
+/*
+ * Copyright 2020 Spotify AB
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import peerDepsExternal from 'rollup-plugin-peer-deps-external';
+import typescript from 'rollup-plugin-typescript2'; // @rollup/plugin-typescript
+import commonjs from '@rollup/plugin-commonjs';
+import resolve from '@rollup/plugin-node-resolve';
+import postcss from 'rollup-plugin-postcss';
+import image from 'rollup-plugin-image-files';
+
+export default {
+  input: 'src/index.ts',
+  output: {
+    file: 'build/index.esm.js',
+    format: 'esm',
+    sourcemap: true,
+  },
+
+  plugins: [
+    peerDepsExternal(),
+    resolve(),
+    commonjs({
+      include: ['node_modules/**', '../../node_modules/**'],
+      exclude: ['**/*.stories.js'],
+    }),
+    postcss(),
+    image(),
+    typescript(),
+  ],
+};

packages/cli/src/index.ts

@@ -143,4 +143,6 @@ process.on('unhandledRejection', rejection => {
 });
 
 main(process.argv);
-// main([process.argv[0], process.argv[1], '--version']);
+// process.chdir('../../plugins/welcome');
+// console.log(`DEBUG: ${process.cwd()}`);
+// main([process.argv[0], process.argv[1], 'plugin:build']);

packages/cli/templates/default-plugin/package.json.hbs

@@ -1,8 +1,8 @@
 {
   "name": "@backstage/plugin-{{id}}",
   "version": "{{version}}",
-  "main": "dist/cjs/index.js",
-  "types": "dist/cjs/index.d.ts",
+  "main": "build/index.esm.js",
+  "types": "build/index.d.ts",
   "license": "Apache-2.0",
   "private": true,
   "scripts": {
@@ -12,11 +12,20 @@
   },
   "devDependencies": {
     "@backstage/cli": "^{{version}}",
+    "@testing-library/jest-dom": "^4.2.4",
+    "@testing-library/react": "^9.3.2",
+    "@testing-library/user-event": "^7.1.2",
+    "@types/jest": "^24.0.0",
+    "@types/node": "^12.0.0",
     "@types/testing-library__jest-dom": "5.0.2",
     "jest-fetch-mock": "^3.0.3"
   },
-  "dependencies": {
-    "@backstage/core": "^{{version}}",
-    "@material-ui/lab": "4.0.0-alpha.45"
+  "peerDependencies": {
+    "@backstage/core": "^0.1.0",
+    "@material-ui/core": "^4.9.1",
+    "@material-ui/icons": "^4.9.1",
+    "@material-ui/lab": "4.0.0-alpha.45",
+    "react": "16.13.1",
+    "react-dom": "16.13.1"
   }
 }

packages/cli/templates/default-plugin/tsconfig.json

@@ -1,4 +1,7 @@
 {
   "extends": "../../tsconfig.json",
-  "include": ["src"]
+  "include": ["src"],
+  "compilerOptions": {
+    "module": "es6"
+  }
 }