react-visualizer 4.0.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',
@@ -13,6 +21,9 @@ const { values: args } = parseArgs({
     fallbackVersion: {
       type: 'string',
     },
+    loadversion: {
+      type: 'string',
+    },
     cdn: {
       type: 'string',
     },
@@ -44,6 +55,13 @@ Options:
   --fallbackVersion <string>
       Visualizer version to use if it is not specified in the search url and not loaded from the view
 
+  --loadversion <'none' | 'exact' | 'major-latest'>
+      What version to load based on the version referenced by the view.
+        'exact': load exactly the version of the view.
+        'latest-major': use the major version of the view, but its latest version. 
+        'none': do not use the view to decide which version to load.
+      Default: 'none'
+      
   --cdn <string>
       CDN base URL for visualizer assets
 
@@ -51,8 +69,10 @@ Options:
       Output file path to which to write the html file
       Default: visualizer.html
 
-  --queryType <string>
-      Where the search parameters should be read from: 'fragment' or 'query'
+  --queryType <'fragment' | 'query'>
+      Where the search parameters should be read from.
+        'query': Uses the regular query string of the URL
+        'fragment': Uses the fragment identifier (aka hash) of the URL as query string
       Default: query
 `);
 }

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

@@ -5,8 +5,11 @@ function makeVisualizerPage(options = {}) {
     cdn = "https://www.lactame.com/visualizer",
     fallbackVersion = "latest",
     queryType = "fragment",
+    loadversion = "none",
     scripts = []
   } = options;
+  validateQueryType(queryType);
+  validateLoadVersion(loadversion);
   const scriptsStr = scripts.reduce(function(value, script) {
     if (script.url) {
       return value + `<script src="${script.url}"><\/script>
@@ -18,6 +21,22 @@ 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);
+  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"];
+function validateLoadVersion(loadversion) {
+  if (!validLoadversion.includes(loadversion)) {
+    throw new Error(
+      `Invalid "loadversion" parameter: ${loadversion}. Allowed values: ${validLoadversion.join(", ")}`
+    );
+  }
+}
+const validQueryType = ["fragment", "query"];
+function validateQueryType(queryType) {
+  if (!validQueryType.includes(queryType)) {
+    throw new Error(
+      `Invalid "queryType" parameter: ${queryType}, allowed values: ${validQueryType.join(", ")}`
+    );
+  }
+}

package/dist/visualizerTemplate.js

@@ -36,17 +36,18 @@ window.onload = function () {
   const search = new URLSearchParams(query.startsWith("#") ? query.slice(1) : query);
   const url = search.get('viewURL');
   const v = search.get('v');
-  const loadversion = search.get('loadversion');
+  const loadversion = search.get('loadversion') || '{{ loadversion }}';
+  const fallbackVersion = search.get('fallbackVersion') || '{{ fallbackVersion }}';
   if (v) {
     addVisualizer(checkVersion(v));
     return;
   }
 
-  if (!loadversion || !url) {
-    addVisualizer('{{ fallbackVersion }}');
+  if (loadversion === 'none' || !url) {
+    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.0.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",