react-visualizer 5.2.1 → 5.3.0

package/dist/bin/makeVisualizerPage.js

@@ -2,7 +2,6 @@
 const { parseArgs } = require("node:util");
 const makeVisualizerPage = require("../src/makeVisualizerPage");
 const { writeFileSync } = require("node:fs");
-const assert = require("node:assert");
 const fs = require("node:fs");
 let argv = process.argv.slice(2);
 const startIndex = argv.findIndex((arg) => arg === "makeVisualizerPage");

package/dist/src/Visualizer.js

@@ -5,33 +5,16 @@ function relativeUrl(from, to) {
   return new URL(to, from).href;
 }
 function Visualizer(props) {
-  const currentHref = window.location.href;
-  let viewURL = props.viewURL || "";
-  let dataURL = props.dataURL || "";
-  let config = props.config || "";
+  const currentHref2 = window.location.href;
+  let { viewURL, dataURL, config } = props;
   if (viewURL) {
-    viewURL = relativeUrl(currentHref, viewURL);
+    viewURL = relativeUrl(currentHref2, viewURL);
   }
   if (dataURL) {
-    dataURL = relativeUrl(currentHref, dataURL);
+    dataURL = relativeUrl(currentHref2, dataURL);
   }
-  if (typeof config === "object" && config !== null) {
-    if (config.header && config.header.elements) {
-      config = JSON.parse(JSON.stringify(config));
-      const els = config.header.elements;
-      for (let i = 0; i < els.length; i++) {
-        if (els[i].url) els[i].url = relativeUrl(currentHref, els[i].url);
-      }
-    }
-    const configJson = JSON.stringify(config);
-    if (!configs.has(configJson))
-      configs.set(
-        configJson,
-        URL.createObjectURL(
-          new Blob([configJson], { type: "application/json" })
-        )
-      );
-    config = configs.get(configJson);
+  if (typeof config !== "string") {
+    config = createBlobConfig(config);
   }
   const style = props.style || {
     width: "100%",
@@ -60,4 +43,25 @@ function Visualizer(props) {
     }
   );
 }
+function createBlobConfig(config) {
+  if (typeof config === "object" && config !== null) {
+    let processedConfig = config;
+    if (config.header?.elements) {
+      processedConfig = structuredClone(config);
+      const els = processedConfig.header.elements;
+      for (let i = 0; i < els.length; i++) {
+        if (els[i].url) els[i].url = relativeUrl(currentHref, els[i].url);
+      }
+    }
+    const configJson = JSON.stringify(processedConfig);
+    if (configs.has(configJson)) {
+      return configs.get(configJson);
+    }
+    const blob = URL.createObjectURL(
+      new Blob([configJson], { type: "application/json" })
+    );
+    configs.set(configJson, blob);
+  }
+  return null;
+}
 module.exports = React.memo(Visualizer);

package/dist/src/makeVisualizerPage.js

@@ -6,10 +6,16 @@ function makeVisualizerPage(options = {}) {
     fallbackVersion = "latest",
     queryType = "fragment",
     loadversion = "none",
-    configURL = "",
+    config = "",
     viewURL = "",
     scripts = []
   } = options;
+  let configTemplate = "";
+  if (typeof config === "string") {
+    configTemplate = `'${config}'`;
+  } else if (typeof config === "object" && typeof config !== null) {
+    configTemplate = JSON.stringify(config);
+  }
   validateQueryType(queryType);
   validateLoadVersion(loadversion);
   const scriptsStr = scripts.reduce(function(value, script) {
@@ -23,7 +29,7 @@ function makeVisualizerPage(options = {}) {
       throw new Error("script must have url or content");
     }
   }, "");
-  return template.replace("{{ cdn }}", cdn).replace("{{ fallbackVersion }}", fallbackVersion).replace("{{ scripts }}", scriptsStr).replace("{{ queryType }}", queryType).replace("{{ loadversion }}", loadversion).replace("{{ configURL }}", configURL).replace("{{ viewURL }}", viewURL);
+  return template.replace("{{ cdn }}", cdn).replace("{{ fallbackVersion }}", fallbackVersion).replace("{{ scripts }}", scriptsStr).replace("{{ queryType }}", queryType).replace("{{ loadversion }}", loadversion).replace("{{ viewURL }}", viewURL).replace("{{ config }}", configTemplate);
 }
 module.exports = makeVisualizerPage;
 const validLoadversion = ["none", "exact", "latest-major"];

package/dist/src/visualizerTemplate.js

@@ -34,7 +34,7 @@ window.onload = function () {
   const queryType = '{{ queryType }}';
   const query = queryType === 'fragment' ? window.location.hash : window.location.search;
   const search = new URLSearchParams(query.startsWith("#") ? query.slice(1) : query);
-  const viewURL = search.get('viewURL');
+  const viewURL = search.get('viewURL') || '{{ viewURL }}';
   const v = search.get('v');
   const loadversion = search.get('loadversion') || '{{ loadversion }}';
   const fallbackVersion = search.get('fallbackVersion') || '{{ fallbackVersion }}';
@@ -72,8 +72,14 @@ window.onload = function () {
 
   function addVisualizer(version) {
     const cdn = '{{ cdn }}';
-    const viewURL = '{{ viewURL }}';
-    const configURL = '{{ configURL }}';
+    let configURL = '';
+    const config = {{ config }};
+    if(typeof config === 'string') {
+      configURL = config;
+    } else if(typeof config === 'object' && config !== null) {
+      configURL = createBlobConfig(config);
+    }
+    
     const visualizer = document.createElement('script');
     const datamain = cdn + '/' + version + '/init';
     const requirejs = cdn + '/' + version + '/components/requirejs/require.js';
@@ -91,6 +97,26 @@ window.onload = function () {
     visualizer.setAttribute('src', requirejs);
     document.head.appendChild(visualizer);
   }
+  
+  function createBlobConfig(config) {
+    if (typeof config === 'object' && config !== null) {
+      let processedConfig = config;
+      if (config.header?.elements) {
+        processedConfig = structuredClone(config);
+        const elements = processedConfig.header.elements;
+        for (let i = 0; i < elements.length; i++) {
+          // Transform relative URLs to absolute urls using the parent's location
+          // Parent points to self if called on the top window
+          if (elements[i].url) elements[i].url = new URL(elements[i].url, window.parent.location.href).href;
+        }
+      }
+      const configJson = JSON.stringify(processedConfig);
+      return URL.createObjectURL(
+        new Blob([configJson], { type: 'application/json' }),
+      );
+    }
+    return null;
+  }
 
   async function fetchUrl(url) {
     const response = await fetch(url, {credentials: 'include'});

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-visualizer",
-  "version": "5.2.1",
+  "version": "5.3.0",
   "description": "The visualizer in a react component",
   "main": "dist/src/index.js",
   "bin": {