react-visualizer 4.1.0 → 5.0.0

package/README.md

@@ -1,8 +1,32 @@
 # react-visualizer
 
-The Visualizer in a react component
+Visualizer in a react component. Visualizer index page generator.
 
-## Properties
+## makeVisualizerPage
+
+Generate an HTML page which serves the Visualizer, as a Node.js API or as a CLI command.
+
+CLI example:
+
+```bash
+npx react-visualizer makeVisualizerPage --help
+```
+
+Node.js API: see options of `makeVisualizerPage` function.
+
+## Visualizer
+
+Component which instantiates a visualizer iframe. Pass it a URL generated by `makeVisualizerPage`.
+
+See component props for more information.
+
+## OldVisualizer
+
+The legacy visualizer component works by creating the visualizer page dynamically with a blob URL.
+
+It is not recommended to use it anymore.
+
+### Properties
 
 - `cdn` - URL of the CDN that will serve the Visualizer. Default: https://www.lactame.com/visualizer
 - `fallbackVersion` - Visualizer fallback version used if no valid version is found. Default: 'latest'.

package/bin/makeVisualizerPage.js

@@ -3,8 +3,16 @@
 const { parseArgs } = require('node:util');
 const makeVisualizerPage = require('../src/makeVisualizerPage');
 const { writeFileSync } = require('node:fs');
+const assert = require('node:assert');
+
+let argv = process.argv.slice(2);
+const startIndex = argv.findIndex((arg) => arg === 'makeVisualizerPage');
+if (startIndex > -1) {
+  argv = argv.slice(startIndex + 1);
+}
 
 const { values: args } = parseArgs({
+  args: argv,
   options: {
     help: {
       type: 'boolean',

package/dist/OldVisualizer.js

@@ -9,10 +9,20 @@ function relativeUrl(from, to) {
 class OldVisualizer extends React.PureComponent {
   render() {
     const currentHref = window.location.href;
-    let cdn = this.props.cdn ? this.props.cdn.replace(/\/$/, "") : "https://www.lactame.com/visualizer";
-    cdn = relativeUrl(currentHref, cdn);
-    let scripts = this.props.scripts || [];
-    scripts = scripts.map((script) => {
+    const {
+      cdn,
+      viewURL,
+      dataURL,
+      config,
+      style,
+      scripts = [],
+      loadversion,
+      fallbackVersion,
+      queryParameters
+    } = this.props;
+    let finalCDN = cdn ? cdn.replace(/\/$/, "") : "https://www.lactame.com/visualizer";
+    finalCDN = relativeUrl(currentHref, finalCDN);
+    const finalScripts = scripts.map((script) => {
       if (script.url || typeof script === "string") {
         return {
           url: relativeUrl(currentHref, script.url || script)
@@ -22,9 +32,10 @@ class OldVisualizer extends React.PureComponent {
       }
     });
     const page = makeVisualizerPage({
-      cdn,
-      fallbackVersion: this.props.fallbackVersion,
-      scripts
+      cdn: finalCDN,
+      scripts: finalScripts,
+      loadversion,
+      fallbackVersion
     });
     if (!urls.has(page)) {
       urls.set(
@@ -37,11 +48,11 @@ class OldVisualizer extends React.PureComponent {
       ReactVisualizer,
       {
         url,
-        viewURL: this.props.viewURL,
-        dataURL: this.props.dataURL,
-        config: this.props.config,
-        version: this.props.version,
-        style: this.props.style
+        viewURL,
+        dataURL,
+        config,
+        queryParameters,
+        style
       }
     );
   }

package/dist/Visualizer.js

@@ -7,11 +7,14 @@ function relativeUrl(from, to) {
 function Visualizer(props) {
   const currentHref = window.location.href;
   let viewURL = props.viewURL || "";
-  if (viewURL) viewURL = relativeUrl(currentHref, viewURL);
   let dataURL = props.dataURL || "";
-  if (dataURL) dataURL = relativeUrl(currentHref, dataURL);
   let config = props.config || "";
-  const version = props.version || "latest";
+  if (viewURL) {
+    viewURL = relativeUrl(currentHref, viewURL);
+  }
+  if (dataURL) {
+    dataURL = relativeUrl(currentHref, dataURL);
+  }
   if (typeof config === "object" && config !== null) {
     if (config.header && config.header.elements) {
       config = JSON.parse(JSON.stringify(config));
@@ -36,19 +39,25 @@ function Visualizer(props) {
     position: "absolute",
     border: "none"
   };
-  let query = ["viewURL", viewURL, "dataURL", dataURL, "config", config];
-  query = query.map(function(v, i) {
-    if (i % 2 === 1) return query[i - 1] + "=" + encodeURIComponent(query[i]);
-  }).filter(function(v) {
-    return v !== void 0;
-  });
-  query = query.join("&");
-  if (version !== "auto" || !viewURL) {
-    const v = version === "auto" ? "latest" : version;
-    query += "&v=" + v;
-  } else {
-    query += "&loadversion=true";
+  const search = new URLSearchParams();
+  const query = {
+    viewURL,
+    dataURL,
+    config,
+    ...props.queryParameters
+  };
+  for (let [key, value] of Object.entries(query)) {
+    if (value) {
+      search.set(key, value);
+    }
   }
-  return /* @__PURE__ */ React.createElement("iframe", { allowFullScreen: true, src: props.url + "#?" + query, style });
+  return /* @__PURE__ */ React.createElement(
+    "iframe",
+    {
+      allowFullScreen: true,
+      src: props.url + "#?" + search.toString(),
+      style
+    }
+  );
 }
 module.exports = React.memo(Visualizer);

package/dist/makeVisualizerPage.js

@@ -21,7 +21,7 @@ function makeVisualizerPage(options = {}) {
       throw new Error("script must have url or content");
     }
   }, "");
-  return template.replaceAll("{{ cdn }}", cdn).replaceAll("{{ fallbackVersion }}", fallbackVersion).replace("{{ scripts }}", scriptsStr).replace("{{ queryType }}", queryType).replace("{{ loadversion }}", loadversion);
+  return template.replace("{{ cdn }}", cdn).replace("{{ fallbackVersion }}", fallbackVersion).replace("{{ scripts }}", scriptsStr).replace("{{ queryType }}", queryType).replace("{{ loadversion }}", loadversion);
 }
 module.exports = makeVisualizerPage;
 const validLoadversion = ["none", "exact", "latest-major"];

package/dist/visualizerTemplate.js

@@ -37,16 +37,17 @@ window.onload = function () {
   const url = search.get('viewURL');
   const v = search.get('v');
   const loadversion = search.get('loadversion') || '{{ loadversion }}';
+  const fallbackVersion = search.get('fallbackVersion') || '{{ fallbackVersion }}';
   if (v) {
     addVisualizer(checkVersion(v));
     return;
   }
 
   if (loadversion === 'none' || !url) {
-    addVisualizer('{{ fallbackVersion }}');
+    addVisualizer(fallbackVersion);
   } else {
     const viewReg = new RegExp('/view.json$');
-    var docUrl = url.replace(viewReg, '');
+    const docUrl = url.replace(viewReg, '');
     fetchUrl(docUrl)
       .then(function (data) {
         if (!data.version && (!data.$content || !data.$content.version))
@@ -70,11 +71,10 @@ window.onload = function () {
   }
 
   function addVisualizer(version) {
-    var cdn = '{{ cdn }}';
-    var visualizer = document.createElement('script');
-    var prefix = cdn;
-    var datamain = prefix + '/' + version + '/init';
-    var requirejs = prefix + '/' + version + '/components/requirejs/require.js';
+    const cdn = '{{ cdn }}';
+    const visualizer = document.createElement('script');
+    const datamain = cdn + '/' + version + '/init';
+    const requirejs = cdn + '/' + version + '/components/requirejs/require.js';
 
     visualizer.setAttribute('data-main', datamain);
     visualizer.setAttribute('src', requirejs);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-visualizer",
-  "version": "4.1.0",
+  "version": "5.0.0",
   "description": "The visualizer in a react component",
   "main": "dist/index.js",
   "scripts": {
@@ -32,6 +32,7 @@
   },
   "devDependencies": {
     "@types/node": "^24.10.13",
+    "@types/react": "^18.3.28",
     "esbuild": "^0.27.3",
     "prettier": "^3.8.1",
     "react": "^18.3.1",