search: migrate to new composability API

.changeset/cyan-lies-flow.md

@@ -0,0 +1,5 @@
+---
+'@backstage/plugin-search': minor
+---
+
+Migrated to new composability API, exporting the plugin instance as `searchPlugin`, and page as `SearchPage`. Due to the old router component also being called `SearchPage`, this is a breaking change. The old page component is now exported as `Router`, which can be used to maintain the old behavior.

plugins/search/dev/index.tsx

@@ -14,6 +14,6 @@
  * limitations under the License.
  */
 import { createDevApp } from '@backstage/dev-utils';
-import { plugin } from '../src/plugin';
+import { searchPlugin } from '../src/plugin';
 
-createDevApp().registerPlugin(plugin).render();
+createDevApp().registerPlugin(searchPlugin).render();

plugins/search/src/index.ts

@@ -13,5 +13,13 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-export { plugin } from './plugin';
-export * from './components';
+export { searchPlugin, searchPlugin as plugin, SearchPage } from './plugin';
+export {
+  Filters,
+  FiltersButton,
+  SearchBar,
+  SearchPage as Router,
+  SearchResult,
+  SidebarSearch,
+} from './components';
+export type { FiltersState } from './components';

plugins/search/src/plugin.test.ts

@@ -13,10 +13,10 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-import { plugin } from './plugin';
+import { searchPlugin } from './plugin';
 
 describe('search', () => {
   it('should export plugin', () => {
-    expect(plugin).toBeDefined();
+    expect(searchPlugin).toBeDefined();
   });
 });

plugins/search/src/plugin.ts

@@ -13,17 +13,31 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-import { createPlugin, createRouteRef } from '@backstage/core';
-import { SearchPage } from './components/SearchPage';
+import {
+  createPlugin,
+  createRouteRef,
+  createRoutableExtension,
+} from '@backstage/core';
+import { SearchPage as SearchPageComponent } from './components/SearchPage';
 
 export const rootRouteRef = createRouteRef({
   path: '/search',
   title: 'search',
 });
 
-export const plugin = createPlugin({
+export const searchPlugin = createPlugin({
   id: 'search',
   register({ router }) {
-    router.addRoute(rootRouteRef, SearchPage);
+    router.addRoute(rootRouteRef, SearchPageComponent);
+  },
+  routes: {
+    root: rootRouteRef,
   },
 });
+
+export const SearchPage = searchPlugin.provide(
+  createRoutableExtension({
+    component: () => import('./components/SearchPage').then(m => m.SearchPage),
+    mountPoint: rootRouteRef,
+  }),
+);