npm - @backstage/cli - Versions diffs - 0.33.1 → 0.34.0-next.1 - Mend

@backstage/cli 0.33.1 → 0.34.0-next.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (44) hide show

package/CHANGELOG.md CHANGED Viewed

@@ -1,5 +1,42 @@
 # @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
+- a6af768: Allow js files to be processed by the nodeTransform loader
+- Updated dependencies
+  - @backstage/cli-node@0.2.13
+  - @backstage/config-loader@1.10.2
+  - @backstage/catalog-model@1.7.5
+  - @backstage/cli-common@0.1.15
+  - @backstage/config@1.3.3
+  - @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.1
 ### Patch Changes

package/config/nodeTransformHooks.mjs CHANGED Viewed

@@ -127,10 +127,10 @@ async function withDetectedModuleType(resolved) {
     };
   }
-  // TODO(Rugvip): Afaik this should never happen and we can remove this check, but want it here for a little while to verify.
-  if (ext === '.js') {
-    throw new Error('Unexpected .js file without explicit format');
-  }
+  // Under normal circumstances .js files should reliably have a format and so
+  // we should only reach this point for .ts files. However, if additional
+  // custom loaders are being used the format may not be detected for .js files
+  // either. As such we don't restrict the file format at this point.
   // TODO(Rugvip): Does this need caching? kept it simple for now but worth exploring
   const packageJsonPath = await findPackageJSON(fileURLToPath(resolved.url));

package/dist/lib/version.cjs.js CHANGED Viewed

@@ -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/backend-defaults/package.json.cjs.js CHANGED Viewed

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

package/dist/packages/backend-plugin-api/package.json.cjs.js CHANGED Viewed

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

package/dist/packages/backend-test-utils/package.json.cjs.js CHANGED Viewed

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

package/dist/packages/catalog-client/package.json.cjs.js CHANGED Viewed

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

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

@@ -1,6 +1,6 @@
 'use strict';
-var version = "0.33.1";
+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 CHANGED Viewed

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

package/dist/packages/dev-utils/package.json.cjs.js CHANGED Viewed

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

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

@@ -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 ADDED Viewed

@@ -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 ADDED Viewed

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

package/dist/packages/test-utils/package.json.cjs.js CHANGED Viewed

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

package/dist/packages/theme/package.json.cjs.js CHANGED Viewed

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

package/dist/plugins/auth-backend/package.json.cjs.js CHANGED Viewed

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

package/dist/plugins/auth-backend-module-guest-provider/package.json.cjs.js CHANGED Viewed

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

package/dist/plugins/catalog-node/package.json.cjs.js CHANGED Viewed

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

package/dist/plugins/scaffolder-node/package.json.cjs.js CHANGED Viewed

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

package/dist/plugins/scaffolder-node-test-utils/package.json.cjs.js CHANGED Viewed

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

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "@backstage/cli",
-  "version": "0.33.1",
+  "version": "0.34.0-next.1",
   "description": "CLI for developing Backstage plugins and apps",
   "backstage": {
     "role": "cli"
@@ -47,16 +47,16 @@
     ]
   },
   "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",
+    "@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",
     "@manypkg/get-packages": "^1.1.3",
     "@module-federation/enhanced": "^0.9.0",
     "@octokit/graphql": "^5.0.0",
@@ -163,22 +163,22 @@
     "zod-validation-error": "^3.4.0"
   },
   "devDependencies": {
-    "@backstage/backend-plugin-api": "^1.4.1",
-    "@backstage/backend-test-utils": "^1.7.0",
-    "@backstage/catalog-client": "^1.10.2",
-    "@backstage/config": "^1.3.3",
-    "@backstage/core-app-api": "^1.18.0",
-    "@backstage/core-components": "^0.17.4",
-    "@backstage/core-plugin-api": "^1.10.9",
-    "@backstage/dev-utils": "^1.1.12",
-    "@backstage/errors": "^1.2.7",
-    "@backstage/plugin-auth-backend": "^0.25.2",
-    "@backstage/plugin-auth-backend-module-guest-provider": "^0.2.10",
-    "@backstage/plugin-catalog-node": "^1.17.2",
-    "@backstage/plugin-scaffolder-node": "^0.10.0",
-    "@backstage/plugin-scaffolder-node-test-utils": "^0.3.1",
-    "@backstage/test-utils": "^1.7.10",
-    "@backstage/theme": "^0.6.7",
+    "@backstage/backend-plugin-api": "1.4.2-next.0",
+    "@backstage/backend-test-utils": "1.7.1-next.0",
+    "@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.1",
+    "@backstage/core-plugin-api": "1.10.9",
+    "@backstage/dev-utils": "1.1.13-next.1",
+    "@backstage/errors": "1.2.7",
+    "@backstage/plugin-auth-backend": "0.25.3-next.0",
+    "@backstage/plugin-auth-backend-module-guest-provider": "0.2.11-next.0",
+    "@backstage/plugin-catalog-node": "1.18.0-next.0",
+    "@backstage/plugin-scaffolder-node": "0.11.0-next.0",
+    "@backstage/plugin-scaffolder-node-test-utils": "0.3.2-next.0",
+    "@backstage/test-utils": "1.7.11-next.0",
+    "@backstage/theme": "0.6.8-next.0",
     "@rspack/core": "^1.3.9",
     "@rspack/dev-server": "^1.1.1",
     "@rspack/plugin-react-refresh": "^1.4.2",

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

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

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

@@ -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 ADDED Viewed

@@ -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 ADDED Viewed

@@ -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 ADDED Viewed

@@ -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 ADDED Viewed

@@ -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 ADDED Viewed

@@ -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 ADDED Viewed

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

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

@@ -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 ADDED Viewed

@@ -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 ADDED Viewed

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

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

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

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

@@ -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 ADDED Viewed

@@ -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 ADDED Viewed

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

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

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

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

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

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

@@ -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 ADDED Viewed

@@ -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 ADDED Viewed

@@ -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 ADDED Viewed

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

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

@@ -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 ADDED Viewed

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