feat(npm): add support for the new frontend-system (alpha) (#2453)

Signed-off-by: Christoph Jerolimov <[email protected]>

workspaces/npm/.changeset/good-cats-occur.md

@@ -0,0 +1,5 @@
+---
+'@backstage-community/plugin-npm': minor
+---
+
+add support for the new frontend-system (alpha)

workspaces/npm/package.json

@@ -8,12 +8,13 @@
   },
   "scripts": {
     "dev": "yarn workspaces foreach -A --include backend --include app --parallel -v -i run start",
+    "dev-next": "yarn workspaces foreach -A --include backend --include app-next --parallel -v -i run start",
     "start": "yarn workspace app start",
     "start-backend": "yarn workspace backend start",
     "build:backend": "yarn workspace backend build",
     "build-image": "yarn workspace backend build-image",
     "tsc": "tsc",
-    "tsc:full": "tsc --skipLibCheck false --incremental false",
+    "tsc:full": "tsc --skipLibCheck true --incremental false",
     "build:all": "backstage-cli repo build --all",
     "build:api-reports": "yarn build:api-reports:only --tsc",
     "build:api-reports:only": "backstage-repo-tools api-reports -o ae-wrong-input-file-type,ae-undocumented --validate-release-tags",

workspaces/npm/packages/app-next/.eslintrc.js

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

workspaces/npm/packages/app-next/package.json

@@ -0,0 +1,76 @@
+{
+  "name": "app-next",
+  "version": "0.0.0",
+  "private": true,
+  "bundled": true,
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/backstage/community-plugins",
+    "directory": "workspaces/npm/packages/app-next"
+  },
+  "backstage": {
+    "role": "frontend"
+  },
+  "scripts": {
+    "start": "backstage-cli package start",
+    "build": "backstage-cli package build",
+    "clean": "backstage-cli package clean",
+    "test": "backstage-cli package test",
+    "lint": "backstage-cli package lint"
+  },
+  "dependencies": {
+    "@backstage-community/plugin-npm": "workspace:^",
+    "@backstage/app-defaults": "^1.5.15",
+    "@backstage/catalog-model": "^1.7.2",
+    "@backstage/cli": "^0.29.4",
+    "@backstage/core-app-api": "^1.15.3",
+    "@backstage/core-compat-api": "^0.3.4",
+    "@backstage/core-components": "^0.16.2",
+    "@backstage/core-plugin-api": "^1.10.2",
+    "@backstage/frontend-app-api": "^0.10.3",
+    "@backstage/frontend-defaults": "^0.1.4",
+    "@backstage/frontend-plugin-api": "^0.9.3",
+    "@backstage/integration-react": "^1.2.2",
+    "@backstage/plugin-api-docs": "^0.12.2",
+    "@backstage/plugin-catalog": "^1.26.0",
+    "@backstage/plugin-catalog-common": "^1.1.2",
+    "@backstage/plugin-catalog-graph": "^0.4.14",
+    "@backstage/plugin-catalog-import": "^0.12.8",
+    "@backstage/plugin-catalog-react": "^1.15.0",
+    "@backstage/plugin-org": "^0.6.34",
+    "@backstage/plugin-user-settings": "^0.8.17",
+    "@backstage/theme": "^0.6.3",
+    "@material-ui/core": "^4.12.2",
+    "@material-ui/icons": "^4.9.1",
+    "react": "^18.0.2",
+    "react-dom": "^18.0.2",
+    "react-router": "^6.3.0",
+    "react-router-dom": "^6.3.0",
+    "react-use": "^17.2.4",
+    "styled-components": "^6.1.8"
+  },
+  "devDependencies": {
+    "@backstage/test-utils": "^1.7.3",
+    "@playwright/test": "^1.32.3",
+    "@testing-library/dom": "^9.0.0",
+    "@testing-library/jest-dom": "^6.0.0",
+    "@testing-library/react": "^14.0.0",
+    "@testing-library/user-event": "^14.0.0",
+    "@types/react-dom": "*"
+  },
+  "browserslist": {
+    "production": [
+      ">0.2%",
+      "not dead",
+      "not op_mini all"
+    ],
+    "development": [
+      "last 1 chrome version",
+      "last 1 firefox version",
+      "last 1 safari version"
+    ]
+  },
+  "files": [
+    "dist"
+  ]
+}

workspaces/npm/packages/app-next/src/App.test.tsx

@@ -0,0 +1,44 @@
+/*
+ * Copyright 2025 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 { renderWithEffects } from '@backstage/test-utils';
+
+// Rarely, and only in windows CI, do these tests take slightly more than the
+// default five seconds
+jest.setTimeout(15_000);
+
+describe('App', () => {
+  it('should render', async () => {
+    process.env = {
+      NODE_ENV: 'test',
+      APP_CONFIG: [
+        {
+          data: {
+            app: {
+              title: 'Test',
+              support: { url: 'http://localhost:7007/support' },
+            },
+            backend: { baseUrl: 'http://localhost:7007' },
+          },
+          context: 'test',
+        },
+      ] as any,
+    };
+
+    const { default: app } = await import('./App');
+    const rendered = await renderWithEffects(app);
+    expect(rendered.baseElement).toBeInTheDocument();
+  });
+});

workspaces/npm/packages/app-next/src/App.tsx

@@ -0,0 +1,50 @@
+/*
+ * Copyright 2025 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 React from 'react';
+import { Navigate } from 'react-router';
+import { createApp } from '@backstage/frontend-defaults';
+import {
+  createFrontendModule,
+  PageBlueprint,
+} from '@backstage/frontend-plugin-api';
+import catalogPlugin from '@backstage/plugin-catalog/alpha';
+import catalogImportPlugin from '@backstage/plugin-catalog-import/alpha';
+import userSettingsPlugin from '@backstage/plugin-user-settings/alpha';
+
+import npmPlugin from '@backstage-community/plugin-npm/alpha';
+
+const homePageExtension = PageBlueprint.make({
+  name: 'homePage',
+  params: {
+    defaultPath: '/',
+    loader: () => Promise.resolve(<Navigate to="catalog" />),
+  },
+});
+
+export const app = createApp({
+  features: [
+    catalogPlugin,
+    catalogImportPlugin,
+    userSettingsPlugin,
+    npmPlugin,
+    createFrontendModule({
+      pluginId: 'app',
+      extensions: [homePageExtension],
+    }),
+  ],
+});
+
+export default app.createRoot();

workspaces/npm/packages/app-next/src/index.tsx

@@ -0,0 +1,20 @@
+/*
+ * Copyright 2025 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 '@backstage/cli/asset-types';
+import ReactDOM from 'react-dom';
+import app from './App';
+
+ReactDOM.render(app, document.getElementById('root'));

workspaces/npm/packages/app-next/src/setupTests.ts

@@ -0,0 +1,16 @@
+/*
+ * Copyright 2025 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 '@testing-library/jest-dom';

workspaces/npm/packages/app/package.json

@@ -1,6 +1,6 @@
 {
   "name": "app",
-  "version": "0.0.3",
+  "version": "0.0.0",
   "private": true,
   "bundled": true,
   "repository": {

workspaces/npm/plugins/npm/README.md

@@ -52,7 +52,7 @@ metadata:
 
 ## For administrators
 
-### Install on Backstage
+### Install frontend and manual integrate into catalog
 
 1. Install the frontend plugin:
 
@@ -103,6 +103,34 @@ metadata:
    </EntityLayout.Route>
    ```
 
+### Use new frontend system
+
+1. Install the frontend plugin:
+
+   ```sh
+   yarn workspace app add @backstage-community/plugin-npm
+   ```
+
+2. Enable the plugin in your `packages/app(-next)/src/App.tsx`:
+
+   After all other imports:
+
+   ```tsx
+   import npmPlugin from '@backstage-community/plugin-npm/alpha';
+   ```
+
+   ```tsx
+   export const app = createApp({
+     features: [
+       catalogPlugin,
+       catalogImportPlugin,
+       userSettingsPlugin,
+       npmPlugin,
+       // ...
+     ],
+   });
+   ```
+
 ### Test catalog entities
 
 For testing purpose you can import this catalog entities:

workspaces/npm/plugins/npm/package.json

@@ -6,9 +6,7 @@
   "types": "src/index.ts",
   "license": "Apache-2.0",
   "publishConfig": {
-    "access": "public",
-    "main": "dist/index.esm.js",
-    "types": "dist/index.d.ts"
+    "access": "public"
   },
   "backstage": {
     "role": "frontend-plugin",
@@ -19,6 +17,21 @@
       "@backstage-community/plugin-npm"
     ]
   },
+  "exports": {
+    ".": "./src/index.ts",
+    "./alpha": "./src/alpha.tsx",
+    "./package.json": "./package.json"
+  },
+  "typesVersions": {
+    "*": {
+      "alpha": [
+        "src/alpha.tsx"
+      ],
+      "package.json": [
+        "package.json"
+      ]
+    }
+  },
   "sideEffects": false,
   "scripts": {
     "start": "backstage-cli package start",

workspaces/npm/plugins/npm/report-alpha.api.md

@@ -0,0 +1,22 @@
+## API Report File for "@backstage-community/plugin-npm"
+
+> Do not edit this file. It is a report generated by [API Extractor](https://api-extractor.com/).
+
+```ts
+import { FrontendPlugin } from '@backstage/frontend-plugin-api';
+
+// @alpha
+const _default: FrontendPlugin<{}, {}, {}>;
+export default _default;
+
+// @alpha
+export const entityNpmInfoCard: any;
+
+// @alpha
+export const entityNpmReleaseOverviewCard: any;
+
+// @alpha
+export const entityNpmReleaseTableCard: any;
+
+// (No @packageDocumentation comment for this package)
+```