@backstage/plugin-techdocs-react 1.3.16-next.0 → 1.3.16-next.1

package/CHANGELOG.md

@@ -1,5 +1,14 @@
 # @backstage/plugin-techdocs-react
 
+## 1.3.16-next.1
+
+### Patch Changes
+
+- f624dc6: Fixed Material UI styles for TechDocs addons in module-federated applications.
+- 7a4f545: Prevented TechDocs content from briefly appearing before page styles load.
+- Updated dependencies
+  - @backstage/core-components@0.18.15-next.1
+
 ## 1.3.16-next.0
 
 ### Patch Changes

package/dist/component.esm.js

@@ -1,8 +1,7 @@
 import { jsx, Fragment, jsxs } from 'react/jsx-runtime';
-import { useState, useCallback, useEffect } from 'react';
+import { useState, useCallback, useLayoutEffect, useEffect } from 'react';
 import { create } from 'jss';
-import StylesProvider from '@material-ui/styles/StylesProvider';
-import jssPreset from '@material-ui/styles/jssPreset';
+import { jssPreset, StylesProvider } from '@material-ui/styles';
 
 const SHADOW_DOM_STYLE_LOAD_EVENT = "TECH_DOCS_SHADOW_DOM_STYLE_LOAD";
 const useShadowDomStylesEvents = (element) => {
@@ -11,10 +10,12 @@ const useShadowDomStylesEvents = (element) => {
       return () => {
       };
     }
-    const styles = element.querySelectorAll(
-      'head > link[rel="stylesheet"]'
-    );
-    let count = styles?.length ?? 0;
+    const styles = Array.from(
+      element.querySelectorAll(
+        'head > link[rel="stylesheet"]'
+      )
+    ).filter((style) => !style.sheet);
+    let count = styles.length;
     const event = new CustomEvent(SHADOW_DOM_STYLE_LOAD_EVENT);
     if (!count) {
       element.dispatchEvent(event);
@@ -26,11 +27,11 @@ const useShadowDomStylesEvents = (element) => {
         element.dispatchEvent(event);
       }
     };
-    styles?.forEach((style) => {
+    styles.forEach((style) => {
       style.addEventListener("load", handleLoad);
     });
     return () => {
-      styles?.forEach((style) => {
+      styles.forEach((style) => {
         style.removeEventListener("load", handleLoad);
       });
     };
@@ -38,7 +39,7 @@ const useShadowDomStylesEvents = (element) => {
 };
 const useShadowDomStylesLoading = (element) => {
   const [loading, setLoading] = useState(false);
-  useEffect(() => {
+  useLayoutEffect(() => {
     if (!element) return () => {
     };
     setLoading(true);

package/dist/component.esm.js.map

@@ -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 { PropsWithChildren, useState, useEffect, useCallback } from 'react';\n\nimport { create } from 'jss';\nimport StylesProvider from '@material-ui/styles/StylesProvider';\nimport jssPreset from '@material-ui/styles/jssPreset';\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\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      {/* 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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"}
+{"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 {\n  PropsWithChildren,\n  useState,\n  useEffect,\n  useLayoutEffect,\n  useCallback,\n} from 'react';\n\nimport { create } from 'jss';\n// The package-root import ensures federated apps share the same styling context.\n// eslint-disable-next-line @backstage/no-top-level-material-ui-4-imports\nimport { StylesProvider, jssPreset } from '@material-ui/styles';\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  // Keep this passive so consumers can subscribe from a layout effect before\n  // already-loaded styles dispatch the event synchronously.\n  useEffect(() => {\n    if (!element) {\n      return () => {};\n    }\n\n    const styles = Array.from(\n      element.querySelectorAll<HTMLLinkElement>(\n        'head > link[rel=\"stylesheet\"]',\n      ),\n    ).filter(style => !style.sheet);\n\n    let count = styles.length;\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 * Hides the element before paint and reveals it after the\n * {@link SHADOW_DOM_STYLE_LOAD_EVENT} event is dispatched.\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  useLayoutEffect(() => {\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\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      {/* 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/index.d.ts

@@ -139,6 +139,9 @@ declare const SHADOW_DOM_STYLE_LOAD_EVENT = "TECH_DOCS_SHADOW_DOM_STYLE_LOAD";
 /**
  * Returns the style's loading state.
  *
+ * Hides the element before paint and reveals it after the
+ * {@link SHADOW_DOM_STYLE_LOAD_EVENT} event is dispatched.
+ *
  * @example
  * Here's an example that updates the sidebar position only after styles are calculated:
  * ```jsx

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@backstage/plugin-techdocs-react",
-  "version": "1.3.16-next.0",
+  "version": "1.3.16-next.1",
   "description": "Shared frontend utilities for TechDocs and Addons",
   "backstage": {
     "role": "web-library",
@@ -68,7 +68,7 @@
   "dependencies": {
     "@backstage/catalog-model": "1.10.2-next.0",
     "@backstage/config": "1.3.10-next.0",
-    "@backstage/core-components": "0.18.15-next.0",
+    "@backstage/core-components": "0.18.15-next.1",
     "@backstage/core-plugin-api": "1.12.11-next.0",
     "@backstage/frontend-plugin-api": "0.18.2-next.0",
     "@backstage/plugin-techdocs-common": "0.1.1",