importmap for versions of tableau

src/Tableau/View.jsx

@@ -21,8 +21,8 @@ const Tableau = (props) => {
     loaded = false,
     mode = 'view',
     screen = {},
-    setError = () => {},
-    setLoaded = () => {},
+    setError = () => { },
+    setLoaded = () => { },
     version = '2.8.0',
   } = props;
   const {
@@ -35,8 +35,21 @@ const Tableau = (props) => {
   const defaultUrl = data.url;
   const url = props.url || defaultUrl;
 
+  const setTableauScript = (version) => {
+    switch (version) {
+      case '2.8.0':
+        console.log('Loading Tableau 2.8.0');
+        //import { tableau as tableau280 } from "tableau280"; && return tableau280
+        break;
+      default:
+        console.log(`Sorry, we don't support ${version} yet.`);
+    }
+  }
+
+
   //load tableau from script tag
   const tableau = isMyScriptLoaded(version) && __CLIENT__ ? window.tableau : '';
+  //TODO: if using an importmap then there would be tableau1, tableau2, etc and ^^ would need a switch for each version. This way, the scripts needed are there, loaded dinamicaly
 
   const onFilterChange = (filter) => {
     const newFilters = { ...filters.current };
@@ -162,7 +175,7 @@ const Tableau = (props) => {
       props.setTableauApi(version, props.mode);
     }
     if (__CLIENT__) {
-      loadTableauScript(() => {}, version);
+      loadTableauScript(() => { }, version);
     }
     /* eslint-disable-next-line */
   }, [version]);

src/helpers.js

@@ -18,12 +18,24 @@ const loadTableauScript = (callback, version) => {
   }
   //callback, if needed
   if (existingScript && callback) callback();
+
+  //TODO: instead of replacing the tableau script  
+  //   <script type="importmap">
+  //   {
+  //     "imports": {
+  //       "tableau1": "https://example.com/shapes/tableau1.js",
+  //       "tableau2": "https://example.com/shapes/tableau2.js",
+  //       "tableau3": "https://example.com/shapes/tableau3.js",
+  //     }
+  //   }
+  // </script>
+  //try creating an importmap script with each different tableau version https://developer.mozilla.org/en-US/docs/Web/HTML/Element/script#importing_modules_with_importmap
 };
 
 const isMyScriptLoaded = (id) => {
   //check for loaded Tableau script in dom scripts
   var scripts = document.getElementsByTagName('script');
-  for (var i = scripts.length; i--; ) {
+  for (var i = scripts.length; i--;) {
     // eslint-disable-next-line eqeqeq
     if (scripts[i].id == `tableauJS`) return true;
   }