Add ESM bundle for Kedro-Viz (#2268)

* add esm draft Signed-off-by: ravi_kumar_pilla <[email protected]> * remove esm bundle from secret scan Signed-off-by: ravi_kumar_pilla <[email protected]> --------- Signed-off-by: ravi_kumar_pilla <[email protected]>
kedro-org · Feb 11, 2025 · 4601642 · 4601642
1 parent 0690aaf
commit 4601642
Show file tree

Hide file tree

Showing 10 changed files with 216 additions and 1 deletion.
diff --git a/Makefile b/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:esm
 	python3 tools/versioning.py $(VERSION)
 
 sign-off:

diff --git a/RELEASE.md b/RELEASE.md
@@ -11,6 +11,7 @@ Please follow the established format:
 
 ## Bug fixes and other changes
 
+- Add ESM bundle for Kedro-Viz. (#2268)
 - Fix `%run_viz` using old process in jupyter notebook. (#2267)
 
 ## Community contributions

diff --git a/esm/d1fbb23f3ade3692e5ec.worker.js b/esm/d1fbb23f3ade3692e5ec.worker.js
diff --git a/esm/d1fbb23f3ade3692e5ec.worker.js.LICENSE.txt b/esm/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.
+ * #------------------------------------------------------------------------------
+ **/
diff --git a/esm/kedro-viz.production.mjs b/esm/kedro-viz.production.mjs
diff --git a/esm/kedro-viz.production.mjs.LICENSE.txt b/esm/kedro-viz.production.mjs.LICENSE.txt
@@ -0,0 +1,135 @@
+/*!
+	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.js
+ *
+ * Copyright (c) Meta Platforms, Inc. and 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.
+ */
+
+/** @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.
+ * #------------------------------------------------------------------------------
+ **/
diff --git a/package.json b/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:esm": "rm -rf esm && webpack --config webpack.config.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",

diff --git a/src/utils/viz-entry.js b/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 };
diff --git a/trufflehog-ignore.txt b/trufflehog-ignore.txt
@@ -9,4 +9,5 @@ src/utils/random-utils.js
 src/components/update-reminder/update-reminder-content.js
 src/components/feature-hints/feature-hints-content.js
 cypress/fixtures/graphql/
-demo-project/build/graphql/
+demo-project/build/graphql/
+esm/
diff --git a/webpack.config.js b/webpack.config.js
@@ -0,0 +1,58 @@
+const path = require('path');
+const TerserPlugin = require('terser-webpack-plugin');
+
+module.exports = {
+    mode: 'production', // Ensures optimizations for production by default
+    entry: {
+        "kedro-viz": './src/utils/viz-entry.js',
+    },
+    output: {
+        path: path.resolve(__dirname, 'esm'),
+        filename: '[name].production.mjs',
+        library: {
+            type: 'module',
+        },
+    },
+    externalsType: 'module',
+    externals: {
+        'plotly.js-dist-min': 'https://cdn.plot.ly/plotly-2.26.0.min.js',
+    },
+    experiments: {
+        outputModule: true,
+    },
+    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', 'css-loader', 'sass-loader'],
+                sideEffects: true,
+            },
+        ],
+    },
+    optimization: {
+        minimize: true,
+        minimizer: [
+            new TerserPlugin({
+                terserOptions: {
+                    compress: {
+                        drop_console: true, // Removes console logs
+                    },
+                    output: {
+                        comments: false, // Remove comments
+                    },
+                },
+            }),
+        ],
+    },
+};