app-next: complete package discovery example

Co-authored-by: Philipp Hugenroth <philipph@spotify.com>
Co-authored-by: Johan Haals <johan.haals@gmail.com>
Signed-off-by: Patrik Oldsberg <poldsberg@gmail.com>

packages/app-next-example-plugin/package.json

@@ -1,5 +1,5 @@
 {
-  "name": "@backstage/app-next-example-plugin",
+  "name": "app-next-example-plugin",
   "description": "Backstage internal example plugin",
   "version": "0.0.0",
   "publishConfig": {
@@ -33,8 +33,8 @@
     "clean": "backstage-cli package clean"
   },
   "dependencies": {
-    "@backstage/frontend-plugin-api": "workspace:^",
     "@backstage/core-components": "workspace:^",
+    "@backstage/frontend-plugin-api": "workspace:^",
     "@material-ui/icons": "^4.9.1"
   },
   "peerDependencies": {

packages/app-next-example-plugin/src/Component.tsx

@@ -18,6 +18,6 @@ import React from 'react';
 
 export const Component = () => (
   <div>
-    <h1>Winning</h1>
+    <h1>SHIP IT!</h1>
   </div>
 );

packages/app-next-example-plugin/src/index.ts

@@ -0,0 +1,27 @@
+/*
+ * Copyright 2023 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.
+ */
+
+export { examplePlugin } from './plugin';
+// TODO: This should be an extension created & exported in the `plugin.tsx`
+// YEAHHH most likely but there's no api(output) for it yet.
+export { ExampleSidebarItem } from './ExampleSidebarItem';
+
+export const a1 = null;
+export const a2 = false;
+export const a3 = true;
+export const a4 = Symbol('b');
+export const a5 = 3;
+export const a6 = [];

packages/app-next-example-plugin/src/plugin.tsx

@@ -14,16 +14,16 @@
  * limitations under the License.
  */
 
+import React from 'react';
 import {
   createPageExtension,
   createPlugin,
 } from '@backstage/frontend-plugin-api';
-import { Component } from './Component';
 
 export const ExamplePage = createPageExtension({
   id: 'example.page',
   defaultPath: '/example',
-  component: () => () => Component,
+  component: () => import('./Component').then(m => <m.Component />),
 });
 
 export const examplePlugin = createPlugin({

packages/app-next/app-config.yaml

@@ -1,5 +1,7 @@
 app:
-  packages: 'all' # ✨
+  experimental:
+    # packages: 'all' # ✨
+    packages: 'all'
 
 
   # scmAuthExtension: >-

packages/app-next/package.json

@@ -86,6 +86,7 @@
     "@roadiehq/backstage-plugin-github-insights": "^2.0.5",
     "@roadiehq/backstage-plugin-github-pull-requests": "^2.2.7",
     "@roadiehq/backstage-plugin-travis-ci": "^2.0.5",
+    "app-next-example-plugin": "workspace:^",
     "history": "^5.0.0",
     "lodash": "^4.17.21",
     "prop-types": "^15.7.2",