chore: refactor a little bit and use some new features to remove todos

Signed-off-by: blam <ben@blam.sh>

packages/frontend-plugin-api/src/extensions/PageBlueprint.test.tsx

@@ -94,7 +94,7 @@ describe('PageBlueprint', () => {
 
     const tester = createExtensionTester(myPage);
 
-    // TODO(blam): test for the routePath output doesn't work.
+    // TODO(blam): test for the routePath output doesn't work, due to the the way the test harness works
     // expect(tester.data(coreExtensionData.routePath)).toBe('/test');
 
     expect(tester.data(coreExtensionData.routeRef)).toBe(mockRouteRef);
@@ -111,7 +111,6 @@ describe('PageBlueprint', () => {
         loader: async ({ inputs }) => {
           return (
             <div data-testid="test">
-              {/* todo(blam): need to fix the typescript here, as inputs is not the right type */}
               {inputs.cards.map(c => c.get(coreExtensionData.reactElement))}
             </div>
           );
@@ -119,6 +118,7 @@ describe('PageBlueprint', () => {
         defaultPath: '/test',
         routeRef: mockRouteRef,
       },
+      /* todo(blam): need to fix the typescript here, as inputs is not the right type, wont let me merge without specifying parent opts */
       inputs: {
         cards: createExtensionInput([coreExtensionData.reactElement], {
           optional: false,

packages/frontend-plugin-api/src/extensions/PageBlueprint.tsx

@@ -31,7 +31,7 @@ export const PageBlueprint = createExtensionBlueprint({
       path: z => z.string().optional(),
     },
   },
-  factory(
+  *factory(
     {
       defaultPath,
       loader,
@@ -50,22 +50,15 @@ export const PageBlueprint = createExtensionBlueprint({
       loader({ config, inputs }).then(element => ({ default: () => element })),
     );
 
-    // TODO(blam): this is a little awkward for optional returns.
-    // I wonder if we should be using generators or yield instead
-    // for a better API here.
-    const outputs = [
-      coreExtensionData.routePath(config.path ?? defaultPath!),
-      coreExtensionData.reactElement(
-        <ExtensionBoundary node={node}>
-          <ExtensionComponent />
-        </ExtensionBoundary>,
-      ),
-    ];
+    yield coreExtensionData.routePath(config.path ?? defaultPath!);
+    yield coreExtensionData.reactElement(
+      <ExtensionBoundary node={node}>
+        <ExtensionComponent />
+      </ExtensionBoundary>,
+    );
 
     if (routeRef) {
-      return [...outputs, coreExtensionData.routeRef(routeRef)];
+      yield coreExtensionData.routeRef(routeRef);
     }
-
-    return outputs;
   },
 });

packages/frontend-plugin-api/src/extensions/ThemeBlueprint.test.ts

@@ -27,11 +27,7 @@ describe('ThemeBlueprint', () => {
   } as AppTheme;
 
   it('should create an extension with sensible defaults', () => {
-    expect(
-      // todo(blam): we can't inject theme.id as the name here like the old extension creator.
-      // Wonder if theres a better solution.
-      ThemeBlueprint.make({ name: 'blob', params: { theme } }),
-    ).toMatchInlineSnapshot(`
+    expect(ThemeBlueprint.make({ params: { theme } })).toMatchInlineSnapshot(`
       {
         "$$type": "@backstage/ExtensionDefinition",
         "attachTo": {
@@ -43,7 +39,7 @@ describe('ThemeBlueprint', () => {
         "factory": [Function],
         "inputs": {},
         "kind": "theme",
-        "name": "blob",
+        "name": "light",
         "namespace": "app",
         "output": [
           [Function],
@@ -55,7 +51,7 @@ describe('ThemeBlueprint', () => {
   });
 
   it('should return the theme as an themeDataRef', async () => {
-    const extension = ThemeBlueprint.make({ name: 'blob', params: { theme } });
+    const extension = ThemeBlueprint.make({ params: { theme } });
 
     expect(
       createExtensionTester(extension).data(ThemeBlueprint.dataRefs.theme),

packages/frontend-plugin-api/src/extensions/ThemeBlueprint.ts

@@ -21,6 +21,7 @@ import { createThemeExtension } from './createThemeExtension';
 export const ThemeBlueprint = createExtensionBlueprint({
   kind: 'theme',
   namespace: 'app',
+  name: ({ theme }) => theme.id,
   attachTo: { id: 'app', input: 'themes' },
   output: [createThemeExtension.themeDataRef],
   dataRefs: {

packages/frontend-plugin-api/src/extensions/TranslationBlueprint.test.ts

@@ -22,7 +22,7 @@ import { TranslationBlueprint } from './TranslationBlueprint';
 
 describe('TranslationBlueprint', () => {
   const translationRef = createTranslationRef({
-    id: 'test',
+    id: 'translationRefId',
     messages: {
       test: 'test',
     },
@@ -38,10 +38,7 @@ describe('TranslationBlueprint', () => {
   it('should return an extension instance with sane defaults', () => {
     expect(
       TranslationBlueprint.make({
-        // todo(blam): we can't set the namespace dynamically based of the ResourceType.
-        // work out if we should wrap this up or another solution.
-        namespace: messages.id,
-        name: 'test',
+        name: 'blob',
         params: {
           resource: messages,
         },
@@ -58,8 +55,8 @@ describe('TranslationBlueprint', () => {
         "factory": [Function],
         "inputs": {},
         "kind": "translation",
-        "name": "test",
-        "namespace": "test",
+        "name": "blob",
+        "namespace": "translationRefId",
         "output": [
           [Function],
         ],
@@ -71,6 +68,7 @@ describe('TranslationBlueprint', () => {
 
   it('should output a translation data ref', () => {
     const extension = TranslationBlueprint.make({
+      name: 'blob',
       params: {
         resource: messages,
       },

packages/frontend-plugin-api/src/extensions/TranslationBlueprint.ts

@@ -20,6 +20,7 @@ import { TranslationMessages, TranslationResource } from '../translation';
 
 export const TranslationBlueprint = createExtensionBlueprint({
   kind: 'translation',
+  namespace: ({ resource }) => resource.id,
   attachTo: { id: 'app', input: 'translations' },
   output: [createTranslationExtension.translationDataRef],
   dataRefs: {