cli: add web-plugin template

Signed-off-by: Patrik Oldsberg <poldsberg@gmail.com>
2023-03-10 13:23:51 +01:00
parent 9d8528eb8d
commit 09e87a95e2
16 changed files with 341 additions and 0 deletions
@@ -19,4 +19,5 @@ export { backendPlugin } from './backendPlugin';
 export { webLibraryPackage } from './webLibraryPackage';
 export { pluginCommon } from './pluginCommon';
 export { pluginNode } from './pluginNode';
+export { pluginWeb } from './pluginWeb';
 export { scaffolderModule } from './scaffolderModule';
@@ -0,0 +1,114 @@
+/*
+ * Copyright 2021 The Backstage Authors
+ *
+ * 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 fs from 'fs-extra';
+import mockFs from 'mock-fs';
+import { sep, resolve as resolvePath } from 'path';
+import { paths } from '../../paths';
+import { Task } from '../../tasks';
+import { FactoryRegistry } from '../FactoryRegistry';
+import { createMockOutputStream, mockPaths } from './common/testUtils';
+import { pluginWeb } from './pluginWeb';
+
+describe('pluginWeb factory', () => {
+  beforeEach(() => {
+    mockPaths({
+      targetRoot: '/root',
+    });
+  });
+
+  afterEach(() => {
+    mockFs.restore();
+    jest.resetAllMocks();
+  });
+
+  it('should create a react plugin package', async () => {
+    mockFs({
+      '/root': {
+        plugins: mockFs.directory(),
+      },
+      [paths.resolveOwn('templates')]: mockFs.load(
+        paths.resolveOwn('templates'),
+      ),
+    });
+
+    const options = await FactoryRegistry.populateOptions(pluginWeb, {
+      id: 'test',
+    });
+
+    let modified = false;
+
+    const [output, mockStream] = createMockOutputStream();
+    jest.spyOn(process, 'stderr', 'get').mockReturnValue(mockStream);
+    jest.spyOn(Task, 'forCommand').mockResolvedValue();
+
+    await pluginWeb.create(options, {
+      private: true,
+      isMonoRepo: true,
+      defaultVersion: '1.0.0',
+      markAsModified: () => {
+        modified = true;
+      },
+      createTemporaryDirectory: () => fs.mkdtemp('test'),
+    });
+
+    expect(modified).toBe(true);
+
+    expect(output).toEqual([
+      '',
+      'Creating web plugin library backstage-plugin-test-react',
+      'Checking Prerequisites:',
+      `availability  plugins${sep}test-react`,
+      'creating      temp dir',
+      'Executing Template:',
+      'copying       .eslintrc.js',
+      'templating    README.md.hbs',
+      'templating    package.json.hbs',
+      'templating    index.ts.hbs',
+      'copying       setupTests.ts',
+      'copying       index.ts',
+      'copying       ExampleComponent.test.tsx',
+      'copying       ExampleComponent.tsx',
+      'copying       index.ts',
+      'copying       index.ts',
+      'copying       index.ts',
+      'copying       useExample.ts',
+      'Installing:',
+      `moving        plugins${sep}test-react`,
+    ]);
+
+    await expect(
+      fs.readJson('/root/plugins/test-react/package.json'),
+    ).resolves.toEqual(
+      expect.objectContaining({
+        name: 'backstage-plugin-test-react',
+        description: 'Web library for the test plugin',
+        private: true,
+        version: '1.0.0',
+      }),
+    );
+
+    expect(Task.forCommand).toHaveBeenCalledTimes(2);
+    expect(Task.forCommand).toHaveBeenCalledWith('yarn install', {
+      cwd: resolvePath('/root/plugins/test-react'),
+      optional: true,
+    });
+    expect(Task.forCommand).toHaveBeenCalledWith('yarn lint --fix', {
+      cwd: resolvePath('/root/plugins/test-react'),
+      optional: true,
+    });
+  });
+});
@@ -0,0 +1,74 @@
+/*
+ * Copyright 2021 The Backstage Authors
+ *
+ * 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 chalk from 'chalk';
+import { paths } from '../../paths';
+import { addCodeownersEntry, getCodeownersFilePath } from '../../codeowners';
+import { createFactory, CreateContext } from '../types';
+import { Task } from '../../tasks';
+import { ownerPrompt, pluginIdPrompt } from './common/prompts';
+import { executePluginPackageTemplate } from './common/tasks';
+
+type Options = {
+  id: string;
+  owner?: string;
+  codeOwnersPath?: string;
+};
+
+export const pluginWeb = createFactory<Options>({
+  name: 'plugin-react',
+  description: 'A new web library plugin package',
+  optionsDiscovery: async () => ({
+    codeOwnersPath: await getCodeownersFilePath(paths.targetRoot),
+  }),
+  optionsPrompts: [pluginIdPrompt(), ownerPrompt()],
+  async create(options: Options, ctx: CreateContext) {
+    const { id } = options;
+    const suffix = `${id}-react`;
+    const name = ctx.scope
+      ? `@${ctx.scope}/plugin-${suffix}`
+      : `backstage-plugin-${suffix}`;
+
+    Task.log();
+    Task.log(`Creating web plugin library ${chalk.cyan(name)}`);
+
+    const targetDir = ctx.isMonoRepo
+      ? paths.resolveTargetRoot('plugins', suffix)
+      : paths.resolveTargetRoot(`backstage-plugin-${suffix}`);
+
+    await executePluginPackageTemplate(ctx, {
+      targetDir,
+      templateName: 'default-react-plugin-package',
+      values: {
+        id,
+        name,
+        privatePackage: ctx.private,
+        npmRegistry: ctx.npmRegistry,
+        pluginVersion: ctx.defaultVersion,
+      },
+    });
+
+    if (options.owner) {
+      await addCodeownersEntry(`/plugins/${suffix}`, options.owner);
+    }
+
+    await Task.forCommand('yarn install', { cwd: targetDir, optional: true });
+    await Task.forCommand('yarn lint --fix', {
+      cwd: targetDir,
+      optional: true,
+    });
+  },
+});
@@ -0,0 +1 @@
+module.exports = require('@backstage/cli/config/eslint-factory')(__dirname);
@@ -0,0 +1,5 @@
+# {{name}}
+
+Welcome to the web library package for the {{id}} plugin!
+
+_This plugin was created through the Backstage CLI_
@@ -0,0 +1,47 @@
+{
+  "name": "{{name}}",
+  "description": "Web library for the {{id}} plugin",
+  "version": "{{pluginVersion}}",
+  "main": "src/index.ts",
+  "types": "src/index.ts",
+  "license": "Apache-2.0",
+{{#if privatePackage}}
+  "private": {{privatePackage}},
+{{/if}}
+  "publishConfig": {
+{{#if npmRegistry}}
+  "registry": "{{npmRegistry}}",
+{{/if}}
+    "access": "public",
+    "main": "dist/index.esm.js",
+    "types": "dist/index.d.ts"
+  },
+  "backstage": {
+    "role": "web-library"
+  },
+  "scripts": {
+    "start": "backstage-cli package start",
+    "build": "backstage-cli package build",
+    "lint": "backstage-cli package lint",
+    "test": "backstage-cli package test",
+    "clean": "backstage-cli package clean",
+    "prepack": "backstage-cli package prepack",
+    "postpack": "backstage-cli package postpack"
+  },
+  "dependencies": {
+    "@backstage/core-plugin-api": "{{versionQuery '@backstage/core-plugin-api'}}",
+    "@material-ui/core": "{{versionQuery '@material-ui/core' '4.12.2'}}"
+  },
+  "peerDependencies": {
+    "react": "{{versionQuery 'react' '^16.13.1 || ^17.0.0'}}"
+  },
+  "devDependencies": {
+    "@backstage/cli": "{{versionQuery '@backstage/cli'}}",
+    "@backstage/test-utils": "{{versionQuery '@backstage/test-utils'}}",
+    "@testing-library/jest-dom": "{{versionQuery '@testing-library/jest-dom' '5.10.1'}}",
+    "@testing-library/react": "{{versionQuery '@testing-library/react' '12.1.3'}}"
+  },
+  "files": [
+    "dist"
+  ]
+}
@@ -0,0 +1,18 @@
+import React from 'react';
+import { screen } from '@testing-library/react';
+import { renderInTestApp } from '@backstage/test-utils';
+import { ExampleComponent } from './ExampleComponent';
+
+describe('ExampleComponent', () => {
+  it('should render', async () => {
+    await renderInTestApp(<ExampleComponent />)
+
+    expect(screen.getByText('Hello World')).toBeInTheDocument();
+  });
+
+  it('should display a custom message', async () => {
+    await renderInTestApp(<ExampleComponent message={'Hello Example'} />)
+
+    expect(screen.getByText('Hello Example')).toBeInTheDocument();
+  })
+})
@@ -0,0 +1,29 @@
+import React from 'react';
+import { Typography } from '@material-ui/core';
+
+/**
+ * Props for {@link ExampleComponent}.
+ *
+ * @public
+ */
+export interface ExampleComponentProps {
+  message?: string;
+}
+
+/**
+ * Displays an example.
+ *
+ * @remarks
+ *
+ * Longer descriptions should be put after the `@remarks` tag. That way the initial summary
+ * will show up in the API docs overview section, while the longer description will only be
+ * displayed on the page for the specific API.
+ *
+ * @public
+ */
+export function ExampleComponent(props: ExampleComponentProps) {
+  // By destructuring props here rather than in the signature the API docs will look nicer
+  const { message = 'Hello World' } = props;
+
+  return <Typography variant="h1">{message}</Typography>;
+}
@@ -0,0 +1,2 @@
+export { ExampleComponent } from './ExampleComponent';
+export type { ExampleComponentProps } from './ExampleComponent';
@@ -0,0 +1,5 @@
+/***/
+// The index file in ./components/ is typically responsible for selecting
+// which components are public API and should be exported from the package.
+
+export * from './ExampleComponent';
@@ -0,0 +1,5 @@
+/***/
+// The index file in ./hooks/ is typically responsible for selecting
+// which hooks are public API and should be exported from the package.
+
+export * from './useExample';
@@ -0,0 +1 @@
+export { useExample } from './useExample';
@@ -0,0 +1,15 @@
+import { useEffect } from 'react';
+import { useApi, alertApiRef } from '@backstage/core-plugin-api';
+
+/**
+ * Shows an example alert.
+ *
+ * @public
+ */
+export function useExample() {
+  const alertApi = useApi(alertApiRef);
+
+  useEffect(() => {
+    alertApi.post({ message: 'Hello World!' });
+  }, [alertApi])
+}
@@ -0,0 +1,12 @@
+/***/
+/**
+ * Web library for the {{id}} plugin.
+ *
+ * @packageDocumentation
+ */
+
+// In this package you might for example export components or hooks
+// that are useful to other plugins or modules.
+
+export * from './components'
+export * from './hooks'
@@ -0,0 +1 @@
+import '@testing-library/jest-dom';
@@ -0,0 +1,11 @@
+{
+  "extends": "@backstage/cli/config/tsconfig.json",
+  "include": [
+    "src",
+  ],
+  "exclude": ["node_modules"],
+  "compilerOptions": {
+    "outDir": "dist-types",
+    "rootDir": "."
+  }
+}
				`@@ -0,0 +1 @@`
				`module.exports = require('@backstage/cli/config/eslint-factory')(__dirname);`