tessl/npm-backstage--dev-utils

Development utilities for creating and testing Backstage plugins with React components and dev app framework

—

Pending

Quality

Pending

Does it follow best practices?

Impact

Pending

No eval scenarios have been run

Securityby

Pending

The risk profile of this skill

Overview

Eval results

Files

Backstage Dev Utils

Name: tessl/npm-backstage--dev-utils
Author: tessl

@backstage/dev-utils provides development utilities specifically designed for creating and testing Backstage plugins. It offers React components for common UI patterns and a development app framework that helps developers create standalone development applications to test their plugins in isolation.

Package Information

Package Name: @backstage/dev-utils
Package Type: npm
Language: TypeScript
Installation: npm install --save-dev @backstage/dev-utils

Core Imports

import { 
  EntityGridItem, 
  SidebarSignOutButton, 
  SidebarLanguageSwitcher,
  createDevApp,
  isReactRouterBeta 
} from "@backstage/dev-utils";

For CommonJS:

const { 
  EntityGridItem, 
  SidebarSignOutButton, 
  SidebarLanguageSwitcher,
  createDevApp,
  isReactRouterBeta 
} = require("@backstage/dev-utils");

Basic Usage

import { createDevApp } from "@backstage/dev-utils";
import { myPlugin } from "./my-plugin";

// Create a development app for testing plugins
const DevApp = createDevApp()
  .registerPlugin(myPlugin)
  .addPage({
    element: <MyPluginPage />,
    title: "My Plugin",
    path: "/my-plugin"
  })
  .build();

// Render the dev app
ReactDOM.render(<DevApp />, document.getElementById('root'));

Architecture

Backstage Dev Utils is organized around two main functional areas:

React Components: Pre-built UI components (EntityGridItem, SidebarSignOutButton, SidebarLanguageSwitcher) for common Backstage plugin patterns
Development Framework: createDevApp and DevAppBuilder for creating standalone development environments to test plugins

The components integrate seamlessly with Backstage's core systems including the catalog, theming, authentication, and internationalization.

Capabilities

React Components

Pre-built React components for common Backstage plugin UI patterns, including entity display, authentication controls, and internationalization features.

const EntityGridItem: (props: EntityGridItemProps) => JSX.Element;
const SidebarSignOutButton: (props: SidebarSignOutButtonProps) => JSX.Element;
const SidebarLanguageSwitcher: () => JSX.Element;

interface EntityGridItemProps extends Omit<GridProps, 'item' | 'container'> {
  entity: Entity;
}

interface SidebarSignOutButtonProps {
  icon?: IconComponent;
  text?: string;
}

React Components

Development App Framework

Complete framework for building standalone development applications to test Backstage plugins in isolation, with built-in authentication, theming, and routing.

function createDevApp(): DevAppBuilder;

class DevAppBuilder {
  registerPlugin(...plugins: BackstagePlugin[]): DevAppBuilder;
  addPage(opts: DevAppPageOptions): DevAppBuilder;
  addThemes(themes: AppTheme[]): DevAppBuilder;
  addSignInProvider(provider: SignInProviderConfig): DevAppBuilder;
  build(): ComponentType<PropsWithChildren<{}>>;
  render(): void;
}

interface DevAppPageOptions {
  path?: string;
  element: JSX.Element;
  children?: JSX.Element;
  title?: string;
  icon?: IconComponent;
}

Development App Framework

Types

import { Entity } from '@backstage/catalog-model';
import { GridProps } from '@material-ui/core/Grid';
import { 
  IconComponent, 
  BackstagePlugin, 
  AppTheme,
  SignInProviderConfig 
} from '@backstage/core-plugin-api';
import { TranslationResource } from '@backstage/core-plugin-api/alpha';
import { ComponentType, PropsWithChildren, ReactNode } from 'react';

// Entity from Backstage catalog system
type Entity = import('@backstage/catalog-model').Entity;

// Material-UI Grid component props
type GridProps = import('@material-ui/core/Grid').GridProps;

// Backstage icon component type
type IconComponent = import('@backstage/core-plugin-api').IconComponent;

// Backstage plugin definition
type BackstagePlugin = import('@backstage/core-plugin-api').BackstagePlugin;

// Application theme configuration
type AppTheme = import('@backstage/core-plugin-api').AppTheme;

// Sign-in provider configuration
type SignInProviderConfig = import('@backstage/core-plugin-api').SignInProviderConfig;

// Translation resource for internationalization
type TranslationResource = import('@backstage/core-plugin-api/alpha').TranslationResource;