core-api: add plugin instance collection utility

Co-authored-by: blam <ben@blam.sh>

packages/core-api/src/plugin/collection.test.tsx

@@ -0,0 +1,85 @@
+/*
+ * Copyright 2020 Spotify AB
+ *
+ * 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, { PropsWithChildren } from 'react';
+import { createRouteRef } from '../routing';
+import { createPlugin } from '../plugin';
+import {
+  createRoutableExtension,
+  createComponentExtension,
+} from '../lib/extensions';
+import { MemoryRouter, Routes, Route } from 'react-router-dom';
+import { collectPlugins } from './collection';
+
+const mockConfig = () => ({ path: '/foo', title: 'Foo' });
+const MockComponent = ({ children }: PropsWithChildren<{}>) => <>{children}</>;
+
+const pluginA = createPlugin({ id: 'my-plugin-a' });
+const pluginB = createPlugin({ id: 'my-plugin-b' });
+const pluginC = createPlugin({ id: 'my-plugin-c' });
+
+const ref1 = createRouteRef(mockConfig());
+const ref2 = createRouteRef(mockConfig());
+
+const Extension1 = pluginA.provide(
+  createRoutableExtension({ component: MockComponent, mountPoint: ref1 }),
+);
+const Extension2 = pluginB.provide(
+  createRoutableExtension({ component: MockComponent, mountPoint: ref2 }),
+);
+const Extension3 = pluginA.provide(
+  createComponentExtension({ component: MockComponent }),
+);
+const Extension4 = pluginB.provide(
+  createComponentExtension({ component: MockComponent }),
+);
+const Extension5 = pluginC.provide(
+  createComponentExtension({ component: MockComponent }),
+);
+
+describe('collection', () => {
+  it('should collect the plugins', () => {
+    const root = (
+      <MemoryRouter>
+        <Routes>
+          <Extension1 path="/foo">
+            <div>
+              <Extension2 path="/bar/:id">
+                <div>
+                  <div />
+                  {[<Extension4 key={0} />]}
+                  Some text here shouldn't be a problem
+                  <div />
+                  {null}
+                  <div />
+                  <Extension3 />
+                </div>
+              </Extension2>
+              {false}
+              {true}
+              {0}
+            </div>
+          </Extension1>
+          <div>
+            <Route path="/divsoup" element={<Extension5 />} />
+          </div>
+        </Routes>
+      </MemoryRouter>
+    );
+
+    expect(collectPlugins(root)).toEqual(new Set([pluginA, pluginB, pluginC]));
+  });
+});

packages/core-api/src/plugin/collection.ts

@@ -0,0 +1,72 @@
+/*
+ * Copyright 2020 Spotify AB
+ *
+ * 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.
+ */
+/*
+ * Copyright 2020 Spotify AB
+ *
+ * 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, { isValidElement, ReactNode } from 'react';
+import { BackstagePlugin } from './types';
+import { getComponentData } from '../lib/componentData';
+
+export const collectPlugins = (tree: ReactNode) => {
+  const plugins = new Set<BackstagePlugin>();
+
+  const nodes = [tree];
+
+  while (nodes.length !== 0) {
+    const node = nodes.shift();
+    if (!isIterableElement(node)) {
+      continue;
+    }
+
+    React.Children.forEach(node, child => {
+      if (!isIterableElement(child)) {
+        return;
+      }
+
+      const { element, children } = child.props as {
+        element?: ReactNode;
+        children?: ReactNode;
+      };
+      const plugin = getComponentData<BackstagePlugin>(child, 'core.plugin');
+      if (plugin) {
+        plugins.add(plugin);
+      }
+      if (isIterableElement(element)) {
+        nodes.push(element);
+      }
+      nodes.push(children);
+    });
+  }
+
+  return plugins;
+};
+
+function isIterableElement(node: ReactNode): node is JSX.Element {
+  return isValidElement(node) || Array.isArray(node);
+}