Split hooks into separate file

Signed-off-by: Emma Indal <emma.indahl@gmail.com>
Co-authored-by: Camila Belo <camilaibs@gmail.com>

plugins/techdocs-addons/package.json

@@ -38,7 +38,10 @@
     "@types/react": "^16.13.1 || ^17.0.0",
     "react": "^16.13.1 || ^17.0.0"
   },
-  "devDependencies": {},
+  "devDependencies": {
+    "@testing-library/react-hooks": "^7.0.2",
+    "@backstage/test-utils": "^1.0.0"
+  },
   "files": [
     "dist"
   ]

plugins/techdocs-addons/src/context.test.tsx

@@ -24,8 +24,6 @@ import {
   useEntityMetadata,
   useTechDocsMetadata,
   useTechDocsReaderPage,
-  useShadowRoot,
-  useShadowRootElements,
   TechDocsEntityProvider,
   TechDocsMetadataProvider,
   TechDocsReaderPageProvider,

plugins/techdocs-addons/src/context.tsx

@@ -157,38 +157,3 @@ export const TechDocsReaderPageProvider = ({
     </TechDocsReaderPageContext.Provider>
   );
 };
-
-/**
- * Hook for use within TechDocs addons that provides access to the underlying
- * shadow root of the current page, allowing the DOM within to be mutated.
- * @public
- */
-export const useShadowRoot = () => {
-  const { shadowRoot } = useTechDocsReaderPage();
-  return shadowRoot;
-};
-
-/**
- * Convenience hook for use within TechDocs addons that provides access to
- * elements that match a given selector within the shadow root.
- *
- * todo(backstage/techdocs-core): Consider extending `selectors` from string[]
- * to some kind of typed object array, so users have more control over the
- * shape of the result. e.g. a flag to indicate querySelector vs.
- * querySelectorAll.
- *
- * @public
- */
-export const useShadowRootElements = <
-  TReturnedElement extends HTMLElement = HTMLElement,
->(
-  selectors: string[],
-): TReturnedElement[] => {
-  const shadowRoot = useShadowRoot();
-  if (!shadowRoot) return [];
-  return selectors
-    .map(selector => shadowRoot?.querySelectorAll<TReturnedElement>(selector))
-    .filter(nodeList => nodeList.length)
-    .map(nodeList => Array.from(nodeList))
-    .flat();
-};

plugins/techdocs-addons/src/hooks.ts

@@ -0,0 +1,51 @@
+/*
+ * Copyright 2022 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.
+ */
+import { useTechDocsReaderPage } from './context';
+
+/**
+ * Hook for use within TechDocs addons that provides access to the underlying
+ * shadow root of the current page, allowing the DOM within to be mutated.
+ * @public
+ */
+export const useShadowRoot = () => {
+  const { shadowRoot } = useTechDocsReaderPage();
+  return shadowRoot;
+};
+
+/**
+ * Convenience hook for use within TechDocs addons that provides access to
+ * elements that match a given selector within the shadow root.
+ *
+ * todo(backstage/techdocs-core): Consider extending `selectors` from string[]
+ * to some kind of typed object array, so users have more control over the
+ * shape of the result. e.g. a flag to indicate querySelector vs.
+ * querySelectorAll.
+ *
+ * @public
+ */
+export const useShadowRootElements = <
+  TReturnedElement extends HTMLElement = HTMLElement,
+>(
+  selectors: string[],
+): TReturnedElement[] => {
+  const shadowRoot = useShadowRoot();
+  if (!shadowRoot) return [];
+  return selectors
+    .map(selector => shadowRoot?.querySelectorAll<TReturnedElement>(selector))
+    .filter(nodeList => nodeList.length)
+    .map(nodeList => Array.from(nodeList))
+    .flat();
+};

plugins/techdocs-addons/src/index.ts

@@ -22,12 +22,8 @@
 
 export { createTechDocsAddon, TechDocsAddons } from './addons';
 export * from './components';
-export {
-  useEntityMetadata,
-  useTechDocsMetadata,
-  useShadowRoot,
-  useShadowRootElements,
-} from './context';
+export { useEntityMetadata, useTechDocsMetadata } from './context';
+export { useShadowRoot, useShadowRootElements } from './hooks';
 export type {
   TechDocsAddonAsyncMetadata,
   TechDocsAddonLocations,