feat: load initial styles via initialContent and remove onStylesLoade…

…d API
measuredco · Mar 24, 2024 · c91ca0c · c91ca0c
1 parent 8ba43c5
commit c91ca0c
Show file tree

Hide file tree

Showing 2 changed files with 11 additions and 31 deletions.
diff --git a/README.md b/README.md
@@ -33,12 +33,6 @@ Shares an API with [react-frame-component](https://github.com/ryanseddon/react-f
 
 Print debug messages when mounting styles to the console
 
-### onStylesLoaded
-
-`onStylesLoaded: function`
-
-A callback that triggers when the initial styles [are loaded](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/link#stylesheet_load_events)
-
 ## License
 
 MIT © [Measured Corporation Ltd](https://measured.co)
diff --git a/src/AutoFrameComponent.tsx b/src/AutoFrameComponent.tsx
@@ -1,4 +1,4 @@
-import React, { ReactNode, useLayoutEffect } from "react";
+import React, { ReactNode, useLayoutEffect, useState } from "react";
 import Frame, { FrameComponentProps, useFrame } from "react-frame-component";
 import hash from "object-hash";
 
@@ -14,14 +14,12 @@ const collectStyles = (doc: Document) => {
   return collected;
 };
 
-const CopyHostStyles = ({
+const SyncHostStyles = ({
   children,
   debug = false,
-  onStylesLoaded = () => null,
 }: {
   children: ReactNode;
   debug?: boolean;
-  onStylesLoaded?: () => void;
 }) => {
   const { document: doc, window: win } = useFrame();
 
@@ -133,21 +131,6 @@ const CopyHostStyles = ({
 
     const parentDocument = win!.parent.document;
 
-    const collectedStyles = collectStyles(parentDocument);
-
-    let mountedCounter = 0;
-
-    // Add new style tags
-    collectedStyles.forEach((styleNode) => {
-      addEl(styleNode as HTMLElement, () => {
-        mountedCounter += 1;
-
-        if (mountedCounter === collectedStyles.length) {
-          onStylesLoaded();
-        }
-      });
-    });
-
     observer.observe(parentDocument.head, { childList: true, subtree: true });
 
     return () => {
@@ -160,18 +143,21 @@ const CopyHostStyles = ({
 
 export type AutoFrameProps = FrameComponentProps & {
   debug?: boolean;
-  onStylesLoaded?: () => void;
 };
 
 export default React.forwardRef<HTMLIFrameElement, AutoFrameProps>(function (
-  { children, debug, onStylesLoaded, ...props }: AutoFrameProps,
+  { children, debug, ...props }: AutoFrameProps,
   ref
 ) {
+  const [initialStyles] = useState(collectStyles(document));
+
+  const initialContent = `<!DOCTYPE html><html><head>${initialStyles
+    .map((el) => el.outerHTML)
+    .join("")}</head><body><div></div></body></html>`;
+
   return (
-    <Frame {...props} ref={ref}>
-      <CopyHostStyles debug={debug} onStylesLoaded={onStylesLoaded}>
-        {children}
-      </CopyHostStyles>
+    <Frame initialContent={initialContent} {...props} ref={ref}>
+      <SyncHostStyles debug={debug}>{children}</SyncHostStyles>
     </Frame>
   );
 });