Add UMD bundle for Kedro-Viz

Makefile

@@ -56,6 +56,7 @@ strawberry-server:
 	strawberry server --app-dir=package kedro_viz.api.graphql.schema --host 127.0.0.1
 
 version:
+	npm run build:umd
 	python3 tools/versioning.py $(VERSION)
 
 sign-off:

RELEASE.md

@@ -5,6 +5,15 @@
 - Use present tense (e.g. 'Add new feature')
 - Include the ID number for the related PR (or PRs) in parentheses
 -->
+# Upcoming Release
+
+## Major features and improvements
+
+## Bug fixes and other changes
+
+- Add UMD bundle for Kedro-Viz. (#2256)
+
+## Community contributions
 
 # Release 10.2.0
 

package.json

@@ -14,6 +14,7 @@
   "proxy": "http://localhost:4142/",
   "scripts": {
     "build": "cross-env GENERATE_SOURCEMAP=false react-scripts build && cp ./build/index.html ./build/404.html",
+    "build:umd": "rm -rf umd && webpack --config webpack.umd.js",
     "postbuild": "rm -rf build/api",
     "start": "REACT_APP_DATA_SOURCE=$DATA NODE_OPTIONS=\"--dns-result-order=ipv4first\" npm-run-all -p start:app start:lib",
     "start:dev": "rm -rf node_modules/.cache && npm start",

src/utils/viz-entry.js

@@ -0,0 +1,5 @@
+import React from 'react';
+import { createRoot } from 'react-dom/client';
+import KedroViz from '../components/app/index';
+
+export { React, createRoot, KedroViz };

umd/d1fbb23f3ade3692e5ec.worker.js.LICENSE.txt

@@ -0,0 +1,9 @@
+/** @license kiwi.js v1.1.2
+ * #------------------------------------------------------------------------------
+ * # Copyright (c) 2013, Nucleic Development Team & H. Rutjes.
+ * #
+ * # Distributed under the terms of the Modified BSD License.
+ * #
+ * # The full license is in the file COPYING.txt, distributed with this software.
+ * #------------------------------------------------------------------------------
+ **/

umd/kedro-viz.production.min.js.LICENSE.txt

@@ -0,0 +1,9 @@
+/** @license kiwi.js v1.1.2
+ * #------------------------------------------------------------------------------
+ * # Copyright (c) 2013, Nucleic Development Team & H. Rutjes.
+ * #
+ * # Distributed under the terms of the Modified BSD License.
+ * #
+ * # The full license is in the file COPYING.txt, distributed with this software.
+ * #------------------------------------------------------------------------------
+ **/

umd/vendors.production.min.js.LICENSE.txt

@@ -0,0 +1,115 @@
+/*!
+	Copyright (c) 2018 Jed Watson.
+	Licensed under the MIT License (MIT), see
+	http://jedwatson.github.io/classnames
+*/
+
+/*! *****************************************************************************
+Copyright (c) Microsoft Corporation. All rights reserved.
+Licensed under the Apache License, Version 2.0 (the "License"); you may not use
+this file except in compliance with the License. You may obtain a copy of the
+License at http://www.apache.org/licenses/LICENSE-2.0
+
+THIS CODE IS PROVIDED ON AN *AS IS* BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+KIND, EITHER EXPRESS OR IMPLIED, INCLUDING WITHOUT LIMITATION ANY IMPLIED
+WARRANTIES OR CONDITIONS OF TITLE, FITNESS FOR A PARTICULAR PURPOSE,
+MERCHANTABLITY OR NON-INFRINGEMENT.
+
+See the Apache Version 2.0 License for specific language governing permissions
+and limitations under the License.
+***************************************************************************** */
+
+/**
+ * @license
+ * Lodash <https://lodash.com/>
+ * Copyright OpenJS Foundation and other contributors <https://openjsf.org/>
+ * Released under MIT license <https://lodash.com/license>
+ * Based on Underscore.js 1.8.3 <http://underscorejs.org/LICENSE>
+ * Copyright Jeremy Ashkenas, DocumentCloud and Investigative Reporters & Editors
+ */
+
+/**
+ * @license React
+ * react-dom.production.min.js
+ *
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+/**
+ * @license React
+ * react-is.production.min.js
+ *
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+/**
+ * @license React
+ * react-jsx-runtime.production.min.js
+ *
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+/**
+ * @license React
+ * react.production.min.js
+ *
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+/**
+ * @license React
+ * scheduler.production.min.js
+ *
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+/**
+ * @license React
+ * use-sync-external-store-shim.production.min.js
+ *
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+/**
+ * @license React
+ * use-sync-external-store-shim/with-selector.production.min.js
+ *
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+/**
+ * what-input - A global utility for tracking the current input method (mouse, keyboard or touch).
+ * @version v5.2.12
+ * @link https://github.com/ten1seven/what-input
+ * @license MIT
+ */
+
+/** @license React v16.13.1
+ * react-is.production.min.js
+ *
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */

webpack.umd.js

@@ -0,0 +1,70 @@
+const path = require('path');
+const TerserPlugin = require('terser-webpack-plugin');
+
+// Bundle and inline web-workers
+module.exports = [
+    {
+        mode: 'production', // Production mode
+        entry: {
+            "kedro-viz": './src/utils/viz-entry.js', // Entry point for KedroViz
+        },
+        output: {
+            path: path.resolve(__dirname, 'umd'),
+            filename: '[name].production.min.js',
+            library: 'KedroVizBundle', // Name of the UMD library
+            libraryTarget: 'umd', // UMD allows compatibility across environments
+            globalObject: 'this', // Ensures compatibility for both browsers and Node.js
+        },
+        externals: {
+            'plotly.js-dist-min': 'Plotly',
+        },
+        module: {
+            rules: [
+                {
+                    test: /\.(js|jsx)$/,
+                    exclude: [/node_modules/, /(?:\.test\.js|\.spec\.js)$/],
+                    use: {
+                        loader: 'babel-loader',
+                        options: {
+                            presets: ['@babel/preset-env', '@babel/preset-react'],
+                        },
+                    },
+                    sideEffects: false,
+                },
+                {
+                    test: /\.scss$/,
+                    use: [
+                        'style-loader', // Injects styles into the DOM
+                        'css-loader',   // Translates CSS into CommonJS
+                        'sass-loader',  // Compiles SCSS to CSS
+                    ],
+                    sideEffects: true,
+                },
+            ],
+        },
+        optimization: {
+            usedExports: true, // Helps in tree shaking, eliminating unused code
+            splitChunks: { // Group external dependencies as a separate chunk
+                chunks: 'all',
+                cacheGroups: {
+                    vendors: {
+                        test: /[\\/]node_modules[\\/]/,
+                        name: 'vendors',
+                        chunks: 'all',
+                    },
+                },
+            },
+            minimize: true, // Minify the output
+            minimizer: [new TerserPlugin({
+                terserOptions: {
+                    compress: {
+                        drop_console: true, // Remove console logs
+                    },
+                    output: {
+                        comments: false, // Remove comments
+                    },
+                },
+            })],
+        }
+    },
+];