react-visualizer 5.1.1 → 5.2.1

package/README.md

@@ -12,6 +12,10 @@ CLI example:
 npx react-visualizer makeVisualizerPage --help
 ```
 
+Dev example:
+
+node bin/makeVisualizerPage.js --config=config.example.json
+
 Node.js API: see options of `makeVisualizerPage` function.
 
 ## Visualizer

package/dist/bin/makeVisualizerPage.js

@@ -37,6 +37,12 @@ const { values: args } = parseArgs({
       type: "string",
       default: "query"
     },
+    viewURL: {
+      type: "string"
+    },
+    configURL: {
+      type: "string"
+    },
     config: {
       type: "string"
     }
@@ -86,6 +92,12 @@ Options:
 
   --scriptUrl <string>
       Script source url. You can specify this option multiple times to include multiple URLs.
+      
+  --viewURL
+      URL to pass to the visualizer's data-ci-view attribute.
+      
+  --configURL
+      URL to pass to the visualizer's data-ci-config attribute.
 
   --out <string>
       Output file path to which to write the html file
@@ -99,7 +111,7 @@ Options:
       
   --config <string>
       Path to a configuration file.
-      Via the configuration file, you can specify additional options which should be passed to makeVisualizerPage generator.
+      The configuration file is read as JSON and passed as such to the makeVisualizerPage function.
       The "out" parameter must always be specified via the command line options.
 `);
 }

package/dist/src/makeVisualizerPage.js

@@ -6,6 +6,8 @@ function makeVisualizerPage(options = {}) {
     fallbackVersion = "latest",
     queryType = "fragment",
     loadversion = "none",
+    configURL = "",
+    viewURL = "",
     scripts = []
   } = options;
   validateQueryType(queryType);
@@ -21,7 +23,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);
+  return template.replace("{{ cdn }}", cdn).replace("{{ fallbackVersion }}", fallbackVersion).replace("{{ scripts }}", scriptsStr).replace("{{ queryType }}", queryType).replace("{{ loadversion }}", loadversion).replace("{{ configURL }}", configURL).replace("{{ viewURL }}", viewURL);
 }
 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 url = search.get('viewURL');
+  const viewURL = search.get('viewURL');
   const v = search.get('v');
   const loadversion = search.get('loadversion') || '{{ loadversion }}';
   const fallbackVersion = search.get('fallbackVersion') || '{{ fallbackVersion }}';
@@ -43,11 +43,11 @@ window.onload = function () {
     return;
   }
 
-  if (loadversion === 'none' || !url) {
+  if (loadversion === 'none' || !viewURL) {
     addVisualizer(fallbackVersion);
   } else {
     const viewReg = new RegExp('/view.json$');
-    const docUrl = url.replace(viewReg, '');
+    const docUrl = viewURL.replace(viewReg, '');
     fetchUrl(docUrl)
       .then(function (data) {
         if (!data.version && (!data.$content || !data.$content.version))
@@ -56,7 +56,7 @@ window.onload = function () {
       })
       .catch(function () {
         // Try fetching the view.json if it did not work with the document
-        return fetchUrl(url);
+        return fetchUrl(viewURL);
       })
       .then(function (data) {
         let version = checkVersion(data.version || data.$content.version);
@@ -72,11 +72,22 @@ window.onload = function () {
 
   function addVisualizer(version) {
     const cdn = '{{ cdn }}';
+    const viewURL = '{{ viewURL }}';
+    const configURL = '{{ configURL }}';
     const visualizer = document.createElement('script');
     const datamain = cdn + '/' + version + '/init';
     const requirejs = cdn + '/' + version + '/components/requirejs/require.js';
+    
+    const visualizerDiv = document.getElementById('ci-visualizer');
+    
 
     visualizer.setAttribute('data-main', datamain);
+    if(viewURL) {
+      visualizerDiv.setAttribute('data-ci-view', viewURL);
+    }
+    if(configURL) {
+      visualizerDiv.setAttribute('data-ci-config', configURL);
+    }
     visualizer.setAttribute('src', requirejs);
     document.head.appendChild(visualizer);
   }

package/package.json

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