@backstage/cli 0.33.2-next.0 → 0.34.0-next.1

package/CHANGELOG.md

@@ -1,5 +1,25 @@
 # @backstage/cli
 
+## 0.34.0-next.1
+
+### Minor Changes
+
+- 38b4243: Added plugin and module templates for the new frontend system. These templates are not included by default, but can be included by adding `@backstage/cli/templates/new-frontend-plugin` and `@backstage/cli/templates/new-frontend-plugin-module` as [custom templates](https://backstage.io/docs/tooling/cli/templates#installing-custom-templates).
+
+### Patch Changes
+
+- Updated dependencies
+  - @backstage/catalog-model@1.7.5
+  - @backstage/cli-common@0.1.15
+  - @backstage/cli-node@0.2.13
+  - @backstage/config@1.3.3
+  - @backstage/config-loader@1.10.2
+  - @backstage/errors@1.2.7
+  - @backstage/eslint-plugin@0.1.11
+  - @backstage/integration@1.17.1
+  - @backstage/release-manifests@0.0.13
+  - @backstage/types@1.2.1
+
 ## 0.33.2-next.0
 
 ### Patch Changes

package/dist/lib/version.cjs.js

@@ -13,13 +13,16 @@ var _package$7 = require('../packages/core-components/package.json.cjs.js');
 var _package$8 = require('../packages/core-plugin-api/package.json.cjs.js');
 var _package$9 = require('../packages/dev-utils/package.json.cjs.js');
 var _package$a = require('../packages/errors/package.json.cjs.js');
-var _package$b = require('../packages/test-utils/package.json.cjs.js');
-var _package$d = require('../plugins/scaffolder-node/package.json.cjs.js');
-var _package$e = require('../plugins/scaffolder-node-test-utils/package.json.cjs.js');
-var _package$f = require('../plugins/auth-backend/package.json.cjs.js');
-var _package$g = require('../plugins/auth-backend-module-guest-provider/package.json.cjs.js');
-var _package$h = require('../plugins/catalog-node/package.json.cjs.js');
-var _package$c = require('../packages/theme/package.json.cjs.js');
+var _package$b = require('../packages/frontend-defaults/package.json.cjs.js');
+var _package$c = require('../packages/frontend-plugin-api/package.json.cjs.js');
+var _package$d = require('../packages/frontend-test-utils/package.json.cjs.js');
+var _package$e = require('../packages/test-utils/package.json.cjs.js');
+var _package$g = require('../plugins/scaffolder-node/package.json.cjs.js');
+var _package$h = require('../plugins/scaffolder-node-test-utils/package.json.cjs.js');
+var _package$i = require('../plugins/auth-backend/package.json.cjs.js');
+var _package$j = require('../plugins/auth-backend-module-guest-provider/package.json.cjs.js');
+var _package$k = require('../plugins/catalog-node/package.json.cjs.js');
+var _package$f = require('../packages/theme/package.json.cjs.js');
 var _package = require('../packages/backend-defaults/package.json.cjs.js');
 
 function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
@@ -39,13 +42,16 @@ const packageVersions = {
   "@backstage/core-plugin-api": _package$8.version,
   "@backstage/dev-utils": _package$9.version,
   "@backstage/errors": _package$a.version,
-  "@backstage/test-utils": _package$b.version,
-  "@backstage/theme": _package$c.version,
-  "@backstage/plugin-scaffolder-node": _package$d.version,
-  "@backstage/plugin-scaffolder-node-test-utils": _package$e.version,
-  "@backstage/plugin-auth-backend": _package$f.version,
-  "@backstage/plugin-auth-backend-module-guest-provider": _package$g.version,
-  "@backstage/plugin-catalog-node": _package$h.version
+  "@backstage/frontend-defaults": _package$b.version,
+  "@backstage/frontend-plugin-api": _package$c.version,
+  "@backstage/frontend-test-utils": _package$d.version,
+  "@backstage/test-utils": _package$e.version,
+  "@backstage/theme": _package$f.version,
+  "@backstage/plugin-scaffolder-node": _package$g.version,
+  "@backstage/plugin-scaffolder-node-test-utils": _package$h.version,
+  "@backstage/plugin-auth-backend": _package$i.version,
+  "@backstage/plugin-auth-backend-module-guest-provider": _package$j.version,
+  "@backstage/plugin-catalog-node": _package$k.version
 };
 function findVersion() {
   const pkgContent = fs__default.default.readFileSync(paths.paths.resolveOwn("package.json"), "utf8");

package/dist/packages/cli/package.json.cjs.js

@@ -1,6 +1,6 @@
 'use strict';
 
-var version = "0.33.2-next.0";
+var version = "0.34.0-next.1";
 var dependencies = {
 	"@backstage/catalog-model": "workspace:^",
 	"@backstage/cli-common": "workspace:^",

package/dist/packages/core-components/package.json.cjs.js

@@ -1,6 +1,6 @@
 'use strict';
 
-var version = "0.17.5-next.0";
+var version = "0.17.5-next.1";
 
 exports.version = version;
 //# sourceMappingURL=package.json.cjs.js.map

package/dist/packages/frontend-defaults/package.json.cjs.js

@@ -0,0 +1,6 @@
+'use strict';
+
+var version = "0.3.0-next.2";
+
+exports.version = version;
+//# sourceMappingURL=package.json.cjs.js.map

package/dist/packages/frontend-plugin-api/package.json.cjs.js

@@ -0,0 +1,6 @@
+'use strict';
+
+var version = "0.11.0-next.1";
+
+exports.version = version;
+//# sourceMappingURL=package.json.cjs.js.map

package/dist/packages/frontend-test-utils/package.json.cjs.js

@@ -0,0 +1,6 @@
+'use strict';
+
+var version = "0.3.5-next.2";
+
+exports.version = version;
+//# sourceMappingURL=package.json.cjs.js.map

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@backstage/cli",
-  "version": "0.33.2-next.0",
+  "version": "0.34.0-next.1",
   "description": "CLI for developing Backstage plugins and apps",
   "backstage": {
     "role": "cli"
@@ -168,7 +168,7 @@
     "@backstage/catalog-client": "1.11.0-next.0",
     "@backstage/config": "1.3.3",
     "@backstage/core-app-api": "1.18.0",
-    "@backstage/core-components": "0.17.5-next.0",
+    "@backstage/core-components": "0.17.5-next.1",
     "@backstage/core-plugin-api": "1.10.9",
     "@backstage/dev-utils": "1.1.13-next.1",
     "@backstage/errors": "1.2.7",

package/templates/new-frontend-plugin/.eslintrc.js.hbs

@@ -0,0 +1 @@
+module.exports = require('@backstage/cli/config/eslint-factory')(__dirname);

package/templates/new-frontend-plugin/README.md.hbs

@@ -0,0 +1,20 @@
+# {{pluginId}}
+
+Welcome to the {{pluginId}} plugin!
+
+_This plugin was created through the Backstage CLI_
+
+## Getting started
+
+Your plugin has been added to the app in this repository, meaning you'll be able
+to access it by running `yarn start` in the root directory, and then navigating
+to [/{{pluginId}}](http://localhost:3000/{{pluginId}}).
+
+This plugin is built with Backstage's [new frontend
+system](https://backstage.io/docs/frontend-system/architecture/index), and you
+can find more information about building plugins in the [plugin builder
+documentation](https://backstage.io/docs/frontend-system/building-plugins/index).
+
+You can also serve the plugin in isolation by running `yarn start` in the plugin directory.
+This method of serving the plugin provides quicker iteration speed and a faster startup and hot reloads.
+It is only meant for local development, and the setup for it can be found inside the [/dev](./dev) directory.

package/templates/new-frontend-plugin/dev/index.tsx

@@ -0,0 +1,10 @@
+import { createApp } from '@backstage/frontend-defaults';
+import ReactDOM from 'react-dom';
+
+import plugin from '../src';
+
+const app = createApp({
+  features: [plugin],
+});
+
+ReactDOM.render(app.createRoot(), document.getElementById('root'));

package/templates/new-frontend-plugin/package.json.hbs

@@ -0,0 +1,49 @@
+{
+  "name": "{{packageName}}",
+  "main": "src/index.ts",
+  "types": "src/index.ts",
+  "publishConfig": {
+    "access": "public",
+    "main": "dist/index.esm.js",
+    "types": "dist/index.d.ts"
+  },
+  "backstage": {
+    "role": "frontend-plugin",
+    "pluginId": "{{pluginId}}"
+  },
+  "sideEffects": false,
+  "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-components": "{{versionQuery '@backstage/core-components'}}",
+    "@backstage/frontend-plugin-api": "{{versionQuery '@backstage/frontend-plugin-api'}}",
+    "@backstage/theme": "{{versionQuery '@backstage/theme'}}",
+    "@material-ui/core": "{{versionQuery '@material-ui/core' '4.12.2'}}",
+    "@material-ui/icons": "{{versionQuery '@material-ui/icons' '4.9.1'}}",
+    "@material-ui/lab": "{{versionQuery '@material-ui/lab' '4.0.0-alpha.61'}}",
+    "react-use": "{{versionQuery 'react-use' '17.2.4'}}"
+  },
+  "peerDependencies": {
+    "react": "{{versionQuery 'react' '^16.13.1 || ^17.0.0 || ^18.0.0'}}"
+  },
+  "devDependencies": {
+    "@backstage/cli": "{{versionQuery '@backstage/cli'}}",
+    "@backstage/frontend-defaults": "{{versionQuery '@backstage/frontend-defaults'}}",
+    "@backstage/frontend-test-utils": "{{versionQuery '@backstage/frontend-test-utils'}}",
+    "@testing-library/jest-dom": "{{versionQuery '@testing-library/jest-dom' '6.0.0'}}",
+    "@testing-library/react": "{{versionQuery '@testing-library/react' '14.0.0'}}",
+    "@testing-library/user-event": "{{versionQuery '@testing-library/user-event' '14.0.0'}}",
+    "msw": "{{versionQuery 'msw' '1.0.0'}}",
+    "react": "{{versionQuery 'react' '^16.13.1 || ^17.0.0 || ^18.0.0'}}"
+  },
+  "files": [
+    "dist"
+  ]
+}

package/templates/new-frontend-plugin/portable-template.yaml

@@ -0,0 +1,5 @@
+name: frontend-plugin
+role: frontend-plugin
+description: A new frontend plugin
+values:
+  pluginVar: '{{ camelCase pluginId }}Plugin'

package/templates/new-frontend-plugin/src/components/ExampleComponent/ExampleComponent.test.tsx.hbs

@@ -0,0 +1,28 @@
+import { ExampleComponent } from './ExampleComponent';
+import { rest } from 'msw';
+import { setupServer } from 'msw/node';
+import { screen } from '@testing-library/react';
+import {
+  registerMswTestHooks,
+  renderInTestApp,
+} from '@backstage/frontend-test-utils';
+
+describe('ExampleComponent', () => {
+  const server = setupServer();
+  // Enable sane handlers for network requests
+  registerMswTestHooks(server);
+
+  // setup mock response
+  beforeEach(() => {
+    server.use(
+      rest.get('/*', (_, res, ctx) => res(ctx.status(200), ctx.json({}))),
+    );
+  });
+
+  it('should render', async () => {
+    await renderInTestApp(<ExampleComponent />);
+    expect(
+      screen.getByText('Welcome to {{pluginId}}!'),
+    ).toBeInTheDocument();
+  });
+});

package/templates/new-frontend-plugin/src/components/ExampleComponent/ExampleComponent.tsx.hbs

@@ -0,0 +1,37 @@
+import { Typography, Grid } from '@material-ui/core';
+import {
+  InfoCard,
+  Header,
+  Page,
+  Content,
+  ContentHeader,
+  HeaderLabel,
+  SupportButton,
+} from '@backstage/core-components';
+import { ExampleFetchComponent } from '../ExampleFetchComponent';
+
+export const ExampleComponent = () => (
+  <Page themeId="tool">
+    <Header title="Welcome to {{pluginId}}!" subtitle="Optional subtitle">
+      <HeaderLabel label="Owner" value="Team X" />
+      <HeaderLabel label="Lifecycle" value="Alpha" />
+    </Header>
+    <Content>
+      <ContentHeader title="Plugin title">
+        <SupportButton>A description of your plugin goes here.</SupportButton>
+      </ContentHeader>
+      <Grid container spacing={3} direction="column">
+        <Grid item>
+          <InfoCard title="Information card">
+            <Typography variant="body1">
+              All content should be wrapped in a card like this.
+            </Typography>
+          </InfoCard>
+        </Grid>
+        <Grid item>
+          <ExampleFetchComponent />
+        </Grid>
+      </Grid>
+    </Content>
+  </Page>
+);

package/templates/new-frontend-plugin/src/components/ExampleComponent/index.ts

@@ -0,0 +1 @@
+export { ExampleComponent } from './ExampleComponent';

package/templates/new-frontend-plugin/src/components/ExampleFetchComponent/ExampleFetchComponent.test.tsx.hbs

@@ -0,0 +1,19 @@
+import { renderInTestApp } from '@backstage/frontend-test-utils';
+import { ExampleFetchComponent } from './ExampleFetchComponent';
+
+describe('ExampleFetchComponent', () => {
+  it('renders the user table', async () => {
+    const { getAllByText, getByAltText, getByText, findByRole } =
+      await renderInTestApp(<ExampleFetchComponent />);
+
+    // Wait for the table to render
+    const table = await findByRole('table');
+    const nationality = getAllByText('GB');
+    // Assert that the table contains the expected user data
+    expect(table).toBeInTheDocument();
+    expect(getByAltText('Carolyn')).toBeInTheDocument();
+    expect(getByText('Carolyn Moore')).toBeInTheDocument();
+    expect(getByText('carolyn.moore@example.com')).toBeInTheDocument();
+    expect(nationality[0]).toBeInTheDocument();
+  });
+});

package/templates/new-frontend-plugin/src/components/ExampleFetchComponent/ExampleFetchComponent.tsx.hbs

@@ -0,0 +1,308 @@
+import { makeStyles } from '@material-ui/core/styles';
+import {
+  Table,
+  TableColumn,
+  Progress,
+  ResponseErrorPanel,
+} from '@backstage/core-components';
+import useAsync from 'react-use/lib/useAsync';
+
+export const exampleUsers = {
+  results: [
+    {
+      gender: 'female',
+      name: {
+        title: 'Miss',
+        first: 'Carolyn',
+        last: 'Moore',
+      },
+      email: 'carolyn.moore@example.com',
+      picture: 'https://api.dicebear.com/6.x/open-peeps/svg?seed=Carolyn',
+      nat: 'GB',
+    },
+    {
+      gender: 'female',
+      name: {
+        title: 'Ms',
+        first: 'Esma',
+        last: 'Berberoğlu',
+      },
+      email: 'esma.berberoglu@example.com',
+      picture: 'https://api.dicebear.com/6.x/open-peeps/svg?seed=Esma',
+      nat: 'TR',
+    },
+    {
+      gender: 'female',
+      name: {
+        title: 'Ms',
+        first: 'Isabella',
+        last: 'Rhodes',
+      },
+      email: 'isabella.rhodes@example.com',
+      picture: 'https://api.dicebear.com/6.x/open-peeps/svg?seed=Isabella',
+      nat: 'GB',
+    },
+    {
+      gender: 'male',
+      name: {
+        title: 'Mr',
+        first: 'Derrick',
+        last: 'Carter',
+      },
+      email: 'derrick.carter@example.com',
+      picture: 'https://api.dicebear.com/6.x/open-peeps/svg?seed=Derrick',
+      nat: 'IE',
+    },
+    {
+      gender: 'female',
+      name: {
+        title: 'Miss',
+        first: 'Mattie',
+        last: 'Lambert',
+      },
+      email: 'mattie.lambert@example.com',
+      picture: 'https://api.dicebear.com/6.x/open-peeps/svg?seed=Mattie',
+      nat: 'AU',
+    },
+    {
+      gender: 'male',
+      name: {
+        title: 'Mr',
+        first: 'Mijat',
+        last: 'Rakić',
+      },
+      email: 'mijat.rakic@example.com',
+      picture: 'https://api.dicebear.com/6.x/open-peeps/svg?seed=Mijat',
+      nat: 'RS',
+    },
+    {
+      gender: 'male',
+      name: {
+        title: 'Mr',
+        first: 'Javier',
+        last: 'Reid',
+      },
+      email: 'javier.reid@example.com',
+      picture: 'https://api.dicebear.com/6.x/open-peeps/svg?seed=Javier',
+      nat: 'US',
+    },
+    {
+      gender: 'female',
+      name: {
+        title: 'Ms',
+        first: 'Isabella',
+        last: 'Li',
+      },
+      email: 'isabella.li@example.com',
+      picture: 'https://api.dicebear.com/6.x/open-peeps/svg?seed=Isabella',
+      nat: 'CA',
+    },
+    {
+      gender: 'female',
+      name: {
+        title: 'Mrs',
+        first: 'Stephanie',
+        last: 'Garrett',
+      },
+      email: 'stephanie.garrett@example.com',
+      picture: 'https://api.dicebear.com/6.x/open-peeps/svg?seed=Stephanie',
+      nat: 'AU',
+    },
+    {
+      gender: 'female',
+      name: {
+        title: 'Ms',
+        first: 'Antonia',
+        last: 'Núñez',
+      },
+      email: 'antonia.nunez@example.com',
+      picture: 'https://api.dicebear.com/6.x/open-peeps/svg?seed=Antonia',
+      nat: 'ES',
+    },
+    {
+      gender: 'male',
+      name: {
+        title: 'Mr',
+        first: 'Donald',
+        last: 'Young',
+      },
+      email: 'donald.young@example.com',
+      picture: 'https://api.dicebear.com/6.x/open-peeps/svg?seed=Donald',
+      nat: 'US',
+    },
+    {
+      gender: 'male',
+      name: {
+        title: 'Mr',
+        first: 'Iegor',
+        last: 'Holodovskiy',
+      },
+      email: 'iegor.holodovskiy@example.com',
+      picture: 'https://api.dicebear.com/6.x/open-peeps/svg?seed=Iegor',
+      nat: 'UA',
+    },
+    {
+      gender: 'female',
+      name: {
+        title: 'Madame',
+        first: 'Jessica',
+        last: 'David',
+      },
+      email: 'jessica.david@example.com',
+      picture: 'https://api.dicebear.com/6.x/open-peeps/svg?seed=Jessica',
+      nat: 'CH',
+    },
+    {
+      gender: 'female',
+      name: {
+        title: 'Ms',
+        first: 'Eve',
+        last: 'Martinez',
+      },
+      email: 'eve.martinez@example.com',
+      picture: 'https://api.dicebear.com/6.x/open-peeps/svg?seed=Eve',
+      nat: 'FR',
+    },
+    {
+      gender: 'male',
+      name: {
+        title: 'Mr',
+        first: 'Caleb',
+        last: 'Silva',
+      },
+      email: 'caleb.silva@example.com',
+      picture: 'https://api.dicebear.com/6.x/open-peeps/svg?seed=Caleb',
+      nat: 'US',
+    },
+    {
+      gender: 'female',
+      name: {
+        title: 'Miss',
+        first: 'Marcia',
+        last: 'Jenkins',
+      },
+      email: 'marcia.jenkins@example.com',
+      picture: 'https://api.dicebear.com/6.x/open-peeps/svg?seed=Marcia',
+      nat: 'US',
+    },
+    {
+      gender: 'female',
+      name: {
+        title: 'Mrs',
+        first: 'Mackenzie',
+        last: 'Jones',
+      },
+      email: 'mackenzie.jones@example.com',
+      picture: 'https://api.dicebear.com/6.x/open-peeps/svg?seed=Mackenzie',
+      nat: 'NZ',
+    },
+    {
+      gender: 'male',
+      name: {
+        title: 'Mr',
+        first: 'Jeremiah',
+        last: 'Gutierrez',
+      },
+      email: 'jeremiah.gutierrez@example.com',
+      picture: 'https://api.dicebear.com/6.x/open-peeps/svg?seed=Jeremiah',
+      nat: 'AU',
+    },
+    {
+      gender: 'female',
+      name: {
+        title: 'Ms',
+        first: 'Luciara',
+        last: 'Souza',
+      },
+      email: 'luciara.souza@example.com',
+      picture: 'https://api.dicebear.com/6.x/open-peeps/svg?seed=Luciara',
+      nat: 'BR',
+    },
+    {
+      gender: 'male',
+      name: {
+        title: 'Mr',
+        first: 'Valgi',
+        last: 'da Cunha',
+      },
+      email: 'valgi.dacunha@example.com',
+      picture: 'https://api.dicebear.com/6.x/open-peeps/svg?seed=Valgi',
+      nat: 'BR',
+    },
+  ],
+};
+
+const useStyles = makeStyles({
+  avatar: {
+    height: 32,
+    width: 32,
+    borderRadius: '50%',
+  },
+});
+
+type User = {
+  gender: string; // "male"
+  name: {
+    title: string; // "Mr",
+    first: string; // "Duane",
+    last: string; // "Reed"
+  };
+  email: string; // "duane.reed@example.com"
+  picture: string; // "https://api.dicebear.com/6.x/open-peeps/svg?seed=Duane"
+  nat: string; // "AU"
+};
+
+type DenseTableProps = {
+  users: User[];
+};
+
+export const DenseTable = ({ users }: DenseTableProps) => {
+  const classes = useStyles();
+
+  const columns: TableColumn[] = [
+    { title: 'Avatar', field: 'avatar' },
+    { title: 'Name', field: 'name' },
+    { title: 'Email', field: 'email' },
+    { title: 'Nationality', field: 'nationality' },
+  ];
+
+  const data = users.map(user => {
+    return {
+      avatar: (
+        <img
+          src={user.picture}
+          className={classes.avatar}
+          alt={user.name.first}
+        />
+      ),
+      name: `${user.name.first} ${user.name.last}`,
+      email: user.email,
+      nationality: user.nat,
+    };
+  });
+
+  return (
+    <Table
+      title="Example User List"
+      options=\{{ search: false, paging: false }}
+      columns={columns}
+      data={data}
+    />
+  );
+};
+
+export const ExampleFetchComponent = () => {
+
+  const { value, loading, error } = useAsync(async (): Promise<User[]> => {
+    // Would use fetch in a real world example
+    return exampleUsers.results;
+  }, []);
+
+  if (loading) {
+    return <Progress />;
+  } else if (error) {
+    return <ResponseErrorPanel error={error} />;
+  }
+
+  return <DenseTable users={value || []} />;
+};

package/templates/new-frontend-plugin/src/components/ExampleFetchComponent/index.ts

@@ -0,0 +1 @@
+export { ExampleFetchComponent } from './ExampleFetchComponent';

package/templates/new-frontend-plugin/src/index.ts.hbs

@@ -0,0 +1 @@
+export { {{ pluginVar }} as default } from './plugin';

package/templates/new-frontend-plugin/src/plugin.test.ts.hbs

@@ -0,0 +1,7 @@
+import { {{ pluginVar }} } from './plugin';
+
+describe('{{pluginId}}', () => {
+  it('should export plugin', () => {
+    expect({{ pluginVar }}).toBeDefined();
+  });
+});

package/templates/new-frontend-plugin/src/plugin.tsx.hbs

@@ -0,0 +1,26 @@
+import React from 'react';
+import {
+  createFrontendPlugin,
+  PageBlueprint,
+} from '@backstage/frontend-plugin-api';
+
+import { rootRouteRef } from './routes';
+
+export const page = PageBlueprint.make({
+  params: {
+    path: '/{{pluginId}}',
+    routeRef: rootRouteRef,
+    loader: () =>
+      import('./components/ExampleComponent').then(m =>
+        <m.ExampleComponent />,
+      ),
+  },
+});
+
+export const {{ pluginVar }} = createFrontendPlugin({
+  id: '{{pluginId}}',
+  extensions: [page],
+  routes: {
+    root: rootRouteRef,
+  }
+});

package/templates/new-frontend-plugin/src/routes.ts

@@ -0,0 +1,3 @@
+import { createRouteRef } from '@backstage/frontend-plugin-api';
+
+export const rootRouteRef = createRouteRef();

package/templates/new-frontend-plugin/src/setupTests.ts

@@ -0,0 +1 @@
+import '@testing-library/jest-dom';

package/templates/new-frontend-plugin-module/.eslintrc.js.hbs

@@ -0,0 +1 @@
+module.exports = require('@backstage/cli/config/eslint-factory')(__dirname);

package/templates/new-frontend-plugin-module/README.md.hbs

@@ -0,0 +1,5 @@
+# {{packageName}}
+
+The {{moduleId}} frontend module for the {{pluginId}} plugin.
+
+_This plugin was created through the Backstage CLI_

package/templates/new-frontend-plugin-module/package.json.hbs

@@ -0,0 +1,35 @@
+{
+  "name": "{{packageName}}",
+  "description": "The {{moduleId}} frontend module for the {{pluginId}} plugin.",
+  "main": "src/index.ts",
+  "types": "src/index.ts",
+  "publishConfig": {
+    "access": "public",
+    "main": "dist/index.cjs.js",
+    "module": "dist/index.esm.js",
+    "types": "dist/index.d.ts"
+  },
+  "backstage": {
+    "role": "frontend-plugin-module",
+    "pluginId": "{{pluginId}}"
+  },
+  "sideEffects": false,
+  "scripts": {
+    "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/frontend-plugin-api": "{{versionQuery '@backstage/frontend-plugin-api'}}"
+  },
+  "devDependencies": {
+    "@backstage/cli": "{{versionQuery '@backstage/cli'}}",
+    "@testing-library/jest-dom": "{{versionQuery '@testing-library/jest-dom' '6.0.0'}}"
+  },
+  "files": [
+    "dist"
+  ]
+}

package/templates/new-frontend-plugin-module/portable-template.yaml

@@ -0,0 +1,5 @@
+name: frontend-plugin-module
+role: frontend-plugin-module
+description: A new frontend module that extends an existing frontend plugin
+values:
+  moduleVar: '{{ camelCase pluginId }}Module{{ upperFirst ( camelCase moduleId ) }}'

package/templates/new-frontend-plugin-module/src/index.ts.hbs

@@ -0,0 +1 @@
+export { {{ moduleVar }} as default } from './plugin';

package/templates/new-frontend-plugin-module/src/module.tsx.hbs

@@ -0,0 +1,8 @@
+import { createFrontendModule } from '@backstage/frontend-plugin-api';
+
+export const {{ moduleVar }} = createFrontendModule({
+  pluginId: '{{ pluginId }}',
+  extensions: [
+    /* TODO */
+  ],
+});

package/templates/new-frontend-plugin-module/src/setupTests.ts

@@ -0,0 +1 @@
+import '@testing-library/jest-dom';