visualifyjs 2.5.3-2.dev → 3.0.0

package/src/index.js

@@ -1,62 +1,82 @@
-/*
- * @Author       : Lihao leolihao@arizona.edu
- * @Date         : 2023-11-29 15:35:28
- * @FilePath     : /visualifyjs/src/index.js
- * @Description  :
- * Copyright (c) 2023 by Lihao (leolihao@arizona.edu), All Rights Reserved.
- */
-import './_css/index.css';
-import 'bootstrap/dist/css/bootstrap.min.css';
-import reportWebVitals from './_utils/reportWebVitals';
-import Recharts from './core/recharts';
-import CreateApp from './core/visualify';
-import LiveEditor from './core/liveEditor';
-
-try {
-	if (window.$visualify) {
-		if (process.env.NODE_ENV === 'development') {
-			console.log('window.$visualify', window.$visualify);
-			window.$visualify.Recharts = Recharts;
-			window.$visualify.LiveEditor = LiveEditor;
-		}
-		if (window.$visualify.mode === 'charts') {
-			window.$visualify.Recharts = Recharts;
-			window.$visualify.LiveEditor = LiveEditor;
-		} else if (
-			window.$visualify.mode === 'pages' ||
-			window.$visualify.mode === undefined
-		) {
-			// loads the visualify in pages mode
-			CreateApp(window.$visualify);
-		} else {
-			console.error('mode should be recharts or pages');
-		}
-
-		// If you want to start measuring performance in your app, pass a function
-		// to log results (for example: reportWebVitals(console.log))
-		// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
-		reportWebVitals();
-	} else {
-		// If load js before $visualify is set
-		let _visualify;
-		Object.defineProperty(window, '$visualify', {
-			set(config) {
-				// Store the value internally
-				_visualify = config;
-				// Additional code for after $visualify is set
-				if (config.mode === 'charts')
-					throw new Error(
-						'You need to initialize $visualify before using recharts',
-					);
-				// loads the visualify in page mode
-				else if (config.mode === 'pages') CreateApp(window.$visualify);
-				else console.warn(`Unsupported mode: ${config.mode}`);
-			},
-			get() {
-				return _visualify;
-			},
-		});
-	}
-} catch (e) {
-	console.error(e);
-}
+/*
+ * @Author       : Lihao leolihao@arizona.edu
+ * @Date         : 2023-11-29 15:35:28
+ * @FilePath     : /visualifyjs/src/index.js
+ * @Description  :
+ * Copyright (c) 2023 by Lihao (leolihao@arizona.edu), All Rights Reserved.
+ */
+import './_css/index.css';
+import 'bootstrap/dist/css/bootstrap.min.css';
+import reportWebVitals from './_utils/reportWebVitals';
+import Recharts from './core/recharts';
+import CreateApp from './core/visualify';
+import LiveEditor from './core/liveEditor';
+
+// Runtime check for required CDN dependencies
+if (typeof window !== 'undefined') {
+	if (typeof window.echarts === 'undefined') {
+		console.warn(
+			'[Visualify] ECharts not found. Charts will not render.\n' +
+			'Add this before visualify.js:\n' +
+			'<script src="https://cdn.jsdelivr.net/npm/echarts@5.4.3/dist/echarts.min.js"></script>\n' +
+			'Or use visualify-loader.js which auto-loads CDN dependencies.'
+		);
+	}
+	if (typeof window.Plotly === 'undefined') {
+		console.warn(
+			'[Visualify] Plotly not found. Plotly charts will not render.\n' +
+			'Add this before visualify.js:\n' +
+			'<script src="https://cdn.plot.ly/plotly-2.27.0.min.js"></script>\n' +
+			'Or use visualify-loader.js which auto-loads CDN dependencies.'
+		);
+	}
+}
+
+try {
+	if (window.$visualify) {
+		if (process.env.NODE_ENV === 'development') {
+			console.log('window.$visualify', window.$visualify);
+			window.$visualify.Recharts = Recharts;
+			window.$visualify.LiveEditor = LiveEditor;
+		}
+		if (window.$visualify.mode === 'charts') {
+			window.$visualify.Recharts = Recharts;
+			window.$visualify.LiveEditor = LiveEditor;
+		} else if (
+			window.$visualify.mode === 'pages' ||
+			window.$visualify.mode === undefined
+		) {
+			// loads the visualify in pages mode
+			CreateApp(window.$visualify);
+		} else {
+			console.error('mode should be recharts or pages');
+		}
+
+		// If you want to start measuring performance in your app, pass a function
+		// to log results (for example: reportWebVitals(console.log))
+		// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
+		reportWebVitals();
+	} else {
+		// If load js before $visualify is set
+		let _visualify;
+		Object.defineProperty(window, '$visualify', {
+			set(config) {
+				// Store the value internally
+				_visualify = config;
+				// Additional code for after $visualify is set
+				if (config.mode === 'charts')
+					throw new Error(
+						'You need to initialize $visualify before using recharts',
+					);
+				// loads the visualify in page mode
+				else if (config.mode === 'pages') CreateApp(window.$visualify);
+				else console.warn(`Unsupported mode: ${config.mode}`);
+			},
+			get() {
+				return _visualify;
+			},
+		});
+	}
+} catch (e) {
+	console.error(e);
+}

package/src/loader.js

@@ -0,0 +1,103 @@
+/**
+ * Visualify.js CDN Loader
+ *
+ * Lightweight bootstrap script that auto-loads required CDN dependencies
+ * (echarts, plotly) before loading the main visualify.js bundle.
+ * Three.js is bundled with visualify.js and doesn't need separate CDN loading.
+ *
+ * Usage — replace the manual CDN <script> tags + visualify.js with just:
+ *   <script src="visualify-loader.js"></script>
+ *
+ * The loader will:
+ * 1. Detect which globals are already available (skip if loaded)
+ * 2. Load missing dependencies from CDN in parallel
+ * 3. Load visualify.js after all deps are ready
+ * 4. Initialize normally via window.$visualify
+ */
+(function () {
+	'use strict';
+
+	// CDN dependency definitions
+	// Each entry: [globalName, cdnUrl, optional?]
+	var CDN_DEPS = [
+		['echarts', 'https://cdn.jsdelivr.net/npm/echarts@5.4.3/dist/echarts.min.js', false],
+		['echartsGL', 'https://cdn.jsdelivr.net/npm/echarts-gl@2.0.9/dist/echarts-gl.min.js', true],
+		['Plotly', 'https://cdn.plot.ly/plotly-2.27.0.min.js', true],
+	];
+
+	/**
+	 * Load a single script from URL, returns a Promise
+	 */
+	function loadScript(url) {
+		return new Promise(function (resolve, reject) {
+			var script = document.createElement('script');
+			script.src = url;
+			script.async = true;
+			script.onload = resolve;
+			script.onerror = function () {
+				// Don't reject — graceful degradation for optional deps
+				console.warn('[Visualify Loader] Failed to load: ' + url);
+				resolve();
+			};
+			document.head.appendChild(script);
+		});
+	}
+
+	/**
+	 * Resolve the path to visualify.js relative to this loader script
+	 */
+	function resolveVisualilyPath() {
+		var scripts = document.getElementsByTagName('script');
+		for (var i = scripts.length - 1; i >= 0; i--) {
+			var src = scripts[i].src || '';
+			if (src.indexOf('visualify-loader') !== -1) {
+				// Same directory as loader
+				return src.replace(/visualify-loader[^/]*\.js.*$/, 'visualify.js');
+			}
+		}
+		// Fallback: assume same directory
+		return './visualify.js';
+	}
+
+	/**
+	 * Main loader logic
+	 */
+	function boot() {
+		var promises = [];
+
+		CDN_DEPS.forEach(function (dep) {
+			var globalName = dep[0];
+			var url = dep[1];
+			var optional = dep[2];
+
+			// Skip if global already exists (user loaded it manually)
+			if (window[globalName]) {
+				return;
+			}
+
+			// Skip optional deps if user opts out via config
+			if (optional && window.$visualify && window.$visualify.skip) {
+				var skip = window.$visualify.skip;
+				if (Array.isArray(skip) && skip.indexOf(globalName.toLowerCase()) !== -1) {
+					return;
+				}
+			}
+
+			promises.push(loadScript(url));
+		});
+
+		// After all CDN deps loaded, load visualify.js
+		Promise.all(promises).then(function () {
+			return loadScript(resolveVisualilyPath());
+		}).then(function () {
+			// visualify.js self-initializes via window.$visualify
+		});
+	}
+
+	// Ensure DOM is ready
+	if (document.readyState === 'loading') {
+		document.addEventListener('DOMContentLoaded', boot);
+	} else {
+		boot();
+	}
+})();

package/src/setupTests.js

@@ -1,5 +1,5 @@
-// jest-dom adds custom jest matchers for asserting on DOM nodes.
-// allows you to do things like:
-// expect(element).toHaveTextContent(/react/i)
-// learn more: https://github.com/testing-library/jest-dom
-import '@testing-library/jest-dom';
+// jest-dom adds custom jest matchers for asserting on DOM nodes.
+// allows you to do things like:
+// expect(element).toHaveTextContent(/react/i)
+// learn more: https://github.com/testing-library/jest-dom
+import '@testing-library/jest-dom';

package/tsconfig.json

@@ -0,0 +1,51 @@
+{
+  "compilerOptions": {
+    "target": "ES2020",
+    "module": "commonjs",
+    "lib": ["ES2020", "DOM", "DOM.Iterable"],
+    "jsx": "react-jsx",
+    "strict": true,
+    "esModuleInterop": true,
+    "skipLibCheck": true,
+    "forceConsistentCasingInFileNames": true,
+    "declaration": true,
+    "declarationMap": true,
+    "outDir": "./dist",
+    "rootDir": "./src",
+    "moduleResolution": "node",
+    "resolveJsonModule": true,
+    "allowSyntheticDefaultImports": true,
+    "experimentalDecorators": true,
+    "emitDecoratorMetadata": true,
+    "noImplicitAny": true,
+    "noImplicitReturns": true,
+    "noImplicitThis": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "strictNullChecks": true,
+    "strictFunctionTypes": true,
+    "strictBindCallApply": true,
+    "strictPropertyInitialization": true,
+    "noFallthroughCasesInSwitch": true,
+    "sourceMap": true,
+    "baseUrl": ".",
+    "paths": {
+      "@/*": ["src/*"],
+      "@core/*": ["src/core/*"],
+      "@config/*": ["src/config/*"],
+      "@types/*": ["types/*"]
+    },
+    "typeRoots": ["./node_modules/@types", "./types"]
+  },
+  "include": [
+    "src/**/*",
+    "types/**/*"
+  ],
+  "exclude": [
+    "node_modules",
+    "dist",
+    "build",
+    "**/*.test.js",
+    "**/*.spec.js"
+  ]
+}