Fix circular dependency

texodus · texodus · commit 4248cd0a7bca · 2025-06-20T01:42:13.000-04:00
Signed-off-by: Andrew Stein &lt;steinlink@gmail.com&gt;
diff --git a/packages/perspective-viewer-d3fc/src/ts/plugin/d3fc_global_styles.ts b/packages/perspective-viewer-d3fc/src/ts/plugin/d3fc_global_styles.ts
@@ -10,23 +10,24 @@
 // ┃ of the [Apache License 2.0](https://www.apache.org/licenses/LICENSE-2.0). ┃
 // ┗━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┛
 
-export const D3FC_GLOBAL_STYLES = [];
-
 // Capture (and restore) `document.querySelector` to prevent D3FC from
 // attaching styles to the document `<head>`.
 export async function init() {
     const old_doc = window.document.querySelector;
+    const stylesheets = [];
+
     // @ts-ignore
     window.document.querySelector = () => {
         return {
             appendChild(elem) {
-                D3FC_GLOBAL_STYLES.push(elem);
+                stylesheets.push(elem);
                 return elem;
             },
         };
     };
 
-    const { register } = await import("./plugin");
+    const { register, createStyleSheets } = await import("./plugin");
     window.document.querySelector = old_doc;
+    createStyleSheets(stylesheets);
     register();
 }
diff --git a/packages/perspective-viewer-d3fc/src/ts/plugin/plugin.ts b/packages/perspective-viewer-d3fc/src/ts/plugin/plugin.ts
@@ -18,7 +18,7 @@ import { HTMLPerspectiveViewerElement } from "@finos/perspective-viewer";
 import type * as psp_types from "@finos/perspective-viewer";
 
 import * as d3 from "d3";
-import { D3FC_GLOBAL_STYLES } from "./d3fc_global_styles";
+
 import { Chart, Settings, Type } from "../types";
 
 const DEFAULT_PLUGIN_SETTINGS = {
@@ -30,17 +30,7 @@ const DEFAULT_PLUGIN_SETTINGS = {
     selectMode: "select",
 };
 
-const styleSheets = [];
-for (const style of D3FC_GLOBAL_STYLES) {
-    const sheet = new CSSStyleSheet();
-    sheet.replaceSync(style.textContent);
-    styleSheets.push(sheet);
-}
-
-const sheet = new CSSStyleSheet();
-sheet.replaceSync(style);
-
-styleSheets.push(sheet);
+const D3FC_GLOBAL_STYLES = [];
 
 const EXCLUDED_SETTINGS = [
     "crossValues",
@@ -63,6 +53,18 @@ async function register_element(plugin_name: string) {
     await perspectiveViewerClass.registerPlugin(plugin_name);
 }
 
+export function createStyleSheets(sheets) {
+    for (const style of sheets) {
+        const sheet = new CSSStyleSheet();
+        sheet.replaceSync(style.textContent);
+        D3FC_GLOBAL_STYLES.push(sheet);
+    }
+
+    const sheet = new CSSStyleSheet();
+    sheet.replaceSync(style);
+    D3FC_GLOBAL_STYLES.push(sheet);
+}
+
 export function register(...plugin_names: string[]) {
     const plugins = new Set(
         plugin_names.length > 0
@@ -115,7 +117,7 @@ class HTMLPerspectiveViewerD3fcPluginElement extends HTMLElement {
     connectedCallback() {
         if (!this._initialized) {
             this.attachShadow({ mode: "open" });
-            for (const sheet of styleSheets) {
+            for (const sheet of D3FC_GLOBAL_STYLES) {
                 this.shadowRoot.adoptedStyleSheets.push(sheet);
             }
 
