diff --git a/plugins/techdocs-addons/package.json b/plugins/techdocs-addons/package.json index 3eb29ea77a..4769ebd189 100644 --- a/plugins/techdocs-addons/package.json +++ b/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" ] diff --git a/plugins/techdocs-addons/src/context.test.tsx b/plugins/techdocs-addons/src/context.test.tsx index 5455264f04..ea0486604f 100644 --- a/plugins/techdocs-addons/src/context.test.tsx +++ b/plugins/techdocs-addons/src/context.test.tsx @@ -24,8 +24,6 @@ import { useEntityMetadata, useTechDocsMetadata, useTechDocsReaderPage, - useShadowRoot, - useShadowRootElements, TechDocsEntityProvider, TechDocsMetadataProvider, TechDocsReaderPageProvider, diff --git a/plugins/techdocs-addons/src/context.tsx b/plugins/techdocs-addons/src/context.tsx index 7576bdc163..9aa057117d 100644 --- a/plugins/techdocs-addons/src/context.tsx +++ b/plugins/techdocs-addons/src/context.tsx @@ -157,38 +157,3 @@ export const TechDocsReaderPageProvider = ({ ); }; - -/** - * 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(selector)) - .filter(nodeList => nodeList.length) - .map(nodeList => Array.from(nodeList)) - .flat(); -}; diff --git a/plugins/techdocs-addons/src/hooks.ts b/plugins/techdocs-addons/src/hooks.ts new file mode 100644 index 0000000000..7bc6152006 --- /dev/null +++ b/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(selector)) + .filter(nodeList => nodeList.length) + .map(nodeList => Array.from(nodeList)) + .flat(); +}; diff --git a/plugins/techdocs-addons/src/index.ts b/plugins/techdocs-addons/src/index.ts index 5114a2b2e6..0993eaba97 100644 --- a/plugins/techdocs-addons/src/index.ts +++ b/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,