@backstage/plugin-techdocs-react 1.2.4 → 1.2.5-next.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (8) hide show
  1. package/CHANGELOG.md +22 -0
  2. package/dist/addons.esm.js +1 -2
  3. package/dist/addons.esm.js.map +1 -1
  4. package/dist/component.esm.js +3 -4
  5. package/dist/component.esm.js.map +1 -1
  6. package/dist/hooks.esm.js +1 -1
  7. package/dist/hooks.esm.js.map +1 -1
  8. package/package.json +6 -6
package/CHANGELOG.md CHANGED
@@ -1,5 +1,27 @@
1
1
  # @backstage/plugin-techdocs-react
2
2
 
3
+ ## 1.2.5-next.1
4
+
5
+ ### Patch Changes
6
+
7
+ - Updated dependencies
8
+ - @backstage/core-components@0.14.8-next.1
9
+ - @backstage/core-plugin-api@1.9.3-next.0
10
+ - @backstage/catalog-model@1.5.0
11
+ - @backstage/config@1.2.0
12
+ - @backstage/version-bridge@1.0.8
13
+
14
+ ## 1.2.5-next.0
15
+
16
+ ### Patch Changes
17
+
18
+ - Updated dependencies
19
+ - @backstage/core-components@0.14.8-next.0
20
+ - @backstage/catalog-model@1.5.0
21
+ - @backstage/config@1.2.0
22
+ - @backstage/core-plugin-api@1.9.2
23
+ - @backstage/version-bridge@1.0.8
24
+
3
25
  ## 1.2.4
4
26
 
5
27
  ### Patch Changes
package/dist/addons.esm.js CHANGED
@@ -45,11 +45,10 @@ const useTechDocsAddons = () => {
45
45
  const options = useElementFilter(node, getAllTechDocsAddonsData);
46
46
  const findAddonByData = useCallback(
47
47
  (data) => {
48
- var _a;
49
48
  if (!collection || !data)
50
49
  return null;
51
50
  const nameKey = getDataKeyByName(data.name);
52
- return (_a = getTechDocsAddonByName(collection, nameKey)) != null ? _a : null;
51
+ return getTechDocsAddonByName(collection, nameKey) ?? null;
53
52
  },
54
53
  [collection]
55
54
  );
package/dist/addons.esm.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"addons.esm.js","sources":["../src/addons.tsx"],"sourcesContent":["/*\n * Copyright 2022 The Backstage Authors\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n\nimport React, { useCallback } from 'react';\nimport { useOutlet } from 'react-router-dom';\n\nimport {\n attachComponentData,\n createReactExtension,\n ElementCollection,\n Extension,\n useElementFilter,\n} from '@backstage/core-plugin-api';\n\nimport { TechDocsAddonLocations, TechDocsAddonOptions } from './types';\n\n/**\n * Key for each addon.\n * @public\n */\nexport const TECHDOCS_ADDONS_KEY = 'techdocs.addons.addon.v1';\n\n/**\n * Marks the `<TechDocsAddons>` registry component.\n * @public\n */\nexport const TECHDOCS_ADDONS_WRAPPER_KEY = 'techdocs.addons.wrapper.v1';\n\n/**\n * TechDocs Addon registry.\n * @public\n */\nexport const TechDocsAddons: React.ComponentType<\n React.PropsWithChildren<{}>\n> = () => null;\n\nattachComponentData(TechDocsAddons, TECHDOCS_ADDONS_WRAPPER_KEY, true);\n\nconst getDataKeyByName = (name: string) => {\n return `${TECHDOCS_ADDONS_KEY}.${name.toLocaleLowerCase('en-US')}`;\n};\n\n/**\n * Create a TechDocs addon overload signature without props.\n * @public\n */\nexport function createTechDocsAddonExtension(\n options: TechDocsAddonOptions,\n): Extension<() => JSX.Element | null>;\n\n/**\n * Create a TechDocs addon overload signature with props.\n * @public\n */\nexport function createTechDocsAddonExtension<TComponentProps>(\n options: TechDocsAddonOptions<TComponentProps>,\n): Extension<(props: TComponentProps) => JSX.Element | null>;\n\n/**\n * Create a TechDocs addon implementation.\n * @public\n */\nexport function createTechDocsAddonExtension<\n TComponentProps extends React.PropsWithChildren<{}>,\n>(\n options: TechDocsAddonOptions<TComponentProps>,\n): Extension<(props: TComponentProps) => JSX.Element | null> {\n const { name, component: TechDocsAddon } = options;\n return createReactExtension({\n name,\n component: {\n sync: (props: TComponentProps) => <TechDocsAddon {...props} />,\n },\n data: {\n [TECHDOCS_ADDONS_KEY]: options,\n [getDataKeyByName(name)]: true,\n },\n });\n}\n\nconst getTechDocsAddonByName = (\n collection: ElementCollection,\n key: string,\n): JSX.Element | undefined => {\n return collection.selectByComponentData({ key }).getElements()[0];\n};\n\nconst getAllTechDocsAddons = (collection: ElementCollection) => {\n return collection\n .selectByComponentData({\n key: TECHDOCS_ADDONS_WRAPPER_KEY,\n })\n .selectByComponentData({\n key: TECHDOCS_ADDONS_KEY,\n });\n};\n\nconst getAllTechDocsAddonsData = (collection: ElementCollection) => {\n return collection\n .selectByComponentData({\n key: TECHDOCS_ADDONS_WRAPPER_KEY,\n })\n .findComponentData<TechDocsAddonOptions>({\n key: TECHDOCS_ADDONS_KEY,\n });\n};\n\n/**\n * hook to use addons in components\n * @public\n */\nexport const useTechDocsAddons = () => {\n const node = useOutlet();\n const collection = useElementFilter(node, getAllTechDocsAddons);\n const options = useElementFilter(node, getAllTechDocsAddonsData);\n\n const findAddonByData = useCallback(\n (data: TechDocsAddonOptions | undefined) => {\n if (!collection || !data) return null;\n const nameKey = getDataKeyByName(data.name);\n return getTechDocsAddonByName(collection, nameKey) ?? null;\n },\n [collection],\n );\n\n const renderComponentByName = useCallback(\n (name: string) => {\n const data = options.find(option => option.name === name);\n return data ? findAddonByData(data) : null;\n },\n [options, findAddonByData],\n );\n\n const renderComponentsByLocation = useCallback(\n (location: keyof typeof TechDocsAddonLocations) => {\n const data = options.filter(option => option.location === location);\n return data.length ? data.map(findAddonByData) : null;\n },\n [options, findAddonByData],\n );\n\n return { renderComponentByName, renderComponentsByLocation };\n};\n"],"names":[],"mappings":"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"}
1
+ {"version":3,"file":"addons.esm.js","sources":["../src/addons.tsx"],"sourcesContent":["/*\n * Copyright 2022 The Backstage Authors\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n\nimport React, { useCallback } from 'react';\nimport { useOutlet } from 'react-router-dom';\n\nimport {\n attachComponentData,\n createReactExtension,\n ElementCollection,\n Extension,\n useElementFilter,\n} from '@backstage/core-plugin-api';\n\nimport { TechDocsAddonLocations, TechDocsAddonOptions } from './types';\n\n/**\n * Key for each addon.\n * @public\n */\nexport const TECHDOCS_ADDONS_KEY = 'techdocs.addons.addon.v1';\n\n/**\n * Marks the `<TechDocsAddons>` registry component.\n * @public\n */\nexport const TECHDOCS_ADDONS_WRAPPER_KEY = 'techdocs.addons.wrapper.v1';\n\n/**\n * TechDocs Addon registry.\n * @public\n */\nexport const TechDocsAddons: React.ComponentType<\n React.PropsWithChildren<{}>\n> = () => null;\n\nattachComponentData(TechDocsAddons, TECHDOCS_ADDONS_WRAPPER_KEY, true);\n\nconst getDataKeyByName = (name: string) => {\n return `${TECHDOCS_ADDONS_KEY}.${name.toLocaleLowerCase('en-US')}`;\n};\n\n/**\n * Create a TechDocs addon overload signature without props.\n * @public\n */\nexport function createTechDocsAddonExtension(\n options: TechDocsAddonOptions,\n): Extension<() => JSX.Element | null>;\n\n/**\n * Create a TechDocs addon overload signature with props.\n * @public\n */\nexport function createTechDocsAddonExtension<TComponentProps>(\n options: TechDocsAddonOptions<TComponentProps>,\n): Extension<(props: TComponentProps) => JSX.Element | null>;\n\n/**\n * Create a TechDocs addon implementation.\n * @public\n */\nexport function createTechDocsAddonExtension<\n TComponentProps extends React.PropsWithChildren<{}>,\n>(\n options: TechDocsAddonOptions<TComponentProps>,\n): Extension<(props: TComponentProps) => JSX.Element | null> {\n const { name, component: TechDocsAddon } = options;\n return createReactExtension({\n name,\n component: {\n sync: (props: TComponentProps) => <TechDocsAddon {...props} />,\n },\n data: {\n [TECHDOCS_ADDONS_KEY]: options,\n [getDataKeyByName(name)]: true,\n },\n });\n}\n\nconst getTechDocsAddonByName = (\n collection: ElementCollection,\n key: string,\n): JSX.Element | undefined => {\n return collection.selectByComponentData({ key }).getElements()[0];\n};\n\nconst getAllTechDocsAddons = (collection: ElementCollection) => {\n return collection\n .selectByComponentData({\n key: TECHDOCS_ADDONS_WRAPPER_KEY,\n })\n .selectByComponentData({\n key: TECHDOCS_ADDONS_KEY,\n });\n};\n\nconst getAllTechDocsAddonsData = (collection: ElementCollection) => {\n return collection\n .selectByComponentData({\n key: TECHDOCS_ADDONS_WRAPPER_KEY,\n })\n .findComponentData<TechDocsAddonOptions>({\n key: TECHDOCS_ADDONS_KEY,\n });\n};\n\n/**\n * hook to use addons in components\n * @public\n */\nexport const useTechDocsAddons = () => {\n const node = useOutlet();\n const collection = useElementFilter(node, getAllTechDocsAddons);\n const options = useElementFilter(node, getAllTechDocsAddonsData);\n\n const findAddonByData = useCallback(\n (data: TechDocsAddonOptions | undefined) => {\n if (!collection || !data) return null;\n const nameKey = getDataKeyByName(data.name);\n return getTechDocsAddonByName(collection, nameKey) ?? null;\n },\n [collection],\n );\n\n const renderComponentByName = useCallback(\n (name: string) => {\n const data = options.find(option => option.name === name);\n return data ? findAddonByData(data) : null;\n },\n [options, findAddonByData],\n );\n\n const renderComponentsByLocation = useCallback(\n (location: keyof typeof TechDocsAddonLocations) => {\n const data = options.filter(option => option.location === location);\n return data.length ? data.map(findAddonByData) : null;\n },\n [options, findAddonByData],\n );\n\n return { renderComponentByName, renderComponentsByLocation };\n};\n"],"names":[],"mappings":"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"}
package/dist/component.esm.js CHANGED
@@ -7,7 +7,6 @@ import { Progress } from '@backstage/core-components';
7
7
  const SHADOW_DOM_STYLE_LOAD_EVENT = "TECH_DOCS_SHADOW_DOM_STYLE_LOAD";
8
8
  const useShadowDomStylesEvents = (element) => {
9
9
  useEffect(() => {
10
- var _a;
11
10
  if (!element) {
12
11
  return () => {
13
12
  };
@@ -15,7 +14,7 @@ const useShadowDomStylesEvents = (element) => {
15
14
  const styles = element.querySelectorAll(
16
15
  'head > link[rel="stylesheet"]'
17
16
  );
18
- let count = (_a = styles == null ? void 0 : styles.length) != null ? _a : 0;
17
+ let count = styles?.length ?? 0;
19
18
  const event = new CustomEvent(SHADOW_DOM_STYLE_LOAD_EVENT);
20
19
  if (!count) {
21
20
  element.dispatchEvent(event);
@@ -27,11 +26,11 @@ const useShadowDomStylesEvents = (element) => {
27
26
  element.dispatchEvent(event);
28
27
  }
29
28
  };
30
- styles == null ? void 0 : styles.forEach((style) => {
29
+ styles?.forEach((style) => {
31
30
  style.addEventListener("load", handleLoad);
32
31
  });
33
32
  return () => {
34
- styles == null ? void 0 : styles.forEach((style) => {
33
+ styles?.forEach((style) => {
35
34
  style.removeEventListener("load", handleLoad);
36
35
  });
37
36
  };
package/dist/component.esm.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"component.esm.js","sources":["../src/component.tsx"],"sourcesContent":["/*\n * Copyright 2022 The Backstage Authors\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n\nimport React, {\n PropsWithChildren,\n useState,\n useEffect,\n useCallback,\n} from 'react';\n\nimport { create } from 'jss';\nimport StylesProvider from '@material-ui/styles/StylesProvider';\nimport jssPreset from '@material-ui/styles/jssPreset';\n\nimport { Progress } from '@backstage/core-components';\n\n/**\n * Name for the event dispatched when ShadowRoot styles are loaded.\n * @public\n */\nexport const SHADOW_DOM_STYLE_LOAD_EVENT = 'TECH_DOCS_SHADOW_DOM_STYLE_LOAD';\n\n/**\n * Dispatch style load event after all styles are loaded.\n * @param element - the ShadowRoot tree.\n */\nconst useShadowDomStylesEvents = (element: Element | null) => {\n useEffect(() => {\n if (!element) {\n return () => {};\n }\n\n const styles = element.querySelectorAll<HTMLElement>(\n 'head > link[rel=\"stylesheet\"]',\n );\n\n let count = styles?.length ?? 0;\n const event = new CustomEvent(SHADOW_DOM_STYLE_LOAD_EVENT);\n\n if (!count) {\n element.dispatchEvent(event);\n return () => {};\n }\n\n const handleLoad = () => {\n if (--count === 0) {\n element.dispatchEvent(event);\n }\n };\n\n styles?.forEach(style => {\n style.addEventListener('load', handleLoad);\n });\n\n return () => {\n styles?.forEach(style => {\n style.removeEventListener('load', handleLoad);\n });\n };\n }, [element]);\n};\n\n/**\n * Returns the style's loading state.\n *\n * @example\n * Here's an example that updates the sidebar position only after styles are calculated:\n * ```jsx\n * import {\n * TechDocsShadowDom,\n * useShadowDomStylesLoading,\n * } from '@backstage/plugin-techdocs-react';\n *\n * export const TechDocsReaderPageContent = () => {\n * // ...\n * const dom = useTechDocsReaderDom(entity);\n * const isStyleLoading = useShadowDomStylesLoading(dom);\n *\n * const updateSidebarPosition = useCallback(() => {\n * //...\n * }, [dom]);\n *\n * useEffect(() => {\n * if (!isStyleLoading) {\n * updateSidebarPosition();\n * }\n * }, [isStyleLoading, updateSidebarPosition]);\n *\n * const handleDomAppend = useCallback(\n * (newShadowRoot: ShadowRoot) => {\n * setShadowRoot(newShadowRoot);\n * },\n * [setShadowRoot],\n * );\n *\n * return <TechDocsShadowDom element={dom} onAppend={handleDomAppend} />;\n * };\n * ```\n *\n * @param element - which is the ShadowRoot tree.\n * @returns a boolean value, true if styles are being loaded.\n * @public\n */\nexport const useShadowDomStylesLoading = (element: Element | null) => {\n const [loading, setLoading] = useState(false);\n\n useEffect(() => {\n if (!element) return () => {};\n\n setLoading(true);\n\n const style = (element as HTMLElement).style;\n\n style.setProperty('opacity', '0');\n\n const handleLoad = () => {\n setLoading(false);\n style.setProperty('opacity', '1');\n };\n\n element.addEventListener(SHADOW_DOM_STYLE_LOAD_EVENT, handleLoad);\n\n return () => {\n element.removeEventListener(SHADOW_DOM_STYLE_LOAD_EVENT, handleLoad);\n };\n }, [element]);\n\n return loading;\n};\n\n/**\n * Props for {@link TechDocsShadowDom}.\n *\n * @remarks\n * If you want to use portals to render Material UI components in the Shadow DOM,\n * you must render these portals as children because this component wraps its children in a Material UI StylesProvider\n * to ensure that Material UI styles are applied.\n *\n * @public\n */\nexport type TechDocsShadowDomProps = PropsWithChildren<{\n /**\n * Element tree that is appended to ShadowRoot.\n */\n element: Element;\n /**\n * Callback called when the element tree is appended in ShadowRoot.\n */\n onAppend?: (shadowRoot: ShadowRoot) => void;\n}>;\n\n/**\n * Renders a tree of elements in a Shadow DOM.\n *\n * @remarks\n * Centers the styles loaded event to avoid having multiple locations setting the opacity style in Shadow DOM causing the screen to flash multiple times,\n * so if you want to know when Shadow DOM styles are computed, you can listen for the \"TECH_DOCS_SHADOW_DOM_STYLE_LOAD\" event dispatched by the element tree.\n *\n * @example\n * Here is an example using this component and also listening for styles loaded event:\n *```jsx\n * import {\n * TechDocsShadowDom,\n * SHADOW_DOM_STYLE_LOAD_EVENT,\n * } from '@backstage/plugin-techdocs-react';\n *\n * export const TechDocsReaderPageContent = ({ entity }: TechDocsReaderPageContentProps) => {\n * // ...\n * const dom = useTechDocsReaderDom(entity);\n *\n * useEffect(() => {\n * const updateSidebarPosition = () => {\n * // ...\n * };\n * dom?.addEventListener(SHADOW_DOM_STYLE_LOAD_EVENT, updateSidebarPosition);\n * return () => {\n * dom?.removeEventListener(SHADOW_DOM_STYLE_LOAD_EVENT, updateSidebarPosition);\n * };\n * }, [dom]);\n *\n * const handleDomAppend = useCallback(\n * (newShadowRoot: ShadowRoot) => {\n * setShadowRoot(newShadowRoot);\n * },\n * [setShadowRoot],\n * );\n *\n * return <TechDocsShadowDom element={dom} onAppend={handleDomAppend} />;\n * };\n * ```\n *\n * @param props - see {@link TechDocsShadowDomProps}.\n * @public\n */\nexport const TechDocsShadowDom = (props: TechDocsShadowDomProps) => {\n const { element, onAppend, children } = props;\n\n const [jss, setJss] = useState(\n create({\n ...jssPreset(),\n insertionPoint: undefined,\n }),\n );\n\n useShadowDomStylesEvents(element);\n const loading = useShadowDomStylesLoading(element);\n\n const ref = useCallback(\n (shadowHost: HTMLDivElement) => {\n if (!element || !shadowHost) return;\n\n setJss(\n create({\n ...jssPreset(),\n insertionPoint: element.querySelector('head') || undefined,\n }),\n );\n\n let shadowRoot = shadowHost.shadowRoot;\n\n if (!shadowRoot) {\n shadowRoot = shadowHost.attachShadow({ mode: 'open' });\n }\n\n shadowRoot.replaceChildren(element);\n\n if (typeof onAppend === 'function') {\n onAppend(shadowRoot);\n }\n },\n [element, onAppend],\n );\n\n return (\n <>\n {loading && <Progress />}\n {/* The sheetsManager={new Map()} is needed in order to deduplicate the injection of CSS in the page. */}\n <StylesProvider jss={jss} sheetsManager={new Map()}>\n <div ref={ref} data-testid=\"techdocs-native-shadowroot\" />\n {children}\n </StylesProvider>\n </>\n );\n};\n"],"names":[],"mappings":"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"}
1
+ {"version":3,"file":"component.esm.js","sources":["../src/component.tsx"],"sourcesContent":["/*\n * Copyright 2022 The Backstage Authors\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n\nimport React, {\n PropsWithChildren,\n useState,\n useEffect,\n useCallback,\n} from 'react';\n\nimport { create } from 'jss';\nimport StylesProvider from '@material-ui/styles/StylesProvider';\nimport jssPreset from '@material-ui/styles/jssPreset';\n\nimport { Progress } from '@backstage/core-components';\n\n/**\n * Name for the event dispatched when ShadowRoot styles are loaded.\n * @public\n */\nexport const SHADOW_DOM_STYLE_LOAD_EVENT = 'TECH_DOCS_SHADOW_DOM_STYLE_LOAD';\n\n/**\n * Dispatch style load event after all styles are loaded.\n * @param element - the ShadowRoot tree.\n */\nconst useShadowDomStylesEvents = (element: Element | null) => {\n useEffect(() => {\n if (!element) {\n return () => {};\n }\n\n const styles = element.querySelectorAll<HTMLElement>(\n 'head > link[rel=\"stylesheet\"]',\n );\n\n let count = styles?.length ?? 0;\n const event = new CustomEvent(SHADOW_DOM_STYLE_LOAD_EVENT);\n\n if (!count) {\n element.dispatchEvent(event);\n return () => {};\n }\n\n const handleLoad = () => {\n if (--count === 0) {\n element.dispatchEvent(event);\n }\n };\n\n styles?.forEach(style => {\n style.addEventListener('load', handleLoad);\n });\n\n return () => {\n styles?.forEach(style => {\n style.removeEventListener('load', handleLoad);\n });\n };\n }, [element]);\n};\n\n/**\n * Returns the style's loading state.\n *\n * @example\n * Here's an example that updates the sidebar position only after styles are calculated:\n * ```jsx\n * import {\n * TechDocsShadowDom,\n * useShadowDomStylesLoading,\n * } from '@backstage/plugin-techdocs-react';\n *\n * export const TechDocsReaderPageContent = () => {\n * // ...\n * const dom = useTechDocsReaderDom(entity);\n * const isStyleLoading = useShadowDomStylesLoading(dom);\n *\n * const updateSidebarPosition = useCallback(() => {\n * //...\n * }, [dom]);\n *\n * useEffect(() => {\n * if (!isStyleLoading) {\n * updateSidebarPosition();\n * }\n * }, [isStyleLoading, updateSidebarPosition]);\n *\n * const handleDomAppend = useCallback(\n * (newShadowRoot: ShadowRoot) => {\n * setShadowRoot(newShadowRoot);\n * },\n * [setShadowRoot],\n * );\n *\n * return <TechDocsShadowDom element={dom} onAppend={handleDomAppend} />;\n * };\n * ```\n *\n * @param element - which is the ShadowRoot tree.\n * @returns a boolean value, true if styles are being loaded.\n * @public\n */\nexport const useShadowDomStylesLoading = (element: Element | null) => {\n const [loading, setLoading] = useState(false);\n\n useEffect(() => {\n if (!element) return () => {};\n\n setLoading(true);\n\n const style = (element as HTMLElement).style;\n\n style.setProperty('opacity', '0');\n\n const handleLoad = () => {\n setLoading(false);\n style.setProperty('opacity', '1');\n };\n\n element.addEventListener(SHADOW_DOM_STYLE_LOAD_EVENT, handleLoad);\n\n return () => {\n element.removeEventListener(SHADOW_DOM_STYLE_LOAD_EVENT, handleLoad);\n };\n }, [element]);\n\n return loading;\n};\n\n/**\n * Props for {@link TechDocsShadowDom}.\n *\n * @remarks\n * If you want to use portals to render Material UI components in the Shadow DOM,\n * you must render these portals as children because this component wraps its children in a Material UI StylesProvider\n * to ensure that Material UI styles are applied.\n *\n * @public\n */\nexport type TechDocsShadowDomProps = PropsWithChildren<{\n /**\n * Element tree that is appended to ShadowRoot.\n */\n element: Element;\n /**\n * Callback called when the element tree is appended in ShadowRoot.\n */\n onAppend?: (shadowRoot: ShadowRoot) => void;\n}>;\n\n/**\n * Renders a tree of elements in a Shadow DOM.\n *\n * @remarks\n * Centers the styles loaded event to avoid having multiple locations setting the opacity style in Shadow DOM causing the screen to flash multiple times,\n * so if you want to know when Shadow DOM styles are computed, you can listen for the \"TECH_DOCS_SHADOW_DOM_STYLE_LOAD\" event dispatched by the element tree.\n *\n * @example\n * Here is an example using this component and also listening for styles loaded event:\n *```jsx\n * import {\n * TechDocsShadowDom,\n * SHADOW_DOM_STYLE_LOAD_EVENT,\n * } from '@backstage/plugin-techdocs-react';\n *\n * export const TechDocsReaderPageContent = ({ entity }: TechDocsReaderPageContentProps) => {\n * // ...\n * const dom = useTechDocsReaderDom(entity);\n *\n * useEffect(() => {\n * const updateSidebarPosition = () => {\n * // ...\n * };\n * dom?.addEventListener(SHADOW_DOM_STYLE_LOAD_EVENT, updateSidebarPosition);\n * return () => {\n * dom?.removeEventListener(SHADOW_DOM_STYLE_LOAD_EVENT, updateSidebarPosition);\n * };\n * }, [dom]);\n *\n * const handleDomAppend = useCallback(\n * (newShadowRoot: ShadowRoot) => {\n * setShadowRoot(newShadowRoot);\n * },\n * [setShadowRoot],\n * );\n *\n * return <TechDocsShadowDom element={dom} onAppend={handleDomAppend} />;\n * };\n * ```\n *\n * @param props - see {@link TechDocsShadowDomProps}.\n * @public\n */\nexport const TechDocsShadowDom = (props: TechDocsShadowDomProps) => {\n const { element, onAppend, children } = props;\n\n const [jss, setJss] = useState(\n create({\n ...jssPreset(),\n insertionPoint: undefined,\n }),\n );\n\n useShadowDomStylesEvents(element);\n const loading = useShadowDomStylesLoading(element);\n\n const ref = useCallback(\n (shadowHost: HTMLDivElement) => {\n if (!element || !shadowHost) return;\n\n setJss(\n create({\n ...jssPreset(),\n insertionPoint: element.querySelector('head') || undefined,\n }),\n );\n\n let shadowRoot = shadowHost.shadowRoot;\n\n if (!shadowRoot) {\n shadowRoot = shadowHost.attachShadow({ mode: 'open' });\n }\n\n shadowRoot.replaceChildren(element);\n\n if (typeof onAppend === 'function') {\n onAppend(shadowRoot);\n }\n },\n [element, onAppend],\n );\n\n return (\n <>\n {loading && <Progress />}\n {/* The sheetsManager={new Map()} is needed in order to deduplicate the injection of CSS in the page. */}\n <StylesProvider jss={jss} sheetsManager={new Map()}>\n <div ref={ref} data-testid=\"techdocs-native-shadowroot\" />\n {children}\n </StylesProvider>\n </>\n );\n};\n"],"names":[],"mappings":"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"}
package/dist/hooks.esm.js CHANGED
@@ -10,7 +10,7 @@ const useShadowRootElements = (selectors) => {
10
10
  const shadowRoot = useShadowRoot();
11
11
  if (!shadowRoot)
12
12
  return [];
13
- return selectors.map((selector) => shadowRoot == null ? void 0 : shadowRoot.querySelectorAll(selector)).filter((nodeList) => nodeList.length).map((nodeList) => Array.from(nodeList)).flat();
13
+ return selectors.map((selector) => shadowRoot?.querySelectorAll(selector)).filter((nodeList) => nodeList.length).map((nodeList) => Array.from(nodeList)).flat();
14
14
  };
15
15
  const isValidSelection = (newSelection) => {
16
16
  return newSelection.toString() && newSelection.rangeCount && newSelection.getRangeAt(0).getBoundingClientRect().top;
package/dist/hooks.esm.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"hooks.esm.js","sources":["../src/hooks.ts"],"sourcesContent":["/*\n * Copyright 2022 The Backstage Authors\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\nimport { useState, useEffect, useMemo } from 'react';\nimport debounce from 'lodash/debounce';\nimport { useTechDocsReaderPage } from './context';\n\n/**\n * Hook for use within TechDocs addons that provides access to the underlying\n * shadow root of the current page, allowing the DOM within to be mutated.\n * @public\n */\nexport const useShadowRoot = () => {\n const { shadowRoot } = useTechDocsReaderPage();\n return shadowRoot;\n};\n\n/**\n * Convenience hook for use within TechDocs addons that provides access to\n * elements that match a given selector within the shadow root.\n *\n * @public\n */\nexport const useShadowRootElements = <\n TReturnedElement extends HTMLElement = HTMLElement,\n>(\n selectors: string[],\n): TReturnedElement[] => {\n const shadowRoot = useShadowRoot();\n if (!shadowRoot) return [];\n return selectors\n .map(selector => shadowRoot?.querySelectorAll<TReturnedElement>(selector))\n .filter(nodeList => nodeList.length)\n .map(nodeList => Array.from(nodeList))\n .flat();\n};\n\nconst isValidSelection = (newSelection: Selection) => {\n // Safari sets the selection rect to top zero\n return (\n newSelection.toString() &&\n newSelection.rangeCount &&\n newSelection.getRangeAt(0).getBoundingClientRect().top\n );\n};\n\n/**\n * Hook for retrieving a selection within the ShadowRoot.\n * @public\n */\nexport const useShadowRootSelection = (waitMillis: number = 0) => {\n const shadowRoot = useShadowRoot();\n const [selection, setSelection] = useState<Selection | null>(null);\n const handleSelectionChange = useMemo(\n () =>\n debounce(() => {\n const shadowDocument = shadowRoot as ShadowRoot &\n Pick<Document, 'getSelection'>;\n // Firefox and Safari don't implement getSelection for Shadow DOM\n const newSelection = shadowDocument.getSelection\n ? shadowDocument.getSelection()\n : document.getSelection();\n\n if (newSelection && isValidSelection(newSelection)) {\n setSelection(newSelection);\n } else {\n setSelection(null);\n }\n }, waitMillis),\n [shadowRoot, setSelection, waitMillis],\n );\n\n useEffect(() => {\n window.document.addEventListener('selectionchange', handleSelectionChange);\n return () => {\n handleSelectionChange.cancel();\n window.document.removeEventListener(\n 'selectionchange',\n handleSelectionChange,\n );\n };\n }, [handleSelectionChange]);\n\n return selection;\n};\n"],"names":[],"mappings":";;;;AAwBO,MAAM,gBAAgB,MAAM;AACjC,EAAM,MAAA,EAAE,UAAW,EAAA,GAAI,qBAAsB,EAAA,CAAA;AAC7C,EAAO,OAAA,UAAA,CAAA;AACT,EAAA;AAQa,MAAA,qBAAA,GAAwB,CAGnC,SACuB,KAAA;AACvB,EAAA,MAAM,aAAa,aAAc,EAAA,CAAA;AACjC,EAAA,IAAI,CAAC,UAAA;AAAY,IAAA,OAAO,EAAC,CAAA;AACzB,EAAA,OAAO,UACJ,GAAI,CAAA,CAAA,QAAA,KAAY,yCAAY,gBAAmC,CAAA,QAAA,CAAS,EACxE,MAAO,CAAA,CAAA,QAAA,KAAY,SAAS,MAAM,CAAA,CAClC,IAAI,CAAY,QAAA,KAAA,KAAA,CAAM,KAAK,QAAQ,CAAC,EACpC,IAAK,EAAA,CAAA;AACV,EAAA;AAEA,MAAM,gBAAA,GAAmB,CAAC,YAA4B,KAAA;AAEpD,EACE,OAAA,YAAA,CAAa,QAAS,EAAA,IACtB,YAAa,CAAA,UAAA,IACb,aAAa,UAAW,CAAA,CAAC,CAAE,CAAA,qBAAA,EAAwB,CAAA,GAAA,CAAA;AAEvD,CAAA,CAAA;AAMa,MAAA,sBAAA,GAAyB,CAAC,UAAA,GAAqB,CAAM,KAAA;AAChE,EAAA,MAAM,aAAa,aAAc,EAAA,CAAA;AACjC,EAAA,MAAM,CAAC,SAAA,EAAW,YAAY,CAAA,GAAI,SAA2B,IAAI,CAAA,CAAA;AACjE,EAAA,MAAM,qBAAwB,GAAA,OAAA;AAAA,IAC5B,MACE,SAAS,MAAM;AACb,MAAA,MAAM,cAAiB,GAAA,UAAA,CAAA;AAGvB,MAAA,MAAM,eAAe,cAAe,CAAA,YAAA,GAChC,eAAe,YAAa,EAAA,GAC5B,SAAS,YAAa,EAAA,CAAA;AAE1B,MAAI,IAAA,YAAA,IAAgB,gBAAiB,CAAA,YAAY,CAAG,EAAA;AAClD,QAAA,YAAA,CAAa,YAAY,CAAA,CAAA;AAAA,OACpB,MAAA;AACL,QAAA,YAAA,CAAa,IAAI,CAAA,CAAA;AAAA,OACnB;AAAA,OACC,UAAU,CAAA;AAAA,IACf,CAAC,UAAY,EAAA,YAAA,EAAc,UAAU,CAAA;AAAA,GACvC,CAAA;AAEA,EAAA,SAAA,CAAU,MAAM;AACd,IAAO,MAAA,CAAA,QAAA,CAAS,gBAAiB,CAAA,iBAAA,EAAmB,qBAAqB,CAAA,CAAA;AACzE,IAAA,OAAO,MAAM;AACX,MAAA,qBAAA,CAAsB,MAAO,EAAA,CAAA;AAC7B,MAAA,MAAA,CAAO,QAAS,CAAA,mBAAA;AAAA,QACd,iBAAA;AAAA,QACA,qBAAA;AAAA,OACF,CAAA;AAAA,KACF,CAAA;AAAA,GACF,EAAG,CAAC,qBAAqB,CAAC,CAAA,CAAA;AAE1B,EAAO,OAAA,SAAA,CAAA;AACT;;;;"}
1
+ {"version":3,"file":"hooks.esm.js","sources":["../src/hooks.ts"],"sourcesContent":["/*\n * Copyright 2022 The Backstage Authors\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\nimport { useState, useEffect, useMemo } from 'react';\nimport debounce from 'lodash/debounce';\nimport { useTechDocsReaderPage } from './context';\n\n/**\n * Hook for use within TechDocs addons that provides access to the underlying\n * shadow root of the current page, allowing the DOM within to be mutated.\n * @public\n */\nexport const useShadowRoot = () => {\n const { shadowRoot } = useTechDocsReaderPage();\n return shadowRoot;\n};\n\n/**\n * Convenience hook for use within TechDocs addons that provides access to\n * elements that match a given selector within the shadow root.\n *\n * @public\n */\nexport const useShadowRootElements = <\n TReturnedElement extends HTMLElement = HTMLElement,\n>(\n selectors: string[],\n): TReturnedElement[] => {\n const shadowRoot = useShadowRoot();\n if (!shadowRoot) return [];\n return selectors\n .map(selector => shadowRoot?.querySelectorAll<TReturnedElement>(selector))\n .filter(nodeList => nodeList.length)\n .map(nodeList => Array.from(nodeList))\n .flat();\n};\n\nconst isValidSelection = (newSelection: Selection) => {\n // Safari sets the selection rect to top zero\n return (\n newSelection.toString() &&\n newSelection.rangeCount &&\n newSelection.getRangeAt(0).getBoundingClientRect().top\n );\n};\n\n/**\n * Hook for retrieving a selection within the ShadowRoot.\n * @public\n */\nexport const useShadowRootSelection = (waitMillis: number = 0) => {\n const shadowRoot = useShadowRoot();\n const [selection, setSelection] = useState<Selection | null>(null);\n const handleSelectionChange = useMemo(\n () =>\n debounce(() => {\n const shadowDocument = shadowRoot as ShadowRoot &\n Pick<Document, 'getSelection'>;\n // Firefox and Safari don't implement getSelection for Shadow DOM\n const newSelection = shadowDocument.getSelection\n ? shadowDocument.getSelection()\n : document.getSelection();\n\n if (newSelection && isValidSelection(newSelection)) {\n setSelection(newSelection);\n } else {\n setSelection(null);\n }\n }, waitMillis),\n [shadowRoot, setSelection, waitMillis],\n );\n\n useEffect(() => {\n window.document.addEventListener('selectionchange', handleSelectionChange);\n return () => {\n handleSelectionChange.cancel();\n window.document.removeEventListener(\n 'selectionchange',\n handleSelectionChange,\n );\n };\n }, [handleSelectionChange]);\n\n return selection;\n};\n"],"names":[],"mappings":";;;;AAwBO,MAAM,gBAAgB,MAAM;AACjC,EAAM,MAAA,EAAE,UAAW,EAAA,GAAI,qBAAsB,EAAA,CAAA;AAC7C,EAAO,OAAA,UAAA,CAAA;AACT,EAAA;AAQa,MAAA,qBAAA,GAAwB,CAGnC,SACuB,KAAA;AACvB,EAAA,MAAM,aAAa,aAAc,EAAA,CAAA;AACjC,EAAA,IAAI,CAAC,UAAA;AAAY,IAAA,OAAO,EAAC,CAAA;AACzB,EAAO,OAAA,SAAA,CACJ,IAAI,CAAY,QAAA,KAAA,UAAA,EAAY,iBAAmC,QAAQ,CAAC,EACxE,MAAO,CAAA,CAAA,QAAA,KAAY,SAAS,MAAM,CAAA,CAClC,IAAI,CAAY,QAAA,KAAA,KAAA,CAAM,KAAK,QAAQ,CAAC,EACpC,IAAK,EAAA,CAAA;AACV,EAAA;AAEA,MAAM,gBAAA,GAAmB,CAAC,YAA4B,KAAA;AAEpD,EACE,OAAA,YAAA,CAAa,QAAS,EAAA,IACtB,YAAa,CAAA,UAAA,IACb,aAAa,UAAW,CAAA,CAAC,CAAE,CAAA,qBAAA,EAAwB,CAAA,GAAA,CAAA;AAEvD,CAAA,CAAA;AAMa,MAAA,sBAAA,GAAyB,CAAC,UAAA,GAAqB,CAAM,KAAA;AAChE,EAAA,MAAM,aAAa,aAAc,EAAA,CAAA;AACjC,EAAA,MAAM,CAAC,SAAA,EAAW,YAAY,CAAA,GAAI,SAA2B,IAAI,CAAA,CAAA;AACjE,EAAA,MAAM,qBAAwB,GAAA,OAAA;AAAA,IAC5B,MACE,SAAS,MAAM;AACb,MAAA,MAAM,cAAiB,GAAA,UAAA,CAAA;AAGvB,MAAA,MAAM,eAAe,cAAe,CAAA,YAAA,GAChC,eAAe,YAAa,EAAA,GAC5B,SAAS,YAAa,EAAA,CAAA;AAE1B,MAAI,IAAA,YAAA,IAAgB,gBAAiB,CAAA,YAAY,CAAG,EAAA;AAClD,QAAA,YAAA,CAAa,YAAY,CAAA,CAAA;AAAA,OACpB,MAAA;AACL,QAAA,YAAA,CAAa,IAAI,CAAA,CAAA;AAAA,OACnB;AAAA,OACC,UAAU,CAAA;AAAA,IACf,CAAC,UAAY,EAAA,YAAA,EAAc,UAAU,CAAA;AAAA,GACvC,CAAA;AAEA,EAAA,SAAA,CAAU,MAAM;AACd,IAAO,MAAA,CAAA,QAAA,CAAS,gBAAiB,CAAA,iBAAA,EAAmB,qBAAqB,CAAA,CAAA;AACzE,IAAA,OAAO,MAAM;AACX,MAAA,qBAAA,CAAsB,MAAO,EAAA,CAAA;AAC7B,MAAA,MAAA,CAAO,QAAS,CAAA,mBAAA;AAAA,QACd,iBAAA;AAAA,QACA,qBAAA;AAAA,OACF,CAAA;AAAA,KACF,CAAA;AAAA,GACF,EAAG,CAAC,qBAAqB,CAAC,CAAA,CAAA;AAE1B,EAAO,OAAA,SAAA,CAAA;AACT;;;;"}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@backstage/plugin-techdocs-react",
3
- "version": "1.2.4",
3
+ "version": "1.2.5-next.1",
4
4
  "description": "Shared frontend utilities for TechDocs and Addons",
5
5
  "backstage": {
6
6
  "role": "web-library"
@@ -39,8 +39,8 @@
39
39
  "dependencies": {
40
40
  "@backstage/catalog-model": "^1.5.0",
41
41
  "@backstage/config": "^1.2.0",
42
- "@backstage/core-components": "^0.14.7",
43
- "@backstage/core-plugin-api": "^1.9.2",
42
+ "@backstage/core-components": "^0.14.8-next.1",
43
+ "@backstage/core-plugin-api": "^1.9.3-next.0",
44
44
  "@backstage/version-bridge": "^1.0.8",
45
45
  "@material-ui/core": "^4.12.2",
46
46
  "@material-ui/styles": "^4.11.0",
@@ -51,9 +51,9 @@
51
51
  "react-use": "^17.2.4"
52
52
  },
53
53
  "devDependencies": {
54
- "@backstage/cli": "^0.26.5",
55
- "@backstage/test-utils": "^1.5.5",
56
- "@backstage/theme": "^0.5.4",
54
+ "@backstage/cli": "^0.26.7-next.2",
55
+ "@backstage/test-utils": "^1.5.6-next.1",
56
+ "@backstage/theme": "^0.5.6-next.0",
57
57
  "@testing-library/jest-dom": "^6.0.0",
58
58
  "@testing-library/react": "^15.0.0"
59
59
  },