diff --git a/e2e-tests/playwright.config.ts b/e2e-tests/playwright.config.ts index 457223261..4f09ce889 100644 --- a/e2e-tests/playwright.config.ts +++ b/e2e-tests/playwright.config.ts @@ -1,6 +1,5 @@ import { PlaywrightTestConfig, expect } from "@playwright/test"; import fs from "node:fs"; -import os from "node:os"; expect.extend({ async toHaveContents(filepath: string, expectedContents: string) { @@ -52,7 +51,7 @@ const config: PlaywrightTestConfig = { video: "on", }, workers: 1, - ignoreSnapshots: os.platform() !== "darwin", + ignoreSnapshots: true, }; export default config; diff --git a/packages/studio-ui/src/AppWithLazyLoading.tsx b/packages/studio-ui/src/AppWithLazyLoading.tsx index 75cbf5184..3683947c7 100644 --- a/packages/studio-ui/src/AppWithLazyLoading.tsx +++ b/packages/studio-ui/src/AppWithLazyLoading.tsx @@ -2,7 +2,7 @@ import LoadingOverlay from "./components/LoadingOverlay"; import { Suspense, lazy, useEffect, useState } from "react"; import useStudioStore from "./store/useStudioStore"; import ProgressBar from "./components/ProgressBar"; -import { loadComponents, loadStyling } from "./utils/preloadStudio"; +import { loadComponents, loadStyling } from "./utils/loadUserAssets"; import classNames from "classnames"; const AppPromise = import("./App"); diff --git a/packages/studio-ui/src/components/IFramePortal.tsx b/packages/studio-ui/src/components/IFramePortal.tsx index 3f394bd27..652ef3909 100644 --- a/packages/studio-ui/src/components/IFramePortal.tsx +++ b/packages/studio-ui/src/components/IFramePortal.tsx @@ -67,33 +67,46 @@ function useInjectUserStyles(iframeDocument: Document | undefined) { }); }); pageCss?.forEach((cssFilepath) => { - injectStyleIntoIframe(iframeDocument, cssFilepath); + injectStyleIntoIframe(iframeDocument, cssFilepath); }); return () => { clearStylingFromIframe(iframeDocument); }; - }, [componentTree, getComponentMetadata, iframeDocument, pageCss, activePage, UUIDToFileMetadata]); + }, [ + componentTree, + getComponentMetadata, + iframeDocument, + pageCss, + activePage, + UUIDToFileMetadata, + ]); } function clearStylingFromIframe(iframeDocument: Document) { - const styleElements = Array.from( - iframeDocument.head.getElementsByTagName("style") - ); - for (const el of styleElements) { - el.remove(); - } + const styleElements = [...iframeDocument.head.getElementsByTagName("style")]; + styleElements.forEach((element) => { + element.remove(); + }); } -function injectStyleIntoIframe(iframeDocument: Document | undefined, filepath: string) { - const originalStyletag = document.querySelector(`[studio-style-filepath='${filepath}']`) - if (originalStyletag && iframeDocument) { - const iframeStyletag = originalStyletag.cloneNode(true) - iframeDocument.head.appendChild(iframeStyletag) +function injectStyleIntoIframe( + iframeDocument: Document, + filepath: string +) { + const originalStyletag = document.querySelector( + `[studio-style-filepath='${filepath}']` + ); + if (originalStyletag) { + const iframeStyletag = originalStyletag.cloneNode(true); + iframeDocument.head.appendChild(iframeStyletag); } } -const useViewportOption = (viewport: Viewport, previewRef: RefObject) => { +const useViewportOption = ( + viewport: Viewport, + previewRef: RefObject +) => { const [css, setCss] = useState( (viewport.styles?.width ?? 0) * (previewRef.current?.clientHeight ?? 0) > (viewport.styles?.height ?? 0) * (previewRef.current?.clientWidth ?? 0) diff --git a/packages/studio-ui/src/utils/preloadStudio.tsx b/packages/studio-ui/src/utils/loadUserAssets.tsx similarity index 65% rename from packages/studio-ui/src/utils/preloadStudio.tsx rename to packages/studio-ui/src/utils/loadUserAssets.tsx index a474954ff..322799c66 100644 --- a/packages/studio-ui/src/utils/preloadStudio.tsx +++ b/packages/studio-ui/src/utils/loadUserAssets.tsx @@ -28,41 +28,35 @@ export function loadComponents(): Promise[] { } /** - * Load all user styling as disabled style tags in Studio's iframe. + * Load all user styling as disabled style tags in Studio's head. */ export function loadStyling() { - const studioStore = useStudioStore.getState() - const UUIDToFileMetadata = studioStore.fileMetadatas.UUIDToFileMetadata - const pages = studioStore.pages.pages + const studioStore = useStudioStore.getState(); + const UUIDToFileMetadata = studioStore.fileMetadatas.UUIDToFileMetadata; + const pages = studioStore.pages.pages; - Object.values(UUIDToFileMetadata).forEach( - (fileMetadata) => { - if (fileMetadata.kind === FileMetadataKind.Component) { - importAndInjectIntoStudio(fileMetadata.cssImports); - } + Object.values(UUIDToFileMetadata).forEach((fileMetadata) => { + if (fileMetadata.kind === FileMetadataKind.Component) { + importAndInjectIntoStudio(fileMetadata.cssImports); } - ); + }); - Object.values(pages).forEach( - (page) => { - importAndInjectIntoStudio(page.cssImports); - } - ); + Object.values(pages).forEach((page) => { + importAndInjectIntoStudio(page.cssImports); + }); } function importAndInjectIntoStudio(cssImports: string[]) { cssImports.forEach(async (filepath) => { - await dynamicImportFromBrowser( - filepath - ).then((styling) => { - if (document.querySelector(`[studio-style-filepath='${filepath}']`)){ - return + await dynamicImportFromBrowser(filepath).then((styling) => { + if (document.querySelector(`[studio-style-filepath='${filepath}']`)) { + return; } - const styleEl = document.createElement("style") + const styleEl = document.createElement("style"); styleEl.innerText = styling.default; - styleEl.setAttribute("studio-style-filepath", filepath) - document.head.appendChild(styleEl) + styleEl.setAttribute("studio-style-filepath", filepath); + document.head.appendChild(styleEl); styleEl.disabled = true; }); - }) + }); } diff --git a/packages/studio-ui/tests/components/PreviewPanel.test.tsx b/packages/studio-ui/tests/components/PreviewPanel.test.tsx index f5bba8fd5..06a386960 100644 --- a/packages/studio-ui/tests/components/PreviewPanel.test.tsx +++ b/packages/studio-ui/tests/components/PreviewPanel.test.tsx @@ -13,7 +13,7 @@ import { PropValueKind, PropValueType, } from "@yext/studio-plugin"; -import loadComponents from "../../src/utils/loadComponents"; +import { loadComponents } from "../../src/utils/loadUserAssets"; const mockSetState = jest.fn(); diff --git a/packages/studio-ui/tests/utils/loadComponents.test.tsx b/packages/studio-ui/tests/utils/loadComponents.test.tsx index 38bb0184b..7c68fcfd9 100644 --- a/packages/studio-ui/tests/utils/loadComponents.test.tsx +++ b/packages/studio-ui/tests/utils/loadComponents.test.tsx @@ -1,5 +1,5 @@ import { FileMetadataKind } from "@yext/studio-plugin"; -import loadComponents from "../../src/utils/loadComponents"; +import { loadComponents } from "../../src/utils/loadUserAssets"; import mockStore, { MockStudioStore } from "../__utils__/mockStore"; import path from "path"; import { waitFor } from "@testing-library/react";